/* ===========================================================================
 * Woods of Indian Run — site stylesheet
 *
 * Design stance: "Quiet editorial — printed neighborhood gazette."
 * Warm paper background, old-growth green accent, brass-gold detailing,
 * serif typography (Fraunces display + Source Serif 4 body).
 * Loaded after Bootstrap so a few !important overrides are intentional.
 * =========================================================================== */

:root {
  color-scheme: light;
  /* Palette */
  --paper:        #FAF7F2;   /* page background */
  --paper-edge:   #F2EEE5;
  --surface:      #FFFFFF;   /* raised surfaces — cards, inputs, modals */
  --surface-2:    #FAF7F2;   /* a surface raised within another surface */
  --ink:          #1F1B14;   /* body text */
  --ink-soft:     #4A463C;
  --rule:         #D8D2C4;   /* hairline borders */
  --accent:       #2E5339;   /* old-growth green — primary action */
  --accent-deep:  #1F3D2A;
  --accent-soft:  #8FA68A;   /* sage */
  --gold:         #A47E3B;   /* brass — hover/eyebrow detail */
  --shade:        #1A1612;   /* footer / hero overlay */

  /* Solid fills (buttons, active pagination) carry --on-fill text. Kept
     apart from --accent/--gold, which are tuned for text on the page. */
  --on-fill:            #FFFFFF;
  --accent-fill:        #2E5339;
  --accent-fill-hover:  #244229;
  --gold-fill:          #A47E3B;
  --gold-fill-hover:    #8A6930;
  --danger:             #A23F3F;   /* error text, outline-danger */
  --danger-fill:        #A23F3F;
  --danger-fill-hover:  #862F2F;
  --success-fill:       #5F7A4A;
  --success-fill-hover: #4D6238;

  /* Tinted admin counters: work waiting (attention) and drafts (warning). */
  --attention-bg:   #FBE9E8;
  --attention-rule: #D28A8A;
  --attention-ink:  #7A2929;
  --warning-bg:     #F9EFD9;
  --warning-rule:   #C8A86A;
  --warning-ink:    #6E542C;

  /* Small gold text (date-leaf month, tile labels). --gold is 3.5:1 on
     paper, fine for the large eyebrow but not for 0.7rem text; this
     darker brass clears 4.5:1 on --paper and --surface. */
  --gold-ink:       #80612B;

  /* Raised cards: resting and hover-lifted shadows, shared radius. */
  --shadow-card:    0 1px 2px rgba(31, 27, 20, 0.06), 0 6px 18px rgba(31, 27, 20, 0.07);
  --shadow-lift:    0 2px 4px rgba(31, 27, 20, 0.08), 0 16px 36px rgba(31, 27, 20, 0.14);
  --radius-card:    10px;
  --theme-brand-filter: none;
  --theme-toggler-filter: invert(0.45);
  --theme-toggle-slider: #c9c4b6;
  --theme-nav-dropdown: var(--accent-deep);
  --theme-backdrop-opacity: 0.5;
  --theme-link-color: var(--accent);
  --theme-hero-heading: var(--paper);
  --theme-alert-success-bg: #d4edda;
  --theme-alert-success-text: #155724;
  --theme-alert-success-rule: #c3e6cb;
  --theme-alert-info-bg: #d1ecf1;
  --theme-alert-info-text: #0c5460;
  --theme-alert-info-rule: #bee5eb;
  --theme-alert-warning-bg: #fff3cd;
  --theme-alert-warning-text: #856404;
  --theme-alert-warning-rule: #ffeeba;
  --theme-alert-danger-bg: #f8d7da;
  --theme-alert-danger-text: #721c24;
  --theme-alert-danger-rule: #f5c6cb;

  /* Text and controls laid over a photograph. The photo stays dark
     under its scrim in both schemes, so these do not flip in dark mode. */
  --on-photo:           #FAF7F2;
  --on-photo-soft:      rgba(250, 247, 242, 0.88);
  --on-photo-rule:      rgba(250, 247, 242, 0.55);
  --on-photo-gold:      #E6C98F;
  --on-photo-ink:       #1F3D2A;   /* text on a light pill over a photo */
  --photo-glass:        rgba(26, 22, 18, 0.35);
  --photo-glass-hover:  rgba(26, 22, 18, 0.6);
  --photo-text-shadow:  0 2px 18px rgba(10, 8, 6, 0.45);
  --hero-scrim:
    linear-gradient(90deg, rgba(16, 13, 10, 0.82) 0%, rgba(16, 13, 10, 0.58) 36%, rgba(16, 13, 10, 0.12) 70%, rgba(16, 13, 10, 0) 100%),
    linear-gradient(0deg, rgba(16, 13, 10, 0.72) 0%, rgba(16, 13, 10, 0) 48%);
  --hero-scrim-narrow:
    linear-gradient(0deg, rgba(16, 13, 10, 0.92) 0%, rgba(16, 13, 10, 0.62) 55%, rgba(16, 13, 10, 0.25) 100%);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Source Serif 4', 'Source Serif Pro', Georgia, serif;

  /* Spacing rhythm: 8 / 16 / 24 / 40 / 64 / 96 / 128.
     The larger steps are fluid (clamp) so vertical rhythm tightens on
     phones and relaxes to the full value on desktop — the max of each
     clamp matches the original fixed size, so desktop is unchanged. */
  --s-2xs: 8px;
  --s-xs:  16px;
  --s-sm:  clamp(18px, 1.4vw + 12px, 24px);
  --s-md:  clamp(26px, 3vw + 14px, 40px);
  --s-lg:  clamp(36px, 5vw + 16px, 64px);
  --s-xl:  clamp(48px, 8vw + 18px, 96px);
  --s-2xl: clamp(60px, 11vw + 20px, 128px);
}

/* ---------- Typography & globals -------------------------------------- */
html { font-size: 17px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: 'kern' 1, 'liga' 1;
  font-weight: 400;
  line-height: 1.65;
}
h1, h2, h3, h4, h5, .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-feature-settings: 'ss01' 1;
}
h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.1; margin: 0 0 var(--s-sm); }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; margin: 0 0 var(--s-xs); }
h3 { font-size: clamp(1.15rem, 0.9vw + 1rem, 1.35rem); line-height: 1.35; }
p  { margin: 0 0 var(--s-xs); }
a  {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-deep); text-decoration-color: var(--gold); }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-md) 0; }

/* Eyebrow label — small uppercase brass-gold tracked label above section heads */
.eyebrow {
  font-family: 'Source Serif 4', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
  margin: var(--s-sm) 0 var(--s-2xs);
}

/* Hairline section divider with ornamental flourish — the memorability anchor */
.rule-ornament {
  position: relative;
  height: 1px;
  background: var(--rule);
  /* Was 80 px; widened to 140 px after we tightened the surrounding
     vertical gaps so the hairline still reads as a deliberate
     section divider rather than a tiny tick mark. */
  width: 140px;
  /* Was --s-xl (96 px) above + below; readers complained the gaps
     felt loose. --s-lg (64 px) keeps the ornament breathing without
     visually splitting adjacent sections into separate pages. */
  margin: var(--s-lg) auto;
}
.rule-ornament::after {
  content: '\2766';
  position: absolute;
  left: 50%;
  top: -0.7rem;
  transform: translateX(-50%);
  background: var(--paper);
  color: var(--accent-soft);
  font-size: 1rem;
  padding: 0 8px;
}

/* ---------- Layout containers ----------------------------------------- */
/* Page-width convention — keep page templates consistent:
 *   .editorial        — the DEFAULT width for every page: listings,
 *                       dashboards, info/reference pages (FAQs,
 *                       regulations, covenants), app screens.
 *   .editorial-narrow — ONLY long-form prose reading (article / post /
 *                       event detail) and small focused forms
 *                       (login, contact, payment confirmations), where
 *                       a ~720px measure is the right line length.
 * When in doubt, use .editorial. */
.editorial        { max-width: 1100px; margin: 0 auto; padding: 0 var(--s-md); }
/* .editorial-narrow used to cap at 720px — too tight for any content
   surface with structured prose (policy text, nested lists, payment
   forms, AI widgets). 900px keeps a comfortable line length for
   narrative reading while leaving room for the .post-body 820px cap
   inside without clamping it down. Touched 2026-05-20 after repeated
   "page is too narrow" reports on /wir-fence-policy/, /dues/, etc. */
