/*
Theme Name: STARRCS
Theme URI: https://starrcs.org
Author: Kinya McDowell
Description: A fully custom WordPress theme designed and developed by Kinya McDowell for STARR Community Services International (STARR CSI) — a 501(c)(3) nonprofit organization delivering free STEAM education programs to youth ages 5–14. Features include a dynamic event management system with custom post types and ACF field groups, WPForms-integrated enrollment, newsletter, and contact forms with automated confirmation pages, a 12-slot media gallery, multi-page program showcase, donation and investment pages, responsive mobile navigation, a site-wide announcement bar, customizable footer with social links and contact info, and full ACF-powered content management across all pages. Built for accessibility, editorial simplicity, and community impact.
Version: 5.99
*/

/* @import rules must come before all other rules. */
@import url('css/pages.css');
@import url('css/inner-hero.css');

/* ====================================================
   1. BRAND COLORS & FONTS
   To change a color site-wide, just edit it here once!
   ==================================================== */
:root {
  --primary: #1B3C8F;     /* dark blue - headings, nav, buttons */
  --cta: #00C2B8;          /* teal - enroll & donate buttons */
  --accent: #7B2FBE;       /* purple - secondary accent */
  --white: #FFFFFF;
  --dark: #1A1F6B;         /* dark navy - events/donate/footer bg */
  --gold: #F5C518;         /* announcement bar */
  --light-tint: #EAF0FB;   /* light blue background */
  --gray: #5A6478;         /* body text gray */
  --muted: #9AA5B8;        /* muted gray labels */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--gray);
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--primary);
}

img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* ====================================================
   2. ANNOUNCEMENT BAR (Section 1)
   ==================================================== */
.announcement-bar {
  background: var(--gold);
  color: var(--dark);
  text-align: center;
  padding: 10px 50px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
}
.announcement-close {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* ====================================================
   3. HEADER (Section 2)
   ==================================================== */
.site-header {
  background: var(--white);
  padding: 16px 40px;
  position: relative;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.header-menu {
  font-size: 28px;
  color: var(--primary);
  cursor: pointer;
  display: none; /* hidden on desktop - the menu below is the real navigation */
  background: none;
  border: none;
  padding: 4px;
  line-height: 1;
}
/* Header logo size — change height here to resize.
   Width auto-scales to keep proportions correct.
   The !important on width/height overrides the inline
   width="" and height="" attributes WordPress adds when
   outputting the Custom Logo — so the size stays consistent
   regardless of what dimensions the uploaded file has. */
.header-logo img,
.header-logo .custom-logo {
  height: 64px !important;
  width: auto !important;
  max-width: none;
  display: block;
}

/* Footer logo — controlled via footer.php inline style.
   This rule ensures it also stays consistent if output
   changes in future.
   v5.89: bumped 40px -> 64px per the user's request ("the logo in the
   footer should be larger") - it was reading as an afterthought next to
   the surrounding footer text/columns.
   v5.90: bumped again, 64px -> 100px, per the user's follow-up ("make it
   at least 100 px tall... it's still tiny in comparison to the area") -
   still read as small against the full footer column height.
   v5.91: set back to 64px, per the user's request ("footer logo should
   be same size as navigation logo") - matches .header-logo img's height
   exactly, so the same logo reads at a consistent size in both places. */
.footer-col img.footer-logo-img,
.footer-col img {
  height: 64px !important;
  width: auto !important;
}

/* The actual navigation menu (Appearance > Menus > Primary Menu) */
.header-left,
.header-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  margin-left: 48px;
}
/* ── Top-level nav links ── */
.site-header ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}
.site-header ul a {
  color: var(--primary);
  font-weight: 700;
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
}
.site-header ul a:hover {
  color: var(--cta);
}

/* ── Parent item with submenu ──
   Gives each top-level <li> a positioning context
   so the dropdown sits beneath it.
   The padding-bottom extends the hover area of the <li>
   so there's no dead zone between the link and the dropdown. */
.site-header .primary-menu > li {
  position: relative;
  padding-bottom: 8px;
  margin-bottom: -8px; /* cancel the padding so layout isn't affected */
}

/* ── Chevron indicator ──
   WordPress adds .menu-item-has-children to any <li>
   that has child items. We append a ▾ after the link text
   using a CSS pseudo-element so no PHP changes are needed. */
.site-header .menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 11px;
  opacity: 0.7;
  vertical-align: middle;
}

/* ── Sub-menu: hidden by default ──
   display:none keeps it fully hidden and out of tab order
   until the parent is hovered/focused.
   IMPORTANT: top must be 100% not calc(100%+Npx) — any
   physical gap between the <li> and the dropdown causes
   mouseout to fire before the cursor reaches the menu. */
.site-header .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--white);
  border-top: 3px solid var(--cta);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 24px rgba(27, 60, 143, 0.12);
  z-index: 200;
  flex-direction: column;
  gap: 0;
  padding: 6px 0;
}

/* ── Sub-menu: visible on hover or keyboard focus ── */
.site-header .menu-item-has-children:hover > .sub-menu,
.site-header .menu-item-has-children:focus-within > .sub-menu {
  display: flex;
}

/* ── Sub-menu items ── */
.site-header .sub-menu li {
  border-bottom: 1px solid var(--light-tint);
}
.site-header .sub-menu li:last-child {
  border-bottom: none;
}
.site-header .sub-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--primary);
}
.site-header .sub-menu a:hover {
  background: var(--light-tint);
  color: var(--cta);
}

/* Buttons used throughout the site */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.btn-donate {
  background: var(--primary);
  color: var(--white);
  border-radius: 30px;
  padding: 12px 28px;
}

/* ====================================================
   4. HERO (Section 3)
   REPLACE the url() below with your uploaded hero photo
   ==================================================== */
.hero {
  background-color: var(--dark); /* fallback if no Featured Image is set */
  background-image: linear-gradient(90deg, rgba(26,31,107,0.75) 0%, rgba(26,31,107,0.15) 100%);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 120px 40px 160px;
  min-height: 280px;
  display: flex;
  align-items: center;
  color: var(--white);
}
.hero-content { max-width: 600px; }
.hero h1 {
  color: var(--white);
  font-size: 48px;
  line-height: 1.2;
  margin-bottom: 20px;
}
.hero p {
  color: var(--white);
  font-size: 18px;
  margin-bottom: 30px;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-cta {
  background: var(--cta);
  color: var(--dark);
  border-radius: 8px;
  padding: 16px 32px;
}
.btn-outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 8px;
  padding: 14px 32px;
}

/* ====================================================
   5. FLOATING STATS BAR (Section 4)
   ==================================================== */
.stats-bar {
  background: var(--white);
  max-width: 1100px;
  margin: 24px auto 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 16px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 10;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  border-right: 1px solid #EBEBEB;
}
.stat-item:last-child { border-right: none; }
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--light-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  margin: 0 0 10px 0;
}
/* Colored stat icon circles */
.stat-item:nth-child(1) .stat-icon { background: rgba(0,194,184,0.15);  }
.stat-item:nth-child(2) .stat-icon { background: rgba(123,47,190,0.15); }
.stat-item:nth-child(3) .stat-icon { background: rgba(27,60,143,0.12);  }
.stat-item:nth-child(4) .stat-icon { background: rgba(245,197,24,0.20); }
/* Stat item slight shadow + rounded */
/* stat-item defined above */
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 4px; }
.stat-number {
  font-size: 30px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.1;
}
.stat-sub { font-size: 12px; color: var(--gray); }

/* ====================================================
   6. FIND YOUR CHILD'S PATH (Section 5)
   ==================================================== */
.path-section { padding: 80px 40px 60px; text-align: center; }
.path-section h2 {
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 40px;
}
.path-cards {
  display: flex;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: stretch;
}
.path-card {
  flex: 1;
  min-width: 220px;
  background: var(--white);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: left;
  border-top: 3px solid var(--cta);
  transition: transform 0.2s ease;
}
.path-card:hover { transform: translateY(-4px); }
.path-card.purple { border-top-color: var(--accent); }
.path-card.blue   { border-top-color: var(--primary); }
.path-card.light  { background: var(--light-tint); border-top: none; }
.path-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
  color: var(--white);
}
.path-icon.teal   { background: var(--cta); }
.path-icon.purple { background: var(--accent); }
.path-icon.blue   { background: var(--primary); }
.path-card h3 { font-size: 18px; margin-bottom: 8px; }
.path-card p  { font-size: 14px; }
.path-arrow-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  margin-top: 20px;
  font-weight: bold;
}
.path-arrow-btn.teal   { background: var(--cta); }
.path-arrow-btn.purple { background: var(--accent); }
.path-arrow-btn.blue   { background: var(--primary); }
.path-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--primary);
}

/* ====================================================
   7. UPCOMING EVENTS (Section 6)
   REPLACE event-image background colors with photos later
   ==================================================== */
