/* ===============================
   Design Tokens & Core Variables
   =============================== */
:root {
  /* Core palette */
  --primary-green: #0b3d2e;
  --primary-black: #1a1a1a;
  --primary-white: #ffffff;

  /* Accents & Neutrals */
  --green-500: #0f5b44;
  --green-400: #147259;
  --green-300: #1a8a6d;

  /* ====================================================================
   Program page overrides (moved from inline template to global CSS)
   These rules are intentionally scoped to present a compact, modern
   program page layout but can be reused across program-type pages.
   Keep values consistent with design tokens defined earlier.
   ==================================================================== */

  /* Make the injected navbar fixed at the top so it's always visible */
  .navbar {
    position: fixed;
    inset: 0 0 auto 0; /* top/left/right set; bottom auto */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--primary-white);
  }

  /* Ensure main content is pushed down by the navbar height (set via JS) */
  main {
    padding-top: var(--top-nav-offset, 72px);
  }

  /* Overview: paragraph with optional image beside it (left or right) */
  .overview-row {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    margin-top: 1rem;
  }
  .overview-text {
    flex: 1 1 60%;
  }
  .overview-image {
    flex: 0 0 320px;
  }
  .overview-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  /* Option to place the image on the right */
  .overview--image-right {
    flex-direction: row-reverse;
  }

  @media (max-width: 900px) {
    .overview-row {
      flex-direction: column;
    }
    .overview-image {
      flex-basis: auto;
      width: 100%;
    }
  }

  /* Slightly shorten the hero on program pages (10% reduction) */
  .hero .hero__content {
    padding-top: calc(var(--space-5, 24px) * 0.9);
    padding-bottom: calc(var(--space-4, 16px) * 0.9);
  }
  .hero .hero__logo {
    height: calc(240px * 0.9) !important; /* 216px */
    max-width: calc(40vw * 0.9) !important;
  }

  /* Reduce overall hero height when using the smaller 'hero--mini' variant */
  .hero.hero--mini {
    padding-top: 1.5rem; /* much smaller top gap than the default offset */
    padding-bottom: 1.25rem;
  }

  @media (min-width: 900px) {
    .hero.hero--mini .hero__content {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
    .hero.hero--mini .hero__logo {
      height: 160px !important;
      max-width: 28vw !important;
    }
  }

  /* Cards grid spacing override for program pages (consistent look) */
  .program-cards.grid {
    gap: var(--space-4);
  }

  --neutral-900: #0f1111;
  --neutral-800: #1a1a1a;
  --neutral-700: #2a2a2a;
  --neutral-500: #6b7280;
  --neutral-300: #d1d5db;
  --neutral-200: #e5e7eb;
  --neutral-100: #f3f4f6;

  --surface: var(--primary-white);
  --on-surface: var(--primary-black);
  --surface-alt: #f8faf9;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);

  --container: 1120px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  /* Height used to offset the fixed navbar so main content isn't hidden */
  --top-nav-offset: 104px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  color: var(--on-surface);
  background: var(--surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}

/* Make certain links look like typical, clickable hyperlinks */
.typical-link {
  color: #0066cc;
  text-decoration: underline;
}
.typical-link:hover,
.typical-link:focus {
  color: #004080;
}
/* Small text-style link used for inline resource links */
.text-link {
  color: var(--green-400);
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s;
}
.text-link:hover {
  color: var(--green-300);
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

h4 {
  color: var(--neutral-800);
}

p {
  margin: 0 0 var(--space-4);
}

/* ===============================
   Layout Helpers
   =============================== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* Get Involved section styles */
.get-involved-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

.gi-announcements h3,
.gi-keydates h3,
.gi-expect h3,
.gi-faq h3 {
  margin-top: 0;
}

.ann-list details {
  background: var(--surface-alt);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
}

.ann-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  font-weight: 700;
}

.ann-title {
  font-weight: 700;
}

.ann-meta {
  font-weight: 400;
  color: var(--neutral-500, #6b7280);
  font-size: 0.95rem;
}

.ann-body {
  margin-top: 0.6rem;
  color: var(--on-surface);
}

/* Limit announcements to first 3 by default, allow reveal via .show-all */
.ann-list details:nth-of-type(n + 4) {
  display: none;
}
.ann-list.show-all details {
  display: block;
}

.ann-controls {
  margin-top: 0.6rem;
}
.ann-controls .btn {
  background: transparent;
  color: var(--primary-green);
  border: 1px solid rgba(11, 61, 46, 0.12);
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
}
.ann-controls .btn:hover,
.ann-controls .btn:focus {
  background: var(--primary-green);
  color: var(--primary-white);
  outline: none;
}

/* Mobile: avoid squeezed announcement headings/meta by stacking them */
@media (max-width: 900px) {
  .ann-list summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.6rem 0.4rem;
  }

  .ann-list summary .ann-title {
    font-size: 1rem;
    font-weight: 700;
  }

  .ann-list summary .ann-meta {
    font-size: 0.9rem;
    color: var(--neutral-500);
  }

  .ann-list details {
    padding: 0.5rem 0.6rem;
  }

  .ann-controls .btn {
    width: 100%;
    display: block;
    text-align: center;
    box-sizing: border-box;
  }

  .gi-announcements {
    margin-bottom: 0.5rem;
  }
}

.gi-keydates ul {
  padding-left: 1rem;
  margin: 0;
}

.gi-side .btn {
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .get-involved-grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   Navigation
   =============================== */
.navbar {
  background: var(--primary-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem; /* increased vertical spacing */
  padding-bottom: 1.25rem; /* increased vertical spacing */
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--primary-black);
  font-weight: 700;
  font-size: 1.3rem;
}

/* Desktop-first navbar overrides inspired by ayso.org
   - grid layout (brand / centered menu / actions)
   - centered, wrapping menu items with hover underline
   - explicit desktop vs mobile CTA handling
*/
@media (min-width: 901px) {
  .navbar .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  /* Center the main menu in the middle column */
  .navbar-menu {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap; /* allow neat wrapping into centered rows */
    margin: 0;
    padding: 0;
    list-style: none;
    justify-self: center;
  }

  .navbar-menu li {
    margin: 0;
  }

  .navbar-menu a {
    color: #313131;
    padding: 0.55rem 0.9rem;
    white-space: nowrap;
    display: inline-block;
    position: relative;
    font-weight: 600;
    transition: color 0.18s ease;
  }

  .navbar-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 2px;
    background: #3b3b3b;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }

  .navbar-menu a:hover::after,
  .navbar-menu a:focus::after {
    transform: scaleX(1);
  }

  /* Right-side actions (CTA, utils) */
  .navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-self: end;
  }

  .nav-cta {
    background: #5a5a5a;
    color: #fff;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
  }

  /* keep the mobile CTA hidden on desktop */
  .nav-cta-mobile {
    display: none !important;
  }
}

/* Mobile behavior: show mobile CTA inside the collapsed menu and hide desktop action */
@media (max-width: 900px) {
  .navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .navbar-actions {
    display: none;
  }

  .nav-cta {
    display: none !important;
  }

  .nav-cta-mobile {
    display: inline-block !important;
  }

  /* slightly tighter mobile menu spacing */
  .navbar-menu {
    gap: 0.25rem;
    justify-content: flex-start;
  }
}

.navbar-brand img {
  height: 44px;
  width: auto;
}

.navbar-toggle {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  gap: 0.25rem;
}

.navbar-toggle span {
  width: 20px;
  height: 2px;
  background: var(--primary-black);
  transition: 0.3s;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2.5rem; /* more breathing room between items */
}

.navbar-menu a {
  text-decoration: none;
  color: var(--primary-black);
  padding: 0.5rem;
  transition: color 0.2s;
}

/* Larger touch targets and visible focus for accessibility */
.navbar-menu a,
.dropdown-toggle {
  padding: 1.1rem 1.5rem; /* larger touch targets and horizontal padding */
}

/* Site preview alert box styling */
.site-preview-alert {
  background: #fff3cd; /* light yellow */
  color: #856404; /* dark yellow/brown text */
  border: 1px solid #ffeeba;
  padding: 12px 16px;
  border-radius: 6px;
  text-align: center;
  margin: 12px 0;
}

.navbar-menu a:focus,
.dropdown-toggle:focus,
.navbar-toggle:focus {
  outline: 3px solid rgba(16, 185, 129, 0.25);
  outline-offset: 2px;
  border-radius: 6px;
}

.navbar-menu a:hover {
  color: var(--primary-green);
}

/* Desktop layout improvements: center nav and avoid hanging wraps */
@media (min-width: 901px) {
  .navbar .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
  }

  .navbar-brand {
    grid-column: 1;
    justify-self: start;
  }

  .navbar-menu {
    grid-column: 2;
    justify-self: center;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap; /* allow neat wrapping into centered rows */
    max-width: 80%;
    justify-content: center; /* center items */
  }

  .navbar-menu li {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto; /* prevent items from stretching */
  }

  .navbar-menu a {
    padding: 0.45rem 0.6rem;
    font-weight: 600;
    color: var(--neutral-800);
    white-space: nowrap; /* prevent internal wrapping of menu items */
  }

  /* Reduce chance of single-word hanging by slightly increasing gap */
  .navbar-menu {
    column-gap: 1rem;
  }

  /* Make the final menu item stand out as a subtle CTA */
  /* Subtle CTA for contact link: outlined pill that matches nav tone */
  /* Mobile menu CTA variant (kept inside collapsed menu) */
  .navbar-menu a.nav-cta-mobile {
    background: transparent;
    color: var(--primary-green);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 2px solid rgba(15, 61, 46, 0.08);
    box-shadow: none;
    transition:
      background 180ms,
      color 180ms,
      border-color 180ms;
    display: inline-block;
  }

  .navbar-menu a.nav-cta-mobile:hover,
  .navbar-menu a.nav-cta-mobile:focus {
    background: var(--primary-green);
    color: var(--primary-white);
    border-color: var(--primary-green);
  }
}

