/* ============================================================
   MVSD Core — Navigation
   Selectors match Drupal's actual rendered markup:
     nav.site-nav > div > nav > ul > li
   Parent-only items use <span> (route:<nolink>), not <a>.
   No .menu class on ul; no .menu-item--expanded on li.
   ============================================================ */

/* ── Primary Nav container ────────────────────────────────── */
.site-nav {
  display: flex;
  justify-content: flex-start;
  height: 100%;
}

/*
 * Drupal block wrapper chain: site-nav > div > nav > ul
 * Each intermediate element must be flex + full height so the
 * top-level <ul> can stretch horizontally.
 *
 * flex: 0 0 auto — size to content, not equal split.
 * When multiple blocks share primary_menu (school menu + district menu),
 * this lets both <ul> lists flow side-by-side as one continuous nav bar
 * rather than each claiming 50% of the available width.
 */
.site-nav > div,
.site-nav > div > nav {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-width: 0;
  flex: 0 0 auto;
}

/* Top-level list */
.site-nav nav > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  height: 100%;
}

/* Every top-level <li> */
.site-nav nav > ul > li {
  position: relative;
  display: flex;
  align-items: stretch;
}

/*
 * Top-level links (<a>) and non-link parent labels (<span>).
 * Both get identical visual treatment.
 */
.site-nav nav > ul > li > a,
.site-nav nav > ul > li > a:visited,
.site-nav nav > ul > li > span {
  display: flex;
  align-items: center;
  padding-inline: var(--space-4);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.site-nav nav > ul > li > span {
  cursor: default;
}

.site-nav nav > ul > li > a:hover,
.site-nav nav > ul > li > span:hover,
.site-nav .is-active > a,
.site-nav .active-trail > a {
  color: var(--color-on-primary);
  background: rgba(255,255,255,0.12);
  border-bottom-color: var(--color-accent);
}

/* Keyboard focus ring — drawn OUTSIDE the item so it's clearly visible
 * against the dark nav bar. Kept separate from hover so nothing suppresses it. */
.site-nav nav > ul > li > a:focus-visible,
.site-nav nav > ul > li > span[tabindex]:focus-visible {
  color: var(--color-on-primary);
  background: rgba(255,255,255,0.12);
  border-bottom-color: var(--color-accent);
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dropdown indicator on items that have a child <ul> */
.site-nav nav > ul > li:has(> ul) > a::after,
.site-nav nav > ul > li:has(> ul) > span::after {
  content: ' ▾';
  font-size: 0.65em;
  opacity: 0.75;
  margin-left: var(--space-1);
}

/* ── Dropdown menus ───────────────────────────────────────── */
.site-nav li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-primary-dark);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  height: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility 0s var(--transition-fast);
  z-index: 50;
}

/* Show on hover, keyboard focus-within, or JS click-toggle (.is-open) */
.site-nav li.is-open > ul,
.site-nav li:hover > ul,
.site-nav li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility 0s 0s;
}

