/* =====================================================================================================
   header.css — round 3 header module (DESIGN-SPEC §2.1, §2.2, §4; REFERENCE-SPEC §1).
   Loads on every page AFTER refine.css / template.css / r3-system.css and after the in-flight
   identity-header.css (which it supersedes — the integrator unlinks that file; the three `!important`
   declarations below exist only so this layer still wins if identity-header.css lingers).
   Markup is unchanged: header.ula-header > .topbar (yellow pill) + .mainbar (logo · main-nav · header-actions · mobile-nav).
   Every hook used by nav.js, round2-shell.js, glass.js, refine.js and logo-intro.js keeps its class name.
   Round-1 fixes (QA): scroll-padding-top for focus-not-obscured (+ anchor rebalance), 44 px logo link / CONTACT / language
   select, mobile panel sized from the header's rendered bottom (--header-bottom), Practice Areas opens only on
   Enter/Space/hover (disclosure semantics; header.js mirrors the state) — see docs/round3/modules/header.md §8.
   ===================================================================================================== */

/* ---- 0. Header height token (8 + 44 + 6 + 80 = 138 · 8 + 44 + 6 + 72 = 130 · 6 + 44 + 6 + 64 = 120).
        header.js re-measures the rendered header and writes the same custom property inline on <html>. */
:root{ --header-height:138px; --ula-sub-gap:24px; }   /* sub-gap: link box bottom → 6 px below the glass block (80 − 44) / 2 + 6 */
@media (max-width:1024px){ :root{ --header-height:130px; } }
@media (max-width:767px){  :root{ --header-height:120px; } }
main#main{ scroll-margin-top:var(--anchor-offset,calc(var(--header-height,138px) + 24px)); }

/* ---- 0.1 Focus not obscured (WCAG 2.2 2.4.11; team floor "no content under the sticky header").
        The scrollport's optimal viewing region starts 16 px below the block, so focus(), scrollIntoView() and fragment
        navigation all keep their target clear of the header — Shift+Tab from the footer included (Chromium scrolls for a
        focused element only when it lies outside this region; the sticky header is inside the viewport, so without the
        padding a backwards tab stop ends under it).
        scroll-padding and a target's own scroll-margin ADD UP, so the anchor margins are rebalanced to keep every landing
        where it was: --anchor-offset (polish.css:5, header + 24) becomes the 8 px above the padding → header + 24;
        .glass (landing.css:8, header + 18) → 2 px → header + 18; service #case-review (service-pages.css:13, header + 20)
        → 4 px → header + 20; .pcard (home.css:43, 140 px ≈ header + 2) → 2 px → header + 18. */
html{ scroll-padding-top:calc(var(--header-height,138px) + 16px); }
:root{ --anchor-offset:8px; }
.glass,.pcard{ scroll-margin-top:2px; }
body[data-page=service] #case-review{ scroll-margin-top:4px; }

/* ---- 1. The glass block. The sticky header is one object; its glass lives on ::before so that the
        sub-menu and the mobile panel (which hang below the block) keep the page, not the header, as their
        own backdrop root. Nothing changes on scroll except fill alpha and shadow (no height change, no CLS). */
.ula-header{ position:sticky; top:0; z-index:99; padding:8px 0 0; margin:0; background:transparent; border:0; box-shadow:none; isolation:auto; }
.ula-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:0 0 var(--panel-r,33px) var(--panel-r,33px);
  background:
    radial-gradient(ellipse 60% 45% at 18% 0%,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 62%),   /* lens highlight */
    rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.90),0 1px 0 rgba(12,29,85,.06);
  border-bottom:1px solid rgba(12,29,85,.10);
  transition:box-shadow .25s ease,background-color .25s ease;
}
.ula-header.is-scrolled::before{ background-color:rgba(255,255,255,.84); box-shadow:inset 0 1px 0 rgba(255,255,255,.90),0 10px 30px rgba(12,29,85,.12); }

