/* ProTech Innovations — header & navigation redesign (agent-02)
   LOAD AFTER assets/css/main.css. Overrides only; never edit main.css here.
   Scope: header.site, .brand, .menu-toggle, nav.main, .dropdown, .btn-compact.
   No copy, link, href, or claim changes. Motion = transform + opacity only.
   Colours verified WCAG AA (see REPORT.md). System fonts only, no requests. */

:root{
  /* Shared redesign tokens (contract names). Values already in main.css are
     repeated verbatim so this file is self-contained; integration unifies. */
  --navy:#0B1220; --teal:#20C9C0; --blue:#0E5BD6;
  --ink:#0B1220; --muted:#5B6472; --paper:#ffffff; --line:#E5E7EB;
  --band:#F8FAFC;
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(11,18,32,.06);
  --shadow-md:0 8px 24px rgba(11,18,32,.08);
  --shadow-lg:0 16px 40px rgba(11,18,32,.14);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.15s; --dur-normal:.25s; --dur-slow:.4s;
}

/* ---------- Header base: sticky polish, scroll state, brand ---------- */
header.site{
  /* Solidifies on scroll via .is-scrolled (nav.js); height never changes,
     so page content below never shifts. */
  transition:box-shadow var(--dur-normal) var(--ease-out),
    background-color var(--dur-normal) var(--ease-out);
}
@supports (backdrop-filter:blur(8px)){
  header.site{background:rgba(255,255,255,.88);backdrop-filter:blur(10px) saturate(1.1)}
}
header.site.is-scrolled{
  background:#fff;
  box-shadow:inset 0 3px 0 var(--teal), var(--shadow-md);
}
@supports (backdrop-filter:blur(8px)){
  header.site.is-scrolled{background:rgba(255,255,255,.96)}
}

/* Logo mark stays identical; the teal dot grows slightly on brand hover
   only (transform, no autoplay motion). */
.brand-mark circle{
  transform-box:fill-box; transform-origin:center;
  transition:transform var(--dur-normal) var(--ease-out);
}
.brand:hover .brand-mark circle{transform:scale(1.3)}
.brand{border-radius:var(--radius-sm)}

/* Body scroll lock while the mobile drawer is open (nav.js toggles the
   class by observing header.nav-open, so every close path releases it). */
body.nav-locked{overflow:hidden}