.events-section {
  background: var(--dark);
  padding: 60px 40px;
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.events-section::before {
  content: '✦';
  position: absolute;
  top: 24px; right: 180px;
  font-size: 18px;
  color: rgba(255,255,255,0.5);
  pointer-events: none;
}
.events-section::after {
  content: '✦   ✦';
  position: absolute;
  top: 14px; right: 60px;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  letter-spacing: 24px;
  pointer-events: none;
}
.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 10px;
  flex-wrap: wrap;
  gap: 16px;
}
.events-header h2 { color: var(--white); font-size: 32px; margin: 0; }
.events-header h2 span { color: var(--cta); }
.btn-outline-light {
  border: 2px solid var(--white);
  color: var(--white);
  border-radius: 30px;
  padding: 10px 24px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
}
.events-sub {
  max-width: 1100px;
  margin: 0 auto 30px;
  color: #B8C2D9;
  font-size: 14px;
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
.event-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  color: var(--gray);
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.event-image {
  height: 180px;
  background: var(--light-tint);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  overflow: hidden;
}
.event-img-placeholder {
  font-size: 48px;
  opacity: 0.4;
}
.event-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--white);
  text-align: center;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.badge-month { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.badge-day   { font-size: 26px; font-weight: 900; line-height: 1; }
.badge-dow   { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-teal   { background: var(--cta); }
.badge-purple { background: var(--accent); }
.badge-blue   { background: var(--primary); }
.event-body {
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}
.pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.pill-teal   { background: #E0F7F5; color: var(--cta); }
.pill-purple { background: #F2E8FB; color: var(--accent); }
.pill-blue   { background: var(--light-tint); color: var(--primary); }
.event-body h3 { font-size: 20px; margin-bottom: 8px; }
.event-body p  { font-size: 14px; margin-bottom: 12px; }
.event-meta    { font-size: 13px; margin-bottom: 6px; }
.btn-register {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--white);
  text-decoration: none;
  margin-top: auto;
  transition: opacity 0.2s;
}
.btn-register:hover { opacity: 0.88; }

/* ====================================================
   8. OUR FREE PROGRAMS (Section 7)
   ==================================================== */
.programs-section { padding: 60px 40px; }
.programs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 30px;
  flex-wrap: wrap;
  gap: 10px;
}
.programs-header h2 { font-size: 24px; margin: 0; }
.programs-header a { color: var(--cta); font-size: 14px; font-weight: 700; }
.programs-grid {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.program-item {
  flex: 1;
  min-width: 200px;
  text-align: center;
  padding: 10px 20px;
  border-left: 1px solid var(--light-tint);
}
.program-item:first-child { border-left: none; }
.program-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--white);
  margin: 0 auto 12px;
}
.program-item h3 { font-size: 16px; margin-bottom: 6px; }
.program-item p  { font-size: 13px; }

/* ====================================================
   9. THE STARR IMPACT (Section 8)
   ==================================================== */
.impact-section { padding: 0 40px 60px; }
.impact-bar {
  max-width: 1100px;
  margin: 0 auto;
  background: #F7F9FC;
  border-radius: 12px;
  padding: 30px 40px;
  text-align: center;
}
.impact-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 20px;
}
.impact-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.impact-item {
  flex: 1;
  min-width: 160px;
  border-left: 1px solid var(--light-tint);
  padding: 0 16px;
}
.impact-item:first-child { border-left: none; }
.impact-number {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
}
.impact-text { font-size: 13px; }
.impact-footnote { font-size: 12px; color: var(--muted); margin-top: 16px; }

/* ====================================================
   10. SUPPORT OUR MISSION / DONATE (Section 9)
   ==================================================== */
