/* The site header: logo, primary links, the Products menu, the appearance/login cluster and the
   mobile menu. ONE copy, loaded by every page after its base stylesheet (home.css or app.css).

   Why this file exists. The header MARKUP has been generated from one source since
   scripts/site-chrome.mjs landed, but its CSS was duplicated: home.css styled the four pages it
   serves, app.css styled the other twenty-five, and the two copies drifted. They did not drift in
   the obvious way (a value edited in one file only) but in rule ORDER, which changes the cascade,
   so the same generated markup rendered differently depending on which stylesheet the page loaded.
   Three defects came out of that, all invisible to a reviewer reading either file on its own:

     - The current item in the Products menu was unreadable on app.css pages in dusk and night
       (dark ink, no highlight behind it), because `.navdrop-menu a{background-image:none}`
       outranked the `nav a` gradient there and did not on home.css pages.
     - The menu items on home.css pages were padded 5px/11px instead of the 10px/12px both files
       ask for, because `.navlinks a` matched them as DESCENDANTS and was declared later.
     - The mobile menu never marked the current page on home.css pages: the rule that does it
       named `.mobmenu` in app.css only.

   Two rules keep that from coming back. `.navlinks > a` is a CHILD selector, so the top-level
   links can no longer reach inside the dropdown; and there is no generic `nav a` rule at all, so
   every nav surface states its own background explicitly.

   COLOUR. The header owns its palette, below. It has to: home.css and app.css name the same
   roles differently (--ink/--txt, --rule/--line, --rule-strong/--line2, --body/--dim,
   --faint/--dim2, and a menu background that had no shared name at all), so there is no token
   both files define that this one could reference. The values below are the set app.css already
   resolved to, which is what twenty-four of the twenty-eight pages were already showing.
   --surface is the exception and is referenced directly: both files define it, identically.

   If the site palette is ever re-tuned, these six values are the second place to change. Each is
   noted with the base-file token it was taken from.

   Deliberately six, not nine. "Products" is a peer of Evals, Research and Pricing and now takes
   the same colour they do; home.css had it a step lighter, which read as a different kind of
   thing sitting in the same row. The mobile menu's description lines and its group labels take
   the same grey as the dropdown's descriptions. */

:root{
  --nav-ink:#191917;          /* was --ink / --txt        */
  --nav-link:#4F4C46;         /* was --body / --dim       */
  --nav-desc:#6B6860;         /* was --faint / --dim2     */
  --nav-rule:#E5E2DA;         /* was --rule / --line      */
  --nav-rule-strong:#D2CEC4;  /* was --rule-strong/--line2*/
  --nav-panel-bg:#FFFFFF;     /* was rgb(--surface)/--card*/
}
:root[data-theme="dusk"]{
  --nav-ink:#191917;
  --nav-link:#403D37;
  --nav-desc:#57544C;
  --nav-rule:#CFCABC;
  --nav-rule-strong:#B6B0A0;
  --nav-panel-bg:#EDEAE0;
}
:root[data-theme="night"]{
  --nav-ink:#E8EEF3;
  --nav-link:#B9C4CE;
  --nav-desc:#8593A1;
  --nav-rule:#243040;
  --nav-rule-strong:#33445A;
  --nav-panel-bg:#141D28;
}

/* ---------------------------------------------------------------- header shell */

header.site{position:sticky;top:0;z-index:60;
  background:rgba(var(--surface),.90);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--nav-rule)}

/* min-height rather than height, and allowed to wrap: at the largest text size the control
   cluster on the right is wider than a phone, and a flex row that cannot wrap pushes it off the
   edge instead of onto a second line. */
.nav{display:flex;align-items:center;gap:24px;min-height:66px;flex-wrap:wrap;
  padding-top:10px;padding-bottom:10px}

.logo{display:flex;align-items:center;gap:11px;font-family:var(--sans);font-weight:700;
  font-size:calc((18.5px) * var(--ts));letter-spacing:-.02em;color:var(--nav-ink);text-decoration:none}
.logo:hover{text-decoration:none}
.logo .ward{color:var(--mint)}
.logomark{display:block;flex:none}

/* ---------------------------------------------------------------- primary links */

.navlinks{display:flex;align-items:center;gap:4px;margin-left:16px}

/* CHILD selector, not descendant. These same declarations used to reach the anchors inside the
   Products menu and overwrite their padding. */
.navlinks > a{
  font-family:var(--sans);font-size:calc((16px) * var(--ts));color:var(--nav-link);
  padding:5px 11px;border-radius:7px;text-decoration:none;
  background-image:linear-gradient(var(--hl),var(--hl));
  background-size:0% 100%;background-repeat:no-repeat;background-position:left center;
  transition:background-size .22s cubic-bezier(.22,.61,.36,1),color .22s;
}
.navlinks > a:hover{background-size:100% 100%;text-decoration:none;color:var(--on-hl)}
.navlinks > a[aria-current="page"]{background-size:100% 100%;color:var(--on-hl);font-weight:600}

/* ---------------------------------------------------------------- products menu */

/* A nav disclosure is not a content accordion. Keep its box explicit so later page-level
   details styles cannot stretch the primary links to the full height of the header. */
.navdrop{position:relative;font-family:var(--sans);border-bottom:0;padding:0}
.navdrop summary{list-style:none;cursor:pointer;font-size:calc((16px) * var(--ts));color:var(--nav-link);
  padding:5px 11px;border-radius:7px;user-select:none}
