/*
 * Stibnite Advisory Council — WordPress Landing Page Styles
 * ──────────────────────────────────────────────────────────
 * Enqueue this stylesheet in your WordPress theme via functions.php.
 * Designed for the Gutenberg block editor (block markup patterns).
 *
 * Font dependencies (enqueue separately via Google Fonts or local):
 *   Sans:  Public Sans  — https://fonts.google.com/specimen/Public+Sans
 *   Serif: Newsreader   — https://fonts.google.com/specimen/Newsreader
 */

/* In-page anchor scrolling.
   `scroll-behavior: smooth` animates jumps from links like "#permitting"
   (FAQ pills) or "#upcoming" (meeting schedule). Per-target offsets are
   set with `scroll-margin-top` on the target element below (sticky-header
   safe — works with both browser-driven scroll and JS scrollIntoView).
   `scroll-padding-top` on the root is unreliable on this site because
   `overflow-x: clip` on html/body changes how the scroll container
   resolves. */
html {
  scroll-behavior: smooth;
}

/* Sticky-header offset for in-page anchor jumps. FAQ category offsets
   are handled by faq-pills.js (computed scrollTo). */
[id="upcoming"] {
  scroll-margin-top: 160px;
}

/* ─── Global: prevent horizontal overflow on mobile ───────────────────────
   Using `overflow-x: clip` instead of `hidden` so the body doesn't become
   a scroll container — that would break `position: sticky` on the header.
   `clip` clips overflow without making the element scrollable.
   Browser support: Chrome 90+ / Safari 16+ / Firefox 81+ (≈95% of users).
   `overflow-x: hidden` is kept as a fallback before the `clip` rule for
   older browsers — they'll still avoid horizontal scroll but lose the
   sticky header. */
html,
body {
  overflow-x: hidden !important;
  overflow-x: clip !important;
  max-width: 100% !important;
}

/* ─── Global: lock Newsreader to text-grade glyphs ───────────────────────
   Newsreader loads as a variable font with an optical-size (opsz) axis.
   The browser default is font-optical-sizing:auto, which swaps in
   "display-grade" glyph variants at large font sizes — visible flourish
   on terminals and noticeably different from the legacy static
   Newsreader the site was designed with. We force opsz off site-wide so
   Newsreader renders as the static text-grade variant everywhere, then
   selectively re-enable it on the next-meeting card's date value where
   we DO want the display variant. */
html {
  font-optical-sizing: none;
}

/* ─── Third-party plugin suppression ────────────────────────────────────── */
/* Responsive Menu Pro plugin is superseded by the WP navigation block */
[id^="rmp_menu_trigger"],
[id^="rmp-container"],
.rmp_menu_trigger,
.rmp-container {
  display: none !important;
}

/* ─── Design Tokens ──────────────────────────────────────────────────────── */

/* SAC_V2 brand palette (designer hand-off, June 2026):
   cream #eae2d4 · ink #4f4a3f · sage #938a6e · sienna #8f5a38
   apricot #e89d5d · maroon #633028 */
:root {
  --sac-bg: #e5e1d4; /* warm cream — page background */
  --sac-surface: #f4f0e4; /* lifted cream — cards / panels */
  --sac-surface-strong: #eae2d4; /* brand cream */
  --sac-surface-muted: #ddd6c5;
  --sac-surface-slate: #d3cdba;
  --sac-border: #a59d89;
  --sac-border-strong: #7c7565;
  --sac-accent: #504a40; /* charcoal-olive ink — primary brand color (SAC brand #504A40) */
  --sac-accent-soft: #7c7565;
  --sac-gold: #8f5a38; /* sienna — accent on light surfaces */
  --sac-fg: #504a40; /* body text (SAC brand #504A40) */
  /* Secondary / muted body text. alpha 0.84 is the lowest value that clears
     WCAG AA 4.5:1 on BOTH page backgrounds:
       on --sac-bg  #e5e1d4 → 4.64:1
       on --sac-surface #f4f0e4 → 5.11:1
     Do not lower it. Borders/dividers/shadows keep their own lower alphas —
     they are not text and are not bound by the 4.5:1 rule. */
  --sac-fg-muted: rgba(79, 74, 63, 0.84);
  /* Footer link apricot, lightened until it clears 4.5:1 on the charcoal
     footer (--sac-accent #504a40). Full --sac-apricot #e89e5e is only
     3.96:1 there, so links get their own accessible pair. */
  --sac-apricot-link: #eeb27c; /* 4.72:1 on #504a40 */
  --sac-apricot-link-hover: #f2bb88; /* 5.11:1 on #504a40 */
  --sac-shadow: rgba(79, 74, 63, 0.1);
  --sac-olive: #938a6e; /* sage olive — secondary surface */
  --sac-olive-deep: #7d7459; /* deeper sage */
  --sac-apricot: #e89e5e; /* apricot — accent on dark surfaces (SAC brand #E89E5E) */
  --sac-maroon: #643129; /* deep maroon-brown — accent on sage (SAC brand #643129) */
  --sac-steel: #938a6e; /* legacy alias → sage */
  --sac-blue: #e89d5d; /* legacy alias → apricot */
}

/* ─── Base Typography ────────────────────────────────────────────────────── */

.sac-page,
.sac-page * {
  box-sizing: border-box;
}

.sac-page {
  font-family: "Public Sans", sans-serif;
  color: var(--sac-fg);
  background-color: var(--sac-bg);
}

/* Serif (used for h1, h2, large headings) */
.sac-page h1,
.sac-page .wp-block-heading[style*="font-size:60px"],
.sac-page .wp-block-heading[style*="font-size:48px"] {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
}

/* ─── Section Label ──────────────────────────────────────────────────────── */
/* Usage: add class "sac-label" to a paragraph block */

.sac-label,
.sac-page .wp-block-group .sac-label {
  font-size: 11px !important;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
}

/* ─── Hero Section ───────────────────────────────────────────────────────── */
/*
 * Wrap the entire hero wp:group with class "sac-hero-outer"
 * on the outer full-width group block.
 */

.sac-hero-outer {
  background-color: #e8e4d9;
}

/* The two-column layout inside the hero */
.sac-hero-outer > .wp-block-columns {
  align-items: center;
  gap: 56px;
}

/* Left column: stack children with breathing room */
.sac-hero-outer .wp-block-column:first-child {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* H1 — serif, tight leading */
.sac-hero-outer h1.wp-block-heading {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 72px) !important;
  line-height: 0.95 !important;
  color: var(--sac-accent);
  max-width: 18ch;
}

/* Eyebrow paragraph */
.sac-hero-outer .sac-eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
  color: var(--sac-accent-soft) !important;
}

/* Body copy under the heading */
.sac-hero-outer .sac-body {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  max-width: 56ch;
}

/* ─── Hero Buttons ───────────────────────────────────────────────────────── */

/* Primary filled button
   Note: WP places className on the wrapper div (.wp-block-button), so we must
   target .wp-block-button__link (the <a>) to override style.css defaults. */
/* style.css line 288 sets .wp-block-button { text-transform: none; letter-spacing: .03em }
   Override on all SAC-managed buttons so they never go ALL CAPS. */
.sac-btn-primary,
.sac-btn-outline,
.sac-btn-archive {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sac-hero-outer .wp-block-button:first-child .wp-block-button__link,
.sac-btn-primary .wp-block-button__link {
  background-color: var(--sac-accent) !important;
  color: #ffffff !important;
  border-radius: 100px !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  transition: opacity 160ms ease;
}

.sac-hero-outer .wp-block-button:first-child .wp-block-button__link:hover,
.sac-btn-primary .wp-block-button__link:hover {
  opacity: 0.88;
}

/* CTA arrow — universal pseudo-arrow + animation on every .sac-btn-*
   button. The inline "→" character is stripped from button text in
   the DB/blocks so this `::after` is the single source of truth and
   can animate on hover. .sac-btn-archive links to PDFs are excluded
   (they use a leading ↓ icon, not a trailing arrow). */
.sac-btn-primary .wp-block-button__link::after,
.sac-btn-outline .wp-block-button__link::after,
.sac-btn-archive .wp-block-button__link:not([href*=".pdf"])::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.sac-btn-primary .wp-block-button__link:hover::after,
.sac-btn-outline .wp-block-button__link:hover::after,
.sac-btn-archive .wp-block-button__link:not([href*=".pdf"]):hover::after {
  transform: translateX(4px);
}

/* "View details →" inside the Next Meeting card. Supports both
   markup variants:
     - home page: <p class="sac-next-meeting-link"><a>View details</a></p>
     - meeting-info block: <p class="sac-next-meeting-link">View details</p>
       (whole card is wrapped in an anchor at .sac-next-meeting). */
.sac-next-meeting-link::after,
.sac-next-meeting-link a::after {
  content: "\2192";
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s ease;
}
/* Avoid double arrows: if there's an <a> inside, only show the
   arrow on the <a> (not the <p>). */
.sac-next-meeting-link:has(a)::after {
  content: none;
}
.sac-next-meeting-link a:hover::after,
.sac-next-meeting:hover .sac-next-meeting-link::after,
.sac-next-meeting:hover .sac-next-meeting-link a::after {
  transform: translateX(4px);
}

/* Search results "Read more" excerpt link */
.wp-block-post-excerpt__more-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.wp-block-post-excerpt__more-link:hover::after {
  transform: translateX(4px);
}

/* Search results pagination */
.sac-search-pagination .wp-block-query-pagination-next::after {
  content: "\2192";
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}
.sac-search-pagination .wp-block-query-pagination-next:hover::after {
  transform: translateX(4px);
}
.sac-search-pagination .wp-block-query-pagination-previous::before {
  content: "\2190";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.2s ease;
}
.sac-search-pagination .wp-block-query-pagination-previous:hover::before {
  transform: translateX(-4px);
}

/* Outline buttons */
.sac-hero-outer .wp-block-button.is-style-outline .wp-block-button__link,
.sac-btn-outline .wp-block-button__link {
  background-color: var(--sac-surface) !important;
  color: var(--sac-accent) !important;
  border: 1px solid var(--sac-border-strong) !important;
  border-radius: 100px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.sac-hero-outer .wp-block-button.is-style-outline .wp-block-button__link:hover,
.sac-btn-outline .wp-block-button__link:hover {
  border-color: var(--sac-accent) !important;
}

/* Button row — flex wrap, gap between buttons */
.sac-hero-outer .wp-block-buttons,
.sac-hero-outer .wp-block-buttons.is-layout-flex {
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* ─── Next Meeting Panel — see overrides section at bottom of file ─────────── */

/* ─── Hero Image Placeholder (right column) ──────────────────────────────── */
/*
 * Add class "sac-image-placeholder" to the right-column group block.
 * This replicates the grid-pattern + diagonal-X wireframe placeholder.
 */

.sac-image-placeholder {
  position: relative !important;
  min-height: 420px;
  border-radius: 28px !important;
  border: 1px solid var(--sac-border) !important;
  background-color: var(--sac-surface-slate) !important;
  overflow: hidden !important;

  /* Grid pattern */
  background-image:
    linear-gradient(to right, rgba(124, 117, 101, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(124, 117, 101, 0.12) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}

/* Diagonal X lines */
.sac-image-placeholder::before,
.sac-image-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(100% - 32px);
  height: 1px;
  background: rgba(79, 74, 63, 0.28);
  pointer-events: none;
}

.sac-image-placeholder::before {
  transform: rotate(16deg);
}

.sac-image-placeholder::after {
  transform: rotate(-16deg);
}

/* When a real image is present: hide grid, lines, and border */
.sac-image-placeholder:has(.wp-block-image) {
  background-image: none !important;
  border-color: transparent !important;
}
.sac-image-placeholder:has(.wp-block-image)::before {
  display: none !important;
}

/* Subtle gradient overlay at the bottom edge */
.sac-image-placeholder:has(.wp-block-image)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  background: linear-gradient(
    to bottom,
    transparent 55%,
    rgba(42, 39, 33, 0.28) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Image fills the placeholder container */
.sac-image-placeholder .wp-block-image {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  line-height: 0 !important;
}
.sac-image-placeholder .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  display: block !important;
  border-radius: 0 !important;
  filter: saturate(1.12) contrast(1.06) !important;
}

/* "Image Placeholder" badge (top-left) */
.sac-image-placeholder .sac-placeholder-badge {
  position: absolute !important;
  top: 20px;
  left: 20px;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--sac-accent-soft) !important;
  background-color: var(--sac-surface) !important;
  border: 1px solid rgba(124, 117, 101, 0.5);
  border-radius: 100px;
  padding: 4px 12px;
  display: inline-block;
}

/* Caption label (bottom-left) */
.sac-image-placeholder .sac-placeholder-caption {
  position: absolute !important;
  bottom: 20px;
  left: 20px;
  font-size: 13px !important;
  color: var(--sac-fg-muted) !important;
}

/* Tall hero variant */
@media (min-width: 1024px) {
  .sac-hero-outer .sac-image-placeholder {
    min-height: 620px;
  }
}

/* Inside a stretch column (about section), fill the full height */
.are-vertically-aligned-stretch .sac-image-placeholder {
  height: 100%;
  min-height: 360px;
}

/* ─── Card Shadow Utility ────────────────────────────────────────────────── */

.sac-card-shadow {
  box-shadow: 0 10px 30px var(--sac-shadow);
}

/* ─── Quick Access Cards ─────────────────────────────────────────────────── */
/*
 * Add class "sac-card" to individual article/group blocks in the
 * quick access cards section.
 */

.sac-cards-section {
  background-color: rgba(221, 214, 197, 0.55);
  padding-top: 56px;
  padding-bottom: 56px;
  /* Horizontal padding handled by the inner grid's max-width formula so
     the card row aligns with the hero (same min(1200px, 100% - 48px) cap). */
  padding-left: 0;
  padding-right: 0;
}

.sac-cards-grid.wp-block-columns {
  gap: 24px !important;
  margin-top: 0 !important;
  max-width: min(1200px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sac-section-heading {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  line-height: 1.15 !important;
  color: var(--sac-accent) !important;
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}

.sac-section-description {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--sac-fg-muted) !important;
  max-width: 680px;
  margin-bottom: 40px !important;
}

/* Cards grid: every column stretches and the card inside fills the column,
   so a longer headline in one card grows all three to the same height. */
.sac-cards-grid > .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
}

.sac-card {
  border-radius: 18px !important;
  border: none !important;
  /* Warm off-white — softer than pure white, sits more naturally on the
     muted-tan section background. */
  background-color: var(--sac-surface) !important;
  padding: 28px !important;
  box-shadow: 0 4px 14px rgba(79, 74, 63, 0.07);
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.sac-card:has(:any-link):hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(79, 74, 63, 0.12);
}

/* Pin the action link to the bottom regardless of how short the body is.
   padding-top sets the MINIMUM gap above the link when the body grows
   tall enough to push against it; on shorter bodies, margin-top:auto
   pushes the link further down. 8px read as too tight visually, so
   bumped to 24px to match the card's overall vertical rhythm. */
.sac-card .sac-action-link-wrap {
  margin-top: auto !important;
  padding-top: 14px !important;
}

.sac-card .sac-card-label {
  font-size: 15px !important;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 600;
  color: var(--sac-gold) !important;
  margin: 0 !important;
}

.sac-card h3.wp-block-heading {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: 28px !important;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--sac-accent) !important;
  margin-top: 10px !important;
  text-wrap: balance;
  /* Reserve room for 2 lines so a short title (1 line) still leaves room
     and the body copy aligns horizontally across all cards in the row. */
  min-height: 2.1em !important;
}

.sac-card .sac-card-body {
  font-size: 15px !important;
  line-height: 1.6;
  color: var(--sac-fg-muted) !important;
  margin-top: 4px !important;
}

/* Action link — used in quick access cards (sac-action-link-wrap paragraph).
   The arrow is rendered as a pseudo-element so it can slide on card hover
   without disturbing the link text. Text + underline + arrow all use the
   gold accent for a unified orange link treatment.
   We use border-bottom (not text-decoration:underline) so the underline
   draws as ONE continuous line under the entire inline-flex box,
   spanning the gap between the text and the ::after arrow. With
   text-decoration the underline is drawn per flex child and breaks at
   the gap. */
.sac-action-link-wrap a {
  color: var(--sac-gold) !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid currentColor !important;
  padding-bottom: 1px !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Pseudo-element arrow on every action link — uniform across the site.
   Inline " →" was stripped from link text in HTML + DB content; this
   pseudo arrow is the single source of truth so it can animate
   consistently on hover (either the link itself or its parent card). */
.sac-action-link-wrap a::after {
  content: "\2192";
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  transition: transform 0.2s ease;
}

.sac-action-link-wrap a:hover::after,
.sac-card:has(:any-link):hover .sac-action-link-wrap a::after,
.sac-initiative-card:has(:any-link):hover .sac-action-link-wrap a::after {
  transform: translateX(4px);
}

.sac-action-link {
  font-size: 14px !important;
  font-weight: 600;
  color: var(--sac-accent) !important;
  /* border-bottom keeps the gold underline continuous across the
     inline-flex gap between the link text and its trailing arrow. */
  text-decoration: none !important;
  border-bottom: 1px solid var(--sac-gold) !important;
  padding-bottom: 1px !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px !important;
}

/* ─── FAQ Accordion Rows ─────────────────────────────────────────────────── */

.sac-faq-row {
  border-radius: 24px !important;
  border: 1px solid var(--sac-border) !important;
  background-color: var(--sac-surface) !important;
  padding: 20px 20px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sac-faq-row h3.wp-block-heading {
  font-family: "Public Sans", sans-serif;
  font-size: 15px !important;
  font-weight: 600;
  color: var(--sac-accent) !important;
  margin: 0 !important;
}

.sac-faq-row .sac-faq-toggle {
  font-size: 20px;
  color: var(--sac-gold) !important;
  flex-shrink: 0;
}

/* ─── Responsive Adjustments ─────────────────────────────────────────────── */

@media (max-width: 768px) {
  .sac-hero-outer > .wp-block-columns {
    flex-direction: column !important;
  }

  .sac-next-meeting {
    border-radius: 20px !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
  }

  /* Center the dot + date stack as a group, then center text inside */
  .sac-next-meeting-date {
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid var(--sac-border);
    padding-bottom: 12px;
    width: 100%;
    justify-content: center !important;
  }

  .sac-meeting-date-stack {
    align-items: center !important;
  }

  .sac-next-meeting-time {
    padding: 0 !important;
    align-items: center !important;
    width: 100%;
  }

  .sac-next-meeting-link {
    width: 100%;
  }
}

/* ─── CSS-class-driven overrides (for block-pattern approach) ─────────────── */
/*
 * The hero-pattern.html uses only className attributes — no inline block styles.
 * All visual styling lives here instead, keeping block markup minimal and valid.
 */

/* Outer hero section: padding and background */
.sac-hero-outer {
  padding: 80px 60px !important;
}

/* H1 heading class (used via className on wp:heading) */
.sac-hero-heading {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5.5vw, 72px) !important;
  line-height: 0.95 !important;
  color: var(--sac-accent) !important;
  max-width: 18ch;
  margin-top: 0 !important;
}

/* Eyebrow paragraph — small label above section titles */
.sac-eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 600;
  color: var(--sac-accent-soft) !important;
  margin: 0 !important;
}

/* Body paragraph */
.sac-body {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  max-width: 56ch;
  margin-top: 0 !important;
}

/* Next Meeting panel: outer pill — sits one tonal step above the page bg
   (sac-surface-muted on sac-bg) with a hair-thin border and no shadow,
   so it reads as "part of the page" rather than a hovering card.
   Lifts on hover with the same 4px translate + drop-shadow used by the
   quick-access cards below it, so the interaction reads consistently. */
.sac-next-meeting {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  border: 1px solid rgba(124, 117, 101, 0.18) !important;
  border-radius: 30px !important;
  padding: 14px 24px !important;
  background-color: var(--sac-surface-muted) !important;
  box-shadow: none !important;
  margin-top: 8px !important;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}

.sac-next-meeting:has(:any-link):hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px rgba(79, 74, 63, 0.12) !important;
}

/* Date section: gold dot (::before) + stacked text, with right border
   divider (tinted with the logo blue so the card reads as part of the
   palette). */
.sac-next-meeting-date {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding-right: 20px !important;
  border-right: 1px solid rgba(147, 138, 110, 0.45) !important;
  margin: 0 !important;
}

/* Gold dot — rendered as CSS so no extra markup needed in native block version */
.sac-next-meeting-date::before {
  content: "";
  display: block;
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sac-gold);
  flex-shrink: 0;
  align-self: center;
}

/* Full-card click target via the "View details" link overlay */
.sac-next-meeting-link a {
  color: inherit;
  text-decoration: none;
}
.sac-next-meeting-link a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
}

