/*
Theme Name: Riverside
Theme URI: https://niitoiyis.com/
Author: Niitoiyis
Description: Custom theme for Niitoiyis Family Support Society.
Version: 0.2.1
License: GNU General Public License v2 or later
Text Domain: riverside
*/

:root {
  --warm-cream: #FDF6EC;
  --deep-cream: #F8EDD8;
  --sand: #E8D5B5;
  --earth-brown: #8B6914;
  --deep-brown: #3D2B0F;
  --black-brown: #1A120A;
  --terracotta: #C4794A;
  --terracotta-soft: #D4956B;
  --forest: #2D4A2D;
  --sage: #6B8C6B;
  --text-dark: #2C1D0A;
  --text-muted: #6B5A42;
  --text-light: #9B8A72;
  --white: #FFFDF8;
  --overlay-dark: rgba(44, 29, 10, 0.65);
  --crisis-red: #C2402A;
  --crisis-red-hover: #A33520;
  --safe-exit-green: #2D7A3A;
  --donate-gold: #B8860B;
  --donate-gold-hover: #9A7209;
  --teal: #34b4d9;
  --teal-dark: #2890a8;
  --teal-light: #e0f2f7;
  --vibrant-pink: #e92655;
  --light-yellow: #ffee92;
  --linen-white: #f5f1df;
  --sea-green: #2fb7a5;
  --ochre: #e92655;
  --sky-grey: rgba(80, 109, 130, 0.7);

  /* Secondary-text font — phasing in for hero p tags, eyebrow labels, and (eventually) content paragraphs.
     Falls back to system mono so the page still renders if the Google Font fails to load. */
  --font-mono: 'Cascadia Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Spacing scale — use these instead of raw pixel values.
     Update here to re-tune global spacing. */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --section-pad: 72px;

  /* Heading scale — responsive via clamp(). Use these instead of ad-hoc sizes. */
  --h-hero:    clamp(2.4rem, 6vw,   3.6rem);  /* homepage hero only */
  --h-banner:  clamp(1.8rem, 4.5vw, 2.6rem);  /* internal page banner / large CTA */
  --h-section: clamp(1.8rem, 3.5vw, 2rem);    /* standard section title */
  --h-sub:     clamp(1.15rem, 2.5vw, 1.4rem); /* subsection / italic sub-headline */
  --h3-size:   1.2rem;                         /* standard h3 (subsection title) */
  --h-card:    1.1rem;                         /* card / small headings */
  --h-eyebrow: 1rem;  /* uppercase label above section titles — standardized 1rem desktop & mobile */
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--text-dark);
  background: var(--warm-cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

/* Accessibility utility: visually hidden but available to screen readers + crawlers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ===== SAFE EXIT (button + tooltip + first-visit banner + privacy tips modal) ===== */
.safe-exit-wrapper {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  transition: bottom 0.4s ease;
}
.safe-exit {
  background: var(--safe-exit-green); color: #fff;
  padding: 14px 22px; border-radius: 100px;
  font-size: 0.82rem; font-weight: 700; text-decoration: none;
  letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: flex; align-items: center; gap: 8px; min-height: 48px;
  cursor: pointer;
}
.safe-exit:hover { background: #225D2C; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.4); }
.safe-exit svg { width: 16px; height: 16px; }
.safe-exit-shortcut {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em;
  background: rgba(255,255,255,0.2); padding: 2px 6px; border-radius: 4px;
}
body.nav-open .safe-exit-wrapper { opacity: 0; pointer-events: none; }
@media (max-width: 639.98px) {
  .safe-exit-wrapper { bottom: var(--space-sm); right: var(--space-sm); }
  .safe-exit-shortcut { display: none; }
}

/* Keep the Safe Chat launcher's resting bottom aligned with the Safe Exit pill.
   The plugin defaults to 22px; Safe Exit rests at 24px desktop / 8px mobile.
   The launcher reads this var across its (closed) shadow boundary; footer.js still
   overrides it inline while the safety banner lifts both controls together. */
:root { --nsc-launch-bottom: 24px; --nsc-launch-side: 24px; }
@media (max-width: 639.98px) {
  :root { --nsc-launch-bottom: var(--space-sm); --nsc-launch-side: var(--space-sm); }
}

/* Tooltip — appears on hover above the safe-exit button */
.safe-exit-tooltip {
  position: absolute; bottom: calc(100% + 10px); right: 0;
  width: 240px;
  background: var(--white); border: 1px solid var(--sand); border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.safe-exit-wrapper:hover .safe-exit-tooltip,
.safe-exit-wrapper:focus-within .safe-exit-tooltip {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.safe-exit-tooltip p {
  font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); margin: 0;
}
.safe-exit-tooltip p strong { color: var(--text-dark); }
@media (max-width: 480px) {
  .safe-exit-tooltip { display: none; }
}

/* First-visit safety banner — slides up from bottom */
.safety-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9998;
  background: var(--white);
  border-top: 1px solid var(--sand);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  transform: translateY(100%);
}
.safety-banner.visible { animation: safetyBannerIn 0.5s ease forwards; }
.safety-banner.dismissed { animation: safetyBannerOut 0.35s ease forwards; pointer-events: none; }
@keyframes safetyBannerIn  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes safetyBannerOut { from { transform: translateY(0); }   to { transform: translateY(100%); } }
.safety-banner-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 20px 24px;
  display: flex; align-items: flex-start; justify-content: center; gap: 16px;
}
.safety-banner-alert { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.safety-banner-shield {
  flex-shrink: 0; width: 36px; height: 36px;
  background: rgba(45, 122, 58, 0.12);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.safety-banner-shield svg { width: 18px; height: 18px; color: var(--safe-exit-green); }
/* Cap content at 720px on desktop so it doesn't stretch the full 1100px row;
   shrink-to-fit on mobile (basis 720 + shrink 1). Combined with justify-content: center
   on the parent, the shield+content group sits centered on wide screens. */
.safety-banner-content { flex: 0 1 900px; min-width: 0; }
.safety-banner-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; font-weight: 700;
  color: var(--text-dark); margin-bottom: 4px;
  letter-spacing: 0.01em;
}
.safety-banner-content p {
  font-size: 0.875rem; line-height: 1.55;
  color: var(--text-muted); margin-bottom: 8px;
}
.safety-banner-content p:last-of-type { margin-bottom: 12px; }
.safety-banner-content p strong { color: var(--text-dark); font-weight: 700; }
/* Adaptive action verb — "Tap" on touch input, "Click" on mouse input.
   Default state (no media match) shows "Click" so the more common laptop reading wins fallback. */
.action-touch { display: none; }
.action-mouse { display: inline; }
@media (hover: none) and (pointer: coarse), (max-width: 600px) {
  .action-touch { display: inline; }
  .action-mouse { display: none; }
}
.safety-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-safety-tips, .btn-dismiss-banner {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; font-weight: 600;
  padding: 8px 16px; border-radius: 100px;
  cursor: pointer; transition: all 0.2s ease;
}
.btn-safety-tips {
  border: 1.5px solid var(--safe-exit-green);
  background: #fff; color: var(--safe-exit-green);
}
.btn-safety-tips:hover { background: var(--safe-exit-green); color: #fff; }
.btn-dismiss-banner {
  border: 1.5px solid var(--safe-exit-green);
  background: var(--safe-exit-green); color: #fff;
}
.btn-dismiss-banner:hover { background: #225D2C; border-color: #225D2C; color: #fff; }
.safety-banner-close {
  flex-shrink: 0;
  background: none; border: none; padding: 4px;
  color: var(--text-muted); cursor: pointer;
  transition: color 0.2s ease;
  align-self: flex-start;
}
.safety-banner-close:hover { color: var(--text-dark); }
.safety-banner-close svg { width: 18px; height: 18px; display: block; }
@media (max-width: 600px) {
  .safety-banner-inner { padding: 16px var(--space-md); gap: 12px; }
  .safety-banner-content h3 { font-size: 1.1rem; }
  .safety-banner-content p { font-size: 0.82rem; }
  .safety-banner-actions { flex-direction: column; align-items: stretch; }
  .btn-safety-tips, .btn-dismiss-banner { text-align: center; }
}

/* Privacy tips modal */
.safety-modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(26, 18, 10, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  justify-content: center; align-items: center;
  padding: 20px;
}
.safety-modal-overlay.active { display: flex; }
body.safety-modal-open { overflow: hidden; }
.safety-modal {
  background: var(--white);
  border-radius: 14px;
  max-width: 560px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: safetyModalIn 0.3s ease;
}
@keyframes safetyModalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.safety-modal-header {
  padding: 24px 24px 0;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.safety-modal-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 700;
  color: var(--text-dark); margin: 0;
}
.safety-modal-close {
  background: none; border: none; padding: 4px;
  color: var(--text-muted); cursor: pointer;
  transition: color 0.2s ease;
}
.safety-modal-close:hover { color: var(--text-dark); }
.safety-modal-close svg { width: 20px; height: 20px; display: block; }
.safety-modal-body { padding: 12px 24px 24px; }
@media (max-width: 600px) {
  /* On mobile, numbered tips create a ~42px left indent (number column + gap).
     Bump right padding so paragraph text isn't crammed against the right edge —
     gives the modal a more balanced left/right feel on small screens. */
  .safety-modal-body { padding-right: 32px; }
  .safety-modal-header { padding-right: 32px; }
}
.safety-modal-body .intro {
  font-size: 0.92rem; line-height: 1.65;
  color: var(--text-muted); margin-bottom: 16px;
}
.safety-tip {
  display: flex; gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--sand);
}
.safety-tip-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: rgba(196, 121, 74, 0.12);
  color: var(--terracotta);
  font-weight: 700; font-size: 0.82rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.safety-tip-content h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem; font-weight: 700;
  color: var(--text-dark); margin-bottom: 4px;
}
.safety-tip-content p {
  font-size: 0.85rem; line-height: 1.6;
  color: var(--text-muted); margin: 0;
}
.safety-tip-content p + p { margin-top: 6px; }
.safety-tip-content code {
  background: var(--deep-cream);
  padding: 2px 6px; border-radius: 4px;
  font-size: 0.78rem;
  font-family: 'Cascadia Mono', SFMono-Regular, Consolas, monospace;
  color: var(--text-dark);
}
.safety-tip-content .browser-block { display: none; }
.safety-tip-content .browser-block.match { display: block; }
.safety-tip-content .browser-block.match + .browser-block.match { margin-top: 8px; }
.safety-tip-content.show-all .browser-block { display: block; }
.safety-tip-content.show-all .browser-block + .browser-block { margin-top: 8px; }
.safety-tip-show-all {
  background: none; border: none; padding: 0;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem; font-weight: 600;
  color: var(--terracotta); cursor: pointer;
  margin-top: 8px;
  text-decoration: underline; text-underline-offset: 2px;
}
.safety-tip-show-all:hover { color: #A35E32; }
.safety-tip-content.show-all .safety-tip-show-all { display: none; }

/* ===== BACK TO TOP =====
   Desktop: a discreet tab pinned to the MIDDLE of the right edge (top:50%), so it
   never crowds the bottom-corner FABs (Safe Exit bottom-right, Chat bottom-left) or
   the bottom safety banner. z-index sits just below those safety controls. It slides
   in from off-screen once the page is scrolled ~1 screen. Mobile: this floating tab is
   hidden in favour of a "Back to top" bar at the top of the footer (see below). */
.back-to-top {
  position: fixed; top: 50%; right: 0; z-index: 9997;
  transform: translateY(-50%) translateX(100%);
  height: 52px; padding: 0 11px;
  background: var(--deep-brown); color: var(--warm-cream);
  border: 2px solid var(--white); border-right: none;
  border-radius: 10px 0 0 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: -2px 2px 14px rgba(0,0,0,0.22);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.back-to-top.visible { opacity: 0.95; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.back-to-top:hover { opacity: 1; background: var(--terracotta); }
.back-to-top svg { width: 20px; height: 20px; flex-shrink: 0; }
/* "Top" label — collapsed to zero width; slides out to the left on hover (combo button). */
.back-to-top-label {
  max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: max-width 0.3s ease, opacity 0.25s ease, margin-left 0.3s ease;
}
.back-to-top:hover .back-to-top-label { max-width: 60px; margin-left: 8px; opacity: 1; }
/* Never let it sit over the mobile nav or the safety modal */
body.nav-open .back-to-top,
body.safety-modal-open .back-to-top { opacity: 0 !important; pointer-events: none !important; }

/* Mobile footer "Back to top" bar — hidden on desktop, shown at <=767px (see media query). */
.footer-back-to-top { display: none; }


/* ===== HEADER ===== */
/* Default: always-cream header for interior pages */
header.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: all 0.35s ease;
  background: var(--linen-white);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 16px rgba(61, 43, 15, 0.2);
}
/* Homepage: start transparent, transition to cream on scroll */
.home header.site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.home header.site-header.scrolled {
  background: var(--linen-white);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 16px rgba(61, 43, 15, 0.2);
}
.header-inner {
  max-width: 1200px; margin: 0 auto; padding: var(--space-md);
  display: flex; align-items: center;
}
/* Logo: dark by default (interior), white on homepage until scrolled */
.logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--deep-brown); transition: color 0.35s; margin-right: auto; }
.home .logo { color: var(--white); }
.home header.site-header.scrolled .logo { color: var(--deep-brown); }
.logo-mark { width: 60px; height: 60px; flex-shrink: 0; position: relative; margin: -10px 0; }
.logo-mark img { width: 100%; height: auto; display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
/* Show color logo by default (interior pages); swap to white on homepage until scrolled */
.logo-mark .logo-white { display: none; }
.home .logo-mark .logo-color { display: none; }
.home .logo-mark .logo-white { display: block; }
.home header.site-header.scrolled .logo-mark .logo-color { display: block; }
.home header.site-header.scrolled .logo-mark .logo-white { display: none; }
/* Logo wordmark — placeholder Manrope until brand-licensed Natom Pro files are dropped in */
.logo-text { font-family: 'Neue Haas Grotesk Text Pro', 'Manrope', 'DM Sans', sans-serif; font-size: 1.8rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1; }
.logo-sub { display: block; font-family: 'Source Sans Pro', 'DM Sans', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
@media (max-width: 600px) {
  .logo-text { font-size: 1.3rem; letter-spacing: 0.16em; }
  .logo-sub { font-size: 0.55rem; letter-spacing: 0.1em; }
  /* Homepage only: hide wordmark on initial load over the hero, fade in once header bar appears (scroll) or nav opens */
  body.home .logo-text,
  body.home .logo-sub { opacity: 0; transition: opacity 0.3s ease; }
  body.home header.site-header.scrolled .logo-text,
  body.home header.site-header.scrolled .logo-sub,
  body.home.nav-open .logo-text,
  body.home.nav-open .logo-sub { opacity: 1; }
}
.hero-logo { width: clamp(180px, 30vw, 280px); height: auto; margin: 0 auto 24px; opacity: 0.97; filter: drop-shadow(0 2px 20px rgba(0,0,0,0.3)); }

/* Nav links: dark by default (interior), white on homepage until scrolled */
.nav-desktop { display: none; align-items: center; gap: var(--space-sm); }
.nav-desktop a { color: var(--text-dark); text-decoration: none; font-size: 0.85rem; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: all 0.2s; }
.nav-desktop a:hover { background: rgba(61, 43, 15, 0.06); }
.nav-desktop a.active { color: var(--vibrant-pink); font-weight: 600; }
.home .nav-desktop a { color: rgba(255,255,255,0.9); }
.home .nav-desktop a:hover { background: rgba(255,255,255,0.15); }
.home header.site-header.scrolled .nav-desktop a { color: var(--text-dark); }
.home header.site-header.scrolled .nav-desktop a:hover { background: rgba(61, 43, 15, 0.06); }
.home header.site-header.scrolled .nav-desktop a.active { color: var(--vibrant-pink); }
/* Donate button: tacked on to the right of the nav, hidden on mobile (present in mobile nav) */
.nav-donate {
  display: none; align-items: center; text-decoration: none;
  background: transparent; color: var(--teal-dark) !important; font-weight: 600; font-size: 0.85rem;
  padding: 8px 20px; margin-left: 16px;
  border: 1.5px solid var(--teal); border-radius: 8px;
  transition: all 0.35s ease;
}
.nav-donate:hover { background: var(--teal); color: var(--white) !important; border-color: var(--teal); }
.home .nav-donate { color: var(--white) !important; border-color: rgba(255,255,255,0.7); }
.home .nav-donate:hover { background: rgba(255,255,255,0.15); border-color: var(--white); }
.home header.site-header.scrolled .nav-donate { color: var(--teal-dark) !important; border-color: var(--teal); }
.home header.site-header.scrolled .nav-donate:hover { background: var(--teal); color: var(--white) !important; border-color: var(--teal); }
@media (min-width: 1040px) { .nav-donate { display: inline-flex; } }

/* Nav toggle: dark by default (interior), white on homepage until scrolled */
.nav-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001; }
.nav-toggle span { width: 24px; height: 2px; background: var(--deep-brown); border-radius: 2px; transition: all 0.3s; }
.home .nav-toggle span { background: var(--white); }
.home header.site-header.scrolled .nav-toggle span { background: var(--deep-brown); }
/* X-state math: bars are 2px tall with 5px gap, so each outer bar's center sits 7px from the middle bar's center.
   translate FIRST (in CSS source order) so it moves the bar in original-axis space, then rotate around the bar's own center. */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu open: mirror homepage treatment on every page so the header blends into the brown overlay */
body.nav-open header.site-header,
body.nav-open header.site-header.scrolled {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
body.nav-open .logo,
body.nav-open header.site-header.scrolled .logo { color: var(--white); }
body.nav-open .logo-mark .logo-color,
body.nav-open header.site-header.scrolled .logo-mark .logo-color { display: none; }
body.nav-open .logo-mark .logo-white,
body.nav-open header.site-header.scrolled .logo-mark .logo-white { display: block; }
body.nav-open .nav-toggle span,
body.nav-open header.site-header.scrolled .nav-toggle span { background: var(--white); }

.nav-mobile {
  position: fixed; inset: 0; background: var(--deep-brown); z-index: 999;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.nav-mobile.open { opacity: 1; pointer-events: auto; }
.nav-mobile a { color: var(--warm-cream); text-decoration: none; font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; padding: 12px 24px; border-radius: 8px; transition: background 0.2s; }
.nav-mobile a:hover { background: rgba(255,255,255,0.08); }

/* ===== HERO ===== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 120px 24px 80px; overflow: hidden;
  background: var(--deep-brown);
}
.hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44, 29, 10, 0.25) 0%, rgba(44, 29, 10, 0.10) 40%, rgba(44, 29, 10, 0.55) 85%, rgba(44, 29, 10, 0.85) 100%),
              url('/wp-content/uploads/2026/04/hero-background.jpg') center/cover no-repeat;
  background-color: var(--deep-brown);
}
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero-content h1 { color: var(--warm-cream); font-size: var(--h-hero); font-weight: 700; margin-bottom: 8px; letter-spacing: 0.04em; }
/* Homepage hero NIITOIYIS wordmark — match header/footer logo styling (Manrope placeholder for Natom Pro) */
.homepage-hero .hero-wordmark { font-family: 'Neue Haas Grotesk Text Pro', 'Manrope', 'DM Sans', sans-serif !important; font-weight: 600 !important; letter-spacing: 0.1em !important; font-size: clamp(2.4rem, 6vw, 3rem) !important; line-height: 1.2 !important; }
.homepage-hero-logo img { width: 320px !important; max-width: 100% !important; height: auto !important; }
@media (max-width: 600px) {
  .homepage-hero-logo img { width: 220px !important; }
}
.homepage-hero .hero-wordmark + p { letter-spacing: 0.13em !important; color: #FDF6EC !important; }
@media (max-width: 600px) {
  .homepage-hero .hero-wordmark { font-size: 2.5rem !important; }
  .homepage-hero .hero-wordmark + p { font-size: 1rem !important; letter-spacing: 0.1em !important; }
}
.hero-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--sand); font-size: clamp(1rem, 2.5vw, 1.3rem); margin-bottom: 12px; letter-spacing: 0.04em; }
.hero-meaning { color: rgba(253, 246, 236, 0.65); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin-bottom: var(--space-xl); }
@media (max-width: 639.98px) {
  /* !important needed to override Gutenberg cover block's inline padding */
  .homepage-hero { padding-top: var(--section-pad) !important; }
  .hero-logo { width: 144px; }
}

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 100px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: all 0.25s ease; border: none; cursor: pointer; }

/* Gutenberg button defaults — all buttons get pill shape and consistent sizing via theme.json.
   These classes provide color variants editors can pick from the block toolbar. */
.wp-block-button__link { transition: all 0.25s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); opacity: 0.9; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  border: 1.5px solid currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,0.1) !important;
}
.btn-crisis { background: var(--crisis-red); color: var(--white); }
.btn-crisis:hover { background: var(--crisis-red-hover); transform: translateY(-1px); }
.btn-donate { background: var(--donate-gold); color: var(--white); }
.btn-donate:hover { background: var(--donate-gold-hover); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--warm-cream); border: 1.5px solid rgba(253, 246, 236, 0.4); }
.btn-outline:hover { border-color: var(--teal); background: rgba(52, 180, 217, 0.12); color: var(--teal); }
.btn-primary { background: var(--terracotta); color: var(--white); }
.btn-primary:hover { background: #B06A3E; transform: translateY(-1px); }
.btn-outline-dark { background: transparent; color: var(--warm-cream); border: 1.5px solid rgba(253, 246, 236, 0.4); }
.btn-outline-dark:hover { background: rgba(255,255,255,0.1); border-color: var(--warm-cream); color: var(--warm-cream); }

.crisis-strip { position: relative; z-index: 2; background: var(--crisis-red); color: var(--white); text-align: center; padding: 14px 24px; font-size: 0.9rem; font-weight: 500; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; }
.crisis-strip-block { gap: var(--space-sm) var(--space-lg); }
.crisis-strip a { color: var(--white); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.crisis-strip .divider { width: 1px; height: 16px; background: rgba(255,255,255,0.35); }

/* Featured section images (eagle on home, bears on about): soft shadow for depth */
.about-eagle-image,
.about-bear-image { box-shadow: 0 20px 50px -20px rgba(61, 43, 15, 0.25), 0 8px 20px -8px rgba(61, 43, 15, 0.12); }

/* Board card hover lift */
.board-card { transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 2px 10px rgba(61, 43, 15, 0.04); }
.board-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(61, 43, 15, 0.08); }

/* Sacred teachings pill row */
.sacred-teachings-row { gap: var(--space-sm); }

/* ===== SECTIONS ===== */
.section { padding: var(--section-pad) 24px; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-label { font-size: var(--h-eyebrow); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vibrant-pink); margin-bottom: var(--space-sm); }
/* Older pages embedded eyebrows with inline color:#C4794A — match the standard 1rem size */
p[style*="color:#C4794A"] { font-size: 1rem !important; }
.section-title { font-size: var(--h-section); font-weight: 700; color: var(--deep-brown); margin-bottom: var(--space-md); }
.section-body { color: var(--text-muted); font-size: 0.95rem; line-height: 1.75; }
.section-body p + p { margin-top: 16px; }

/* Body-paragraph rhythm: 16px between adjacent content paragraphs.
   Excludes cards (has-background) and flex layouts (contact bars, crisis strip).
   Structural components (teaching tiles, board bios) set their own margins. */
.wp-block-group:not(.has-background):not(.is-layout-flex) > p + p,
.wp-block-column > p + p { margin-top: var(--space-md); }

.about-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: start; }

