/* nav-toggle.css
   Add this AFTER your page's existing <style> block (or as a
   linked stylesheet) on every page that uses header.js.
   It only adds mobile-menu-open behavior and an active-link
   style; it does not touch the existing desktop hover dropdowns. */

@media (max-width: 860px) {
  nav.primary.nav-open ul,
  nav.primary.nav-open .cta-group {
    display: flex;
  }
  nav.primary.nav-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 24px 20px;
    box-shadow: 0 10px 30px rgba(44,47,74,.18);
  }
  nav.primary.nav-open ul {
    flex-direction: column;
    gap: 4px;
  }
  nav.primary.nav-open li.has-dropdown .dropdown {
    display: block;
    position: static;
    box-shadow: none;
    padding-left: 12px;
  }
  nav.primary.nav-open .cta-group {
    flex-direction: column;
    margin-top: 12px;
  }
  header.site .nav-row {
    position: relative;
  }
}

.navlink-active {
  color: var(--orange, #E89228) !important;
}