.donate-section { background: var(--dark); padding: 60px 40px; color: var(--white); text-align: center; }
.donate-inner {
  display: flex;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.donate-left h2 { color: var(--white); font-size: 22px; margin-bottom: 8px; }
.donate-left p { color: #B8C2D9; font-size: 14px; max-width: 320px; }
.donate-right { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.amount-row { display: flex; gap: 10px; flex-wrap: wrap; }
.amount-btn {
  background: var(--white);
  color: var(--primary);
  border-radius: 30px;
  padding: 10px 22px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  border: none;
  cursor: pointer;
}
.amount-btn.active { background: var(--cta); color: var(--dark); }
.btn-donate-now {
  background: var(--cta);
  color: var(--dark);
  border-radius: 30px;
  padding: 16px 40px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  border: none;
  cursor: pointer;
}
.donate-secure { font-size: 12px; color: #B8C2D9; }

/* ====================================================
   11. STAY CONNECTED / NEWSLETTER (Section 10)
   ==================================================== */
.newsletter-section { background: #161B5C; padding: 30px 60px; color: var(--white); }
.newsletter-inner {
  display: flex;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.newsletter-left h2 { color: var(--white); font-size: 18px; margin-bottom: 6px; }
.newsletter-left p { color: #B8C2D9; font-size: 13px; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input {
  border: none;
  border-radius: 6px;
  padding: 14px 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  min-width: 240px;
}
.newsletter-form button {
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 6px;
  padding: 14px 28px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
}
.newsletter-form button:hover { background: #16306F; }

/* ====================================================
   12. FOOTER
   ==================================================== */
.site-footer { background: var(--dark); color: var(--white); padding: 60px 40px 0; }
.footer-grid {
  display: flex;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  padding-bottom: 40px;
}
.footer-col { flex: 1; min-width: 180px; }
.footer-col h4 {
  color: var(--white);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
/* Reset spacing on widgets placed in footer columns
   (Appearance > Widgets > Footer: Quick Links / Get Involved) */
.footer-col .footer-widget {
  margin: 0;
}
.footer-col .footer-widget ul {
  margin: 0;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; font-size: 14px; }
.footer-col a { color: #B8C2D9; }
.footer-col a:hover { color: var(--white); }

/* Contact Us column — no icons, consistent with other footer text */
.footer-col .contact-list li {
  font-size: 14px;
  color: #B8C2D9;
  margin-bottom: 8px;
  line-height: 1.5;
}
.footer-tagline { font-size: 13px; color: #B8C2D9; margin: 12px 0 16px; line-height: 1.6; }
.social-icons { display: flex; gap: 10px; }
.social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #283A7A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.social-icons a:hover { background: var(--cta); }
.footer-bottom {
  border-top: 1px solid #283A7A;
  padding: 20px 0;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--white); }

/* ====================================================
   13. MOBILE RESPONSIVE
   Anything below 900px wide (most phones/small tablets)
   ==================================================== */
@media (max-width: 900px) {
  .hero { padding: 60px 24px 100px; }
  .hero h1 { font-size: 32px; }
  .hero-content { max-width: 100%; }
  .stats-bar { margin: 20px auto 0; flex-direction: column; }
  .stat-item { border-left: none !important; }
  .path-arrow { display: none; }
  .path-cards { flex-direction: column; }
  .events-grid { flex-direction: column; }
  .programs-grid { flex-direction: column; }
  .program-item { border-left: none !important; }
  .impact-grid { flex-direction: column; }
  .impact-item { border-left: none !important; }
  .donate-inner, .newsletter-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .donate-right { align-items: flex-start; width: 100%; }
  .amount-row, .newsletter-form { width: 100%; }
  .newsletter-form input { flex: 1; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Header: show the hamburger icon, hide the menu links by
     default. Tapping the icon adds "is-open" (via js/mobile-menu.js)
     which reveals the menu as a dropdown below the header. */
  .header-menu { display: block; }

  .site-header ul.primary-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    z-index: 100;
  }
  .site-header ul.primary-menu.is-open {
    display: flex;
  }
  .site-header ul.primary-menu li {
    border-bottom: 1px solid var(--light-tint);
  }
  .site-header ul.primary-menu a {
    display: block;
    padding: 16px 24px;
  }

  /* Mobile submenus: stack indented below parent, hidden until
     parent's toggle button (added by JS) is clicked. */
  .site-header .sub-menu {
    display: none;
    position: static;  /* not absolute - flows in the document */
    box-shadow: none;
    border-top: none;
    border-left: 3px solid var(--cta);
    border-radius: 0;
    padding: 0;
    background: var(--light-tint);
    min-width: unset;
    width: 100%;
  }
  .site-header .sub-menu.is-open {
    display: flex;
  }
  .site-header .sub-menu a {
    padding: 12px 24px 12px 36px; /* extra left indent */
    font-size: 14px;
  }

  /* Submenu toggle button (injected by JS beside parent link) */
  .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    min-width: 52px;
    background: none;
    border: none;
    border-left: 1px solid var(--light-tint);
    color: var(--primary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .submenu-toggle[aria-expanded="true"] {
    color: var(--cta);
  }

  /* Make parent li relative so the toggle button can sit at its right edge */
  .site-header .primary-menu > li {
    position: relative;
  }

  /* Hide desktop chevron on mobile since we have a dedicated toggle button */
  .site-header .menu-item-has-children > a::after {
    display: none;
  }
}

/* ====================================================
   14. SHARED COMPONENTS FOR ABOUT / PROGRAMS / EVENTS / DONATE
   ==================================================== */

/* --- Page Banner (top of every inner page) --- */
/* ── Interior page banner — split layout ──
   Left 40%: dark navy panel with heading + subtext
   Right 60%: background photo (from Featured Image)
   Falls back to solid navy if no Featured Image is set. */
.page-banner {
  display: flex;
  min-height: 280px;
  background: var(--dark);
  border-top: 5px solid var(--gold);
  border-bottom: 4px solid var(--cta);
  position: relative;
  overflow: hidden;
  color: var(--white);
}

/* Left content panel — always dark navy */
.page-banner-content {
  flex: 0 0 70%;
  background: var(--dark);
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}


background-position:
    20px 30px,
    55px 80px,
    10px 60px;
  pointer-events: none;
  z-index: 0;
}
/* Ensure text content sits above the pattern */
.page-banner-content > * {
  position: relative;
  z-index: 2;
}
/* Home banner already has its own ::before — avoid doubling */
.home-banner 
  background-position: 20px 30px, 55px 80px, 10px 60px;
}

/* Diagonal clip removed — straight rectangular edge */

.home-banner 
  background-position:
    20px 30px,
    55px 80px,
    10px 60px;
  pointer-events: none;
  z-index: 1;
}
.home-banner .page-banner-content .home-hero-headline,
.home-banner .page-banner-content .home-hero-tagline,
.home-banner .page-banner-content .steam-explainer,
.home-banner .page-banner-content .hero-buttons {
  position: relative;
  z-index: 3;
}

/* ── Home hero: curved right edge (home only) ─────────────────────────── */
.home-banner .page-banner-content {
  flex: 0 0 40%;
  position: relative;
}
.home-banner .page-banner-image   { flex: 0 0 60%; }
.home-banner {
  border-top: 5px solid var(--gold) !important;
  border-bottom: 4px solid var(--cta) !important;
  min-height: 500px;
}
.home-banner .page-banner-image   { flex: 0 0 60%; }

/* Curved clip on right edge of home hero navy panel */
.home-banner .page-banner-content::after {
  content: '';
  position: absolute;
  top: 0;
  right: -60px;
  width: 120px;
  height: 100%;
  background: var(--dark);
  clip-path: ellipse(60px 100% at 0% 50%);
  z-index: 2;
}

/* Dot pattern overlay on home hero navy panel */
.home-banner 

/* Hero headline stacked lines */
.home-hero-headline {
  font-family: 'Nunito', sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 20px;
  position: relative;
  z-index: 3;
}
.home-hero-headline .gold-word {
  color: var(--gold);
}
.home-hero-tagline {
  font-size: 17px;
  color: #B8C2D9;
  line-height: 1.6;
  margin-bottom: 20px;
  position: relative;
  z-index: 3;
}

/* STEAM explainer block */
.steam-explainer {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 24px;
  margin-bottom: 28px;
  position: relative;
  z-index: 3;
}
.steam-explainer-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(0,194,184,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.steam-explainer-text {
  font-size: 13px !important;
  color: #B8C2D9;
  line-height: 1.6;
}
.steam-explainer-text strong {
  font-size: 13px !important;
  color: var(--cta);
  font-family: 'Nunito', sans-serif;
}

/* Hero buttons z-index */
.home-banner .hero-buttons {
  position: relative;
  z-index: 3;
}

/* ── Testimonials section ───────────────────────────────────────────────── */
/* testimonials-section overridden below */
.testimonials-grid {
  display: flex;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.testimonial-card {
  flex: 1;
  min-width: 280px;
  background: var(--white);
  border-radius: 12px;
  padding: 24px 24px;
  border: 1px solid #E8EDF8;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.testimonial-quote {
  font-size: 15px;
  color: var(--gray);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}
/* Quotes added inline in PHP */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial-photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--light);
  border: 2px solid var(--cta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}
.testimonial-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--primary);
}
.testimonial-role {
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 768px) {
  .home-hero-headline { font-size: 32px; }
  .home-banner .page-banner-content::after { display: none; }
  .testimonials-grid { flex-direction: column; }
  .steam-explainer-text,
  .steam-explainer-text strong { font-size: 14px !important; }
}



/* Right photo panel */
.page-banner-image {
  flex: 0 0 30%;
  background-color: transparent;
  background-image: none;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

/* Left-edge gradient removed — clean rectangular split */

.page-banner h1 {
  color: var(--white);
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 12px;
}
.page-banner p {
  color: #B8C2D9;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
.page-banner .pill {
  margin-bottom: 12px;
  display: inline-block;
}

.star-decor { position: absolute; opacity: 0.15; font-size: 36px; pointer-events: none; z-index: 2; }
.star-decor.tr { top: 20px; right: 60%; color: var(--gold); }
.star-decor.bl { bottom: 20px; left: 20px; color: var(--cta); }
.star-decor.mid { top: 50%; right: 62%; color: var(--cta); }

/* Mobile: stack vertically, photo becomes a background */
@media (max-width: 900px) {
  .page-banner {
    flex-direction: column;
    min-height: auto;
  }
  .page-banner-content {
    flex: none;
    padding: 60px 24px;
    width: 100%;
  }
  .page-banner-content::after { display: none; }
  .page-banner-image {
    flex: none;
    height: 200px;
    width: 100%;
  }
  
  .star-decor.tr { right: 20px; }
  .star-decor.mid { display: none; }
}

/* --- Narrow centered text section --- */
.narrow-section { max-width: 800px; margin: 0 auto; padding: 60px 20px; text-align: center; }
.narrow-section h2 { font-size: 30px; margin-bottom: 16px; }
.narrow-section p { font-size: 16px; }

/* --- Tinted full-width wrapper section --- */
.tint-section { background: var(--light-tint); padding: 80px 40px; }
.tint-section.purple { background: #F2E8FB; }
.section-heading { text-align: center; font-size: 28px; text-transform: uppercase; margin-bottom: 10px; }
.section-subheading { text-align: center; font-size: 15px; margin-bottom: 40px; }

/* --- Zigzag (image + text, alternating sides) --- */
.zigzag {
  display: flex;
  gap: 40px;
  padding: 60px 40px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
  flex-wrap: wrap;
}
.zigzag.reverse { flex-direction: row-reverse; }
.zigzag-media, .zigzag-text { flex: 1; min-width: 280px; }
.placeholder-img {
  background: var(--light-tint);
  border-radius: 12px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}
.zigzag-text .label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
  display: block;
}
.zigzag-text h2 { font-size: 28px; margin-bottom: 12px; }
.zigzag-text p { font-size: 16px; margin-bottom: 20px; }
.tag-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }

/* --- General info cards grid (programs, ways to give, etc.) --- */
.cards-grid {
  display: flex;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
  padding: 0 40px;
}
.info-card {
  flex: 1;
  min-width: 220px;
  background: var(--white);
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}
.info-card:hover { transform: translateY(-4px); }
.info-card .icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--white);
  margin-bottom: 16px;
}
.info-card h3 { font-size: 17px; margin-bottom: 8px; }
.info-card p { font-size: 14px; margin-bottom: 12px; }
.info-card a { font-size: 13px; font-weight: 700; }
/* Cards whose body copy varies in length (e.g. program taglines) would
   otherwise leave each card's pill/button sitting at a different height.
   .info-card-footer sits after the variable-length content and is pushed
   flush to the bottom of the (already equal-height, via flex stretch on
   .cards-grid) card, so pills and buttons line up across a row regardless
   of how many lines the copy above them wraps to. */
.info-card-footer { margin-top: auto; }

/* --- Numbered steps row (How It Works) --- */
.steps-row {
  display: flex;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 60px;
  flex-wrap: wrap;
  text-align: center;
}
.step-item { flex: 1; min-width: 180px; }
.step-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--white);
  margin: 0 auto 16px;
}
.step-item h3 { font-size: 16px; margin-bottom: 6px; }
.step-item p { font-size: 14px; }

/* --- FAQ accordion using native <details>/<summary> (no JS needed!) --- */
.faq-section { max-width: 800px; margin: 0 auto; padding: 0 40px 80px; }
.faq-item {
  background: var(--white);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.faq-item summary {
  font-weight: 700;
  color: var(--primary);
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  font-size: 16px;
}
.faq-item p { margin-top: 10px; font-size: 14px; }

/* --- Dark CTA banner with buttons --- */
.cta-banner { background: var(--dark); padding: 60px; text-align: center; color: var(--white); }
.cta-banner h2 { color: var(--white); font-size: 28px; margin-bottom: 10px; }
.cta-banner p { color: #B8C2D9; font-size: 15px; margin-bottom: 24px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-small-text { font-size: 12px; color: #B8C2D9; margin-top: 16px; }

/* --- Filter tabs (visual only - Events page) --- */
.filter-tabs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 40px 40px 0; }
.filter-tab {
  border-radius: 30px;
  padding: 10px 24px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  border: 2px solid var(--light-tint);
  color: var(--primary);
  background: var(--white);
}
.filter-tab.active { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* --- Photo gallery grid --- */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
.gallery-item {
  flex: 1 1 calc(25% - 16px);
  min-width: 140px;
  height: 160px;
  background: var(--light-tint);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  transition: transform 0.2s ease;
  overflow: hidden;
}
.gallery-item:hover { transform: scale(1.03); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* --- Donation form section (Donate page) --- */
.donate-form-wrap {
  background: var(--light-tint);
  border-radius: 12px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px;
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: center;
}
.donate-form-left, .donate-form-right { flex: 1; min-width: 280px; }
.donate-form-left h2 { font-size: 26px; margin-bottom: 8px; }
.donate-form-left p { font-size: 15px; margin-bottom: 20px; }
.giving-toggle { display: flex; gap: 10px; margin: 16px 0; }
.toggle-btn {
  border-radius: 30px;
  padding: 8px 20px;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  border: 2px solid var(--light-tint);
  background: var(--white);
  color: var(--primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.4;
}
.toggle-btn:hover { border-color: var(--primary); }
.toggle-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); }
.amount-btn { cursor: pointer; }
.custom-amount-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid var(--light-tint);
  margin-bottom: 16px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
}

/* --- Allocation bars (Where Your Donation Goes) --- */
.allocation-grid {
  display: flex;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px 60px;
  flex-wrap: wrap;
}
.allocation-item { flex: 1; min-width: 200px; }
.allocation-percent { font-size: 36px; font-weight: 800; color: var(--primary); }
.allocation-bar { height: 8px; border-radius: 4px; margin: 10px 0; }
.allocation-item h4 { font-size: 15px; margin-bottom: 4px; }
.allocation-item p { font-size: 13px; }

/* --- Trust badges row --- */
.badge-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.trust-badge {
  background: #E0F7F5;
  color: var(--cta);
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
}

/* --- Mobile tweaks for new components --- */
@media (max-width: 900px) {
  .zigzag, .zigzag.reverse { flex-direction: column; }
  .donate-form-wrap { padding: 30px; }
  .gallery-item { flex-basis: calc(50% - 16px); }
}

/* ====================================================
   15. GALLERY PAGE
   ==================================================== */

.gallery-masonry {
  max-width: 1100px;
  margin: 0 auto;
  columns: 4;
  column-gap: 16px;
}
.gallery-item-wrap {
  break-inside: avoid;
  margin-bottom: 16px;
}
.gallery-item-inner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--light-tint);
  cursor: pointer;
}
.gallery-item-inner img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}
.gallery-item-inner:hover img {
  transform: scale(1.04);
}
.gallery-item-inner.placeholder {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}


/* ── Highlighted YouTube section (v5.85; sized down in v5.86; laid out
   side-by-side in v5.87) ──────────────────────────────────────────────
   Deliberately styled as its own destination (tinted background, like
   .tint-section) rather than blended into the plain-white gallery grid
   below, so the channel's videos read as a featured section. Hidden via
   inline style until JS finds at least one YouTube embed block.
   v5.87: with typically just 1-2 videos on the channel, stacking the
   heading/copy above a mostly-empty grid row left a large block of bare
   tinted background next to the video. Switched to a two-column layout
   - video(s) on the left, eyebrow/heading/copy on the right - so the
   section reads as one balanced banner using its full width, per the
   user's screenshot feedback. Falls back to a single stacked column on
   small screens, where side-by-side no longer has room to work. */
.gallery-videos-section {
  background: var(--light-tint);
  padding: 40px;
}
.gallery-videos-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  text-align: left;
}
.gallery-videos-media {
  flex: 1 1 420px;
  max-width: 480px;
}
.gallery-videos-text {
  flex: 1 1 300px;
  max-width: 420px;
}
.gallery-videos-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--cta);
  display: block;
  margin-bottom: 8px;
}
.gallery-videos-heading {
  font-size: 26px;
  margin-bottom: 10px;
}
.gallery-videos-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}
.gallery-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.gallery-video-cell {
  border-radius: 8px;
  overflow: hidden;
}
.gallery-video-cell iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
  border-radius: 8px;
}
.gallery-video-caption {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 6px 4px 0;
  margin: 0;
}
@media (max-width: 768px) {
  .gallery-videos-section { padding: 32px 20px; }
  .gallery-videos-inner { flex-direction: column; text-align: center; gap: 24px; }
  .gallery-videos-media,
  .gallery-videos-text {
    /* flex-basis is read as a HEIGHT once the row above switches to
       flex-direction:column, so the desktop 420px/300px basis values
       must be reset here too, not just max-width - otherwise each
       column renders far taller than its actual content. */
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .gallery-videos-sub { margin: 0 auto; }
}


/* ── Gallery editor content (WordPress blocks) ────────────────────────── */
.gallery-editor-content {
  padding: 20px 40px 80px;
}
.gallery-editor-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ── WordPress Gallery block — all versions ─────────────────────────────
   WP 5.9+ outputs: figure.wp-block-gallery > ul.wp-block-gallery__item
   Older outputs:   figure.wp-block-gallery > figure.wp-block-image
   We force a grid on the gallery wrapper regardless of inner markup.    */
.gallery-editor-inner .wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* New-style: ul > li items */
.gallery-editor-inner .wp-block-gallery li.blocks-gallery-item {
  display: block;
  margin: 0;
  padding: 0;
}

/* All images inside the gallery */
.gallery-editor-inner .wp-block-gallery img,
.gallery-editor-inner .wp-block-gallery figure img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
  margin: 0 !important;
}

