/* ==========================================================================
   nav-unified.css — single source of truth for the Headhunt.AI site nav.
   Loaded LAST on every page (both v15 pages using styles.css and phase-3
   pages using styles-p3.css). Overrides both legacy rule sets so one
   canonical nav markup renders identically site-wide, desktop and mobile.
   Polish pass · 2026-08-25
   ========================================================================== */

.site-nav{position:sticky;top:0;z-index:120;background:var(--bg-card,#fff);
  border-bottom:1px solid var(--border,#e7e3da)}
.site-nav .nav-inner{max-width:var(--max-w,1180px);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:16px;height:64px}
.site-nav .logo{display:inline-flex;align-items:center;flex:0 0 auto}
.site-nav .logo img{height:30px;width:auto;display:block}

/* --- link row ------------------------------------------------------------ */
.site-nav .nav-links{display:flex;align-items:center;gap:4px;margin-left:6px;flex:0 1 auto}
.site-nav .nav-links>a{display:inline-block;padding:8px 10px;border-radius:8px;
  color:var(--fg-2,#4a463d);font-size:14.5px;font-weight:500;line-height:1;
  text-decoration:none;white-space:nowrap;background:none;border-bottom:none}
.site-nav .nav-links>a:hover{color:var(--fg,#1e1c17);background:var(--bg-muted,#f3f1ea)}
.site-nav .nav-links>a.active{color:var(--brand,#0e7a5f)}

/* --- right cluster --------------------------------------------------------- */
.site-nav .nav-spacer{flex:1 1 auto}
.site-nav .nav-signin{color:var(--fg-2,#4a463d);font-size:14.5px;font-weight:500;
  text-decoration:none;padding:8px 10px;border-radius:8px;white-space:nowrap}
.site-nav .nav-signin:hover{color:var(--fg,#1e1c17);background:var(--bg-muted,#f3f1ea)}
.site-nav .lang-toggle{font-size:13px;color:var(--fg-3,#8a857a);white-space:nowrap;display:inline-flex;gap:4px;align-items:center}
.site-nav .lang-toggle a{color:var(--fg-3,#8a857a);text-decoration:none;padding:4px 2px}
.site-nav .lang-toggle a.active{color:var(--fg,#1e1c17);font-weight:600}
.site-nav .lang-toggle a:hover{color:var(--fg,#1e1c17)}
.site-nav .nav-cta.btn{white-space:nowrap}

/* legacy elements that may linger in cached copies */
.site-nav .nav-segment-group{display:contents}

/* --- mobile trigger -------------------------------------------------------- */
.site-nav .mobile-menu-btn{display:none;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--border,#e7e3da);border-radius:10px;
  background:var(--bg-card,#fff);color:var(--fg,#1e1c17);cursor:pointer;font-size:16px;line-height:0}

/* mobile-only sign-in row inside the panel */
.site-nav .nav-signin-m{display:none}

/* ==========================================================================
   Mobile ≤860px — panel drops below the bar. Breakpoint matches nav.js
   (min-width:861px auto-close).
   ========================================================================== */
@media (max-width:860px){
  .site-nav .nav-links{display:none}
  .site-nav .nav-links.open{display:flex;flex-direction:column;align-items:stretch;
    position:absolute;top:100%;left:0;right:0;margin:0;padding:6px 20px 16px;gap:0;
    background:var(--bg-card,#fff);border-bottom:1px solid var(--border,#e7e3da);
    box-shadow:0 16px 40px rgba(30,28,23,.10);z-index:119}
  .site-nav .nav-links.open>a{display:block;width:100%;padding:13px 2px;border-radius:0;
    border-bottom:1px solid var(--border,#eeece5);font-size:15.5px;white-space:normal}
  .site-nav .nav-links.open>a:last-of-type{border-bottom:none}
  .site-nav .nav-links.open>a:hover{background:none}
  .site-nav .nav-links.open>a:active{background:var(--bg-muted,#f3f1ea)}
  .site-nav .nav-signin-m{display:block;font-weight:600;color:var(--fg,#1e1c17)!important}
  .site-nav .nav-signin{display:none}
  .site-nav .mobile-menu-btn{display:inline-flex}
  .site-nav .nav-inner{gap:10px;height:58px;padding:0 18px}
  body.nav-open{overflow:hidden}
}
/* ==========================================================================
   ≤480px — compact row (fix F-P4a, polish s4). The 58px row overflowed at
   ≤~450px viewports on every page (logo at 30px is 182px wide; row summed
   ~449px): horizontal scroll on standard phones. CSS-only; markup untouched.
   ========================================================================== */
@media (max-width:480px){
  .site-nav .nav-inner{gap:8px;height:54px;padding:0 14px}
  .site-nav .logo img{height:22px}
  .site-nav .lang-toggle{font-size:12px}
  .site-nav .lang-toggle a{padding:4px 1px}
  .site-nav .nav-cta.btn{font-size:13px;padding:9px 12px}
}
@media (max-width:374px){
  .site-nav .nav-inner{gap:6px;padding:0 12px}
  .site-nav .logo img{height:20px}
  .site-nav .nav-cta.btn{padding:8px 10px;font-size:12.5px}
}
@media (min-width:861px){
  .site-nav .nav-links{display:flex!important}
  .site-nav .mobile-menu-btn{display:none!important}
  .site-nav .nav-signin-m{display:none!important}
}
@media print{.site-nav{display:none}}

/* ---- Handbook dark-variant support (body.handbook-summary-page) ---------
   The Handbook page repaints the nav dark via inline styles; cover the two
   elements this stylesheet introduced so they stay legible there. */
body.handbook-summary-page .site-nav .nav-signin{color:var(--t-2,#cfcabd)}
body.handbook-summary-page .site-nav .nav-signin:hover{color:var(--t-bright,#fff);background:rgba(255,255,255,.06)}
body.handbook-summary-page .site-nav .nav-links.open{background:rgba(12,13,16,.985);border-bottom-color:rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(0,0,0,.5)}
body.handbook-summary-page .site-nav .nav-links.open>a{border-bottom-color:rgba(255,255,255,.10)}
body.handbook-summary-page .site-nav .nav-signin-m{color:var(--t-bright,#fff)!important}
body.handbook-summary-page .site-nav .mobile-menu-btn{background:transparent}