/* ---------- Desktop: two-row header, nav band ---------- */
@media (min-width:901px){
  /* Row 1: brand left, compact CTA right (brand no longer spans full width). */
  header.site .nav .brand{width:auto}
  .btn-compact{display:inline-flex;min-height:44px;padding:10px 16px;font-size:15px}
  .btn-compact:hover{transform:translateY(-1px)}
  .btn-compact:active{transform:translateY(0)}

  /* Row 2: full-bleed tinted band. Negative margins cancel .wrap padding
     so the band reaches both screen edges; box-sizing keeps width exact. */
  header.site nav.main{
    width:100%; margin:0 -24px; padding:6px 24px;
    background:var(--band);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    gap:2px; flex-wrap:wrap; align-items:center;
  }
  nav.main a, .drop-btn{position:relative;font-size:14px;padding:10px 11px}
  nav.main a{border-radius:var(--radius-sm)}

  /* Underline indicator: sweeps in on hover/focus, persistent on the
     current page. Transform-only; colour changes are instant, not motion. */
  nav.main a::after, .drop-btn::after{
    content:""; position:absolute; left:11px; right:11px; bottom:3px; height:3px;
    border-radius:2px; background:var(--teal);
    transform:scaleX(0); transform-origin:center;
    transition:transform var(--dur-normal) var(--ease-out);
  }
  nav.main a:hover::after, nav.main a:focus-visible::after,
  .drop-btn:hover::after, .drop-btn:focus-visible::after{transform:scaleX(1)}
  nav.main a[aria-current="page"]::after,
  .drop-btn[aria-current="true"]::after{transform:scaleX(1)}
  nav.main a[aria-current="page"], .drop-btn[aria-current="true"]{color:var(--blue)}
  nav.main a:hover, .drop-btn:hover{background:#fff}

  /* CTA: pushed to the band's right edge; text may wrap to two lines
     (identical wording) so the band stays one row at full width. */
  nav.main a.btn{
    margin-inline-start:auto; max-width:200px; text-align:center;
    line-height:1.3; padding:10px 16px; font-size:14px;
  }
  nav.main a.btn::after{content:none}
  nav.main a.btn:hover{transform:translateY(-1px)}

  /* Language switch reads as a pill, distinct from content links. */
  nav.main a[lang]{border:1.5px solid #CBD2DC;border-radius:999px;padding:9px 14px}
  nav.main a[lang]::after{content:none}
  nav.main a[lang]:hover{border-color:var(--blue);color:var(--blue);background:#fff}

  /* Solutions dropdown panel: animated with opacity + translate only.
     visibility (not display) keeps the transition running both ways, and
     hidden panels leave the tab order, as before. */
  .drop-menu{
    display:block; visibility:hidden; opacity:0; pointer-events:none;
    transform:translateY(6px);
    transition:opacity var(--dur-normal) var(--ease-out),
      transform var(--dur-normal) var(--ease-out),
      visibility 0s linear var(--dur-normal);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:8px;
  }
  .dropdown.open .drop-menu, .dropdown:hover .drop-menu,
  .dropdown:focus-within .drop-menu{
    visibility:visible; opacity:1; pointer-events:auto; transform:translateY(0);
    transition:opacity var(--dur-normal) var(--ease-out),
      transform var(--dur-normal) var(--ease-out),
      visibility 0s linear 0s;
  }
  .drop-menu a{font-size:15px;padding:11px 14px;position:relative}
  .drop-menu a::after{content:none}
  .drop-menu a:hover{background:var(--band)}
  /* Teal edge bar on hovered menu items (transform-only). */
  .drop-menu a::before{
    content:""; position:absolute; inset-inline-start:0; top:8px; bottom:8px;
    width:3px; border-radius:2px; background:var(--teal);
    transform:scaleY(0); transform-origin:center;
    transition:transform var(--dur-fast) var(--ease-out);
  }
  .drop-menu a:hover::before{transform:scaleY(1)}
  .drop-btn .chev{transition:transform var(--dur-normal) var(--ease-out)}
}

/* ---------- Mobile drawer (<=900px): slide + fade + stagger ---------- */
@media (max-width:900px){
  .menu-toggle{transition:background-color var(--dur-fast) var(--ease-out)}
  .menu-toggle:hover{background:var(--band)}
  .menu-toggle:active{transform:scale(.96)}
  .menu-toggle .bar{transition:transform var(--dur-normal) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}

  header.site.nav-open nav.main{
    border-radius:0 0 18px 18px;
    border-top:3px solid var(--teal);
    box-shadow:var(--shadow-lg);
    padding:12px 24px 20px;
    animation:navDrawerIn var(--dur-slow) var(--ease-out) both;
  }
  /* Staggered entrance, one row at a time (13 nav children max). */
  header.site.nav-open nav.main > *{animation:navItemIn var(--dur-normal) var(--ease-out) both}
  header.site.nav-open nav.main > *:nth-child(1){animation-delay:.02s}
  header.site.nav-open nav.main > *:nth-child(2){animation-delay:.04s}
  header.site.nav-open nav.main > *:nth-child(3){animation-delay:.06s}
  header.site.nav-open nav.main > *:nth-child(4){animation-delay:.08s}
  header.site.nav-open nav.main > *:nth-child(5){animation-delay:.10s}
  header.site.nav-open nav.main > *:nth-child(6){animation-delay:.12s}
  header.site.nav-open nav.main > *:nth-child(7){animation-delay:.14s}
  header.site.nav-open nav.main > *:nth-child(8){animation-delay:.16s}
  header.site.nav-open nav.main > *:nth-child(9){animation-delay:.18s}
  header.site.nav-open nav.main > *:nth-child(10){animation-delay:.20s}
  header.site.nav-open nav.main > *:nth-child(11){animation-delay:.22s}
  header.site.nav-open nav.main > *:nth-child(12){animation-delay:.24s}
  header.site.nav-open nav.main > *:nth-child(13){animation-delay:.26s}
  header.site.nav-open nav.main > *:nth-child(14){animation-delay:.28s}

  /* Drawer links: full-width rows, current page keeps its teal underline. */
  header.site.nav-open nav.main a, header.site.nav-open .drop-btn{
    position:relative; border-radius:var(--radius-sm);
  }
  header.site.nav-open nav.main a::after, header.site.nav-open .drop-btn::after{
    content:""; position:absolute; left:11px; right:11px; bottom:3px; height:3px;
    border-radius:2px; background:var(--teal); transform:scaleX(0);
    transform-origin:center;
    transition:transform var(--dur-normal) var(--ease-out);
  }
  header.site.nav-open nav.main a[aria-current="page"]::after,
  header.site.nav-open .drop-btn[aria-current="true"]::after{transform:scaleX(1)}
  header.site.nav-open nav.main a[aria-current="page"],
  header.site.nav-open .drop-btn[aria-current="true"]{color:var(--blue)}
  header.site.nav-open nav.main a.btn::after{content:none}

  /* Submenu inside the drawer animates on open (keyframes run even though
     the panel flips from display:none, unlike transitions). */
  header.site.nav-open .dropdown.open .drop-menu{
    animation:navDropIn var(--dur-normal) var(--ease-out) both;
  }
}
@keyframes navDrawerIn{
  from{opacity:0; transform:translateY(-10px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes navItemIn{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes navDropIn{
  from{opacity:0; transform:translateY(-6px)}
  to{opacity:1; transform:translateY(0)}
}

/* ---------- Anchor offset under the shorter sticky header ---------- */
section[id], #request-form, #prepare, #main{scroll-margin-top:140px}
@media (max-width:900px){
  section[id], #request-form, #prepare, #main{scroll-margin-top:96px}
  header.site.nav-open nav.main{padding:12px 18px 20px}
}

/* ---------- Reduced motion: everything instant and fully visible ---------- */
@media (prefers-reduced-motion:reduce){
  header.site, .brand-mark circle, .btn-compact, nav.main a.btn,
  .menu-toggle, .menu-toggle .bar, .drop-btn .chev,
  nav.main a::after, .drop-btn::after, .drop-menu, .drop-menu a::before{
    transition:none !important; animation:none !important;
  }
  header.site.nav-open nav.main,
  header.site.nav-open nav.main > *,
  header.site.nav-open .dropdown.open .drop-menu{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .dropdown.open .drop-menu, .dropdown:hover .drop-menu,
  .dropdown:focus-within .drop-menu{
    visibility:visible; opacity:1; transform:none;
  }
}