/* ---- 2. Yellow pill = the footer bar component (live footer pill: 1380 wide, inset 30, fully round, navy on yellow). */
.ula-header .topbar{
  position:relative; z-index:1; box-sizing:border-box; height:44px; max-width:1380px; margin:0 auto 6px;
  padding:0; padding-inline:28px 24px; border-radius:22px;
  background:#F9E900; color:#0C1D55; display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 0 rgba(12,29,85,.08);
}
.ula-header .topbar .call{
  font:500 16px/1 var(--f-primary); letter-spacing:.01em; text-transform:uppercase; color:#0C1D55; text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center; gap:.3em; white-space:nowrap; min-width:0; border-radius:8px;
}
.ula-header .topbar .call:hover{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px; }
.ula-header .topbar .icons{ display:flex; align-items:center; gap:4px; margin:0; padding:0; }
.ula-header .topbar .icons a{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#0C1D55; background:transparent;
  transition:background-color .18s ease; animation:none;
}
.ula-header .topbar .icons a:hover,.ula-header .topbar .icons a:focus-visible{ background:rgba(12,29,85,.10); animation:none; }
.ula-header .topbar .icons svg{ width:17px; height:17px; fill:#0C1D55; display:block; }
.ula-header .topbar a:focus-visible{ outline:3px solid #0C1D55; outline-offset:2px; }

/* ---- 3. Main bar: a transparent row inside the glass block. The OpenGlass underlay (glass.js) is neutralised here;
        the integrator removes it from glass.js as well (DESIGN-SPEC §2). */
.ula-header .mainbar{
  position:relative; box-sizing:border-box; max-width:1440px; height:80px; margin:0 auto; padding:0 30px;
  display:flex; align-items:center; justify-content:flex-start; gap:24px; direction:inherit;
  background:transparent!important; border:0; border-radius:0; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; isolation:auto; transition:none;
}
.ula-header.is-scrolled .mainbar{ box-shadow:none; }
.ula-header .mainbar>.r2-glass-layer,.ula-header .main-nav .sub-menu>.r2-glass-layer{ display:none!important; }

/* order: nav (left) · actions · logo at the inline end — visually top-right in LTR and in RTL */
.ula-header .mainbar>.main-nav{ order:0; flex:1 1 auto; min-width:0; margin:0; margin-inline-start:0; }
.ula-header .mainbar>.header-actions{ order:1; display:flex; align-items:center; gap:14px; flex:0 0 auto; margin:0; }
/* The logo is direction:ltr in every language (landing.css), so its auto margin is written physically: the free space always goes to its LEFT and the mark stays flush with the right edge.
   The link is a 44 px-tall flex box with the image centred in it (team floor); the <img> rect — the logo-intro destination — is unchanged at every width. */
.ula-header .mainbar>.logo{ order:2; flex:0 0 auto; margin:0 0 0 auto; display:flex; align-items:center; min-height:44px; position:relative; line-height:0; min-width:0; direction:ltr; border-radius:6px; }
[dir=rtl] .ula-header .mainbar>.logo{ order:-1; margin:0 0 0 auto; }
[dir=rtl] .ula-header .mainbar>.main-nav{ margin-inline-start:auto; }
.ula-header .mainbar>.logo img{ display:block; width:240px; height:47px; max-width:none; }   /* the logo-intro destination: a fixed rect per breakpoint */
.ula-header .mainbar>.logo:focus-visible{ outline:3px solid #0072C7; outline-offset:6px; }

/* ---- 4. Navigation typography (live values kept: Montserrat 600 17/20, 1 px tracking, 3 px yellow underline). */
.ula-header .main-nav>ul{ display:flex; align-items:center; gap:38px; margin:0; padding:0; list-style:none; }
.ula-header .main-nav>ul>li{ position:relative; margin:0; }
.ula-header .main-nav>ul>li>a{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:12px 0; margin:0;
  font:600 17px/20px var(--f-text); letter-spacing:1px; color:#0C1D55; text-decoration:none; white-space:nowrap; cursor:pointer; position:relative;
}
[dir=rtl] .ula-header .main-nav>ul>li>a{ letter-spacing:0; font-size:15px; }
.ula-header .main-nav>ul>li>a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:2px; background:#F9E900;
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-std,cubic-bezier(.2,.7,.2,1));
}
[dir=rtl] .ula-header .main-nav>ul>li>a::after{ transform-origin:right; }
.ula-header .main-nav>ul>li>a:hover::after,.ula-header .main-nav>ul>li>a:focus-visible::after,
.ula-header .main-nav>ul>li>a[aria-current=page]::after,.ula-header .main-nav>ul>li.current>a::after,
.ula-header .main-nav>ul>li.has-sub.open>a::after,.ula-header .main-nav>ul>li.has-sub:hover>a::after{ transform:scaleX(1); }
.ula-header .main-nav>ul>li>a:focus-visible{ outline:3px solid #0072C7; outline-offset:4px; border-radius:4px; }
.ula-header .main-nav .caret{ width:10px; height:14px; fill:currentColor; transition:transform .2s ease; }
.ula-header .main-nav li.has-sub.open>.sub-toggle .caret,.ula-header .main-nav li.has-sub:not(.is-dismissed):hover>.sub-toggle .caret{ transform:rotate(180deg); }

/* ---- 5. Sub-menu: light glass panel hanging below the block (overflow visible so the hover bridge works; rows are inset pills). */
.ula-header .main-nav .sub-menu{
  left:0; top:100%; margin:var(--ula-sub-gap,22px) 0 0; min-width:330px; padding:8px; overflow:visible; isolation:auto;
  background:rgba(255,255,255,.86)!important;
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(12,29,85,.10); border-radius:18px;
  box-shadow:0 14px 36px rgba(12,29,85,.16),inset 0 1px 0 #fff;
}
.ula-header .main-nav .sub-menu::before{ content:""; position:absolute; left:0; right:0; top:calc(-1 * var(--ula-sub-gap,22px) - 1px); height:calc(var(--ula-sub-gap,22px) + 1px); }
[dir=rtl] .ula-header .main-nav .sub-menu{ left:auto; right:0; }
.ula-header .sub-menu a,.ula-header .sub-menu button{ border-radius:10px; }
.ula-header .sub-menu ul{ border-radius:10px; border:0; margin:2px 0 4px; background:rgba(12,29,85,.04); }
/* Disclosure semantics: the panel opens on Enter/Space (nav.js toggles .open + aria-expanded) or on hover — not merely because
   the toggle has focus (original.css:93 `li:focus-within > .sub-menu{display:block}` showed it with aria-expanded still "false"
   and put seven extra stops in every keyboard pass). header.js closes the group when focus leaves it. */
.ula-header .main-nav>ul>li.has-sub:focus-within:not(.open):not(:hover)>.sub-menu{ display:none; }

/* ---- 6. Language pill and CONTACT. */
.ula-header .r2-language-area{ display:flex; align-items:center; padding-inline-start:18px; border-inline-start:1px solid rgba(12,29,85,.14); margin-inline-end:2px; }
.ula-header .r2-language-pill{
  background:rgba(255,255,255,.55); border:1px solid rgba(12,29,85,.18); border-radius:999px; min-height:44px; padding:0 10px 0 12px; color:#0C1D55; gap:8px;
  transition:background-color .18s ease,border-color .18s ease;
}
.ula-header .r2-language-pill:hover,.ula-header .r2-language-pill:focus-within{ background:rgba(255,255,255,.88); border-color:rgba(12,29,85,.30); }
.ula-header .r2-language-pill select{ min-height:44px; box-sizing:border-box; }   /* round2-shell.css:12 42 px; the pill grows to 46 (1 px borders) */
.ula-header .r2-language-pill select:focus-visible{ outline:3px solid #0072C7; outline-offset:2px; }
.ula-header .btn-contact{
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:50px; min-height:44px; padding:0 32px; margin:0;
  border-radius:99px; background:#F9E900; border:2px solid #F9E900; color:#0C1D55;
  font:500 20px/1 var(--f-primary); text-transform:uppercase; letter-spacing:.01em; white-space:nowrap; text-decoration:none;
  box-shadow:0 1px 0 rgba(12,29,85,.08);
}
.ula-header .btn-contact:focus-visible{ outline:3px solid #0C1D55; outline-offset:3px; }
[dir=rtl] .ula-header .btn-contact{ font-size:18px; font-weight:600; letter-spacing:0; }

/* ---- 7. Burger (44 × 44). */
.ula-header .burger{ display:none; width:44px; height:44px; padding:0; margin:0; border:0; background:transparent; border-radius:50%; color:#0C1D55; cursor:pointer; place-items:center; transition:background-color .18s ease; }
.ula-header .burger:hover,.ula-header .burger[aria-expanded=true]{ background:rgba(12,29,85,.09); }
.ula-header .burger:focus-visible{ outline:3px solid #0072C7; outline-offset:2px; }
.ula-header .burger svg{ width:28px; height:28px; fill:currentColor; display:block; }

/* ---- 8. Desktop 1025–1250: tighter nav, logo 205 × 40 (refine.css value, kept so the intro destination stays stable per breakpoint). */
@media (min-width:1025px) and (max-width:1250px){
  .ula-header .mainbar{ gap:16px; padding:0 22px; }
  .ula-header .main-nav>ul{ gap:22px; }
  .ula-header .main-nav>ul>li>a{ font-size:15px; letter-spacing:.3px; }
  .ula-header .mainbar>.header-actions{ gap:10px; }
  .ula-header .r2-language-area{ padding-inline-start:10px; }
  .ula-header .r2-language-pill{ padding-inline:7px; gap:5px; }
  .ula-header .btn-contact{ padding:0 20px; font-size:18px; }
  .ula-header .mainbar>.logo img{ width:205px; height:40px; }
}

/* ---- 9. Tablet and mobile share the burger layout: burger · (language pill, tablet only) · CONTACT … logo at the inline end. */
@media (max-width:1024px){
  .ula-header .mainbar>.main-nav{ display:none; }
  .ula-header .burger{ display:grid; order:-1; }
  [dir=rtl] .ula-header .burger{ order:1; }                                /* logo stays top-right in RTL, so the burger keeps the far-left edge */
  .ula-header .mainbar{ justify-content:flex-start; }
  .ula-header .mobile-nav{
    position:absolute; inset-inline:10px; top:calc(100% + 6px); display:none; margin:0; padding:8px 0 14px; text-align:start;
    background:rgba(255,255,255,.86)!important;
    -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
    border:1px solid rgba(12,29,85,.10); border-radius:18px;
    box-shadow:0 14px 36px rgba(12,29,85,.16),inset 0 1px 0 #fff;
    /* --header-bottom (header.js) is the block's rendered bottom edge: height once stuck, height + the 31 px preview note at scroll 0. */
    max-height:calc(100dvh - var(--header-bottom,var(--header-height,130px)) - 12px); overflow:auto; overscroll-behavior:contain; isolation:auto;
  }
  .ula-header .mobile-nav.open{ display:block; animation:ula-menu-in .22s var(--ease-std,cubic-bezier(.2,.7,.2,1)) both; }
  .ula-header .mobile-nav .r2-mobile-top{ border-bottom-color:rgba(12,29,85,.10); }
  .ula-header .mobile-nav a:focus-visible,.ula-header .mobile-nav button:focus-visible,.ula-header .mobile-nav select:focus-visible{ outline:3px solid #0072C7; outline-offset:-4px; }
}
@keyframes ula-menu-in{ from{ opacity:0; transform:translateY(-6px); } }

@media (min-width:768px) and (max-width:1024px){
  .ula-header{ padding-top:8px; }
  .ula-header::before{ border-radius:0 0 var(--panel-r,24px) var(--panel-r,24px); }
  .ula-header .topbar{ max-width:none; margin:0 10px 6px; height:44px; }
  .ula-header .mainbar{ height:72px; padding:0 20px; gap:16px; }
  .ula-header .mainbar>.header-actions{ gap:12px; }
  .ula-header .header-actions>.r2-language-area{ display:flex; }          /* round2-shell.css hides it ≤1024; the tablet row carries it (spec §4) */
  .ula-header .mainbar>.logo img{ width:200px; height:39px; }
  .ula-header .btn-contact{ height:44px; padding:0 22px; font-size:18px; }
}

@media (max-width:767px){
  .ula-header{ padding-top:6px; }
  .ula-header::before{ border-radius:0 0 var(--panel-r,18px) var(--panel-r,18px); }
  .ula-header .topbar{ max-width:none; margin:0 10px 6px; height:44px; padding-inline:16px 10px; border-radius:22px; gap:6px; }
  .ula-header .topbar .call{ font-size:14px; }
  .ula-header .topbar .icons{ gap:0; }
  .ula-header .topbar .icons a{ width:44px; height:44px; }
  .ula-header .topbar .icons svg{ width:16px; height:16px; }
  .ula-header .mainbar{ height:64px; padding:0 12px; gap:8px; }
  .ula-header .mainbar>.header-actions{ gap:8px; }
  .ula-header .header-actions>.r2-language-area{ display:none; }          /* the mobile panel carries the language control */
  .ula-header .mainbar>.logo img{ width:clamp(150px,42vw,180px); height:auto; }
  .ula-header .btn-contact{ height:44px; min-height:44px; padding:0 16px; font-size:16px; }   /* spec §4 says 40; the 44 px team floor wins */
  [dir=rtl] .ula-header .btn-contact{ font-size:15px; }
  .ula-header .mobile-nav{ top:calc(100% + 6px); max-height:calc(100dvh - var(--header-bottom,var(--header-height,120px)) - 12px); }
}
@media (max-width:340px){
  .ula-header .topbar .icons a{ width:44px; }
  /* The call-text link already provides dialing; omit its duplicate icon at 320px. */
  .ula-header .topbar .icons a[href^="tel:"]{ display:none; }
  .ula-header .topbar .call{ font-size:13px; }
  .ula-header .mainbar>.logo img{ width:clamp(136px,40vw,160px); }
  .ula-header .btn-contact{ padding:0 12px; font-size:15px; }
}

/* ---- 10. Fallbacks — opaque white wherever the blur cannot or should not render.
        (html[data-glass=fallback] is deliberately NOT used: glass.js sets it whenever zero OpenGlass cards are mounted,
         which is the normal state of the home/lemon pages once the header underlays are gone.) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ula-header::before{ background:#FFFFFF; }
  .ula-header .main-nav .sub-menu,.ula-header .mobile-nav{ background:#FFFFFF!important; }
}
html[data-glass=opaque] .ula-header::before{ background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-glass=opaque] .ula-header .main-nav .sub-menu,html[data-glass=opaque] .ula-header .mobile-nav{ background:#FFFFFF!important; -webkit-backdrop-filter:none; backdrop-filter:none; }
@media (prefers-reduced-transparency:reduce){
  .ula-header::before{ background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ula-header .main-nav .sub-menu,.ula-header .mobile-nav{ background:#FFFFFF!important; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ula-header .r2-language-pill{ background:#FFFFFF; }
}
@media (forced-colors:active){
  .ula-header::before{ background:Canvas; border:1px solid CanvasText; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ula-header .topbar{ background:Canvas; color:CanvasText; border:1px solid CanvasText; box-shadow:none; }
  .ula-header .topbar .icons svg{ fill:CanvasText; }
  .ula-header .main-nav .sub-menu,.ula-header .mobile-nav{ background:Canvas!important; color:CanvasText; border:1px solid CanvasText; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .ula-header .btn-contact,.ula-header .r2-language-pill{ border:1px solid ButtonText; background:ButtonFace; color:ButtonText; }
  .ula-header .main-nav>ul>li>a::after{ background:LinkText; }
}
@media (prefers-reduced-motion:reduce){
  .ula-header::before,.ula-header .main-nav>ul>li>a::after,.ula-header .main-nav .caret,.ula-header .r2-language-pill,.ula-header .burger,.ula-header .topbar .icons a{ transition:none; }
  .ula-header .mobile-nav.open{ animation:none; }
}
@media print{
  .ula-header{ position:static; }
  .ula-header::before{ display:none; }
}