.editorial-narrow { max-width: 900px;  margin: 0 auto; padding: 0 var(--s-md); }

/* ---------- Navigation ------------------------------------------------ */
.site-nav {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--rule);
  padding: var(--s-xs) 0 !important;
  box-shadow: none !important;
}
/* The nav's flex row (brand · toggler · collapse) must be allowed to
   wrap. When the mobile menu expands, Bootstrap's .navbar-collapse is
   flex-basis:100% — with nowrap it can't drop to its own line, so it
   gets squeezed onto the brand's row and the links/search overflow the
   viewport. Wrapping lets the expanded menu sit full-width below the
   brand. Harmless at lg+, where the collapse is flex-basis:auto and
   stays inline. */
.site-nav .editorial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-xs);
}
.site-nav .navbar-brand img { height: 40px; width: auto; max-width: min(280px, 20vw); }
.site-nav .navbar-collapse { min-width: 0; }
.theme-toggle,
.theme-preference-controls { display: none; }
.theme-controls-ready .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 45px;
  margin-left: var(--s-xs);
  order: 2;
  border: 1px solid var(--ink-soft);
  border-radius: 0.35rem;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 1.25rem;
}
.theme-toggle:focus-visible,
.theme-preference-controls button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.theme-preference-controls button:focus-visible {
  outline-color: var(--gold);
}
.theme-controls-ready .theme-preference-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-xs);
  margin-bottom: var(--s-sm);
}
.theme-preference-controls button {
  min-height: 44px;
  border: 1px solid currentColor;
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 var(--s-xs);
}
.theme-preference-controls button[hidden] { display: none; }
@media (max-width: 991px) {
  .site-nav .editorial { display: flex; flex-wrap: wrap; }
  .site-nav .navbar-brand img { max-width: min(280px, 52vw); }
  .theme-controls-ready .theme-toggle { margin-left: auto; order: 1; }
  .site-nav .navbar-toggler { order: 2; }
  .site-nav .navbar-collapse { order: 3; }
}
@media (max-width: 480px) {
  /* Reserve room for both 45px controls on the brand row at phone widths. */
  .site-nav .navbar-brand img { max-width: 44vw; }
}
/* Header links default to no underline; underline appears only on
   hover or keyboard focus. Mirrors the .sidebar a / .sidebar a:hover
   pattern further down so the two surfaces feel consistent. */
.site-nav a { text-decoration: none; }
.site-nav a:hover,
.site-nav a:focus {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.site-nav .nav-link {
  color: var(--ink) !important;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  padding: 0.5rem 1rem !important;
  letter-spacing: 0.01em;
}
.site-nav .nav-link:hover { color: var(--accent) !important; }
.site-nav .navbar-toggler { border-color: var(--rule); color: var(--ink); }
.site-nav .navbar-toggler-icon { filter: invert(0.45); }
.site-nav .dropdown-menu {
  background: var(--accent-deep);
  border: 0;
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(31, 27, 20, 0.18);
  padding: var(--s-2xs) 0;
  margin-top: 4px;
  min-width: 240px;
}
.site-nav .dropdown-item {
  color: rgba(250, 247, 242, 0.92);
  padding: 0.55rem 1.25rem;
  font-family: 'Source Serif 4', serif;
  font-size: 0.95rem;
}
.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
  background: rgba(164, 126, 59, 0.18);  /* gold tint */
  color: var(--paper);
}
.site-nav .dropdown-item.disabled,
.site-nav .dropdown-item.disabled:hover {
  color: rgba(250, 247, 242, 0.45);
  background: transparent;
}
.site-nav .dropdown-divider { border-top-color: rgba(250, 247, 242, 0.15); }

/* ---------- Hero (carousel restyle) ----------------------------------- */
.hero-carousel { margin: 0; }
.hero-carousel .carousel-item {
  height: 70vh;
  max-height: 720px;
  min-height: 420px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--shade);
}
.hero-carousel .carousel-item > .hero-slide-image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
.hero-carousel .carousel-caption {
  background: rgba(26, 22, 18, 0.72);
  backdrop-filter: blur(2px);
  border-radius: 0;
  padding: var(--s-sm) var(--s-md);
  text-align: left;
  bottom: 8%;
  right: auto;
  left: 6%;
  max-width: 520px;
  border-left: 2px solid var(--gold);
}
.hero-carousel .carousel-caption h5 {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  color: var(--paper);
  margin: 0 0 var(--s-2xs);
}
.hero-carousel .carousel-caption p {
  color: rgba(250, 247, 242, 0.85);
  font-size: 0.95rem;
  margin: 0;
}
/* ---------- Recent articles list -------------------------------------- */
.article-list { list-style: none; padding: 0; margin: 0; }
.article-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-sm);
  padding: var(--s-sm) 0;
  border-bottom: 1px solid var(--rule);
}
.article-item:last-child { border-bottom: 0; }
/* Compact rows (home-page upcoming events) skip the thumbnail. The
   default 96px-1fr grid would otherwise place the single content
   <div> into the empty 96px first column and squish everything left. */
.event-item--compact {
  grid-template-columns: 1fr;
}
.article-item .thumb { position: relative; display: block; flex-shrink: 0; }
.article-item img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border: 1px solid var(--rule);
  padding: 4px;
  background: var(--paper);
}
.article-item h3 { margin: 0 0 4px; font-size: 1.15rem; line-height: 1.3; }
.article-item h3 a { color: var(--ink); text-decoration: none; }
.article-item h3 a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.article-item .meta {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-style: italic;
}
.article-item-excerpt { margin-top: 6px; color: var(--ink-soft); }

/* ---------- Events list ---------------------------------------------- */
/* The calendar leaf (.date-leaf) is what readers scan for; the full
   date + time line sits under the title as the precise, readable text. */
.event-item-date {
  margin: 2px 0 4px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.event-item-date .fa-clock { color: var(--accent); margin-right: 2px; }
.event-item-date .event-past-badge { vertical-align: middle; }
.event-item-where .fa-map-marker-alt { color: var(--accent-soft); }

/* Calendar leaf: brass month in small caps over a large day number,
   bound at the top with a green strip like a tear-off desk calendar. */
.date-leaf {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
  padding: 0 0 7px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent-fill);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  line-height: 1;
  text-align: center;
}
.date-leaf-month {
  display: block;
  padding: 7px 0 2px;
  font-family: var(--font-body);
  font-variant-caps: all-small-caps;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
}
.date-leaf-day {
  display: block;
  font-family: var(--font-display);
  font-size: 1.95rem;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.date-leaf-dow {
  display: block;
  margin-top: 5px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.date-leaf--past { border-top-color: var(--rule); box-shadow: none; }
.date-leaf--past .date-leaf-month,
.date-leaf--past .date-leaf-day { color: var(--ink-soft); }

/* Home "Upcoming Events": each event is a raised card, leaf on the left.
   The title link is stretched over the card so the whole card clicks. */
.event-cards { display: grid; gap: 14px; }
.event-cards > .event-item {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.event-cards > .event-item:last-child { border-bottom: 1px solid var(--rule); }
.event-cards > .event-item h3 { margin-top: 2px; }
.event-cards > .event-item h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}
.event-cards .event-submitter a { position: relative; z-index: 1; }
.event-cards .event-item-body > p { margin-bottom: 2px; }
.event-cards .article-item-excerpt { margin: 8px 0 0; }
.event-cards > .event-item:hover { border-color: var(--accent-soft); }

/* /events/: leaf | text | photo. Grid at every width, so the phone
   flex-row fallback for .article-item never reorders it. */
.event-item:not(.event-item--compact) {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--s-sm);
  align-items: start;
}
.event-item-body > p { margin-bottom: 2px; }
.event-item-body > .article-item-excerpt { margin: 8px 0 0; }
.article-item .event-thumb img {
  width: 176px;
  height: 118px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--paper-edge);
}
.event-thumb { text-decoration: none; }
.event-item h3 .badge-members { margin-left: 6px; vertical-align: 2px; }

