/* Component layer reserved for canonical generated buttons, cards, tags, dropdowns, and CTAs. */

/* Canonical mobile navigation override: replace the mobile CTA with a hamburger menu. */
.nav-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0,0,102,.14);
  border-radius: 10px;
  background: var(--cs-white, #fff);
  color: var(--navy, #000066);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.nav-menu-toggle:hover,
.nav-menu-toggle:focus-visible {
  border-color: rgba(0,0,102,.32);
  background: var(--light, #f0f4fa);
  box-shadow: 0 4px 14px rgba(0,0,102,.08);
  outline: none;
}

.nav-menu-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s, opacity .2s;
}

nav.nav-open .nav-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.nav-open .nav-menu-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  nav .nav-cta { display: none !important; }
  nav .nav-menu-toggle { display: inline-flex; }
  nav .nav-links {
    display: none !important;
    position: absolute;
    top: calc(100% + 10px);
    left: 5%;
    right: 5%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    margin: 0;
    background: var(--cs-white, #fff);
    border: 1px solid rgba(0,0,102,.10);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0,0,102,.16);
    z-index: 250;
  }

  nav.nav-open .nav-links { display: flex !important; }
  nav .nav-links > li { width: 100%; }

  nav .nav-links a,
  nav .nav-dropdown-toggle {
    width: 100%;
    min-height: 44px;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 10px;
  }

  nav .nav-dropdown-toggle {
    padding: 12px 14px !important;
  }

  nav .nav-links a:hover,
  nav .nav-dropdown-toggle:hover { background: var(--light, #f0f4fa); }

  nav .nav-dropdown { position: static; }

  nav .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    min-width: 0;
    width: 100%;
    margin: 2px 0 8px;
    padding: 6px;
    border: 0;
    box-shadow: none;
    background: var(--light, #f0f4fa);
  }

  nav .nav-dropdown.open .nav-dropdown-menu { display: block !important; }
}