/* ============================================================================
   Expert Scale — the site nav, and only the site nav
   ----------------------------------------------------------------------------
   WHY THIS IS ITS OWN FILE
   Before 2026-08-11 these rules lived in FOUR places: corporate.css (serving
   /proof/ and /program/) and an inline <style> copy in each of /prospect/,
   /peo/ and /manufacturing/. The markup had drifted into two different link
   sets and three different CTAs, so the same nav rendered differently
   depending on which page you were standing on.

   They cannot live in corporate.css, because corporate.css also carries a
   global reset, `body` typography and a navy `header {}` rule. The Hugo home
   page and the Hugo content layout are Tailwind surfaces with their own
   header — importing corporate.css there would repaint half of each page.
   This file is deliberately scoped to .site-nav* / .site-mobile-* ONLY, so it
   is safe to include on any surface on the site.

   Markup source of truth: layouts/partials/site-nav.html.
   Behaviour: /js/corporate-page.js (hamburger, active state, CTA target).

   BRAND (apexreplicant/presentations/brand-guide.html, §Expert Scale, Inc. —
   Corporate Brand Identity). Everything here comes from the corporate palette
   and type scale, not from a utility framework's defaults:
     Navy   #102A43   primary / hover / active
     Gold   #B8860B   the CTA and the active rule
     Steel  #627d98   link rest colour and the INCORPORATED subtitle
     Border #dde1e8   corporate.css --border
     Type   Inter at 700 (logo, CTA) / 500 (links) / 400 (body). No 600.
   The link and border colours were Tailwind greys (#4a5568, #e2e8f0) until
   2026-08-11; they are on-palette now. Do not reintroduce framework greys.
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #dde1e8;
}
.site-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
.site-nav-logo { display: flex; flex-direction: column; text-decoration: none; color: #102A43; }
.site-nav-logo-main { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.05em; line-height: 1.2; }
/* #4a6580 (corporate --muted, same desaturated-navy ramp) not Steel #627d98:
   Steel on white measures 4.28:1, under the 4.5:1 AA floor for small text.
   Muted measures 6.06:1. Applies to the logo subtitle, the link rest colour
   and the hamburger icon below — the hamburger technically only needs 3:1
   (icon floor) but is now muted too, so no #627d98 survives in this file and
   the rest-colour greps stay clean. (UX sweep 2026-08-12; F3.10 2026-08-12.) */
.site-nav-logo-sub { font-weight: 500; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: #4a6580; }
.site-nav-links { display: flex; align-items: center; gap: 0.25rem; }
/* min-height matches .site-nav-cta and .site-mobile-link, which already had
   it. These measured 38px — above the WCAG 2.2 AA 24px floor, but the only
   controls in the nav that were not 44px. */
.site-nav-link { color: #4a6580; text-decoration: none; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; transition: color 0.15s; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.site-nav-link:hover { color: #102A43; }

/* The page you are already on. Set by corporate-page.js from the pathname —
   the markup is byte-identical on every page precisely so it can be stamped
   from one source, which means the current page cannot be marked in HTML.

   Marked with navy + a gold rule, NOT a heavier weight: the brand guide's
   corporate type scale is 700 (logo/headlines) / 500 (nav links, subheads) /
   400 (body) and has no 600. Bolding the active link would put a weight on
   the page that the system does not contain. */
.site-nav-link.is-active { color: #102A43; box-shadow: inset 0 -2px 0 #B8860B; }

/* 700, matching .site-mobile-cta and the brand type scale — it was 600, which
   is not a weight the corporate system defines.
   Text is the on-light text-gold token #7D5A07 (esGold-700), not brand gold
   #B8860B: gold-as-TEXT on white measures 3.25:1 (under the 4.5:1 AA floor);
   the token measures 6.29:1. The border keeps brand gold — non-text UI only
   needs 3:1 and 3.25 passes. (F3.6 gold-text tokens, 2026-08-12.) */
.site-nav-cta { color: #7D5A07; border: 2px solid #B8860B; padding: 0.4rem 1rem; border-radius: 6px; font-size: 0.875rem; font-weight: 700; text-decoration: none; transition: all 0.15s; white-space: nowrap; min-height: 44px; display: flex; align-items: center; margin-left: 0.75rem; }
.site-nav-cta:hover { background: #B8860B; color: #fff; }
.site-nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; color: #4a6580; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
.site-mobile-menu { display: none; background: #fff; border-bottom: 1px solid #dde1e8; }
.site-mobile-menu.open { display: block; }
.site-mobile-links { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.site-mobile-link { color: #4a6580; text-decoration: none; padding: 0.75rem 0.75rem; border-radius: 6px; font-size: 1rem; font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.site-mobile-link.is-active { color: #102A43; box-shadow: inset 2px 0 0 #B8860B; }
.site-mobile-cta { display: block; text-align: center; background: #B8860B; color: #fff; border-radius: 6px; font-weight: 700; font-size: 1rem; margin-top: 0.5rem; text-decoration: none; min-height: 44px; line-height: 44px; padding: 0; }
/* 1023px, not 767px: the six desktop items are white-space:nowrap with no
   wrap on .site-nav-inner, and together with the logo they need roughly
   950px. Between 768px and ~960px (iPad portrait included) the old
   breakpoint let the nav overflow the viewport and put a horizontal scroll
   on every page. Hamburger below 1024px instead. (UX sweep 2026-08-12) */
@media (max-width: 1023px) {
  .site-nav-links { display: none; }
  .site-nav-hamburger { display: flex; }
}

/* The offer pages hide the nav when printing (the one-page briefs are meant to
   be forwarded on paper). corporate.css carries that rule for those pages; it
   is repeated here so a surface that loads only this file behaves the same. */
@media print {
  .site-nav, .site-mobile-menu { display: none !important; }
}