/* Focus: a visible green ring on the new card links (keyboard only). */
.event-item a:focus-visible,
.date-leaf:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .event-cards > .event-item {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }
  .event-cards > .event-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
  .event-item .date-leaf { transition: transform 160ms ease, box-shadow 160ms ease; }
  .event-item:not(.event-item--compact):hover .date-leaf { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
}

@media (max-width: 767px) {
  .event-cards > .event-item {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 16px;
  }
  .event-cards .date-leaf { width: 54px; }
  .event-cards .date-leaf-day { font-size: 1.6rem; }
  .event-item:not(.event-item--compact) {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 14px;
  }
  .event-item:not(.event-item--compact) .date-leaf { width: 54px; }
  .event-item:not(.event-item--compact) .date-leaf-day { font-size: 1.6rem; }
  .article-item .event-thumb img { width: 64px; height: 64px; border-radius: 6px; }
}
/* Small round avatar + name credit on member-submitted events. */
.event-submitter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.event-submitter-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.event-submitter-avatar--blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper, #f4efe6);
  color: var(--ink-soft);
  font-size: 0.75rem;
}

/* ---------- Featured grid (magazine cards, no shadows) ---------------- */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-md);
  margin: var(--s-md) 0;
}
.feature-card { display: flex; flex-direction: column; }
.feature-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.feature-card h3 {
  font-size: 1.35rem;
  margin: var(--s-sm) 0 var(--s-2xs);
  line-height: 1.25;
}
.feature-card h3 a { color: var(--ink); text-decoration: none; }
.feature-card h3 a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.feature-card .meta {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}
.feature-card .excerpt { color: var(--ink-soft); margin-top: var(--s-2xs); }

/* ---------- Sidebar --------------------------------------------------- */
.sidebar { font-size: 0.95rem; }
.sidebar h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s-2xs);
  margin: var(--s-lg) 0 var(--s-xs);
  font-weight: 500;
}
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar li { padding: 6px 0; border-bottom: 1px dotted var(--rule); }
.sidebar li:last-child { border: 0; }
.sidebar a { color: var(--ink); text-decoration: none; }
.sidebar a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}
.sidebar #sidebar-logo { max-width: 140px; opacity: 0.85; }

/* ---------- Map ------------------------------------------------------- */
#mini-map, #map {
  border: 1px solid var(--rule);
  border-radius: 0 !important;
  height: 480px;
}

/* ---------- Board of Trustees grid ----------------------------------- */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-md);
  margin: var(--s-md) 0 var(--s-xl);
}
.board-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.board-card:hover {
  border-color: var(--accent-soft);
  box-shadow: 0 12px 28px -16px rgba(31, 27, 20, 0.18);
}
.board-card-photo {
  aspect-ratio: 4 / 3;
  background: var(--paper-edge);
  overflow: hidden;
}
.board-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.board-card-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-soft);
  font-size: 3rem;
}
.board-card-body { padding: var(--s-sm); }
.board-card-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 var(--s-2xs);
  letter-spacing: -0.005em;
  color: var(--ink);
}
.board-card-bio {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: var(--s-xs) 0;
}
.board-card-contact {
  list-style: none;
  padding: 0;
  margin: var(--s-xs) 0 0;
  font-size: 0.93rem;
}
.board-card-contact li {
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
}
.board-card-contact li i {
  width: 16px;
  text-align: center;
  color: var(--accent-soft);
  flex-shrink: 0;
}
.board-card-contact a { color: var(--accent); }
.board-card-contact a:hover { color: var(--accent-deep); }
.board-card-term { color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- Footer ---------------------------------------------------- */
.site-footer {
  background: var(--shade);
  color: rgba(250, 247, 242, 0.75);
  padding: var(--s-xl) var(--s-md);
  text-align: center;
  margin-top: var(--s-xl);
}
.site-footer #footer-logo {
  display: block;
  width: auto;
  max-width: min(320px, 90vw);
  height: auto;
  margin: 0 auto var(--s-md);
  opacity: 0.92;
  /* logo-full.svg ships with a #4D4D4D fill; the footer is dark, so we
     invert to white via filter instead of maintaining a parallel white
     SVG. The previous logo-full-white.svg had live <text> referencing
     uninstalled commercial fonts and clipped on the right edge. */
  filter: brightness(0) invert(1);
}
.site-footer ul { list-style: none; padding: 0; margin: 0 0 var(--s-md); }
.site-footer ul li { display: inline-block; margin: 0 var(--s-xs); }
.site-footer a { color: rgba(250, 247, 242, 0.92); }
.site-footer a:hover { color: var(--gold); }
.site-footer .footer-meta {
  font-size: 0.85rem;
  color: rgba(250, 247, 242, 0.5);
  margin-top: var(--s-sm);
  letter-spacing: 0.04em;
}

/* ---------- Auth pages ------------------------------------------------ */
main.auth-centered {
  max-width: 480px;
  margin: var(--s-xl) auto;
  padding: 0 var(--s-md);
}
main.auth-centered h1 { font-size: 2rem; margin-bottom: var(--s-sm); }
main.auth-centered form input[type="text"],
main.auth-centered form input[type="email"],
main.auth-centered form input[type="password"],
main.auth-centered form select,
main.auth-centered form textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: var(--s-xs);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  border-radius: 0;
}
main.auth-centered form input:focus,
main.auth-centered form select:focus,
main.auth-centered form textarea:focus {
  outline: 0;
  border-color: var(--accent);
}
main.auth-centered form button[type="submit"] {
  background: var(--accent-fill);
  color: var(--on-fill);
  border: 0;
  padding: 0.75rem 2rem;
  font-family: 'Source Serif 4', serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}
main.auth-centered form button[type="submit"]:hover { background: var(--accent-fill-hover); }
main.auth-centered .helptext {
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: block;
  margin: -8px 0 var(--s-xs);
}
main.auth-centered ul.errorlist { color: var(--danger); padding-left: 1.25rem; }

/* ---------- Post detail ----------------------------------------------- */
.post-body {
  font-size: 1.075rem;
  line-height: 1.78;
  /* 820px is the universal content-body width — comfortable line
     length for narrative prose AND wide enough for structured
     content (covenants, regulations, fence policy, dues form).
     Touched 2026-05-20 after repeated "page is too narrow" reports;
     the prior 680px cap was a prose-only default that didn't fit
     every page that ships through this template. */
  max-width: 820px;
}
/* AI widget on /hoa-rules/ sits OUTSIDE .post-body (as a sibling
   inside the article element), so without a cap it would stretch to
   the article's 1100px max and look visually unbalanced above the
   820px body. Pin it to match. */
.ask-ai { max-width: 820px; }
/* Listserv signup partial on /how-do-i-join-the-neighborhood-email-listserv/
   sits OUTSIDE .post-body — same pattern as .ask-ai above. Pin to 820px so
   the form aligns with the prose intro instead of stretching to the
   article's 1100px max and visually overshooting the body above. */
.listserv-signup { max-width: 820px; }
.post-body p { margin: 0 0 var(--s-xs); }
.post-body img { max-width: 100%; height: auto; margin: var(--s-md) 0; }
.post-body h2 { margin-top: var(--s-md); }
.post-body blockquote {
  border-left: 2px solid var(--accent-soft);
  padding-left: var(--s-sm);
  margin: var(--s-md) 0;
  font-style: italic;
  color: var(--ink-soft);
}
/* Instagram feed */
.ig-feed {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px;
  margin: var(--s-md) 0 var(--s-xs);
}
.ig-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
}
.ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: saturate(0.92);
}
.ig-tile:hover img { transform: scale(1.04); filter: saturate(1); }
.ig-tile-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.8rem;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 2px 6px;
  border-radius: 2px;
  letter-spacing: -1px;
}
.ig-followup {
  font-style: italic;
  text-align: right;
  margin-top: var(--s-xs);
  font-size: 0.92rem;
}
.ig-followup a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

/* Listing page header */
.list-header { margin: var(--s-lg) 0 var(--s-md); }
.list-header h1 { margin-bottom: var(--s-2xs); }

/* Featured-image figure: gazette treatment — hairline frame, italic
   serif caption with a small gold rule above it. */
