/* Brand tokens — aligned with logo blues / greens */
:root {
  --navy: #0d1f3c;
  --green: #2d8a5e;
  --blue: #1e6fd4;
  --lime: #7bc95c;
  --bg: #2a4a72;
  --bg-alt: #ffffff;
  /* Full-page wash (body); content uses --bg-content-slab / --bg-content-wide */
  --bg-page-gradient: linear-gradient(
    160deg,
    #2a4a72 0%,
    #1e5c42 55%,
    #243560 100%
  );
  --bg-content-slab: #ffffff;
  --bg-content-wide: #f7fbf9;
  --text: #1a2744;
  --muted: #5c6b82;
  --radius: 12px;
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --gradient: linear-gradient(135deg, var(--blue) 0%, #2aa89a 45%, var(--lime) 100%);

  /* Banner: mid neutral grey gradient — reads clearly vs page #f6f8fb */
  --banner-bg: linear-gradient(135deg, #b4bcc8 0%, #9da6b5 45%, #858f9f 100%);
  --banner-border: rgba(13, 31, 60, 0.22);

  /* Banner: compact strip */
  --logo-max-width: min(300px, 56vw);
  --banner-pad-y: 0.45rem;
  --banner-pad-x: 0.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--bg-page-gradient);
  min-height: 100vh;
}

/* background-attachment: fixed removed — it positions the gradient relative to
   the viewport, making it look pale at the top of every page */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.125rem);
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
  line-height: 1.2;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Banner: neutral strip ── */
.site-banner {
  background: var(--banner-bg);
  border-bottom: 1px solid var(--banner-border);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--banner-pad-y) var(--banner-pad-x);
  position: relative;
}

.site-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 90% at 30% 0%, rgba(255, 255, 255, 0.14), transparent 50%);
  pointer-events: none;
}

.brand {
  display: block;
  width: 100%;
  max-width: var(--logo-max-width);
  line-height: 0;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.35)) drop-shadow(0 3px 14px rgba(0, 0, 0, 0.35));
}

.brand img {
  width: 100%;
  height: auto;
  display: block;
}

@keyframes logo-enter {
  from {
    opacity: 0;
    transform: translateY(0.65rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Soft “always on” lift — brightness + halo (starts after entrance) */
@keyframes logo-shine {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.25));
  }
  50% {
    filter: brightness(1.1) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .brand img {
    transform-origin: center center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    animation:
      logo-enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards,
      logo-shine 3.5s ease-in-out 0.9s infinite;
  }

  .brand:hover img,
  .brand:focus-visible img {
    transform: scale(1.05);
  }
}

/* ── Sticky nav: always visible, always thin ── */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  box-shadow: 0 3px 14px rgba(13, 31, 60, 0.28);
}

.sticky-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  justify-content: center;
  gap: 0.35rem 0.45rem;
  flex-wrap: wrap;
}

.sticky-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.sticky-nav a:hover,
.sticky-nav a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.sticky-nav a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.sticky-nav-donate {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
  font-weight: 700 !important;
}

.sticky-nav-donate:hover,
.sticky-nav-donate:focus-visible {
  background: var(--lime) !important;
  border-color: var(--lime) !important;
}

.section p {
  margin: 0 0 1rem;
}

.section p:last-child {
  margin-bottom: 0;
}

.section a {
  color: var(--green);
  font-weight: 600;
  text-underline-offset: 0.15em;
}

.section a:hover,
.section a:focus-visible {
  color: var(--navy);
  outline: none;
}

.section a.contact-fb,
.section a.contact-fb:hover,
.section a.contact-fb:focus-visible {
  color: #fff;
}