/* Navbar actions (desktop CTAs) */
.navbar-actions {
  display: none;
}

@media (min-width: 901px) {
  .navbar-actions {
    display: flex;
    grid-column: 3;
    justify-self: end;
    align-items: center;
    gap: 0.75rem;
  }

  .navbar-actions .nav-cta {
    display: inline-block;
    background: var(--primary-green);
    color: var(--primary-white);
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: none;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(11, 61, 46, 0.12);
    transition:
      transform 120ms ease,
      box-shadow 120ms ease,
      background 120ms;
  }

  .navbar-actions .nav-cta:hover,
  .navbar-actions .nav-cta:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(11, 61, 46, 0.16);
    background: color-mix(in srgb, var(--primary-green) 90%, black 10%);
  }

  /* hide the mobile menu CTA when desktop CTA is visible */
  .navbar-menu a.nav-cta-mobile {
    display: none;
  }
}

/* Dropdown styles */
.dropdown {
  position: relative;
}

.dropdown-arrow {
  font-size: 0.7rem;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

@media (min-width: 901px) {
  .dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
  }
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--primary-white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  min-width: 180px;
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  z-index: 200;
}

/* Allow JS-driven open state to show menus regardless of hover state */
.dropdown.open > .dropdown-menu {
  display: block;
}