.post-figure { margin: 0 0 var(--s-lg); }
.post-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  padding: 6px;
  background: var(--paper);
}
.post-figure figcaption {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--s-xs);
  position: relative;
  padding-top: var(--s-xs);
}
.post-figure figcaption::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: var(--gold);
}

/* Members-only badge — text style + overlay positioning */
.badge-members {
  display: inline-block;
  font-family: 'Source Serif 4', serif;
  text-transform: uppercase;
  font-size: 0.7rem;
  /* Fixed, not inherited: the overlay on an article thumb and the inline
     badge after an FAQ question otherwise pick up different line-heights
     and render pills of different heights for the same word. */
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--gold);
  border: 1px solid #fff;
  padding: 3px 10px;
  border-radius: 3px;
}

/* Past-event chip — sits inline with the date in event listings, not
   over the thumbnail. Muted color so it reads as "still archived" not
   "needs attention". */
.event-all-day {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 3px;
  vertical-align: 1px;
}

.event-past-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 3px;
  vertical-align: 1px;
}
.badge-members.badge-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(31, 27, 20, 0.25);
}
.feature-card .thumb { position: relative; display: block; }

/* Forms inside post body (e.g. listserv signup, ad-hoc embeds) */
.post-body form {
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  padding: var(--s-md);
  margin: var(--s-md) 0;
}
.post-body form label {
  display: block;
  font-family: 'Source Serif 4', serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: var(--s-xs) 0 6px;
  font-weight: 600;
}
.post-body form label:has(> input[type="checkbox"]),
.post-body form label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
  font-size: 0.95rem;
  margin: 6px 0;
}
.post-body form input[type="text"],
.post-body form input[type="email"],
.post-body form input[type="password"] {
  display: block;
  width: 100%;
  max-width: 420px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  border-radius: 0;
  color: var(--ink);
}
.post-body form input[type="text"]:focus,
.post-body form input[type="email"]:focus,
.post-body form input[type="password"]:focus {
  outline: 0;
  border-color: var(--accent);
}
.post-body form button,
.post-body form input[type="submit"] {
  background: var(--accent);
  color: var(--paper);
  border: 0;
  padding: 0.65rem 1.75rem;
  font-family: 'Source Serif 4', serif;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  margin-top: var(--s-sm);
  border-radius: 0;
}
.post-body form button:hover,
.post-body form input[type="submit"]:hover { background: var(--accent-deep); }
.post-body form br { display: none; }

/* ---------- Dues payment-options partial ---------------------------- */
/* `_payment_buttons.html` is included from page_detail.html *after* the
   `.post-body` wrapper closes, so its prose otherwise reverts to the
   default 1rem body size and visibly steps down from the editable HOA
   prose above (which renders at `.post-body`'s 1.075rem). Match the
   article-body typography so the section reads as one continuous page
   rather than two glued-together fragments. Form controls keep their
   own sizing — only the surrounding prose inherits. */
.dues-payments {
  font-size: 1.075rem;
  line-height: 1.78;
}
.dues-payments button,
.dues-payments input,
.dues-payments select,
.dues-payments textarea {
  font-size: 1rem;
  line-height: normal;
}

/* ---------- Dues Card Element layout (matches board-requested screenshot) */
.dues-options {
  /* Stack the payment options (card, PayPal, check) with consistent
     breathing room — without this they sit flush against each other
     and the bordered card-form runs straight into the PayPal heading. */
  display: flex;
  flex-direction: column;
  gap: var(--s-lg);
  margin-top: var(--s-md);
}
/* All three payment options share the same bordered "card" treatment
   so they read as peers and visually line up at the same width. The
   .dues-options flex column gives them all the same outer width;
   box-sizing:border-box keeps the inner content the same width too
   regardless of padding. */
.dues-option {
  box-sizing: border-box;
  background: var(--surface, #fff);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: var(--s-md);
  box-shadow: 0 1px 0 var(--paper-edge), 0 12px 32px -28px rgba(31, 27, 20, 0.18);
  width: 100%;
}
.dues-option > *:first-child { margin-top: 0; }
.dues-option > *:last-child { margin-bottom: 0; }
.dues-sub {
  margin: 0 0 var(--s-md);
}
#dues-card-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  margin: 0;
}
.dues-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-sm);
}
@media (max-width: 640px) {
  .dues-field-row { grid-template-columns: 1fr; }
}
.dues-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.dues-field-label {
  font-family: 'Source Serif 4', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.dues-field-input {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--ink);
  width: 100%;
}
.dues-field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46, 83, 57, 0.12);
}
.dues-amount-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-sm);
  padding: var(--s-sm);
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.dues-amount-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dues-amount-cell strong {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  color: var(--ink);
}
.dues-amount-total strong { color: var(--accent); }
.dues-card-field-label .dues-card-element {
  /* Stripe's iframe lives inside this div. The iframe itself sets its
     own height, but we provide the outer chrome (border, padding,
     background) so it looks like a peer of the address/email fields. */
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface, #fff);
}
.dues-card-field-label .dues-card-element.StripeElement--focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(46, 83, 57, 0.12);
}
.dues-card-field-label .dues-card-element.StripeElement--invalid {
  border-color: #b3261e;
}
.dues-agree {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.dues-agree input[type="checkbox"] { margin-top: 4px; flex: none; }
.dues-btn-stripe {
  align-self: flex-start;
  min-width: 160px;
}
.dues-card-error {
  margin: 0;
  padding: 8px 12px;
  background: rgba(179, 38, 30, 0.08);
  border-left: 3px solid #b3261e;
  color: #b3261e;
  border-radius: 4px;
  font-size: 0.92rem;
}
.dues-stripe-mark-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin: var(--s-xs) 0 0;
  padding-top: var(--s-sm);
  border-top: 1px solid var(--rule);
}
.dues-stripe-mark {
  display: inline-flex;
  flex: none;
  text-decoration: none !important;
  line-height: 0;
}
.dues-stripe-mark svg { display: block; }
.dues-stripe-mark:hover { opacity: 0.75; }
.dues-stripe-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.4;
  flex: 1 1 240px;
}
.dues-stripe-note .fa-lock {
  color: var(--accent-soft);
  margin-right: 4px;
}

/* ---------- Section spacing / shared layout helpers ------------------ */
.section { margin-top: var(--s-lg); }
.section--first { margin-top: var(--s-md); }
.muted-meta {
  /* Tight against the preceding <h1> — default <p> top margin (~1rem)
     stacks with the h1 bottom margin and produces a noticeable gap
     on mobile, especially for posts with no byline (single-line meta
     with lots of empty space below the title). */
  margin-top: 0;
  margin-bottom: var(--s-md);
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}
.lead-body { color: var(--ink-soft); }
.list-cta { margin-top: var(--s-md); }

/* Listing-header row: title left, controls right */
.list-header--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-xs);
}
.list-header--row .controls { margin-bottom: var(--s-2xs); }

/* Article (post or page) detail container */
.article-detail { margin-top: var(--s-lg); margin-bottom: var(--s-xl); }
.article-detail header { margin-bottom: var(--s-md); }

/* Sidebar column padding (lg+) */
.sidebar-column { padding-left: var(--s-lg); }
.sidebar-column .sidebar-logo-wrap { margin-top: var(--s-lg); text-align: center; }

/* Member directory table — extracted from directory.html inline styles */
.directory-table { margin-top: var(--s-sm); }
.directory-table thead { border-bottom: 1px solid var(--rule); }
.directory-table thead th {
  border: 0;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 8px;
}
.directory-table tbody tr { border-bottom: 1px dotted var(--rule); }
.directory-table tbody td {
  border: 0;
  padding: 12px 8px;
  vertical-align: top;
}
.directory-table tbody td.col-name strong { font-weight: 600; }
.directory-table tbody td.col-soft { color: var(--ink-soft); }
.directory-table tbody td.empty {
  text-align: center;
  padding: var(--s-md);
}

/* Inline-link variant that inherits color (used in eyebrow category links) */
a.inherit-color { color: inherit; }