/* Dropdown list items */
.site-nav li > ul > li {
  display: flex;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-nav li > ul > li:last-child {
  border-bottom: none;
}

/* Dropdown links and interactive span labels */
.site-nav li > ul a,
.site-nav li > ul li > span {
  width: 100%;
  padding: var(--space-3) var(--space-5);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-left: 3px solid transparent;
  white-space: nowrap;
  display: flex;
  align-items: center;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

/* Span labels that have a child sub-menu — show fly-out indicator */
.site-nav li > ul li:has(> ul) > span::after,
.site-nav li > ul li:has(> ul) > a::after {
  content: ' ›';
  margin-left: auto;
  padding-left: var(--space-3);
  opacity: 0.6;
}

.site-nav li > ul a:hover,
.site-nav li > ul li:has(> ul):hover > span {
  border-left-color: var(--color-accent);
  background: rgba(255,255,255,0.08);
  color: var(--color-on-primary);
}

.site-nav li > ul a:focus-visible {
  border-left-color: var(--color-accent);
  background: rgba(255,255,255,0.08);
  color: var(--color-on-primary);
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: -3px;
}

/* Span cursor — pointer when it has a child sub-menu, default otherwise */
.site-nav li > ul li > span {
  cursor: default;
}
.site-nav li > ul li:has(> ul) > span {
  cursor: pointer;
}

/*
 * Nested sub-menus fly OUT TO THE RIGHT.
 * Override top:100%/left:0 with top:0/left:100%.
 */
.site-nav li > ul li > ul {
  top: -3px; /* align with border-top of parent dropdown */
  left: 100%;
}

/* ── Mobile nav toggle ────────────────────────────────────── */
.mobile-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: none;
  border: 2px solid rgba(255,255,255,0.5);
  color: var(--color-on-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast);
}
.mobile-nav-toggle:hover {
  border-color: var(--color-on-primary);
}
.mobile-nav-toggle:focus-visible {
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: 2px;
}

/* ── Mobile styles ────────────────────────────────────────── */
@media (max-width: 900px) {
  .mobile-nav-toggle {
    display: flex;
  }

  /* Desktop site-nav hidden on mobile — nav lives in #mobile-menu */
  .site-nav {
    display: none;
  }
}

/* ── Mobile nav accordion (inside #mobile-menu) ───────────── */
/*
 * Same rendered structure as desktop: div > nav > ul.
 * Items with children have <span> instead of <a>.
 * JS injects .mobile-sub-toggle buttons next to parent spans/links.
 */
.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Top-level items */
.mobile-nav div > nav > ul > li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-nav li {
  position: relative;
}

/* Links and parent spans */
.mobile-nav a,
.mobile-nav a:visited {
  display: block;
  padding: var(--space-4) var(--space-5);
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* Top-level <span> labels — match both shapes:
   - Leaf parents (no submenu, span is direct child of <li>)
   - Wrapped parents (JS moved span inside .mobile-nav-row when it has a sub) */
.mobile-nav li > span,
.mobile-nav > div > nav > ul > li > .mobile-nav-row > span,
.mobile-nav > div > nav > ul > li > .mobile-nav-row > a {
  display: block;
  padding: var(--space-4) var(--space-5);
  color: rgba(255,255,255,0.9);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.mobile-nav li > span,
.mobile-nav > div > nav > ul > li > .mobile-nav-row > span {
  cursor: default;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible,
.mobile-nav .is-active > a {
  color: var(--color-on-primary);
  background: rgba(255,255,255,0.1);
}

.mobile-nav a:focus-visible {
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: -3px;
}

/* JS-injected row wrapper (parent items only). Flex layout pins the toggle
   button beside its label without absolute positioning, so the button can
   never overlap deeper-tier rows. */
.mobile-nav-row {
  display: flex;
  align-items: stretch;
}
.mobile-nav-row > a,
.mobile-nav-row > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* Sub-menu toggle button (flex child of .mobile-nav-row) */
.mobile-sub-toggle {
  flex: 0 0 3rem;
  width: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-left: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 0.7rem;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.mobile-sub-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: var(--color-on-primary);
}
.mobile-sub-toggle:focus-visible {
  outline: 3px solid var(--color-focus-ring-on-dark);
  outline-offset: -3px;
}
.mobile-sub-toggle[aria-expanded="true"] {
  color: var(--color-accent);
}

/* Sub-menus: collapsed by default; expanded when the parent <li> is .is-open. */
.mobile-nav li > ul {
  display: none;
  background: rgba(0,0,0,0.18);
}
.mobile-nav li.is-open > ul {
  display: block;
}

/* Sub-menu items — keep them readable as nav targets at every depth.
   Depth 2+ <span> parents previously rendered as muted uppercase section
   labels, which read as "this is decorative" — but in this nav they're
   functional parents that expand to deeper tiers. Treat them like links. */
.mobile-nav li > ul a,
.mobile-nav li > ul li > span,
.mobile-nav li > ul .mobile-nav-row > a,
.mobile-nav li > ul .mobile-nav-row > span {
  padding: var(--space-3) var(--space-5) var(--space-3) var(--space-8);
  color: rgba(255,255,255,0.9);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: none;
  letter-spacing: var(--ls-normal);
}
.mobile-nav li > ul a {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-nav li > ul .mobile-nav-row {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-nav li > ul li:last-child > a,
.mobile-nav li > ul li:last-child > .mobile-nav-row {
  border-bottom: none;
}
.mobile-nav li > ul li > span,
.mobile-nav li > ul .mobile-nav-row > span {
  cursor: default;
}

/* Depth-3 indent (children of depth-2 parents) */
.mobile-nav li > ul li > ul a,
.mobile-nav li > ul li > ul li > span,
.mobile-nav li > ul li > ul .mobile-nav-row > a,
.mobile-nav li > ul li > ul .mobile-nav-row > span {
  padding-left: calc(var(--space-8) + var(--space-5));
}
/* Stacked dim background hints at depth — depth-3 sits on a slightly darker
   bed than depth-2 without compounding rgba opacity from the parent. */
.mobile-nav li > ul li > ul {
  background: rgba(0,0,0,0.12);
}