/* Prevent WP default float/inline styles overriding grid */
.gallery-editor-inner .wp-block-gallery figure {
  margin: 0 !important;
  width: 100% !important;
}

/* ── WordPress image block (single images outside gallery) ── */
.gallery-editor-inner .wp-block-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto 24px;
}

/* ── WordPress video block ── */
.gallery-editor-inner .wp-block-video {
  margin-bottom: 24px;
}
.gallery-editor-inner .wp-block-video video {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* ── Captions ── */
.gallery-editor-inner figcaption,
.gallery-editor-inner .wp-element-caption {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .gallery-editor-content { padding: 16px 20px 60px; }
  .gallery-editor-inner .wp-block-gallery {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .gallery-editor-inner .wp-block-gallery {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* Gallery pagination */
#gallery-pagination { flex-wrap: wrap; }
.gallery-page-btn {
  background: var(--white);
  border: 1.5px solid var(--light);
  color: var(--primary);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  min-width: 44px;
}
.gallery-page-btn:hover:not(:disabled) {
  background: var(--light);
}
.gallery-page-btn.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.gallery-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Gallery video support (legacy ACF slots) */
.gallery-video-wrap { background: #000; }
.gallery-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-height: 280px;
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26,31,107,0.8);
  color: var(--white);
  font-size: 13px;
  padding: 8px 12px;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.gallery-item-inner:hover 

/* ── Gallery editor content (WordPress blocks) ────────────────────────── */
.gallery-editor-content {
  padding: 20px 40px 80px;
}
.gallery-editor-inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ── WordPress Gallery block — all versions ─────────────────────────────
   WP 5.9+ outputs: figure.wp-block-gallery > ul.wp-block-gallery__item
   Older outputs:   figure.wp-block-gallery > figure.wp-block-image
   We force a grid on the gallery wrapper regardless of inner markup.    */
.gallery-editor-inner .wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* New-style: ul > li items */
.gallery-editor-inner .wp-block-gallery li.blocks-gallery-item {
  display: block;
  margin: 0;
  padding: 0;
}

/* All images inside the gallery */
.gallery-editor-inner .wp-block-gallery img,
.gallery-editor-inner .wp-block-gallery figure img {
  width: 100% !important;
  height: 260px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
  margin: 0 !important;
}

/* Prevent WP default float/inline styles overriding grid */
.gallery-editor-inner .wp-block-gallery figure {
  margin: 0 !important;
  width: 100% !important;
}

/* ── WordPress image block (single images outside gallery) ── */
.gallery-editor-inner .wp-block-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto 24px;
}

/* ── WordPress video block ── */
.gallery-editor-inner .wp-block-video {
  margin-bottom: 24px;
}
.gallery-editor-inner .wp-block-video video {
  width: 100%;
  border-radius: 8px;
  display: block;
}

/* ── Captions ── */
.gallery-editor-inner figcaption,
.gallery-editor-inner .wp-element-caption {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px;
}

@media (max-width: 768px) {
  .gallery-editor-content { padding: 16px 20px 60px; }
  .gallery-editor-inner .wp-block-gallery {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .gallery-editor-inner .wp-block-gallery {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* Gallery pagination */
#gallery-pagination { flex-wrap: wrap; }
.gallery-page-btn {
  background: var(--white);
  border: 1.5px solid var(--light);
  color: var(--primary);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  min-width: 44px;
}
.gallery-page-btn:hover:not(:disabled) {
  background: var(--light);
}
.gallery-page-btn.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.gallery-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Gallery video support (legacy ACF slots) */
.gallery-video-wrap { background: #000; }
.gallery-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  max-height: 280px;
}

.gallery-caption {
  transform: translateY(0);
}

@media (max-width: 900px) {
  .gallery-masonry { columns: 2; }
}
@media (max-width: 480px) {
  .gallery-masonry { columns: 1; }
}

/* ====================================================
   16. ENROLLMENT PAGE
   ==================================================== */

.enrollment-form { display: flex; flex-direction: column; gap: 20px; }

.form-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.form-row .form-group { flex: 1; min-width: 200px; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-family: 'Nunito', sans-serif;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--light-tint);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  color: var(--gray);
  transition: border-color 0.2s;
  background: var(--white);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(0,194,184,0.12);
}
.form-group textarea { resize: vertical; min-height: 80px; }

.required { color: #E53E3E; font-weight: 700; }
.optional { color: var(--muted); font-weight: 400; font-size: 13px; }

.enrollment-submit {
  width: 100%;
  border: none;
  padding: 16px;
  font-size: 17px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 4px;
}
.enrollment-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

@media (max-width: 900px) {
  .form-row { flex-direction: column; }
}

/* ====================================================
   17. NEWS (BLOG) TEMPLATES
   ==================================================== */

/* --- News listing grid --- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
/* The "All" tab on the News & Events page (page-news-events.php's
   #ne-all section, "Latest From STARR") is the one place .event-card
   and .news-card render side-by-side in the same .news-grid row, since
   ne_render_card() picks one or the other per-post. Their image areas
   default to different heights (.event-image below is 180px sitewide;
   .news-card-image is 200px), and their body padding-top differs by
   2px, so a card's pill/title started a few pixels lower or higher
   than its neighbor depending on which type it happened to be, per
   the user's screenshot. Scoped to .news-grid (not the bare
   .event-image/.event-body rules below) so the event-only grids
   elsewhere that also use .event-card — Home page and the Events/Past
   Events pages, all via .events-grid, never mixed with .news-card —
   are unaffected by this. */
.news-grid .event-image { height: 200px; }
.news-grid .event-body { padding-top: 20px; }

/* v5.92: the Home page's "Upcoming Events" teaser now renders its cards
   via the same ne_render_card() function /news-events/ uses (see
   functions.php and page-home.php), so it should also match that page's
   card proportions - which come from the .news-grid override above, not
   .event-image/.event-body's own 180px/18px base values. Scoped to
   #home-upcoming-events (the Home page's own section id) rather than the
   shared .events-grid class, so the Events and Past Events pages - which
   also use .events-grid for their own, unrelated event-card grids and
   weren't part of this request - keep their existing 180px/18px
   proportions. */
#home-upcoming-events .event-image { height: 200px; }
#home-upcoming-events .event-body { padding-top: 20px; }
.news-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(27,60,143,0.07);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-card:hover { transform: translateY(-4px); }
.news-card-image {
  display: block;
  height: 200px;
  overflow: hidden;
  background: var(--light-tint);
}
.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.news-card:hover .news-card-image img { transform: scale(1.04); }
.news-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: var(--light);
  text-decoration: none;
}
.news-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}
.news-card-title {
  font-size: 18px;
  margin: 0 0 8px 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.3em * 2);
}
.news-card-title a {
  color: var(--primary);
  text-decoration: none;
}
.news-card-title a:hover { color: var(--cta); }
.news-card-meta {
  font-size: 13px;
  color: var(--muted);
}
.news-card-excerpt {
  font-size: 14px;
  color: var(--gray);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-read-more {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--cta);
  text-decoration: none;
  margin-top: 4px;
}
.news-read-more:hover { color: var(--primary); }

/* --- Pagination --- */
.news-pagination {
  margin-top: 50px;
  text-align: center;
}
.news-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--light-tint);
  color: var(--primary);
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  text-decoration: none;
  font-size: 14px;
}
.news-pagination .page-numbers.current,
.news-pagination .page-numbers:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.news-pagination .page-numbers.prev,
.news-pagination .page-numbers.next { width: auto; padding: 0 16px; }

/* --- Single post --- */
.single-post { padding-top: 60px; }
.single-post-body { font-size: 17px; line-height: 1.8; }
.single-post-body h2 { font-size: 26px; margin: 32px 0 12px; }
.single-post-body h3 { font-size: 20px; margin: 24px 0 10px; }
.single-post-body blockquote {
  border-left: 4px solid var(--cta);
  margin: 24px 0;
  padding: 12px 20px;
  background: var(--light-tint);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--gray);
}