.section--intro {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Same measure for title, blurb, and buttons so nothing looks shifted left */
.section--intro .home-title,
.section--intro .lead {
  width: 100%;
  max-width: min(38rem, 100%);
  margin-inline: auto;
}

.home-title {
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.25;
  color: var(--navy);
  text-align: center;
}

.lead {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  line-height: 1.55;
  color: var(--text);
  text-align: center;
}

/* Home Flag Day sponsor embed — single column, comfortable width */
.section--alt.home-fundraisers h2,
.section--alt.home-fundraisers .fundraisers-zeffy-frame,
.section--alt.home-fundraisers .fundraisers-embed-fallback {
  max-width: min(640px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.section--alt.home-fundraisers h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.65rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0 0 0.85rem;
  text-align: center;
}

.section {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  min-height: 12rem;
}

/* Narrow content pages (About, Home intro, Privacy): soft slab on the colored page */
.section:not(.section--alt) {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  background: var(--bg-content-slab);
  border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

main {
  padding: 2.5rem 1.5rem 3rem;
}

.section--alt {
  background: var(--bg-content-wide);
  max-width: none;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.32);
}

.section--alt h1,
.section--alt h2,
.section--alt > *:not(h1):not(h2) {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section--alt h1,
.section--alt h2 {
  margin-bottom: 1rem;
}

/* Events — synced list (Graph API); upcoming highlighted */
.section--alt.events-page h1,
.section--alt.events-page .events-schedule {
  max-width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.events-schedule {
  text-align: left;
}

.events-upcoming-block {
  margin: 0 0 2.5rem;
  padding: 1.35rem 1.35rem 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(
    165deg,
    rgba(45, 138, 94, 0.09) 0%,
    rgba(13, 31, 60, 0.04) 100%
  );
  border: 1px solid rgba(45, 138, 94, 0.22);
  box-shadow: 0 8px 28px rgba(13, 31, 60, 0.08);
}

.events-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 1.85rem);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

.events-upcoming-block .events-year-title {
  margin-top: 0.25rem;
}

.events-upcoming-block .events-month:first-of-type {
  margin-top: 0.5rem;
}

.events-upcoming-block .event-item {
  padding: 1rem 0;
  border-bottom-color: rgba(13, 31, 60, 0.1);
}

.events-upcoming-block .event-item:last-child {
  padding-bottom: 0.35rem;
}

.events-upcoming-block .event-date {
  font-size: 1rem;
  color: var(--green);
}

.events-upcoming-block .event-name,
.events-upcoming-block a.event-name {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.3;
}

.events-upcoming-block .event-detail {
  font-size: 1rem;
}

.events-past-block {
  margin-top: 0.5rem;
}

.events-past-heading {
  margin-bottom: 1rem;
}

.events-past-block .event-item {
  padding: 0.65rem 0;
}

.events-past-block .event-name,
.events-past-block a.event-name {
  font-size: 1rem;
  font-weight: 600;
}

.events-sync-note--meta {
  margin: 2rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.events-year-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.25rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid rgba(45, 138, 94, 0.35);
}

.events-month {
  margin-top: 1.35rem;
}

.events-month-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green);
  margin: 0 0 0.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.event-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem 1rem;
  align-items: start;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(13, 31, 60, 0.08);
}

.event-item:last-child {
  border-bottom: none;
}

.event-date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
  line-height: 1.3;
  white-space: nowrap;
}

.event-name,
a.event-name {
  display: block;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  text-decoration: none;
}

a.event-name:hover {
  color: var(--green);
  text-decoration: underline;
}

.event-cover-link {
  display: block;
  float: right;
  margin: 0 0 0.5rem 1rem;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
}

.event-cover {
  width: 120px;
  height: 80px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  transition: opacity 0.15s ease;
}

.event-cover-link:hover .event-cover {
  opacity: 0.88;
}

@media (max-width: 480px) {
  .event-cover {
    width: 90px;
    height: 60px;
  }
}

.events-sync-note {
  margin-bottom: 0.75rem;
}

.events-sync-note code {
  font-size: 0.88em;
}

.event-detail {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Events page — Flag Day sponsor embed at the bottom (after synced schedule) */
.events-sponsor-section {
  margin-top: 2.5rem;
  padding-top: 2.25rem;
  border-top: 2px solid rgba(13, 31, 60, 0.1);
  max-width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.events-sponsor-heading {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vw, 1.5rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0 0 0.75rem;
  text-align: center;
}

/* Fundraisers — Zeffy embeds (two columns + tall frames to reduce in-iframe scrolling) */
.section--alt.fundraisers-page h1,
.section--alt.fundraisers-page .fundraisers-intro,
.section--alt.fundraisers-page .fundraisers-embeds {
  max-width: min(1320px, 100%);
}

.section--alt.fundraisers-page h1 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fundraisers-intro {
  margin: 0 0 1.5rem;
  text-align: left;
}

.fundraisers-embeds {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 1.25rem;
  margin-top: 0.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .fundraisers-embeds {
    grid-template-columns: 1fr 1fr;
  }
}

.fundraisers-zeffy-block {
  margin: 0;
  min-width: 0;
}

.fundraisers-embed-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
  margin: 0 0 0.65rem;
}

.fundraisers-zeffy-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Tall viewport-based height so most of each form fits without iframe scrollbars */
  height: min(90vh, 1050px);
  min-height: 580px;
  border-radius: var(--radius);
  border: 1px solid rgba(13, 31, 60, 0.1);
  box-shadow: 0 4px 20px rgba(13, 31, 60, 0.08);
  background: var(--bg-alt);
}