.values-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.value-pill { background: var(--deep-cream); color: var(--earth-brown); padding: 8px 18px; border-radius: 100px; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; border: 1px solid var(--sand); }

/* Home page content area: blocks render full-width and self-style */
.home-blocks > * { margin: 0; }
.home-blocks p:not([class]) { max-width: 900px; margin: 0 auto 16px; padding: 0 24px; color: var(--text-muted); line-height: 1.8; }
.home-blocks h2:not([class]), .home-blocks h3:not([class]) { max-width: 900px; margin: 32px auto 12px; padding: 0 24px; color: var(--deep-brown); }
/* Block editor preview styles */
.riverside-services-grid-editor { display: block; padding: 24px; background: var(--deep-cream); border-radius: 12px; }
.riverside-services-grid-editor .section-label { color: var(--vibrant-pink); }
.riverside-services-grid-editor .section-title { color: var(--deep-brown); }
.riverside-services-grid-editor .riverside-services-grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; }
.riverside-service-card-editor { background: var(--white); border-radius: 16px; padding: 20px; border: 1px dashed var(--sand); }
.riverside-service-card-editor .service-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--deep-cream); display: flex; align-items: center; justify-content: center; color: var(--terracotta); font-size: 1.4rem; margin-bottom: 12px; }
.riverside-service-card-editor .card-link { color: var(--terracotta); font-size: 0.82rem; font-weight: 600; display: inline-block; margin-top: 12px; }

.services-section { background: var(--deep-cream); }
.services-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
.service-card { background: var(--white); border-radius: 16px; padding: 28px 24px; border: 1px solid rgba(232, 213, 181, 0.6); transition: all 0.3s ease; text-decoration: none; color: inherit; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--terracotta); opacity: 0; transition: opacity 0.3s; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(61, 43, 15, 0.08); }
.service-card:hover::before { opacity: 1; }
.service-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--deep-cream); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--terracotta); }
.service-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--deep-brown); margin-bottom: 8px; }
.service-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; flex: 1; }
.service-card .card-link { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-md); color: var(--terracotta); font-size: 0.82rem; font-weight: 600; }
.service-card .card-link svg { width: 14px; height: 14px; transition: transform 0.2s; }
.service-card:hover .card-link svg { transform: translateX(3px); }

.events-section { background: var(--white); }
.events-preview { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-xl); }
.event-card { display: flex; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--warm-cream); border-radius: 8px; border: 1px solid rgba(232, 213, 181, 0.5); text-decoration: none; color: inherit; transition: all 0.3s; align-items: center; position: relative; }
.event-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(61, 43, 15, 0.06); }
.event-date-col { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.event-date { width: 56px; height: 60px; background: var(--terracotta); color: var(--white); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.event-date-month { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.event-date-day { font-size: 1.4rem; font-weight: 700; }
.event-date-time { font-size: 0.6rem; font-weight: 600; color: var(--text-muted); text-align: center; white-space: nowrap; }
.event-info h4 { font-size: 1rem; font-weight: 600; font-family: 'DM Sans', sans-serif; margin-bottom: var(--space-xs); color: var(--deep-brown); }
.event-info p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.event-tags { position: absolute; top: var(--space-md); right: var(--space-md); display: flex; gap: var(--space-sm); }
.event-tag { background: var(--deep-cream); color: var(--earth-brown); font-size: 0.68rem; font-weight: 600; padding: var(--space-xs) var(--space-sm); border-radius: 100px; letter-spacing: 0.04em; text-transform: uppercase; }
.event-tag-free { background: rgba(45, 122, 58, 0.12); color: var(--safe-exit-green); }
.event-tag-tickets { background: rgba(194, 64, 42, 0.1); color: var(--crisis-red); }
.btn-secondary { display: inline-flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); padding: 12px var(--space-lg); background: transparent; color: var(--terracotta); border: 1.5px solid var(--terracotta); border-radius: 100px; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.btn-secondary:hover { background: var(--teal); color: var(--white); border-color: var(--teal); }

footer.site-footer { background: var(--black-brown); color: rgba(253, 246, 236, 0.65); padding: 56px 24px 32px; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; }
.footer-brand h3 { font-family: 'Neue Haas Grotesk Text Pro', 'Manrope', 'DM Sans', sans-serif; font-weight: 600; color: var(--warm-cream); font-size: 2rem; margin-bottom: 0; text-transform: uppercase; letter-spacing: 0.13rem; }
.footer-brand p:not(.footer-subtitle) { font-size: 0.85rem; line-height: 1.6; max-width: 320px; }
.footer-links h4 { color: var(--ochre); font-family: 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.footer-contact-label { display: block; color: rgba(253, 246, 236, 0.85); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; margin-top: 10px; }
.footer-links a { display: block; color: rgba(253, 246, 236, 0.6); text-decoration: none; font-size: 0.88rem; padding: 4px 0; transition: color 0.2s; }
.footer-links a:hover { color: var(--warm-cream); }
.footer-inner .footer-links:last-child { text-align: right; }

.footer-bottom { max-width: 1100px; margin: 32px auto 0; padding-top: 24px; border-top: 2px solid var(--teal); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.78rem; }
.footer-bottom-left { display: flex; align-items: center; gap: 12px; }
.footer-bottom .footer-socials { display: flex; gap: 10px; }
.footer-subtitle { font-family: 'Source Sans Pro', 'DM Sans', sans-serif; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04rem; text-transform: uppercase; color: var(--ochre); margin-bottom: 10px; }
.footer-socials { display: flex; gap: 12px; margin-top: 16px; }
.footer-socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(253, 246, 236, 0.08); display: flex; align-items: center; justify-content: center; color: rgba(253, 246, 236, 0.6); text-decoration: none; transition: all 0.2s; font-size: 0.85rem; }
.footer-socials a:hover { background: var(--teal); color: var(--white); }
.footer-credit { color: rgba(253, 246, 236, 0.4); text-decoration: none; font-size: 0.78rem; transition: color 0.2s; }
.footer-credit:hover { color: var(--warm-cream); }

/* Back-to-top: below 768px, drop the floating right-edge tab and use a footer bar instead
   (keeps the bottom corners clear for Safe Exit on small screens). */
@media (max-width: 767px) {
  .back-to-top { display: none !important; }
  .footer-back-to-top {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 0 0 12px; padding: 14px 16px;
    background: transparent; border: none;
    border-bottom: 1px solid rgba(253,246,236,0.15);
    color: rgba(253,246,236,0.80);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; cursor: pointer;
    transition: color 0.2s ease;
  }
  .footer-back-to-top svg { width: 16px; height: 16px; }
  .footer-back-to-top:active,
  .footer-back-to-top:hover { color: var(--teal); }
}

@media (max-width: 639.98px) {
  .footer-inner { text-align: center; }
  .footer-brand p { margin-left: auto; margin-right: auto; }
  .footer-socials { justify-content: center; }
  .footer-inner .footer-links:last-child { text-align: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  /* Mobile stack order: Contact → Services → About → Brand */
  .footer-inner .footer-brand { order: 4; }
  .footer-inner .footer-links:nth-of-type(1) { order: 2; } /* Services */
  .footer-inner .footer-links:nth-of-type(2) { order: 3; } /* About */
  .footer-inner .footer-links:nth-of-type(3) { order: 1; } /* Contact */
}

@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
@media (min-width: 900px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
  .about-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
  .services-grid { grid-template-columns: repeat(4, 1fr); }
  .teachings-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  body.js-ready .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
  body.js-ready .fade-up.visible { opacity: 1; transform: translateY(0); }
  .hero-content { animation: heroIn 0.9s ease forwards; }
  @keyframes heroIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
header.no-transition { transition: none !important; }

/* ==========================================================================
   About page (and generic interior page) styles
   Appended for the BB-rendered About page. Rules below are scoped to
   the new classes so they don't conflict with the homepage.
   ========================================================================== */

/* Generic interior-page wrapper: clear the fixed header */
.riverside-page { padding-top: 0; margin-bottom: 0; }
.riverside-page > *:last-child { margin-bottom: 0 !important; }


/* --- Page hero (smaller hero used on interior pages) --- */
.page-hero {
  padding: 140px 24px 60px;
  background: var(--deep-brown);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44,29,10,0.6) 0%, rgba(44,29,10,0.8) 100%),
              url('/wp-content/uploads/2026/04/hero-background.jpg') center/cover no-repeat;
  background-color: var(--deep-brown);
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero h1 {
  color: var(--warm-cream);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--h-banner);
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}
.page-hero p {
  font-family: var(--font-mono);
  color: var(--sand);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}
@media (max-width: 600px) {
  .page-hero,
  .page-hero-block,
  .event-single-hero { padding-top: 110px !important; padding-bottom: 30px !important; }
  /* Heroes that had breadcrumbs (now hidden on mobile) get extra bottom padding so total height matches breadcrumb-less heroes */
  .page-hero:has(.page-breadcrumb),
  .page-hero-block:has(.page-breadcrumb),
  .event-single-hero { padding-bottom: 64px !important; }
}

/* --- Vision / Mission / Values cards --- */
/* --- Mission / Vision / Values — stacked rows, full-width --- */
.vmv-list { margin-top: var(--space-xl); }
.vmv-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(61, 43, 15, 0.1);
}
.vmv-list > .vmv-row:first-child { border-top: 0; padding-top: 0; }
.vmv-list > .vmv-row:last-child { padding-bottom: 0; }
.vmv-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-weight: 700;
  color: var(--terracotta);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin: 0;
}
.vmv-row > p {
  color: var(--text-muted);
  font-size: 1rem; line-height: 1.75;
  margin: 0;
}
@media (min-width: 768px) {
  .vmv-row {
    grid-template-columns: 100px 1fr;
    gap: var(--space-xl);
    align-items: baseline;
  }
  /* Force every non-title child into the content column so multi-paragraph
     values (e.g. Values has 2 <p> blocks) stack vertically below each other
     instead of wrapping under the title. */
  .vmv-row > :not(.vmv-title) { grid-column: 2; }
}

/* Compact the "Our Foundation" (Vision/Mission/Values) section on About Us */
.wp-block-group.has-background:has(.vmv-list) { padding-top: 48px !important; padding-bottom: 48px !important; }
.vmv-list { margin-top: var(--space-lg); }
.vmv-row { padding: var(--space-md) 0; }
.vmv-row > p { font-size: 0.94rem; line-height: 1.6; }
@media (min-width: 768px) { .vmv-row { gap: var(--space-lg); } }

/* --- Seven Sacred Teachings — tiled grid --- */
/* --- Seven Sacred Teachings — radial wheel --- */
.teachings-wheel {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1;
  margin: var(--space-xl) auto 0;
}
.teachings-wheel-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--deep-brown);
  border: 3px solid var(--terracotta);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
  z-index: 2;
}
.teachings-wheel-center .sw-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--terracotta-soft);
  margin: 0 0 var(--space-xs);
}
.teachings-wheel-center .sw-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--warm-cream);
  margin: 0 0 var(--space-sm);
}
.teachings-wheel-center .sw-brief {
  font-size: 0.78rem; line-height: 1.5;
  color: var(--sand); margin: 0;
}
.teaching-spoke {
  position: absolute;
  --r: 42%;
  top: calc(50% - var(--r) * cos(var(--angle)));
  left: calc(50% + var(--r) * sin(var(--angle)));
  transform: translate(-50%, -50%);
  width: 150px; text-align: center;
  background: var(--white);
  border: 1px solid var(--sand);
  border-top: 3px solid var(--sand);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-xs);
  transition: border-top-color 0.2s, transform 0.25s;
  z-index: 1;
}
.teaching-spoke:hover {
  border-top-color: var(--terracotta);
  transform: translate(-50%, -50%) scale(1.05);
}
.teaching-spoke .teaching-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-weight: 400;
  color: var(--terracotta); opacity: 0.5;
  line-height: 1; margin: 0 0 4px;
}
.teaching-spoke .teaching-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-weight: 700;
  color: var(--deep-brown);
  letter-spacing: 0.08em; margin: 0 0 4px;
}
.teaching-spoke .teaching-essence {
  font-size: 0.72rem; line-height: 1.4;
  color: var(--text-muted); margin: 0;
}
@media (max-width: 767px) {
  .teachings-wheel {
    aspect-ratio: auto;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  .teachings-wheel-center,
  .teaching-spoke {
    position: static;
    top: auto; left: auto;
    transform: none;
    width: 100%;
    aspect-ratio: auto;
  }
  .teachings-wheel-center { border-radius: 8px; padding: var(--space-lg); }
  .teaching-spoke:hover { transform: none; border-top-color: var(--terracotta); }
}

/* ==========================================================================
   TEACHING CARD (.teaching-card)
   --------------------------------------------------------------------------
   The site's THIRD card pattern (alongside Photo Card Summary + Detail).

   Used exclusively in the About Us "Seven Sacred Teachings" section to
   represent each Indigenous teaching (Love, Truth, Humility, etc).
   Structurally distinct from photo-card blocks: no image, just a Roman
   numeral + Cormorant Garamond heading + body description.

   Markup is a wp:group with className "teaching-card", wrapping:
     .teaching-card-head  →  .teaching-number (Roman numeral, faded terracotta)
                          →  .teaching-name (Cormorant 1.4rem)
     .teaching-desc       →  body copy

   VARIANT: add "sacred-circle" class on a teaching-card for the 8th card —
   inverts the colors (deep brown background, cream text) and hides the
   Roman numeral, since the Sacred Circle holds the other seven teachings
   rather than being numbered itself.

   Container: wrap teaching-cards in a wp:group with className "teachings-grid"
   for the 1 → 2 → 4 column responsive grid.
   ========================================================================== */
.teachings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.teaching-card {
  background: var(--white);
  border-top: 3px solid var(--sand);
  border-radius: 8px;
  padding: var(--space-lg) var(--space-md);
  text-align: left;
}
.teaching-card-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.teaching-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; font-weight: 400;
  color: var(--terracotta); opacity: 0.4;
  line-height: 1; margin: 0;
  flex-shrink: 0;
}
.teaching-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 700;
  color: var(--deep-brown);
  letter-spacing: 0.08em;
  margin: 0;
}
.teaching-desc {
  font-size: 0.9rem; line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}