/* --- Event flyer (single.php; optional, via "event_flyer" Custom Field) --- */
.event-flyer {
  margin: 40px 0;
  padding-top: 24px;
  border-top: 1px solid var(--light-tint);
  text-align: center;
}
.event-flyer-heading {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 20px;
}
.event-flyer-link { display: inline-block; }
.event-flyer-img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Flyers are usually a full poster graphic (often portrait, dense with
     text/QR codes), so unlike the card thumbnails elsewhere on the site
     this is never cropped with background-size:cover; a max-height keeps
     a very tall flyer from dominating the whole page while staying fully
     legible, since it's also a click-through to view it at full size. */
  max-height: 900px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--light-tint);
  box-shadow: 0 8px 30px rgba(27,60,143,0.12);
  transition: opacity 0.2s;
}
.event-flyer-link:hover .event-flyer-img { opacity: 0.9; }
.event-flyer-caption {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 600px) {
  .event-flyer-img { max-height: 600px; }
}

/* --- Post tags --- */
.post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--light-tint);
}

/* --- Post navigation (prev/next) --- */
.post-nav {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.post-nav-link {
  flex: 1;
  min-width: 200px;
  padding: 16px 20px;
  background: var(--light-tint);
  border-radius: 8px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.2s;
}
.post-nav-link:hover { background: var(--primary); }
.post-nav-link:hover .post-nav-label,
.post-nav-link:hover .post-nav-title { color: var(--white); }
.post-nav-next { text-align: right; }
.post-nav-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.post-nav-title { font-size: 15px; font-weight: 700; color: var(--primary); font-family: 'Nunito', sans-serif; }

@media (max-width: 900px) {
  .news-card { flex-basis: 100%; }
  .post-nav { flex-direction: column; }
  .post-nav-next { text-align: left; }
}

/* ====================================================
   WPFORMS — STARRCS THEME OVERRIDES v3.9
   Maps WPForms output classes to match the original
   enrollment form design. Applies to all three forms.
   ==================================================== */

/* Form container */
.wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Field rows (side-by-side pairs) */
.wpforms-field-row,
.wpforms-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Individual field containers */
.wpforms-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

/* Labels */
.wpforms-field-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  font-family: 'Nunito', sans-serif;
}

/* Required asterisk */
.wpforms-required-label {
  color: #E53E3E;
  font-weight: 700;
}

/* All text inputs, selects, textareas */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form input[type="date"],
.wpforms-form select,
.wpforms-form textarea {
  border: 1.5px solid var(--light-tint);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  color: var(--gray);
  background: var(--white);
  transition: border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

/* Focus state */
.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
  outline: none;
  border-color: var(--cta);
  box-shadow: 0 0 0 3px rgba(0,194,184,0.12);
}

.wpforms-form textarea {
  resize: vertical;
  min-height: 80px;
}

/* Checkboxes and radio buttons */
.wpforms-field-checkbox ul,
.wpforms-field-radio ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.wpforms-field-checkbox ul li,
.wpforms-field-radio ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--gray);
  cursor: pointer;
  flex-basis: calc(50% - 10px);
}