@media (max-width: 899px) {
  .fundraisers-zeffy-frame {
    height: min(88vh, 1000px);
    min-height: 540px;
  }
}

.fundraisers-zeffy-frame iframe {
  position: absolute;
  border: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fundraisers-embed-fallback {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.fundraisers-embed-fallback a {
  color: var(--green);
  font-weight: 600;
}

/* Gallery — wider grid than article text */
.section--alt.gallery-page h1,
.section--alt.gallery-page .gallery-grid {
  max-width: min(1100px, 100%);
}

.gallery-staff-embed {
  max-width: min(1100px, 100%);
  margin: 0.5rem auto 1.25rem;
  border: 1px solid rgba(13, 31, 60, 0.12);
  border-radius: var(--radius);
  background: rgba(13, 31, 60, 0.02);
  overflow: hidden;
}

.gallery-staff-embed-summary {
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-body);
  color: var(--navy);
  background: rgba(45, 138, 94, 0.08);
}

.gallery-staff-embed-summary::-webkit-details-marker {
  display: none;
}

.gallery-staff-embed-summary::before {
  content: "▸ ";
  color: var(--green);
  font-weight: 700;
}

.gallery-staff-embed[open] .gallery-staff-embed-summary::before {
  content: "▾ ";
}

.gallery-staff-embed-summary:hover {
  background: rgba(45, 138, 94, 0.12);
}

.gallery-staff-embed-summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
}

.gallery-staff-embed-body {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid rgba(13, 31, 60, 0.08);
}

.gallery-admin-iframe {
  display: block;
  width: 100%;
  min-height: 28rem;
  height: 70vh;
  max-height: 52rem;
  border: 1px solid rgba(13, 31, 60, 0.15);
  border-radius: 8px;
  background: #fff;
}

.gallery-staff-login-hint {
  margin: 0.65rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}

.gallery-staff-login-hint code {
  font-size: 0.78em;
}

.gallery-admin-unavailable {
  padding: 1rem 1.15rem;
  border-radius: 8px;
  background: rgba(176, 50, 50, 0.06);
  border: 1px solid rgba(176, 50, 50, 0.25);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}

.gallery-admin-unavailable strong {
  color: var(--navy);
}

.gallery-admin-unavailable ol {
  margin: 0.75rem 0 0.75rem 1.25rem;
  padding: 0;
}

.gallery-admin-unavailable code {
  font-size: 0.85em;
  word-break: break-word;
}

.gallery-admin-unavailable-note {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.1rem;
  margin: 0;
  padding: 0;
}

.gallery-staff-toolbar {
  max-width: min(1100px, 100%);
  margin: 0 0 0.75rem;
  display: flex;
  justify-content: flex-end;
}

.gallery-edit-start-btn {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(45, 138, 94, 0.45);
  background: rgba(45, 138, 94, 0.12);
  color: var(--navy);
  cursor: pointer;
}

.gallery-edit-start-btn:hover {
  background: rgba(45, 138, 94, 0.2);
}

.gallery-edit-start-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

body.gallery-page-edit-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(13, 31, 60, 0.28);
  pointer-events: none;
  z-index: 800;
}

.gallery-edit-snackbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: 0 max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  box-sizing: border-box;
  pointer-events: none;
}

.gallery-edit-snackbar > * {
  pointer-events: auto;
}

.gallery-snackbar-panel {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1rem 1.15rem;
  border-radius: 12px 12px 0 0;
  background: var(--bg-alt);
  color: var(--text);
  box-shadow: 0 -8px 32px rgba(13, 31, 60, 0.18);
  border: 1px solid rgba(13, 31, 60, 0.12);
  border-bottom: none;
  font-size: 0.92rem;
  line-height: 1.45;
}

.gallery-snackbar-panel p {
  margin: 0 0 0.65rem;
}

.gallery-snackbar-panel p:last-child {
  margin-bottom: 0;
}

.gallery-snackbar-msg--bad {
  color: #9a1a1a;
  font-size: 0.88rem;
}

.gallery-snackbar-msg--warn {
  background: rgba(180, 100, 0, 0.07);
  border: 1px solid rgba(180, 100, 0, 0.25);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text);
  margin: 0.35rem 0;
}

