/* ============================================================
   ordersup.ai shared site header (v9.2, 22 Aug 2026)

   Todd, 22 Aug: "the same hamburger menu must appear on EVERY page".
   Nine of the seventeen servable pages under public/ are an older
   generation with their own self-contained stylesheets, so this file
   has to render identically whatever it is dropped into. Therefore:

   1. Every value the header needs is declared as a --nv-* custom
      property ON .sitehead, not inherited from the host page's :root.
      A page with its own --accent, --text or --line cannot reach in.
   2. Every property the host page might set on a bare element the
      header uses (header, nav, a, button, summary, details, svg) is
      reset explicitly under a .sitehead-prefixed selector. Those are
      at least (0,1,1); a host page's bare `nav{position:sticky}` is
      (0,0,1) and loses regardless of file order.
   3. The header's inner column is .navwrap, NOT .wrap. Four of the
      legacy pages already define .wrap for their own body column.

   The old rules lived in v8.css. They were removed from it in the same
   change that created this file, so there is exactly one definition of
   the header on the site.
   ============================================================ */

.sitehead{
  /* v8 light palette, frozen here so the header is the same object on a
     light page and on a dark one. Ratios are the measured v8 values:
     ink 14.6:1 on paper, ink2 8.03:1, muted 5.42:1, accent 11.26:1. */
  --nv-paper:#FCFAF6;
  --nv-paper3:#EFE9E0;
  --nv-ink:#201D14;
  /* v10.4 R4 (Todd, 24 Aug): A8's "darker" element is the BOLD items in the
     Solutions dropdown. They were already --nv-ink, MEASURED at 16.15:1 on the
     panel, so this is a small step rather than a rescue, and it is measured
     rather than eyeballed: 18.08:1 after. nav-audit.py asserts both the value
     and the ratio, so a later palette pass cannot quietly undo it or push it
     below AA. */
  --nv-ink-strong:#14110A;
  --nv-ink2:#4D4A42;
  --nv-muted:#66635B;
  --nv-rule:#DCD9D1;
  /* interactive component boundaries need 3:1 under WCAG 1.4.11;
     --nv-rule is a 1.35:1 decorative hairline and must never carry one */
  --nv-rule-ui:#868278;
  --nv-accent:#094120;
  --nv-accent-hover:#0D5429;
  --nv-on-accent:#FCFAF6;
  --nv-font-display:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --nv-font-body:"Source Sans 3", system-ui, -apple-system, sans-serif;
  --nv-wrap:1120px;

  position:sticky; top:0; z-index:60;
  background:var(--nv-paper);
  border-bottom:1px solid var(--nv-rule);
  color:var(--nv-ink);
  font-family:var(--nv-font-body);
  font-size:16px;
  line-height:1.5;
  letter-spacing:normal;
  text-align:left;
  margin:0; padding:0;
  width:100%;
  flex:0 0 auto;      /* legacy card pages set body{display:flex} */
  align-self:stretch;
  display:block;
  box-shadow:none;
  backdrop-filter:none;
}
.sitehead *,
.sitehead *::before,
.sitehead *::after{box-sizing:border-box}

.sitehead .navwrap{
  width:100%; max-width:var(--nv-wrap); margin-inline:auto; padding-inline:20px;
  display:flex; align-items:center; gap:1rem; min-height:66px;
}

.sitehead .brandmark{
  font-family:var(--nv-font-display); font-weight:700; font-size:1.16rem;
  letter-spacing:-0.02em; color:var(--nv-ink); text-decoration:none;
  margin-right:auto; display:inline-block; padding:0; border:0; background:none;
}
.sitehead .brandmark:hover{color:var(--nv-ink); text-decoration:none}
.sitehead .brandmark .dot{color:var(--nv-accent)}

/* ---------- desktop row ---------- */
.sitehead nav.navlinks{
  display:none; gap:1.35rem; align-items:center;
  position:static; height:auto; padding:0; margin:0; border:0;
  background:none; backdrop-filter:none; box-shadow:none; z-index:auto;
}
@media(min-width:1000px){.sitehead nav.navlinks{display:flex}}
.sitehead .navlinks a:not(.navcta){
  color:var(--nv-ink2); text-decoration:none; font-size:.95rem; font-weight:500;
  font-family:var(--nv-font-body); padding:0; border:0; background:none;
}
.sitehead .navlinks a:not(.navcta):hover{color:var(--nv-accent)}
.sitehead a.navcta{
  white-space:nowrap; padding:.6rem 1rem; font-size:.9rem; min-height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; font-weight:600; text-decoration:none;
  font-family:var(--nv-font-body);
  color:var(--nv-on-accent); background:var(--nv-accent);
  border:1px solid var(--nv-accent);
}
.sitehead a.navcta:hover{
  color:var(--nv-on-accent);
  background:var(--nv-accent-hover); border-color:var(--nv-accent-hover);
}

