/* ── SITE NAV CHROME ─────────────────────────────────────────────────
   The shared header: brand, links, dropdowns, mobile menu, CTA buttons.
   site.css @imports this, so every normal page picks it up as before.
   Standalone pages (the free-agent tools under /tools) link this file on
   its own — they carry their own app CSS and must not inherit the whole
   site stylesheet, but the nav has to stay identical everywhere.

   Tokens used: --navy --navy-d --line --evergreen --grey --tint --bg.
   Both site.css and the tool pages define all of them.
   ──────────────────────────────────────────────────────────────────── */

  header.nav{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
  .brand img{height:30px}
  .links{display:flex;gap:20px;height:68px;align-items:center}
  .links a{font-size:.9rem;font-weight:700;color:var(--navy);white-space:nowrap}
  .links a:hover{color:var(--evergreen)}
  .nav-item{position:relative;align-self:stretch;display:flex;align-items:center}
  .nav-trigger{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  .caret{font-size:.6rem;opacity:.75;transition:transform .15s}
  .nav-item:hover .caret,.nav-item:focus-within .caret{transform:rotate(180deg)}
  .dropdown{position:absolute;top:100%;left:-8px;min-width:316px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 48px rgba(20,55,125,.16);padding:10px;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .15s,transform .15s;z-index:60}
  .nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
  .dropdown-right{left:auto;right:-8px;min-width:268px}
  .dropdown a{display:flex;flex-direction:column;padding:9px 12px;border-radius:8px}
  .dropdown a:hover{background:var(--bg)}
  .dropdown .dt{font-size:.92rem;font-weight:700;color:var(--navy)}
  .dropdown a:hover .dt{color:var(--evergreen)}
  .dropdown .dd{font-size:.8rem;font-weight:400;color:var(--grey);margin-top:2px}
  .dropdown .tag{display:inline-block;background:var(--tint);color:var(--evergreen);font-size:.6rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:10px;margin-left:7px;vertical-align:middle}
  .mobile .sub{padding-left:46px;font-size:.85rem;font-weight:400;color:var(--grey)}
  .nav-cta{display:flex;align-items:center;gap:16px;flex:none}
  .nav-cta .btn{padding:9px 15px;font-size:.86rem;border-radius:7px}
  /* Literal hairline/hover values, not var(--soft)/var(--bg): the tool pages
     scope those tokens differently, and the nav CTA must not drift with them. */
  .nav-cta .btn-ghost-navy{background:transparent;color:var(--navy);border-color:#B8CCE4}
  .nav-cta .btn-ghost-navy:hover{border-color:var(--navy);background:#F4F7FA}
  .hamburger{display:none;align-items:center;justify-content:center;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:0}
  .hamburger svg{display:block}
  .mobile{display:none;border-bottom:1px solid var(--line);background:#fff}
  .mobile a,.mobile .label{display:block;padding:13px 28px;font-weight:700;color:var(--navy);border-top:1px solid var(--line)}

  @media(max-width:1200px){
    .links,.nav-cta{display:none}
    .hamburger{display:flex}
  }