/* ==========================================================================
   Masthead nav — active-page marker + the Programs dropdown.
   Kept in its own file so every page shares one behaviour, and so the shared
   styles.css (owned elsewhere) is not modified.
   ========================================================================== */

/* --- active page ----------------------------------------------------------
   styles.css already gives .nav a a transparent 2px bottom border and turns it
   to currentColor on hover. The current page just holds that state, and picks
   up the brand green once the masthead is in its solid register. */
.mast .nav a[aria-current="page"] {
  border-bottom-color: currentColor;
  font-variation-settings: "wdth" 100, "wght" 700;
}
.mast.is-solid .nav a[aria-current="page"] {
  color: var(--green-ink);
  border-bottom-color: var(--green);
}
/* the Support us button, when it is the current page */
.mast .btn--onDark[aria-current="page"] { background: #fff; color: var(--ink); border-color: #fff; }
.mast.is-solid .btn--onDark[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* --- the dropdown ---------------------------------------------------------- */
.navitem { position: relative; display: flex; align-items: center; }
.navitem > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: .45em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .6;
  transition: transform .18s ease, opacity .18s ease;
}
.navitem:hover > a::after, .navitem:focus-within > a::after { transform: translateY(0) rotate(45deg); opacity: 1; }

.subnav {
  position: absolute; top: 100%; left: -16px; z-index: 70;
  min-width: 272px; margin: 0; padding: .45rem 0; list-style: none;
  background: var(--card); border-radius: 4px;
  box-shadow: 0 20px 44px -20px rgba(10,20,15,.42), 0 1px 3px rgba(10,20,15,.10);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* a transparent bridge so the pointer can travel from the label to the panel */
.subnav::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.navitem:hover .subnav,
.navitem:focus-within .subnav { opacity: 1; visibility: visible; transform: translateY(0); }

.subnav a {
  display: block; padding: .62rem 1.15rem; white-space: nowrap;
  font-family: var(--ui); font-variation-settings: "wdth" 100, "wght" 600;
  font-size: .84rem; letter-spacing: .01em; color: var(--ink);
  border-bottom: 0; text-decoration: none;
}
.subnav a:hover, .subnav a:focus-visible { background: rgba(7,118,65,.07); color: var(--green-ink); }
.subnav a[aria-current="page"] { color: var(--green-ink); box-shadow: inset 3px 0 0 var(--green); }

@media (max-width: 1080px) { .navitem { display: none; } }