.teaching-card.sacred-circle {
  background: var(--deep-brown);
  border-top-color: var(--terracotta);
}
.teaching-card.sacred-circle .teaching-name { color: var(--warm-cream); letter-spacing: 0.1em; }
.teaching-card.sacred-circle .teaching-desc { color: var(--sand); }
.teaching-card.sacred-circle .teaching-number { display: none; }

/* --- Variant A: Medallion Cards --- */
.teachings-medallion {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.teachings-medallion .tm-card {
  background: var(--white);
  border-radius: 12px;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  text-align: center;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.teachings-medallion .tm-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.tm-medallion {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--linen-white);
  border: 3px solid var(--terracotta);
  margin: 0 auto var(--space-sm);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.tm-medallion img {
  width: 75%; height: 75%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* Teachings medallions are now wp:image blocks (swappable via media library), so the
   img sits inside a <figure class="wp-block-image">. Make the figure fill + center the
   circle so the img's 75% sizing above still resolves against it. */
.tm-medallion .wp-block-image {
  margin: 0;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.tm-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 700;
  color: var(--deep-brown);
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}
.tm-spirit {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terracotta);
  margin: 0 0 var(--space-sm);
}
.tm-desc {
  font-size: 0.88rem; line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
}
.teachings-medallion .tm-card.tm-sacred-circle {
  background: var(--deep-brown);
  border-color: var(--terracotta);
}
.teachings-medallion .tm-card.tm-sacred-circle .tm-name { color: var(--warm-cream); }
.teachings-medallion .tm-card.tm-sacred-circle .tm-desc { color: var(--sand); }
.teachings-medallion .tm-card.tm-sacred-circle .tm-spirit { color: var(--sand); opacity: 0.7; }
.teachings-medallion .tm-card.tm-sacred-circle .tm-medallion {
  border-color: var(--terracotta);
  background: rgba(255,255,255,0.1);
}

@media (min-width: 640px) {
  .teachings-medallion { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .teachings-medallion { grid-template-columns: repeat(4, 1fr); }
}

/* --- Two-column list (desktop only) --- */
.two-col-list { column-count: 2; column-gap: 24px; }
@media (max-width: 781px) {
  .two-col-list { column-count: 1; }
}

/* --- Testimonials --- */
.testimonial-featured {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid #E5E5E5;
  padding: 28px 28px 24px;
  margin-bottom: 24px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.testimonial-quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem;
  line-height: 0.8;
  color: var(--terracotta);
  opacity: 0.3;
  flex-shrink: 0;
}
.testimonial-quote {
  font-size: 1.05rem;
  line-height: 1.8;
  font-style: italic;
  color: var(--deep-brown);
  margin: 0 0 20px;
  border: none;
  padding: 0;
}
.testimonial-body { flex: 1; min-width: 0; }
.testimonial-attribution {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--terracotta);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #E8D5B5;
}
.testimonial-card-v2 {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid #E5E5E5;
  padding: 28px 24px 24px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.testimonial-quote-mark-sm {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--terracotta);
  opacity: 0.3;
  margin-bottom: -8px;
}
.testimonial-card-v2 .testimonial-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.testimonial-card-v2 .testimonial-quote {
  font-size: 0.92rem;
  line-height: 1.75;
  text-align: left;
  flex: 1;
}
.testimonial-card-v2 .testimonial-attribution {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #E8D5B5;
}

/* --- History / Timeline --- */
.history-section { background: var(--deep-cream); }
.timeline {
  position: relative;
  margin-top: 36px;
  padding-left: 28px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 6px; top: 0; bottom: 0;
  width: 2px;
  background: var(--sand);
}
.timeline-item {
  position: relative;
  margin-bottom: 32px;
  padding-left: 20px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -25px; top: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--terracotta);
  border: 2px solid var(--deep-cream);
}
.timeline-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--terracotta);
  margin-bottom: 4px;
}
.timeline-item h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--deep-brown);
  margin-bottom: 6px;
  font-family: 'Cormorant Garamond', serif;
}
.timeline-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* --- Naming highlight --- */
.naming-section {
  background: var(--deep-brown);
  color: var(--warm-cream);
  padding: var(--section-pad) 24px;
  text-align: center;
}
.naming-section .section-label { color: var(--terracotta-soft, #D4956B); }
.naming-section h2 {
  color: var(--warm-cream);
  font-size: var(--h-banner);
  margin-bottom: 12px;
  font-family: 'Cormorant Garamond', serif;
  display: inline-block;
  border-bottom: 3px solid var(--teal);
  padding-bottom: 6px;
}
.naming-section .meaning {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: var(--h-sub);
  color: var(--sand);
  margin-bottom: 24px;
}
.naming-section p {
  color: var(--sand);
  font-size: 0.95rem;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.8;
  opacity: 0.85;
}

/* --- Board of Directors cards --- */
.board-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 36px;
}
.board-card {
  background: var(--white);
  border-radius: 16px;
  padding: 28px 24px;
  border: 1px solid rgba(232,213,181,0.6);
  transition: all 0.3s;
}
.board-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(61,43,15,0.06);
}
.board-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.board-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--deep-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--terracotta);
  flex-shrink: 0;
  border: 2px solid var(--sand);
}
.board-card-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-brown);
  margin-bottom: 2px;
  font-family: 'Cormorant Garamond', serif;
}
.board-role {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.board-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
}
.board-card .board-detail {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--text-light);
  font-style: italic;
}

/* --- Responsive --- */
@media (min-width: 640px) {
  .teachings-grid { grid-template-columns: repeat(2, 1fr); }
  .board-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Events page styles
   ========================================================================== */

/* Tab navigation */
.events-sticky-header {
  position: sticky; top: 77px; z-index: 100;
  background: var(--warm-cream); position: sticky;
}
.events-sticky-header.stuck::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 8px; transform: translateY(100%);
  background: linear-gradient(to bottom, rgba(61, 43, 15, 0.08), transparent);
  pointer-events: none;
}
.tab-nav {
  display: flex; gap: 4px; margin-bottom: 0;
  border-bottom: 1px solid var(--sand);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab-btn {
  background: none; border: none; padding: 12px 20px;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.2s;
  white-space: nowrap; flex-shrink: 0;
}
.tab-btn:hover { color: var(--text-dark); }
.tab-btn.active { color: var(--terracotta); font-weight: 600; border-bottom-color: var(--terracotta); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Category filter chips — hidden until categories are wired to data */
.filter-bar[hidden] { display: none !important; }
.filter-bar {
  display: flex;
  flex-wrap: wrap; gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-top: var(--space-md); padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--sand);
}
.filter-chip {
  padding: 6px 16px; border-radius: 100px;
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--sand);
  background: transparent; color: var(--text-muted);
  transition: all 0.2s; text-transform: capitalize;
}
.filter-chip:hover { border-color: var(--sea-green); color: var(--text-dark); }
.filter-chip.active { background: var(--sea-green); border-color: var(--sea-green); color: var(--white); }
.event-card.filter-hidden { display: none !important; }

/* Mobile category dropdown — replaces chip pills < 600px */
.filter-select {
  display: none;
  width: 100%;
  padding: 12px 44px 12px 16px;
  border: 1px solid var(--sand);
  border-radius: 100px;
  background: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B5A42' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
@media (max-width: 600px) {
  .filter-bar { margin-left: -24px; margin-right: -24px; padding: var(--space-sm) var(--space-md); justify-content: flex-end; }
  .filter-bar .filter-chip { display: none; }
  .filter-bar .filter-select { display: block; width: auto; max-width: 60%; }
  .tab-nav { margin-left: -24px; margin-right: -24px; padding: 0; }
  .tab-nav .tab-btn { flex: 1 1 0; padding-left: 0; padding-right: 0; text-align: center; }
}


/* Event cards (events page — slightly different from homepage) */
.events-list { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.events-empty[hidden] { display: none; }
.events-list .event-card {
  display: flex; gap: var(--space-md); padding: var(--space-lg);
  min-height: 130px;
  background: var(--white); border-radius: 8px;
  border: 1px solid rgba(232, 213, 181, 0.5);
  text-decoration: none; color: inherit; transition: all 0.3s;
  align-items: flex-start; position: relative;
}
.events-list .event-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(61, 43, 15, 0.06); }
.event-card-thumb {
  flex-shrink: 0;
  width: 80px; height: 80px;
  border-radius: 8px;
  overflow: hidden;
}
.event-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.events-list .event-date {
  flex-shrink: 0; width: 60px; height: 68px;
  background: var(--terracotta); color: var(--white); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.events-list .event-date-year { font-size: 0.58rem; opacity: 0.7; margin-top: var(--space-xs); }
.events-list .event-info { flex: 1; min-width: 0; }
.events-list .event-info h3 {
  font-size: 1.15rem; font-weight: 700;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: var(--space-xs); color: var(--deep-brown);
}
.events-list .event-info p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }
.event-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-sm);
  font-size: 0.78rem; color: var(--text-light);
}
.event-meta span { display: inline-flex; align-items: center; gap: var(--space-xs); }
.event-meta svg { width: 13px; height: 13px; min-width: 13px; max-width: 13px; opacity: 0.7; display: inline-block; vertical-align: middle; }
.event-tags-row {
  position: absolute; top: var(--space-md); right: var(--space-md);
  display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end;
}
.events-list .event-tag {
  background: var(--deep-cream); color: var(--earth-brown);
  font-size: 0.68rem; font-weight: 600; padding: var(--space-xs) var(--space-sm);
  border-radius: 100px; letter-spacing: 0.04em; text-transform: uppercase;
}
.event-tag.teal { background: var(--teal-light); color: var(--teal-dark); }
.event-tag-free { background: rgba(45, 122, 58, 0.12) !important; color: var(--safe-exit-green) !important; }
.event-tag-tickets { background: rgba(194, 64, 42, 0.06) !important; color: var(--text-light) !important; font-weight: 500 !important; }

/* Featured event */
/* Past events */
.event-card.past { opacity: 0.75; background: var(--warm-cream); }
.event-card.past .event-date { background: var(--text-light); }
.event-card.past:hover { opacity: 1; }

/* Photo gallery */
.gallery-section { background: var(--deep-cream); padding: var(--section-pad) var(--space-lg); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 8px; margin-top: 32px; }
.gallery-item {
  border-radius: 8px; overflow: hidden; cursor: pointer;
  position: relative; transition: transform 0.3s;
}
.gallery-item:hover { transform: scale(1.02); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-item:first-child { grid-row: span 2; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.92); display: none;
  align-items: center; justify-content: center;
  padding: 24px; cursor: pointer;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 8px; object-fit: contain; }