/* Inner text column inside date section — even visual spacing between
   the three lines (label / date / subtitle) is achieved by normalising
   line-heights and using a single shared gap. */
.sac-meeting-date-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* Time section — same label-to-value gap as the date stack (8px) so
   the "TIME" label aligns horizontally with "NEXT MEETING" and the
   "10:00 AM MT" value aligns horizontally with the date value. */
.sac-next-meeting-time {
  flex: 1 !important;
  padding: 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
}

/* "View details →" — parent center-aligns flex items, so the link
   sits at the card's vertical midline next to the date value. */
.sac-next-meeting-link {
  font-size: 12px !important;
  font-weight: 500;
  color: var(--sac-fg-muted) !important;
  white-space: nowrap;
  margin: 0 !important;
}

/* Labels: "NEXT MEETING", "TIME" — wide-tracked uppercase in the
   primary accent so the eyebrow reads as a heading, not a caption. */
.sac-meeting-label {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: var(--sac-accent) !important;
  line-height: 1;
  margin: 0 !important;
}

/* Date value: "Month DD, YYYY" */
.sac-meeting-date-value {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--sac-accent) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Subtitle: "2nd Thursday of every month" */
.sac-meeting-subtitle {
  font-size: 11px !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
  line-height: 1 !important;
}

/* Time value: "10:00 AM MT" */
.sac-meeting-time-value {
  font-size: 16px !important;
  font-weight: 600;
  color: var(--sac-accent) !important;
  line-height: 1.1;
  margin: 0 !important;
}

/* Image placeholder: min-height via CSS (not block dimension attribute) */
.sac-image-placeholder {
  min-height: 420px !important;
}

/* "Image Placeholder" badge */
.sac-placeholder-badge {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--sac-accent-soft) !important;
  background-color: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(124, 117, 101, 0.5);
  border-radius: 100px;
  padding: 4px 12px;
  display: inline-block;
  margin: 0 !important;
}

/* Caption text */
.sac-placeholder-caption {
  font-size: 13px !important;
  color: var(--sac-fg-muted) !important;
  margin: auto 0 0 !important;
}

/* Left column children: vertical spacing */
.sac-hero-outer .wp-block-column:first-child {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Button row gap */
.sac-hero-outer .wp-block-buttons {
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* Mobile: reduce padding, floor image placeholder */
@media (max-width: 768px) {
  .sac-hero-outer {
    padding: 32px 20px !important;
    gap: 24px !important;
  }

  /* Image column leads on mobile */
  .sac-hero-outer > .wp-block-columns > .wp-block-column:last-child {
    order: -1 !important;
  }

  .sac-hero-outer .sac-image-placeholder {
    min-height: 240px !important;
    border-radius: 16px !important;
  }

  /* Scale heading down and tighten spacing */
  .sac-hero-heading {
    font-size: clamp(28px, 7.5vw, 38px) !important;
    overflow-wrap: break-word !important;
    margin-bottom: 12px !important;
  }

  /* Tighten eyebrow → heading gap */
  .sac-eyebrow {
    margin-bottom: 8px !important;
  }

  /* Full-width next meeting card on mobile */
  .sac-next-meeting {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    border-radius: 20px !important;
    gap: 12px !important;
  }

  .sac-next-meeting-date {
    border-right: none !important;
    border-bottom: 1px solid var(--sac-border) !important;
    padding-right: 0 !important;
    padding-bottom: 12px !important;
    width: 100% !important;
  }

  .sac-next-meeting-time {
    padding: 0 !important;
  }
}

@media (min-width: 1024px) {
  .sac-image-placeholder {
    min-height: 580px !important;
  }
}

/* ─── Hero: mid-range tablets (769px – 1099px) ───────────────────────────── */
@media (min-width: 769px) and (max-width: 1099px) {
  .sac-hero-outer {
    padding: 56px 40px !important;
  }

  /* Tighten column gap so each column gets more room */
  .sac-hero-outer > .wp-block-columns {
    gap: 32px !important;
  }

  /* Scale heading down a step */
  .sac-hero-heading,
  .sac-hero-outer h1.wp-block-heading {
    font-size: clamp(32px, 4.5vw, 52px) !important;
  }

  /* Compact the Next Meeting card */
  .sac-next-meeting {
    padding: 12px 16px !important;
  }

  /* Shorten the date section so the time section gets breathing room */
  .sac-next-meeting-date {
    padding-right: 12px !important;
  }

  /* Hide subtitle ("2nd Thursday of every month") — main date is enough */
  .sac-meeting-subtitle {
    display: none !important;
  }

  /* Give the time section a real floor width and reduce its padding */
  .sac-next-meeting-time {
    padding: 0 10px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
  }

  /* Prevent label / value from ever wrapping */
  .sac-meeting-label,
  .sac-meeting-time-value,
  .sac-meeting-date-value {
    white-space: nowrap !important;
  }
}

/* ─── Hero: narrow-medium (769px – 900px) — stack columns ───────────────── */
@media (min-width: 769px) and (max-width: 900px) {
  .sac-hero-outer > .wp-block-columns {
    flex-direction: column !important;
    gap: 28px !important;
  }

  /* Both columns go full-width when stacked */
  .sac-hero-outer > .wp-block-columns > .wp-block-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Image column floats to the top */
  .sac-hero-outer > .wp-block-columns > .wp-block-column:last-child {
    order: -1 !important;
  }

  .sac-hero-outer .sac-image-placeholder {
    min-height: 340px !important;
  }

  .sac-hero-heading,
  .sac-hero-outer h1.wp-block-heading {
    font-size: clamp(30px, 5.5vw, 42px) !important;
  }
}

/* ─── Site Header ────────────────────────────────────────────────────────── */

/* Make the header template-part wrapper sticky (NOT just the inner
   .sac-site-header). Sticky elements only persist within their
   parent's height; the inner header's parent (.wp-block-template-part)
   is the same height as the header itself, so sticking the inner
   doesn't actually keep it visible when scrolling. The template-part
   wrapper is a direct child of .wp-site-blocks (the full-page flex
   container), so sticking it makes the header stay at the top of the
   viewport throughout the entire scroll. Targeting `header.wp-block-
   template-part` covers only the site header — the footer template-
   part renders as `<footer>` so it's unaffected. Belt-and-braces:
   also stick the inner .sac-site-header in case some browser quirk
   ignores the wrapper rule. */
/* FIXED, not sticky: iOS Safari re-resolves sticky offsets per scroll frame
   and the pill visibly jittered on some pages no matter the structure.
   position:fixed is compositor-pinned in WebKit and cannot jitter. The body
   padding below replaces the header's former in-flow height, so the existing
   `margin-top: calc(-1 * var(--sac-header-h))` hero pull-ups keep working
   unchanged.
   NO transform/will-change on this wrapper: a transform here becomes the
   containing block for position:fixed descendants — the mobile menu overlay
   and its search bar would anchor to the header instead of the viewport
   (broke the overlay into a truncated band when tried). */
header.wp-block-template-part {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}
body {
  padding-top: var(--sac-header-h) !important;
}
/* Logged-in editors: clear the WP admin bar */
body.admin-bar header.wp-block-template-part {
  top: var(--wp-admin--admin-bar--height, 32px) !important;
}
/* The inner header keeps no positioning of its own (double-positioning was
   the first jitter source found). */
header.sac-site-header {
  position: static !important;
}

.sac-site-header {
  background: var(--sac-bg) !important;
  border-bottom: 1px solid rgba(165, 157, 137, 0.55) !important;
}

.sac-header-inner {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 14px 32px !important;
  gap: 32px !important;
  align-items: center !important;
}

/* Logo box — dashed gold border placeholder */
.sac-logo-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border: 1px dashed var(--sac-gold) !important;
  border-radius: 10px !important;
  background: var(--sac-surface-muted) !important;
  text-decoration: none !important;
}
.sac-logo-box span {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-gold) !important;
  line-height: 1 !important;
}

/* Brand group */
.sac-header-brand {
  gap: 12px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

/* Site title — override the global h1 uppercase from style.css */
.sac-site-header .wp-block-site-title,
.sac-site-header .wp-block-site-title a,
.sac-site-header .wp-block-site-title h1,
.sac-site-header .wp-block-site-title span {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  color: var(--sac-accent) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Nav — take available middle space, no wrapping */
.sac-site-nav {
  flex: 1 !important;
  justify-content: center !important;
}
.sac-site-nav .wp-block-navigation__container {
  flex-wrap: nowrap !important;
  gap: 28px !important;
  align-items: center !important;
}
.sac-site-nav .wp-block-navigation-item {
  white-space: nowrap !important;
}
.sac-site-nav .wp-block-navigation-item__content {
  font-family: "Public Sans", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--sac-fg-muted) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
  transition: color 150ms ease !important;
}
.sac-site-nav .wp-block-navigation-item__content:hover {
  color: var(--sac-accent) !important;
}

/* ─── Navigation ─────────────────────────────────────────────────────────────
   overlayMenu:"always" — WP always renders hamburger + overlay in DOM.
   ≥1200px: CSS overrides hidden-by-default to show nav inline (all 6 items fit).
   <1200px: hamburger shown by default (WP's own CSS), overlay opens full-screen. */

/* ── Desktop (≥1024px): inline nav ──────────────────────────────────────── */
@media (min-width: 1024px) {
  /* Inline nav from 1024px up. The brand wordmark, nav labels, gaps, and search
     use responsive clamps (below) so the row shrinks to fit smaller laptops
     instead of overflowing the pill. Below 1024 the hamburger overlay is used. */
  .sac-site-nav .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  /* Reveal overlay container as static inline flow */
  .sac-site-nav .wp-block-navigation__responsive-container,
  .sac-site-nav .wp-block-navigation__responsive-container.hidden-by-default {
    display: flex !important;
    visibility: visible !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    inset: auto !important;
    z-index: auto !important;
    overflow: visible !important;
    align-items: center !important;
  }

  /* Collapse the wrapper divs — they have no visual purpose inline */
  .sac-site-nav .wp-block-navigation__responsive-close,
  .sac-site-nav .wp-block-navigation__responsive-dialog,
  .sac-site-nav .wp-block-navigation__responsive-container-content {
    display: contents !important;
  }

  /* Close button not needed on desktop */
  .sac-site-nav .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  /* Inline nav list */
  .sac-site-nav .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Nav link styles */
  .sac-site-nav .wp-block-navigation-item__content {
    color: var(--sac-fg) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 4px 0 !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
  }
  .sac-site-nav .wp-block-navigation-item__content:hover {
    color: var(--sac-accent) !important;
    background: transparent !important;
    opacity: 0.75 !important;
  }
}

/* ── Hamburger button (shown by WP default below 1200px) ─────────────────── */
.sac-site-nav .wp-block-navigation__responsive-container-open {
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.sac-site-nav .wp-block-navigation__responsive-container-open svg {
  fill: var(--sac-accent) !important;
  width: 24px !important;
  height: 24px !important;
}

/* Overlay when open — full-screen dark teal */
.sac-site-nav .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--sac-accent) !important;
  padding: 32px 24px !important;
  overflow-y: auto !important;
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  padding: 16px 20px !important;
  border-radius: 16px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: block !important;
  white-space: normal !important;
}
/* The site-wide header rule (`.sac-site-header .sac-site-nav … __label`) paints
   the label text charcoal for the cream nav bar. In the open mobile overlay the
   background is also charcoal (--sac-accent), so that label color renders the
   links invisible. Re-paint the label cream here with matching specificity so
   the menu text is legible. The current-item gold rule is higher specificity and
   intentionally still wins (gold reads fine on the dark overlay). */
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content,
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content
  .wp-block-navigation-item__label {
  color: rgba(255, 255, 255, 0.9) !important;
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover,
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover
  .wp-block-navigation-item__label {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  opacity: 1 !important;
}
/* Tapping / selecting an item must read as ONE clean highlight box. Two things
   created the "box within a box":
     1. the inner box = the browser SELECTING the link text on tap
        (text-selection highlight) → kill it with user-select:none + a
        transparent ::selection.
     2. the outer box = the default focus ring stacked on the background
        → remove outline/box-shadow on focus/active.
   Also suppress the mobile tap-flash. The single rounded background is then the
   only selected-state box. */
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content,
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content
  .wp-block-navigation-item__label,
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::selection,
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__label::selection {
  background: transparent !important;
}
/* Plain :focus must paint NOTHING: the overlay auto-focuses its first item
   (Home) on open, so a focus background renders as a stuck "box" around it
   on every visit. Touch feedback comes from :active; keyboard users get a
   clear :focus-visible outline instead. */
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus,
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus
  .wp-block-navigation-item__label {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:active {
  outline: none !important;
  box-shadow: none !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:active
  .wp-block-navigation-item__label {
  background: transparent !important;
  color: #fff !important;
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6) !important;
  outline-offset: 4px !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* The label span must never paint its own background box — only the link
   wrapper carries the single highlight. */
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content
  .wp-block-navigation-item__label {
  background: transparent !important;
}
.sac-site-nav .wp-block-navigation__responsive-container-close {
  align-self: flex-end !important;
  margin-bottom: 16px !important;
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
}
.sac-site-nav .wp-block-navigation__responsive-container-close svg {
  fill: #fff !important;
  width: 24px !important;
  height: 24px !important;
}

/* ─── About Section: light editorial header ──────────────────────────────── */

.sac-about-section {
  background: transparent !important;
  color: var(--sac-fg) !important;
  /* Horizontal padding handled by the inner header's max-width formula so
     the section aligns with the hero (same min(1200px, 100% - 48px) cap). */
  padding: 88px 0 !important;
}

.sac-about-header.wp-block-columns {
  gap: 48px !important;
  align-items: flex-start !important;
  max-width: min(1200px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
}

/* Small gold accent bar above the title */
.sac-about-header-left {
  position: relative !important;
  padding-top: 24px !important;
}
.sac-about-header-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 3px;
  background: var(--sac-gold);
  border-radius: 2px;
}

.sac-about-title {
  font-family:
    "Public Sans",
    -apple-system,
    system-ui,
    sans-serif !important;
  font-size: clamp(34px, 4.4vw, 52px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--sac-accent) !important;
  margin: 0 0 16px !important;
  white-space: nowrap !important;
}

/* Widen the left column slightly so "About the Council." sits on one line.
   Overrides the inline flex-basis:36% set by the column block. The right
   column shrinks from 64% → 56% to balance. */
.sac-about-header.wp-block-columns > .sac-about-header-left {
  flex-basis: 44% !important;
}
.sac-about-header.wp-block-columns > .sac-about-header-right {
  flex-basis: 56% !important;
}

.sac-about-eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--sac-gold) !important;
  margin: 0 !important;
}

.sac-about-body {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(79, 74, 63, 0.85) !important;
  margin: 0 0 18px !important;
}
.sac-about-header-right .sac-about-body:last-of-type {
  margin-bottom: 24px !important;
}

.sac-about-link-wrap {
  margin: 0 !important;
}
.sac-about-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--sac-accent) !important;
  /* border-bottom (not text-decoration:underline) so the gold rule
     draws as one continuous line under both the text and the ::after
     arrow, spanning the gap between them. */
  text-decoration: none !important;
  border-bottom: 1px solid var(--sac-gold) !important;
  padding-bottom: 1px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.005em !important;
  transition:
    color 0.2s,
    border-color 0.2s !important;
}
.sac-about-link::after {
  content: "→";
  display: inline-block;
  transition: transform 0.2s;
  text-decoration: none;
}
.sac-about-link:hover {
  color: var(--sac-gold) !important;
}
.sac-about-link:hover::after {
  transform: translateX(3px);
}

/* Stat box typography — used on /about-us (164) and elsewhere */
.sac-stat-grid.wp-block-columns {
  gap: 12px !important;
  margin-top: 24px !important;
}
.sac-stat-box {
  padding: 0 !important;
}
.sac-stat-number {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: clamp(34px, 3.4vw, 44px) !important;
  font-weight: 400 !important;
  color: var(--sac-accent) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.sac-stat-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
  line-height: 1.3 !important;
}