.wpforms-field-checkbox ul li input,
.wpforms-field-radio ul li input {
  accent-color: var(--cta);
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Name field (first + last side by side) */
.wpforms-field-name .wpforms-field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.wpforms-field-name .wpforms-field-row-block {
  flex: 1;
  min-width: 140px;
}

.wpforms-field-sublabel {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Submit button — matches btn-cta */
.wpforms-submit {
  background: var(--cta);
  color: var(--dark);
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  align-self: flex-start;
}

.wpforms-submit:hover {
  background: var(--primary);
  transform: translateY(-1px);
}

/* Error states */
.wpforms-error-container,
.wpforms-field .wpforms-error {
  color: #E53E3E;
  font-size: 13px;
  margin-top: 4px;
}

.wpforms-form input.wpforms-error,
.wpforms-form select.wpforms-error,
.wpforms-form textarea.wpforms-error {
  border-color: #E53E3E;
}

/* Mobile */
@media (max-width: 600px) {
  .wpforms-field-checkbox ul li,
  .wpforms-field-radio ul li {
    flex-basis: 100%;
  }
  .wpforms-field-name .wpforms-field-row {
    flex-direction: column;
  }
}



/* ── Testimonials enhancements ────────────────────────────────────────── */
.testimonials-section {
  background: #EAF4FB;
  padding: 70px 40px;
}
.testimonials-intro {
  font-size: 15px;
  color: var(--gray);
  max-width: 500px;
  margin: -24px auto 36px;
  text-align: center;
  font-style: italic;
}
.testimonial-quote {
  font-size: 16px;
  color: var(--primary);
  line-height: 1.7;
  font-style: italic;
  flex: 1;
}
.testimonial-initials {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--cta);
}


/* ── Path section dotted connector ───────────────────────────────────── */
.path-section {
  position: relative;
  overflow: visible;
}
.path-cards-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.path-dotted-line {
  position: absolute;
  top: 60px;
  left: 12%;
  right: 12%;
  height: 3px;
  border-top: 3px dashed var(--cta);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 768px) {
  .path-dotted-line {
    top: 10%;
    bottom: 10%;
    left: 32px;
    right: auto;
    width: 3px;
    height: auto;
    border-top: none;
    border-left: 3px dashed var(--cta);
  }
  .path-cards-wrap { flex-direction: column; }
}


/* ── News & Events consolidated page ──────────────────────────────────── */
.ne-filter-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 36px 40px 0;
  flex-wrap: wrap;
}
.ne-tab {
  background: var(--white);
  border: 2px solid var(--light);
  color: var(--primary);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 28px;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ne-tab:hover { background: var(--light); border-color: var(--cta); }
.ne-tab.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
.ne-empty {
  width: 100%;
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 16px;
}
.ne-event-card .news-card-image {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.ne-past .news-card-image { opacity: 0.85; }

/* News & Events section headings */
.ne-section-heading {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 28px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--cta);
  display: inline-block;
}

/* News & Events count badge on tabs */
.ne-count {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 5px;
  vertical-align: middle;
}
.ne-tab.active .ne-count {
  background: rgba(255,255,255,0.3);
}

@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Event cards with inline background-image */
.news-card-image[style] {
  display: block;
  height: 200px;
  background-size: cover;
  background-position: top center;
  text-decoration: none;
}


/* ── Program single page ──────────────────────────────────────────────── */
.program-highlights-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  background: var(--dark);
  padding: 0;
  flex-wrap: wrap;
}
.program-highlight-item {
  flex: 1;
  min-width: 180px;
  text-align: center;
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.program-highlight-item:last-child { border-right: none; }
.program-highlight-val {
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--cta);
  margin-bottom: 4px;
}
.program-highlight-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.6);
}
.program-outcomes-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.program-outcomes-list li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: var(--gray);
  font-size: 15px;
  border-bottom: 1px solid var(--light);
}
.program-outcomes-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--cta);
  font-weight: 700;
}

.home-banner { position: relative; }

  background-position: 20px 30px, 55px 80px, 10px 60px;
  pointer-events: none;
  z-index: 1;
}
.home-banner .page-banner-content,
.home-banner .page-banner-image { position: relative; z-index: 2; }






.page-banner-content > * { position: relative; z-index: 2; }

/* Hero star pattern ───────────────────────────────────────────────────────
   Stars span the full .page-banner via ::before.
   The photo panel isolates itself with isolation:isolate so when a
   Featured Image is set as a background-image, it renders on top and
   the star overlay does not show through the photo.                     */
.page-banner { position: relative; overflow: hidden; }

/* Content sits above stars */
.page-banner-content { position: relative; z-index: 2; }
/* Photo panel: when it has a background-image, use isolation so the
   background covers the star layer beneath it */
.page-banner-image {
  position: relative;
  z-index: 2;
}

/* ── Hero star field ───────────────────────────────────────────────────────
   Stars show on the navy content panel always.
   Stars show on the photo panel only when no Featured Image is set —
   the inline background-image on the div covers the ::before when a photo exists. */
.page-banner-content::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ctext x='8' y='22' font-size='11' fill='rgba(255,255,255,0.55)'%3E%E2%9C%A6%3C/text%3E%3Ctext x='65' y='58' font-size='7' fill='rgba(255,255,255,0.35)'%3E%E2%9C%A6%3C/text%3E%3Ctext x='30' y='90' font-size='9' fill='rgba(255,255,255,0.40)'%3E%E2%9C%A6%3C/text%3E%3Ctext x='90' y='108' font-size='6' fill='rgba(255,255,255,0.28)'%3E%E2%9C%A6%3C/text%3E%3Ctext x='52' y='14' font-size='5' fill='rgba(255,255,255,0.22)'%3E%E2%9C%A6%3C/text%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}
.page-banner-content > * { position: relative; z-index: 2; }


/* Event card content alignment */
.event-card h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 4px 0 6px;
  color: var(--primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 44px;
}
/* Whole card links to the event's detail page (image + title), matching
   the .news-card-title pattern; only the CTA button may go elsewhere
   (an external registration link). */
.event-card h3 a { color: inherit; text-decoration: none; }
.event-card h3 a:hover { color: var(--cta); }
.event-card { transition: transform 0.2s, box-shadow 0.2s; }
.event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.24); }
.event-card p {
  font-size: 13px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 8px;
}
.event-meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; }

@media (max-width: 768px) { .events-grid { grid-template-columns: 1fr; } }

/* Tag pill fit-content width (v5.83). .event-body and .news-card-body are
   both flex columns, and a flex column's default align-items:stretch
   makes any direct child fill the full cross-axis width regardless of
   its own display type - .event-body's pill was already pinned to fit-
   content here, but .news-card-body's wasn't, so a News/Community/
   Announcements pill stretched the full width of its card while an
   Events pill stayed a normal tag-sized pill right next to it in the
   same row. Both card types now use the same rule, so every pill (no
   matter the category) is sized to its own text, never full-width. */
.event-body .pill,
.news-card-body .pill { display: inline-block !important; width: auto !important; align-self: flex-start !important; }

/* News-events page event card grid */
.events-grid-ne {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.events-grid-ne .event-card { height: 100%; }
@media (max-width: 768px) {
  .events-grid-ne { grid-template-columns: 1fr; }
}

/* Full-width star field on .page-banner — shows on both panels when no photo ── */
.page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ctext x='8' y='22' font-size='11' fill='rgba(255,255,255,0.55)'%3E%E2%9C%A6%3C/text%3E%3Ctext x='65' y='58' font-size='7' fill='rgba(255,255,255,0.35)'%3E%E2%9C%A6%3C/text%3E%3Ctext x='30' y='90' font-size='9' fill='rgba(255,255,255,0.40)'%3E%E2%9C%A6%3C/text%3E%3Ctext x='90' y='108' font-size='6' fill='rgba(255,255,255,0.28)'%3E%E2%9C%A6%3C/text%3E%3Ctext x='52' y='14' font-size='5' fill='rgba(255,255,255,0.22)'%3E%E2%9C%A6%3C/text%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}
/* Photo panel: its inline background-image renders above the ::before stars */
.page-banner-image {
  position: relative;
  z-index: 1;
  background-size: cover;
  background-position: top center;
}
/* Content sits above stars */
.page-banner-content {
  position: relative;
  z-index: 2;
}

/* Program page banner pill — fit content */
.page-banner-content .pill {
  display: inline-block !important;
  width: fit-content !important;
  max-width: fit-content !important;
  min-width: unset !important;
}

/* ════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   Breakpoints: 900px (tablet), 768px (mobile), 480px (small mobile)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* ── Header ── */
  .site-header { padding: 12px 20px; }
  .site-logo img { height: 48px; }
  .btn-donate { padding: 10px 18px; font-size: 14px; }

  /* ── Home hero ── */
  .home-banner { flex-direction: column; min-height: auto; }
  .home-banner .page-banner-content { flex: none; width: 100%; padding: 48px 24px; }
  .home-banner .page-banner-image   { flex: none; width: 100%; height: 260px; }
  .home-hero-headline { font-size: 34px; }

  /* ── Stats bar ── */
  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    margin: 16px 20px 0;
  }
  .stat-item { border-right: none; border-bottom: 1px solid #EBEBEB; }
  .stat-item:nth-child(odd)  { border-right: 1px solid #EBEBEB; }
  .stat-item:last-child      { border-bottom: none; }
  .stat-item:nth-last-child(2) { border-bottom: none; }

  /* ── Sections ── */
  .tint-section   { padding: 50px 24px; }
  .narrow-section { padding: 40px 24px; }
  .cta-banner     { padding: 50px 24px; }

  /* ── Zigzag / about layout ── */
  .zigzag         { flex-direction: column; padding: 40px 24px; gap: 28px; }
  .zigzag.reverse { flex-direction: column; }
  .zigzag-media,
  .zigzag-text    { min-width: 100%; }

  /* ── Events grid ── */
  .events-grid    { grid-template-columns: 1fr; }

  /* ── Programs cards ── */
  .cards-grid,
  .info-cards-grid { flex-direction: column; }
  .info-card       { min-width: 100%; }

  /* ── Path cards ── */
  .path-cards-wrap { flex-direction: column; }
  .path-card       { min-width: 100%; }
  .path-dotted-line {
    top: auto; left: 32px; right: auto;
    width: 3px; height: 100%;
    border-top: none;
    border-left: 3px dashed var(--cta);
  }

  /* ── Testimonials ── */
  .testimonials-grid { flex-direction: column; gap: 20px; }
  .testimonial-card  { min-width: 100%; }

  /* ── Donate / CTA ── */
  .donate-inner  { flex-direction: column; gap: 20px; }
  .cta-buttons   { flex-direction: column; align-items: center; gap: 12px; }
  .cta-buttons a { width: 100%; max-width: 320px; text-align: center; }

  /* ── Footer ── */
  .footer-inner  { flex-direction: column; gap: 32px; }
  .footer-col    { min-width: 100%; }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: 24px; }

  /* ── News & Events grid ── */
  .news-grid        { grid-template-columns: 1fr; }
  .events-grid-ne   { grid-template-columns: 1fr; }
  .ne-filter-tabs   { gap: 8px; }
  .ne-tab           { padding: 8px 16px; font-size: 14px; }

  /* ── Program single highlights bar ── */
  .program-highlights-bar { flex-direction: column; }
  .program-highlight-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .program-highlight-item:last-child { border-bottom: none; }

  /* ── Gallery ── */
  .gallery-editor-content { padding: 16px 20px 60px; }

  /* ── Mission block ── */
  section[style*="padding:60px 40px"] { padding: 48px 24px !important; }
}