.lightbox-close {
  position: absolute; top: var(--space-lg); right: var(--space-lg);
  color: white; font-size: 2rem; background: none;
  border: none; cursor: pointer; opacity: 0.7; transition: opacity 0.2s;
}
.lightbox-close:hover { opacity: 1; }
/* Combined gallery: collection filter chips + lightbox nav */
.gallery-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px; }
.gallery-item { width: 100%; height: 100%; background: none; border: none; padding: 0; margin: 0; font: inherit; -webkit-appearance: none; appearance: none; }
.gallery-item.filter-hidden { display: none; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,0.85); color: #2C1D0A; font-size: 1.9rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-nav:hover { background: #fff; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.5rem; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* Featured "wall" layout — 1 double-tall feature + 6 fillers; extra photos stay in the
   DOM (hidden here) so the lightbox can still page through the whole album. */
.gallery-grid--wall .gallery-item--feature { grid-row: span 2; }
.gallery-grid--wall .gallery-item:nth-child(n+8) { display: none; }

/* Lightbox thumbnail strip */
.lightbox.open { flex-direction: column; gap: 12px; }
.lightbox img { max-height: 74vh; }
.lightbox-strip {
  display: flex; gap: 6px; max-width: 92vw; overflow-x: auto;
  padding: 4px 4px 2px; scrollbar-width: thin;
}
.lightbox-thumb {
  flex: 0 0 auto; width: 58px; height: 42px; padding: 0;
  border: 2px solid transparent; border-radius: 4px; background: none;
  cursor: pointer; opacity: 0.5; transition: opacity 0.15s, border-color 0.15s;
}
.lightbox-thumb img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 2px; display: block; }
.lightbox-thumb:hover { opacity: 0.85; }
.lightbox-thumb.active { opacity: 1; border-color: #fff; }
@media (max-width: 640px) { .lightbox-thumb { width: 46px; height: 34px; } }

/* Center-focus 3-up carousel (photo-gallery "carousel" layout).
   Prev / current / next sit side by side; the center is in focus, neighbours peek and dim.
   Fixed frames with object-fit: contain so nothing is cropped or distorted. */
.gallery-section--carousel .pcar { position: relative; margin-top: 36px; }
.gallery-section--carousel .pcar-viewport { position: relative; width: 100%; max-width: 960px; height: 440px; margin: 0 auto; overflow: hidden; }
.gallery-section--carousel .pcar-track { position: absolute; inset: 0; }
.gallery-section--carousel .pcar-slide {
  position: absolute; top: 50%; left: 50%;
  height: 360px; width: auto; max-width: min(86vw, 560px);
  aspect-ratio: 4 / 3; /* per-slide inline aspect-ratio overrides this so the card hugs the photo */
  border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  opacity: 0; visibility: hidden; z-index: 1; cursor: pointer;
  transform: translate(-50%, -50%) scale(0.6);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.gallery-section--carousel .pcar-slide img { width: 100%; height: 100%; object-fit: cover; background: var(--deep-cream, #f3e7d3); display: block; }
.gallery-section--carousel .pcar-slide.is-center { transform: translate(-50%, -50%) scale(1);   opacity: 1;    visibility: visible; z-index: 3; cursor: zoom-in; }
.gallery-section--carousel .pcar-slide.is-prev   { transform: translate(calc(-50% - 330px), -50%) scale(0.78); opacity: 0.5; visibility: visible; z-index: 2; }
.gallery-section--carousel .pcar-slide.is-next   { transform: translate(calc(-50% + 330px), -50%) scale(0.78); opacity: 0.5; visibility: visible; z-index: 2; }
.gallery-section--carousel .pcar-slide.is-prev:hover,
.gallery-section--carousel .pcar-slide.is-next:hover { opacity: 0.82; }
.gallery-section--carousel .pcar-slide.is-hidden { transform: translate(-50%, -50%) scale(0.6); opacity: 0; visibility: hidden; }

.gallery-section--carousel .pcar-arrow {
  position: absolute; top: 220px; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,0.9); color: #2C1D0A; font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15); transition: background 0.2s;
}
.gallery-section--carousel .pcar-prev { left: 8px; }
.gallery-section--carousel .pcar-next { right: 8px; }
.gallery-section--carousel .pcar-arrow:hover { background: #fff; }
.gallery-section--carousel .pcar-dots { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 22px; }
.gallery-section--carousel .pcar-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(60,43,15,0.25); transition: background 0.2s, transform 0.2s; }
.gallery-section--carousel .pcar-dot:hover { background: rgba(60,43,15,0.5); }
.gallery-section--carousel .pcar-dot.active { background: var(--terracotta, #C4794A); transform: scale(1.3); }

@media (max-width: 640px) {
  .gallery-section--carousel .pcar-viewport { height: 350px; }
  .gallery-section--carousel .pcar-slide { height: 260px; width: auto; max-width: 82vw; }
  .gallery-section--carousel .pcar-slide.is-prev { transform: translate(calc(-50% - 68vw), -50%) scale(0.8); opacity: 0.38; }
  .gallery-section--carousel .pcar-slide.is-next { transform: translate(calc(-50% + 68vw), -50%) scale(0.8); opacity: 0.38; }
  .gallery-section--carousel .pcar-arrow { top: 175px; width: 38px; height: 38px; font-size: 1.5rem; }
}

/* Events page responsive */
@media (max-width: 639px) {
  .events-list .event-card {
    flex-wrap: wrap;
    padding: var(--space-md);
    gap: var(--space-md);
  }
  .event-card-thumb {
    width: 60px; height: 60px;
  }
  .events-list .event-card .event-info h3 {
    font-size: 1rem;
    padding-right: 0;
  }
  .events-list .event-card .event-info p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .event-tags-row {
    position: static;
    width: 100%;
    justify-content: flex-start;
  }
  .event-meta { font-size: 0.72rem; }
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Contact page styles
   ========================================================================== */

/* Crisis banner */
.crisis-banner { background: var(--crisis-red); color: var(--white); padding: 32px 24px; text-align: center; }
.crisis-banner-inner { max-width: 800px; margin: 0 auto; }
.crisis-banner h2 { color: var(--white); font-size: var(--h-section); margin-bottom: 8px; }
.crisis-banner p { font-size: 0.95rem; opacity: 0.9; margin-bottom: 20px; }
.emergency-911-banner {
  margin: 12px auto 24px;
  padding: 10px 24px;
  background: rgba(194, 64, 42, 0.12);
  border: 1px solid rgba(194, 64, 42, 0.25);
  border-radius: 8px;
  color: var(--crisis-red);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  max-width: 360px;
}
.emergency-911-banner strong { font-weight: 800; }

.crisis-contacts { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.crisis-contact-item {
  background: rgba(255,255,255,0.15); border-radius: 8px; padding: var(--space-md) var(--space-lg);
  text-decoration: none; color: var(--white); transition: all 0.2s;
  display: flex; align-items: center; gap: 10px; min-width: 200px; justify-content: center;
}
.crisis-contact-item:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); }
.crisis-contact-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; font-weight: 600; }
.crisis-contact-number { font-size: 1.1rem; font-weight: 700; }
.crisis-contact-item-block { background: rgba(255,255,255,0.15) !important; transition: background 0.2s, transform 0.2s; text-align: left; }
/* JS-enhanced tap-to-call/text — set on each .crisis-contact-item-block at runtime */
.crisis-contact-item-block.is-tappable { cursor: pointer; -webkit-tap-highlight-color: rgba(255,255,255,0.2); }
.crisis-contact-item-block.is-tappable:hover { transform: translateY(-1px); }
.crisis-contact-item-block.is-tappable:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
.crisis-contact-item-block.is-tappable:active { transform: translateY(0); }
/* Let columns shrink to card content so blockGap is the real visual gap */
.crisis-banner .wp-block-columns { justify-content: center; }
.crisis-banner .wp-block-column { flex-grow: 0; flex-basis: auto; }
.crisis-contact-item-block:hover { background: rgba(255,255,255,0.25) !important; }
.crisis-contact-item-block .wp-block-group { gap: 0 !important; }
.crisis-contact-item-block.wp-block-group { gap: var(--space-lg) !important; align-items: center !important; }
.crisis-contact-item-block > .wp-block-group-is-layout-flex { gap: var(--space-sm) !important; align-items: flex-start !important; }
.crisis-contact-item-block p { margin: 0 !important; line-height: 1.3 !important; }
.crisis-contact-item-block .wp-block-group:not(.crisis-contact-item-block) { padding: 0 !important; }
@media (max-width: 639.98px) {
  .crisis-contact-item-block { text-align: center; width: 260px; margin-left: auto; margin-right: auto; }
  .crisis-contact-item-block.wp-block-group { justify-content: center !important; }
  .crisis-contact-item-block > .wp-block-group-is-layout-flex { align-items: center !important; }
}

/* Contact cards */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-xl); }
.contact-card {
  background: var(--white); border-radius: 8px; padding: var(--space-lg);
  min-height: 280px;
  border: 1px solid rgba(232, 213, 181, 0.6);
}
.contact-card-icon {
  width: 48px; height: 48px; border-radius: 8px; background: var(--deep-cream);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); color: var(--terracotta);
}
.contact-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--deep-brown); margin-bottom: var(--space-md); }
.contact-card p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.65; margin-bottom: var(--space-xs); }
.contact-card a { color: var(--terracotta); text-decoration: none; font-weight: 600; transition: color 0.2s; }
.contact-card a:hover { color: #A35E32; }
.contact-detail { display: flex; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-sm); font-size: 0.88rem; color: var(--text-muted); }
.contact-detail svg { flex-shrink: 0; margin-top: 3px; color: var(--terracotta); opacity: 0.7; }
.contact-detail strong { color: var(--text-dark); }

/* Map */
.map-section { background: var(--deep-cream); padding: var(--section-pad) 24px; }
@media (max-width: 639.98px) {
  /* !important needed to override the inline height on #contact-map */
  #contact-map { height: 300px !important; }
  /* !important needed to override the inline min-height on these cover images */
  .about-eagle-image,
  .about-bear-image { min-height: 320px !important; }
  /* Hide the "|" divider paragraphs (2nd, 4th children) so phones stack cleanly */
  .crisis-strip-block > p:nth-child(even),
  .service-contact-bar > p:nth-child(even) { display: none; }
}
.map-container { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(61,43,15,0.1); margin-top: 28px; border: 1px solid rgba(232,213,181,0.6); }
.map-container iframe, .map-container > div:first-child { width: 100%; border: 0; display: block; }
.map-intro {
  font-size: 0.95rem; line-height: 1.65; color: var(--text-muted);
  margin-top: 12px;
}
.map-intro a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 2px; }
.map-intro a:hover { color: #A35E32; }
.map-legend {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  font-size: 0.85rem; color: var(--text-muted);
}
.map-legend li { display: flex; align-items: center; gap: 8px; }
.map-legend-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.7rem; font-weight: 700;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.map-legend-dot--primary { background: #34B7D4; }
.map-legend-dot--alt { background: #2FB7A5; }
.map-note { background: var(--white); padding: 16px 20px; display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--text-muted); }
.map-note svg { flex-shrink: 0; margin-top: 1px; color: var(--terracotta); }

/* Contact form */
.form-section { background: var(--white); }
.form-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-top: 28px; }
.contact-form { margin: 0; }
@media (min-width: 900px) {
  .form-layout { grid-template-columns: 2fr 1fr; align-items: start; }
}
.contact-info {
  background: var(--warm-cream);
  border: 1px solid var(--sand);
  border-radius: 12px;
  padding: var(--space-lg);
  margin-top: 28px;
}
.contact-info h3 {
  color: var(--deep-brown);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--sand);
  font-family: 'Cormorant Garamond', serif;
}
.contact-info-item { margin-bottom: var(--space-md); }
.contact-info-item:last-child { margin-bottom: 0; }
.contact-info-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.contact-info-item a {
  color: var(--terracotta);
  font-weight: 500;
  text-decoration: none;
  font-size: 0.92rem;
}
.contact-info-item a:hover { color: #A35E32; text-decoration: underline; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: var(--space-sm); }
.form-group label { font-size: 0.82rem; font-weight: 600; color: var(--text-dark); }
.form-group input, .form-group textarea {
  padding: 12px var(--space-md); border: 1px solid var(--sand); border-radius: 8px;
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; background: var(--warm-cream);
  color: var(--text-dark); transition: border-color 0.2s; outline: none;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--terracotta); }
.form-group textarea { resize: vertical; min-height: 140px; }
.form-optional { font-size: 0.78rem; font-weight: 400; color: var(--text-light); margin-left: 4px; }
.phone-input { display: flex; align-items: stretch; }
.phone-input .phone-prefix {
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--space-sm); border: 1px solid var(--sand); border-right: 0;
  border-radius: 8px 0 0 8px; background: var(--deep-cream);
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600;
  color: var(--text-muted); flex: 0 0 auto;
}
.phone-input input {
  flex: 1; min-width: 0; border-radius: 0 8px 8px 0;
}
.form-submit {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px;
  border-radius: 100px; background: #2FB7A5; color: var(--white);
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.25s;
}
.form-submit:hover { background: #258D80; transform: translateY(-1px); }

/* Land acknowledgement */
.land-ack { background: var(--sky-grey); color: var(--sand); padding: 48px 24px; text-align: center; }
.land-ack-inner { max-width: 900px; margin: 0 auto; }
.land-ack h3 { color: var(--warm-cream); font-size: 1.3rem; margin-bottom: 14px; }
.land-ack p { font-size: 0.88rem; line-height: 1.8; opacity: 0.8; }

.map-transit-card {
  background: var(--white);
  border-radius: 8px;
  border: 1px solid rgba(232, 213, 181, 0.6);
  padding: var(--space-md);
  margin-top: var(--space-lg);
}
.map-transit-card h3 { font-size: 1rem; font-weight: 700; color: var(--deep-brown); margin-bottom: var(--space-sm); }
.ctrain-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }

/* Contact responsive */
@media (min-width: 640px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .form-row.form-row-email-phone { grid-template-columns: 2fr 1fr; }
  .ctrain-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Single Event Page
   ========================================================================== */
.event-single-hero {
  background:
    linear-gradient(rgba(44, 29, 10, 0.7), rgba(44, 29, 10, 0.7)),
    url('/wp-content/uploads/2026/04/hero-background.jpg') center / cover no-repeat,
    var(--deep-brown);
  display: flex;
  align-items: flex-end;
  padding: 120px var(--space-lg) var(--space-xl) !important;
  min-height: 270px !important;
}
.event-featured-image {
  margin: 0 0 var(--space-xl);
}
.event-featured-image img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.event-single-cta {
  background: var(--deep-brown);
  color: var(--warm-cream);
  padding: var(--section-pad) var(--space-lg);
  text-align: center;
}
.event-single-cta-inner { max-width: 600px; margin: 0 auto; }
.event-single-cta h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--h-section);
  font-weight: 700;
  color: var(--warm-cream);
  margin-bottom: var(--space-md);
}
.event-single-cta p {
  color: var(--sand);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}
.event-single-cta-buttons {
  display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center;
}
.event-single-cta-buttons a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px var(--space-lg);
  border: 1.5px solid var(--warm-cream);
  border-radius: 100px;
  color: var(--warm-cream);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
}
.event-single-cta-buttons svg { flex-shrink: 0; }

/* Gutenberg button with inline icon */
.wp-block-button.has-icon .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--space-sm); }
.wp-block-button.has-icon svg { flex-shrink: 0; }

