header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.3s ease-out, background 0.3s ease-out;
}
header.site.scrolled { background: color-mix(in oklch, var(--bg) 96%, transparent); box-shadow: 0 1px 14px oklch(25% 0.05 252 / 0.07); }

/* Logged-in wp-admin bar is position:fixed above everything at the very
   top of the viewport — without this, our sticky header's `top: 0` sticks
   directly under it once you scroll, hiding behind it. Matches WP core's
   own #wpadminbar height/breakpoint exactly (32px desktop, 46px <=782px). */
body.admin-bar header.site { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar header.site { top: 46px; }
}
.site-inner { display: flex; align-items: center; gap: 1.5rem; padding-block: 0.7rem; transition: padding 0.3s ease-out; }
header.site.scrolled .site-inner { padding-block: 0.45rem; }
.brand-lockup { display: flex; align-items: center; gap: 0.7rem; }
.brand-lockup img { height: 58px; width: auto; }
.brand-lockup .brand-authority-badge { height: 30px; }
.brand-authority-badge { height: 30px; width: auto; padding-left: 0.7rem; border-left: 1px solid var(--border); opacity: 0.85; }

nav.primary { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; }
nav.primary > a, nav.primary .nav-item > a { font-family: var(--body); font-weight: 600; font-size: 0.95rem; color: var(--ink); text-decoration: none; position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
nav.primary > a::after, nav.primary .nav-item > a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: var(--accent); transition: width 0.15s ease-out; }
nav.primary > a:hover::after, nav.primary .nav-item > a:hover::after { width: 100%; }
nav.primary > a[aria-current="page"], nav.primary .nav-item > a[aria-current="page"] { color: var(--accent); }
nav.primary > a[aria-current="page"]::after, nav.primary .nav-item > a[aria-current="page"]::after { width: 100%; }
/* A dropdown open (has children) whose current page lives inside it —
   e.g. "Services" while on the Driver's License page — gets the same
   highlight as an exact match, even though its own link isn't the current
   page (see the is_current_parent comment in inc/nav-walkers.php). */
nav.primary .nav-item.is-current-parent > a { color: var(--accent); }
nav.primary .nav-item.is-current-parent > a::after { width: 100%; }
.nav-item { position: relative; }
.nav-sub { position: absolute; top: 100%; left: 0; padding-top: 12px; display: none; min-width: 16rem; z-index: 60; }
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { display: block; }
.nav-sub ul { list-style: none; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px oklch(25% 0.05 252 / 0.09); padding: 0.5rem; }
.nav-sub a { display: block; padding: 0.5rem 0.75rem; border-radius: 6px; font-weight: 600; font-size: 0.9rem; color: var(--ink); text-decoration: none; }
.nav-sub a:hover { background: color-mix(in oklch, var(--sky) 40%, var(--bg)); }
.nav-sub a[aria-current="page"] { color: var(--accent); background: color-mix(in oklch, var(--sky) 40%, var(--bg)); }

.nav-toggle {
  display: none; width: 42px; height: 42px; flex: 0 0 auto;
  background: transparent; border: 1.5px solid var(--border); border-radius: 8px;
  color: var(--ink); cursor: pointer; place-items: center;
}
nav.mobile { background: var(--bg); border-top: 1px solid var(--border); max-height: calc(100vh - 76px); overflow: auto; }
nav.mobile[hidden] { display: none; }
nav.mobile .wrap { padding-block: 0.5rem 1.25rem; display: flex; flex-direction: column; }
nav.mobile a { color: var(--ink); text-decoration: none; font-weight: 600; padding: 0.65rem 0; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, var(--bg)); }
nav.mobile a.sub { padding-left: 1.1rem; font-weight: 400; }
nav.mobile a[aria-current="page"] { color: var(--accent); }
nav.mobile a.is-current-parent, nav.mobile .group.is-current-parent { color: var(--accent); }
nav.mobile .group { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--asphalt); padding: 0.9rem 0 0.3rem; }
@media (min-width: 901px) { .nav-toggle, nav.mobile { display: none !important; } }

.head-phone { font-family: var(--mono); font-size: 0.85rem; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }

@media (max-width: 900px) {
  nav.primary { display: none; }
  .nav-toggle { display: grid; }
  .head-phone { margin-left: auto; }
}
@media (max-width: 560px) {
  .head-phone span.label { display: none; }
  .site-inner .btn { display: none; }
  .brand-authority-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  header.site, .site-inner { transition: none; }
}