/* Final shared interaction layer: legacy mobile rules also set !important colors. */
.site-header {
  --nav-text: #405064;
  --nav-accent: #1668f2;
}
@media (min-width: 721px) {
  .home-page .site-header:not(.is-scrolled):not(.mobile-menu-open) {
    --nav-text: #e9f0f8;
    --nav-accent: #63d9e2;
  }
}

html body .site-header.site-header .main-nav > :is(a, button),
html body .site-header.site-header .policy-nav > button {
  color: var(--nav-text) !important;
  transition: color .2s ease;
}
html body .site-header.site-header .main-nav > :is(a, button):is(:hover, :active, :focus-visible, .active, [aria-expanded="true"]),
html body .site-header.site-header .policy-nav > button:is(:hover, :active, :focus-visible, .active, [aria-expanded="true"]) {
  color: var(--nav-accent) !important;
}
html body .site-header.site-header .main-nav > :is(a, button):focus-visible,
html body .site-header.site-header .policy-nav > button:focus-visible {
  outline: 2px solid var(--nav-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
html body .site-header.site-header .services-toggle span,
html body .site-header.site-header .policies-toggle svg {
  color: var(--nav-accent) !important;
}

@media (min-width: 721px) {
  html body .site-header .main-nav > :is(a, button)::after,
  html body .site-header .policy-nav > button::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    background: var(--nav-accent);
    opacity: 0;
    transform: scaleX(.45);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
  }
  html body .site-header .main-nav > :is(a, button):is(:hover, :active, :focus-visible, .active, [aria-expanded="true"])::after,
  html body .site-header .policy-nav > button:is(:hover, :active, :focus-visible, .active, [aria-expanded="true"])::after {
    background: var(--nav-accent);
    opacity: 1;
    transform: scaleX(1);
  }
}

/* Dropdown panels stay light in both header themes. */
html body .site-header .main-nav .policies-menu > a:is(:hover, :active, :focus-visible, [aria-current]) {
  color: #1668f2 !important;
  background: #f0f5fa;
}
@media (prefers-reduced-motion: reduce) {
  html body .site-header.site-header .main-nav > :is(a, button),
  html body .site-header.site-header .policy-nav > button,
  html body .site-header .main-nav > :is(a, button)::after,
  html body .site-header .policy-nav > button::after {
    transition: none;
  }
}