/* ---------- Buttons (palette + look-like-buttons enforcement) -------- */
/* Bootstrap 4 ships these defaults but our editorial styles in places
   override link-decoration on hover, and Bootstrap blue clashes with
   the warm cream/green/gold palette of the site. Override colors and
   lock down: rounded, no underline, hand cursor on hover, drop-shadow
   on hover for tactile feedback. */
a.btn, button.btn, .btn {
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none !important;
  font-weight: 500;
  letter-spacing: 0.015em;
  padding: 0.42rem 1rem;
  transition: background-color 0.12s ease, border-color 0.12s ease,
              color 0.12s ease, box-shadow 0.12s ease, transform 0.05s ease;
}
a.btn:hover, button.btn:hover, .btn:hover {
  text-decoration: none !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(43, 42, 38, 0.12);
}
.btn-sm { padding: 0.28rem 0.75rem; border-radius: 6px; }

/* Primary — old-growth green */
.btn-primary {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-fill);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
  color: var(--on-fill);
}
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-fill);
}

/* Secondary — brass gold accent */
.btn-secondary {
  background-color: var(--gold-fill);
  border-color: var(--gold-fill);
  color: var(--on-fill);
}
.btn-secondary:hover, .btn-secondary:focus {
  background-color: var(--gold-fill-hover);
  border-color: var(--gold-fill-hover);
  color: var(--on-fill);
}
.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: var(--gold-fill);
  border-color: var(--gold-fill);
  color: var(--on-fill);
}

/* Danger / success — keep semantic but soften the saturation */
.btn-danger { background-color: var(--danger-fill); border-color: var(--danger-fill); color: var(--on-fill); }
.btn-danger:hover { background-color: var(--danger-fill-hover); border-color: var(--danger-fill-hover); color: var(--on-fill); }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { background-color: var(--danger-fill); border-color: var(--danger-fill); color: var(--on-fill); }
.btn-success { background-color: var(--success-fill); border-color: var(--success-fill); color: var(--on-fill); }
.btn-success:hover { background-color: var(--success-fill-hover); border-color: var(--success-fill-hover); color: var(--on-fill); }

/* Override Bootstrap's bright #28a745 — too saturated for this palette.
   Use the design system's old-growth green for any "active/positive"
   text helper. */
.text-success { color: var(--accent) !important; }

.btn-link { color: var(--accent); cursor: pointer; }
.btn-link:hover { color: var(--accent-deep); }

/* Pagination — Bootstrap's stock blue clashes with the palette. The
   shared _pagination.html partial lists every page number, so
   the bar wraps instead of forcing a horizontal scroll on phones. */
.pagination { flex-wrap: wrap; row-gap: 0.25rem; }
.page-link {
  background-color: var(--surface);
  border-color: var(--rule);
  color: var(--accent);
}
.page-link:hover, .page-link:focus {
  background-color: var(--paper-edge);
  border-color: var(--rule);
  color: var(--accent-deep);
}
/* Bootstrap's focus ring is a blue glow; keep keyboard focus in palette. */
.page-link:focus { box-shadow: 0 0 0 0.2rem var(--accent-soft); }
.page-item.active .page-link {
  background-color: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-fill);
}
.page-item.disabled .page-link {
  background-color: var(--paper-edge);
  border-color: var(--rule);
  color: var(--ink-soft);
}

/* ---------- Navbar search -------------------------------------------- */
/* Cap the search width so the navbar's nav-items + search + dropdown
   don't overflow the right side of the masthead. The min-width was
   forcing an unconditional 220px reserve which pushed the search
   off-screen on common laptop widths once Articles + Newsletters +
   FAQs + Events + Map + Contact + Association were all in view. */