/* Social icons via ::before mask (currentColor so they follow button text/hover; SVG was inline in the button and stripped by the editor) */
.wp-block-button.has-icon a[href*="facebook.com"]::before,
.wp-block-button.has-icon a[href*="linkedin.com"]::before {
  content: ''; width: 16px; height: 16px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.wp-block-button.has-icon a[href*="facebook.com"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M22%2012c0-5.52-4.48-10-10-10S2%206.48%202%2012c0%204.84%203.44%208.87%208%209.8V15H8v-3h2V9.5C10%207.57%2011.57%206%2013.5%206H16v3h-2c-.55%200-1%20.45-1%201v2h3v3h-3v6.95c5.05-.5%209-4.76%209-9.95z%22%20%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M22%2012c0-5.52-4.48-10-10-10S2%206.48%202%2012c0%204.84%203.44%208.87%208%209.8V15H8v-3h2V9.5C10%207.57%2011.57%206%2013.5%206H16v3h-2c-.55%200-1%20.45-1%201v2h3v3h-3v6.95c5.05-.5%209-4.76%209-9.95z%22%20%2F%3E%3C%2Fsvg%3E"); }
.wp-block-button.has-icon a[href*="linkedin.com"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M20.5%202h-17A1.5%201.5%200%20002%203.5v17A1.5%201.5%200%20003.5%2022h17a1.5%201.5%200%20001.5-1.5v-17A1.5%201.5%200%200020.5%202zM8%2019H5v-9h3zM6.5%208.25A1.75%201.75%200%20118.3%206.5a1.78%201.78%200%2001-1.8%201.75zM19%2019h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74%201.74%200%200013%2014.19a.66.66%200%20000%20.14V19h-3v-9h2.9v1.3a3.11%203.11%200%20012.7-1.4c1.55%200%203.36.86%203.36%203.66z%22%20%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M20.5%202h-17A1.5%201.5%200%20002%203.5v17A1.5%201.5%200%20003.5%2022h17a1.5%201.5%200%20001.5-1.5v-17A1.5%201.5%200%200020.5%202zM8%2019H5v-9h3zM6.5%208.25A1.75%201.75%200%20118.3%206.5a1.78%201.78%200%2001-1.8%201.75zM19%2019h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74%201.74%200%200013%2014.19a.66.66%200%20000%20.14V19h-3v-9h2.9v1.3a3.11%203.11%200%20012.7-1.4c1.55%200%203.36.86%203.36%203.66z%22%20%2F%3E%3C%2Fsvg%3E"); }
.event-single-cta-buttons a:hover {
  background: var(--warm-cream);
  color: var(--deep-brown);
}
.event-single-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}
.event-breadcrumb,
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  margin-bottom: 16px;
}
.event-breadcrumb a,
.page-breadcrumb a {
  color: var(--sand);
  text-decoration: none;
  transition: color 0.2s;
}
.event-breadcrumb a:hover,
.page-breadcrumb a:hover { color: var(--warm-cream); }
.event-breadcrumb-sep,
.page-breadcrumb-sep { color: var(--text-light); opacity: 0.5; }
.event-breadcrumb > span:last-child,
.page-breadcrumb > span:last-child {
  color: var(--warm-cream);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}
@media (max-width: 600px) {
  .event-breadcrumb,
  .page-breadcrumb { display: none; }
}
.page-hero-block.is-position-bottom-left .wp-block-cover__inner-container {
  align-self: stretch;
}
/* Soften the cover overlay dim from Gutenberg's default 0.6 (dimRatio:60) to 0.55 */
.page-hero-block > .wp-block-cover__background.has-background-dim { opacity: 0.55; }
.page-hero-block h1 svg, .event-single-hero h1 svg { flex-shrink: 0; }
.page-hero-block h1:has(svg), .event-single-hero h1:has(svg) { display: flex; align-items: center; justify-content: center; }
.event-single-hero h1.event-single-title:has(svg) { justify-content: flex-start; }
/* Hero title icons via ::before — keeps the <h1> a clean editable heading (an inline
   SVG in a heading gets stripped by the editor). Per-page variant class on the cover. */
.page-hero-icon h1 { display: flex; align-items: center; justify-content: center; }
.page-hero-icon h1::before {
  content: '';
  width: 36px; height: 36px;
  margin-right: 12px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.page-hero-icon-shelter h1::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FDF6EC%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l9-7%209%207v11a2%202%200%2001-2%202H5a2%202%200%2001-2-2z%22%2F%3E%3Cpolyline%20points%3D%229%2022%209%2012%2015%2012%2015%2022%22%2F%3E%3C%2Fsvg%3E"); }
.page-hero-icon-gethelp h1::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FDF6EC%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209l9-7%209%207v11a2%202%200%2001-2%202H5a2%202%200%2001-2-2z%22%2F%3E%3Cpolyline%20points%3D%229%2022%209%2012%2015%2012%2015%2022%22%2F%3E%3C%2Fsvg%3E"); }
.page-hero-icon-fwc h1::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23FDF6EC%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.84%204.61a5.5%205.5%200%2000-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%2000-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%20000-7.78z%22%2F%3E%3C%2Fsvg%3E"); }
.page-hero-icon-events h1::before { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%2229.5%2030%20141%20140%22%20fill%3D%22%23FDF6EC%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M170.5%2073.581c0-11.647-4.569-22.596-12.866-30.831-17.127-17-44.992-16.999-62.119%200L50.623%2087.306a3.959%203.959%200%200%200-1.172%202.809v54.463l-18.779%2018.64a3.954%203.954%200%200%200-.001%205.618A4.001%204.001%200%200%200%2033.5%20170a4.004%204.004%200%200%200%202.828-1.163l18.78-18.64h54.873c1.062%200%202.081-.42%202.832-1.167l26.152-26.035c.314-.233.592-.508.825-.822l17.843-17.763c8.298-8.234%2012.867-19.183%2012.867-30.829zm-62.179%2068.672H63.112l18.598-18.46h45.154l-18.543%2018.46zm43.653-43.457-17.129%2017.053h-45.13l39.722-39.426a3.954%203.954%200%200%200%20.001-5.618%204.02%204.02%200%200%200-5.657-.001l-66.328%2065.835V91.761l43.72-43.393c14.008-13.905%2036.801-13.905%2050.807%200%206.786%206.734%2010.522%2015.688%2010.522%2025.212%200%209.523-3.736%2018.477-10.522%2025.211l-.006.005z%22%2F%3E%3C%2Fsvg%3E"); }
.page-hero-icon-volunteer h1::before { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%2249.5%2023%20101%20154%22%20fill%3D%22%23FDF6EC%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M100%20123.909c13.194%200%2023.929-10.726%2023.929-23.909V46.909C123.929%2033.726%20113.194%2023%20100%2023S76.071%2033.726%2076.071%2046.909V100c0%2013.184%2010.735%2023.909%2023.929%2023.909zm-15.929-77C84.071%2038.137%2091.217%2031%20100%2031s15.929%207.137%2015.929%2015.909V100c0%208.772-7.146%2015.909-15.929%2015.909S84.071%20108.772%2084.071%20100V46.909zM150.5%2086.727V100c0%2026.474-20.519%2048.236-46.5%2050.282V169h22.571a4%204%200%200%201%200%208H73.429a4%204%200%200%201%200-8H96v-18.718C70.019%20148.236%2049.5%20126.474%2049.5%20100V86.727a4%204%200%200%201%208%200V100c0%2023.41%2019.065%2042.455%2042.5%2042.455S142.5%20123.41%20142.5%20100V86.727a4%204%200%200%201%208%200z%22%2F%3E%3C%2Fsvg%3E"); }
.page-hero-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-soft);
  margin-bottom: var(--space-sm);
}
.event-single-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta-soft);
  margin-bottom: var(--space-md);
}
.event-single-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--h-banner);
  font-weight: 700;
  color: var(--warm-cream);
  display: flex;
  align-items: center;
  line-height: 1.15;
  margin-bottom: 16px;
}
.event-single-past-badge {
  display: inline-block;
  background: var(--text-light);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-xs) var(--space-md);
  border-radius: 100px;
  margin-bottom: var(--space-md);
}
.event-single-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.event-single-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(253, 246, 236, 0.15);
  color: var(--warm-cream);
  font-size: 0.82rem;
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  border-radius: 100px;
}
.event-single-pill svg { opacity: 0.75; flex-shrink: 0; }

/* Two-column layout */
.event-single-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--section-pad);
}
.event-single-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-dark);
}
.event-single-content h2,
.event-single-content h3,
.event-single-content h4 {
  font-family: 'Cormorant Garamond', serif;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.event-single-content p { margin-bottom: 1em; color: var(--text-muted); font-size: 0.9rem; }
.event-single-content img { border-radius: 8px; }
.event-single-content .wp-block-image { margin: 1.5em 0; }
.event-single-content .wp-block-image figcaption {
  font-size: 0.82rem; color: var(--text-light); text-align: center; margin-top: var(--space-sm);
}
.event-single-content .wp-block-gallery { margin: 1.5em 0; gap: var(--space-sm) !important; }
.event-single-content .wp-block-gallery img { border-radius: 8px; }
.event-single-content .wp-block-cover { border-radius: 8px; overflow: hidden; margin: 1.5em 0; }
.event-single-content .wp-block-media-text { margin: 1.5em 0; gap: var(--space-lg); }
.event-single-content .wp-block-media-text img { border-radius: 8px; }
.event-single-content .wp-block-quote {
  border-left: 4px solid var(--terracotta); padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
  margin: 1.5em 0; font-style: italic; color: var(--text-muted);
}
.event-single-content .wp-block-quote cite { font-size: 0.85rem; color: var(--text-light); font-style: normal; }
.event-single-content .wp-block-separator { border-color: var(--sand); margin: 2em 0; }
.event-single-content .wp-block-button__link {
  border-radius: 100px; font-family: 'DM Sans', sans-serif; font-weight: 600;
  padding: 12px var(--space-lg); font-size: 0.9rem;
}
.event-single-content .wp-block-video video { border-radius: 8px; }
.event-single-content ul, .event-single-content ol { margin: 1em 0 1em 1.5em; color: var(--text-muted); }
.event-single-content li { margin-bottom: 0.4em; line-height: 1.65; }

/* Sidebar */
.event-single-sidebar { display: flex; flex-direction: column; gap: var(--space-md); }
.event-sidebar-card {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: 8px;
  padding: var(--space-lg);
}
.event-sidebar-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--deep-brown);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--sand);
}
.event-sidebar-row {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(232, 213, 181, 0.3);
}
.event-sidebar-row:last-child { border-bottom: none; }
.event-sidebar-row svg { flex-shrink: 0; margin-top: 2px; }
.event-sidebar-row div { flex: 1; }
.event-sidebar-row strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: var(--space-xs);
}
.event-sidebar-row span {
  font-size: 0.9rem;
  color: var(--text-dark);
  font-weight: 500;
}

/* Ticket button */
.event-ticket-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  background: var(--terracotta);
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  padding: var(--space-md) var(--space-lg);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.event-ticket-btn:hover { background: #b06a3e; transform: translateY(-1px); }

/* Back link */
.event-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}
.event-back-link:hover { color: var(--terracotta); }

/* RSVP Form */
.event-rsvp-card {
  background: var(--white);
  border: 1px solid var(--sand);
  border-top: 3px solid var(--terracotta);
  border-radius: 8px;
  padding: var(--space-lg);
}
.event-rsvp-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--deep-brown);
  margin-bottom: var(--space-sm);
}
.event-rsvp-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-md);
}
.event-rsvp-error {
  background: rgba(194, 64, 42, 0.08);
  color: var(--crisis-red);
  font-size: 0.82rem;
  font-weight: 500;
  padding: var(--space-sm) var(--space-md);
  border-radius: 8px;
  margin-bottom: var(--space-md);
}
.event-rsvp-field { margin-bottom: var(--space-md); }
.event-rsvp-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: var(--space-xs);
}
.event-rsvp-field input {
  width: 100%;
  padding: 12px var(--space-md);
  border: 1px solid var(--sand);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text-dark);
  background: var(--warm-cream);
  transition: border-color 0.2s;
}
.event-rsvp-field input:focus {
  outline: none;
  border-color: var(--terracotta);
}
.event-rsvp-intention {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.rsvp-radio-label {
  flex: 1;
  cursor: pointer;
}
.rsvp-radio-label input { display: none; }
.rsvp-radio-label span {
  display: block;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--sand);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--warm-cream);
  transition: all 0.2s;
}
.rsvp-radio-label input:checked + span {
  background: var(--teal-light);
  border-color: var(--teal);
  color: var(--teal-dark);
  font-weight: 600;
}
.event-rsvp-notify {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
  cursor: pointer;
}
.event-rsvp-notify input { accent-color: var(--terracotta); }
.event-rsvp-submit {
  width: 100%;
  padding: 12px;
  background: var(--terracotta);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.event-rsvp-submit:hover { background: #b06a3e; transform: translateY(-1px); }
.event-rsvp-success {
  text-align: center;
  padding: var(--space-sm) 0;
}
.event-rsvp-success svg { margin-bottom: var(--space-sm); }
.event-rsvp-success h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--deep-brown);
  margin-bottom: var(--space-sm);
  border: none;
  padding: 0;
}
.event-rsvp-success p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Responsive */
@media (min-width: 900px) {
  .event-single-layout {
    grid-template-columns: 2fr 1fr;
  }
  .event-single-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* ==========================================================================
   Services Page
   ========================================================================== */

/* Jump navigation */
.services-jump-nav {
  background: var(--white);
  border-bottom: 1px solid var(--sand);
  box-shadow: 0 4px 12px rgba(61, 43, 15, 0.06);
  padding: 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 66px;
  z-index: 100;
}
.services-jump-nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 4px;
  justify-content: center;
}
.services-jump-nav a {
  padding: 14px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.services-jump-nav a:hover { color: var(--text-dark); }
.services-jump-nav a.active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* Service pillar sections */
.service-pillar { padding: var(--section-pad) 24px; scroll-margin-top: 140px; }
.service-pillar-alt { background: var(--deep-cream); }
.service-pillar-dark { background: var(--deep-brown); color: var(--warm-cream); }

/* ==========================================================================
   Funders & Governance page
   ========================================================================== */

/* Intro: info left + notice stack right */
.fg-intro-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); margin-top: var(--space-xl); }
@media (min-width: 768px) { .fg-intro-grid { grid-template-columns: 1fr 1fr; } }

.fg-notice {
  background: var(--deep-cream);
  border-left: 3px solid var(--terracotta);
  padding: var(--space-md) var(--space-lg);
}
.fg-notice + .fg-notice { margin-top: var(--space-xs); }
.fg-notice p { font-size: 0.88rem; line-height: 1.7; color: var(--text-muted); margin: 0; }
.fg-notice strong { color: var(--deep-brown); }

/* Government funders grid (on dark bg) */
.govt-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xs); margin-top: var(--space-xl); }
.govt-tile {
  background: rgba(253, 246, 236, 0.04);
  border: 1px solid rgba(253, 246, 236, 0.1);
  border-radius: 8px;
  padding: var(--space-lg);
  text-align: center;
}
.govt-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--warm-cream);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-xs);
}
.govt-dept { font-size: 0.82rem; color: var(--sand); line-height: 1.6; margin: 0; }
@media (min-width: 640px) { .govt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .govt-grid { grid-template-columns: repeat(4, 1fr); } }

/* Funder-list callout — replaces inline box styling lost when the wp:html
   block was converted to wp:group (Grant & Funder wave 3). */
.funder-note {
  text-align: center;
  margin-top: 32px;
  padding: 16px 24px;
  background: #FDFAF5;
  border: 1px solid #E8D5B5;
  border-radius: 8px;
}
.funder-note p {
  color: #6B5A42;
  font-size: 0.9rem;
  font-style: italic;
  margin: 0;
}
.funder-note a {
  color: #C4794A;
  font-weight: 600;
  text-decoration: none;
}

/* "Ways to give" cards — converted from inline-styled anchor cards to
   wp:group + wp:button (Grant & Funder give-card wave). SVG icons are painted
   as ::before data-URIs because SVG can't live inside a wp:heading. The whole
   card was previously a single <a>; now the footer CTA is the click target. */
.give-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E8D5B5;
  border-radius: 8px;
  padding: 24px;
  height: 100%;
  overflow: hidden;
}
.give-card__title {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #3D2B0F;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.give-card__title::before {
  content: '';
  width: 28px; height: 28px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}