.gallery-snackbar-msg--warn code {
  font-size: 0.85em;
  word-break: break-all;
}

.gallery-snackbar-form {
  margin-top: 0.5rem;
}

.gallery-snackbar-label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
}

.gallery-snackbar-input {
  display: block;
  width: 100%;
  max-width: 20rem;
  margin-top: 0.35rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  border: 1px solid rgba(13, 31, 60, 0.2);
  border-radius: 6px;
  box-sizing: border-box;
}

.gallery-snackbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.85rem;
}

.gallery-snackbar-btn {
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(13, 31, 60, 0.2);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}

.gallery-snackbar-btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.gallery-snackbar-btn--ghost {
  background: transparent;
}

.gallery-snackbar-link {
  font-size: 0.85rem;
  color: var(--green);
  margin-left: auto;
}

.gallery-snackbar-panel--toolbar .gallery-snackbar-actions {
  margin-top: 0.35rem;
}

.gallery-item-edit-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
  padding: 0.4rem;
  background: linear-gradient(to bottom, rgba(13, 31, 60, 0.65), transparent);
  pointer-events: none;
}

.gallery-item-edit-controls > * {
  pointer-events: auto;
}

.gallery-item-hide-btn,
.gallery-item-show-btn {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  color: #fff;
}

.gallery-item-hide-btn {
  background: rgba(176, 50, 50, 0.92);
}

.gallery-item-show-btn {
  background: rgba(45, 138, 94, 0.92);
}

.gallery-item--edit-hidden .gallery-thumb-btn img {
  opacity: 0.72;
  filter: grayscale(0.35);
}

.gallery-edit-hidden-section {
  grid-column: 1 / -1;
  margin: 1.75rem 0 0.25rem;
  padding: 1.15rem 0 0;
  border-top: 2px dashed rgba(176, 50, 50, 0.35);
}

.gallery-edit-hidden-heading {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
}

.gallery-edit-hidden-hint {
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--muted);
}

.gallery-edit-hidden-hint strong {
  font-weight: 700;
  color: var(--navy);
}

.gallery-item {
  margin: 0;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: 0 4px 16px rgba(13, 31, 60, 0.1);
  border: 1px solid rgba(13, 31, 60, 0.06);
}

.gallery-item > a {
  display: block;
  line-height: 0;
  color: inherit;
}

.gallery-item > a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

button.gallery-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

button.gallery-thumb-btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

button.gallery-thumb-btn:hover img {
  opacity: 0.92;
}

/* Fullscreen lightbox */
body.gallery-lightbox-open {
  overflow: hidden;
}

.gallery-lightbox[hidden] {
  display: none !important;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  box-sizing: border-box;
}

.gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 31, 60, 0.88);
  backdrop-filter: blur(4px);
}

.gallery-lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: none;
  border-radius: 50%;
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.15rem;
}

.gallery-lightbox-prev {
  left: 0.75rem;
}

.gallery-lightbox-next {
  right: 0.75rem;
}

.gallery-lightbox-prev:disabled,
.gallery-lightbox-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.gallery-lightbox-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.25rem 3.5rem 0.75rem;
  box-sizing: border-box;
}

.gallery-lightbox-img {
  max-width: min(96vw, 1200px);
  max-height: min(72vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

.gallery-lightbox-caption {
  max-width: min(44rem, 92vw);
  margin: 1rem 0 0;
  padding: 0 1rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.gallery-lightbox-caption:empty,
.gallery-lightbox-caption[hidden] {
  display: none;
}

.gallery-lightbox-fb {
  margin-top: 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #7fd4a8;
  text-decoration: none;
}

.gallery-lightbox-fb:hover {
  text-decoration: underline;
}

.gallery-lightbox-strip {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  gap: 0.45rem;
  padding: 0.65rem 1rem 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  justify-content: safe center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent);
}

.gallery-lightbox-strip-item {
  flex: 0 0 auto;
  width: 4.25rem;
  height: 4.25rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.35);
  scroll-snap-align: center;
}

.gallery-lightbox-strip-item.is-active {
  border-color: #7fd4a8;
  box-shadow: 0 0 0 1px rgba(127, 212, 168, 0.5);
}

.gallery-lightbox-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px) {
  .gallery-lightbox-stage {
    padding: 3rem 0.5rem 0.5rem;
  }

  .gallery-lightbox-prev {
    left: 0.35rem;
  }

  .gallery-lightbox-next {
    right: 0.35rem;
  }

  .gallery-lightbox-img {
    max-height: min(58vh, 800px);
  }
}

.gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.gallery-item figcaption {
  padding: 0.5rem 0.85rem 0.65rem;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.4;
}

.site-footer {
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--navy);
}

.site-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.site-footer p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.site-footer .footer-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding-top: 0.35rem;
  max-width: 22rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.site-footer .footer-credit-label {
  font-weight: 600;
  letter-spacing: 0.03em;
}

.site-footer .footer-credit-link {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
}

.site-footer .footer-credit-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.site-footer .footer-credit-link:hover .footer-credit-logo,
.site-footer .footer-credit-link:focus-visible .footer-credit-logo {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 4px 14px rgba(0, 0, 0, 0.35);
}

.site-footer .footer-credit-logo {
  display: block;
  width: min(9.5rem, 52vw);
  height: auto;
  flex-shrink: 0;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Legal / policy prose */
.legal-page {
  text-align: left;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.legal-page h1 {
  margin-bottom: 0.5rem;
}

.legal-page h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 1.75rem 0 0.5rem;
}

.legal-page p,
.legal-page li {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text);
}

.legal-page a {
  color: var(--green);
  font-weight: 600;
}

.legal-page code {
  font-size: 0.9em;
}

.legal-meta {
  font-size: 0.92rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.legal-meta a {
  color: var(--green);
  font-weight: 600;
}

/* White tile + Facebook blue icon — readable on navy footer */
.footer-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: #fff;
  border-radius: 50%;
  color: #1877f2;
  line-height: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-fb svg {
  width: 1.35rem;
  height: 1.35rem;
}

.footer-fb:hover,
.footer-fb:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
  outline: none;
}

/* Contact page — board officers (high contrast; reads vs section--alt #f7fbf9) */
.contact-officers-card {
  position: relative;
  max-width: min(28rem, 100%);
  margin: 0 auto 1.75rem;
  padding: 0;
  border-radius: 16px;
  background: #ffffff;
  border: 2px solid #2d8a5e;
  box-shadow:
    0 24px 56px rgba(13, 31, 60, 0.2),
    0 8px 24px rgba(45, 138, 94, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  overflow: hidden;
}

.contact-officers-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, #1e6fd4 0%, #2aa89a 50%, #7bc95c 100%);
  z-index: 1;
}

.contact-officers-card .contact-officers-heading {
  position: relative;
  z-index: 0;
  margin: 5px 0 0;
  padding: 1.05rem 1.35rem 0.75rem;
  font-size: clamp(1.2rem, 2.8vw, 1.45rem);
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(145deg, #0d1f3c 0%, #152a52 45%, #1a3f6b 100%);
  border-bottom: 3px solid #7bc95c;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.contact-officers-heading::after {
  display: none;
}

.contact-officers-card .contact-officers-lead {
  margin: 0;
  padding: 0.65rem 1.35rem 1.05rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  background: #0d1f3c;
  border-bottom: 1px solid rgba(123, 201, 92, 0.35);
}

.contact-officers {
  margin: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: linear-gradient(180deg, #b8dcc8 0%, #9dceba 35%, #8fc4ae 100%);
}

.contact-officer {
  display: grid;
  grid-template-columns: minmax(7.5rem, 40%) 1fr;
  align-items: baseline;
  gap: 0.55rem 1rem;
  padding: 0.75rem 1rem 0.75rem 0.85rem;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(13, 31, 60, 0.1);
  border-left: 5px solid #2d8a5e;
  box-shadow: 0 4px 14px rgba(13, 31, 60, 0.12);
  transition:
    box-shadow 0.2s ease,
    transform 0.2s ease,
    border-left-color 0.2s ease;
}

.contact-officer:nth-child(even) {
  background: #f6fdfa;
}

.contact-officer:hover {
  border-left-color: #1e6fd4;
  box-shadow: 0 8px 22px rgba(13, 31, 60, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .contact-officer {
    transition: none;
  }

  .contact-officer:hover {
    transform: none;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .contact-officer:hover {
    transform: translateY(-2px);
  }
}

.contact-officers dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #237a52;
  line-height: 1.35;
}

.contact-officers dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: #0d1f3c;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

@media (max-width: 380px) {
  .contact-officer {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* Contact page — full Facebook button on light background */
.contact-social {
  margin-top: 0.25rem;
}

.contact-fb {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: #fff;
  background: #1877f2;
  border: 2px solid #1877f2;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.contact-fb:hover,
.contact-fb:focus-visible {
  background: #166fe5;
  border-color: #166fe5;
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}