.navbar-search {
  min-width: 0;
  /* Fluid instead of a hard 200px: shrinks on tighter laptop widths so
     the nav row never overflows, grows toward 220px when there's room. */
  width: clamp(150px, 16vw, 220px);
  max-width: 220px;
}
.navbar-search .input-group-sm > .form-control {
  border-radius: 999px 0 0 999px;
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--accent);
}
.navbar-search .input-group-sm > .input-group-append > .btn {
  border-radius: 0 999px 999px 0;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.navbar-search .input-group-sm > .input-group-append > .btn:hover,
.navbar-search .input-group-sm > .input-group-append > .btn:focus {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
  transform: none;        /* suppress the global .btn:hover translateY shift in the navbar */
  box-shadow: none;
}
.navbar-search .form-control:focus { background: #fff; }
@media (max-width: 991px) {
  .navbar-search { width: 100%; margin-top: var(--s-xs); }
}

/* ---------- Flash messages (toast-style) ----------------------------- */
/* Floats above the hero on the home page (and above content on others)
   so a sign-in confirmation doesn't push the carousel below the fold. */
.flash-messages {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1050;
  width: 90%;
  max-width: 640px;
  pointer-events: none;
}
.flash-messages .alert {
  pointer-events: auto;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
  border: 1px solid rgba(0, 0, 0, 0.05);
  margin-bottom: 8px;
  animation: flash-slide-in 0.25s ease-out;
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-right: 12px;
}
.flash-toast-text { flex: 1; min-width: 0; }
.flash-toast-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0 4px;
  font-size: 1.4rem;
  line-height: 1;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.flash-toast-close:hover,
.flash-toast-close:focus { opacity: 1; outline: none; }
.flash-toast-fading {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
@keyframes flash-slide-in {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (max-width: 768px) {
  .flash-messages { top: 70px; width: 94%; }
}

/* ---------- Tags ------------------------------------------------------ */
.badge-tag {
  display: inline-block;
  font-size: 0.78rem;
  padding: 2px 8px;
  margin-right: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--paper, #f4efe6);
  color: var(--ink-soft);
  text-decoration: none;
  border: 1px solid var(--rule, #ddd);
}
.badge-tag:hover { background: var(--ink-soft); color: #fff; text-decoration: none; }
.article-item-tags { margin: 4px 0 0; }
.post-tags { margin-top: var(--s-md); padding-top: var(--s-sm); border-top: 1px dotted var(--rule); }

/* ---------- Attachments on post detail -------------------------------- */
.post-attachments {
  margin-top: var(--s-md);
  padding: var(--s-sm) var(--s-md);
  background: var(--paper, #f4efe6);
  border-left: 3px solid var(--accent, #7a8c63);
}
.post-attachments h2 { margin-top: 0; }
.post-attachments .muted { color: var(--ink-soft); font-size: 0.85em; }

/* ---------- Dashboard ------------------------------------------------- */
/* ---------- Drag-to-reorder list rows -------------------------------- */
.drag-handle {
  cursor: grab;
  user-select: none;
  text-align: center;
  font-size: 0.95rem;
  color: var(--accent-soft);
}
.drag-handle:hover { color: var(--accent); }
.drag-ghost {
  opacity: 0.4;
  background: var(--paper-edge);
}
tr[data-slide-id] { transition: background 0.1s ease; }
tr[data-slide-id]:hover .drag-handle { color: var(--accent); }

/* ---------- Inline toggle switch ------------------------------------- */
.custom-toggle {
  display: inline-block;
  position: relative;
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  vertical-align: middle;
}
.custom-toggle input { opacity: 0; width: 0; height: 0; }
.custom-toggle-slider {
  position: absolute;
  inset: 0;
  background: #c9c4b6;
  border-radius: 24px;
  transition: background 0.15s ease;
}
.custom-toggle-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.custom-toggle input:checked + .custom-toggle-slider {
  background: var(--accent);
}
.custom-toggle input:checked + .custom-toggle-slider::before {
  transform: translateX(20px);
}
.custom-toggle input:disabled + .custom-toggle-slider {
  opacity: 0.5;
  cursor: wait;
}
.custom-toggle input:focus-visible + .custom-toggle-slider {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dashboard-section-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-md) 0 var(--s-sm);
}
.dashboard-section-header .eyebrow { margin-bottom: 4px; }
.dashboard-section-header h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.dashboard-card { border: 1px solid var(--rule, #ddd); border-radius: 4px; }
.dashboard-account-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xs);
  padding: 8px 0;
  border-bottom: 1px solid var(--paper-edge);
}
.dashboard-account-list li:last-child { border-bottom: 0; }
.dashboard-account-list li > div { min-width: 0; flex: 1; }
.dashboard-comms-list { padding-left: 0; }
.dashboard-comms-list li { padding: 6px 0; }
.dashboard-comms-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}
.dashboard-comms-list input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.dashboard-comms-list input:disabled { cursor: wait; opacity: 0.6; }

.dashboard-account-list li > div .meta {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 2px;
  word-break: break-word;
}
.dashboard-card .card-body { display: flex; flex-direction: column; }
/* Action toolbars (pet cards, dashboard cards): lay buttons and inline
   <form> wrappers out as a wrapping flex row with a consistent gap so
   they don't jam together or stagger onto ragged lines. */
.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2xs);
  align-items: center;
}
.dashboard-card .dashboard-actions {
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding-top: var(--s-sm);
  text-align: left;
}
.dashboard-card .h4 {
  border-bottom: 1px solid var(--rule, #ddd);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.dashboard-photo {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper, #f4efe6);
}
.dashboard-photo-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--ink-soft);
  border: 1px dashed var(--rule, #ddd);
}
.dashboard-info dt { font-weight: 600; color: var(--ink-soft); }
.dashboard-info dd { margin-bottom: 4px; }
.dashboard-map { height: 280px; border: 1px solid var(--rule, #ddd); border-radius: 3px; }

/* ---------- Map pins (shared shape via static/js/pin-icon.js) -------- */
.wir-pin-icon { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }

/* ---------- Manage (board admin) dashboard --------------------------- */
.manage-header {
  border-bottom: 1px solid var(--rule, #ddd);
  padding-bottom: var(--s-sm);
}
.manage-header .eyebrow { margin-bottom: 4px; }
.manage-subnav {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--ink-soft, #6e6a60);
  letter-spacing: 0.04em;
}
.manage-subnav a {
  display: inline-block;
  margin-right: 14px;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
}
.manage-subnav a:hover { color: var(--accent, #2E5339); }
.stat-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.stat-link:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
}
.stat-link:hover .stat-card { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: var(--accent, #7a8c63); }
.stat-card {
  text-align: center;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.stat-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 84px;
}
.stat-card-sm .card-body {
  padding: 0.6rem;
  min-height: 76px;
  position: relative;
}
.stat-badge {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;       /* clicks pass through to the wrapping stat-link */
  font-size: 0.6rem;
  padding: 2px 8px;
  letter-spacing: 0.12em;
  box-shadow: 0 1px 4px rgba(31, 27, 20, 0.18);
}

/* Attention state — used when a counter represents work the admin
   needs to act on (pending signups, etc.). Tints the whole card so
   it's hard to miss in the dashboard grid. */
.stat-card-attention {
  background: var(--attention-bg);
  border-color: var(--attention-rule) !important;
  box-shadow: 0 0 0 1px var(--attention-rule);
}
.stat-card-attention .stat-num {
  color: var(--danger);
  font-weight: 700;
}
.stat-card-attention .stat-label {
  color: var(--attention-ink);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.stat-link:hover .stat-card-attention {
  border-color: var(--danger) !important;
  box-shadow: 0 4px 12px rgba(162, 63, 63, 0.18);
}

/* Warning state — softer than attention. Used for "drafts" / "pending
   review" counts: an action item but not alarming. Gold/brass tint
   matches the design system's secondary accent. */
.stat-card-warning {
  background: var(--warning-bg);
  border-color: var(--warning-rule) !important;
  box-shadow: 0 0 0 1px var(--warning-rule);
}
.stat-card-warning .stat-num {
  color: var(--gold);
  font-weight: 700;
}
.stat-card-warning .stat-label {
  color: var(--warning-ink);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.stat-link:hover .stat-card-warning {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 12px rgba(164, 126, 59, 0.22);
}
.stat-card-sm .stat-num { font-size: 1.5rem; }
.stat-card-sm .stat-label {
  font-size: 0.7rem;
  min-height: 1.6em;     /* stops 1-line vs 2-line labels from shrinking the card */
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard-tags { line-height: 2.1; }
.stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 600;
}
.stat-label {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin-top: 6px;
}
.stat-card-sm .stat-label--members-only {
  /* Two-class selector so this beats `.stat-card-sm .stat-label` above.
     Uppercase + 0.12em tracking made "MEMBERS-ONLY" wider than its tile,
     so it broke at the hyphen; the half-word then sat directly above the
     decorative "Members" badge and the pair read as "MEMBERS-MEMBERS".
     nowrap keeps it on one line; the size/tracking (86px of text in a
     90px tile at 1280) keep it inside the card border. */
  white-space: nowrap;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}
.stat-card--members-only .card-body {
  /* The badge is absolutely positioned at the card's bottom edge, so the
     card must reserve its height (badge ~20px + 6px offset) or the badge
     paints over the label at every width. */
  padding-bottom: calc(0.6rem + 26px);
}

/* ---------- FAQ accordion --------------------------------------------- */
.faq-page .lede {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0 0 var(--s-md);
}
.faq-list { display: flex; flex-direction: column; gap: var(--s-2xs); }

.faq-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-card[open] {
  border-color: var(--accent-soft);
  box-shadow: 0 1px 0 var(--paper-edge), 0 8px 24px -16px rgba(31, 27, 20, 0.18);
}
.faq-card + .faq-card { margin-top: 0; }

.faq-card .faq-q {
  list-style: none;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--s-xs);
  padding: var(--s-xs) var(--s-sm);
  cursor: pointer;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.faq-card .faq-q::-webkit-details-marker { display: none; }
.faq-card .faq-q:hover { background: var(--paper-edge); }
.faq-card .faq-q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.faq-thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-edge);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.faq-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.faq-q-text { min-width: 0; }
.faq-q-text .badge-members {
  margin-left: var(--s-2xs);
  font-size: 0.7rem;
  vertical-align: middle;
}

.faq-chevron {
  color: var(--accent-soft);
  font-size: 0.85rem;
  transition: transform 0.2s ease, color 0.2s ease;
}
.faq-card[open] .faq-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

.faq-a {
  padding: 0 var(--s-sm) var(--s-sm) calc(56px + var(--s-xs) + var(--s-sm));
  border-top: 1px solid var(--rule);
  padding-top: var(--s-sm);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
}
.faq-a > :first-child { margin-top: 0; }
.faq-a > :last-child  { margin-bottom: 0; }
.faq-a a { color: var(--accent); }
.faq-a a:hover { color: var(--accent-deep); }

/* Flat /faqs/ — no accordion. Question is a heading, answer is body
   prose, separated by a hairline. The home-page section keeps the
   accordion (.faq-card) for compact preview; the dedicated FAQs
   page uses .faq-list-flat for skim-without-clicking reading. */
.faq-list-flat { gap: var(--s-md); }
.faq-list-flat .faq-entry {
  padding: 0 0 var(--s-md);
  border-bottom: 1px solid var(--rule);
}
.faq-list-flat .faq-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-q-flat {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 var(--s-2xs);
  color: var(--ink);
}
.faq-q-flat .badge-members { margin-left: var(--s-2xs); vertical-align: middle; }
.faq-list-flat .faq-a {
  padding: 0;
  border-top: 0;
}

@media (max-width: 600px) {
  .faq-card .faq-q {
    grid-template-columns: 44px 1fr auto;
    padding: var(--s-2xs) var(--s-xs);
    gap: var(--s-2xs);
    font-size: 1rem;
  }
  .faq-thumb { width: 44px; height: 44px; }
  .faq-a {
    padding: var(--s-xs);
    padding-top: var(--s-xs);
  }
}

/* ---------- Responsive ------------------------------------------------ */
@media (max-width: 768px) {
  /* Hard cap to stop horizontal scroll if any inline content (a long
     URL, a wide table) tries to push past the viewport. */
  html, body { overflow-x: hidden; }

  /* Thumbnail left, content right on mobile. The desktop grid
     (96px + 1fr) doesn't shrink gracefully on a 375px-wide iPhone —
     iOS WebKit feeds the 1fr track less width than Chromium because
     of how the flex parent (.row) sizes the grid child, so italic
     0.85rem date strings and blurbs wrap awkwardly. A plain flex row
     with a fixed 64px thumbnail sidesteps that: the content <div>
     takes the remaining space as a normal flex item. align-items at
     flex-start keeps the thumbnail pinned to the top of the row.
     .event-item--compact has no thumbnail, so it renders as a single
     content row naturally. */
  .article-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-xs);
  }
  .article-item img { width: 64px; height: 64px; }

  /* The .badge-members overlay is sized for a desktop thumb (~110px
     wide for "MEMBERS"). On a 64px mobile thumb it overflows to the
     right and clips the post title (caught in the wild 2026-05-19).
     Collapse to a compact circular "M" chip that fits inside the
     thumb. The full "Members" text stays in the DOM via font-size:0
     so screen readers still announce it; the ::before injects a
     visible "M" at its own size. */
  .badge-members.badge-overlay {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .badge-members.badge-overlay::before {
    content: 'M';
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
  }
  /* FAQ cards carry the badge inline after the question, not over the
     thumb, so the rule above never reached them and a home page showed
     an "M" chip on articles next to a full "MEMBERS" pill on FAQs. Same
     compact chip here, so the two read as one thing at mobile widths.
     Event rows carry the badge in the title too (beside the date leaf). */
  .faq-q-text .badge-members,
  .faq-q-flat .badge-members,
  .event-item h3 .badge-members {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }
  .faq-q-text .badge-members::before,
  .faq-q-flat .badge-members::before,
  .event-item h3 .badge-members::before {
    content: 'M';
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  /* Bootstrap's default .dropdown-menu uses position:absolute with the
     "right:0" anchor (.dropdown-menu-right). Inside a collapsed mobile
     navbar the dropdown then anchors off-screen because the nav is
     narrower than the menu's 240px min-width. Render dropdowns inline
     when the nav is collapsed: position:static + width:100% + no shadow
     (so they look like the surrounding nav links). */
  .site-nav .navbar-collapse .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    margin: 0;
    box-shadow: none;
    border: 0;
  }

  /* Editorial-narrow header (mfa-pending, account confirms, etc.):
     give the header block enough breathing room before the next
     content block. Without it the eyebrow + h1 + lead crowd the
     following alert/CTAs, which doesn't match the spacing on home
     and other articles pages. */
  article.editorial-narrow > header { margin-bottom: var(--s-md); }

  /* Mobile hero: shorter so the H1 + first CTA stay above the fold;
     caption full-width to avoid the cramped bottom-corner block; tighter
     padding so the caption doesn't squeeze the image to the side. */
  .hero-carousel .carousel-item {
    height: 50vh;
    min-height: 320px;
    max-height: 480px;
  }
  .hero-carousel .carousel-caption {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    padding: var(--s-xs) var(--s-sm);
    border-left: 0;
    border-top: 2px solid var(--gold);
  }
  .hero-carousel .carousel-caption h5 { font-size: 1.15rem; }
  .hero-carousel .carousel-caption p { font-size: 0.9rem; }

  .editorial, .editorial-narrow { padding: 0 var(--s-xs); }

  /* Hamburger toggle was reading ~40px — bump to the 48px WCAG target. */
  .site-nav .navbar-toggler {
    min-width: 48px;
    min-height: 48px;
    padding: 0.5rem 0.75rem;
  }
}

/* Tighten further on phones below 400px wide. */
@media (max-width: 400px) {
  .hero-carousel .carousel-item {
    height: 44vh;
    min-height: 260px;
  }
  .hero-carousel .carousel-caption h5 { font-size: 1rem; }
}

/* ---------- Member profile viewer ------------------------------------ */
.member-profile-head {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  margin: var(--s-sm) 0 var(--s-md);
}
.member-profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--paper-edge);
}
.member-profile-photo--blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--ink-soft);
}
.member-profile-details {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px var(--s-sm);
  margin: 0;
}
.member-profile-details dt { font-weight: 600; color: var(--ink-soft); }
.member-profile-details dd { margin: 0; }
.member-profile-people { list-style: none; padding: 0; margin: 0; }
.member-profile-people li { padding: 4px 0; }
.member-profile-pets { list-style: none; padding: 0; margin: 0; }
.member-profile-pet {
  display: flex;
  align-items: center;
  gap: var(--s-xs);
  padding: var(--s-2xs) 0;
  border-bottom: 1px solid var(--rule);
}
.member-profile-pet:last-child { border-bottom: 0; }
.member-profile-pet img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .member-profile-head { flex-direction: column; align-items: flex-start; }
  .member-profile-details { grid-template-columns: 1fr; gap: 2px; }
  .member-profile-details dt { margin-top: var(--s-2xs); }
}

/* Effective dark palette and component chrome. The device fallback below
   provides palette tokens when the early controller cannot run. */
:root:where([data-theme="dark"]) {
    color-scheme: dark;

    /* Warm charcoal, not pure black — keeps the "printed gazette" warmth. */
    --paper:        #17140F;
    --paper-edge:   #211D16;
    --surface:      #262019;
    --surface-2:    #2F2820;
    --ink:          #ECE6D9;
    --ink-soft:     #ADA593;
    --rule:         #3B3429;
    /* Green + gold are lightened so they clear AA contrast on the dark
       page — the literal #2E5339 / #A47E3B are too dark to read here. */
    --accent:       #6E9C79;
    --accent-deep:  #8FB89A;   /* hover = brighter, not darker, in dark mode */
    --accent-soft:  #7E977E;
    --gold:         #C99F58;
    --shade:        #100E0B;

    /* Fills are lifted so a solid button still reads against the page. */
    --accent-fill:        #3C6B4A;
    --accent-fill-hover:  #4A7E5A;
    --gold-fill-hover:    #B08A45;
    --danger:             #E98A8A;
    --danger-fill-hover:  #B84E4E;
    --success-fill-hover: #6C8A55;
    --attention-bg:   #3A2422;
    --attention-rule: #7A3A36;
    --attention-ink:  #F0BCB8;
    --warning-bg:     #3A3320;
    --warning-rule:   #6B5A33;
    --warning-ink:    #E8D6A6;

    --gold-ink:       #D2AA63;
    --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
    --shadow-lift:    0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.45);
    --theme-brand-filter: brightness(0) invert(0.9);
    --theme-toggler-filter: invert(0.85);
    --theme-toggle-slider: #4A4337;
    --theme-nav-dropdown: #20351F;
    --theme-backdrop-opacity: 0.72;
    --theme-link-color: var(--ink);
    --theme-hero-heading: var(--ink);
    --theme-alert-success-bg: #1F3326;
    --theme-alert-success-text: #BFE0C8;
    --theme-alert-success-rule: #2F5038;
    --theme-alert-info-bg: #1E2F33;
    --theme-alert-info-text: #BFE0E6;
    --theme-alert-info-rule: #2F4A50;
    --theme-alert-warning-bg: #3A3320;
    --theme-alert-warning-text: #E8D6A6;
    --theme-alert-warning-rule: #5A4F30;
    --theme-alert-danger-bg: #3A2422;
    --theme-alert-danger-text: #F0BCB8;
    --theme-alert-danger-rule: #5A3A36;



}

/* First-party component chrome reads the same effective palette as the root. */
.navbar-search .input-group-sm > .form-control,
.navbar-search .form-control:focus { background: var(--surface); color: var(--ink); }
.custom-toggle-slider { background: var(--theme-toggle-slider); }
.site-nav .navbar-brand img,
.sidebar #sidebar-logo { filter: var(--theme-brand-filter); }
.site-nav .navbar-toggler-icon { filter: var(--theme-toggler-filter); }
.site-nav .dropdown-menu { background: var(--theme-nav-dropdown); }
.card, .modal-content, .list-group-item, .dropdown-menu, .popover {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--rule);
}
.card-header, .card-footer,
.modal-header, .modal-footer { background-color: var(--paper-edge); border-color: var(--rule); }
.form-control, .custom-select, .custom-file-label {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--rule);
}
.form-control:focus, .custom-select:focus {
  background-color: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
}
.form-control::placeholder { color: var(--ink-soft); opacity: 0.85; }
.form-control:disabled, .form-control[readonly] { background-color: var(--paper-edge); }
.input-group-text {
  background-color: var(--paper-edge);
  color: var(--ink-soft);
  border-color: var(--rule);
}
.table { color: var(--ink); }
.table td, .table th, .table thead th { border-color: var(--rule); }
.table-hover tbody tr:hover { background-color: var(--paper-edge); color: var(--ink); }
.modal-backdrop.show { opacity: var(--theme-backdrop-opacity); }
.close, .close:hover { color: var(--ink); text-shadow: none; }
.alert-success { background-color: var(--theme-alert-success-bg); color: var(--theme-alert-success-text); border-color: var(--theme-alert-success-rule); }
.alert-info { background-color: var(--theme-alert-info-bg); color: var(--theme-alert-info-text); border-color: var(--theme-alert-info-rule); }
.alert-warning { background-color: var(--theme-alert-warning-bg); color: var(--theme-alert-warning-text); border-color: var(--theme-alert-warning-rule); }
.alert-danger { background-color: var(--theme-alert-danger-bg); color: var(--theme-alert-danger-text); border-color: var(--theme-alert-danger-rule); }
.alert a, .alert .alert-link { color: inherit; }
.bg-white, .bg-light { background-color: var(--surface) !important; }
.text-dark { color: var(--ink) !important; }
.text-muted { color: var(--ink-soft) !important; }
.border, .border-top, .border-right,
.border-bottom, .border-left { border-color: var(--rule) !important; }
.leaflet-container { background: var(--paper-edge); }
.hero-carousel .carousel-caption h5 { color: var(--theme-hero-heading); }
.faq-card { background: var(--surface); }
a, a:hover, a:focus {
  color: var(--theme-link-color);
  text-decoration-color: var(--theme-link-color);
}
a:hover { text-decoration-thickness: 2px; }



@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    /* Warm charcoal, not pure black — keeps the "printed gazette" warmth. */
    --paper:        #17140F;
    --paper-edge:   #211D16;
    --surface:      #262019;
    --surface-2:    #2F2820;
    --ink:          #ECE6D9;
    --ink-soft:     #ADA593;
    --rule:         #3B3429;
    /* Green + gold are lightened so they clear AA contrast on the dark
       page — the literal #2E5339 / #A47E3B are too dark to read here. */
    --accent:       #6E9C79;
    --accent-deep:  #8FB89A;   /* hover = brighter, not darker, in dark mode */
    --accent-soft:  #7E977E;
    --gold:         #C99F58;
    --shade:        #100E0B;

    /* Fills are lifted so a solid button still reads against the page. */
    --accent-fill:        #3C6B4A;
    --accent-fill-hover:  #4A7E5A;
    --gold-fill-hover:    #B08A45;
    --danger:             #E98A8A;
    --danger-fill-hover:  #B84E4E;
    --success-fill-hover: #6C8A55;
    --attention-bg:   #3A2422;
    --attention-rule: #7A3A36;
    --attention-ink:  #F0BCB8;
    --warning-bg:     #3A3320;
    --warning-rule:   #6B5A33;
    --warning-ink:    #E8D6A6;

    --gold-ink:       #D2AA63;
    --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
    --shadow-lift:    0 2px 4px rgba(0, 0, 0, 0.35), 0 16px 36px rgba(0, 0, 0, 0.45);
    --theme-brand-filter: brightness(0) invert(0.9);
    --theme-toggler-filter: invert(0.85);
    --theme-toggle-slider: #4A4337;
    --theme-nav-dropdown: #20351F;
    --theme-backdrop-opacity: 0.72;
    --theme-link-color: var(--ink);
    --theme-hero-heading: var(--ink);
    --theme-alert-success-bg: #1F3326;
    --theme-alert-success-text: #BFE0C8;
    --theme-alert-success-rule: #2F5038;
    --theme-alert-info-bg: #1E2F33;
    --theme-alert-info-text: #BFE0E6;
    --theme-alert-info-rule: #2F4A50;
    --theme-alert-warning-bg: #3A3320;
    --theme-alert-warning-text: #E8D6A6;
    --theme-alert-warning-rule: #5A4F30;
    --theme-alert-danger-bg: #3A2422;
    --theme-alert-danger-text: #F0BCB8;
    --theme-alert-danger-rule: #5A3A36;
    }
}