.give-card--pay    .give-card__title::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C4794A%22%20stroke-width%3D%221.5%22%3E%3Crect%20x%3D%221%22%20y%3D%224%22%20width%3D%2222%22%20height%3D%2216%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2210%22%20x2%3D%2223%22%20y2%3D%2210%22%2F%3E%3C%2Fsvg%3E"); }
.give-card--cheque .give-card__title::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C4794A%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M4%204h16c1.1%200%202%20.9%202%202v12c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V6c0-1.1.9-2%202-2z%22%2F%3E%3Cpolyline%20points%3D%2222%2C6%2012%2C13%202%2C6%22%2F%3E%3C%2Fsvg%3E"); }
.give-card--time   .give-card__title::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23C4794A%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M17%2021v-2a4%204%200%2000-4-4H5a4%204%200%2000-4-4v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M23%2021v-2a4%204%200%2000-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%20010%207.75%22%2F%3E%3C%2Fsvg%3E"); }
.give-card__desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #6B5A42;
  margin: 0;
  flex: 1;
}
.give-card__cta { margin: 0; }
.give-card__cta a {
  display: block;
  margin: 16px -24px -24px;
  border-top: 1px solid #E8D5B5;
  padding: 14px 24px;
  color: #C4794A;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.give-card__cta a:hover { background: var(--terracotta); color: #fff; }

/* "Ways to give" bullet list — restore inside bullets + flush-left alignment.
   These were inline styles the theme author set; editor block-recovery strips them
   (not core-list attributes), so they live here as CSS to survive future recovery. */
.ways-to-give .wp-block-list { list-style-position: inside; padding-left: 0; }

/* Grant/community funders grid (light) */
.funders-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xs); margin-top: var(--space-xl); }
.funder-tile {
  background: var(--white);
  border: 1px solid rgba(232, 213, 181, 0.6);
  border-radius: 8px;
  padding: var(--space-lg);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 120px; text-align: center;
}
.funder-tile.is-placeholder {
  background: rgba(196, 119, 42, 0.04);
  border-style: dashed;
}
.funder-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-weight: 700;
  color: var(--deep-brown);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-xs);
}
.funder-type {
  font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
  font-weight: 600; margin: 0;
}
.funder-tile.is-placeholder .funder-name { color: var(--text-muted); }
@media (min-width: 640px) { .funders-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .funders-grid { grid-template-columns: repeat(3, 1fr); } }

/* Board of Directors governance table */
.board-table {
  width: 100%; border-collapse: collapse;
  margin-top: var(--space-xl);
  font-size: 0.9rem;
}
.board-table th {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terracotta);
  padding: var(--space-md);
  background: var(--deep-cream);
  border-bottom: 2px solid var(--sand);
  text-align: left;
}
.board-table td {
  padding: var(--space-md);
  color: var(--text-muted);
  border-bottom: 1px solid rgba(196, 119, 42, 0.1);
}
.board-table tr:hover td { background: rgba(196, 119, 42, 0.03); }
.board-table td strong { color: var(--deep-brown); }

/* Document cards (dark) */
.docs-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xs); margin-top: var(--space-xl); }
.doc-card {
  background: rgba(253, 246, 236, 0.04);
  border: 1px solid rgba(253, 246, 236, 0.1);
  border-radius: 8px;
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
  transition: background 0.25s;
}
.doc-card:hover { background: rgba(253, 246, 236, 0.08); }
@media (min-width: 768px) { .docs-grid { grid-template-columns: repeat(3, 1fr); } }
.doc-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--warm-cream);
  letter-spacing: 0.04em; margin: 0;
}
.doc-desc {
  font-size: 0.88rem; color: var(--sand);
  line-height: 1.65; margin: 0; flex: 1;
}
.doc-link {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terracotta-soft); text-decoration: none; margin: 0;
}
.doc-link:hover { color: var(--warm-cream); }

/* Community Partners grid */
.partners-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xs); margin-top: var(--space-xl); }
.partner-card {
  background: var(--white);
  border-top: 2px solid var(--sand);
  border-radius: 0 0 8px 8px;
  padding: var(--space-lg);
  transition: border-top-color 0.25s;
}
.partner-card:hover { border-top-color: var(--terracotta); }
.partner-name {
  font-size: 0.98rem; font-weight: 700;
  color: var(--deep-brown); margin: 0 0 var(--space-xs);
}
.partner-type {
  font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--terracotta);
  font-weight: 600; margin: 0 0 var(--space-sm);
}
.partner-desc {
  font-size: 0.85rem; color: var(--text-muted);
  line-height: 1.65; margin: 0;
}
.partner-card .partner-cta {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--terracotta); text-decoration: none;
  display: block; margin-top: var(--space-sm);
}
@media (min-width: 640px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .partners-grid { grid-template-columns: repeat(4, 1fr); } }

/* Bullet lists inside bordered cards — add left padding so bullets don't collide with the border */
.wp-block-group.has-border-color .wp-block-list { padding-left: var(--space-md); }

/* "Need more guidance?" card — text left, button right */
.need-guidance { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.need-guidance-text { flex: 1; min-width: 240px; }
@media (max-width: 639.98px) {
  .need-guidance .wp-block-buttons { width: 100%; justify-content: center; }
}

/* Crisis resource cards — uniform height, phone pinned to bottom */
.resource-card { display: flex; flex-direction: column; min-height: 165px; }
.resource-card > p:last-child { margin-top: auto; }

/* Default gap between buttons in a wp:buttons group (was 2em before we zeroed blockGap) */
.wp-block-buttons { gap: var(--space-md); }

/* Feature images on Home + About pages — slight opacity for softer integration */
.about-eagle-image .wp-block-cover__image-background,
.about-bear-image .wp-block-cover__image-background { opacity: 0.7; }

/* History timeline */
.timeline { position: relative; margin-top: var(--space-xl); padding-left: 28px; }
.timeline::before {
  content: ''; position: absolute; left: 6px; top: 0; bottom: 0;
  width: 2px; background: var(--sand);
}
.timeline-item {
  position: relative; margin-bottom: var(--space-xl);
  padding-left: var(--space-md);
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before {
  content: ''; position: absolute; left: -25px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--terracotta); border: 2px solid var(--deep-cream);
}
.timeline-year {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 700; color: var(--terracotta);
  margin-bottom: var(--space-xs);
}
.timeline-item h4 {
  font-size: 1.05rem; font-weight: 700; color: var(--deep-brown);
  margin-bottom: var(--space-sm);
}
.timeline-item p {
  color: var(--text-muted); font-size: 0.9rem; line-height: 1.7;
}
.timeline-item p + p { margin-top: var(--space-sm); }
.timeline-detail {
  color: var(--text-light); font-size: 0.82rem; font-style: italic;
  margin-top: var(--space-sm);
}

/* Board of Directors — stacked horizontal rows */
.board-list { margin-top: var(--space-xl); }
.board-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(232, 213, 181, 0.6);
}
.board-list > .board-row:first-child { border-top: 0; padding-top: 0; }
.board-list > .board-row:last-child { padding-bottom: 0; }
.board-row-head {
  display: flex; align-items: center; gap: var(--space-md);
}
.board-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--deep-cream); border: 2px solid var(--sand);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; font-weight: 700; color: var(--terracotta);
  flex-shrink: 0; margin: 0;
}
.board-name-role h3 {
  font-size: 1.3rem; font-weight: 700; color: var(--deep-brown); margin: 0 0 2px 0;
}
.board-role {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--terracotta); margin: 0;
}
.board-row-body > p {
  color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; margin: 0;
}
.board-row-body > p + p { margin-top: var(--space-sm); }
.board-row-body .board-detail {
  color: var(--text-light); font-size: 0.85rem; font-style: italic;
}
@media (min-width: 768px) {
  .board-row {
    grid-template-columns: 260px 1fr;
    gap: var(--space-xl);
    align-items: start;
  }
}
.service-pillar-blue { background: var(--sky-grey); }
.service-pillar-dark .section-label { color: var(--terracotta-soft); }
.service-pillar-dark .section-title { color: var(--warm-cream); }
.service-pillar-dark .section-body { color: var(--sand); }
.service-pillar .section-inner { max-width: 1100px; margin: 0 auto; }
.service-pillar .wp-block-columns { gap: 24px; margin-bottom: 24px; }

/* Service contact bar */
.service-contact-bar {
  margin: 24px 0;
  padding: 16px 24px;
  border-radius: 12px;
  background: var(--deep-cream);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  text-align: center;
}
.service-pillar-dark .service-contact-bar { background: rgba(255,255,255,0.08); }
.service-contact-bar a { color: var(--terracotta); font-weight: 700; text-decoration: none; }
.service-contact-bar svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--terracotta); opacity: 0.6; }
.service-contact-bar .sc-item { display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-md); }
.service-contact-bar .sc-divider { width: 1px; height: 16px; background: var(--sand); flex-shrink: 0; }
.service-pillar-dark .service-contact-bar .sc-divider { background: rgba(253,246,236,0.15); }

/* Program cards grid */
.programs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
.program-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(232,213,181,0.5);
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}
.program-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(61,43,15,0.08); }
.service-pillar-dark .program-card { background: rgba(255,255,255,0.06); border-color: rgba(253,246,236,0.1); }
.service-pillar-dark .program-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.2); }
.program-card-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.program-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.program-card-body h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--deep-brown);
  margin-bottom: 10px;
}
.service-pillar-dark .program-card-body h4 { color: var(--warm-cream); }
.program-card-body > p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  flex: 1;
}
.service-pillar-dark .program-card-body > p { color: var(--sand); }
.program-card-body ul {
  list-style: none;
  margin-top: 14px;
  padding: 0;
}
.program-card-body ul li {
  padding: 5px 0 5px 18px;
  position: relative;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.service-pillar-dark .program-card-body ul li { color: var(--sand); }
.program-card-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* Accent bar cards (no image) */
.program-card-accent {
  height: 6px;
  flex-shrink: 0;
  background: var(--terracotta);
}
.program-card-accent.gold { background: var(--donate-gold); }
.program-card-accent.green { background: var(--safe-exit-green); }

/* ==========================================================================
   CARD CATALOGUE
   --------------------------------------------------------------------------
   The site uses THREE distinct card patterns. Each has its own purpose
   and visual language — don't blur the lines:

     1. PHOTO CARD — SUMMARY   (below in this file, default photo-card)
        Homepage preview tiles. Compact. Links out to a deeper page.

     2. PHOTO CARD — DETAIL    (below; className "photo-card--detail")
        Program-detail pages (Emergency Shelter, Family Wellness Centre).
        Stands alone with full program info. Larger image + type.

     3. TEACHING CARD          (search "TEACHING CARD" — used on About Us)
        Roman numeral + Cormorant heading + body. No image. Sacred
        Teachings section only.

   Patterns 1 + 2 share the same block (riverside/photo-card). Pattern 3
   is a wp:group with className "teaching-card".
   ==========================================================================
   PHOTO CARD (riverside/photo-card block)
   --------------------------------------------------------------------------
   Two distinct variants — same block, different className:

   SUMMARY (default, no class modifier)
     Used on the homepage as preview tiles that link to deeper pages.
     Compact: 180px image, 1rem h3 (nowrap), 0.88rem body.
     Has a full-card "Learn More" overlay link (.service-card-cta).

   DETAIL (add className "photo-card--detail")
     Used on program-detail pages like Emergency Shelter and Family
     Wellness Centre. Cards stand alone and carry full program info.
     Larger: 300px image, 1.3rem h3 (wraps), 1rem body.

   Shared structure (border-radius, padding, flex column layout) lives on
   the base .service-card-block rules below. Variant overrides come AFTER.
   ========================================================================== */
.service-card-block {
  padding: 0 !important;
  min-height: auto !important;
  background: var(--white) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  color: var(--deep-brown) !important;
  border: 1px solid #E5E5E5;
  scroll-margin-top: 120px;
  height: 100%;
  margin-bottom: 24px;
}
.service-card-block .wp-block-cover__image-background {
  position: relative !important;
  height: 180px !important;
  width: 100% !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.service-card-block .wp-block-cover__background {
  display: none !important;
}
.service-card-block .wp-block-cover__inner-container {
  padding: 16px 16px 48px 16px !important;
  background: var(--white) !important;
  position: static !important;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 16px 16px;  /* match parent's rounded bottom corners so colored
                                    parent bg can't bleed through corner slivers */
}
.service-card-block h3,
.service-card-block .wp-block-heading {
  color: var(--deep-brown) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem !important;
  margin-bottom: 16px !important;
  text-align: center !important;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .service-card-block h3,
  .service-card-block .wp-block-heading { font-size: 1.4rem !important; }
}
.service-card-block p {
  color: var(--text-muted) !important;
}
.service-card-block ul {
  list-style: none !important;
  padding: 0 !important;
  margin-top: 14px !important;
}
.service-card-block ul li {
  position: relative;
  padding: 5px 0 5px 18px;
  color: var(--text-muted) !important;
}
.service-card-block ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 13px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}
/* In dark pillar context — cards stay light */
.service-pillar-dark .service-card-block {
  background: var(--white) !important;
}
.service-pillar-dark .service-card-block h3,
.service-pillar-dark .service-card-block p,
.service-pillar-dark .service-card-block li {
  color: inherit !important;
}
.service-pillar-dark .service-card-block h3 { color: var(--deep-brown) !important; }
.service-pillar-dark .service-card-block p,
.service-pillar-dark .service-card-block li { color: var(--text-muted) !important; }

/* Service cards — clickable only when they contain a CTA link; info cards stay flat */
.service-card-block {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card-block:has(.service-card-cta) { cursor: pointer; }
.service-card-block:has(.service-card-cta):hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(61, 43, 15, 0.15);
}
/* The link itself becomes the whole-card anchor — absolute, full bleed. Force the buttons-block wrappers to position:static so the link's `inset: 0` resolves up to .service-card-block, not to .wp-block-button (which Gutenberg sets to position:relative). The visible "Learn more →" sits at the bottom-left via flexbox. */
.service-card-block .service-card-cta {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}
.service-card-block .service-card-cta .wp-block-button {
  position: static !important;
  margin: 0;
}
.service-card-block .service-card-cta .wp-block-button__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 16px !important;
  background: transparent !important;
  color: var(--terracotta) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Suppress the generic button :hover transform/opacity inside the card —
   the whole card already lifts on hover via .service-card-block:hover. The
   second transform on the inner link was causing colored ghosting on the
   tinted icon cards (pink/blue). */
.service-card-block .service-card-cta .wp-block-button__link:hover,
.service-card-block .service-card-cta .wp-block-button__link:focus {
  transform: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
}
.service-card-block .service-card-cta .wp-block-button__link::after {
  content: "→";
  margin-left: 0.45em;
}

/* Vertical gap between column rows in service sections */
.service-pillar .wp-block-columns + .wp-block-columns { margin-top: 20px; }
.service-pillar .service-contact-bar + .wp-block-columns { margin-top: 24px; }

/* === Volunteer & Careers — role cards, pillars, job listings === */
.role-card {
  background: var(--white);
  border: 1px solid rgba(232, 213, 181, 0.5);
  border-radius: 8px;
  padding: 28px 24px;
  height: 100%;
}
.service-pillar-dark .role-card {
  background: rgba(232, 213, 176, 0.04);
  border: 1px solid rgba(232, 213, 176, 0.12);
}
.role-card h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--deep-brown) !important;
  margin-bottom: var(--space-sm) !important;
}
.service-pillar-dark .role-card h3 { color: var(--warm-cream) !important; }
.role-card > p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  margin-bottom: var(--space-md);
}
.service-pillar-dark .role-card > p { color: rgba(232, 213, 176, 0.7); }
.role-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-light);
}
.service-pillar-dark .role-card ul { color: rgba(232, 213, 176, 0.55); }
.role-card ul li {
  position: relative;
  padding-left: 14px;
  line-height: 1.55;
  margin-bottom: var(--space-xs);
}
.role-card ul li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--terracotta);
  font-weight: 700;
}

/* Cultural-safety pillars (lives in service-pillar-alt by default; dark variant below) */
.cs-pillar {
  padding: 18px 16px;
  background: var(--white);
  border: 1px solid rgba(232, 213, 181, 0.6);
  border-radius: 6px;
}
.cs-pillar h4 {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--deep-brown);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.04em;
}
.cs-pillar p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.service-pillar-dark .cs-pillar {
  background: rgba(232, 213, 176, 0.04);
  border-color: rgba(232, 213, 176, 0.18);
}
.service-pillar-dark .cs-pillar h4 { color: var(--warm-cream); }
.service-pillar-dark .cs-pillar p { color: rgba(232, 213, 176, 0.6); }