/* Mobile: stack the two header columns */
@media (max-width: 900px) {
  .sac-about-section {
    padding: 64px 0 !important;
  }
  .sac-about-header.wp-block-columns {
    flex-direction: column !important;
    gap: 28px !important;
  }
  .sac-about-header-left,
  .sac-about-header-right {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  /* Allow the title to wrap on small viewports where nowrap would
     overflow the container. */
  .sac-about-title {
    white-space: normal !important;
  }
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */

.sac-site-footer {
  background-color: var(--sac-accent) !important;
  border-top: 1px solid var(--sac-border) !important;
  color: var(
    --sac-surface-strong
  ) !important; /* warm cream base, not cold white */
}

.sac-footer-inner {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 28px 32px !important;
  gap: 32px !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
}

.sac-footer-left {
  flex: 1 !important;
  min-width: 260px !important;
}

.sac-footer-eyebrow {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: rgba(234, 226, 212, 0.6) !important;
  margin: 0 !important;
}

.sac-footer-heading {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  line-height: 1.2 !important;
  color: var(
    --sac-surface-strong
  ) !important; /* warm cream, softer than pure white */
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

.sac-footer-body {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: rgba(234, 226, 212, 0.78) !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  max-width: 480px !important;
}

.sac-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 14px;
}
.sac-footer-nav a,
.sac-footer-nav .sac-footer-link-button {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: inherit !important;
  color: var(
    --sac-apricot-link
  ) !important; /* apricot, lightened to clear 4.5:1 on charcoal */
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  line-height: inherit !important;
  text-align: left !important;
  transition: color 150ms ease !important;
}
.sac-footer-nav a:hover,
.sac-footer-nav .sac-footer-link-button:hover,
.sac-footer-nav a:focus-visible,
.sac-footer-nav .sac-footer-link-button:focus-visible {
  color: var(
    --sac-apricot-link-hover
  ) !important; /* brighten on hover, still ≥ 4.5:1 */
  text-decoration: none !important;
}

.sac-footer-nav a:focus-visible,
.sac-footer-nav .sac-footer-link-button:focus-visible {
  outline: 2px solid var(--sac-apricot) !important;
  outline-offset: 3px !important;
  border-radius: 2px !important;
}

.sac-newsletter-box {
  flex: 0 0 380px !important;
  max-width: 100% !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 20px !important;
  padding: 16px 18px !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.sac-newsletter-box .sac-footer-eyebrow {
  display: block;
  margin-bottom: 10px !important;
}

/* Success / error message that appears above the footer signup form
   after a redirect (?newsletter=success / =invalid / =error) */
.sac-newsletter-thanks,
.sac-newsletter-error {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  color: #fff;
}
.sac-newsletter-thanks {
  background: rgba(255, 255, 255, 0.14);
}
.sac-newsletter-error {
  background: rgba(220, 80, 60, 0.45);
}

.sac-newsletter-form {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sac-newsletter-form input[type="email"] {
  flex: 1;
  min-height: 48px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: var(--sac-surface);
  color: var(--sac-accent);
  padding: 0 20px;
  font-size: 15px;
  font-family: "Public Sans", sans-serif;
  outline: none;
}
/* Sits on the charcoal footer, so the ring uses apricot (3.96:1 on
   --sac-accent) rather than the dark accent ink, which would vanish. */
.sac-newsletter-form input[type="email"]:focus-visible {
  outline: 2px solid var(--sac-apricot);
  outline-offset: 2px;
}
.sac-newsletter-form input[type="email"]::placeholder {
  color: var(--sac-fg-muted);
}
.sac-newsletter-form button {
  min-height: 48px;
  border-radius: 100px;
  border: none;
  background: var(--sac-gold);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: "Public Sans", sans-serif;
  padding: 0 24px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
}
.sac-newsletter-form button:hover {
  opacity: 0.9;
}

/* Stack the two footer link boxes vertically so each box gets the
   container's full width — keeps "Meeting summaries archive" and
   "Contact and accessibility" on a single line each. */
.sac-footer-link-grid.wp-block-columns {
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 24px !important;
}
.sac-footer-link-grid .wp-block-column {
  flex-basis: 100% !important;
  width: 100% !important;
}

.sac-footer-link-box {
  display: block !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  color: rgba(234, 226, 212, 0.82) !important;
  text-decoration: none !important;
  transition: border-color 150ms ease !important;
}
.sac-footer-link-box:hover {
  border-color: rgba(234, 226, 212, 0.35) !important;
  color: var(--sac-surface-strong) !important;
}

/* Footer: stack columns at 900px */
@media (max-width: 900px) {
  .sac-footer-inner {
    flex-direction: column !important;
  }
  .sac-newsletter-box {
    flex: none !important;
    width: 100% !important;
  }
  .sac-newsletter-form {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* Below 1024px: push hamburger to far right */
@media (max-width: 1023px) {
  .sac-site-nav {
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }
}

/* ─── Mobile (≤768px) — Cards, About, Footer ─────────────────────────────── */

@media (max-width: 768px) {
  /* Quick Access Cards: 3-col → single column.
     Horizontal spacing comes from the inner grid's max-width formula
     (min(1200px, calc(100% - 48px))) so cards stay aligned with the hero. */
  .sac-cards-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .sac-cards-grid.wp-block-columns {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .sac-cards-grid .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Footer: tighter padding on mobile */
  .sac-footer-inner {
    padding: 24px 20px !important;
    gap: 20px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEETING INFORMATION PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Shared: inner page container ─────────────────────────────────────── */
/* Reusable max-width centering wrapper used inside full-width section bands */
.sac-page-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
}

/* Legal page table of contents (Privacy Notice jump links) */
.sac-toc {
  list-style: none;
  margin: 0 0 48px;
  padding: 28px 32px;
  background: var(--sac-surface-muted);
  border: 1px solid var(--sac-border);
  border-radius: 16px;
  font-family:
    "Public Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}
.sac-toc li {
  margin: 8px 0;
  line-height: 1.5;
}
.sac-toc > li {
  font-weight: 600;
}
.sac-toc ul {
  list-style: none;
  margin: 8px 0 8px 22px;
  padding: 0;
}
.sac-toc ul li {
  font-weight: 400;
  font-size: 0.95em;
}
.sac-toc a {
  color: var(--sac-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
.sac-toc a:hover,
.sac-toc a:focus-visible {
  color: var(--sac-gold);
  text-decoration: underline;
}

/* Offset anchored headings so jump links clear the sticky header */
.sac-page-container :is(h2, h3)[id] {
  scroll-margin-top: 96px;
}

/* ─── Section 1: Page Header ────────────────────────────────────────────── */

.sac-page-header {
  background: transparent;
  padding-top: 56px;
  padding-bottom: 64px;
}

.sac-page-heading {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(32px, 4.5vw, 52px) !important;
  line-height: 1.05 !important;
  color: var(--sac-accent) !important;
  margin-top: 12px !important;
  margin-bottom: 40px !important;
}

/* Eyebrow reuse: .sac-eyebrow already defined above */

/* ─── Next Meeting Info Card ────────────────────────────────────────────── */

.sac-meeting-info-card {
  border-radius: 30px;
  border: 1px solid var(--sac-border-strong);
  overflow: hidden;
  box-shadow: 0 10px 30px var(--sac-shadow);
  background: var(--sac-surface);
}

.sac-meeting-info-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  background: var(--sac-accent);
  padding: 12px 24px;
}

/* Gold dot via pseudo-element — no extra HTML element needed */
.sac-meeting-info-header::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sac-gold);
  flex-shrink: 0;
}

.sac-meeting-header-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(234, 226, 212, 0.82) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin: 0 !important;
}

/* sac-meeting-info-grid wraps a wp:columns block — WP provides the flex layout,
   this class only handles border and responsive overrides */
.sac-meeting-info-grid.wp-block-columns {
  gap: 0 !important;
  margin-bottom: 0 !important;
}

.sac-meeting-info-col {
  padding: 24px !important;
  border-right: 1px solid var(--sac-border) !important;
}
.sac-meeting-info-col:last-child {
  border-right: none !important;
}

.sac-meeting-col-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--sac-accent-soft) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin: 0 0 8px 0 !important;
}

.sac-meeting-date-xl {
  /* Use the same sans font as the sibling values (Time, etc.) so the
     dynamic date doesn't read as a different font on the card. */
  font-family:
    "Public Sans",
    -apple-system,
    system-ui,
    sans-serif !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: var(--sac-fg) !important;
  margin: 0 !important;
  overflow-wrap: break-word;
  word-break: break-word;
}

.sac-meeting-col-value {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--sac-fg) !important;
  margin: 0 0 4px 0 !important;
}

.sac-meeting-col-sub {
  font-size: 13px !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.sac-meeting-virtual-box {
  border: 1px dashed var(--sac-border) !important;
  border-radius: 12px !important;
  background: rgba(221, 214, 197, 0.5) !important;
  padding: 12px !important;
  margin-top: 8px !important;
}

.sac-meeting-virtual-text {
  font-size: 13px !important;
  color: var(--sac-fg-muted) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.sac-meeting-virtual-meta {
  font-size: 12px !important;
  color: var(--sac-fg-muted) !important;
  margin: 6px 0 0 !important;
  line-height: 1.5 !important;
}

.sac-meeting-virtual-box .wp-block-button__link {
  font-size: 13px !important;
  padding: 8px 14px !important;
}

/* ─── Section 2: How to Attend ──────────────────────────────────────────── */

.sac-attend-section {
  background: rgba(221, 214, 197, 0.55);
  padding-top: 64px;
  padding-bottom: 64px;
}

.sac-attend-grid.wp-block-columns {
  gap: 20px !important;
  margin-top: 32px !important;
}

.sac-attend-card {
  border-radius: 26px !important;
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  padding: 24px !important;
  box-shadow: 0 10px 30px var(--sac-shadow) !important;
}

.sac-attend-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sac-accent);
  /* border-bottom keeps the gold underline continuous across the
     inline-flex gap between the link text and its trailing arrow. */
  text-decoration: none;
  border-bottom: 1px solid var(--sac-gold);
  padding-bottom: 1px;
  margin-top: 16px;
}

/* ─── Section 3: Public Participation ──────────────────────────────────── */

.sac-participate-section {
  background: var(--sac-surface);
  padding-top: 64px;
  padding-bottom: 64px;
}

.sac-participate-grid.wp-block-columns {
  gap: 40px !important;
  align-items: flex-start !important;
}

.sac-steps-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.sac-step-item {
  display: flex !important;
  gap: 20px !important;
  border-radius: 24px !important;
  border: 1px solid var(--sac-border) !important;
  background: rgba(221, 214, 197, 0.5) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
}
.sac-step-item:last-child {
  margin-bottom: 0 !important;
}

.sac-step-num {
  font-family: "Courier New", Courier, monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--sac-gold) !important;
  flex-shrink: 0 !important;
  padding-top: 2px !important;
  min-width: 24px !important;
  margin: 0 !important;
}

.sac-step-title {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--sac-accent) !important;
  margin: 0 0 6px 0 !important;
}

.sac-step-body {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

/* ─── Section 4: Upcoming Schedule ─────────────────────────────────────── */

.sac-schedule-section {
  background: rgba(221, 214, 197, 0.45);
  padding-top: 64px;
  padding-bottom: 64px;
}

.sac-schedule-table {
  border-radius: 24px;
  border: 1px solid var(--sac-border);
  overflow: hidden;
  margin-top: 32px;
}

.sac-schedule-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--sac-border);
  padding: 20px 24px;
  background: var(--sac-surface);
}
.sac-schedule-row:last-child,
.sac-schedule-row--last {
  border-bottom: none;
}
.sac-schedule-row--next {
  background: rgba(79, 74, 63, 0.05);
}

.sac-schedule-row-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Fix the date column width so the time column starts at the same x in
   every row — otherwise "Thursday, May 14" and "Thursday, August 13"
   push the time differently. Wide enough for the worst case
   ("Thursday, September 12") at 22px Newsreader. */
.sac-schedule-row-left > div:first-child {
  flex: 0 0 240px;
}

.sac-schedule-date {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--sac-accent) !important;
  margin: 0 !important;
}

.sac-schedule-date-year {
  font-size: 13px !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

.sac-schedule-time {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sac-fg) !important;
  margin: 0 0 4px 0 !important;
}

.sac-next-badge {
  display: inline-block;
  border-radius: 100px;
  background: rgba(143, 90, 56, 0.15);
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sac-gold);
  letter-spacing: 0.04em;
}

/* Reschedule / cancellation note on the next meeting — deep maroon so it reads
   as an alert rather than the normal "Next meeting" badge. */
.sac-status-badge {
  background: rgba(99, 48, 40, 0.14);
  color: var(--sac-maroon);
}

.sac-schedule-location {
  font-size: 13px !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

/* On phones the fixed 240px date column squeezes the time into a narrow strip
   that wraps over several lines; with align-items:center the short date then
   floats in the middle of a tall row, leaving big empty gaps. Stack each row
   into a compact left-aligned card instead: date → year → time → badge →
   location, tight vertical rhythm. */
@media (max-width: 600px) {
  .sac-schedule-row,
  .sac-schedule-row-left {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .sac-schedule-row {
    padding: 18px 20px !important;
  }
  .sac-schedule-row-left > div:first-child {
    flex: 0 0 auto !important;
  }
  .sac-schedule-date {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  .sac-next-badge {
    margin-top: 2px;
  }
}

/* ─── Section 5: Past Meetings Archive ──────────────────────────────────── */

.sac-archive-section {
  background: transparent;
  padding-top: 64px;
  padding-bottom: 64px;
}

.sac-archive-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 48px;
}

.sac-archive-year-row {
  margin-bottom: 16px;
  margin-top: 32px;
}
.sac-archive-year-row:first-child {
  margin-top: 0;
}

/* wp:separator inside year-row acts as the horizontal rule */
.sac-archive-year-row .wp-block-separator.sac-archive-divider {
  flex: 1 !important;
  height: 1px !important;
  background-color: var(--sac-border) !important;
  border: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  max-width: none !important;
}

.sac-archive-year-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sac-accent-soft) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.sac-archive-divider {
  flex: 1;
  height: 1px;
  background: var(--sac-border);
}

/* ── Collapsible non-current-year sections ───────────────────────────────
   JS (archive-collapse.js) wraps each non-current-year year-row + grid in
   a <details> at runtime. The <summary> is styled to look like the
   existing year-row + a chevron indicator, so the affordance reads as
   "click to expand". Chevron rotates 180° when open. */
.sac-archive-collapsible {
  margin-top: 32px;
}
.sac-archive-collapsible[open] {
  margin-bottom: 16px;
}

.sac-archive-collapsible > summary {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  margin-bottom: 16px;
  padding: 4px 0;
  user-select: none;
  transition: opacity 0.18s ease;
}
.sac-archive-collapsible > summary:hover {
  opacity: 0.75;
}
.sac-archive-collapsible > summary:focus-visible {
  outline: 2px solid var(--sac-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
/* Hide the browser default disclosure marker (triangle / arrow). */
.sac-archive-collapsible > summary::-webkit-details-marker {
  display: none;
}
.sac-archive-collapsible > summary::marker {
  content: "";
}

/* The summary's year label inherits .sac-archive-year-label styling. */
.sac-archive-collapsible > summary .sac-archive-year-label {
  margin: 0 !important;
}

/* CTA next to the year label — "Show N meetings ▾" / "Hide ▴".
   Transparent background, sits inline with the year heading so it reads
   as an integrated part of the row rather than a floating button.
   Text swaps via CSS based on [open] state. */
.sac-archive-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: transparent;
  color: var(--sac-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.sac-archive-collapsible > summary:hover .sac-archive-cta {
  color: var(--sac-gold);
}
/* "Show N meetings" vs "Hide" — visibility toggled by [open] state */
.sac-archive-cta-hide {
  display: none;
}
.sac-archive-collapsible[open] > summary .sac-archive-cta-show {
  display: none;
}
.sac-archive-collapsible[open] > summary .sac-archive-cta-hide {
  display: inline;
}

/* Chevron sits inside the CTA pill and rotates on open. */
.sac-archive-chevron {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  transition: transform 0.22s ease;
}
.sac-archive-collapsible[open] > summary .sac-archive-chevron {
  transform: rotate(180deg);
}

.sac-archive-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}

.sac-archive-card {
  display: block !important;
  border-radius: 20px !important;
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  padding: 20px !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease !important;
}
.sac-archive-card:has(:any-link):hover {
  border-color: var(--sac-border-strong) !important;
}

.sac-archive-meta {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--sac-gold) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin: 0 0 8px 0 !important;
}

.sac-archive-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  color: var(--sac-accent) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Outline CTA button used in archive header ("Full resource archive →") */
.sac-btn-archive .wp-block-button__link {
  background: transparent !important;
  color: var(--sac-accent) !important;
  border: 1px solid var(--sac-border-strong) !important;
  border-radius: 100px !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transition: border-color 160ms ease !important;
}
.sac-btn-archive .wp-block-button__link:hover {
  border-color: var(--sac-accent) !important;
}

/* Archive cards — stretched link pattern: the linked <h3> title covers the whole card */
.sac-archive-card {
  position: relative !important;
}
.sac-archive-title a {
  color: var(--sac-accent) !important;
  text-decoration: none !important;
}
.sac-archive-title a::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 20px !important;
  z-index: 1 !important;
}

/* ─── Meeting Info Page — Responsive ────────────────────────────────────── */

@media (max-width: 768px) {
  .sac-page-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sac-page-heading {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    margin-bottom: 28px !important;
  }

  /* Meeting card: 4 cols → stack vertically */
  .sac-meeting-info-grid.wp-block-columns {
    flex-direction: column !important;
  }
  .sac-meeting-info-grid .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .sac-meeting-info-col {
    border-right: none !important;
    border-bottom: 1px solid var(--sac-border) !important;
  }
  .sac-meeting-info-col:last-child {
    border-bottom: none !important;
  }

  /* Attend: 2 cols → stack */
  .sac-attend-grid.wp-block-columns {
    flex-direction: column !important;
  }
  .sac-attend-grid .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Participate: 2 cols → stack */
  .sac-participate-grid.wp-block-columns {
    flex-direction: column !important;
  }
  .sac-participate-grid .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Schedule rows: side-by-side → stack */
  .sac-schedule-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Archive: 3 cols → 1 col */
  .sac-archive-grid {
    grid-template-columns: 1fr !important;
  }
  .sac-archive-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* Tablet: meeting card stays 4-col (WP columns handles it) but tighten */
  .sac-meeting-info-col {
    padding: 16px !important;
  }

  /* Archive: 3→2 cols on tablet */
  .sac-archive-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ─── About the Council Page ─────────────────────────────────────────────── */

/* Section 1: About Hero */
.sac-about-page-hero-section {
  background: transparent;
  padding-top: 64px;
  padding-bottom: 56px;
  padding-left: 60px;
  padding-right: 60px;
}

.sac-about-heading {
  /* Lower min so the 43-char headline never wraps past three lines on
     narrow viewports (was clamp(36px, 4.5vw, 68px) — the 36px floor
     forced 4-5 lines on phones). */
  font-size: clamp(28px, 5vw, 64px) !important;
  line-height: 1.1 !important;
  margin-top: 12px !important;
  margin-bottom: 40px !important;
  max-width: 900px;
  text-wrap: balance;
}

.sac-about-text-row.wp-block-columns {
  gap: 48px !important;
  align-items: flex-start !important;
  margin-bottom: 0 !important;
  border-top: 1px solid var(--sac-border) !important;
  padding-top: 32px !important;
}

.sac-about-body-lead {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.sac-about-body-sub {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.sac-about-body-sub strong {
  font-weight: 600;
  color: var(--sac-fg) !important;
}

.sac-stat-cards-row.wp-block-columns {
  gap: 12px !important;
  margin-top: 40px !important;
  margin-bottom: 0 !important;
  max-width: 600px;
}

/* About hero: text on the left, council group photo on the right */
.sac-about-hero-columns.wp-block-columns {
  gap: 56px !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 36px !important;
}
.sac-about-hero-text-col {
  min-width: 0; /* let the inner text wrap instead of forcing the column wide */
}
.sac-about-hero-media-col {
  align-self: stretch;
}
.sac-about-hero-photo {
  margin: 0 !important;
  height: 100%;
}
.sac-about-hero-photo img {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: 0 22px 48px -20px rgba(79, 74, 63, 0.5);
}

/* Below 960px the 56/44 split gets cramped — stack text over photo */
@media (max-width: 960px) {
  .sac-about-hero-columns.wp-block-columns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 32px !important;
  }
  .sac-about-hero-columns.wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    width: 100% !important;
  }
  .sac-about-hero-photo img {
    max-height: 340px;
  }
}

/* Section 2: Council Bios */
.sac-bios-section {
  background: rgba(221, 214, 197, 0.55);
  padding-top: 64px;
  padding-bottom: 72px;
}

.sac-bios-intro-body {
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  max-width: 640px;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

.sac-member-grid.wp-block-group {
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: repeat(4, 1fr) !important;
  max-width: none !important;
  padding: 0 !important;
  margin-top: 40px !important;
}

.sac-member-card {
  border-radius: 26px !important;
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px var(--sac-shadow) !important;
  /* Column layout so the content fills the card and the "View bio" cue can be
     pinned to the bottom — keeps every card's CTA aligned across the grid row. */
  display: flex !important;
  flex-direction: column !important;
}

.sac-member-photo {
  /* Portrait aspect (not a short fixed height) so `cover` reveals more of each
     face top-to-bottom instead of a thin middle band. Self-adjusts across the
     4 / 2 / 1-column layouts; the max-height caps full-width mobile cards so
     they don't get excessively tall. */
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 380px !important;
  flex-shrink: 0 !important; /* don't let the flex-column card squeeze the photo */
  border-bottom: 1px solid var(--sac-border) !important;
  background-color: var(--sac-surface-slate) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Cover block inner container — hide it so no text floats over the photo */
.sac-member-photo .wp-block-cover__inner-container {
  display: none !important;
}

/* Cover block overlay — no dim */
.sac-member-photo .wp-block-cover__background {
  opacity: 0 !important;
}

/* Cover block image.
   NOTE: object-position is intentionally NOT !important so the cover block's
   built-in FOCAL POINT picker wins. To re-crop a member photo, an editor just
   clicks the photo in the editor and drags the focal-point dot — no code edit.
   The values below are only fallbacks for photos with no focal point set. */
.sac-member-photo .wp-block-cover__image-background {
  object-fit: cover !important;
  object-position: center 25%;
}

/* Per-person fallback crops (apply only until a focal point is set on the
   photo, and only while the photo keeps its original media ID — replacing a
   photo gives it a new ID, after which the focal point / default takes over).
   These are non-!important so an editor's focal-point drag always overrides. */
.sac-member-photo img.wp-image-784 {
  object-position: center 5%;
} /* Tom — forehead cut, pull to top */
.sac-member-photo img.wp-image-1036 {
  object-position: center 25%;
} /* Brad — include more chest */
.sac-member-photo img.wp-image-1128 {
  object-position: center 60%;
} /* Dave — pull down to show full beard/chin */

.sac-member-photo-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: var(--sac-surface) !important;
  border: 1px solid rgba(124, 117, 101, 0.5) !important;
  border-radius: 100px !important;
  padding: 2px 10px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 !important;
}

.sac-member-content {
  padding: 20px !important;
  /* Fill the remaining card height and stack children so the bio cue (with
     margin-top:auto) sits flush at the bottom. */
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.sac-member-region {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-gold) !important;
  margin: 0 !important;
}

.sac-member-name {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--sac-accent) !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.sac-member-role {
  font-size: 13px !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

.sac-member-bio-box {
  border: 1px dashed var(--sac-border) !important;
  background: rgba(221, 214, 197, 0.5) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-top: 16px !important;
}

.sac-member-bio-placeholder {
  font-size: 11px !important;
  color: var(--sac-fg-muted) !important;
  font-style: italic !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.sac-perpetua-box {
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  border-radius: 26px !important;
  padding: 24px !important;
  margin-top: 32px !important;
}

.sac-perpetua-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 0 12px !important;
}

.sac-perpetua-body {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--sac-fg-muted) !important;
  max-width: 600px;
  margin-bottom: 16px !important;
  margin-top: 0 !important;
}

.sac-perpetua-reps.wp-block-columns {
  gap: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-wrap: wrap !important;
}

.sac-perpetua-reps .wp-block-column {
  flex: 0 0 auto !important;
  width: auto !important;
}

.sac-perpetua-rep {
  border: 1px solid var(--sac-border) !important;
  background: rgba(221, 214, 197, 0.5) !important;
  border-radius: 16px !important;
  padding: 8px 16px !important;
}

.sac-perpetua-rep-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--sac-accent) !important;
  margin: 0 !important;
}

.sac-perpetua-rep-title {
  font-size: 12px !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

/* Section 3: Community Agreement */
.sac-agreement-section {
  background: var(--sac-surface);
  padding-top: 64px;
  padding-bottom: 72px;
}

.sac-agreement-grid.wp-block-columns {
  gap: 56px !important;
  align-items: flex-start !important;
}

/* Breathing room above the "Download the Community Agreement" link */
.sac-agreement-section .sac-action-link-wrap {
  margin-top: 24px !important;
}

.sac-agreement-body {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

.sac-agreement-body strong {
  font-weight: 600;
  color: var(--sac-fg) !important;
}

.sac-principles-grid.wp-block-group {
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: 1fr 1fr !important;
  max-width: none !important;
  padding: 0 !important;
}

/* With three cards (Collaboration, Transparency, Respect) the third one
   would sit alone in column 1 of row 2; span it across both columns so
   the bottom row reads as an intentional full-width capstone. */
.sac-principles-grid.wp-block-group
  > .sac-principle-card:nth-child(3):last-child {
  grid-column: 1 / -1 !important;
}

.sac-principle-card {
  border-radius: 18px !important;
  border: none !important;
  background: var(--sac-surface) !important;
  padding: 28px !important;
  box-shadow: 0 4px 14px rgba(79, 74, 63, 0.07);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.sac-principle-card:has(:any-link):hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(79, 74, 63, 0.12);
}

.sac-principle-card::before {
  content: "";
  display: block;
  width: 32px;
  height: 8px;
  border-radius: 100px;
  background: var(--sac-gold);
  margin-bottom: 12px;
}

.sac-principle-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--sac-accent) !important;
  margin: 0 0 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sac-principle-body {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

/* Section 4: Key Initiatives */
.sac-initiatives-section {
  background: rgba(221, 214, 197, 0.45);
  padding-top: 64px;
  padding-bottom: 72px;
}

.sac-initiatives-grid.wp-block-group {
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: none !important;
  padding: 0 !important;
  margin-top: 40px !important;
}

.sac-initiative-card {
  border-radius: 18px !important;
  border: none !important;
  background: var(--sac-surface) !important;
  padding: 28px !important;
  box-shadow: 0 4px 14px rgba(79, 74, 63, 0.07) !important;
  display: flex !important;
  flex-direction: column !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.sac-initiative-card:has(:any-link):hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(79, 74, 63, 0.12) !important;
}

.sac-initiative-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: var(--sac-gold) !important;
  margin: 0 !important;
}

.sac-initiative-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--sac-accent) !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  line-height: 1.15 !important;
  text-wrap: balance;
}