.navdrop summary::-webkit-details-marker{display:none}
.navdrop summary::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.navdrop summary:hover,.navdrop[open] summary{color:var(--nav-ink)}
.navdrop summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.navdrop summary[aria-current="page"]{background:var(--hl);color:var(--on-hl);font-weight:600}

.navdrop-menu{position:absolute;left:0;top:calc(100% + 10px);width:min(330px,calc(100vw - 40px));
  padding:9px;border:1px solid var(--nav-rule-strong);border-radius:13px;background:var(--nav-panel-bg);
  box-shadow:0 18px 48px rgba(0,0,0,.18)}
/* font-size stated here, not inherited. These anchors used to be reached by `.navlinks a` as
   descendants, which is where they got 16px; with the child selector above they would otherwise
   fall back to the 16.5px body size and the panel would grow. */
.navdrop-menu a{display:block;padding:10px 12px;border-radius:7px;
  font-family:var(--sans);font-size:calc((16px) * var(--ts));
  color:var(--nav-link);text-decoration:none}
.navdrop-menu b{display:block;font-weight:650;color:inherit}
.navdrop-menu small{display:block;margin-top:2px;font-size:calc((12.5px) * var(--ts));line-height:1.35;color:var(--nav-desc)}
.navdrop-menu a:hover{background:var(--hl);color:var(--on-hl);text-decoration:none}
/* The highlight is the same amber in all three themes, so a themed grey on the description line
   would sit at 2.7:1 on it. Inherit the ink for both the hovered and the current item. */
.navdrop-menu a:hover small,
.navdrop-menu a[aria-current="page"] small{color:inherit;opacity:.8}
.navdrop-menu a[aria-current="page"]{background:var(--hl);color:var(--on-hl);font-weight:600}
.navdrop-menu .navdrop-docs{margin-top:6px;padding-top:13px;border-top:1px solid var(--nav-rule)}

/* ---------------------------------------------------------------- right-hand cluster */

.navcta{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ---------------------------------------------------------------- mobile menu */

.menubtn{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:1px solid var(--nav-rule-strong);border-radius:9px;background:transparent;cursor:pointer;padding:0}
.menubtn span{display:block;width:16px;height:1.5px;background:var(--nav-ink);position:relative}
.menubtn span::before,.menubtn span::after{content:"";position:absolute;left:0;width:16px;
  height:1.5px;background:var(--nav-ink)}
.menubtn span::before{top:-5px} .menubtn span::after{top:5px}
.menubtn:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.mobmenu{display:none}

@media(max-width:980px){
  .navlinks{display:none}
  .menubtn{display:flex}
  .navcta .btn-s{display:none}          /* only the primary nav button survives the fold */
  .navcta .btn{padding:9px 13px;font-size:calc((14.5px) * var(--ts))}
  /* visibility, not just max-height:0. A collapsed max-height hides the menu to the eye and
     to nobody else: the nine links stayed in the tab order and in the accessibility tree, so
     a keyboard user on a phone tabbed through nine invisible stops inside a menu whose own
     button correctly reported aria-expanded="false". visibility:hidden removes them from
     both. The 0s transition is what keeps the slide: it flips to visible instantly on open,
     and waits out the .28s collapse before hiding on close, so neither direction is clipped. */
  .mobmenu{display:block;max-height:0;overflow:hidden;visibility:hidden;
    border-top:1px solid transparent;background:rgba(var(--surface),.98);
    transition:max-height .28s ease,border-color .28s ease,visibility 0s linear .28s}
  .mobmenu.open{max-height:70vh;overflow-y:auto;border-top-color:var(--nav-rule);visibility:visible;
    transition:max-height .28s ease,border-color .28s ease,visibility 0s}
  .mobmenu a{display:block;padding:14px 28px;border-bottom:1px solid var(--nav-rule);
    text-decoration:none;font-size:calc((16px) * var(--ts));color:var(--nav-ink);
    background-image:linear-gradient(var(--hl),var(--hl));
    background-size:0% 100%;background-repeat:no-repeat;background-position:left center}
  .mobmenu a:last-child{border-bottom:none}
  .mobmenu a small{display:block;color:var(--nav-desc);font-size:calc((13.5px) * var(--ts));margin-top:2px}
  .mobmenu a[aria-current="page"]{background-size:100% 100%;color:var(--on-hl);font-weight:600}
  .mobmenu a[aria-current="page"] small{color:inherit;opacity:.8}
  .moblabel{padding:11px 28px 8px;border-bottom:1px solid var(--nav-rule);font-family:var(--sans);
    font-size:calc((10.5px) * var(--ts));font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--nav-desc)}
}

@media(max-width:560px){
  /* The control cluster is 341px on its own (appearance button, Login, menu button) against
     roughly 300px of content column on a small phone. .nav already wraps, but a flex item will
     not go below its intrinsic width without min-width:0, so the cluster pushed the row past the
     screen edge instead of moving to the next line. */
  .nav{row-gap:10px;padding-left:18px;padding-right:18px}
  .navcta{flex-wrap:wrap;justify-content:flex-end;min-width:0;row-gap:8px}
  }

:where(html[data-motion="reduced"],html[data-motion="off"]) .mobmenu{transition:none}
:where(html[data-motion="reduced"],html[data-motion="off"]) .navlinks > a{transition:none}