/* ---------- Solutions dropdown ----------
   Collapsed at rest; opened by hover, by keyboard focus, and by the button
   (sitenav.js). It still works with JS blocked, which is why :hover and
   :focus-within are in the CSS rather than left to the script.

   Todd, 22 Aug: "the Solutions dropdown is hard to select; it disappears
   when the pointer moves because there is a gap between the label and the
   panel." The panel sits 14px below the button, and that 14px belonged to
   neither element, so :hover went false the moment the pointer entered it.
   .dd::after is a transparent bridge across the gap: hovering a pseudo-
   element counts as hovering its originating element, so the hover path is
   now continuous. It only exists while the menu is up, so it can never
   swallow a click on a page at rest. sitenav.js adds a close delay on top
   for a pointer that leaves the path diagonally. */
.sitehead .dd{position:relative; display:inline-flex; align-items:center}
.sitehead .dd>button{
  font-family:var(--nv-font-body); font-size:.95rem; font-weight:500;
  background:none; border:0; color:var(--nv-ink2); cursor:pointer;
  padding:0; margin:0; line-height:inherit; text-transform:none;
  display:inline-flex; gap:.3rem; align-items:center; white-space:nowrap;
  min-height:40px;
}
.sitehead .dd>button:hover{color:var(--nv-accent)}
/* v10.3 (Todd, 23 Aug): the Solutions label is a LINK now, so a click loads
   the all-six page while hover still opens the panel. Same rendering as the
   button it replaces, to the pixel, so the header does not move. */
.sitehead .dd>.ddlabel{
  font-family:var(--nv-font-body); font-size:.95rem; font-weight:500;
  background:none; border:0; color:var(--nv-ink2); cursor:pointer;
  padding:0; margin:0; line-height:inherit; text-transform:none; text-decoration:none;
  display:inline-flex; gap:.3rem; align-items:center; white-space:nowrap;
  min-height:40px;
}
.sitehead .dd>.ddlabel:hover{color:var(--nv-accent)}
.sitehead .dd::after{
  content:""; display:none; position:absolute;
  left:-18px; right:-18px; top:100%; height:20px;
}
.sitehead .dd:hover::after,
.sitehead .dd:focus-within::after,
.sitehead .dd.open::after{display:block}
.sitehead .ddmenu{
  display:none; position:absolute; top:calc(100% + 14px); left:-14px; min-width:264px;
  background:var(--nv-paper); border:1px solid var(--nv-rule); border-radius:10px;
  padding:.5rem; box-shadow:0 12px 34px rgba(0,0,0,.13); z-index:80;
}
.sitehead .dd.open .ddmenu,
.sitehead .dd:hover .ddmenu,
.sitehead .dd:focus-within .ddmenu{display:block}
/* v10.3 (Angie, 23 Aug): *"there's no real space between the buttons, it's
   really text heavy ... a little bit more white space between each section it
   doesn't look so hectic. And maybe if the all six answer the phone, keep every
   enquiry together ... is really bold. And the other voice agent is a lot
   lighter in colour or not bold at all."*
   So: the row gets air, the plain-English NAME carries the weight, and the
   product sub-label recedes. Existing tokens only, no new colour. */
/* `.sitehead .navlinks a:not(.navcta)` is (0,3,1) and sets weight 500 on every
   link in the bar, panel included. These carry the .navlinks class so they tie
   on specificity and win on source order, which is why the selector is longer
   than it looks like it needs to be. */
.sitehead .navlinks .ddmenu a{
  display:block; padding:.62rem .7rem; border-radius:6px; font-size:.93rem;
  text-decoration:none; color:var(--nv-ink-strong); white-space:normal; border:0;
  font-family:var(--nv-font-display); font-weight:700; line-height:1.35;
}
.sitehead .navlinks .ddmenu a + a{margin-top:.2rem}
.sitehead .navlinks .ddmenu a:hover{background:var(--nv-paper3); color:var(--nv-accent)}
/* Angie's product sub-labels: the plain-English name says what it does for
   you, the sub-label says what the thing is called. */
.sitehead .navlinks .ddmenu .ddsub{
  display:block; font-size:.76rem; color:var(--nv-muted); margin-top:.14rem;
  font-family:var(--nv-font-body); font-weight:400; letter-spacing:.01em;
}

/* ---------- hamburger ---------- */
.sitehead details.mobnav{
  display:block; margin-left:auto; position:relative; border:0; background:none; padding:0;
}
@media(min-width:1000px){.sitehead details.mobnav{display:none}}
/* CHILD selector, deliberately. The v8 rule was `.mobnav summary`, a
   descendant selector, so its border and border-radius also landed on the
   nested Solutions summary inside the panel. That is the box in Todd's
   22 Aug phone screenshot: it was never written on purpose. */