.sac-initiative-body {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

/* Pin the action link to the bottom of the card */
.sac-initiative-card .sac-action-link-wrap {
  margin-top: auto !important;
  padding-top: 16px !important;
}

.sac-note-box {
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  border-radius: 24px !important;
  padding: 24px !important;
  margin-top: 24px !important;
}

.sac-note-cols.wp-block-columns {
  gap: 20px !important;
  align-items: flex-start !important;
  margin-bottom: 0 !important;
}

.sac-note-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  padding-top: 2px !important;
}

.sac-note-text {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

.sac-note-text strong {
  font-weight: 600;
  color: var(--sac-fg) !important;
}

/* Section 5: Bylaws */
.sac-bylaws-section {
  background: transparent;
  padding-top: 64px;
  padding-bottom: 80px;
}

.sac-bylaws-grid.wp-block-columns {
  gap: 24px !important;
  align-items: stretch !important;
}

.sac-bylaws-card {
  border-radius: 30px !important;
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  padding: 32px !important;
  height: 100% !important;
}

.sac-status-card {
  border-radius: 30px !important;
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  padding: 32px !important;
  height: 100% !important;
}

.sac-bylaws-doc-label {
  /* Standardized to the site-wide card eyebrow-label size (15px), same as
     .sac-card .sac-card-label and .sac-initiative-label. */
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-gold) !important;
  margin: 0 !important;
}

.sac-bylaws-status-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 !important;
}