@media (min-width: 901px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}

.dropdown-menu a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--primary-black);
  text-decoration: none;
  transition: background-color 0.2s;
}

.dropdown-menu a:hover {
  background: var(--green-300);
  color: var(--primary-white);
}

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

  .navbar-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-white);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: 80vh; /* prevent overscroll */
    overflow: auto;
  }

  /* Force dropdowns to work on mobile regardless of JS detection */
  .dropdown.open .dropdown-menu {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .navbar-menu.open {
    display: flex;
  }

  /* Make the toggle visually indicate open state */
  .navbar-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .navbar-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .navbar-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .navbar-menu li {
    width: 100%;
  }

  .navbar-menu a {
    display: block;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--neutral-200);
  }

  .dropdown-toggle {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem !important;
    border-bottom: 1px solid var(--neutral-200);
  }

  .dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
    transition: none !important; /* Instant arrow rotation */
  }

  /* Remove all transitions from dropdown arrows on mobile */
  .dropdown-arrow {
    transition: none !important;
  }

  /* Optimize touch responsiveness */
  .dropdown-toggle {
    touch-action: manipulation; /* Faster touch response */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight delay */
  }

  /* Completely disable hover effects on mobile */
  /* Mobile dropdown menu styles - optimized for speed */
  .dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    background: var(--neutral-100);
    border-radius: 0;
    margin: 0;
    padding: 0;
    transition: none !important; /* Remove all transitions for instant response */
    animation: none !important; /* Remove all animations */
  }

  /* When dropdown is open, show the menu instantly */
  .dropdown.open .dropdown-menu {
    display: block !important;
  }

  /* Strong override: ensure dropdown menus are visible on mobile when .open is present */
  .navbar .navbar-menu .dropdown.open > .dropdown-menu {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    background: var(--neutral-100) !important;
  }

  /* Make sure toggles and menu are above potential overlays */
  .navbar .navbar-menu,
  .navbar .container {
    z-index: 9998;
  }

  .navbar .dropdown-toggle {
    z-index: 10000;
    pointer-events: auto;
  }

  /* Completely disable hover on mobile */
  .dropdown:hover .dropdown-menu {
    display: none !important;
  }

  .dropdown:hover .dropdown-arrow {
    transform: none !important;
  }

  .dropdown-menu a {
    padding: 0.75rem 2.5rem;
    background: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
  }

  .dropdown-menu a:hover {
    background: var(--green-300);
    color: var(--primary-white);
  }
}