@media (max-width: 768px) {

  /* ── Header: hide desktop nav, show hamburger ── */
  .header-nav > nav { display: none; }
  .header-menu      { display: flex !important; }

  /* ── Hero ── */
  .page-banner h1   { font-size: 26px; }
  .page-banner p    { font-size: 14px; }
  .home-hero-headline { font-size: 28px; }
  .home-banner .page-banner-image { height: 220px; }

  /* ── Stats bar ── */
  .stats-bar          { grid-template-columns: 1fr 1fr; }
  .stat-number        { font-size: 24px; }

  /* ── Event cards ── */
  .events-grid        { grid-template-columns: 1fr; gap: 16px; }
  .event-image        { height: 160px; }

  /* ── Section headings ── */
  .section-heading    { font-size: 20px; }
  h2                  { font-size: 22px; }

  /* ── Footer bottom row ── */
  .footer-bottom      { flex-direction: column; gap: 8px; text-align: center; }
  .footer-grid        { grid-template-columns: 1fr; }

  /* ── Newsletter section ── */
  .newsletter-inner   { flex-direction: column; gap: 24px; }

  /* ── Programs highlight bar ── */
  .program-highlights-bar { gap: 0; }

  /* ── Invest page impact cards ── */
  div[style*="grid-template-columns:repeat(3,1fr)"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {

  /* ── Header ── */
  .site-header { padding: 10px 16px; }
  .site-logo img { height: 40px; }

  /* ── Hero ── */
  .page-banner h1 { font-size: 22px; }
  .home-hero-headline { font-size: 24px; }
  .home-banner .page-banner-image { height: 180px; }

  /* ── Stats bar: single column on tiny screens ── */
  .stats-bar { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid #EBEBEB; }

  /* ── Buttons ── */
  .btn, .btn-cta { padding: 12px 20px; font-size: 14px; }

  /* ── CTA banner ── */
  .cta-banner h2 { font-size: 20px; }
  .cta-banner p  { font-size: 14px; }

  /* ── Section padding ── */
  .tint-section   { padding: 36px 16px; }
  .narrow-section { padding: 32px 16px; }
  .cta-banner     { padding: 36px 16px; }

  /* ── News cards ── */
  .news-card-image { height: 160px; }

  /* ── Events section ── */
  .events-section { padding: 40px 16px; }

  /* ── Gallery ── */
  #gallery-pagination { gap: 4px; }
  .gallery-page-btn   { padding: 6px 10px; font-size: 12px; min-width: 36px; }
}

/* ── Leadership page ──────────────────────────────────────────────────── */
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: stretch;
}
.leader-card {
  background: var(--white);
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 4px 20px rgba(27,60,143,0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.leader-photo-wrap {
  margin-bottom: 20px;
}
.leader-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--light);
  display: block;
}
.leader-initials {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 36px;
  color: var(--white);
  letter-spacing: 2px;
}
.leader-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 4px;
}
.leader-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  margin: 0 0 16px;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.leader-bio {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.7;
  text-align: left;
  flex: none;
  /* Reserves identical vertical space for every leader's bio regardless of
     its own word count, ~14 lines plus headroom, mirroring .leader-title's
     min-height pattern above. Previously this was flex:1, which let each
     bio stretch to whatever height was needed to fill out the (already
     equal-height) card, so a leader with a shorter Mission Statement quote
     below it ended up with a taller bio box and vice versa, pushing each
     card's Mission Statement blockquote to a different Y position. A fixed
     min-height instead of flex:1 makes every bio box the same height, so
     the Mission Statement blockquote directly beneath it starts at the
     same top offset on every card. The leftover space this frees up on
     shorter cards is absorbed by .leader-card-footer's margin-top:auto
     below, which pins the "About [Name]" toggle to the bottom as before.
     Scoped to .leader-card > .leader-bio (not just .leader-bio) because
     the "Show More" modal re-uses this same class for the leader's short
     bio paragraph (see $modal_html in page-leadership.php); the modal is a
     single flowing block with no mission blockquote to align beneath it,
     so it must NOT inherit this reserved space, or it leaves a large blank
     gap between the bio paragraph and the extended-bio content that
     follows it. See the reset immediately below for the modal case. */
  margin: 0 0 16px;
}
.leader-card > .leader-bio { min-height: 25.5em; }
/* Modal/"Show More" content reuses .leader-bio for the short bio paragraph
   at the top of the panel; explicitly reset to auto height there so the
   min-height reserved for on-card alignment (above) doesn't leave a large
   blank gap before the extended bio paragraphs that follow it. */
.leader-more-content .leader-bio { min-height: 0; }
/* --- Leader bio "Show More" launches a modal (see #leader-bio-modal) --- */
.leader-more-toggle {
  width: 100%;
  text-align: left;
  margin: -8px 0 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  transition: opacity 0.2s;
}
.leader-more-toggle:hover { opacity: 0.75; }
.leader-more-content {
  margin-top: 14px;
  font-size: 14px;
  color: var(--gray);
  line-height: 1.7;
  text-align: left;
}
.leader-more-content p { margin: 0 0 12px; }
.leader-more-heading {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  margin: 18px 0 8px;
}
.leader-expertise-list { margin: 0 0 8px; padding-left: 20px; }
.leader-expertise-list li { font-size: 13px; margin-bottom: 6px; }
.leader-mission {
  margin: 8px 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--cta);
  font-style: italic;
  color: var(--primary);
}
/* Featured leader card (currently Katrina, Founder & Executive Director) —
   a highlighted border/background/star badge so her profile stands out
   from the other 3 in the grid. As of v5.76 every leader's Mission
   Statement renders on-card via .leader-mission-card (see .leader-mission
   above, reused here), so that part is no longer exclusive to this card;
   this treatment is now just the border/background/badge/anchor-id. */
.leader-card-featured {
  position: relative;
  border: 2px solid var(--cta);
  background: linear-gradient(180deg, rgba(0,194,184,0.06) 0%, var(--white) 140px);
  box-shadow: 0 10px 30px rgba(0,194,184,0.20);
}
.leader-card-star {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.leader-mission-card { text-align: left; }
/* All 4 leaders' Mission Statement quotes vary in length (v5.76), which
   would otherwise leave each card's "About {Name}" toggle sitting at a
   different height — same issue and same fix as .info-card-footer on the
   Programs page: .leader-card is already a flex column, so pushing this
   wrapper's margin-top to auto pins the toggle flush to the bottom of
   each (already equal-height, via .leadership-grid's align-items:stretch)
   card regardless of how many lines the bio/mission above it wraps to. */
.leader-card-footer { margin-top: auto; width: 100%; }
.leader-card-footer .leader-more-toggle { margin-top: 0; }
@media (max-width: 1100px) {
  .leadership-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .leadership-grid { grid-template-columns: 1fr; }
}

/* ── Accessibility improvements ───────────────────────────────────────────
   WCAG 2.1 AA compliance: focus indicators, skip link, reduced motion    */

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--primary);
  color: var(--white);
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: 14px;
  z-index: 9999;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Visible focus indicators on all interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Remove default outline only when focus-visible is supported */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure nav links have adequate hit target */
.primary-menu > li > a {
  padding: 8px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Ensure sufficient color contrast on muted text */
.stat-sub,
.stat-label,
.news-card-meta,
.impact-footnote,
.event-meta {
  color: #5A6478; /* darker than var(--muted) for WCAG AA */
}

/* Ensure links inside body copy are distinguishable */
.zigzag-text a,
.leader-bio a,
/* Scoped to .news-card-excerpt specifically (v5.81), not the whole
   .news-card-body, and not a chain of :not() exclusions. Discovered while
   adding the .btn-register CTA button to news cards (see
   ne_render_card() in page-news-events.php): the old, broader selector
   here, ".news-card-body a:not(...)", was more CSS-specific than
   ".news-card-title a"'s own "text-decoration: none" rule (4 classes vs.
   1), so it was already unintentionally underlining every news card's
   TITLE too, a pre-existing bug unrelated to the button change that just
   became visible while testing it, since .news-card-title a's own
   underline:none rule was always losing that specificity fight. The
   excerpt paragraph is the only real "body copy" text on the card (never
   the heading or a CTA button), so scoping directly to it fixes the
   title and needs no :not() exclusions for .pill/.btn-register/etc. at
   all, since those never sit inside .news-card-excerpt in the first
   place. */
.news-card-excerpt a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Button minimum touch target 44x44px */
.btn, .btn-cta, .btn-outline, .btn-donate, .btn-register, .ne-tab, .gallery-page-btn {
  min-height: 44px;
}

/* ── Leadership video modal ───────────────────────────────────────────── */
.leader-video-btn {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--cta);
  border-bottom: 2px solid var(--cta);
  padding: 0 0 2px;
  transition: opacity 0.2s;
}
.leader-video-btn:hover { opacity: 0.75; }