.sac-bylaws-heading {
  font-family: "Newsreader", Georgia, serif !important;
  /* Standardized to match the site-wide content-card title size (28px),
     same as .sac-card h3 and .sac-initiative-title. */
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--sac-accent) !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.sac-bylaws-body {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .sac-about-page-hero-section {
    padding: 40px 20px 48px !important;
  }
  .sac-about-text-row.wp-block-columns {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .sac-member-grid.wp-block-group {
    grid-template-columns: 1fr !important;
  }
  .sac-principles-grid.wp-block-group {
    grid-template-columns: 1fr !important;
  }
  .sac-initiatives-grid.wp-block-group {
    grid-template-columns: 1fr !important;
  }
  .sac-bylaws-grid.wp-block-columns {
    flex-direction: column !important;
  }
  .sac-agreement-grid.wp-block-columns {
    flex-direction: column !important;
  }
  .sac-bios-section,
  .sac-agreement-section,
  .sac-initiatives-section,
  .sac-bylaws-section {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
}

/* Tablet: two columns for the member and initiative grids.
   The lower bound is 768, not 769, deliberately — iPad portrait is exactly
   768 CSS px and used to fall into the phone layout, putting eight member
   cards single-file (~4000px of scrolling just for the roster).
   At exactly 768 this block and the `max-width: 768px` block above BOTH match;
   this one wins because it comes later with equal specificity. That overlap is
   intentional and scoped to these two grids — everything else on the About page
   keeps its mobile treatment at 768. */
@media (min-width: 768px) and (max-width: 1024px) {
  .sac-member-grid.wp-block-group {
    grid-template-columns: 1fr 1fr !important;
  }
  .sac-initiatives-grid.wp-block-group {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ─── Water Monitoring Page ──────────────────────────────────────────────── */

.sac-wm-hero-section {
  background: transparent;
  padding-top: 64px;
  padding-bottom: 72px;
}

.sac-wm-hero-section .sac-page-heading {
  margin-bottom: 24px !important;
}

.sac-wm-hero-grid.wp-block-columns {
  gap: 48px !important;
  align-items: stretch !important;
}

/* Stretch the text column so the right-side image can match its height
   (same pattern as the home hero — image fills the row, edges align). */
.sac-wm-hero-grid > .wp-block-column:first-child {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Hero image — same treatment as the home hero image: rounded corners,
   layered drop-shadow, object-fit cover so the image fills the column
   without distortion. */
.sac-wm-hero-section .sac-hero-image-placeholder {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
.sac-wm-hero-section .sac-hero-image-placeholder .wp-block-image {
  margin: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  min-height: 0 !important;
}
.sac-wm-hero-section .sac-hero-image-placeholder .wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 40% !important;
  border-radius: 14px !important;
  box-shadow:
    0 14px 32px rgba(79, 74, 63, 0.18),
    0 4px 10px rgba(79, 74, 63, 0.1) !important;
  display: block !important;
  filter: none !important;
}

/* Mobile: drop the stretched-height behavior — let the image use its
   natural aspect ratio with a height cap so it doesn't dominate. */
@media (max-width: 768px) {
  .sac-wm-hero-section .sac-hero-image-placeholder .wp-block-image {
    flex: 0 0 auto !important;
    display: block !important;
    height: auto !important;
  }
  .sac-wm-hero-section .sac-hero-image-placeholder .wp-block-image img {
    height: auto !important;
    max-height: 320px !important;
    aspect-ratio: 5 / 4 !important;
    border-radius: 12px !important;
    box-shadow:
      0 10px 22px rgba(79, 74, 63, 0.16),
      0 3px 8px rgba(79, 74, 63, 0.08) !important;
  }
}

/* Tracked Parameters section */
.sac-params-section {
  background: rgba(221, 214, 197, 0.45);
  padding-top: 64px;
  padding-bottom: 72px;
}

.sac-params-grid.wp-block-columns {
  gap: 56px !important;
  align-items: flex-start !important;
}

.sac-params-body {
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

.sac-params-note {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

.sac-param-cards-grid.wp-block-group {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: 1fr 1fr !important;
  max-width: none !important;
  padding: 0 !important;
}

.sac-param-card.wp-block-group {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  position: relative !important;
  border-radius: 12px !important;
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  padding: 14px 18px 14px 20px !important;
  overflow: hidden !important;
}

.sac-param-card.wp-block-group::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--sac-accent) !important;
  opacity: 0.45 !important;
  border-radius: 2px 0 0 2px !important;
}

.sac-param-card.wp-block-group::after {
  display: none !important;
}

.sac-param-card .wp-block-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.sac-param-name {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--sac-accent) !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.sac-param-unit {
  font-size: 12px !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

/* Categorized parameter list */
.sac-param-categories.wp-block-columns {
  gap: 40px !important;
  align-items: flex-start !important;
  margin-top: 4px !important;
}

.sac-param-category-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-accent) !important;
  opacity: 0.7 !important;
  margin: 0 0 2px !important;
  padding-bottom: 10px !important;
  border-bottom: 1.5px solid var(--sac-accent) !important;
}

.sac-param-row.wp-block-group {
  padding: 9px 0 !important;
  border-bottom: 1px solid var(--sac-border) !important;
  background: transparent !important;
}

.sac-param-row-name {
  font-size: 15px !important;
  color: var(--sac-fg) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.sac-param-row-unit {
  font-size: 12px !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* PDF Report section */
.sac-report-section {
  background: var(--sac-surface);
  padding-top: 64px;
  padding-bottom: 80px;
}

.sac-report-header.wp-block-columns {
  gap: 32px !important;
  align-items: flex-end !important;
  margin-bottom: 32px !important;
}

.sac-report-body {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  max-width: 480px;
}

/* Latest water monitoring report card (rendered by sac_latest_water_report) */
.sac-water-report-card {
  border-radius: 24px;
  border: 1px solid var(--sac-border);
  background: var(--sac-surface);
  padding: 36px 40px;
  width: 100%;
}
.sac-water-report-card .sac-eyebrow {
  margin: 0 0 12px 0;
}
/* On phones the 180-word excerpt wraps into a very tall column. Clamp it to a
   short teaser; the "Read full report →" link below takes over from there. */
@media (max-width: 781px) {
  .sac-water-report-body {
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}
.sac-water-report-card .sac-section-heading {
  margin: 0 0 16px 0;
  font-size: clamp(24px, 2.4vw, 32px);
}
.sac-water-report-body {
  font-size: 15px;
  line-height: 1.75;
  color: var(--sac-fg-muted);
  margin: 0 0 24px 0;
}
.sac-water-report-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.sac-water-report-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--sac-gold);
  text-decoration: none;
  border-bottom: 1px solid var(--sac-gold);
  padding-bottom: 2px;
}
.sac-water-report-link:hover {
  opacity: 0.8;
}

/* ─── Double-underline fix ───────────────────────────────────────────────────
   These links draw their underline with a `border-bottom` (so the rule stays
   continuous across the inline-flex gap before the ::after arrow) and only
   clear `text-decoration` in their resting state. The global rule in
   style.css:55 (`a:hover { text-decoration: underline }`) then stacks a second
   underline on hover/focus — the double line. Suppress text-decoration on these
   border-bottom links in every interaction state so only the border shows. */
.sac-action-link-wrap a,
.sac-action-link,
.sac-about-link,
.sac-attend-action,
.sac-water-report-link {
  text-decoration: none !important;
}
.sac-action-link-wrap a:hover,
.sac-action-link:hover,
.sac-about-link:hover,
.sac-attend-action:hover,
.sac-water-report-link:hover,
.sac-action-link-wrap a:focus,
.sac-action-link:focus,
.sac-about-link:focus,
.sac-attend-action:focus,
.sac-water-report-link:focus,
.sac-action-link-wrap a:focus-visible,
.sac-action-link:focus-visible,
.sac-about-link:focus-visible,
.sac-attend-action:focus-visible,
.sac-water-report-link:focus-visible {
  text-decoration: none !important;
}
.sac-water-empty {
  font-style: italic;
  color: var(--sac-fg-muted);
}

.sac-pdf-embed {
  border-radius: 24px !important;
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface-slate) !important;
  overflow: hidden !important;
}

.sac-pdf-toolbar {
  background: var(--sac-surface) !important;
  border-bottom: 1px solid var(--sac-border) !important;
  padding: 12px 20px !important;
}

.sac-pdf-filename-col::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 4px;
  background: var(--sac-surface-muted);
  flex-shrink: 0;
}

.sac-pdf-filename {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

.sac-pdf-meta {
  font-size: 12px !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

.sac-pdf-content {
  min-height: 640px !important;
  padding: 48px 24px !important;
}

.sac-pdf-card {
  border-radius: 20px !important;
  border: 1px solid var(--sac-border) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding: 32px !important;
  text-align: center !important;
  box-shadow: 0 4px 12px rgba(79, 74, 63, 0.08) !important;
  max-width: 420px !important;
}

.sac-pdf-card-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 !important;
}

.sac-pdf-card-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--sac-accent) !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sac-pdf-card-year {
  font-size: 14px !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.sac-pdf-card-note {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

.sac-pdf-embed iframe {
  width: 100% !important;
  height: 680px !important;
  border: none !important;
  display: block !important;
}

/* ─── FAQ Page ───────────────────────────────────────────────────────────── */

.sac-faq-hero-section {
  background: transparent;
  padding-top: 64px;
  padding-bottom: 16px;
}

.sac-faq-hero-section .sac-page-heading {
  margin-bottom: 24px !important;
}

.sac-faq-hero-header.wp-block-columns {
  gap: 32px !important;
  align-items: flex-end !important;
}

.sac-faq-lead {
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  max-width: 640px;
  margin-top: 0 !important;
}

/* Category nav bar */
/* FAQ nav band — outer is transparent, the tan band lives on the pill row
   so it aligns with the question cards below (same min(1200px,
   100% - 48px) / page-container width). Mirrors the Resource Library
   filter band treatment. */
.sac-faq-nav-section {
  padding-top: 16px;
  padding-bottom: 16px;
}

.sac-faq-pills {
  gap: 8px !important;
  padding: 14px 20px !important;
  background: rgba(221, 214, 197, 0.55);
  border: 1px solid var(--sac-border);
  border-radius: 16px;
}

.sac-faq-pill {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sac-faq-pill .wp-block-button__link {
  background: var(--sac-surface) !important;
  color: var(--sac-fg-muted) !important;
  border: 1px solid var(--sac-border) !important;
  border-radius: 100px !important;
  padding: 6px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* FAQ body section */
.sac-faq-body-section {
  background: transparent;
  padding-top: 56px;
  padding-bottom: 80px;
}

.sac-faq-content.wp-block-group {
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

/* Each category group */
.sac-faq-category + .sac-faq-category {
  margin-top: 56px !important;
}

.sac-faq-cat-header {
  margin-bottom: 20px !important;
}

.sac-faq-cat-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.sac-faq-cat-header .sac-faq-cat-sep.wp-block-separator {
  flex: 1 !important;
  height: 1px !important;
  background-color: var(--sac-border) !important;
  border: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  max-width: none !important;
}

/* "X of many" per-category counter removed at the client's request. Hidden
   rather than stripped from content so the category header markup stays intact;
   the flex:1 separator simply extends to fill the freed space. */
.sac-faq-cat-count {
  display: none !important;
}

/* Accordion items */
.sac-faq-accordion.wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  max-width: none !important;
}

.sac-faq-accordion .wp-block-details {
  border-radius: 20px !important;
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  overflow: hidden !important;
  transition:
    opacity 0.18s ease,
    border-color 0.18s ease !important;
}

/* Row hover — subtle opacity dim, mirroring the filter pills at the top.
   Only fires on closed rows so the opened answer stays fully readable. */
.sac-faq-accordion .wp-block-details:not([open]):hover {
  opacity: 0.75;
}

.sac-faq-accordion .wp-block-details[open] {
  border-color: var(--sac-border-strong) !important;
}

.sac-faq-accordion .wp-block-details summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 20px 24px !important;
  cursor: pointer !important;
  list-style: none !important;
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: var(--sac-accent) !important;
}

.sac-faq-accordion .wp-block-details summary::-webkit-details-marker {
  display: none !important;
}

.sac-faq-accordion .wp-block-details summary::after {
  content: "+";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  border: 1px solid var(--sac-border);
  font-size: 16px;
  font-weight: 400;
  color: var(--sac-gold);
  font-family: "Public Sans", sans-serif;
  line-height: 1;
  transition: transform 0.2s;
}

.sac-faq-accordion .wp-block-details[open] summary::after {
  transform: rotate(45deg);
}

.sac-faq-accordion .wp-block-details p {
  border-top: 1px solid var(--sac-border) !important;
  padding: 20px 24px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--sac-fg-muted) !important;
  margin: 0 !important;
}

/* PDF section link row */
.sac-faq-pdf-row {
  margin-top: 16px !important;
}

.sac-faq-pdf-row .sac-faq-pdf-sep.wp-block-separator {
  flex: 1 !important;
  height: 1px !important;
  background-color: rgba(165, 157, 137, 0.5) !important;
  border: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  max-width: none !important;
}

.sac-faq-pdf-link {
  margin: 0 !important;
  white-space: nowrap !important;
}
/* Phones: the nowrap line is wider than the screen — let it wrap */
@media (max-width: 600px) {
  .sac-faq-pdf-link {
    white-space: normal !important;
  }
}

.sac-faq-pdf-link a {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--sac-fg-muted) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(143, 90, 56, 0.5) !important;
  text-underline-offset: 4px !important;
}

/* CTA section */
.sac-faq-cta-section {
  background: rgba(221, 214, 197, 0.45);
  padding-top: 64px;
  padding-bottom: 80px;
}

.sac-faq-cta-card {
  border-radius: 30px !important;
  border: 1px solid var(--sac-border) !important;
  background: var(--sac-surface) !important;
  padding: 40px !important;
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.sac-faq-cta-grid.wp-block-columns {
  gap: 32px !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

.sac-faq-cta-label {
  /* Standardized to the site-wide card eyebrow-label size (15px). */
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 !important;
}

.sac-faq-cta-heading {
  font-family: "Newsreader", Georgia, serif !important;
  /* Standardized to match the site-wide content-card title size (28px). */
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--sac-accent) !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sac-faq-cta-body {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  max-width: 480px;
}

/* FAQ: Responsive */
@media (max-width: 768px) {
  .sac-faq-hero-section {
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .sac-faq-hero-header.wp-block-columns {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .sac-faq-cta-grid.wp-block-columns {
    flex-direction: column !important;
  }
  .sac-faq-cta-card {
    padding: 28px !important;
  }
  .sac-faq-body-section {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
}

/* Water Monitoring: Responsive */
@media (max-width: 768px) {
  .sac-wm-hero-section {
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .sac-wm-hero-grid.wp-block-columns {
    flex-direction: column !important;
  }
  .sac-params-grid.wp-block-columns {
    flex-direction: column !important;
  }
  .sac-param-cards-grid.wp-block-group {
    grid-template-columns: 1fr !important;
  }
  .sac-report-header.wp-block-columns {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .sac-params-section,
  .sac-report-section {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
}

/* ============================================================
   Contact Page
   ============================================================ */

.sac-contact-section {
  background: transparent;
  padding-top: 56px;
  padding-bottom: 80px;
}

.sac-contact-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  max-width: none !important;
  padding: 0 !important;
  align-items: start;
}

.sac-contact-form-col.wp-block-group {
  max-width: none !important;
  padding: 0 !important;
}

.sac-contact-lead {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(79, 74, 63, 0.84);
  max-width: 500px;
  margin-bottom: 32px !important;
  margin-top: 12px !important;
}

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

.sac-form-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sac-form-field {
  display: flex;
  flex-direction: column;
}

.sac-form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--sac-accent-soft);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 8px;
}

/* CF7 wraps every field in <p><label>...<br><span><input></span></p>
   and the default browser margins on those <p> tags create wildly
   inconsistent gaps between fields. Strip them and hide the <br> so
   spacing is governed solely by `.sac-contact-form` gap (between
   sections) + `.sac-form-label` margin-bottom (label to input). */
.sac-contact-form p {
  margin: 0 !important;
  padding: 0 !important;
}
.sac-contact-form br {
  display: none !important;
}
.sac-contact-form .wpcf7-form-control-wrap {
  display: block;
}

.sac-form-input,
.sac-form-select,
.sac-form-textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--sac-border);
  background: var(--sac-surface);
  padding: 12px 16px;
  font-size: 14px;
  line-height: normal;
  font-family: "Public Sans", sans-serif;
  color: var(--sac-fg);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.sac-form-input::placeholder,
.sac-form-textarea::placeholder {
  color: var(--sac-fg-muted);
}

.sac-form-input:focus,
.sac-form-select:focus,
.sac-form-textarea:focus {
  outline: 0;
  border-color: var(--sac-border-strong);
}
/* The border swap above is only ~1.7:1 against the field background, so it
   cannot serve as the focus indicator on its own (WCAG 1.4.11 / 2.4.11 need
   3:1). Keyboard focus gets a real ring; mouse/touch focus is unchanged. */
.sac-form-input:focus-visible,
.sac-form-select:focus-visible,
.sac-form-textarea:focus-visible {
  outline: 2px solid var(--sac-accent);
  outline-offset: 2px;
}

.sac-form-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(79%2C74%2C63%2C0.45)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* Muted color when placeholder option is selected */
.sac-form-select-wrap:has(.sac-form-select option[value=""]:checked)
  .sac-form-select {
  color: var(--sac-fg-muted);
}
.sac-form-select option {
  color: var(--sac-fg);
}

.sac-form-select-wrap {
  position: relative;
}

.sac-form-select-chevron {
  display: none;
}

.sac-form-textarea {
  resize: none;
}

.sac-form-checkbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  border: 1px solid var(--sac-border);
  background: rgba(221, 214, 197, 0.5);
  padding: 12px 16px;
}

.sac-form-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--sac-accent);
}

.sac-form-checkbox-label {
  font-size: 14px;
  color: var(--sac-fg-muted);
  line-height: 1.5;
  cursor: pointer;
}

.sac-form-submit {
  display: inline-block;
  border-radius: 100px;
  background: var(--sac-accent);
  border: none;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Public Sans", sans-serif;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.15s;
  text-align: center;
  width: 100%;
}

.sac-form-submit:hover {
  opacity: 0.88;
}

/* ── CF7 compatibility ───────────────────────────────────────────────────── */
/* CF7 wraps every field in a span; make them block so inputs fill their container */
.sac-contact-form .wpcf7-form-control-wrap {
  display: block !important;
}
/* Remove CF7's default paragraph spacing inside the form */
.wpcf7 p {
  margin: 0 !important;
}
/* CF7 generates <input type="submit"> — ensure sac-form-submit applies to it */
input.sac-form-submit {
  display: block !important;
  width: 100% !important;
  border-radius: 100px !important;
  background: var(--sac-accent) !important;
  border: none !important;
  padding: 14px 32px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: "Public Sans", sans-serif !important;
  color: #ffffff !important;
  cursor: pointer !important;
}
/* CF7 checkbox structure: outer span gets the class, not the input */
.sac-form-checkbox-row .wpcf7-form-control-wrap,
.sac-form-checkbox-row .wpcf7-checkbox {
  display: block !important;
  width: 100% !important;
}
.sac-form-checkbox-row .wpcf7-list-item {
  margin: 0 !important;
}
.sac-form-checkbox-row .wpcf7-list-item label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 14px !important;
  color: var(--sac-fg-muted) !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
}
.sac-form-checkbox-row .wpcf7-list-item input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  accent-color: var(--sac-accent) !important;
  cursor: pointer !important;
}

/* Contact sidebar */
.sac-contact-sidebar.wp-block-group {
  display: flex !important;
  flex-direction: column;
  gap: 56px;
  padding-top: 0 !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.sac-contact-info-card.wp-block-group {
  border-radius: 26px;
  border: 1px solid var(--sac-border);
  background: var(--sac-surface);
  padding: 28px !important;
  max-width: none !important;
}

.sac-contact-info-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--sac-gold) !important;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 14px !important;
  margin-top: 0 !important;
}

.sac-contact-address-box.wp-block-group {
  background: transparent !important;
  padding: 0 !important;
  max-width: none !important;
}

.sac-contact-address-text {
  font-size: 15px !important;
  font-style: normal;
  color: var(--sac-fg) !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

.sac-contact-address-email {
  font-size: 14px !important;
  margin: 10px 0 0 !important;
}

.sac-contact-address-email a {
  color: var(--sac-fg-muted) !important;
  text-decoration: none !important;
}

.sac-contact-address-email a:hover {
  color: var(--sac-accent) !important;
  text-decoration: underline !important;
}

.sac-contact-card-body {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Zero out the default <p> bottom margin on the action link inside
   contact info cards so the card padding handles the bottom gap and
   the card reads symmetrically (28px top → label → body → link →
   28px bottom, instead of having extra paragraph margin below the
   link making the card top-heavy). */
.sac-contact-info-card .sac-action-link-wrap {
  margin: 0 !important;
}

/* Contact: Responsive */
@media (min-width: 769px) {
  .sac-contact-sidebar.wp-block-group {
    padding-top: 120px !important;
  }
  .sac-form-submit {
    width: auto;
  }
}

@media (max-width: 768px) {
  .sac-contact-section {
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .sac-contact-grid.wp-block-group {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .sac-contact-sidebar.wp-block-group {
    padding-top: 0 !important;
  }
  .sac-form-name-row {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   Resource Library
   ============================================================ */

.sac-rl-header-section {
  background: transparent;
  padding-top: 56px;
  padding-bottom: 16px;
}

/* Tighten the page heading's bottom margin only on the Resource Library
   header so the title sits closer to the filter bar. */
.sac-rl-header-section .sac-page-heading {
  margin-bottom: 12px !important;
}

.sac-rl-header-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 32px;
  max-width: none !important;
  padding: 0 !important;
  align-items: end;
}

.sac-rl-header-left.wp-block-group {
  max-width: none !important;
  padding: 0 !important;
}

.sac-rl-lead {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(79, 74, 63, 0.84);
  max-width: 600px;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

.sac-rl-latest-card.wp-block-group {
  border-radius: 24px;
  border: 1px solid var(--sac-border);
  background: var(--sac-surface);
  padding: 20px !important;
  max-width: none !important;
  min-width: 210px;
}

.sac-rl-latest-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--sac-accent-soft) !important;
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0 !important;
}

.sac-rl-latest-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 20px !important;
  color: var(--sac-accent) !important;
  line-height: 1.2 !important;
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.sac-rl-latest-date {
  font-size: 13px !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Filter bar — sticky outer + page-container inner are both transparent.
   The tan band lives on the row so its visible width matches the cards
   below (both sit inside the page-container's 60px horizontal padding). */
.sac-rl-filter-bar {
  position: sticky;
  top: 0;
  z-index: 30;
}

.sac-rl-filter-inner {
  padding-top: 12px;
  padding-bottom: 12px;
}

.sac-rl-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(221, 214, 197, 0.92);
  border: 1px solid var(--sac-border);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sac-rl-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sac-rl-year-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sac-rl-year-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sac-accent-soft);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.sac-rl-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  border: 1px solid var(--sac-border);
  background: var(--sac-surface);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: "Public Sans", sans-serif;
  color: var(--sac-fg-muted);
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}

.sac-rl-pill:hover {
  border-color: var(--sac-border-strong);
  color: var(--sac-accent);
}

.sac-rl-pill.sac-rl-pill--active {
  border-color: var(--sac-border-strong);
  color: var(--sac-accent);
  font-weight: 600;
}

/* Archive */
.sac-rl-archive-section {
  background: transparent;
  padding-top: 48px;
  padding-bottom: 64px;
}

.sac-rl-year-group {
  margin-bottom: 40px;
}

.sac-rl-year-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.sac-rl-year-label-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--sac-accent-soft);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.sac-rl-year-divider {
  flex: 1;
  height: 1px;
  background: var(--sac-border);
}

.sac-rl-year-count {
  display: none;
}

/* ── Collapsible non-current-year sections ───────────────────────────────
   When the filter is set to "all / all", non-current-year groups start
   collapsed (JS adds .sac-rl-year-group--collapsed). The .sac-rl-year-cta
   text+chevron sits next to the year label and acts as the affordance.
   Selecting any non-"all" filter expands all groups (JS removes the
   collapsed class).  */
.sac-rl-year-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: var(--sac-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.sac-rl-year-header[role="button"]:hover .sac-rl-year-cta {
  color: var(--sac-gold);
}
.sac-rl-year-header[role="button"]:focus-visible {
  outline: 2px solid var(--sac-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
/* Show/hide the right CTA text based on collapsed state */
.sac-rl-cta-hide {
  display: none;
}
.sac-rl-year-group:not(.sac-rl-year-group--collapsed) .sac-rl-cta-show {
  display: none;
}
.sac-rl-year-group:not(.sac-rl-year-group--collapsed) .sac-rl-cta-hide {
  display: inline;
}
/* Chevron rotates 180° when expanded */
.sac-rl-chevron {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  transition: transform 0.22s ease;
}
.sac-rl-year-group:not(.sac-rl-year-group--collapsed) .sac-rl-chevron {
  transform: rotate(180deg);
}
/* Collapsed: hide the cards grid; keep header visible */
.sac-rl-year-group--collapsed .sac-rl-cards-grid {
  display: none !important;
}
.sac-rl-year-group--collapsed {
  margin-bottom: 16px;
}

.sac-rl-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sac-rl-card {
  display: block;
  border-radius: 20px;
  border: 1px solid var(--sac-border);
  background: var(--sac-surface);
  padding: 20px;
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.2s;
}

.sac-rl-card:hover {
  border-color: var(--sac-border-strong);
}

.sac-rl-card-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sac-rl-card-content {
  min-width: 0;
}

.sac-rl-card-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--sac-gold);
  letter-spacing: 0.02em;
  text-transform: none;
  margin: 0 0 8px 0;
}

.sac-rl-card-title {
  font-family: "Newsreader", Georgia, serif;
  font-size: 17px;
  line-height: 1.25;
  color: var(--sac-accent);
  margin: 0 0 8px 0;
}

.sac-rl-card-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--sac-fg-muted);
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sac-rl-card-date {
  font-size: 12px;
  color: var(--sac-fg-muted);
  margin: 0;
}

.sac-rl-card-arrow {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 14px;
  color: rgba(79, 74, 63, 0.3);
  transition: color 0.2s;
}

.sac-rl-card:hover .sac-rl-card-arrow {
  color: var(--sac-accent);
}

.sac-rl-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px 24px;
  text-align: center;
}
/* Quiet state: the empty-state box is also the page's role="status"
   live region, so it must stay in the accessibility tree even when there
   are results to show. display:none would remove it, so this takes it out
   of flow and clips it to 1px instead — pixel-for-pixel the same as
   display:none on screen (no box, no flow contribution, not hittable). */
.sac-rl-empty.sac-rl-empty--quiet {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}
/* Screen-reader-only result count inside that live region. */
.sac-rl-live-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sac-rl-empty-inner {
  max-width: 380px;
}
.sac-rl-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(79, 74, 63, 0.06);
  color: rgba(79, 74, 63, 0.55);
  margin-bottom: 20px;
}
.sac-rl-empty-title {
  font-family: "Newsreader", Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--sac-fg);
  margin: 0 0 8px;
  line-height: 1.25;
}
.sac-rl-empty-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--sac-fg-muted);
  margin: 0 0 24px;
}
.sac-rl-empty-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(79, 74, 63, 0.25);
  background: transparent;
  color: var(--sac-fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.sac-rl-empty-reset:hover {
  background: var(--sac-accent);
  color: #fff;
  border-color: var(--sac-accent);
}

/* Resource Library: Responsive */
@media (max-width: 768px) {
  .sac-rl-header-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .sac-rl-header-grid.wp-block-group {
    grid-template-columns: 1fr !important;
  }
  .sac-rl-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .sac-rl-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .sac-rl-archive-section {
    padding-top: 32px;
    padding-bottom: 48px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .sac-rl-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .sac-rl-header-grid.wp-block-group {
    grid-template-columns: 1fr auto;
  }
}

/* ============================================================
   Single Post (Meeting Summaries & All Resources)
   ============================================================ */

.sac-single-hero {
  background: transparent;
  padding-top: 48px;
  padding-bottom: 52px;
  border-bottom: 1px solid var(--sac-border);
}

.sac-single-back {
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}

.sac-single-back a {
  color: var(--sac-gold) !important;
  text-decoration: none !important;
  transition: opacity 0.15s;
}

.sac-single-back a:hover {
  opacity: 0.7;
}

.sac-single-title.wp-block-post-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: clamp(32px, 4.5vw, 56px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  color: var(--sac-accent) !important;
  max-width: 820px;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

.sac-single-date.wp-block-post-date {
  font-size: 13px !important;
  color: var(--sac-fg-muted) !important;
  margin-top: 0 !important;
}

/* Body section */
.sac-single-body {
  background: var(--sac-surface);
  padding-top: 56px;
  padding-bottom: 96px;
}

.sac-single-content.wp-block-group {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Lead paragraph */
.sac-single-content .wp-block-paragraph:first-child {
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: rgba(79, 74, 63, 0.88) !important;
  margin-bottom: 28px !important;
}

/* Body paragraphs */
.sac-single-content .wp-block-paragraph {
  font-size: 15px;
  line-height: 1.8;
  color: var(--sac-fg);
  margin-bottom: 12px;
}

/* Section headers: paragraphs whose first child is a <strong> (e.g. ATTENDANCE:, SUMMARY:) */
.sac-single-content .wp-block-paragraph:has(> strong:first-child) {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--sac-accent-soft) !important;
  line-height: 1.4 !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sac-border);
  margin-top: 40px !important;
  margin-bottom: 14px !important;
}

.sac-single-content .wp-block-paragraph:has(> strong:first-child) strong {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Inline bold (not section headers) */
.sac-single-content .wp-block-paragraph strong {
  color: var(--sac-accent);
  font-weight: 600;
}

/* Lists */
.sac-single-content .wp-block-list {
  font-size: 15px;
  line-height: 1.75;
  color: var(--sac-fg);
  padding-left: 22px;
  margin-bottom: 16px;
}

.sac-single-content .wp-block-list li {
  margin-bottom: 6px;
}

/* Headings within content */
.sac-single-content .wp-block-heading {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  color: var(--sac-accent);
  margin-top: 36px;
  margin-bottom: 12px;
}

/* Links */
.sac-single-content a {
  color: var(--sac-accent);
  text-underline-offset: 3px;
  text-decoration-color: rgba(143, 90, 56, 0.5);
}

.sac-single-content a:hover {
  color: var(--sac-gold);
  text-decoration-color: var(--sac-gold);
}

/* Separator block used as divider */
.sac-single-content .wp-block-separator {
  border-color: var(--sac-border) !important;
  margin: 36px 0 !important;
}

/* Hide empty paragraphs and empty list items */
.sac-single-content .wp-block-paragraph:empty,
.sac-single-content .wp-block-list li:empty {
  display: none;
}

/* Attendance / roster — paragraphs containing <br>-delimited names */
.sac-single-content .wp-block-paragraph:has(br) {
  font-size: 13px !important;
  line-height: 1.95 !important;
  color: var(--sac-fg-muted) !important;
  background: var(--sac-surface-muted);
  border-radius: 6px;
  padding: 14px 18px !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

/* Summary action items — non-lead, non-header, non-roster paragraphs */
.sac-single-content
  .wp-block-paragraph:not(:first-child):not(:has(> strong:first-child)):not(
    :has(br)
  ) {
  padding-left: 14px;
  border-left: 2px solid rgba(143, 90, 56, 0.45);
  margin-bottom: 10px !important;
}

/* Single Post: Responsive */
@media (max-width: 768px) {
  .sac-single-hero {
    padding-top: 32px;
    padding-bottom: 36px;
  }
  .sac-single-body {
    padding-top: 36px;
    padding-bottom: 56px;
  }
  .sac-single-content.wp-block-group {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   NEW DESIGN — palette refresh, header/nav restructure, footer pattern, hero
   Site-wide rules are unscoped; home-only rules use body.home.
   ════════════════════════════════════════════════════════════════════════════ */

/* Page background — warm-sand cream with the topo-contour SVG drifting
   behind everything as a barely-noticeable texture. The "light" variant
   (darker #7a6f55 strokes at 0.11 opacity) reads as faint texture on the
   pale cream bg. We tile it at a smaller size so the contour density
   reads like the footer pattern rather than one huge stretched ridge.
   The footer keeps its own pale-stroke variant — that one was designed
   for the olive panel, so we don't touch it. */
body {
  background-color: var(--sac-bg) !important;
  background-image: none !important;
}

/* Mobile: background-attachment:fixed is unreliable on iOS Safari, but
   switching to background-attachment:scroll (with size:cover) sizes the
   image to the BODY's full height — on a long mobile page that's 5000px+
   and the topo contours scale up enormously (one ridge fills the screen).
   Fix by detaching the topo from the body background entirely on mobile
   and painting it via a position:fixed pseudo-element on body instead.
   The pseudo stays glued to the viewport (so contours stay viewport-
   sized regardless of page length) and avoids iOS's fixed-attachment
   quirks. body becomes a stacking context (position:relative; z-index:0)
   so the pseudo's z-index:-1 layers between body's bg-color and its
   content — sand color paints first, then the topo SVG, then content
   sits on top. */
@media (max-width: 768px) {
  body {
    position: relative;
    z-index: 0;
    background-image: none !important;
    background-attachment: scroll !important;
  }
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: none;
    pointer-events: none;
  }
}

/* === Footer (site-wide): charcoal-olive ink base + topographic pattern overlay === */
.sac-site-footer {
  background-color: var(--sac-accent) !important;
  background-image: none !important;
  border-top-color: #3f3b32 !important;
}

/* === Header (site-wide): horizontal layout —
   logo + single-line title on the left, nav links on the right === */
header.sac-site-header,
.sac-site-header {
  background: var(--sac-bg) !important;
  border: none !important;
  border-bottom: 1px solid rgba(165, 157, 137, 0.35) !important;
  box-shadow: none !important;
}

.sac-header-inner {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 14px 32px !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Nav pushes itself to the right edge; search follows it. With no
   wrapper around nav+search, an auto left-margin on the nav acts as
   the spacer between brand (left) and the right-side group. */
.sac-header-inner > .sac-site-nav,
.sac-header-inner > nav.sac-site-nav {
  margin-left: auto !important;
}

.sac-header-brand {
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

/* Logo — pine tree brand mark, sized for the horizontal bar */
.sac-logo-box {
  width: 46px !important;
  height: 54px !important;
  border: none !important;
  border-radius: 0 !important;
  background: url("/wp-content/themes/stibnite-advisory/assets/images/sac-tree.svg")
    center / contain no-repeat !important;
  flex-shrink: 0 !important;
}
.sac-logo-box span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Single-line wordmark — render the actual site-title text (no pseudo split) */
.sac-header-brand .wp-block-site-title {
  margin: 0 !important;
}
.sac-header-brand .wp-block-site-title a {
  font-family: "Newsreader", Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--sac-accent) !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  display: inline !important;
  gap: 0 !important;
}
.sac-header-brand .wp-block-site-title a::before,
.sac-header-brand .wp-block-site-title a::after {
  content: none !important;
}

/* === Search (core wp:search block, button-inside / always-visible input) === */

.sac-search.wp-block-search {
  margin: 0 !important;
  padding: 0 !important;
}

/* The inside-wrapper is the visible pill: input + magnifier button sit
   together inside a single rounded border. */
.sac-search .wp-block-search__inside-wrapper {
  background: var(--sac-surface) !important;
  border: 1px solid rgba(79, 74, 63, 0.18) !important;
  border-radius: 999px !important;
  padding: 0 4px 0 14px !important;
  align-items: center !important;
  box-shadow: 0 2px 8px rgba(79, 74, 63, 0.06) !important;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease !important;
}
.sac-search .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--sac-accent) !important;
  box-shadow: 0 2px 12px rgba(79, 74, 63, 0.14) !important;
}

/* Text input — borderless inside the wrapper */
.sac-search .wp-block-search__input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  height: 34px !important;
  padding: 0 !important;
  font-family: "Public Sans", sans-serif !important;
  font-size: 14px !important;
  color: var(--sac-accent) !important;
  outline: none !important;
  box-shadow: none !important;
  width: 150px !important;
  min-width: 0 !important;
}
.sac-search .wp-block-search__input:focus-visible {
  outline: 2px solid var(--sac-accent) !important;
  outline-offset: 2px !important;
}
.sac-search .wp-block-search__input::placeholder {
  color: var(--sac-fg-muted) !important;
}

/* Magnifier button — small icon-only on the right inside the pill */
.sac-search .wp-block-search__button {
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--sac-accent) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background-color 150ms ease !important;
}
.sac-search .wp-block-search__button:hover {
  background: rgba(79, 74, 63, 0.08) !important;
}
.sac-search .wp-block-search__button svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  fill: currentColor !important;
}

/* Mid-range desktop / tablet: shorter input so the row stays clean */
@media (max-width: 1199px) {
  .sac-search .wp-block-search__input {
    width: 130px !important;
  }
}

/* Mobile (<1024px): hide the header search by default; reveal it
   positioned inside the hamburger overlay when the menu is open.
   Without the sac-header-right wrapper, we use .sac-header-inner as
   the :has() ancestor. */
@media (max-width: 1023px) {
  /* Search hidden from the header bar on mobile */
  .sac-header-inner > .sac-search {
    display: none !important;
  }

  /* When the nav overlay is open, slide the search in at the top of it.
     `:has()` lets the .sac-header-inner parent detect the `.is-menu-open`
     state on the nav's responsive container (a deeper descendant). */
  .sac-header-inner:has(.wp-block-navigation__responsive-container.is-menu-open)
    > .sac-search {
    display: block !important;
    position: fixed !important;
    top: 88px !important;
    left: 24px !important;
    right: 24px !important;
    width: auto !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    z-index: 100002 !important;
  }
  .sac-header-inner:has(.wp-block-navigation__responsive-container.is-menu-open)
    > .sac-search
    .wp-block-search__inside-wrapper {
    width: 100% !important;
    padding: 0 6px 0 18px !important;
    background: var(--sac-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  }
  .sac-header-inner:has(.wp-block-navigation__responsive-container.is-menu-open)
    > .sac-search
    .wp-block-search__input {
    width: 100% !important;
    flex: 1 1 auto !important;
    height: 42px !important;
    font-size: 15px !important;
  }
  .sac-header-inner:has(.wp-block-navigation__responsive-container.is-menu-open)
    > .sac-search
    .wp-block-search__button {
    width: 32px !important;
    height: 32px !important;
  }
}

/* === Navigation === */

@media (min-width: 1024px) {
  /* Inline nav sits to the right of the brand, no underline / no full-width
     divider lines — keeping it compact for the horizontal bar. */
  nav.sac-site-nav {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }

  .sac-site-header .wp-block-navigation__responsive-container,
  .sac-site-header .wp-block-navigation__responsive-close,
  .sac-site-header .wp-block-navigation__responsive-dialog,
  .sac-site-header .wp-block-navigation__responsive-container-content {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  ul.wp-block-navigation__container.sac-site-nav {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    gap: clamp(6px, 0.6vw, 12px) !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
  }

  .sac-site-nav .wp-block-navigation-item__label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: clamp(11px, 0.85vw, 12.5px) !important;
    font-weight: 500 !important;
  }
  /* Remove the inter-item "|" separators — the spacing alone reads cleanly */
  .sac-site-nav li.wp-block-navigation-item:not(:last-child)::after {
    content: none !important;
    margin: 0 !important;
  }
  /* (Header search visibility and brand sizing are handled in the sandstone
     header section below — search shows only on large screens; the brand
     scales via --sac-nav-scale.) */
}

/* Active-page highlight applies at all viewport widths */
.sac-site-nav
  li.wp-block-navigation-item.current-menu-item
  .wp-block-navigation-item__label,
.sac-site-nav
  li.wp-block-navigation-item[aria-current="page"]
  .wp-block-navigation-item__label {
  color: var(--sac-gold) !important;
}

/* === Typography treatments (site-wide) === */

/* Eyebrow labels: open tracking. Sized so it reads as a real label
   above page hero titles instead of getting lost. */
.sac-eyebrow {
  letter-spacing: 0.02em !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Section headings — sentence-case serif, no decorative bracket lines.
   `text-transform: none` overrides the legacy h1-h6 uppercase rule
   from style.css. */
.sac-section-heading {
  text-transform: none !important;
  text-wrap: balance;
}

/* Subtle letter-spacing lift on serif headings */
h1.wp-block-heading,
h2.wp-block-heading {
  letter-spacing: 0.01em !important;
}

/* Centred uppercase statement utility — apply via 'Additional CSS class'
   on any paragraph you want rendered as a centered, uppercase, letter-spaced statement */
.sac-v2-statement {
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font-size: 13px !important;
  line-height: 1.9 !important;
  max-width: 60ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === HOME-only: hero (side-by-side: text left, image right) === */

/* Outer hero wrapper — full-bleed so the page background extends edge to
   edge. The inner columns get the width cap so both text and image sit
   inside the same gutter the cards row uses below. Vertical padding is
   tight so the Next Meeting card stays above the fold on laptop heights. */
.sac-hero-outer {
  margin-top: 16px !important;
  margin-bottom: 32px !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}

/* Two-column layout — text left, image right. Columns stretch to match
   heights so the image's top/bottom align with the headline top and the
   Next Meeting card bottom (the text column's natural content height
   sets the row height; the image then fills that height).
   max-width matches .sac-cards-grid so the columns align with the cards
   row directly below the hero. */
.sac-hero-outer > .wp-block-columns {
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 48px !important;
  max-width: min(1200px, calc(100% - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* WP's `is-vertically-aligned-center` class on each column sets
   `align-self: center`, which would defeat the stretch above. Override. */
.sac-hero-outer
  > .wp-block-columns
  > .wp-block-column.is-vertically-aligned-center,
.sac-hero-outer > .wp-block-columns > .wp-block-column {
  align-self: stretch !important;
}

.sac-hero-outer > .wp-block-columns > .wp-block-column:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* Image column is a flex column so the figure inside can flex-grow to
   fill the (stretched) column height. */
.sac-hero-outer > .wp-block-columns > .wp-block-column:nth-child(2) {
  display: flex !important;
  flex-direction: column !important;
}

/* Headline — dark teal, serif, no overlay shadow */
.sac-hero-outer h1.sac-hero-heading {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(34px, 3.8vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.005em !important;
  color: var(--sac-accent) !important;
  max-width: none !important;
  margin: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}

/* Gold/terracotta accent word inside the headline */
.sac-hero-outer .sac-headline-accent {
  color: var(--sac-gold) !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
}

/* Eyebrow — small uppercase label above the headline */
.sac-hero-outer .sac-eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 !important;
}

/* Body copy */
.sac-hero-outer .sac-body {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  max-width: 52ch !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* Site-wide typography on the home page.
   Newsreader's variable opsz axis kicks in at large sizes and renders
   "display-grade" glyph variants by default — but we want the headings
   to read as the old static / text-grade Newsreader. Forcing
   font-optical-sizing:none here keeps headings on the text-grade glyphs.
   The next-meeting date value is intentionally NOT in this rule — it
   has its own override that re-enables font-optical-sizing:auto so the
   date renders display-grade. */
body.home main h1,
body.home main h2,
body.home main h3,
body.home main h4,
body.home main h5,
body.home main h6,
body.home main .sac-hero-heading,
body.home main .sac-section-heading {
  font-family: "Newsreader", Georgia, serif !important;
  font-optical-sizing: none;
}
body.home main p,
body.home main a,
body.home main button,
body.home main li,
body.home main span,
body.home main .sac-eyebrow,
body.home main .sac-body,
body.home main .wp-block-button__link {
  font-family:
    "Public Sans",
    -apple-system,
    system-ui,
    sans-serif !important;
}

/* Buttons row — left-aligned, single line on desktop */
.sac-hero-outer .wp-block-buttons {
  justify-content: flex-start !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}
.sac-hero-outer .wp-block-button {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* Shared button sizing — catches every button in the hero regardless of
   style variant (primary / outline / outline--2 / outline--3 etc.) so
   they all match in size in both frontend and the block editor. */
.sac-hero-outer .wp-block-button .wp-block-button__link,
.sac-hero-outer .wp-block-button__link.wp-element-button {
  padding: 10px 18px !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* Primary CTA — solid dark teal */
.sac-hero-outer .wp-block-button:first-child .wp-block-button__link {
  background-color: var(--sac-accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--sac-accent) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
}
.sac-hero-outer .wp-block-button:first-child .wp-block-button__link:hover {
  background-color: #3a362c !important;
  border-color: #3a362c !important;
}

/* Outline CTAs — white pill with dark border */
.sac-hero-outer .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: var(--sac-surface) !important;
  border: 1px solid var(--sac-border-strong) !important;
  color: var(--sac-accent) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 600 !important;
}
.sac-hero-outer .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--sac-surface-muted) !important;
  border-color: var(--sac-accent) !important;
}

/* Mobile: allow buttons to wrap and grow to full width */
@media (max-width: 768px) {
  .sac-hero-outer .wp-block-buttons {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .sac-hero-outer .wp-block-button {
    flex: 1 1 auto !important;
  }
}

/* Next-meeting card sits directly below the body paragraph, sized to content.
   At rest: no shadow. On hover: lifts and gains a shadow (rule below)
   matches the quick-access cards in the section beneath the hero. */
.sac-hero-outer .sac-next-meeting {
  margin-top: 8px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  background-color: var(--sac-surface-muted) !important;
  box-shadow: none !important;
}
.sac-hero-outer .sac-next-meeting:hover {
  box-shadow: 0 14px 32px rgba(79, 74, 63, 0.12) !important;
}

/* Hero image — right column, rounded corners, no filter.
   On desktop the figure flex-grows inside its column and the <img>
   fills that height so its top/bottom align with the text column. */
.sac-hero-outer .sac-hero-image {
  margin: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  display: flex !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  box-shadow:
    0 14px 32px rgba(79, 74, 63, 0.18),
    0 4px 10px rgba(79, 74, 63, 0.1) !important;
}
.sac-hero-outer .sac-hero-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 35% !important;
  /* Zoom in 10% — scaled within the clipping figure above */
  transform: scale(1.1) !important;
  transform-origin: center 35% !important;
  border-radius: 14px !important;
  display: block !important;
  filter: none !important;
}

/* Mobile (≤768px): single-column stack — let the image use its natural
   landscape aspect ratio with a height cap instead of stretching. */
@media (max-width: 768px) {
  .sac-hero-outer > .wp-block-columns {
    align-items: flex-start !important;
  }
  .sac-hero-outer .sac-hero-image {
    flex: 0 0 auto !important;
    display: block !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow:
      0 10px 22px rgba(79, 74, 63, 0.16),
      0 3px 8px rgba(79, 74, 63, 0.08) !important;
  }
  .sac-hero-outer .sac-hero-image img {
    height: auto !important;
    max-height: 320px !important;
    aspect-ratio: 5 / 4 !important;
    border-radius: 12px !important;
  }
}

/* === Below desktop (≤1023px): nav stays inline on the right ===
   With the horizontal bar, the hamburger naturally sits to the right of
   the brand via the flex layout — no absolute positioning needed. */
@media (max-width: 1023px) {
  nav.sac-site-nav {
    position: static !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
}

/* === Mobile (≤768px): compact header + single-column hero stack === */
@media (max-width: 768px) {
  /* Header: tighter padding, smaller logo + title for the narrow bar */
  .sac-header-inner {
    padding: 10px 16px !important;
    gap: 12px !important;
  }
  .sac-header-brand {
    gap: 10px !important;
  }
  .sac-logo-box {
    width: 46px !important;
    height: 46px !important;
  }
  .sac-header-brand .wp-block-site-title a {
    font-size: 16px !important;
  }

  /* Hero: shrink page-edge margin so the photo card has room to breathe.
     Selector matches .sac-hero-outer.wp-block-cover so specificity wins
     against the base v2 rule above. */
  .sac-hero-outer.wp-block-cover {
    margin-top: 20px !important;
    margin-bottom: 40px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    max-width: calc(100% - 32px) !important;
    border-radius: 14px !important;
    padding: 40px 16px !important;
  }

  /* Inner column expands to the available width */
  .sac-hero-outer .wp-block-column:first-child {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    gap: 14px !important;
  }

  /* Subhead doesn't pull as hard against the smaller mobile headline */
  .sac-hero-outer .sac-body {
    margin-top: -8px !important;
    max-width: 100% !important;
  }

  /* Buttons stack vertically, each full-width up to a sensible max */
  .sac-hero-outer .wp-block-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .sac-hero-outer .wp-block-buttons .wp-block-button {
    width: 100% !important;
    max-width: 300px !important;
  }
  .sac-hero-outer .wp-block-buttons .wp-block-button__link {
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Next-meeting card on mobile: 2-column grid so the Time row and the
     "View details →" link share a single row at the bottom (no wasted
     empty space). Date row spans both columns at the top. */
  .sac-hero-outer .sac-next-meeting {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 10px 16px !important;
    padding: 14px 18px !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .sac-hero-outer .sac-next-meeting * {
    text-align: left !important;
  }

  /* Date row spans both columns, with a thin blue-tinted divider below */
  .sac-hero-outer .sac-next-meeting-date {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 0 10px 0 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(147, 138, 110, 0.45) !important;
    justify-content: flex-start !important;
  }
  .sac-hero-outer .sac-next-meeting-date::before {
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
  }
  .sac-hero-outer .sac-meeting-date-stack {
    align-items: flex-start !important;
    gap: 2px !important;
  }

  /* Bottom row: Time inline on left, View details on right */
  .sac-hero-outer .sac-next-meeting-time {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 0 !important;
    width: auto !important;
  }
  .sac-hero-outer .sac-next-meeting-time .sac-meeting-label {
    flex: 0 0 auto !important;
  }
  .sac-hero-outer .sac-next-meeting-link {
    grid-column: 2 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  .sac-hero-outer .sac-next-meeting-link,
  .sac-hero-outer .sac-next-meeting-link a {
    text-align: right !important;
  }

  /* Section heading bracket lines shrink so they don't dominate */
  .sac-section-heading::before,
  .sac-section-heading::after {
    flex: 0 0 24px !important;
  }

  /* Stat grid: 3 cols → single column */
  .sac-stat-grid.wp-block-columns {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .sac-stat-grid .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Make sure the topo footer pattern doesn't read as too dense at small
     widths — keep the cover but anchor centre so peak features stay visible */
  .sac-site-footer {
    background-position: center center !important;
  }

  /* Reduce vertical padding on full-width sections (every interior page).
     Desktop has 64px top/bottom; mobile feels cramped at that. Also add
     horizontal padding so content doesn't run edge-to-edge. */
  .sac-archive-section,
  .sac-attend-section,
  .sac-participate-section,
  .sac-schedule-section,
  .sac-faq-cta-section,
  .sac-faq-nav-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Meeting Information schedule rows — stack date / time / location
     vertically so they don't overflow or wrap awkwardly */
  .sac-schedule-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 16px 18px !important;
  }
  .sac-schedule-row-left {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .sac-schedule-location {
    margin-left: 0 !important;
  }

  /* FAQ CTA card padding tightens so content has room on small screens */
  .sac-faq-cta-card {
    padding: 28px 22px !important;
    border-radius: 22px !important;
  }
  /* FAQ pill nav — let pills wrap onto multiple lines */
  .sac-faq-pills {
    flex-wrap: wrap !important;
  }

  /* Resource Library archive section padding tighter */
  .sac-rl-archive-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Contact info cards — tighter padding on mobile */
  .sac-contact-info-card.wp-block-group {
    padding: 22px !important;
    border-radius: 22px !important;
  }

  /* Stat cards row (About + Water Monitoring) — let WP's default column
     stacking handle layout, but reduce gap and re-cap max-width to 100% */
  .sac-stat-cards-row.wp-block-columns {
    max-width: 100% !important;
    gap: 10px !important;
  }
}

/* ─── Cookie consent banner ────────────────────────────────────────────────── */
.sac-cookie-banner {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 200;
  max-width: 540px;
  width: calc(100vw - 40px);
  background: var(--sac-surface);
  color: var(--sac-fg);
  border: 1px solid rgba(79, 74, 63, 0.12);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(79, 74, 63, 0.18);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.sac-cookie-banner[hidden] {
  display: none !important;
}
.sac-cookie-banner--visible {
  opacity: 1;
  transform: translateY(0);
}
.sac-cookie-banner-inner {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sac-cookie-banner-title {
  font-family: "Newsreader", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  margin: 0 0 6px;
  color: var(--sac-fg);
  line-height: 1.2;
}
.sac-cookie-banner-body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(79, 74, 63, 0.84);
  margin: 0;
}
.sac-cookie-banner-body a {
  color: var(--sac-accent);
  text-decoration: underline;
  text-decoration-color: var(--sac-gold);
  text-underline-offset: 3px;
}
.sac-cookie-banner-body a:hover {
  color: var(--sac-gold);
}
.sac-cookie-banner-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.sac-cookie-banner-btn {
  flex: 0 0 auto;
  min-width: 110px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.sac-cookie-banner-btn--primary {
  background: var(--sac-accent);
  color: #fff;
}
.sac-cookie-banner-btn--primary:hover {
  background: var(--sac-fg);
}
.sac-cookie-banner-btn--secondary {
  background: transparent;
  color: var(--sac-fg);
  border-color: rgba(79, 74, 63, 0.3);
}
.sac-cookie-banner-btn--secondary:hover {
  border-color: var(--sac-fg);
  background: rgba(79, 74, 63, 0.04);
}
.sac-cookie-banner-btn:focus-visible {
  outline: 2px solid var(--sac-gold);
  outline-offset: 3px;
}

/* Footer "Cookie settings" — styled like the surrounding footer-nav links */
.sac-footer-link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.sac-footer-link-button:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .sac-cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
  .sac-cookie-banner-actions {
    justify-content: stretch;
  }
  .sac-cookie-banner-btn {
    flex: 1 1 0;
  }
}

/* ─── Back-to-top button (FAQ page) ───────────────────────────────────────── */
.sac-back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sac-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s,
    background-color 0.2s;
  box-shadow: 0 6px 18px rgba(79, 74, 63, 0.22);
  z-index: 100;
  padding: 0;
}
.sac-back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sac-back-to-top:hover {
  background: var(--sac-fg);
}
.sac-back-to-top:focus-visible {
  outline: 2px solid var(--sac-gold);
  outline-offset: 3px;
}
@media (max-width: 768px) {
  .sac-back-to-top {
    bottom: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
  }
}

/* ─── Search results page (templates/search.html) ──────────────────────── */

.sac-search-hero {
  padding: 56px 24px 32px !important;
  text-align: center;
}
.sac-search-hero .sac-eyebrow {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 auto 14px !important;
}
.sac-search-hero .sac-search-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  line-height: 1.15 !important;
  color: var(--sac-accent) !important;
  margin: 0 auto 24px !important;
  max-width: 900px;
}

/* Inline search bar on the results page — bigger than the header version,
   centered under the title. Selector matches the header `.sac-search`
   specificity (two classes) so margin: 0 auto wins over the header rule. */
.sac-search.sac-search--page {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 520px !important;
  width: 100% !important;
}
.sac-search.sac-search--page .wp-block-search__inside-wrapper {
  width: 100% !important;
  padding: 0 6px 0 18px !important;
}
.sac-search.sac-search--page .wp-block-search__input {
  height: 44px !important;
  width: 100% !important;
  font-size: 15px !important;
  flex: 1 1 auto !important;
}
.sac-search.sac-search--page .wp-block-search__button {
  width: 36px !important;
  height: 36px !important;
}
.sac-search.sac-search--page .wp-block-search__button svg {
  width: 18px !important;
  height: 18px !important;
}

/* Results container */
.sac-search-results {
  padding: 16px 24px 80px !important;
}
.sac-search-query.wp-block-query {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Each result card */
.sac-search-result.wp-block-group {
  background: var(--sac-surface) !important;
  border: 1px solid rgba(165, 157, 137, 0.35);
  border-radius: 14px;
  padding: 22px 24px !important;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(79, 74, 63, 0.04);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}
.sac-search-result.wp-block-group:hover {
  border-color: rgba(79, 74, 63, 0.35);
  box-shadow: 0 6px 18px rgba(79, 74, 63, 0.1);
  transform: translateY(-1px);
}

.sac-search-result-title {
  margin: 0 0 8px !important;
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.25 !important;
}
.sac-search-result-title a {
  color: var(--sac-accent) !important;
  text-decoration: none !important;
}
.sac-search-result-title a:hover {
  text-decoration: underline !important;
  text-decoration-color: var(--sac-gold) !important;
  text-underline-offset: 4px !important;
}

.sac-search-result-excerpt {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  margin: 0 0 12px !important;
}
.sac-search-result-excerpt a {
  color: var(--sac-gold) !important;
  font-weight: 600;
  text-decoration: none;
}
.sac-search-result-excerpt a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sac-search-result-meta {
  gap: 12px !important;
  font-size: 12px !important;
  color: var(--sac-accent-soft) !important;
  letter-spacing: 0.02em;
}
.sac-search-result-date {
  font-size: 12px !important;
  color: var(--sac-accent-soft) !important;
  margin: 0 !important;
}

/* Pagination row */
.sac-search-pagination.wp-block-query-pagination {
  margin-top: 28px !important;
  gap: 16px !important;
  align-items: center !important;
}
.sac-search-pagination .wp-block-query-pagination-previous,
.sac-search-pagination .wp-block-query-pagination-next {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--sac-accent) !important;
  text-decoration: none !important;
}
.sac-search-pagination .wp-block-query-pagination-previous:hover,
.sac-search-pagination .wp-block-query-pagination-next:hover {
  color: var(--sac-gold) !important;
}
.sac-search-pagination .wp-block-query-pagination-numbers {
  display: flex;
  gap: 6px;
  font-size: 14px;
}
.sac-search-pagination .page-numbers {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--sac-fg) !important;
  text-decoration: none !important;
  transition: background-color 150ms ease;
}
.sac-search-pagination .page-numbers:hover {
  background: rgba(79, 74, 63, 0.06);
}
.sac-search-pagination .page-numbers.current {
  background: var(--sac-accent);
  color: #fff !important;
}

/* Empty state */
.sac-search-empty.wp-block-group {
  background: var(--sac-surface) !important;
  border: 1px solid rgba(165, 157, 137, 0.35);
  border-radius: 18px;
  padding: 40px 32px !important;
  text-align: center;
  max-width: 580px;
  margin: 8px auto 0;
}
.sac-search-empty-title {
  font-family: "Newsreader", Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  color: var(--sac-accent) !important;
  margin: 0 0 10px !important;
}
.sac-search-empty-body {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(79, 74, 63, 0.84) !important;
  margin: 0 0 20px !important;
}
.sac-search-empty-actions.wp-block-buttons {
  justify-content: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.sac-search-empty-actions .wp-block-button:first-child .wp-block-button__link {
  background-color: var(--sac-accent) !important;
  color: #fff !important;
  border: 1px solid var(--sac-accent) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.sac-search-empty-actions
  .wp-block-button.is-style-outline
  .wp-block-button__link {
  background: var(--sac-surface) !important;
  color: var(--sac-accent) !important;
  border: 1px solid var(--sac-border-strong) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

@media (max-width: 768px) {
  .sac-search-hero {
    padding: 36px 18px 24px !important;
  }
  .sac-search-results {
    padding: 12px 18px 56px !important;
  }
  .sac-search-result.wp-block-group {
    padding: 18px 18px !important;
  }
  .sac-search-result-title {
    font-size: 19px !important;
  }
}

/* ─── Universal card hover treatment ────────────────────────────────────
   Every card-like surface gets a subtle lift on hover IF it contains a
   link (i.e. behaves like a clickable item). Purely informational cards
   stay static. `:has(:any-link)` checks for a descendant link; cards
   that ARE the link element themselves (.sac-rl-card, an <a>) keep
   their existing unconditional :hover defined further up.
*/

/* Smooth transition baseline for every card class */
.sac-card,
.sac-archive-card,
.sac-principle-card,
.sac-initiative-card,
.sac-next-meeting,
.sac-meeting-info-card,
.sac-attend-card,
.sac-member-card,
.sac-bylaws-card,
.sac-status-card,
.sac-faq-cta-card,
.sac-contact-info-card,
.sac-param-card,
.sac-pdf-card,
.sac-rl-latest-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.2s ease;
}

/* Hover lift for cards that don't already define one — gated on link presence */
.sac-meeting-info-card:has(:any-link):hover,
.sac-attend-card:has(:any-link):hover,
.sac-member-card:has(:any-link):hover,
.sac-bylaws-card:has(:any-link):hover,
.sac-status-card:has(:any-link):hover,
.sac-faq-cta-card:has(:any-link):hover,
.sac-contact-info-card:has(:any-link):hover,
.sac-param-card:has(:any-link):hover,
.sac-pdf-card:has(:any-link):hover,
.sac-rl-latest-card:has(:any-link):hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(79, 74, 63, 0.12);
}

/* Pointer cursor when a card is hoverable (has a link inside) */
.sac-card:has(:any-link),
.sac-archive-card:has(:any-link),
.sac-principle-card:has(:any-link),
.sac-initiative-card:has(:any-link),
.sac-next-meeting:has(:any-link),
.sac-meeting-info-card:has(:any-link),
.sac-attend-card:has(:any-link),
.sac-member-card:has(:any-link),
.sac-bylaws-card:has(:any-link),
.sac-status-card:has(:any-link),
.sac-faq-cta-card:has(:any-link),
.sac-contact-info-card:has(:any-link),
.sac-param-card:has(:any-link),
.sac-pdf-card:has(:any-link),
.sac-rl-latest-card:has(:any-link) {
  cursor: pointer;
}

/* ──────── END NEW DESIGN ──────── */

/* ════════════════════════════════════════════════════════════════════════════
   CHARCOAL LODGE — June 2026 direction (approved from /brand-lab-charcoal.html)
   Site-wide: floating pill nav on a charcoal topo band.
   Home only (body.home): charcoal hero, sage cards band, sienna about band.
   These rules intentionally come last in the file so they win cascade ties
   against the earlier header/hero/cards rules.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Header: transparent band, floating pill only ──────────────────────── */

/* No band background — just the rounded pill floats, so the page content
   (and topo field) shows through around and behind it. The header still
   reserves vertical space and stays sticky; the transparent margin is
   click-through so links behind it remain reachable. */
header.sac-site-header,
.sac-site-header {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 18px 24px 14px !important;
  pointer-events: none !important;
}

/* The inner row IS the pill — opaque so nav stays readable over anything.
   nowrap is critical: if the row ever wraps, the search drops to a second
   line and the pill goes oval. */
.sac-header-inner {
  max-width: 1400px !important;
  padding: 10px 22px 10px 24px !important;
  gap: 16px !important;
  background: rgba(59, 55, 47, 0.92) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(234, 226, 212, 0.18) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35) !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  pointer-events: auto !important;
}
.sac-header-inner > * {
  min-width: 0;
}

/* Tree mark — apricot via mask (the SVG file itself is ink-filled) */
.sac-logo-box {
  width: 52px !important;
  height: 52px !important;
  background: var(--sac-apricot) !important;
  -webkit-mask: url("/wp-content/themes/stibnite-advisory/assets/images/sac-tree.svg")
    no-repeat center / contain !important;
  mask: url("/wp-content/themes/stibnite-advisory/assets/images/sac-tree.svg")
    no-repeat center / contain !important;
}

/* Wordmark — letterspaced Cormorant caps in cream */
.sac-header-brand .wp-block-site-title a,
.sac-site-header .wp-block-site-title,
.sac-site-header .wp-block-site-title a,
.sac-site-header .wp-block-site-title h1,
.sac-site-header .wp-block-site-title span {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  /* Fluid by viewport so the row fits the pill at every width ≥1024px without
     JS: full 20px from ~1290px up, scaling down to 14px near 1024px. The
     nav-fit script (functions.php) still lowers --sac-nav-scale as a backstop
     if a translation/menu change makes the row longer than these clamps
     assume. em-based tracking scales with the font. */
  font-size: calc(
    clamp(14px, 1.55vw, 20px) * var(--sac-nav-scale, 1)
  ) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--sac-surface-strong) !important;
}

/* Nav links — Jost caps in cream, apricot hover/active */
.sac-site-header .sac-site-nav .wp-block-navigation-item__content,
.sac-site-header .sac-site-nav .wp-block-navigation-item__label {
  font-family: "Jost", "Public Sans", sans-serif !important;
  /* Fluid by viewport (see wordmark note above); --sac-nav-scale is the JS
     backstop for row lengths the clamps don't anticipate. */
  font-size: calc(
    clamp(10.5px, 1vw, 12.5px) * var(--sac-nav-scale, 1)
  ) !important;
  font-weight: 400 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--sac-surface-strong) !important;
  white-space: nowrap !important;
}
/* Fluid link gaps so the row fits from 1024px up (24px from ~1265px) */
.sac-site-header ul.wp-block-navigation__container.sac-site-nav,
.sac-site-header .sac-site-nav .wp-block-navigation__container {
  gap: calc(clamp(12px, 1.9vw, 24px) * var(--sac-nav-scale, 1)) !important;
  flex-wrap: nowrap !important;
}
.sac-site-header .sac-site-nav .wp-block-navigation-item__content:hover,
.sac-site-header
  .sac-site-nav
  .wp-block-navigation-item__content:hover
  .wp-block-navigation-item__label {
  color: var(--sac-apricot) !important;
}
.sac-site-header
  .sac-site-nav
  li.wp-block-navigation-item.current-menu-item
  .wp-block-navigation-item__label,
.sac-site-header
  .sac-site-nav
  li.wp-block-navigation-item[aria-current="page"]
  .wp-block-navigation-item__label {
  color: var(--sac-apricot) !important;
}

/* Hamburger (sub-1200px) — cream lines on the dark pill */
.sac-site-header .wp-block-navigation__responsive-container-open,
.sac-site-header .wp-block-navigation__responsive-container-open svg {
  color: var(--sac-surface-strong) !important;
  fill: var(--sac-surface-strong) !important;
}

/* Search — translucent dark pill inside the nav pill */
.sac-site-header .sac-search .wp-block-search__inside-wrapper {
  background: rgba(234, 226, 212, 0.08) !important;
  border: 1px solid rgba(234, 226, 212, 0.22) !important;
  box-shadow: none !important;
}
.sac-site-header .sac-search .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--sac-apricot) !important;
  box-shadow: none !important;
}
.sac-site-header .sac-search .wp-block-search__input {
  color: var(--sac-surface-strong) !important;
}
.sac-site-header .sac-search .wp-block-search__input::placeholder {
  color: rgba(234, 226, 212, 0.55) !important;
}
.sac-site-header .sac-search .wp-block-search__button {
  color: var(--sac-surface-strong) !important;
}
.sac-site-header .sac-search .wp-block-search__button:hover {
  background: rgba(234, 226, 212, 0.12) !important;
}
/* Search must be able to shrink instead of forcing a wrap */
.sac-site-header .sac-search.wp-block-search {
  flex: 0 1 auto !important;
}
.sac-site-header .sac-search .wp-block-search__input {
  width: clamp(80px, 9vw, 140px) !important;
}
/* Header search shows only on LARGE screens (>=1440px), where the brand
   wordmark + 7 nav links + search fit the pill at full size. It's hidden on
   1024-1439px (the inline nav uses that room) and moves into the mobile menu
   overlay below 1024px. The nav-fit script measures the row including the
   search when it's visible, so it still scales down if a given width is tight. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .sac-header-inner > .sac-search {
    display: none !important;
  }
}
/* (The old mid-desktop brand-shrink media query was removed — the nav-fit
   script now scales the whole row via --sac-nav-scale only when it would
   overflow, which supersedes the fixed-step approach.) */
/* Phone: compact lockup so brand + hamburger fit inside the pill */
@media (max-width: 599px) {
  .sac-site-header {
    padding: 12px 14px 10px !important;
  }
  .sac-header-inner {
    padding: 8px 12px 8px 16px !important;
    gap: 12px !important;
  }
  .sac-logo-box {
    width: 40px !important;
    height: 40px !important;
  }
  .sac-header-brand {
    gap: 10px !important;
  }
  .sac-header-brand .wp-block-site-title a,
  .sac-site-header .wp-block-site-title a,
  .sac-site-header .wp-block-site-title span {
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
  }
}

/* ─── Home: ONE continuous charcoal topo field for the whole page ───────── */

/* Reserved height of the floating pill header — used site-wide to pull the
   first section up under the pill (home hero + interior hero bands). */
body {
  --sac-header-h: 100px;
}
@media (max-width: 599px) {
  body {
    --sac-header-h: 76px;
  }
}

/* The body holds the charcoal field that the hero rides + shows behind the
   transparent floating header. */
body.home {
  background-color: var(--sac-accent) !important;
  background-image: none !important;
}
/* Mobile uses the body::before fixed-pseudo fallback (see ~4480) — repaint
   it with the dark-field pattern instead of the cream topo-light. */
@media (max-width: 768px) {
  body.home::before {
    background-image: none;
  }
}
@media (max-width: 599px) {
  body.home {
    --sac-header-h: 76px;
  }
}

.home .sac-hero-outer {
  background: transparent !important;
}

/* Hero sits up near the nav and sizes to its content (no viewport-height
   stretch). The hero is main > .wp-block-post-content > .sac-hero-outer.alignfull;
   the gap-killer ".home main .wp-block-post-content > .wp-block-group.alignfull
   {margin-top:0}" sets margin-top:0 at (0,4,1). Adding .sac-hero-outer to the
   same path makes this (0,5,1) so the negative pull-up under the floating header
   wins. The negative margin pulls the band up behind the floating pill so the
   body field stays continuous; padding-top then clears the pill (header height +
   gap) so the content begins just below the nav. Anchoring to flex-start instead
   of centering keeps the headline tight under the nav and lets the quick-access
   cards follow directly — no tall empty band above or below. */
.home main .wp-block-post-content > .wp-block-group.sac-hero-outer.alignfull {
  margin-top: calc(-1 * var(--sac-header-h)) !important;
  padding-top: calc(var(--sac-header-h) + 104px) !important;
  padding-bottom: 96px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}
/* Keep the columns at natural height (don't stretch) so centering is true */
.home .sac-hero-outer > .wp-block-columns {
  width: 100% !important;
  flex: 0 0 auto !important;
  align-self: center !important;
}

.home .sac-hero-outer h1.wp-block-heading,
.home .sac-hero-heading {
  color: var(--sac-surface-strong) !important;
}
.home .sac-hero-outer .sac-headline-accent {
  color: var(--sac-apricot) !important;
  font-style: italic !important;
}
.home .sac-hero-outer .sac-body {
  color: rgba(234, 226, 212, 0.84) !important;
}

/* Photo: lifted off the dark field */
.home .sac-hero-outer .sac-hero-image img {
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.38) !important;
  outline: 1px solid rgba(234, 226, 212, 0.25);
  border-radius: 14px;
}

/* Next-meeting card — dark variant */
.home .sac-hero-outer .sac-next-meeting {
  background: #5b554a !important;
  border: 1px solid #6e6759 !important;
  box-shadow: none !important;
}
.home .sac-hero-outer .sac-next-meeting:has(:any-link):hover {
  background: #635c50 !important;
  border-color: #7c7565 !important;
}
.home .sac-hero-outer .sac-next-meeting-date {
  border-right-color: #6e6759 !important;
}
.home .sac-hero-outer .sac-next-meeting-date::before {
  background: var(--sac-apricot) !important;
}
.home .sac-hero-outer .sac-meeting-label {
  color: rgba(234, 226, 212, 0.72) !important;
}
.home .sac-hero-outer .sac-meeting-date-value,
.home .sac-hero-outer .sac-meeting-time-value {
  color: var(--sac-surface-strong) !important;
}
.home .sac-hero-outer .sac-meeting-subtitle {
  color: rgba(234, 226, 212, 0.6) !important;
}
.home .sac-hero-outer .sac-next-meeting-link,
.home .sac-hero-outer .sac-next-meeting-link a {
  color: var(--sac-apricot) !important;
}

/* ─── Home bands: kill cream gaps so the sections butt together ─────────── */
.home main > .wp-block-group.alignfull,
.home main .wp-block-post-content > .wp-block-group.alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ─── Section rhythm: dark hero → LIGHT cards → WARM about → dark footer ──
   The hero rides the body charcoal field (above). Cards open into a bright
   cream band, About is a warm sienna band, footer closes back to charcoal.
   Each section is opaque so it covers the body field cleanly. */

/* Cards band — bright cream relief after the dark hero, with the light topo
   (dark contour strokes) drifting behind it so the texture carries through. */
.home .sac-cards-section {
  background-color: var(--sac-surface-strong) !important;
  background-image: none !important;
  padding-top: 72px;
  padding-bottom: 80px;
}
.home .sac-card {
  /* lifted white-cream so cards read as cards against the cream band */
  background-color: #f7f4ec !important;
  box-shadow: 0 10px 28px rgba(79, 74, 63, 0.14);
}
.home .sac-card:has(:any-link):hover {
  box-shadow: 0 18px 40px rgba(79, 74, 63, 0.2);
}
.home .sac-card .sac-card-label {
  color: var(--sac-gold) !important;
}
.home .sac-card h3.wp-block-heading {
  color: var(--sac-accent) !important;
}

/* About band — soft sage, cream type (sienna read too stark here), with the
   cream-stroke topo over it so the contour texture continues on the sage. */
.home .sac-about-section {
  background-color: var(--sac-olive) !important;
  background-image: none !important;
}
.home .sac-about-title {
  color: var(--sac-surface-strong) !important;
}
.home .sac-about-eyebrow {
  color: rgba(234, 226, 212, 0.8) !important;
}
.home .sac-about-body {
  color: rgba(234, 226, 212, 0.92) !important;
}
.home .sac-about-link,
.home .sac-about-link-wrap a,
.home .sac-about-link::after {
  color: var(--sac-surface-strong) !important;
}
.home .sac-about-link::after {
  /* keep the underline cream too */
  border-color: rgba(234, 226, 212, 0.5) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   INTERIOR PAGE SYSTEM — June 2026 (extends the Charcoal Lodge homepage)
   Reusable pattern for all interior pages:
     • a compact charcoal-topo HERO BAND at the top (pill floats over it)
     • cream content body for long-form / data (rides the body topo-light field)
     • optional sage ACCENT BANDS to break up the page (same rhythm as home)
   Hero-band rules are keyed to a growing selector list — add each page's hero
   section class here as that page is converted. First page: Water Monitoring.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Interior hero band → SANDSTONE: transparent, rides the body field + grain,
       pulled up under the pill. Dark-ink type + sienna eyebrow, matching the new
       homepage hero. ──────────────────────────────────────────────────────── */
.sac-wm-hero-section {
  background: transparent !important;
  margin-top: calc(-1 * var(--sac-header-h)) !important;
  padding-top: calc(var(--sac-header-h) + 44px) !important;
  padding-bottom: 64px !important;
}
.sac-wm-hero-section .sac-eyebrow {
  color: var(--sac-gold) !important;
}
.sac-wm-hero-section .sac-page-heading {
  color: var(--sac-accent) !important;
}
.sac-wm-hero-section .sac-about-body-lead,
.sac-wm-hero-section p {
  color: var(--sac-fg-muted) !important;
}
/* Hero image — soft shadow + faint dark hairline to lift it off the sand field */
.sac-wm-hero-section .sac-hero-image-placeholder .wp-block-image img {
  outline: 1px solid rgba(79, 74, 63, 0.1) !important;
  box-shadow: 0 20px 48px rgba(79, 74, 63, 0.18) !important;
}

/* ─── Params section → cream/light, rides the body field (data legibility) ── */
.sac-params-section {
  background: transparent !important;
  border-top: 1px solid rgba(124, 117, 101, 0.18);
}

/* ─── Full-bleed interior bands ──────────────────────────────────────────────
   Interior pages (page.html) use a CONSTRAINED post-content capped at the 1600px
   content width, so its alignfull children (the hero / params / report / accent
   bands) were actually maxed at 1600px and centred — leaving cream gutters on
   monitors wider than that (most visible on the right, against the fixed tree).
   The home page avoids this because front-page.html uses an unconstrained
   post-content. Break every alignfull band out to the true viewport edges; the
   existing `overflow-x: clip` on <html> absorbs the 100vw scrollbar overshoot.
   Specificity (0,3,0) beats the style.css `.entry-content > .alignfull` reset. */
.wp-block-post-content.is-layout-constrained > .alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* ─── Report section → soft sage accent band (same as the home about band);
       grain texture, the light report card pops. ──────────────────────────── */
.sac-report-section {
  background-color: var(--sac-olive) !important;
  background-image: url("/wp-content/themes/stibnite-advisory/assets/images/sac-grain-dark.svg") !important;
  background-size: 220px 220px !important;
  background-repeat: repeat !important;
  background-position: top left !important;
}
/* Any section-level text outside the card goes cream on the sage */
.sac-report-section > .sac-page-container > .sac-section-heading,
.sac-report-section .sac-report-body {
  color: var(--sac-surface-strong) !important;
}

/* Report card centered + narrowed so the sage band frames it as a featured
   callout (otherwise the full-width card swallows the accent colour). */
.sac-report-section .sac-water-report-card {
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.18) !important;
}
.sac-report-section {
  padding-top: 76px !important;
  padding-bottom: 84px !important;
}
/* ════════════════════════════════════════════════════════════════════════════
   INTERIOR ROLLOUT — FAQ · Resources · About · Meeting Info · Contact
   Same system as Water Monitoring: charcoal-topo hero band (pulled up under
   the floating pill) → cream content → one sage accent band per page.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Hero bands (shared) → SANDSTONE: transparent, riding the body field +
       grain, pulled up under the pill. Dark-ink type + sienna eyebrow. ─────── */
.sac-faq-hero-section,
.sac-rl-header-section,
.sac-about-page-hero-section,
.sac-page-header,
.sac-contact-section {
  background: transparent !important;
  margin-top: calc(-1 * var(--sac-header-h)) !important;
  padding-top: calc(var(--sac-header-h) + 44px) !important;
  padding-bottom: 64px !important;
}
/* Eyebrow → sienna; page title → dark ink */
.sac-faq-hero-section .sac-eyebrow,
.sac-rl-header-section .sac-eyebrow,
.sac-about-page-hero-section .sac-eyebrow,
.sac-page-header .sac-eyebrow,
.sac-contact-section .sac-eyebrow {
  color: var(--sac-gold) !important;
}
.sac-faq-hero-section .sac-page-heading,
.sac-rl-header-section .sac-page-heading,
.sac-about-page-hero-section .sac-page-heading,
.sac-page-header .sac-page-heading,
.sac-contact-section .sac-page-heading {
  color: var(--sac-accent) !important;
}
/* Intro paragraphs → dark ink on the sand field */
.sac-faq-hero-section p,
.sac-rl-header-section p,
.sac-about-page-hero-section p {
  color: var(--sac-fg-muted) !important;
}

/* ─── Contact: dark "reach us" panel ────────────────────────────────────── */
.sac-contact-section {
  padding-bottom: 84px !important;
}
.sac-contact-section .sac-contact-lead {
  color: var(--sac-fg-muted) !important;
}
.sac-contact-section .sac-form-label {
  color: var(--sac-fg-muted) !important;
}
/* Submit → solid charcoal primary on the light form */
.sac-contact-section .sac-form-submit,
.sac-contact-section input.sac-form-submit {
  background: var(--sac-accent) !important;
  color: var(--sac-surface-strong) !important;
}
.sac-contact-section .sac-form-submit:hover,
.sac-contact-section input.sac-form-submit:hover {
  opacity: 1 !important;
  background: #3f3a31 !important;
}
/* Info cards are light cream panels lifting off the sand field */
.sac-contact-section .sac-contact-info-card.wp-block-group {
  box-shadow: 0 14px 32px rgba(79, 74, 63, 0.14) !important;
}

/* ─── Sage accent bands: FAQ cta · About bios · Meeting attend (same sage as
       the home about band; grain texture). ────────────────────────────────── */
.sac-faq-cta-section,
.sac-bios-section,
.sac-attend-section {
  background-color: var(--sac-olive) !important;
  background-image: url("/wp-content/themes/stibnite-advisory/assets/images/sac-grain-dark.svg") !important;
  background-size: 220px 220px !important;
  background-repeat: repeat !important;
  background-position: top left !important;
}
/* Section-level (non-card) text on the sage → soft cream (matches the home
   about band; apricot read too hot against the olive). The cards inside
   (sac-member-card / sac-attend-card / sac-faq-cta-card) are light and keep
   their own dark text. */
.sac-bios-section > .sac-page-container .sac-eyebrow,
.sac-attend-section > .sac-page-container .sac-eyebrow {
  color: rgba(234, 226, 212, 0.8) !important;
}
.sac-bios-section > .sac-page-container > .sac-section-heading,
.sac-bios-section .sac-bios-intro-body,
.sac-attend-section > .sac-page-container > .sac-section-heading {
  color: var(--sac-surface-strong) !important;
}

/* ─── Mobile overlay menu: cream links + apricot hover (match desktop) ───── */
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  color: var(--sac-surface-strong) !important;
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover {
  background: rgba(234, 226, 212, 0.1) !important;
  color: var(--sac-apricot) !important;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  HOME — SANDSTONE PALETTE  (chosen direction, June 2026)                  ║
   ║  Light warm field + cream floating pill nav. Bands:                      ║
   ║    hero  → sandstone #e6e1d3 (+ light topo)                               ║
   ║    cards → warm sand #ddd6c5 band, white lifted cards                     ║
   ║    about → sage #938a6e (cream type) · footer → charcoal                  ║
   ║  Scoped to body.home. To revert to the dark charcoal hero, delete this   ║
   ║  whole block (down to end of file).                                      ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* 1 — Page field the hero rides + the strip behind the pill → sandstone + paper grain */
body.home {
  background-color: #e6e1d3 !important;
  background-image: url("/wp-content/themes/stibnite-advisory/assets/images/sac-grain.svg") !important;
  background-size: 220px 220px !important;
  background-repeat: repeat !important;
  background-attachment: scroll !important;
}
@media (max-width: 768px) {
  body.home::before {
    background-image: url("/wp-content/themes/stibnite-advisory/assets/images/sac-grain.svg") !important;
    background-size: 220px 220px !important;
    background-repeat: repeat !important;
  }
}

/* 2 — Hero type → dark ink, accent → sienna (light bg) */
body.home .sac-hero-outer h1.wp-block-heading,
body.home .sac-hero-heading {
  color: var(--sac-accent) !important;
}
body.home .sac-hero-outer .sac-headline-accent {
  color: #d9772a !important;
}
body.home .sac-hero-outer .sac-body {
  color: var(--sac-fg-muted) !important;
}

/* 3 — Hero next-meeting card → lifted cream with dark type, sienna accents */
body.home .sac-hero-outer .sac-next-meeting {
  background: #f7f3ea !important;
  border: 1px solid rgba(79, 74, 63, 0.12) !important;
}
body.home .sac-hero-outer .sac-next-meeting:has(:any-link):hover {
  background: #fff !important;
  border-color: rgba(79, 74, 63, 0.2) !important;
}
body.home .sac-hero-outer .sac-next-meeting-date {
  border-right-color: rgba(79, 74, 63, 0.18) !important;
}
body.home .sac-hero-outer .sac-next-meeting-date::before {
  background: var(--sac-gold) !important;
}
body.home .sac-hero-outer .sac-meeting-label {
  color: var(--sac-fg-muted) !important;
}
body.home .sac-hero-outer .sac-meeting-date-value,
body.home .sac-hero-outer .sac-meeting-time-value {
  color: var(--sac-accent) !important;
}
body.home .sac-hero-outer .sac-meeting-subtitle {
  color: var(--sac-fg-muted) !important;
}
body.home .sac-hero-outer .sac-next-meeting-link,
body.home .sac-hero-outer .sac-next-meeting-link a {
  color: var(--sac-gold) !important;
}

/* 4 — Cards band → a touch deeper warm sand so it reads as its own band,
       with white lifted cards, paper grain behind */
body.home .sac-cards-section {
  background-color: #ddd6c5 !important;
  background-image: url("/wp-content/themes/stibnite-advisory/assets/images/sac-grain.svg") !important;
  background-size: 220px 220px !important;
  background-repeat: repeat !important;
  background-position: top left !important;
}
body.home .sac-card {
  background-color: #f8f5ee !important;
  box-shadow: 0 10px 28px rgba(79, 74, 63, 0.12) !important;
}
body.home .sac-card:has(:any-link):hover {
  box-shadow: 0 18px 40px rgba(79, 74, 63, 0.18) !important;
}
body.home .sac-card .sac-card-label {
  color: var(--sac-gold) !important;
}

/* 4b — About (sage) + footer (charcoal) on home → swap topo for the grain too.
       These bands are dark, so the standard 0.11 grain disappears into them.
       Use the stronger 0.20 grain variant so the paper texture stays visible. */
body.home .sac-about-section,
body.home .sac-site-footer {
  background-image: url("/wp-content/themes/stibnite-advisory/assets/images/sac-grain-dark.svg") !important;
  background-size: 220px 220px !important;
  background-repeat: repeat !important;
  background-position: top left !important;
}

/* 5 — Floating pill nav → CREAM with dark type (home only) */
body.home .sac-header-inner {
  background: #f4f0e4 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(79, 74, 63, 0.14) !important;
  box-shadow: 0 14px 34px rgba(79, 74, 63, 0.18) !important;
}
body.home .sac-logo-box {
  background: var(--sac-accent) !important;
}
body.home .sac-site-header .wp-block-site-title a,
body.home .sac-header-brand .wp-block-site-title a,
body.home .sac-site-header .wp-block-site-title span {
  color: var(--sac-accent) !important;
}
body.home .sac-site-header .sac-site-nav .wp-block-navigation-item__content,
body.home .sac-site-header .sac-site-nav .wp-block-navigation-item__label {
  color: var(--sac-fg-muted) !important;
}
body.home
  .sac-site-header
  .sac-site-nav
  .wp-block-navigation-item__content:hover,
body.home
  .sac-site-header
  .sac-site-nav
  .wp-block-navigation-item__content:hover
  .wp-block-navigation-item__label,
body.home
  .sac-site-header
  .sac-site-nav
  li.wp-block-navigation-item.current-menu-item
  .wp-block-navigation-item__label,
body.home
  .sac-site-header
  .sac-site-nav
  li.wp-block-navigation-item[aria-current="page"]
  .wp-block-navigation-item__label {
  color: var(--sac-gold) !important;
}
body.home .sac-site-header .sac-search .wp-block-search__inside-wrapper {
  background: rgba(79, 74, 63, 0.05) !important;
  border: 1px solid rgba(79, 74, 63, 0.18) !important;
}
body.home .sac-site-header .sac-search .wp-block-search__input {
  color: var(--sac-accent) !important;
}
body.home .sac-site-header .sac-search .wp-block-search__input::placeholder {
  color: var(--sac-fg-muted) !important;
}
body.home .sac-site-header .sac-search .wp-block-search__button {
  color: var(--sac-accent) !important;
}
body.home .sac-site-header .wp-block-navigation__responsive-container-open,
body.home .sac-site-header .wp-block-navigation__responsive-container-open svg {
  color: var(--sac-accent) !important;
  fill: var(--sac-accent) !important;
}
/* ── END HOME SANDSTONE PALETTE ───────────────────────────────────────────── */

/* ── Full-height split-recolor pine tree — subtle BACKGROUND STAMP (home only) ─
   A faint, full-height tree on the right that reads like a watermark/stamp
   behind the content. It still recolours per band (dark over the light sand
   bands, apricot over sage + charcoal) so the stamp stays legible on each. */
.sac-tree {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100vh; /* tree centred in this box; right offset bleeds it off */
  right: -45vh; /* nudged back toward the right edge */
  z-index: 0; /* behind content; sits on the band colours as a stamp */
  pointer-events: none;
  opacity: 1; /* per-layer alpha now lives in the layer fills below */
  -webkit-mask: var(--sac-tree-src) no-repeat center / auto 115%; /* +15% size */
  mask: var(--sac-tree-src) no-repeat center / auto 115%;
}
.sac-tree-layer {
  position: absolute;
  inset: 0;
  clip-path: inset(
    100% 0 100% 0
  ); /* hidden until the JS clips it to its band */
  will-change: clip-path;
}
/* Base layer = dark-ink tree, shown over every LIGHT band as a faint watermark. */
.sac-tree-base {
  clip-path: none; /* always visible — no band clipping */
  background: rgba(63, 58, 49, 0.05);
}
/* Apricot tree, clipped to each DARK band (sage About + charcoal footer).
   Dark bands swallow a faint ink stamp, so this carries far more alpha to stay
   legible against sage / charcoal. */
.sac-tree-apricot {
  background: rgba(232, 157, 93, 0.24);
}
/* Keep band backgrounds below the stamp so it shows over them, while the actual
   content sits above it: home hero/cards/about, every interior section's inner
   container (.sac-page-container), and the footer inner are all raised. */
body.home .sac-hero-outer .wp-block-columns,
body.home .sac-cards-grid,
body.home .sac-about-header,
.sac-page-container,
.sac-footer-inner {
  position: relative;
  z-index: 1;
}
/* On phones the fixed tree would crowd the single column — hide it */
@media (max-width: 900px) {
  .sac-tree {
    display: none;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  SITE-WIDE SANDSTONE TREATMENT                                            ║
   ║  Rolls the homepage's sandstone field + paper grain + cream pill nav onto ║
   ║  every page. The tree stamp itself is injected site-wide from functions.  ║
   ║  php. Home re-declares the field via the higher-specificity body.home     ║
   ║  block above (identical values), so order here is harmless.               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* 1 — Page field + paper grain on every page */
body {
  background-color: #e6e1d3 !important;
  background-image: url("/wp-content/themes/stibnite-advisory/assets/images/sac-grain.svg") !important;
  background-size: 220px 220px !important;
  background-repeat: repeat !important;
  background-attachment: scroll !important;
}

/* 2 — Light colored interior bands carry the same grain so the texture stays
       continuous across the page (transparent bands show the body grain; the
       sage accent bands get the stronger dark grain in their own rules above). */
.sac-agreement-section,
.sac-initiatives-section,
.sac-participate-section,
.sac-schedule-section,
.sac-params-section,
.sac-faq-nav-section {
  background-image: url("/wp-content/themes/stibnite-advisory/assets/images/sac-grain.svg");
  background-size: 220px 220px;
  background-repeat: repeat;
}

/* 3 — Charcoal footer → stronger dark grain, on every page */
.sac-site-footer {
  background-image: url("/wp-content/themes/stibnite-advisory/assets/images/sac-grain-dark.svg") !important;
  background-size: 220px 220px !important;
  background-repeat: repeat !important;
  background-position: top left !important;
}

/* 4 — Cream floating pill nav on every page (was scoped to body.home) */
.sac-header-inner {
  background: #f4f0e4 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(79, 74, 63, 0.14) !important;
  box-shadow: 0 14px 34px rgba(79, 74, 63, 0.18) !important;
}
.sac-logo-box {
  background: var(--sac-accent) !important;
}
.sac-site-header .wp-block-site-title a,
.sac-header-brand .wp-block-site-title a,
.sac-site-header .wp-block-site-title span {
  color: var(--sac-accent) !important;
}
.sac-site-header .sac-site-nav .wp-block-navigation-item__content,
.sac-site-header .sac-site-nav .wp-block-navigation-item__label {
  color: var(--sac-fg-muted) !important;
}
.sac-site-header .sac-site-nav .wp-block-navigation-item__content:hover,
.sac-site-header
  .sac-site-nav
  .wp-block-navigation-item__content:hover
  .wp-block-navigation-item__label,
.sac-site-header
  .sac-site-nav
  li.wp-block-navigation-item.current-menu-item
  .wp-block-navigation-item__label,
.sac-site-header
  .sac-site-nav
  li.wp-block-navigation-item[aria-current="page"]
  .wp-block-navigation-item__label {
  color: var(--sac-gold) !important;
}
.sac-site-header .sac-search .wp-block-search__inside-wrapper {
  background: rgba(79, 74, 63, 0.05) !important;
  border: 1px solid rgba(79, 74, 63, 0.18) !important;
}
.sac-site-header .sac-search .wp-block-search__input {
  color: var(--sac-accent) !important;
}
.sac-site-header .sac-search .wp-block-search__input::placeholder {
  color: var(--sac-fg-muted) !important;
}
.sac-site-header .sac-search .wp-block-search__button {
  color: var(--sac-accent) !important;
}
.sac-site-header .wp-block-navigation__responsive-container-open,
.sac-site-header .wp-block-navigation__responsive-container-open svg {
  color: var(--sac-accent) !important;
  fill: var(--sac-accent) !important;
}

/* Small phones: compact the pill so brand + hamburger fit at 320px. Must sit
   AFTER the pill block above — the earlier ≤768px compact-header rules lose
   the cascade to it and never apply. */
@media (max-width: 480px) {
  .sac-header-inner {
    padding: 8px 14px !important;
    gap: 10px !important;
  }
  .sac-header-brand {
    gap: 8px !important;
  }
  .sac-logo-box {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 auto !important;
  }
  .sac-header-brand .wp-block-site-title a,
  .sac-site-header .wp-block-site-title,
  .sac-site-header .wp-block-site-title a,
  .sac-site-header .wp-block-site-title h1,
  .sac-site-header .wp-block-site-title span {
    font-size: calc(min(14px, 4.2vw) * var(--sac-nav-scale, 1)) !important;
    letter-spacing: 0.06em !important;
  }
}
/* ── Open mobile overlay: cascade repairs (must sit after the sandstone
      block above) ─────────────────────────────────────────────────────────
   1. body.home's dark nav-link color out-specifies the overlay's cream text,
      making the menu near-invisible on the charcoal overlay — but only on
      the home page. The body-prefixed selectors below tie its specificity
      and win by source order.
   2. The overlay search is position:fixed at top:88px, which overlapped the
      first menu item ("Home") — push the menu list below it.
   3. The list inherited the desktop nav's right-justification — center it. */
body
  .sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content,
body
  .sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content
  .wp-block-navigation-item__label {
  color: rgba(255, 255, 255, 0.9) !important;
}
@media (max-width: 1023px) {
  .sac-site-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding-top: 168px !important; /* search sits at 88px + ~56px tall + gap */
  }
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
.sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  margin: 0 auto !important;
  align-items: center !important;
}
/* Current page in the open overlay — apricot, the dark-surface accent.
   Must follow the cream repaint above so it wins the specificity tie.
   body.home variants included: the home sandstone block's gold current-item
   rule otherwise out-specifies this and paints low-contrast sienna on the
   charcoal overlay. */
body
  .sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  li.current-menu-item
  .wp-block-navigation-item__content,
body
  .sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  li.current-menu-item
  .wp-block-navigation-item__label,
body
  .sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  [aria-current="page"],
body
  .sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  [aria-current="page"]
  .wp-block-navigation-item__label,
body.home
  .sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  li.current-menu-item
  .wp-block-navigation-item__content,
body.home
  .sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  li.current-menu-item
  .wp-block-navigation-item__label,
body.home
  .sac-site-nav
  .wp-block-navigation__responsive-container.is-menu-open
  [aria-current="page"]
  .wp-block-navigation-item__label {
  color: var(--sac-apricot) !important;
}

/* Smallest phones (~iPhone SE 1): a hand-tuned 11px wordmark reads far better
   than the 14px base crushed to the JS scale floor (~8px). */
@media (max-width: 360px) {
  .sac-header-brand .wp-block-site-title a,
  .sac-site-header .wp-block-site-title,
  .sac-site-header .wp-block-site-title a,
  .sac-site-header .wp-block-site-title h1,
  .sac-site-header .wp-block-site-title span {
    font-size: calc(11px * var(--sac-nav-scale, 1)) !important;
    letter-spacing: 0.04em !important;
  }
  .sac-logo-box {
    width: 34px !important;
    height: 34px !important;
  }
}
/* ── END SITE-WIDE SANDSTONE TREATMENT ──────────────────────────────────────── */

/* ─── Council member bios: clickable cards + modal ──────────────────────────
   Cards that have a matching bio (wired up in member-bios.js) become clickable
   and open a modal. The "View bio" cue and these styles only apply once JS adds
   the .sac-member-card--has-bio class, so cards without a bio are untouched. */
.sac-member-card--has-bio {
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.sac-member-card--has-bio:hover,
.sac-member-card--has-bio:has(.sac-member-bio-cue:focus-visible) {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(79, 74, 63, 0.2);
}
/* Keyboard focus lands on the injected "View bio" cue (the element that now
   carries the button semantics), so that is where the visible ring goes.
   Same ring as .sac-archive-collapsible > summary:focus-visible. */
.sac-member-bio-cue:focus-visible,
.sac-member-card--has-bio:focus-visible {
  outline: 2px solid var(--sac-accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.sac-member-bio-cue {
  display: inline-block;
  align-self: flex-start; /* keep it text-width and left-aligned */
  margin-top: auto; /* pin to the bottom so every card's CTA lines up */
  margin-left: 0; /* align with the name/role (no extra indent) */
  margin-right: 0;
  margin-bottom: 0;
  padding-top: 14px; /* guaranteed gap above, even when pinned */
  font-family: "Public Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--sac-gold);
  letter-spacing: 0.01em;
}

.sac-bio-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
}
.sac-bio-modal.is-open {
  display: block;
}
.sac-bio-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 37, 31, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.sac-bio-modal__panel {
  position: relative;
  max-width: 620px;
  width: calc(100% - 40px);
  margin: 8vh auto;
  max-height: 84vh;
  overflow-y: auto;
  background: var(--sac-surface);
  border: 1px solid var(--sac-border);
  border-radius: 22px;
  padding: 36px 40px 40px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.sac-bio-modal__close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--sac-accent);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.sac-bio-modal__close:hover {
  background: rgba(79, 74, 63, 0.08);
}
.sac-bio-modal__head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  padding-right: 28px;
}
.sac-bio-modal__photo {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 15%; /* favor the top so faces aren't cropped at the head */
  border-radius: 16px;
  background: var(--sac-surface-muted);
}
.sac-bio-modal__role {
  margin: 0 0 4px;
  font-family: "Public Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--sac-gold);
}
.sac-bio-modal__name {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  color: var(--sac-accent);
}
.sac-bio-modal__body p {
  margin: 0 0 14px;
  font-family: "Public Sans", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(79, 74, 63, 0.86);
}
.sac-bio-modal__body p:last-child {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .sac-bio-modal__panel {
    padding: 28px 22px 30px;
    margin: 5vh auto;
    max-height: 90vh;
  }
  .sac-bio-modal__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ─── Reduced motion ────────────────────────────────────────────────────────
   Honour the OS "reduce motion" setting: neutralise the smooth in-page
   anchor scrolling declared at the top of this file, and collapse every
   transition/animation to an imperceptible duration so end states still
   apply (and transitionend/animationend listeners still fire) without any
   movement. Purely a motion change — no colour, size, spacing or layout
   value is altered here. Kept last so it wins over the rules above. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Mobile nav: enlarge the tap target without moving anything ───────────
   The hamburger and its close button measure 32x32 — the primary navigation
   control on a phone, and smaller than the 44px that is comfortable for a
   thumb (WCAG 2.5.5). Growing the button itself would shift the header, so the
   hit area is extended with a transparent overlay instead: the icon, the pill
   and every other element stay exactly where they are, and the touchable
   region becomes 44x44. Nothing about this is visible. */
.sac-site-nav .wp-block-navigation__responsive-container-open,
.sac-site-nav .wp-block-navigation__responsive-container-close {
  position: relative;
}
.sac-site-nav .wp-block-navigation__responsive-container-open::after,
.sac-site-nav .wp-block-navigation__responsive-container-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}