/* ===============================
   Hero Section
   =============================== */
.hero {
  background: linear-gradient(
    135deg,
    var(--primary-black) 0%,
    var(--primary-black) 45%,
    var(--primary-green) 100%
  );
  color: var(--primary-white);
}
.hero__content {
  padding: 6px 0 6px;
  text-align: left;
}
.hero h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.hero p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 62ch;
  margin-bottom: var(--space-3);
}
.hero__logos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.hero__logo {
  height: auto;
  max-height: 240px;
  width: auto;
  max-width: 40vw;
  display: block;
  object-fit: contain;
  transition:
    max-height 0.2s,
    max-width 0.2s;
  flex: 0 0 auto;
}

@media (max-width: 1200px) {
  .hero__logo {
    max-height: 176px;
    max-width: 48vw;
  }
}

@media (max-width: 900px) {
  .hero__logo {
    max-height: 140px;
    min-height: 120px;
    max-width: 60vw;
    min-width: 140px;
  }
}

@media (max-width: 600px) {
  /* Mobile: stack logos and keep them reasonably large */
  .hero__logos {
    flex-direction: column;
    gap: 0.75rem;
  }
  .hero__logo {
    max-height: 180px;
    min-height: 140px;
    max-width: 260px;
    width: auto;
  }
}
.hero__text {
  text-align: center;
  color: var(--primary-white);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Responsive hero */
@media (max-width: 600px) {
  .hero__logos {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .hero__logo {
    height: 90px !important;
    max-width: 48vw !important;
  }
  .hero__text {
    text-align: center;
    padding: 0 1rem;
  }
  .hero h1 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
  }
  .hero p {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }
}

/* ===============================
   Section Layouts
   =============================== */
.section {
  padding: var(--space-7) 0;
  background: var(--surface);
}
.section--emphasis {
  background: var(--surface-alt);
}
.section__title {
  font-size: 1.6rem;
  margin-bottom: var(--space-5);
}

/* ===============================
   Grid & Cards
   =============================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.card {
  background: var(--primary-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card h3 {
  margin-bottom: var(--space-2);
}
.card p {
  color: var(--neutral-700);
}

/* Flat panels used for non-interactive content (no border, no shadow) */
.panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-5);
  box-shadow: none;
}
.panel h3 {
  margin-bottom: var(--space-2);
}
.panel p,
.panel ul {
  color: var(--neutral-700);
}