.leader-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leader-modal[hidden] { display: none; }

.leader-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 40, 0.85);
  backdrop-filter: blur(4px);
}
.leader-modal-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 20px;
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
}
.leader-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  background: rgba(0,0,0,0.55);
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.leader-modal-close:hover { background: rgba(0,0,0,0.8); }
.leader-modal-embed {
  padding: 16px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Leadership bio modal (Show More) ─────────────────────────────────── */
.leader-bio-modal-inner {
  max-width: 880px; /* wide on desktop for comfortable reading */
  width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
}
.leader-bio-modal-body { padding: 48px 56px 40px; }
.leader-bio-modal-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 16px;
  padding-right: 32px; /* clears the close button */
}
.leader-bio-modal-body .leader-more-content { margin-top: 0; }

/* Photo (or initials) shown at the top of the modal, above the full bio */
.leader-modal-photo-wrap { text-align: center; margin-bottom: 20px; }
.leader-modal-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--light);
  display: inline-block;
}
.leader-modal-initials {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 42px;
  color: var(--white);
  letter-spacing: 2px;
}

@media (max-width: 600px) {
  .leader-bio-modal-inner { max-height: 90vh; margin: 12px; width: auto; }
  .leader-bio-modal-body { padding: 36px 24px 28px; }
  .leader-modal-photo, .leader-modal-initials { width: 100px; height: 100px; font-size: 32px; }
}

/* Hero content left-aligned */
.page-banner-content, .page-banner-content h1, .page-banner-content h2,
.page-banner-content p, .page-banner-content span { text-align: left !important; }

/* ── Partner cards ───────────────────────────────────────────────────────── */
.partner-card {
  background: var(--white);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(27,60,143,0.07);
  border: 1px solid var(--light);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.2s;
}
.partner-card:hover { box-shadow: 0 6px 24px rgba(27,60,143,0.13); }
@media (max-width: 900px) {
  section[style*="grid-template-columns:repeat(5"] > div,
  section[style*="grid-template-columns: repeat(5"] > div { grid-template-columns: repeat(3,1fr) !important; }
}
@media (max-width: 768px) {
  .partner-card { padding: 16px 12px; }
}

/* ── Partner card alignment ──────────────────────────────────────────────
   Fixed-height zones for logo, name, and description so all cards
   in a row align regardless of content length.                           */
.partner-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
/* Logo zone — fixed height so logos align to same baseline */
.partner-card img {
  height: 60px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
  margin-bottom: 12px !important;
}
/* Name — fixed min-height for 2 lines, centered */
.partner-card h3 {
  min-height: 2.8em !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
/* Description — clamp to 3 lines so cards stay uniform */
.partner-card p {
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  line-height: 1.5 !important;
  margin: 0 0 10px !important;
  text-align: center !important;
}
/* Visit link always at bottom */
.partner-card a[href] { margin-top: auto !important; }

/* ── ED Message letter page ───────────────────────────────────────────── */
.ed-letter-section {
  padding: 70px 40px 90px;
  background: var(--white);
}
.ed-letter {
  max-width: 720px;
  margin: 0 auto;
}
.ed-letter p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--gray);
  margin: 0 0 24px;
}
.ed-letter-photo-wrap {
  text-align: center;
  margin-bottom: 32px;
}
.ed-letter-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--light);
}
.ed-letter-pull {
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  border-top: 3px solid var(--cta);
  border-bottom: 3px solid var(--cta);
  padding: 20px 10px;
  margin: 36px 0 !important;
  line-height: 1.5;
}
/* "My Mission" callout, added v5.75 — a distinct highlighted box (not just
   another paragraph) so Katrina's formal mission statement reads as its
   own section within the letter, styled after the site's other bordered
   callouts (.ed-letter-pull, .leader-mission) rather than introducing a
   new visual language. */
.ed-letter-mission {
  background: var(--light);
  border-left: 4px solid var(--cta);
  border-radius: 8px;
  padding: 28px 32px;
  margin: 40px 0;
}
.ed-letter-mission p {
  font-size: 16px;
  margin: 0 0 16px;
}
.ed-letter-mission p:last-child { margin-bottom: 0; }
.ed-letter-mission-heading {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--cta);
  margin: 0 0 14px;
}
.ed-letter-signoff { margin-top: 40px; }
.ed-letter-signoff p { margin: 0 0 4px; }
.ed-letter-signature {
  font-family: 'Nunito', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  margin-top: 10px !important;
}
/* Signature now links to Katrina's Leadership page card (v5.75). Keeps
   her name's existing look by default (color: inherit) and only reveals
   a teal underline on hover/focus, so the letter doesn't look like it's
   suddenly sprouted a generic blue link in the middle of a signature. */
.ed-letter-signature-link {
  color: inherit;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, opacity 0.2s;
}
.ed-letter-signature-link:hover,
.ed-letter-signature-link:focus-visible {
  border-bottom-color: var(--cta);
  opacity: 0.85;
}
.ed-letter-title {
  font-size: 14px;
  color: #5A6478;
}
.ed-letter-tagline {
  font-style: italic;
  font-weight: 700;
  color: var(--cta);
  font-size: 17px;
  margin: 40px 0 24px !important;
}
/* Upgraded from a plain underlined text link to a filled button (v5.75)
   so it stands out as clearly as the page's other calls to action,
   instead of blending into the surrounding letter copy. */
.ed-letter-more-link {
  display: block;
  width: fit-content;
  margin: 0 auto 20px;
}
.ed-letter-more-link:hover { opacity: 0.85; }
@media (max-width: 600px) {
  .ed-letter p { font-size: 16px; }
  .ed-letter-pull { font-size: 19px; }
  .ed-letter-mission { padding: 22px 20px; }
}

/* ====================================================================
   LEGAL PAGES — Privacy Policy & Terms of Service (v5.96)
   Styles for page-privacy.php and page-terms.php. Originally shipped as
   a separate template-parts/legal-styles.php partial; merged directly
   into the stylesheet here so both templates work with no extra file.
   ==================================================================== */
.legal-section { padding: 80px 40px; }
.legal-wrap { max-width: 820px; margin: 0 auto; }

.legal-meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 32px;
}

.legal-summary {
  background: var(--light-tint);
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 32px;
}
.legal-summary h2 { margin-top: 0; }

.legal-toc {
  background: var(--white);
  border: 1px solid rgba(27, 60, 143, 0.12);
  border-radius: 12px;
  padding: 24px 32px;
  margin-bottom: 40px;
}
.legal-toc h2 {
  margin-top: 0;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--cta);
}
.legal-toc ol {
  columns: 2;
  column-gap: 32px;
  padding-left: 20px;
  margin: 0;
}
.legal-toc li { margin-bottom: 8px; break-inside: avoid; }
.legal-toc a { color: var(--gray); font-weight: 600; text-decoration: none; }
.legal-toc a:hover { color: var(--cta); }

.legal-content h2 {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--primary);
  font-size: 24px;
  margin: 48px 0 16px;
  scroll-margin-top: 100px;
}
.legal-content h3 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: var(--primary);
  font-size: 18px;
  margin: 24px 0 12px;
}
.legal-content p,
.legal-content li {
  color: var(--gray);
  font-size: 15px;
  line-height: 1.7;
}
.legal-content ul { padding-left: 22px; margin-bottom: 16px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--cta); font-weight: 700; }
.legal-content a:hover { opacity: 0.85; }
/* The VIEW PRIVACY POLICY / VIEW TERMS OF SERVICE buttons are <a class="btn
   btn-cta"> elements living inside .legal-content, so the inline-link rule
   just above (.legal-content a) was winning on specificity over the
   sitewide .btn-cta rule and overriding its text color with teal, making
   the button read as teal text on a teal background (invisible). Scoped
   override restores visible white text on these specific buttons. */
.legal-content a.btn-cta { color: var(--white); }

.legal-contact {
  background: var(--light-tint);
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 16px;
}
.legal-contact p { margin: 4px 0; }

.legal-related {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(27, 60, 143, 0.12);
  text-align: center;
}
.legal-related p { color: var(--gray); margin-bottom: 16px; }

@media (max-width: 600px) {
  .legal-section { padding: 56px 20px; }
  .legal-toc ol { columns: 1; }
}