/* ==========================================================================
   TORIKO DECORATIVE SYSTEM — v4 (JS-injected elements)

   All decorative overlays are REAL DOM elements injected by
   toriko-decorative.js. This CSS only styles them.

   CSS classes you add to Elementor containers:
     toriko-hero              → hero section outermost container (grid overlay)
     toriko-hero-stepped-bg   → hero black background + Figma gradient fade (use with toriko-hero)
     toriko-cta           → Elementor Button widget (Advanced > CSS Classes)
     toriko-footer-grid   → footer contact column container
     toriko-dots-green    → any container that needs green corner dots
     toriko-dots-gray     → any container that needs gray corner dots
     toriko-frame-left-green → green left line + TL dot + BL dot (footer accent)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO GRID OVERLAY
   Matches Figma: vertical lines ~112px apart, horizontal lines ~120px apart,
   fading out to the right. Covers the top-left area of the hero.
   -------------------------------------------------------------------------- */

.toriko-hero {
  position: relative;
}

/* Keep all Elementor content above the decorative grid */
.toriko-hero > .e-con-inner {
  position: relative;
  z-index: 1;
}

.toriko-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 600px;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 119px,
      rgba(255, 255, 255, 0.45) 119px,
      rgba(255, 255, 255, 0.45) 120px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 111px,
      rgba(255, 255, 255, 0.45) 111px,
      rgba(255, 255, 255, 0.45) 112px
    );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 55%,
    transparent 90%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 55%,
    transparent 90%
  );
}

/* --------------------------------------------------------------------------
   2. FOOTER GRID OVERLAY
   Same line pattern but covers the full footer contact area.
   -------------------------------------------------------------------------- */

.toriko-grid-overlay.toriko-grid-footer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 99px,
      rgba(255, 255, 255, 0.15) 99px,
      rgba(255, 255, 255, 0.15) 100px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 97px,
      rgba(255, 255, 255, 0.15) 97px,
      rgba(255, 255, 255, 0.15) 98px
    );
  -webkit-mask-image: none;
  mask-image: none;
}

/* All direct children of the footer-grid container sit above the lines */
.toriko-footer-grid > .e-con-inner,
.toriko-footer-grid > .e-con-inner > *,
.toriko-footer-grid > .elementor-widget-wrap,
.toriko-footer-grid > .elementor-widget-wrap > *,
.toriko-footer-grid > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   3. CTA BUTTON DOTS + BORDER
   The JS injects .toriko-injected-dot spans inside the <a.elementor-button>.
   We style the button border + dot positions here.

   Default: gray dots + gray border
   Hover:   green dots + green border
   -------------------------------------------------------------------------- */

.toriko-cta .elementor-button {
  border: 2px solid #616161 !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: border-color 0.3s ease, color 0.3s ease !important;
}

.toriko-cta .elementor-button:hover {
  border-color: #5EE200 !important;
}

.toriko-cta .elementor-button:hover .toriko-injected-dot {
  background-color: #5EE200 !important;
}

/* --------------------------------------------------------------------------
   4. INJECTED DOTS (shared)
   Used by both CTA buttons and generic corner-dot containers.
   -------------------------------------------------------------------------- */

.toriko-injected-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #616161;
  pointer-events: none;
  z-index: 10;
  transition: background-color 0.3s ease;
}

.toriko-injected-dot.tl { top: -7px;    left: -7px; }
.toriko-injected-dot.tr { top: -7px;    right: -7px; }
.toriko-injected-dot.bl { bottom: -7px; left: -7px; }
.toriko-injected-dot.br { bottom: -7px; right: -7px; }

.toriko-injected-dot.green {
  background-color: #5EE200;
}

.toriko-injected-dot.gray {
  background-color: #616161;
}

/* Hover on parent container turns gray dots green */
.toriko-dots-gray:hover > .toriko-injected-dot.gray {
  background-color: #5EE200;
}

/* --------------------------------------------------------------------------
   4b. CORNER FRAME (dots + connecting border lines)
   The JS injects a .toriko-injected-frame div with a border and 4 dot spans.
   Use class "toriko-frame-gray" or "toriko-frame-green" on Elementor containers.
   -------------------------------------------------------------------------- */

.toriko-injected-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border: 2px solid #616161;
  transition: border-color 0.3s ease;
}

.toriko-injected-frame.green {
  border-color: #5EE200;
}

.toriko-injected-frame.gray {
  border-color: #616161;
}

/* toriko-frame-gray: render lines + dots white instead of gray */
.toriko-frame-gray > .toriko-injected-frame.gray {
  border-color: #FFFFFF;
}

.toriko-frame-gray > .toriko-injected-frame.gray > .toriko-injected-dot.gray {
  background-color: #FFFFFF;
}

/* Hover: gray frame turns green */
.toriko-frame-gray:hover > .toriko-injected-frame.gray {
  border-color: #5EE200;
}

.toriko-frame-gray:hover > .toriko-injected-frame.gray > .toriko-injected-dot.gray {
  background-color: #5EE200;
}

