/* ==========================================================================
   Site Navigation (Desktop + Shared)
   Naming convention:
   - Preferred BEM classes: .site-nav, .site-nav__menu, .site-nav__item, .site-nav__link,
     .site-nav__submenu, .site-nav__toggle, .site-nav__bar
   - Back-compat aliases included: .nav, .menu, .submenu, .nav-toggle, .bar
   State classes:
   - header.is-nav-open (alias: header.open)
   - body.is-nav-open   (alias: body.nav-open)
   ========================================================================== */

/* ------------------------------
   Layout: container + menu row
   ------------------------------ */

.site-nav__menu,
.menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-nav__item,
.menu > li {
  list-style: none;
  position: relative; /* Required for absolutely-positioned submenu */
}

/* ------------------------------
   Interactives: links + buttons
   ------------------------------ */

.site-nav__link,
.site-nav__button,
.menu a,
.menu button {
  font-size: 16px;
  font-weight: 600;

  border: 0;
  background: none;

  padding: 10px 12px;
  border-radius: 10px;

  cursor: pointer;
  color: var(--teal);
}

.site-nav__link:hover,
.site-nav__button:hover,
.menu a:hover,
.menu button:hover {
  background: rgba(27, 121, 165, 0.10);
}

/* ------------------------------
   Dropdown submenu (desktop)
   ------------------------------ */

.site-nav__submenu,
.submenu {
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 220px;
  padding: 8px;
  margin-top: 0;

  background: #ffffff;
  border: 1px solid rgba(11, 42, 63, 0.08);
  border-radius: 12px;
  box-shadow: var(--shadow);

  display: none;
  z-index: 1000;
}

.site-nav__submenu a,
.submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;

  color: var(--ink);
  font-weight: 600;
}

.site-nav__submenu a:hover,
.submenu a:hover {
  background: #f4f9fc;
}

/* Hover-to-open (desktop) */
.site-nav__item:hover > .site-nav__submenu,
.menu > li:hover > .submenu {
  display: block;
}

/* Explicit open state (JS-controlled) */
.site-nav__item.is-open > .site-nav__submenu,
.menu > li.open > .submenu {
  display: block;
}

/* ------------------------------
   Mobile toggle button (shared)
   - Visibility is enabled in nav-mobile.css
   ------------------------------ */

.site-nav__toggle,
.nav-toggle {
  display: none; /* turned on at mobile breakpoint */
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 10px;
  border: 1px solid rgba(11, 42, 63, 0.12);

  background: #ffffff;
  cursor: pointer;

  flex-direction: column;
  gap: 5px;

  position: relative;
  z-index: 1001; /* keep above overlay so it can close */
}

.site-nav__bar,
.nav-toggle .bar {
  width: 22px;
  height: 2.5px;
  background: var(--teal);
  border-radius: 2px;
}

/* Toggle "active" background */
header.is-nav-open .site-nav__toggle,
header.open .nav-toggle {
  background: rgba(27, 121, 165, 0.10);
}

/* Optional: morph hamburger into an “X” when open */
header.is-nav-open .site-nav__bar:nth-child(1),
header.open .nav-toggle .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  transform-origin: center;
  transition: transform 0.2s ease;
}

header.is-nav-open .site-nav__bar:nth-child(2),
header.open .nav-toggle .bar:nth-child(2) {
  opacity: 0;
  transition: opacity 0.2s ease;
}

header.is-nav-open .site-nav__bar:nth-child(3),
header.open .nav-toggle .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  transform-origin: center;
  transition: transform 0.2s ease;
}

/* Lock background scroll when nav is open */
body.is-nav-open,
body.nav-open {
  overflow: hidden;
}