/* Job listing strip (cream card, 2-col with Apply on right) */
.job-listing {
  background: var(--white);
  border: 1px solid rgba(232, 213, 181, 0.6);
  border-radius: 6px;
  padding: 24px 28px;
  margin-bottom: var(--space-sm);
  position: relative;
  transition: border-color 0.2s;
}
.job-listing:hover { border-color: var(--terracotta); }
.job-listing > div:last-child { position: absolute; right: 24px; bottom: 20px; }
@media (max-width: 768px) {
  .job-listing > div:last-child { position: static; margin-top: 12px; }
}
.job-listing h3 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--deep-brown) !important;
  margin: 0 !important;
}
.job-title-row {
  margin-bottom: var(--space-sm);
}
.job-title-row .job-type { position: absolute; top: 20px; right: 24px; }
.job-title-row > .wp-block-heading,
.job-title-row > h3 {
  flex: 1 1 auto;
  min-width: 0;
}
.job-meta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
.job-listing > div > p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  padding-right: 180px;
}
@media (max-width: 768px) {
  .job-listing > div > p { padding-right: 0; }
}
.job-type {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  margin: 0;
  flex-shrink: 0;
}
.job-type.full-time { background: rgba(196, 121, 74, 0.12); color: var(--terracotta); }
.job-type.part-time { background: rgba(184, 134, 11, 0.12); color: var(--donate-gold); }
.job-type.general   { background: rgba(45, 122, 58, 0.12);  color: var(--safe-exit-green); }

/* Position detail page */
.position-hero { background: var(--deep-brown); padding: 140px 24px 48px; text-align: center; }
.position-hero-inner { max-width: 800px; margin: 0 auto; }
.position-breadcrumb { font-size: 0.82rem; color: var(--sand); margin-bottom: 16px; }
.position-breadcrumb a { color: var(--terracotta-soft); text-decoration: none; }
.position-breadcrumb a:hover { text-decoration: underline; }
.position-breadcrumb-sep { margin: 0 6px; opacity: 0.5; }
.position-type-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 16px; }
.position-type-full-time { background: rgba(196, 121, 74, 0.2); color: var(--terracotta-soft); }
.position-type-part-time { background: rgba(184, 134, 11, 0.2); color: #D4A017; }
.position-type-volunteer-ft, .position-type-volunteer-pt { background: rgba(45, 122, 58, 0.2); color: #5CB85C; }
.position-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; color: var(--warm-cream); line-height: 1.2; margin-bottom: 8px; }
.position-org { font-size: 0.9rem; color: var(--sand); margin-bottom: 4px; }
.position-location { font-size: 0.88rem; color: var(--text-light); display: flex; align-items: center; justify-content: center; gap: 6px; }
.position-location svg { color: var(--terracotta-soft); }

.position-body { max-width: 800px; margin: 0 auto; padding: 48px 24px 72px; }
.position-section { margin-bottom: 36px; }
.position-section h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 700; color: var(--deep-brown); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--sand); }
.position-section p { font-size: 0.92rem; line-height: 1.75; color: var(--text-muted); margin-bottom: 12px; }
.position-list { list-style: none; padding: 0; margin: 0; }
.position-list li { position: relative; padding-left: 18px; font-size: 0.9rem; line-height: 1.7; color: var(--text-muted); margin-bottom: 8px; }
.position-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }

.position-notice { display: flex; gap: 10px; background: rgba(194, 64, 42, 0.06); border: 1px solid rgba(194, 64, 42, 0.2); border-radius: 8px; padding: 16px; margin: 16px 0; }
.position-notice svg { color: var(--crisis-red); flex-shrink: 0; margin-top: 2px; }
.position-notice p { font-size: 0.88rem; line-height: 1.65; color: var(--text-dark); margin: 0; }

.position-apply-actions { margin: 24px 0; }
.position-apply-btn { background: var(--terracotta) !important; color: #fff !important; padding: 14px 32px !important; font-size: 0.95rem !important; font-weight: 600 !important; border-radius: 100px !important; border: none; cursor: pointer; }
.position-apply-btn:hover { background: #B06A3E !important; }

.position-apply-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
@media (max-width: 768px) { .position-apply-methods { grid-template-columns: 1fr; } }
.position-apply-method { background: var(--deep-cream); border: 1px solid var(--sand); border-radius: 8px; padding: 24px; text-align: center; }
.position-method-icon { margin-bottom: 12px; }
.position-apply-method h3 { font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--deep-brown); margin-bottom: 8px; }
.position-apply-method p { font-size: 0.85rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 12px; }
.position-method-link { display: inline-block; font-size: 0.88rem; font-weight: 600; color: var(--terracotta); text-decoration: none; }
.position-method-link:hover { text-decoration: underline; }
.position-mail-address { font-size: 0.82rem !important; color: var(--text-light) !important; line-height: 1.5 !important; margin-top: 8px !important; }

.position-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--terracotta); text-decoration: none; margin-top: 24px; }
.position-back-link:hover { text-decoration: underline; }

/* Give cards — hover/click affordance lives on the footer CTA only
   (.give-card__cta a:hover). The old whole-card border-hover was removed: only the
   footer link is clickable now, so the whole card shouldn't signal clickability. */

/* General application CTA — styled distinctly from job listings */
.general-app-cta { gap: var(--space-lg); }
.general-app-cta-text { flex: 1 1 320px; min-width: 0; }
.general-app-cta-text h3 {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--deep-brown) !important;
  margin: 0 0 6px !important;
}
.general-app-cta-text p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.general-app-cta .wp-block-buttons { flex-shrink: 0; }

/* === Grant & Funder cards — uniform logo display === */
.funder-tile,
.partner-card,
.govt-tile {
  text-align: center;
  background: var(--white);
  border: 1px solid rgba(232, 213, 181, 0.5);
  border-radius: 8px;
  padding: 28px 22px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.service-pillar-dark .funder-tile,
.service-pillar-dark .partner-card,
.service-pillar-dark .govt-tile {
  background: rgba(232, 213, 176, 0.04);
  border-color: rgba(232, 213, 176, 0.15);
}
.funder-logo,
.partner-logo,
.govt-logo {
  margin: 0 !important;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}
.funder-logo img,
.partner-logo img,
.govt-logo img {
  max-height: 64px;
  max-width: 900px;
  width: auto;
  object-fit: contain;
  display: block;
}
.funder-name,
.partner-name,
.govt-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-brown);
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  text-align: center;
}
.service-pillar-dark .funder-name,
.service-pillar-dark .partner-name,
.service-pillar-dark .govt-name { color: var(--warm-cream); }
.funder-type,
.partner-type {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracotta);
  margin: 0;
}
.govt-dept,
.partner-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.service-pillar-dark .govt-dept,
.service-pillar-dark .partner-desc { color: rgba(232, 213, 176, 0.6); }

/* === Document cards (Financial & Governance Transparency) === */
.doc-card {
  background: var(--white);
  border: 1px solid rgba(232, 213, 181, 0.6);
  border-radius: 8px;
  padding: 24px 22px;
  height: 100%;
  display: flex !important;
  flex-direction: column;
  gap: var(--space-xs);
  transition: border-color 0.2s;
}
.doc-card:hover { border-color: var(--terracotta); }
.service-pillar-dark .doc-card {
  background: rgba(232, 213, 176, 0.04);
  border-color: rgba(232, 213, 176, 0.15);
}
.doc-type {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracotta);
  margin: 0 !important;
}
.doc-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--deep-brown) !important;
  margin: 0 !important;
}
.service-pillar-dark .doc-title { color: var(--warm-cream) !important; }
.doc-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 !important;
  flex: 1;
}
.service-pillar-dark .doc-desc { color: rgba(232, 213, 176, 0.6); }
.doc-card-actions { margin-top: var(--space-md) !important; }
.doc-card-actions .wp-block-button__link {
  font-size: 0.82rem;
  padding: 10px 18px;
}
/* Auto-rendered reports grid (from [niitoiyis_reports] shortcode) */
.reports-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.reports-grid .doc-card {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: var(--space-lg);
  row-gap: 4px;
}
.reports-grid .doc-card:hover { border-color: rgba(232, 213, 181, 0.6); background: var(--white); }
/* Financial & Governance page: kill board-table row hover treatment (static read) */
body.page-id-449 .board-table tr:hover td { background: transparent; }
.reports-grid .doc-card .doc-type,
.reports-grid .doc-card .doc-title,
.reports-grid .doc-card .doc-desc { grid-column: 1; }
.reports-grid .doc-card .doc-card-actions {
  grid-column: 2;
  grid-row: 1 / -1;
  margin-top: 0 !important;
  align-self: center;
}
@media (max-width: 600px) {
  .reports-grid .doc-card { grid-template-columns: 1fr; row-gap: var(--space-xs); }
  .reports-grid .doc-card .doc-card-actions { grid-column: 1; grid-row: auto; margin-top: var(--space-sm) !important; }
}