.must-print {
  color: #c62828; /* red */
  font-weight: 700;
}

/* ===============================
   Callout Row
   =============================== */
.callout {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
  background: var(--primary-green);
  color: var(--primary-white);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

/* ===============================
   Buttons
   =============================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid transparent;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.05s ease;
  will-change: transform;
}
.btn:active {
  transform: translateY(1px);
}
.btn--sm {
  padding: 8px 12px;
  font-size: 0.9rem;
}
.btn--primary {
  background: var(--primary-white);
  color: var(--primary-green);
  border: 2px solid var(--primary-green);
  box-shadow: none;
  padding: 2px 18px;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s,
    transform 0.15s;
}
.btn--primary:hover,
.btn--primary:focus {
  background: var(--primary-green);
  color: var(--primary-white);
  box-shadow: none;
  transform: none;
  outline: none;
}
.btn--outline {
  background: transparent;
  color: var(--primary-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
}
.btn--ghost {
  background: transparent;
  color: var(--primary-green);
  border-color: var(--neutral-300);
  border-width: 1px;
  border-style: solid;
}
.btn--ghost:hover {
  background: var(--neutral-100);
}
.btn--inverse {
  background: var(--primary-white);
  color: var(--primary-green);
  border-color: var(--primary-white);
}
.btn--inverse:hover {
  background: #f2fff9;
}

/* ===============================
   Footer
   =============================== */
.footer {
  border-top: 1px solid var(--neutral-200);
  background: var(--surface);
}
.footer__inner {
  padding-block: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--neutral-700);
}
.footer__nav {
  display: flex;
  gap: var(--space-4);
}
.footer__nav a {
  color: var(--neutral-700);
}
.footer__nav a:hover {
  color: var(--neutral-900);
}

/* ===============================
   Responsive Tweaks
   =============================== */

.hero__content {
  padding: var(--space-5) 0 var(--space-4);
  text-align: center;
}

.hero__actions {
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
.callout {
  flex-direction: column;
  align-items: stretch;
}
.board-card-grid {
  grid-template-columns: 1fr !important;
  gap: var(--space-4);
}
.board-card {
  min-width: 0;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #222;
  font: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding: 1.1em 0.5em;
  transition:
    background 0.15s,
    color 0.15s;
  font-size: 1.15em;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
.board-group {
  background: var(--surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.board-card {
  background: var(--primary-white);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4) var(--space-4) var(--space-3);
  margin-bottom: var(--space-3);
  min-width: 220px;
  flex: 1 1 220px;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.board-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px) scale(1.02);
}
.board-card.open {
  border-left: 6px solid #ff9d42;
}
.card-title {
  font-weight: 700;
  font-size: 1.08rem;
  margin-bottom: 2px;
  color: var(--primary-green);
}
.card-role {
  font-size: 0.98rem;
  color: var(--neutral-700);
  margin-bottom: 2px;
}

/* ===============================
   Modal Styles
   =============================== */
#member-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(26, 26, 26, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
#member-modal > div {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2rem 2.5rem;
  max-width: 400px;
  width: 90%;
}
#modal-name {
  margin-top: 0;
  color: var(--primary-green);
}
#modal-role {
  color: var(--neutral-700);
  font-weight: 500;
}
#modal-desc {
  color: var(--neutral-700);
}
#modal-email {
  margin-top: 1rem;
  display: inline-block;
}
#close-modal {
  margin-left: 1rem;
}

