/*
 Theme Name:   Toriko Child
 Theme URI:    https://torikocorp.com
 Description:  Hello Elementor child theme for Toriko Corporation
 Author:       Toriko Corporation
 Author URI:   https://torikocorp.com
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  toriko-child
*/

/* ==========================================================================
   TORIKO DESIGN TOKENS (CSS Custom Properties)
   Source of truth: Figma file i8lWdA6qmJlmBIEcr6ELLH
   ========================================================================== */

:root {
  /* Colors */
  --toriko-bg:           #000000;
  --toriko-panel:        #111511;
  --toriko-green:        #5EE200;
  --toriko-green-alpha:  rgba(94, 226, 0, 0.41);
  --toriko-body:         #D9D9D9;
  --toriko-white:        #FFFFFF;
  --toriko-border-gray:  #616161;

  /* Typography - Families */
  --toriko-font-heading: 'Montserrat', sans-serif;
  --toriko-font-body:    'Open Sans', sans-serif;

  /* Typography - Sizes */
  --toriko-text-hero:    96px;
  --toriko-text-h2:      64px;
  --toriko-text-tab-lg:  36px;
  --toriko-text-card:    24px;
  --toriko-text-nav:     20px;
  --toriko-text-body-lg: 20px;
  --toriko-text-body:    18px;
  --toriko-text-footer:  16px;
  --toriko-text-small:   14px;

  /* Spacing */
  --toriko-content-max:  1780px;
  --toriko-content-pad:  144px;
  --toriko-section-gap:  80px;

  /* Dots */
  --toriko-dot-sm:       14px;
  --toriko-dot-lg:       16px;
}

/* ==========================================================================
   BASE OVERRIDES
   ========================================================================== */

body,
body.elementor-page {
  background-color: var(--toriko-bg) !important;
  color: var(--toriko-body);
  font-family: var(--toriko-font-body);
  font-size: var(--toriko-text-body);
  line-height: 2.0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--toriko-font-heading);
  color: var(--toriko-white);
  font-weight: 300;
}

a {
  color: var(--toriko-body);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--toriko-green);
}

/* ==========================================================================
   ELEMENTOR OVERRIDES
   ========================================================================== */

.elementor-section,
.elementor-element {
  --e-global-color-primary: var(--toriko-green);
  --e-global-color-secondary: var(--toriko-white);
  --e-global-color-text: var(--toriko-body);
  --e-global-color-accent: var(--toriko-green);
}

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--toriko-font-heading);
}

/* Ensure containers respect dark bg by default */
.e-con {
  --background-color: var(--toriko-bg);
}

/*
 * Optional: add class "toriko-text-col" to the Elementor container
 * that holds your heading + paragraph (the left column on About Us).
 *
 * Elementor 4 sets --flex-shrink: 0 on containers via inline CSS variables,
 * which prevents columns from shrinking and stops text from wrapping.
 * This class overrides those variables on that container only.
 */
 .toriko-text-col {
  --flex-shrink: 1 !important;
  --flex-grow: 1 !important;
  --flex-basis: 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.toriko-text-col .elementor-widget,
.toriko-text-col .elementor-widget-container,
.toriko-text-col .elementor-text-editor,
.toriko-text-col .elementor-text-editor p,
.toriko-text-col .elementor-heading-title {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}