/* Shared header/nav styling, used on every page. Requires the page's own
   stylesheet to define --navy, --blue, --blue-bright, --grey, --line, --panel
   in its :root block. Every page uses <div class="wrap nav"> (both classes
   on the same element) so the header content aligns with the body content,
   matching the .wrap max-width/padding used everywhere else on that page. */
/* Some pages' .wrap rule carries padding-top/bottom and text-align meant for
   their main content block (e.g. the thank-you and 404 pages). Since the
   header combines .wrap with .nav on the same element, override those two
   properties specifically for the header so they don't leak in. */
header .wrap{padding-top:0; padding-bottom:0; text-align:left}

/* The header is sticky and 70px tall, so an in-page anchor jump would land
   with the target tucked underneath it. On the homepage that was masked by
   its 82px section padding; the employer page's 56px padding is smaller than
   the header, so its dropdown anchors would have landed behind it. This also
   fixes the privacy notice's own table-of-contents jumps, which had the same
   problem. Set here rather than per page because the sticky header that
   causes it is defined here. */
html{scroll-padding-top:78px}

header{position:sticky; top:0; z-index:50; background:rgba(16,48,101,.97);
  backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex; align-items:center; justify-content:space-between; height:70px}
.nav img{height:36px; display:block}

.nav-actions{display:flex; align-items:center; gap:12px; position:relative}

.menu-toggle{display:flex; flex-direction:column; justify-content:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px; border-radius:6px;
  transition:background .15s ease}
.menu-toggle:hover{background:rgba(255,255,255,.08)}
.menu-toggle span{display:block; width:22px; height:2px; background:#fff; transition:.2s}

.btn-nav-outline{color:#fff; font-size:.92rem; font-weight:600; padding:9px 16px;
  border-radius:6px; border:1.5px solid rgba(255,255,255,.4); white-space:nowrap;
  text-decoration:none; display:inline-block;
  transition:border-color .15s ease, background .15s ease}
.btn-nav-outline:hover{border-color:#fff; background:rgba(255,255,255,.08)}

.nav-cta{background:var(--blue); color:#fff; padding:10px 18px; border-radius:6px;
  font-weight:700; font-size:.92rem; white-space:nowrap; opacity:1; text-decoration:none;
  display:inline-block; transition:background .15s ease}
.nav-cta:hover{opacity:1; background:var(--blue-bright)}

/* dropdown menu, homepage only - opened by the hamburger toggle */
.nav-links{position:absolute; top:calc(100% + 12px); right:0; min-width:220px;
  background:var(--navy); border:1px solid rgba(255,255,255,.12); border-radius:10px;
  box-shadow:0 18px 40px rgba(5,15,35,.35); padding:8px; display:flex; flex-direction:column;
  gap:2px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s}
.nav-links.open{opacity:1; visibility:visible; transform:none}
.nav-links a{color:#fff; font-size:.94rem; font-weight:600; opacity:.9; padding:10px 14px;
  border-radius:6px; text-decoration:none; transition:opacity .15s, background .15s}
.nav-links a:hover{opacity:1; background:rgba(255,255,255,.08)}

.lbl-short{display:none}

@media (max-width:780px){
  .nav img{height:28px}
  .nav-actions{gap:6px}
  .btn-nav-outline,.nav-cta{padding:8px 10px; font-size:.82rem}
  .menu-toggle{padding:6px}
  .lbl-full{display:none}
  .lbl-short{display:inline}
}
@media (max-width:420px){
  header .wrap{padding:0 14px}
  .nav-actions{gap:4px}
  .btn-nav-outline,.nav-cta{padding:7px 8px; font-size:.78rem}
}
@media (max-width:390px){
  header .wrap{padding:0 10px}
  .nav-actions{gap:3px}
  .nav img{height:24px}
  .btn-nav-outline,.nav-cta{padding:6px 6px; font-size:.74rem}
  .menu-toggle{padding:4px}
  .menu-toggle span{width:18px}
}
/* At the narrowest phone widths the logo plus three buttons plus the toggle
   stopped fitting: measured at 320px the row wanted 319px inside a 300px
   content box, so the header overflowed the viewport by 9px on the homepage
   and 2px on services and pricing. Shrink the logo and tighten the buttons
   so every nav page fits at 320px with a few pixels spare. Verified by
   sweeping 320px to 1400px in 20px steps, see TEST_LOG.md. */
@media (max-width:360px){
  .nav img{height:20px}
  .btn-nav-outline,.nav-cta{padding:5px 5px; font-size:.7rem}
  .menu-toggle{padding:4px 2px}
  .menu-toggle span{width:16px}
}
/* The former .nav-4 rules (a 4-button header with no hamburger, used on the
   privacy, thank-you and 404 pages) have been removed. Those pages now carry
   a single "Return to site" button instead, so every remaining page with a
   full nav uses the same 3-button-plus-hamburger layout as the homepage, and
   therefore the same empirically tested breakpoints above. */