/* === Application modal (Volunteer & Careers) === */
.application-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.application-modal[aria-hidden="false"] { visibility: visible; opacity: 1; }
.application-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 29, 10, 0.7);
}
.application-modal-card {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.application-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.application-modal-close:hover { background: var(--warm-cream); color: var(--deep-brown); }
.application-modal-header { margin-bottom: var(--space-lg); }
.application-modal-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--space-sm);
}
#application-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--deep-brown);
  margin-bottom: var(--space-sm);
}
.application-modal-intro {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
.application-modal-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.application-modal-form .form-row.form-row-email-phone { grid-template-columns: 2fr 1fr; }
@media (max-width: 600px) {
  .application-modal-form .form-row,
  .application-modal-form .form-row.form-row-email-phone { grid-template-columns: 1fr; }
}
.application-modal-form .phone-input .phone-prefix {
  border-radius: 6px 0 0 6px;
  border-color: var(--sand);
}
.application-modal-form .phone-input input { border-radius: 0 6px 6px 0; }
.application-modal-form .form-field { margin-bottom: var(--space-md); }
.application-modal-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--deep-brown);
  margin-bottom: var(--space-xs);
}
.application-modal-form .form-field-note {
  font-weight: 400;
  color: var(--text-light);
  font-size: 0.78rem;
  margin-left: 4px;
}
.application-modal-form input[type="text"],
.application-modal-form input[type="email"],
.application-modal-form input[type="tel"],
.application-modal-form select,
.application-modal-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sand);
  border-radius: 6px;
  background: var(--warm-cream);
  color: var(--deep-brown);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color 0.2s;
}
.application-modal-form textarea { resize: vertical; min-height: 80px; }
.application-modal-form input:focus,
.application-modal-form select:focus,
.application-modal-form textarea:focus {
  outline: none;
  border-color: var(--terracotta);
}
.application-modal-form input[type="file"] {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.application-modal-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}
.application-modal-submit,
.application-modal-cancel {
  padding: 12px 22px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.application-modal-submit { background: var(--terracotta); color: var(--white); }
.application-modal-submit:hover:not(:disabled) { background: #B66A39; }
.application-modal-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.application-modal-cancel {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--sand);
}
.application-modal-cancel:hover { background: var(--warm-cream); color: var(--deep-brown); }
.application-modal-status { margin-top: var(--space-md); font-size: 0.88rem; }
.application-modal-status.success {
  color: var(--safe-exit-green);
  padding: 12px;
  background: rgba(45, 122, 58, 0.08);
  border-radius: 6px;
}
.application-modal-status.error {
  color: var(--crisis-red);
  padding: 12px;
  background: rgba(194, 64, 42, 0.08);
  border-radius: 6px;
}

/* Services responsive */
@media (min-width: 640px) {
  .programs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .service-pillar { padding: 88px 24px; }
}

/* === Brand accent overrides ======================================= */

/* Homepage transparent header — active link needs lighter pink for contrast */
.home .nav-desktop a.active {
  color: #ff6b8b;
}

/* Need-guidance callout — sea green */
.need-guidance { border-color: var(--sea-green); }
.need-guidance .wp-block-button__link.has-terracotta-background-color { background-color: var(--sea-green); }
.need-guidance .wp-block-button__link.has-terracotta-background-color:hover { background-color: #258d80; }

/* Info-note callouts — light yellow */
.info-note { background-color: #fff7c4; border-color: var(--light-yellow); }

/* Event category tags — hidden until tied to real data */
.event-tag-cat {
  display: none;
  background: rgba(255, 238, 146, 0.45);
  color: #6b5e1c;
}
.event-tag-cat.event-tag-family-resource-network {
  background: rgba(47, 183, 165, 0.15);
  color: #1d6b60;
}
.event-tag-cat.event-tag-mens-mental-health {
  background: rgba(52, 180, 217, 0.18);
  color: var(--teal-dark);
}
.event-tag-cat.event-tag-youth-mentorship {
  background: rgba(47, 183, 165, 0.15);
  color: #1d6b60;
}
.event-tag-cat.event-tag-early-years-programs {
  background: rgba(233, 38, 85, 0.12);
  color: #9b1a3a;
}


/* === Founding Ceremony video on About Us ===
   Sits inside the dark "A New Chapter — 2024" group. Wide centered framed presentation. */
.wp-block-video.founding-ceremony-video {
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
}
.wp-block-video.founding-ceremony-video video {
    aspect-ratio: 16 / 9;
    background: #1A120A;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3);
    display: block;
    height: auto;
    width: 100%;
}

/* Photo card image height variant — used on Emergency Shelter & Family Wellness Centre
   where the cards stand alone (not in a 3-up grid) and benefit from a taller image. */
.service-card-block.photo-card--detail .wp-block-cover__image-background {
  height: 300px !important;
}

/* Emergency Shelter — taller near-square images + image-beside-text showcase (bottom cards) */
.service-card-block.photo-card--tall .wp-block-cover__image-background { height: 400px !important; }

/* Showcase image height on small screens (card stacks vertically, image on top) */
@media (max-width: 767px) {
  .service-card-block.photo-card--showcase .wp-block-cover__image-background { height: 340px !important; }
}

/* CTA footer (full-width band at the bottom of the card; applies at all sizes).
   No padding of its own — the CTA anchor fills it edge-to-edge. */
.service-card-block .photo-card-footer { padding: 0; width: 100%; align-self: stretch; border-top: 1px solid rgba(61, 43, 15, 0.12); }
.photo-card-footer .next-event-cta-wrapper { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; }
.photo-card-footer .next-event-cta {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  border-radius: 0 !important;
  padding: 18px 24px !important;
  background: var(--white) !important;
  color: var(--sea-green) !important;   /* green lettering on a white footer */
  font-weight: 700;
}
.photo-card-footer .next-event-cta__date { border-left-color: rgba(47, 183, 165, 0.35); }
.photo-card-footer .next-event-cta:hover,
.photo-card-footer .next-event-cta:focus { transform: none !important; background: var(--deep-cream) !important; color: var(--sea-green) !important; }

@media (min-width: 768px) {
  /* stack the row holding showcase cards so each spans the full content width */
  .wp-block-columns:has(.photo-card--showcase) { display: block !important; margin-bottom: 32px !important; }
  .wp-block-columns:has(.photo-card--showcase) > .wp-block-column { width: 100% !important; flex-basis: 100% !important; margin: 0 0 32px !important; }
  .wp-block-columns:has(.photo-card--showcase) > .wp-block-column:last-child { margin-bottom: 0 !important; }
  /* Card = CSS grid: image + content on row 1, full-width CTA footer on row 2.
     Grid (not flex) lets the footer span both columns. !important beats the base
     card's display:flex / flex-direction:column. */
  .service-card-block.photo-card--showcase {
    display: grid !important;
    grid-template-columns: 45% 1fr;
    grid-template-rows: auto auto;
    align-items: stretch;
    margin-bottom: 32px !important;
  }
  /* In a stacked columns row the column margin provides the gap, so zero the card's. */
  .wp-block-column .service-card-block.photo-card--showcase { margin-bottom: 0 !important; }
  .service-card-block.photo-card--showcase.photo-card--showcase-right { grid-template-columns: 1fr 45%; }
  .service-card-block.photo-card--showcase .wp-block-cover__image-background {
    grid-column: 1; grid-row: 1;
    width: 100% !important; height: 450px !important; align-self: start !important;
  }
  .service-card-block.photo-card--showcase.photo-card--showcase-right .wp-block-cover__image-background { grid-column: 2; }
  .service-card-block.photo-card--showcase .wp-block-cover__inner-container {
    grid-column: 2; grid-row: 1;
    display: flex; flex-direction: column; justify-content: flex-start; padding: 32px !important;
  }
  .service-card-block.photo-card--showcase.photo-card--showcase-right .wp-block-cover__inner-container { grid-column: 1; }
  .service-card-block.photo-card--showcase .photo-card-footer { grid-column: 1 / -1; grid-row: 2; }
  /* Title with a terracotta underline (no band background). */
  .service-card-block.photo-card--showcase .wp-block-cover__inner-container h3 {
    margin: 0 0 20px !important;
    padding: 0 0 22px !important;
    font-size: 1.55rem !important;
    color: var(--deep-brown) !important;
    border-bottom: 3px solid var(--terracotta);
  }
}

/* Split-list variant (long cards, e.g. FRN): image + title/blurb stay on the top row;
   the bullet list + closing copy move to a full-width section below (2 columns on
   desktop); CTA footer at the bottom. render.php emits the .photo-card-wide section. */
.service-card-block .photo-card-wide { padding: 22px 32px; border-top: 1px solid rgba(61, 43, 15, 0.12); }
.service-card-block .photo-card-wide ul { margin: 0; }
.service-card-block .photo-card-wide > p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .service-card-block.photo-card--showcase.photo-card--split-list { grid-template-rows: auto auto auto; }
  .service-card-block.photo-card--showcase.photo-card--split-list .wp-block-cover__image-background {
    grid-row: 1; height: 320px !important; align-self: start !important;
  }
  .service-card-block.photo-card--split-list .wp-block-cover__inner-container { grid-row: 1; }
  .service-card-block.photo-card--split-list .photo-card-wide { grid-column: 1 / -1; grid-row: 2; }
  .service-card-block.photo-card--split-list .photo-card-footer { grid-row: 3; }
  .service-card-block.photo-card--split-list .photo-card-wide ul { columns: 2; column-gap: 40px; }
  .service-card-block.photo-card--split-list .photo-card-wide ul li { break-inside: avoid; }
}

/* Tall variant heading: a touch larger to balance the taller image area. Allow wrap since
   titles on ES/FWC cards (e.g. "Indigenous Cultural Wellness") can be 2-3 words longer
   than home-page card titles. */
.service-card-block.photo-card--detail h3,
.service-card-block.photo-card--detail .wp-block-heading {
  font-size: 1.3rem !important;
  white-space: normal !important;
  line-height: 1.3 !important;
}

/* Tall variant body copy: paragraphs and list items get a small size bump so they
   read in balance with the larger image and heading. Overrides inline 0.88rem styles
   that were baked into the original card markup. */
.service-card-block.photo-card--detail p,
.service-card-block.photo-card--detail ul li {
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

/* Detail variant inner padding: 24px on all sides — overrides the summary default of
   16/16/48/16 which is built for a tighter tile + bottom-anchored Learn More CTA.
   Detail cards have no overlay CTA so the extra 48px tail just leaves dead space. */
.service-card-block.photo-card--detail .wp-block-cover__inner-container {
  padding: 24px !important;
}

/* Detail variant — center the card heading. Paragraph/list body copy stays left-aligned
   for readability; only the heading is centered to give the card a more standalone feel. */
.service-card-block.photo-card--detail h3,
.service-card-block.photo-card--detail .wp-block-heading {
  text-align: center !important;
}

/* ==========================================================================
   NEXT EVENT CTA BLOCK (riverside/next-event-cta)
   --------------------------------------------------------------------------
   Pill-style link that resolves at render time to the next upcoming event in
   a chosen event_category. Falls back to a static link if no upcoming match.
   Designed to drop into the bottom of photo-card detail bodies (Family Wellness
   Centre program cards in particular) so each program advertises its next session.
   ========================================================================== */
.next-event-cta-wrapper { margin-top: 16px; }
.next-event-cta {
  align-items: center;
  background: var(--terracotta);
  border-radius: 100px;
  color: var(--white) !important;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 600;
  gap: 8px;
  line-height: 1.3;
  padding: 10px 16px;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease;
}
.next-event-cta:hover,
.next-event-cta:focus {
  background: var(--deep-brown);
  color: var(--white) !important;
  transform: translateY(-1px);
}
.next-event-cta__prefix { font-weight: 500; opacity: 0.75; }
.next-event-cta__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16em; }
.next-event-cta__date {
  border-left: 1px solid rgba(255,255,255,0.3);
  font-size: 0.82rem;
  margin-left: 4px;
  opacity: 0.9;
  padding-left: 10px;
}
.next-event-cta__arrow { font-size: 1.1em; margin-left: 4px; }
.next-event-cta--fallback {
  background: rgba(196, 121, 74, 0.12);
  color: var(--terracotta) !important;
}
.next-event-cta--fallback:hover,
.next-event-cta--fallback:focus {
  background: rgba(196, 121, 74, 0.22);
  color: var(--terracotta) !important;
}

/* (Superseded 2026-07-08) The old in-inner-container CTA-footer CSS was removed —
   render.php now emits a real .photo-card-footer sibling and the CTA-fill rules live
   with the footer styles above. */

/* Photo card modifier: zoom OUT the image — switch object-fit from cover to contain
   so the full image is visible (may leave letterboxing in the strip; backgrounded
   with a warm cream so the gap blends with the card surroundings). Stack with
   photo-card--detail or use alone. */
.service-card-block.photo-card--contain-image .wp-block-cover__image-background {
  transform: scale(0.85);
}

/* ----- Photo card variant: --icon (pictograph SVG service tiles, home page) -----
   Used on home page summary tiles to show traditional Niitoiyis pictograph
   illustrations rather than photos. Icon sits centered on a tinted strip with
   padding; text body below stays on white. Per-card colors go on the CARD
   (parent), NOT the img — so filter:invert on the img only flips the black SVG
   paths to white without inverting the background color. */
.service-card-block.photo-card--icon .wp-block-cover__image-background {
  object-fit: contain !important;
  height: 160px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

.service-card-block.photo-card--icon {
  background: var(--white) !important;
}

/* Per-service icon background colors — applied to the image area only */
.service-card-block.photo-card--icon:has(img[src*="icon-emergency-shelter"]) .wp-block-cover__image-background {
  background: var(--vibrant-pink) !important;
}
.service-card-block.photo-card--icon:has(img[src*="icon-family-wellness"]) .wp-block-cover__image-background {
  background: var(--teal) !important;
}
.service-card-block.photo-card--icon:has(img[src*="icon-mens-mental-health"]) .wp-block-cover__image-background {
  background: var(--light-yellow) !important;
}
.service-card-block.photo-card--icon:has(img[src*="icon-safe-response-team"]) .wp-block-cover__image-background {
  background: var(--linen-white) !important;
}
.service-card-block.photo-card--icon:has(img[src*="icon-justice-system-navigator"]) .wp-block-cover__image-background {
  background: var(--linen-white) !important;
}
.service-card-block.photo-card--icon:has(img[src*="icon-volunteers-careers"]) .wp-block-cover__image-background {
  background: var(--light-yellow) !important;
}
.service-card-block.photo-card--icon:has(img[src*="icon-indigenous-support"]) .wp-block-cover__image-background {
  background: var(--teal) !important;
}
.service-card-block.photo-card--icon:has(img[src*="icon-youth-family"]) .wp-block-cover__image-background {
  background: var(--vibrant-pink) !important;
}

/* "Would rather join our team?" CTA banner (Volunteer & Careers) */
.join-team-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--deep-cream);
  border-left: 4px solid var(--terracotta);
  border-radius: 8px;
  padding: 16px 24px;
  margin: 0 0 18px;
}
.join-team-cta p { margin: 0; font-weight: 600; color: var(--deep-brown); }
.join-team-cta .wp-block-buttons { margin: 0; }

/* Fallback CTA labels (static "Join the next …" text) — show in full, no ellipsis truncation */
.next-event-cta--fallback .next-event-cta__title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

/* Contact "join our team" CTA: 2nd line break (to / supporting) only on tablet/phone */
.team-cta-copy br:nth-of-type(2) { display: none; }
@media (max-width: 1024px) {
  .team-cta-copy br:nth-of-type(2) { display: inline; }
}

/* ============================ Events calendar (custom, both sources) ============================ */
.events-viewtoggle { display: inline-flex; border: 1px solid #E8D5B5; border-radius: 100px; padding: 4px; background: #FDFAF5; margin: 0 0 22px; }
.vt-btn { border: none; background: transparent; padding: 8px 24px; border-radius: 100px; font-size: .9rem; font-weight: 600; color: #6B5A42; cursor: pointer; transition: background .15s, color .15s; }
.vt-btn.active { background: #C4794A; color: #fff; }
.events-view[hidden] { display: none; }
.events-calendar { position: relative; margin: 0 0 32px; border: 1px solid #E8D5B5; border-radius: 14px; background: #fff; padding: 18px 18px 22px; }
.cal-header { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 6px; }
.cal-todaybtn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 1px solid #E8D5B5; background: #FDFAF5; color: #6B5A42; border-radius: 100px; padding: 6px 14px; font-size: .8rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.cal-todaybtn:hover { background: #F3E7D2; }
.cal-title { font-size: 1.25rem; font-weight: 700; color: #2C1D0A; min-width: 180px; text-align: center; }
.cal-nav { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #E8D5B5; background: #FDFAF5; color: #C4794A; font-size: 1.4rem; line-height: 1; cursor: pointer; transition: background .15s; }
.cal-nav:hover { background: #F3E7D2; }
.cal-legend { display: flex; gap: 18px; justify-content: center; margin-bottom: 14px; font-size: .8rem; color: #6B5A42; }
.cal-key { display: inline-flex; align-items: center; gap: 6px; }
.cal-key::before { content: ""; width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.cal-key-manual::before { background: #C4794A; }
.cal-key-facebook::before { background: #1877F2; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #9B8A72; padding: 4px 0; }
.cal-cell { min-height: 78px; border: 1px solid #F0E4CE; border-radius: 8px; padding: 5px; background: #FDFAF5; overflow: hidden; }
.cal-cell.cal-empty { background: transparent; border: none; }
.cal-today { outline: 2px solid #C4794A; background: #fff; }
.cal-daynum { display: block; font-size: .78rem; font-weight: 600; color: #6B5A42; margin-bottom: 3px; }
.cal-event { display: block; width: 100%; border: none; text-align: left; font-family: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; font-size: .68rem; line-height: 1.25; padding: 2px 5px; margin-bottom: 3px; border-radius: 4px; color: #fff !important; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event.cal-manual { background: #C4794A; }
.cal-event.cal-facebook { background: #1877F2; }
.cal-event:hover { opacity: .85; }
.events-subhead { font-size: 1.1rem; font-weight: 700; color: #2C1D0A; margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 1px solid #E8D5B5; }
.events-subhead-past { margin-top: 38px; }

/* Calendar event popover (inspector) */
.cal-popover { position: absolute; z-index: 50; width: 400px; max-width: calc(100% - 16px); background: #fff; border: 1px solid #E8D5B5; border-radius: 12px; box-shadow: 0 10px 30px rgba(44,29,10,.18); padding: 16px 16px 18px; }
.cal-popover[hidden] { display: none; }
.cal-pop-close { position: absolute; top: 8px; right: 10px; border: none; background: transparent; font-size: 1.3rem; line-height: 1; color: #9B8A72; cursor: pointer; }
.cal-pop-close:hover { color: #2C1D0A; }
.cal-pop-thumb { width: 100%; height: 120px; border-radius: 8px; background-size: cover; background-position: center; margin-bottom: 12px; }
.cal-pop-chip { display: inline-block; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; margin-bottom: 8px; }
.cal-pop-chip-manual { background: #C4794A22; color: #C4794A; }
.cal-pop-chip-facebook { background: #1877F222; color: #1877F2; }
.cal-pop-title { font-size: 1.05rem; font-weight: 700; color: #2C1D0A; margin: 0 0 10px; line-height: 1.3; padding-right: 16px; }
.cal-pop-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.cal-pop-row { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; color: #4A3A28; }
.cal-pop-ico { color: #C4794A; flex: 0 0 auto; margin-top: 1px; display: inline-flex; }
.cal-pop-excerpt { font-size: .82rem; line-height: 1.5; color: #6B5A42; margin: 0 0 14px; }
.cal-pop-btn { display: inline-block; font-size: .85rem; font-weight: 600; color: #fff !important; background: #C4794A; padding: 8px 16px; border-radius: 100px; text-decoration: none; }
.cal-pop-btn:hover { background: #A8633A; }
.cal-pop-backdrop { position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,.22); }
.cal-pop-backdrop[hidden] { display: none; }

@media (max-width: 640px) {
  .cal-popover { position: fixed; left: 50%; top: auto; bottom: 16px; transform: translateX(-50%); width: calc(100% - 24px); max-height: 80vh; overflow: auto; }
  .cal-pop-backdrop { background: rgba(0,0,0,.35); }
  .events-calendar { padding: 14px 10px 18px; }
  .cal-grid { gap: 3px; }
  .cal-dow { font-size: .62rem; padding: 2px 0; }
  .cal-cell { min-height: 46px; padding: 3px 2px; }
  .cal-daynum { font-size: .72rem; margin-bottom: 2px; }
  /* Compact event bars on small screens — tap a bar to open the detail card */
  .cal-event { height: 7px; width: 100%; padding: 0; margin: 2px 0 0; border-radius: 3px; text-indent: -9999px; overflow: hidden; white-space: nowrap; }
  .cal-title { font-size: 1.05rem; min-width: 120px; }
  .cal-header { gap: 8px; flex-wrap: wrap; }
  .cal-todaybtn { position: static; transform: none; margin-left: 6px; padding: 5px 10px; }
  .events-viewtoggle { display: flex; width: 100%; }
  .events-viewtoggle .vt-btn { flex: 1; padding: 9px 0; }
}
/* Calendar legend wraps neatly on very small screens */
@media (max-width: 380px) {
  .cal-legend { flex-wrap: wrap; gap: 10px; font-size: .75rem; }
  .cal-pop-thumb { height: 100px; }
}

/* Single event page: attached photo gallery */
.event-gallery { margin-top: 36px; }
.event-gallery-title { font-size: 1.3rem; font-weight: 700; color: #2C1D0A; margin: 0 0 16px; }

/* ============================ Past-event highlights carousel ============================ */
.highlights { padding: 56px 0; background: #F8EDD8; }
.hl-carousel { position: relative; margin: 22px auto 0; max-width: 960px; }
.hl-viewport { overflow: hidden; border-radius: 16px; }
.hl-track { display: flex; transition: transform .5s ease; }
.hl-slide { position: relative; flex: 0 0 100%; display: block; aspect-ratio: 16 / 9; text-decoration: none; background: #1A120A; overflow: hidden; }
.hl-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(22px) brightness(0.55); transform: scale(1.12); }
.hl-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.hl-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(20,12,4,.78) 0%, rgba(20,12,4,.25) 45%, rgba(20,12,4,0) 70%); }
.hl-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 26px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hl-chip { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; color: #fff; }
.hl-chip-manual { background: #C4794A; }
.hl-chip-facebook { background: #1877F2; }
.hl-title { color: #fff; font-size: 1.5rem; font-weight: 700; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hl-date { color: #F3E7D2; font-size: .9rem; }
.hl-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: #2C1D0A; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background .15s; }
.hl-arrow:hover { background: #fff; }
.hl-prev { left: 14px; }
.hl-next { right: 14px; }
.hl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.hl-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: #E0CFB2; cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
.hl-dot.active { background: #C4794A; transform: scale(1.25); }
@media (max-width: 640px) {
  .highlights { padding: 40px 0; }
  .hl-slide { aspect-ratio: 4 / 3; }
  .hl-caption { padding: 18px 18px; }
  .hl-title { font-size: 1.15rem; }
  .hl-arrow { width: 38px; height: 38px; font-size: 1.3rem; }
  .hl-prev { left: 8px; }
  .hl-next { right: 8px; }
}