@media print {
  :root,
  :root[data-theme="dark"],
  :root:not([data-theme]) {
    color-scheme: light;
    --paper: #FFFFFF;
    --paper-edge: #F2EEE5;
    --surface: #FFFFFF;
    --surface-2: #FAF7F2;
    --ink: #1F1B14;
    --ink-soft: #4A463C;
    --rule: #D8D2C4;
    --accent: #2E5339;
    --gold: #A47E3B;
    --theme-brand-filter: none;
    --theme-toggler-filter: invert(0.45);
    --theme-link-color: var(--accent);
    --theme-alert-success-bg: #d4edda;
    --theme-alert-success-text: #155724;
    --theme-alert-success-rule: #c3e6cb;
    --theme-alert-info-bg: #d1ecf1;
    --theme-alert-info-text: #0c5460;
    --theme-alert-info-rule: #bee5eb;
    --theme-alert-warning-bg: #fff3cd;
    --theme-alert-warning-text: #856404;
    --theme-alert-warning-rule: #ffeeba;
    --theme-alert-danger-bg: #f8d7da;
    --theme-alert-danger-text: #721c24;
    --theme-alert-danger-rule: #f5c6cb;
  }
}

/* ============================================================
   WIR drop-zone uploads (see static/js/wir-dropzone.js).
   Bootstrap-flavored visual; the dropzone wraps a hidden file
   input and shows the file-picker UI as a single clickable card.
   ============================================================ */