/* Mobile Menu - Instant Show/Hide */
.nav__menu {
  display: none; /* Instead of opacity/transform */
}
.nav__menu.open {
  display: flex; /* Instant show */
}

/* ===============================
   Coaches page: mobile stacking & collapsible panels
   =============================== */

/* Keep default grid behavior on larger screens */
.info-pair {
  display: grid;
}

/* Replace the two-column grid with a vertical stack on mobile
   and reverse the order so 'Coach Conduct' (second column) appears
   above 'Supplies' when viewport is 900px or less. */
@media (max-width: 900px) {
  .info-pair {
    display: flex;
    flex-direction: column-reverse;
    gap: 1.25rem;
  }

  /* Style details/summary for a clean collapsible appearance */
  .mobile-collapsible {
    background: transparent;
    border: none; /* remove border entirely on mobile per request */
    border-radius: 0;
    padding: 0;
  }

  .mobile-collapsible summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between; /* arrow to the right */
    gap: 0.75rem;
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
  }

  .mobile-collapsible summary h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
  }

  /* Hide native marker for consistent cross-browser look */
  .mobile-collapsible summary::-webkit-details-marker {
    display: none;
  }
  .mobile-collapsible summary::marker {
    display: none;
  }

  .mobile-collapsible .details-body {
    margin-top: 0.6rem;
    color: var(--neutral-700);
    padding: 0 0 0.6rem 0;
  }

  /* Arrow placed on the summary itself for consistent alignment */
  .mobile-collapsible summary::after {
    content: "▾";
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.95rem;
    color: var(--neutral-500);
    transition: transform 0.15s ease;
  }
  .mobile-collapsible[open] summary::after {
    content: "▴";
    color: var(--neutral-700);
    transform: rotate(0deg);
  }

  /* Stack footer content on mobile */
  .footer__inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}

/* ===============================
   Contact / Rules Page Specifics
   =============================== */

/* Ensure the hero doesn't get hidden behind the fixed nav */
/* We add the nav height to the top padding */
.hero.hero--mini {
  padding-top: calc(var(--top-nav-offset, 104px) + 1.5rem);
}

.rules-container {
  max-width: 900px;
  margin: 1rem auto;
  padding: 1rem;
}

.meta {
  color: #444;
  font-size: 0.95rem;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.contact-list li {
  background: var(--surface-alt);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.contact-list li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-300);
}

.contact-role {
  font-weight: 700;
  color: var(--neutral-800);
  font-size: 1.1rem;
}

/* Transform the email links into modern buttons */
.contact-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-green);
  color: var(--primary-white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 500;
  margin-top: auto; /* Push to bottom if height varies */
  transition: background-color 0.2s;
  box-shadow: var(--shadow-sm);
}

.contact-list a:hover {
  background-color: var(--green-400);
  text-decoration: none;
}

/* Enhanced hero--mini styles for Contact page */
.hero--mini .hero__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero--mini .hero__text {
  display: block;
}

.hero--mini .hero__text h1 {
  font-size: 1.9rem;
  margin: 0;
}

.hero--mini .hero__logo {
  margin-right: 8px;
  width: 216px;
  height: auto;
}

@media (max-width: 900px) {
  .hero--mini .hero__content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero--mini .hero__text {
    margin-top: 0.5rem;
  }

  .hero--mini .hero__text h1 {
    font-size: 1.4rem;
  }
}

.hero-subtitle {
  margin: 0.25rem 0 0;
  color: #a1a1a1;
  font-size: 1.15rem;
}