.sitehead details.mobnav>summary{
  list-style:none; cursor:pointer; font-size:.9rem; color:var(--nv-ink2);
  font-family:var(--nv-font-body); font-weight:500;
  border:1px solid var(--nv-rule-ui); border-radius:7px;
  padding:.55rem .8rem; min-height:44px; margin:0;
  display:inline-flex; align-items:center; background:none;
}
.sitehead details.mobnav>summary::-webkit-details-marker{display:none}
.sitehead details.mobnav>summary::marker{content:""}
.sitehead .mobpanel{
  position:absolute; right:0; top:calc(100% + 8px); min-width:min(84vw,270px);
  background:var(--nv-paper); border:1px solid var(--nv-rule); border-radius:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.14); padding:.5rem .9rem 1rem; z-index:70;
  text-align:left;
  /* The panel is absolutely positioned inside a sticky header, so anything
     past the bottom of the viewport cannot be scrolled to: the header moves
     with the page. With the Solutions sub-menu open it measures 705px, which
     clears 844 and 812 but not a shorter phone in landscape or with a large
     text size. Scroll inside the panel rather than off the end of it. */
  max-height:calc(100vh - 84px); overflow-y:auto; overscroll-behavior:contain;
}
.sitehead .mobpanel a{
  display:block; padding:.6rem 0; color:var(--nv-ink2); text-decoration:none;
  border-bottom:1px solid var(--nv-rule); font-size:1rem; font-weight:400;
  font-family:var(--nv-font-body);
}
.sitehead .mobpanel>a:last-child{border-bottom:0}

/* ---------- Solutions sub-menu inside the hamburger ----------
   Todd, 22 Aug: no box around it. The six sub-items carry the level
   instead, by colour and weight: brand deep green at 600 against the
   top-level items' ink2 at 400, indented, on the same hairline list.
   #094120 on #FCFAF6 measures 11.26:1.

   v10.4 R4 STOPS AT THE DESKTOP PANEL, and this is why. On a phone these six
   are deep green on purpose, because green-at-600 against ink2-at-400 is the
   only thing carrying the level once Todd took the box away. Painting them
   --nv-ink-strong would darken them and erase the hierarchy cue in the same
   stroke. The desktop panel has a border and its own surface, so it does not
   need colour to say "these are inside a menu" and can take the darkening. */
.sitehead details.mobsub{
  border:0; border-bottom:1px solid var(--nv-rule); border-radius:0;
  background:none; padding:0; margin:0;
}
.sitehead details.mobsub>summary{
  list-style:none; cursor:pointer;
  border:0; border-radius:0; background:none; box-shadow:none;
  padding:.6rem 0; margin:0; min-height:48px;
  color:var(--nv-ink); font-weight:700; font-size:1.04rem;
  font-family:var(--nv-font-body);
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.sitehead details.mobsub>summary::-webkit-details-marker{display:none}
.sitehead details.mobsub>summary::marker{content:""}
/* "Make the dropdown chevron/arrow noticeably bigger so it is obvious there
   is a submenu." Drawn from two borders rather than set as the U+25BE glyph:
   the glyph was 14.4px of type carrying a ~7px triangle, this is a 13px arm
   at 3px stroke and reads at roughly twice the size. */
.sitehead details.mobsub>summary::after{
  content:""; flex:0 0 auto; width:13px; height:13px; margin-right:5px;
  border-right:3px solid var(--nv-accent);
  border-bottom:3px solid var(--nv-accent);
  transform:translateY(-4px) rotate(45deg);
  transition:transform .18s ease;
}
@media(prefers-reduced-motion:reduce){
  .sitehead details.mobsub>summary::after{transition:none}
}
.sitehead details.mobsub[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
.sitehead details.mobsub a{
  display:block; border-bottom:0;
  padding:.5rem 0 .5rem 1rem; min-height:44px;
  color:var(--nv-accent); font-weight:600; font-size:1rem;
}
.sitehead details.mobsub a:hover{color:var(--nv-accent-hover)}
.sitehead details.mobsub a:last-child{padding-bottom:.75rem}
.sitehead details.mobsub .mobsubtag{
  display:block; font-weight:500; font-size:.79rem; color:var(--nv-muted); margin-top:.05rem;
}

/* Focus must stay visible on every host page, including the ones that set
   their own :focus styles or none at all. */
.sitehead a:focus-visible,
.sitehead button:focus-visible,
.sitehead summary:focus-visible{
  outline:2px solid var(--nv-accent); outline-offset:2px; border-radius:4px;
}

/* /example-audit/ is written to be printed. A sticky header is not. */
@media print{.sitehead{display:none}}