.wir-dropzone {
  position: relative;
  display: block;
  border: 2px dashed var(--rule, #c6bfb3);
  border-radius: 8px;
  background: var(--paper, #faf7f2);
  padding: var(--s-md, 1.25rem);
  text-align: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.wir-dropzone:hover,
.wir-dropzone:focus-within {
  border-color: var(--accent, #2e5339);
}
.wir-dropzone.is-dragover {
  border-color: var(--accent, #2e5339);
  background: var(--surface, #fff);
}
/* Visually hide the input itself; the label/zone is what the user
   sees + clicks. Keep it focusable for keyboard nav (Tab + Enter
   triggers the browser's native file picker). */
.wir-dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.wir-dropzone-prompt {
  pointer-events: none;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink, #1f1b14);
}
.wir-dropzone-hint {
  pointer-events: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}
.wir-dropzone-count {
  pointer-events: none;
  font-weight: 600;
  margin-top: 0.5rem;
  color: var(--accent, #2e5339);
}

/* ====================================================================== *
 *  Responsive improvements (mobile-first hardening)
 *  Added as a cohesive block for reviewability. Additive only — desktop
 *  rendering is unchanged; these rules engage on small / touch devices.
 * ====================================================================== */

/* --- Images: global overflow safety net ------------------------------ *
 * No global img rule existed, so any CMS/user-inserted image outside
 * .post-body could push past the viewport. Constrain by default; more
 * specific selectors and inline width/height still win. */
img {
  max-width: 100%;
  height: auto;
}

/* --- Data tables: scroll instead of clip ----------------------------- *
 * ~25 Bootstrap .table's render directly inside .card/.editorial with no
 * .table-responsive wrapper. Combined with `overflow-x: hidden` on the
 * body they were CLIPPED (unreachable) on phones. Making the table its
 * own horizontal scroll container fixes every one without touching each
 * template. Column alignment is preserved via the anonymous table box. */
@media (max-width: 991px) {
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Touch targets: >=44px on touch/coarse pointers ------------------ *
 * WCAG 2.5.5 / platform guidance want ~44px min. Only bump on coarse
 * pointers so mouse-driven dense manage tables stay compact. */
@media (pointer: coarse) {
  .btn,
  .btn-sm,
  .site-nav .nav-link,
  .site-nav .dropdown-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .site-nav .dropdown-item {
    display: flex;
  }
}

/* --- Dues amount grid: relax on narrow phones ------------------------ *
 * Three price cells with 24px gaps + 24px padding got cramped < ~360px.
 * Tighten spacing so the trio still fits without wrapping awkwardly. */
@media (max-width: 480px) {
  .dues-amount-grid {
    gap: var(--s-2xs);
    padding: var(--s-2xs);
  }
}