/* ==== ECT v2 — Core (Baseline) ===========================================
   Enthält:
   • Farb-Tokens (Root)
   • Section-Frame & Overlay
   • Headline-Reveal Startpose
   • Focus/A11y
   • Utility-Icon (.ect-ico)
   • Container (.ect-container)
   • Debug-Styles
   • Optionaler Native Scroll Snap
   • Scroll-/Anim-Lock
   • Responsive Background Tokens
   • ===== CTA (tokenized, global; ICON/PATTERN/SHEEN via CORE) =====
     - Vollständiges CTA-Baseline mit Variablen (inkl. Idle-Defaults)
     - Icon-Layout über --cta-layout (row|column) und data-cta-icon-pos
     - Badge/Hint Sonderlogik (kein Pattern/Sheen für Badge/Hint)
=========================================================================== */

:root {
  /* ---------- Brand/Farb-Tokens ---------- */
  --ect-color-1: #F0F0ED; /* Light Gray */
  --ect-color-2: #949493; /* Medium Gray */
  --ect-color-3: #36352F; /* Dark Gray/Brown */
  --ect-color-4: #7A7A72; /* Warm Gray */
  --ect-color-5: #E3792D; /* Accent Orange */
  --ect-color-6: #4E9DCF; /* Accent Blue */
  --ect-color-7: #75BF30; /* Accent Green */

  /* ---------- Global typography caps (headline/subline) ---------- */
  /* Tune these to control apparent size across all sections (MQ-free). */
  --head-max: 84px;  /* was effectively ~50px at 0.60 height-scale */
  --head-min: 22px;
  --sub-max:  40px;  /* was effectively ~24px at 0.60 height-scale */
  --sub-min:  14px;

  /* ---------- Height-aware scaling (desktop heights) ---------- */
  /* Reference height for large desktop where current sizes are "max" */
  --ect-h-ref: 1400;              /* px */
  --ect-h-scale-min: 0.60;        /* do not shrink below 60% */
  /*
    NOTE: --ect-h-scale is used as a unitless multiplier in various calc()s.
    CSS alone cannot reliably produce a unitless ratio from 100vh (length) —
    mixing number and length in clamp()/calc() yields invalid values in some browsers.
    Therefore we set a safe default of 1 here and let JS compute and override it
    based on the actual viewport height.
  */
  --ect-h-scale: 1;

  /* ---------- Global size tokens (Desktop LG defaults) ---------- */
  /* CTA */
  --cta-pad-y: 22px;
  --cta-pad-x: 36px;
  --cta-fs: 1.18rem;
  --cta-radius: 12px;
  --cta-minw: 260px;

  /* Badge (LG defaults) */
  --badge-d: 180px;          /* diameter: larger on big screens */
  --badge-pad-y: 18px;
  --badge-pad-x: 20px;
  --badge-fs: 20px;
  --badge-border: 2px;       /* width */
  --badge-border-color: #fff;
}

/* JS will set --ect-h-scale; keep supports blocks empty to avoid unit-mismatch issues */

/* ---------- Desktop tiers (width-based) for CTA & Badge ---------- */
@media (max-width: 1599px){
  :root{
    /* CTA MD */
    --cta-pad-y: 18px;
    --cta-pad-x: 28px;
    --cta-fs: 1.10rem;
    --cta-radius: 12px;
    --cta-minw: 240px;

    /* Badge MD */
    --badge-d: 130px;
    --badge-pad-y: 14px;
    --badge-pad-x: 16px;
    --badge-fs: 16px;
    --badge-border: 2px;
  }
}
@media (max-width: 1279px){
  :root{
    /* CTA SM */
    --cta-pad-y: 14px;
    --cta-pad-x: 22px;
    --cta-fs: 1.00rem;
    --cta-radius: 10px;
    --cta-minw: 220px;

    /* Badge SM */
    --badge-d: 110px;
    --badge-pad-y: 12px;
    --badge-pad-x: 14px;
    --badge-fs: 14px;
    --badge-border: 1.5px;
  }
}

/* 1) Reset & Base */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
body {
  font: 400 16px/1.45 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: #111;
  background:#fff;
  overflow-x: hidden; /* prevent horizontal drift */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
/* Prevent browser scroll anchoring from adjusting after snap/slide */
html.ect2-shell, body.ect2-shell{ overflow-anchor: none; }

/* 3) Section-Frame (100vh, Snap-Punkt) */
.ect-section{
  min-height: 100vh;
  position: relative;
  display: block;

  /* Abstand, damit Inhalte nicht „kleben“ */
  padding: 24px 20px 64px;

  /* Rendering-Isolation (Overlay + Content-Layer) */
  isolation: isolate;

  /* Hintergrund via Tokens (Variablen) */
  background-color: var(--section-bg-color, transparent);
  background-image: var(--section-bg);
  background-repeat: no-repeat;
  background-position: var(--section-bg-position, center top) !important;
  background-size: var(--section-bg-size, cover) !important;
}

/* First section (HERO): no extra top padding; main already has header offset */
#ect-main > .ect-section:first-of-type{ padding-top: 0 !important; }

/* Mobile viewport height correction (iOS Chrome/Safari) */
@supports (min-height: 100svh) { .ect-section{ min-height: 100svh; } }
@supports (min-height: 100dvh) { .ect-section{ min-height: 100dvh; } }

/* 3a) Section Overlay (Farbe & Intensität via Variablen steuerbar) */
.ect-section::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--section-overlay-color, #000);
  opacity: var(--section-overlay-opacity, 0.35);
  z-index: 0;
  pointer-events: none;
}

/* Section-Content immer über Overlay */
.ect-section > * { position: relative; z-index: 1; }