/* --------------------------------------------------------------------------
   4c. OPEN FRAME — L-shape: top line + left line + TL dot + BL dot
   Gray only, no hover change. Apply class "toriko-frame-open".
   -------------------------------------------------------------------------- */

.toriko-injected-frame-open {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border-top: 2px solid #616161;
  border-left: 2px solid #616161;
  border-right: none;
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   4d. LEFT FRAME — vertical line + TL dot + BL dot (green)
   Apply class "toriko-frame-left-green" (e.g. footer contact column).
   -------------------------------------------------------------------------- */

.toriko-injected-frame-left-green {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border-left: 2px solid #5EE200;
  border-top: none;
  border-right: none;
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   5. SECTION BOUNDARY DOT
   A standalone green 16px dot. Add class "toriko-section-dot" to a
   small container or HTML widget, then position it via Elementor.
   -------------------------------------------------------------------------- */

.toriko-section-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #5EE200;
  pointer-events: none;
  z-index: 10;
}

/* --------------------------------------------------------------------------
   5b. NAV UNDERLINE — dot+line indicator below header nav links
   Apply "toriko-nav-underline" to the container holding nav link widgets.
   Active page auto-detected. Hover highlights the hovered segment.
   -------------------------------------------------------------------------- */

   

.toriko-nav-underline {
  position: relative;
  z-index: 40;
}
.toriko-nav-underline-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25px;
  height: 10px;
  pointer-events: none;
  z-index: 10;
}

.toriko-nav-dot {
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #616161;
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.toriko-nav-dot.is-active,
.toriko-nav-dot.is-hover {
  background-color: #5EE200;
}

.toriko-nav-line {
  position: absolute;
  top: 4px;
  height: 2px;
  background-color: #616161;
  transition: background-color 0.3s ease;
  pointer-events: none;
}

.toriko-nav-line.is-active,
.toriko-nav-line.is-hover {
  background-color: #5EE200;
}

/* --------------------------------------------------------------------------
   5c. HERO STEPPED BACKGROUND (Figma: Rectangle 26 + 28 + 41)
   Add class "toriko-hero-stepped-bg" to the hero outermost container.
   Use together with "toriko-hero" for the grid overlay.
   Remove any manual Elementor gradient overlay containers — this replaces them.
   -------------------------------------------------------------------------- */

.toriko-hero-stepped-bg {
  position: relative;
  background-color: #000000;
  overflow: hidden;
}

.toriko-stepped-bg-base,
.toriko-stepped-bg-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.toriko-stepped-bg-base {
  z-index: 0;
  background-color: #000000;
}

.toriko-stepped-bg-fade {
  z-index: 2;
  background-image:
    linear-gradient(to left, rgba(0, 0, 0, 0) 39.726%, rgba(0, 0, 0, 1) 56.904%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 81.425%, rgba(0, 0, 0, 1) 96.947%),
    linear-gradient(to left, rgba(0, 0, 0, 0) 2.227%, rgba(0, 0, 0, 1) 50%);
}

/* Hide legacy manual gradient containers when stepped bg is active */
.toriko-hero-stepped-bg .toriko-gradient-diagonal,
.toriko-hero-stepped-bg .toriko-gradient-bottom {
  display: none !important;
}

/* --------------------------------------------------------------------------
   6. HERO GRADIENT OVERLAYS (legacy — prefer toriko-hero-stepped-bg)
   Apply these as CSS classes on Elementor containers set to
   Position: Absolute, Width/Height: 100%, Z-Index: 1
   -------------------------------------------------------------------------- */

.toriko-gradient-diagonal {
  background: linear-gradient(228deg, rgba(0,0,0,0) 40%, #000 61%) !important;
}

.toriko-gradient-bottom {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 81%, #000 97%) !important;
}

/* --------------------------------------------------------------------------
   7. NAV DOT+LINE INDICATOR (inside Tab Switcher widget)
   Styled in tab-switcher.css — included here as a reference.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. FOOTER PANEL STRUCTURE
   -------------------------------------------------------------------------- */

.toriko-footer-panel {
  position: relative;
  background: #111511;
  border: 2px solid #616161;
  max-width: 1642px;
  margin: 0 auto;
}

.toriko-footer-inner {
  display: grid;
  grid-template-columns: minmax(300px, 490px) 1fr;
  min-height: 416px;
}

.toriko-footer-contact {
  position: relative;
  background: #000000;
  padding: 40px;
}

.toriko-footer-contact > * {
  position: relative;
  z-index: 2;
}

.toriko-footer-contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 2.5;
  color: #FFFFFF;
}

.toriko-footer-contact-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #5EE200;
  fill: #5EE200;
}

.toriko-footer-map {
  min-height: 416px;
}

.toriko-footer-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.toriko-copyright {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF;
  padding: 24px 0;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .toriko-grid-overlay {
    width: 400px;
    height: 350px;
  }

  .toriko-footer-inner {
    grid-template-columns: 1fr;
  }

  .toriko-footer-map {
    min-height: 300px;
  }
}

@media (max-width: 767px) {
  .toriko-grid-overlay,
  .toriko-injected-dot,
  .toriko-section-dot {
    display: none;
  }
}