/* 4) Headline-Reveal Startpose (Reveal-Engine setzt final sichtbare Werte) */
.ect-headline, .ect-subline{
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}
.ect-subline{ opacity: 0; }

/* 4a) Headline/Subline – Baseline (Typografie & Positionierung, Farben per Sektion) */
.ect-section .ect-headline{
  margin: 30px 0 0 0; /* moved 15px further down from header */
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  /* Global liquid sizing (height-aware, MQ-free). Tunable via --head-min/max */
  font-size: clamp(var(--head-min, 22px), calc(var(--head-max, 72px) * var(--ect-h-scale)), var(--head-max, 72px));
  text-align: left;
}
.ect-section .ect-subline{
  margin-top: 0px; /* moved down ~15px for more breathing room under headline */
  /* ~30% smaller cap by default. Tunable via --sub-min/max */
  font-size: clamp(var(--sub-min, 14px), calc(var(--sub-max, 32px) * var(--ect-h-scale)), var(--sub-max, 32px));
  text-align: left;
}

/* Force single-line on desktop globally (from 800px) */
@media (min-width: 800px){
  .ect-section .ect-headline,
  .ect-section .ect-subline{ white-space: nowrap; }
}

/* MQ overrides removed: liquid sizing handles all widths/heights consistently */



/* 5) Fokus & A11y */
:root{ --header-offset: 0px; } /* ggf. über Theme/Header setzen */
:root{ --logo-box-color: transparent; }
:focus-visible{ outline: 2px solid #3a7bff; outline-offset: 2px; }

/* 6) Utility: Icon-SVG */
.ect-ico{
  width: 1.25rem; height: 1.25rem;
  display:inline-block; vertical-align: middle;
  fill: currentColor;
}

/* 7) Helper: Container-Breite */
.ect-container{ max-width: 1140px; margin: 0 auto; }

/* 8) Debug (optional): In-View-Status */
body.ect2-debug .ect-section.is-inview{ outline: 2px dashed #86BF30; }

/* 9) Optional: Native CSS Scroll Snap (global toggle via .ect-native-snap on html/body) */
html.ect-native-snap,
body.ect-native-snap,
#ect-main.ect-native-snap{
  scroll-snap-type: y mandatory;
}
.ect-native-snap .ect-section{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Prevent scroll chaining/bounce while using native snap (mobile focus) */
html.ect-native-snap,
body.ect-native-snap,
#ect-main.ect-native-snap{
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

html.ect-mobile {
  /* Head/Subline caps tuned für mobile */
  --head-max: 48px;
  --head-min: 20px;
  --sub-max:  28px;
  --sub-min:  14px;
}
html.ect-mobile .ect-section{
  padding-left: 20px !important;
  padding-right: 20px !important;
}
html.ect-mobile .ect-section .ect-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
html.ect-mobile .ect-cta{
  --cta-pad-y: 9px;
  --cta-pad-x: 14px;
  --cta-idle-bounce-gap: 9999s;
  --cta-idle-sheen-gap:  9999s;
}
html.ect-mobile .ect-cta .ect-cta__sheen{ display:none !important; }

/* Mobile: sublines in justified text with intelligent hyphenation */
html.ect-mobile .ect-section .ect-subline{
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Scroll-/Anim-Lock für Slide-Transition */
html.ect-animlock, body.ect-animlock{
  overscroll-behavior: contain !important;
  height: 100%;
}
html.ect-animlock{ position: relative; }
body.ect-animlock{ overflow: hidden !important; }
/* Lock page scroll when mobile menu open */
html.ect-menu-open, body.ect-menu-open{ overflow: hidden !important; }
/* Während des Slides alle Touch-Gesten unterbinden (iOS Safari: verhindert Rubber-Band & Scroll-Capture) */
html.ect-animlock *, body.ect-animlock *{ touch-action: none !important; }

/* 10) Fullscreen Template Helpers: Site-Header/-Footer ausblenden
   Nur wenn der ECT Fullscreen-Main vorhanden ist (#ect-main.ect2).
   Bewusst generische Selektoren für gängige Theme-Strukturen; Admin-Bar bleibt sichtbar. */
body:has(#ect-main.ect2){
  padding-top: 0 !important; /* falls Theme globalen Header-Offset setzt */
}
body:has(#ect-main.ect2) [role="banner"]:not([data-ect-header]),
body:has(#ect-main.ect2) .site-header,
body:has(#ect-main.ect2) #masthead,
body:has(#ect-main.ect2) #header,
body:has(#ect-main.ect2) [role="contentinfo"]:not([data-ect-footer]),
body:has(#ect-main.ect2) .site-footer,
body:has(#ect-main.ect2) #colophon{
  display: none !important;
}

/* Fallback for browsers without :has support — if body carries .ect2-shell */
.ect2-shell [role="banner"]:not([data-ect-header]),
.ect2-shell .site-header,
.ect2-shell #masthead,
.ect2-shell #header,
.ect2-shell [role="contentinfo"]:not([data-ect-footer]),
.ect2-shell .site-footer,
.ect2-shell #colophon{
  display: none !important;
}

/* Mobile background sizing/position tokens */
html.ect-mobile .ect-section{
  background-position: var(--section-bg-position-mobile, var(--section-bg-position, center top)) !important;
  background-size: var(--section-bg-size-mobile, var(--section-bg-size, cover)) !important;
}

/* Mobile: Slide-Sektionen sollen Touch-Scroll nicht selbst konsumieren → wir steuern per JS */
@media (pointer: coarse){
  .ect-section[data-scroll="slide"]{
    -ms-touch-action: none;
    touch-action: none;
  }
}

/* Ensure hero never blocks native scrolling on touch devices */
@media (pointer: coarse){
  .ect-section--hero,
  .ect-section--hero[data-scroll="slide"]{
    -ms-touch-action: auto !important;
    touch-action: auto !important;
  }
}

/* =======================================================================
   ========== CTA (tokenized, global; ICON/PATTERN/SHEEN via CORE) ========
   Struktur-Vorgaben:
   - Icon/Pattern/Sheen werden vom Core injiziert (ensureIcon/ensurePattern/ensureSheen)
   - Layout „left“ (Standard) und „top“ (Icon über Text) werden über:
       • CSS-Var --cta-layout: row|column
       • Attribut data-cta-icon-pos="left|top" (Core setzt ggf. --cta-layout)
   - Sektionen überschreiben NUR Tokens (Farben/Größen), nicht Struktur.
========================================================================= */

/* ---------- CTA Defaults (sections override via variables) ---------- */
.ect-cta{
  /* Color tokens */
  --cta-bg:              var(--ect-color-5);
  --cta-bg-hover:        var(--ect-color-7);
  --cta-text:            #fff;
  --cta-text-hover:      #fff;
  --cta-border:          transparent;

  /* Icon tokens */
  --cta-icon:            currentColor;
  --cta-icon-hover:      currentColor;
  --cta-icon-size:       1.5rem;
  --cta-gap:             1rem;

  /* Pattern tokens */
  --cta-pattern-color:   currentColor;
  --cta-pattern-opacity: .14;
  --cta-pattern-scale:   1;

  /* Motion tokens */
  --cta-scale-hover:     1.01;
  --cta-scale-active:    .985;
  --cta-dur:             .22s;
  --cta-ease:            cubic-bezier(.2,.7,.2,1);

  /* Idle cadence tokens (global Defaults, Sektionen können anpassen) */
  --cta-idle-bounce-gap: 6s;
  --cta-idle-sheen-gap:  12s;
  --cta-badge-bounce-y: 12px; /* vertical bounce amplitude for badges */

  /* Layout tokens (Core mappt data-cta-icon-pos auf diese Variablen) */
  --cta-layout: row;        /* row = Icon links vom Text; column = Icon über dem Text */
  --cta-align:  center;     /* alignment im Flex-Layout */

  position: relative;
  display: inline-flex;
  align-items: var(--cta-align);
  justify-content: center;
  gap: var(--cta-gap);
  flex-direction: var(--cta-layout);

  /* Size tokens */
  padding: var(--cta-pad-y, 24px) var(--cta-pad-x, 36px) !important;
  border-radius: var(--cta-radius, 12px);
  border: 1px solid color-mix(in srgb, var(--cta-bg) 80%, black);
  box-shadow: 0 6px 24px rgba(0,0,0,.20);
  background: var(--cta-bg);
  color: var(--cta-text);
  text-decoration: none;
  line-height: 1.4;
  font-size: var(--cta-fs, 1.2rem);
  min-width: var(--cta-minw, auto);
  font-weight: 700;
  cursor: pointer;
  will-change: transform, color, background;
  transition:
    transform var(--cta-dur) var(--cta-ease),
    background-color var(--cta-dur) var(--cta-ease),
    color var(--cta-dur) var(--cta-ease),
    border-color var(--cta-dur) var(--cta-ease);
  overflow: hidden;
}

/* Attribut-Fallback (falls Core-Var nicht gesetzt wurde) */
.ect-cta[data-cta-icon-pos="top"]{
  flex-direction: column;
  align-items: center;
}

/* ---------- Icon slot (vom Core injiziert) ---------- */
.ect-cta .ect-cta__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width: var(--cta-icon-size); height: var(--cta-icon-size);
  color: var(--cta-icon);
  line-height: 0;
}
.ect-cta .ect-cta__icon svg{
  width:100%; height:100%; fill: currentColor; display:inline-block;
  
}
/* Kleiner Zusatzabstand im Top-Layout (Icon über dem Label) */
.ect-cta[style*="--cta-layout: column"] .ect-cta__icon,
.ect-cta[data-cta-icon-pos="top"] .ect-cta__icon{
  margin-bottom: .35rem;
}

/* ---------- Pattern layer (Tiger stripes; Core injiziert .ect-cta__pattern) ---------- */
.ect-cta .ect-cta__pattern{
  position:absolute; inset:0; pointer-events:none;
  opacity: 0;
  transform: scale(var(--cta-pattern-scale));
  transition: opacity var(--cta-dur) var(--cta-ease), transform var(--cta-dur) var(--cta-ease);
  mix-blend-mode: overlay; /* can be overridden per section */
  z-index: 1; /* unter Sheen, über Button-BG */
}
.ect-cta .ect-cta__pattern use,
.ect-cta .ect-cta__pattern rect,
.ect-cta .ect-cta__pattern path{
  fill: var(--cta-pattern-color);
}
/* Ensure full coverage (Fallback) */
.ect-cta .ect-cta__pattern{ width:100%; height:100%; display:block; }
.ect-cta .ect-cta__pattern use{ width:100%; height:100%; }

/* ---------- Hover / Active states (JS ergänzt .is-hover/.is-active) ---------- */
.ect-cta:hover,
.ect-cta.is-hover{
  background: linear-gradient(to bottom, var(--cta-bg-hover), color-mix(in srgb, var(--cta-bg-hover) 85%, black)) !important;
  color: var(--cta-text-hover) !important;
  border-color: color-mix(in srgb, var(--cta-bg-hover) 80%, black) !important;
}
.ect-cta:hover .ect-cta__icon,
.ect-cta.is-hover .ect-cta__icon{
  color: var(--cta-icon-hover);
}
.ect-cta:hover .ect-cta__pattern,
.ect-cta.is-hover .ect-cta__pattern{
  opacity: var(--cta-pattern-opacity);
}

.ect-cta:active,
.ect-cta.is-active{
  transform: scale(var(--cta-scale-active));
}

/* ---------- Focus ring accessibility ---------- */
.ect-cta:focus-visible{
  outline: 2px solid var(--cta-text-hover, #fff);
  outline-offset: 2px;
}

/* ---------- Token-Enforcement (gegen Legacy-Regeln) ---------- */
.ect-cta{
  background: linear-gradient(to bottom, var(--cta-bg), color-mix(in srgb, var(--cta-bg) 85%, black)) !important;
  color: var(--cta-text) !important;
  border-color: var(--cta-border, transparent) !important;
}
.ect-cta:hover,
.ect-cta.is-hover{
  background: linear-gradient(to bottom, var(--cta-bg-hover), color-mix(in srgb, var(--cta-bg-hover) 85%, black)) !important;
  color: var(--cta-text-hover) !important;
}

/* ---------- Badge/Hint Sonderlogik (kein Pattern/Sheen für beide) ---------- */
/* Badge Pattern nie anzeigen; zentrierter Text-Look via Section */
.ect-hero__badge .ect-cta__pattern{ display: none !important; }
.ect-hero__badge{ text-align: center; }
/* Badge-Gradient per Tokens (Sektion kann überschreiben) */
.ect-hero__badge{
  background: linear-gradient(to bottom, var(--badge-bg, var(--ect-color-5)),
    color-mix(in srgb, var(--badge-bg, var(--ect-color-5)) 85%, black)) !important;
}
/* Rollen-Tokens (optionale Hooks) */
.ect-badge{
  --badge-bg: var(--ect-color-5);
  --badge-text: #fff;
  --badge-border-color: #fff;
}
.ect-hint{
  --hint-bg: rgba(54,53,47,.72);
  --hint-text: #fff;
}

/* ---------- CTA Idle Sheen (über Pattern) ---------- */
.ect-cta{ position: relative; }
.ect-cta .ect-cta__sheen{
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0; /* JS animiert kurz auf 1 */
  background:
    linear-gradient(75deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.25) 45%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,.25) 55%,
      rgba(255,255,255,0) 100%);
  filter: blur(1.5px);
  mix-blend-mode: screen;
  border-radius: inherit;
  will-change: transform, opacity;
  z-index: 2; /* über Pattern */
  transform: translateX(0); /* GSAP steuert xPercent */
}
@media (prefers-reduced-motion: reduce){
  .ect-cta .ect-cta__sheen{ display:none; }
}
/* Hints haben grundsätzlich keinen Sheen */
.ect-hint .ect-cta__sheen{ display:none !important; }

/* ---------- Backwards-Compat (Modifier-Klasse bleibt funktionsfähig) ---------- */
/* Falls ältere Markups .ect-cta--icon-top nutzen, diese Klasse auf neue Var mappen */
.ect-cta--icon-top{
  --cta-layout: column;
  --cta-align:  center;
}

/* =====================================================================
   ECT v2 — Shell (Header/Nav + Footer) — Glass Look
   - Header: white text, slim (fw 400), compact on scroll, active in --ect-color-4
   - Footer: slide-up dock, glass with Color 3 base, black text
===================================================================== */

/* ---------- Header Shell ---------- */
.ect2-shell [data-ect-header].ect-shell{
  position: fixed; top: calc(var(--adminbar-offset, 0px) + env(safe-area-inset-top, 0px)); left: 0; right: 0;
  z-index: 9999999999; /* unter Modals, über Sections */
  /* Glass */
  min-height: 56px; 
  background: color-mix(in srgb, #000 16%, transparent);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, #fff 10%, var(--ect-color-3));
  transition: transform .26s cubic-bezier(.2,.7,.2,1),
              background-color .26s cubic-bezier(.2,.7,.2,1),
              border-color .26s cubic-bezier(.2,.7,.2,1);
}
.ect2-shell [data-ect-header] .ect-shell__menu-toggle{ display:none; background:transparent; border:0; padding:0; line-height:0; width:0; height:0; overflow:hidden; }
@media (min-width: 993px){
  .ect2-shell [data-ect-header] .ect-shell__menu-toggle{ display:none !important; width:0 !important; height:0 !important; padding:0 !important; border:0 !important; background:transparent !important; }
}
.ect2-shell [data-ect-header] .ect-shell__inner{
  width: 100%;
  margin: 0 auto;
  padding: 12px 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  position: relative;
}
.ect2-shell [data-ect-header] .ect-shell__nav{ /* centered via flex on .ect-shell__inner */ }
/* Compact state on scroll */
/* Keep header height constant to avoid initial scroll jump */
.ect2-shell [data-ect-header].is-compact .ect-shell__inner{ padding: 12px 20px; }
/* Hide on scroll down */
.ect2-shell [data-ect-header].is-hidden{ transform: translateY(-100%); }

html.ect-mobile .ect2-shell [data-ect-header] .ect-shell__inner{
  padding-left: 22px;
  padding-right: 22px;
}

/* Ensure content is not covered by fixed header and footer peek */
.ect2-shell #ect-main{ padding-top: calc(var(--adminbar-offset, 0px) + var(--header-offset, 64px)); padding-bottom: var(--footer-peek, 12px); }
/* Fullscreen template (#ect-main.ect2): do not reserve header/footer space; header/footer are overlays */
.ect2-shell #ect-main.ect2{ padding-top: 0 !important; padding-bottom: 0 !important; }

/* Reserve vertical scrollbar width to prevent layout width changes between steps */
html{ scrollbar-gutter: stable both-edges; }

/* Logo (left) */
.ect2-shell .ect-shell__logo{ color:#fff; text-decoration:none; font-weight:600; display:inline-flex; align-items:center; gap:.6rem; }
.ect2-shell .ect-shell__logo{ margin-right: 8px; }
.ect2-shell .ect-shell__logo .ect-shell__navicon{ height:24px; width:auto; }
.ect2-shell .ect-shell__brand{ font-size: 14px; letter-spacing:.02em; }
.ect2-shell [data-ect-header].is-compact .ect-shell__brand{ opacity:.9; }

/* Nav (right) */
.ect2-shell .ect-shell__nav .ect-shell__navlist{ display:flex; align-items:center; gap: 18px; list-style:none; padding:0; margin:0; flex-wrap: nowrap; }
.ect2-shell .ect-shell__navlink{
  color: rgba(255,255,255,.92);
  font-weight: 400; font-size: 14px; letter-spacing: .02em;
  text-decoration: none; padding: 8px 10px; border-radius: 8px;
  transition: color .2s ease, background-color .2s ease;
  line-height: 1;
}
.ect2-shell .ect-shell__navlink:hover{ color:#fff; background: color-mix(in srgb, #fff 10%, transparent); }
/* Active item in Color 4 */
.ect2-shell .ect-shell__navlink.is-active,
.ect2-shell .ect-shell__navlink[aria-current="true"]{
  color: var(--nav-active-color, var(--ect-color-4));
  background: color-mix(in srgb, #fff 12%, transparent);
}

/* Ensure header sprite icon is visible across browsers/symbol styles */
.ect2-shell .ect-shell__navicon{ width:25px; height:25px; color:#fff; display:block; background: transparent; line-height:0; }
.ect2-shell .ect-shell__navicon use{ fill: currentColor; }

/* Logo symbol coloring: fill the 'box' layer via CSS variable */
#ect-logo .st1{ fill: var(--logo-box-color, #fff); }

/* Language switch (right aligned) */
.ect2-shell .ect-shell__lang{
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; /* click target */
  padding-right: 40px; /* spacing to right edge */
  color: inherit; text-decoration: none;
}
.ect2-shell .ect-shell__langicon{ width:25px; height:25px; display:block; }
.ect2-shell .ect-shell__langicon use{ /* keep sprite colors; do not override with currentColor */ }
.ect2-shell .ect-shell__langicon{ filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

html.ect-mobile .ect2-shell .ect-shell__lang{ padding-right: 28px; height: 28px; }
html.ect-mobile .ect2-shell .ect-shell__langicon{ width:22px; height:22px; }
html.ect-mobile .ect2-shell .ect-shell__logo .ect-shell__navicon{ height:22px; width:auto; }

/* ---------- Footer Shell (slide-up dock) ---------- */
.ect2-shell .ect-shell__footer{
  position: fixed; left:0; right:0; bottom:0; z-index: 1000;
  /* Hide off-screen by default; allow small peek via token; include safe-area insets */
  transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px) - var(--footer-peek, 12px)));
  transition: transform .28s cubic-bezier(.2,.7,.2,1), background-color .2s ease, border-color .2s ease;
  /* Use background image layer + subtle color veil */
  background: transparent; /* image + veil via pseudo-layers */
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-top: 1px solid color-mix(in srgb, var(--ect-color-3) 60%, #fff 15%);
  box-shadow: 0 -12px 30px rgba(0,0,0,.18);
  color: #111; /* text black by default */
  overflow: hidden;
  min-height: 200px; /* slightly higher */
}
/* Background image layer */
.ect2-shell .ect-shell__footer::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: var(--footer-bg, url('https://dev.ecocleantiger.com/assets/ect-footer.webp'));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: translateZ(0);
}
/* Veil overlay (Color 3 tint) */
.ect2-shell .ect-shell__footer::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: color-mix(in srgb, var(--ect-color-3) 40%, transparent);
}
.ect2-shell .ect-shell__footer.is-open{ transform: translateY(0); }
.ect2-shell .ect-shell__footer-inner{ position:relative; z-index:2; max-width:none; width:100%; margin:0; padding: 18px 75px; display:flex; align-items:flex-start; justify-content:flex-start; gap: clamp(25px, 5vw, 50px); }
/* Ensure full width layout even without .ect2-shell wrapper */
.ect-shell__footer .ect-shell__footer-inner{ max-width:none; width:100%; margin:0; padding-left:75px; padding-right:75px; display:flex; align-items:flex-start; justify-content:flex-start; gap: clamp(25px, 5vw, 50px); }

/* Left column: Logo + Links */
.ect2-shell .ect-shell__footer-logo{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; }
.ect2-shell .ect-shell__footer-logo img{ width: 164px; height:auto; display:block; }
.ect2-shell .ect-shell__footer-links{ display:flex; flex-direction:column; gap:6px; margin-top: 10px; }
.ect2-shell .ect-shell__footer-link{ color: var(--ect-color-1); text-decoration:none; font-weight:500; font-size:14px; transition: color .2s ease; }
.ect2-shell .ect-shell__footer-link:hover{ text-decoration:none; color: var(--ect-color-7); }

/* Right column (reserved) */
.ect2-shell .ect-shell__footer-right{ min-height: 56px; min-width: 260px; display:flex; align-items:flex-start; justify-content:flex-start; }
.ect-shell__footer-left{ display:flex; flex-direction:column; align-items:flex-start; }
/* Ensure left column stacks logo over links */
.ect2-shell .ect-shell__footer-left{ display:flex; flex-direction:column; align-items:flex-start; }
.ect2-shell .ect-shell__footer-right{ gap: clamp(12px, 3vw, 28px); flex-direction: column; }
.ect2-shell .ect-shell__footer-right .ect-shell__footer-copy{ align-items: center; }
.ect2-shell .ect-shell__footer-right .ect-shell__footer-head{ text-align: center; width: 100%; }
/* Hide subline on the right column explicitly (mobile + desktop) */
.ect2-shell .ect-shell__footer-right .ect-shell__footer-sub{ display:none !important; }
.ect2-shell .ect-shell__footer-copy{ display:flex; flex-direction:column; align-items:flex-start; }
.ect2-shell .ect-shell__footer-head{ font-weight:800; color: var(--ect-color-1); line-height:1.15; font-size: clamp(16px, 3.2vmin, 40px); text-shadow: 0 1px 2px rgba(0,0,0,.25); margin: 0; }
.ect2-shell .ect-shell__footer-sub{ margin-top: 6px; color: var(--ect-color-2); font-size: clamp(12px, 2.2vmin, 22px); line-height: 1.3; max-width: min(60ch, 46vw); }
/* Footer CTA tokens: bg color-7, hover color-4 */
.ect2-shell .ect-shell__footer .ect-cta,
.ect-shell__footer .ect-cta{
  --cta-bg:       var(--ect-color-7);
  --cta-bg-hover: var(--ect-color-6);
  --cta-text:     #fff;
  --cta-text-hover:#fff;
  --cta-icon:     #fff;
  --cta-icon-hover:#fff;
  --cta-icon-size: 1.6rem;
  --cta-fs: 1.05rem; /* slightly smaller text */
}
/* Footer CTA spacing under headline */
.ect2-shell .ect-shell__footer .ect-shell__footer-cta{ margin-top: 14px; }
/* Remove legacy gradient styling; Core CTA styles apply via .ect-cta tokens above */

/* Mobile handle (toggle button) */
.ect2-shell .ect-footer-handle{
  position: fixed; left: 16px; right: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 1001;
  width: 28px; height: 28px; border-radius: 6px;
  padding: 0; line-height: 0; /* ensure no default button padding affects size */
  border:1px solid color-mix(in srgb, var(--ect-color-3) 70%, #fff 8%);
  background: color-mix(in srgb, var(--ect-color-3) 42%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ect-color-2);
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none; user-select: none;
  cursor: pointer;
}
.ect2-shell .ect-footer-handle svg{ width: 20px; height: 20px; display:block; }
.ect2-shell .ect-footer-handle use{ fill: currentColor; }

/* Ensure footer handle sits above content */
.ect2-shell .ect-footer-handle{ z-index: 99999999999; }

/* Accessibility tweaks */
.ect2-shell .ect-shell__navlink:focus-visible{
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, #fff 85%, var(--ect-color-7) 15%);
}
.ect2-shell .ect-shell__footer-link:focus-visible,
.ect2-shell .ect-footer-handle:focus-visible{ outline: 2px solid #3a7bff; outline-offset: 2px; }

/* Responsive adjustments */
@media (max-width: 1024px){
  /* On mobile, fully hide footer by default (no peek); open via handle */
  .ect2-shell{ --footer-peek: 0px; }
  .ect2-shell .ect-shell__footer{ transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))); }
  /* Compact, symmetric header on mobile */
  .ect2-shell [data-ect-header].ect-shell{ min-height: 48px; }
  .ect2-shell [data-ect-header] .ect-shell__inner{ padding: 8px 14px; }
  .ect2-shell .ect-shell__nav .ect-shell__navlist{ gap: 12px; }
  .ect2-shell .ect-shell__navlink{ font-size: 13px; padding: 7px 8px; }
  .ect2-shell .ect-shell__footer-inner{ padding: 14px 16px; gap: 18px; }
  .ect2-shell .ect-shell__footer-right{ min-width: 180px; }
  /* Footer CTA: compact size to fit smaller screens */
  .ect2-shell .ect-shell__footer .ect-shell__footer-cta{
    --cta-pad-y: 10px;
    --cta-pad-x: 16px;
    --cta-fs: 0.90rem; /* a bit smaller on mobile */
    --cta-minw: 0;
    --cta-icon-size: 1.35rem; /* larger icon on mobile */
    width: auto;
    max-width: 100%;
    margin-top: 16px; /* extra space below headline */
  }

  /* Position hamburger button left of language (absolute inside header) */
  .ect2-shell [data-ect-header] .ect-shell__menu-toggle{
    position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
    margin: 0; /* override auto */
    width: 40px; height: 40px; border-radius: 8px;
    border: none;
    background: transparent;
    display: inline-flex; align-items:center; justify-content:center; line-height: 0;
    color: #fff; z-index: 3; /* above language link */
  }
  .ect2-shell [data-ect-header] .ect-shell__menu-toggle svg{ width:22px; height:22px; display:block; }
  .ect2-shell [data-ect-header] .ect-shell__menu-toggle .ico-close{ display:none; }
  .ect2-shell [data-ect-header].is-menu-open .ect-shell__menu-toggle .ico-menu{ display:none; }
  .ect2-shell [data-ect-header].is-menu-open .ect-shell__menu-toggle .ico-close{ display:block; }
  /* Overlay Nav panel (hidden by default) */
  .ect2-shell [data-ect-header] .ect-shell__nav,
  .ect-shell__nav.ect-shell__nav--overlay{
    position: fixed; left: 0; right:0;
    top: calc(env(safe-area-inset-top, 0px) + var(--adminbar-offset, 0px) + var(--header-offset, 56px));
    bottom: 0; z-index: 9999999998; /* sit below header to keep header always clickable */
    background: linear-gradient(180deg, rgba(16,20,24,0.76), rgba(16,20,24,0.38));
    color: #fff;
    backdrop-filter: saturate(150%) blur(18px);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .26s ease, opacity .26s ease;
    will-change: transform;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
  }
  .ect2-shell [data-ect-header].is-menu-open .ect-shell__nav{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .ect2-shell [data-ect-header] .ect-shell__navlist{
    display:flex; flex-direction:column; gap:16px;
    padding: clamp(22px, 5vw, 36px) clamp(18px, 5vw, 30px);
  }
  .ect2-shell [data-ect-header] .ect-shell__navlink{
    display:block;
    padding: clamp(14px, 4vw, 22px) clamp(10px, 4.6vw, 18px);
    font-size: clamp(22px, 5.8vw, 34px);
    font-weight:600;
    text-align:left;
    border-radius: 0;
    background: transparent;
    border: none;
  }
  .ect2-shell [data-ect-header] .ect-shell__navlink:hover{
    background: transparent;
    color: color-mix(in srgb, #fff 90%, var(--ect-color-7) 10%);
  }
}

/* Ensure header is always interactable on mobile */
@media (max-width: 1024px){
  .ect2-shell [data-ect-header],
  .ect2-shell [data-ect-header] *{ pointer-events: auto; }
}
@media (max-width: 680px){
  .ect2-shell .ect-shell__nav .ect-shell__navlist{ gap: 10px; }
  .ect2-shell .ect-shell__navlink{ font-size: 12px; padding: 6px 7px; }
  .ect2-shell .ect-shell__brand{ display:none; }
}

/* (removed duplicate mobile overlay block to avoid conflicts) */

/* Footer handle tap target larger on mobile */
@media (max-width: 1024px){
  .ect2-shell .ect-footer-handle{ width: 48px; height: 48px; }
  .ect2-shell .ect-footer-handle svg{ width: 22px; height: 22px; }
}

/* Global FlyCTA (mobile floating CTA) */
@media (max-width: 900px){
  .ect-flycta{
    --fly-w: 300px;
    --fly-tab: 44px; /* narrower tab so it's fully visible */
    --fly-inset: 6px; /* keep full tab visible inside viewport */
    position: fixed;
    top: calc(var(--fly-cta-v, .5) * 100vh);
    /* Keep full tab visible: inset + safe-area on left */
    transform: translateY(-50%) translateX(calc(-1 * (var(--fly-w) - var(--fly-tab)) + var(--fly-inset, 6px) + env(safe-area-inset-left, 0px)));
    width: var(--fly-w);
    z-index: 1000000002; /* above app overlays and content */
    display: inline-flex; align-items: center; justify-content: flex-start;
    gap: 8px; padding: 8px 8px 8px 0; pointer-events: auto;
    left: 0;
  }
  /* Prefer dynamic viewport units when supported */
  @supports (height: 100dvh){ .ect-flycta{ top: calc(var(--fly-cta-v, .5) * 100dvh); } }
  @supports (height: 100svh){ .ect-flycta{ top: calc(var(--fly-cta-v, .5) * 100svh); } }
  .ect-flycta[data-pos="right"]{
    left: auto; right: 0;
    /* Right side: subtract inset + safe-area on right */
    transform: translateY(-50%) translateX(calc(var(--fly-w) - var(--fly-tab) - var(--fly-inset, 6px) - env(safe-area-inset-right, 0px)));
  }
  .ect-flycta.is-open{ transform: translateY(-50%) translateX(0); }
  /* When closed, disable pointer events on the hidden CTA to avoid accidental navigation */
  .ect-flycta:not(.is-open) .ect-cta{ pointer-events: none; }
  .ect-flycta__tab{
    width: var(--fly-tab); min-width: var(--fly-tab); height: 76px; border-radius: 0 16px 16px 0;
    border: 1px solid color-mix(in srgb, #fff 60%, var(--fly-cta-accent, var(--ect-color-3)));
    background: color-mix(in srgb, var(--fly-cta-accent, var(--ect-color-3)) 35%, #000 20%);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,0);
    animation: ect-flytab-pulse 2.8s ease-in-out infinite;
    will-change: transform, box-shadow, opacity;
    transform: translateZ(0);
    position: relative;
  }
  .ect-flycta__tab::before{
    content: '›';
    position: absolute;
    font-size: 20px;
    line-height: 1;
    opacity: .95;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
  }
  /* Expand actual hit area beyond the visible tab without changing visuals */
  .ect-flycta__tab::after{
    content: '';
    position: absolute;
    left: -10px; right: -8px; top: -10px; bottom: -10px;
    /* Transparent, only for hit area */
    background: transparent;
  }
  .ect-flycta[data-pos="right"] .ect-flycta__tab{ border-radius: 10px 0 0 10px; }
  .ect-flycta[data-pos="right"] .ect-flycta__tab::before{ content: '‹'; }
  /* Flip chevron when open to indicate closing direction (still centered) */
  .ect-flycta.is-open .ect-flycta__tab::before{ content: '‹'; }
  .ect-flycta.is-open[data-pos="right"] .ect-flycta__tab::before{ content: '›'; }
  .ect-flycta .ect-cta{
    --cta-fs: .95rem; --cta-pad-y: 10px; --cta-pad-x: 14px; --cta-minw: 0; --cta-icon-size: 1.25rem;
    border-radius: 0 12px 12px 0;
  }
  @keyframes ect-flytab-pulse{
    0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.22); opacity:.95; transform: scale(1); }
    50% { box-shadow: 0 12px 32px rgba(0,0,0,.32); opacity:1; transform: scale(1.035); }
  }
}
/* Duplicate rules without .ect2-shell scope to support themes without wrapper */
@media (max-width: 1024px){
  [data-ect-header] .ect-shell__menu-toggle{
    position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
    margin: 0; width: 44px; height: 44px; border-radius: 8px;
    border: none;
    background: transparent;
    display: inline-flex; align-items:center; justify-content:center; color: #fff;
    z-index: 3;
  }
  [data-ect-header] .ect-shell__menu-toggle svg{ width: 22px; height: 22px; display:block; }
  [data-ect-header] .ect-shell__menu-toggle .ico-close{ display:none; }
  [data-ect-header].is-menu-open .ect-shell__menu-toggle .ico-menu{ display:none; }
  [data-ect-header].is-menu-open .ect-shell__menu-toggle .ico-close{ display:block; }
  [data-ect-header] .ect-shell__nav,
  .ect-shell__nav.ect-shell__nav--overlay{
    position: fixed; left: 0; right:0;
    top: calc(var(--adminbar-offset, 0px) + var(--header-offset, 56px));
    bottom: 0; z-index: 1000000000;
    background: linear-gradient(180deg, rgba(16,20,24,0.76), rgba(16,20,24,0.38));
    color: #fff;
    backdrop-filter: saturate(150%) blur(18px);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .26s ease, opacity .26s ease; will-change: transform; pointer-events: none;
    position: fixed;
  }
  [data-ect-header].is-menu-open .ect-shell__nav{ transform: translateY(0); opacity:1; pointer-events:auto; }
  [data-ect-header] .ect-shell__navlist{
    display:flex; flex-direction:column; gap:16px; align-items:flex-start;
    padding: clamp(22px, 5vw, 36px) clamp(18px, 5vw, 30px);
  }
  [data-ect-header] .ect-shell__navlink{
    display:block; width:100%;
    padding: clamp(14px, 4vw, 22px) clamp(10px, 4.6vw, 18px);
    font-size: clamp(22px, 5.8vw, 34px);
    font-weight:600;
    text-align:left;
    border-radius: 0;
    background: transparent;
    border: none;
  }

  /* When nav is portaled to body as overlay */
  html.ect-menu-open .ect-shell__nav.ect-shell__nav--overlay{ transform: translateY(0); opacity:1; visibility: visible; pointer-events:auto; }
  .ect-shell__nav.ect-shell__nav--overlay .ect-shell__navlist{
    display:flex; flex-direction:column; gap:16px; align-items:flex-start;
    padding: clamp(22px, 5vw, 36px) clamp(18px, 5vw, 30px);
  }
  .ect-shell__nav.ect-shell__nav--overlay .ect-shell__navlink{
    display:block; width:100%;
    padding: clamp(14px, 4vw, 22px) clamp(10px, 4.6vw, 18px);
    font-size: clamp(22px, 5.8vw, 34px);
    font-weight:600;
    text-align:left;
    border-radius: 0;
    background: transparent;
    border: none;
  }

  .ect-shell__nav-badge{
    position:absolute;
    right: clamp(18px, 6vw, 40px);
    bottom: clamp(18px, 6vw, 36px);
    width: clamp(64px, 10vw, 96px);
    height: clamp(64px, 10vw, 96px);
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .ect-shell__nav-badge svg{ width:100%; height:100%; color: var(--ect-color-2); opacity:.92; filter: drop-shadow(0 12px 24px rgba(0,0,0,.22)); }
}

/* QA/Debug: Force mobile overlay nav at any width when body has .ect-force-mobile-nav */
.ect-force-mobile-nav [data-ect-header] .ect-shell__menu-toggle{
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  margin: 0; width: 44px; height: 44px; border-radius: 8px;
  border: none;
  background: transparent;
  display: inline-flex; align-items:center; justify-content:center; color: #fff;
  z-index: 3;
}
.ect-force-mobile-nav [data-ect-header] .ect-shell__menu-toggle svg{ width: 22px; height: 22px; }
.ect-force-mobile-nav [data-ect-header] .ect-shell__menu-toggle .ico-close{ display:none; }
.ect-force-mobile-nav [data-ect-header].is-menu-open .ect-shell__menu-toggle .ico-menu{ display:none; }
.ect-force-mobile-nav [data-ect-header].is-menu-open .ect-shell__menu-toggle .ico-close{ display:block; }
.ect-force-mobile-nav [data-ect-header] .ect-shell__nav{
  position: fixed; left: 0; right:0;
  top: calc(var(--adminbar-offset, 0px) + var(--header-offset, 56px));
  bottom: 0; z-index: 1000000000;
  background: linear-gradient(180deg, rgba(16,20,24,0.76), rgba(16,20,24,0.38));
  color: #fff;
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .26s ease, opacity .26s ease; will-change: transform; pointer-events: none;
}
.ect-force-mobile-nav [data-ect-header].is-menu-open .ect-shell__nav{ transform: translateY(0); opacity:1; pointer-events:auto; }
.ect-force-mobile-nav [data-ect-header] .ect-shell__navlist{
  display:flex; flex-direction:column; gap:16px; align-items:flex-start;
  padding: clamp(22px, 5vw, 36px) clamp(18px, 5vw, 30px);
}
.ect-force-mobile-nav [data-ect-header] .ect-shell__navlink{
  display:block; width:100%;
  padding: clamp(14px, 4vw, 22px) clamp(10px, 4.6vw, 18px);
  font-size: clamp(22px, 5.8vw, 34px);
  font-weight:600;
  text-align:left;
  border-radius: 0;
  background: transparent;
  border: none;
}