/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --clr-bg:          #F0F4FA;
  --clr-white:       #ffffff;
  --clr-text:        #1d1d1f;
  --clr-text-secondary: #4A5568;
  --clr-accent:      #1B3A6B;   /* Marian Blue */
  --clr-accent-light:#2C5496;
  --clr-gold:        #D4B96A;
  --clr-border:      #d2d2d7;
  --clr-card-bg:     #ffffff;
  --clr-nav-bg:      #1B3A6B;
  --radius-card:     18px;
  --radius-sm:       10px;
  --shadow-card:     0 4px 24px rgba(0,0,0,.10);
  --shadow-card-hover: 0 8px 36px rgba(0,0,0,.18);
  --font:            'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition:      .35s cubic-bezier(.4,0,.2,1);
  --primary-color:   #1B3A6B;   /* alias used by admin views */
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--clr-bg);
  color: var(--clr-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: var(--clr-accent);
  border-bottom: 1px solid rgba(0,0,0,0.15);
  transition: var(--transition);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding: 0 24px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -.2px;
  color: #fff;
  white-space: nowrap;
}

.nav-logo img {
  height: 40px;
  width: auto;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
}

.nav-logo-text small {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.75);
  margin-top: -2px;
}
.nav-links {
  display: flex; gap: 28px; list-style: none;
  align-items: center;
}
.nav-links a {
  font-size: 0.875rem; font-weight: 400; color: rgba(255,255,255,0.85);
  transition: color var(--transition);
  position: relative;
}
.nav-links a:hover { color: #fff; }

/* dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown > a::after {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-left: 5px; vertical-align: middle;
  transition: transform var(--transition);
}
.nav-dropdown:hover > a::after { transform: rotate(-135deg); }
/* Invisible bridge to prevent hover gap between trigger and menu */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 16px;
  background: transparent;
}
.dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: -16px;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  min-width: 190px; padding: 8px 0;
  opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition);
}
.nav-dropdown:hover .dropdown-menu {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.dropdown-menu a {
  display: block; padding: 7px 20px;
  font-size: 0.8125rem; color: var(--clr-text);
  transition: background var(--transition);
}
/* Override the white-on-hover from .nav-links a:hover — keep dropdown text
   readable in Marian Blue against the light-blue hover background. */
.dropdown-menu a:hover,
.dropdown-menu a:focus { background: #edf2fb; color: var(--primary-color); }

.nav-donate {
  font-size: 0.8125rem; font-weight: 600;
  background: linear-gradient(135deg, #ffffff 0%, #7189b0 100%);
  color: var(--clr-accent) !important;
  padding: 6px 16px; border-radius: 20px;
  box-shadow: 0 2px 8px rgba(27, 58, 107, 0.25);
  transition: filter .2s, transform .15s, box-shadow .2s;
}
.nav-donate:hover {
  filter: brightness(0.96);
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(27, 58, 107, 0.35);
}

/* mobile hamburger */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 6px;
}
.nav-hamburger span {
  width: 22px; height: 2px; background: var(--clr-gold);
  border-radius: 1px; transition: var(--transition);
}

/* ─── HERO WITH CAROUSEL ─── */
.hero {
  padding: 80px 24px 16px;
  position: relative;
  min-height: 600px;
  display: flex;
  align-items: center;
  background: var(--clr-bg);
}

/* Carousel Container */
.hero-carousel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1200px;
  height: 500px;
  z-index: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
  border-radius: var(--radius-card);
}

.hero-slide:nth-child(1) {
  background: linear-gradient(135deg, #1B3A6B 0%, #0D2240 100%);
}

.hero-slide:nth-child(2) {
  background: linear-gradient(135deg, #2C5496 0%, #1B3A6B 100%);
}

.hero-slide:nth-child(3) {
  background: linear-gradient(135deg, #0D2240 0%, #1a2f5a 100%);
}

.hero-slide.active {
  opacity: 1;
}

/* No overlay — removed gradient */
.hero-slide::after {
  display: none;
}

/* Hero Content */
.hero-content-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 500px;
}

.hero-content-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
  padding: 0 40px;
  position: relative;
}

.hero-parish-name {
  text-align: right;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #B8D4F0;
  flex-shrink: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  line-height: 1.08;
  font-family: var(--font);
  order: 2;
}

.hero-text {
  text-align: left;
  width: 520px;
  min-height: 380px;
  flex-shrink: 0;
  order: 1;
  background: rgba(255,255,255,0.5);
  border-radius: 18px;
  padding: 28px 32px;
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
}
.hero-text .hero-cta {
  margin-top: auto;
  align-self: flex-start;
}

.hero-label {
  display: inline-block;
  font-size: 0.8125rem; font-weight: 500; letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--clr-text-secondary);
  margin-bottom: 20px;
}

br.hero-title-br { display: none; }
@media (min-width: 769px) { br.hero-title-br { display: block; } }

.hero h1 {
  font-size: clamp(1.3125rem, 3.5vw, 2.6875rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: #000;
  text-shadow: none;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 1.125rem; font-weight: 300;
  color: var(--clr-text);
  line-height: 1.5;
  margin-bottom: 32px;
  text-shadow: none;
}

.hero-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 1.0625rem; font-weight: 500;
  color: rgba(255,255,255,0.95);
  background: rgba(27,58,107,0.9);
  padding: 14px 28px;
  border-radius: 30px;
  transition: all var(--transition);
  text-shadow: none;
}

.hero-cta:hover {
  gap: 12px;
  background: rgba(27,58,107,1);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(27,58,107,0.4);
}

.hero-cta svg { width: 18px; height: 18px; }

/* ─── SECTION LABEL ─── */
.section-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: .8px;
  text-transform: uppercase; color: var(--clr-text-secondary);
  margin-bottom: 12px;
}
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 32px;
}
.section-header h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  font-weight: 700; letter-spacing: -1px;
}
.section-link {
  font-size: 0.9375rem; font-weight: 500; color: var(--clr-accent);
  display: flex; align-items: center; gap: 4px;
  transition: gap var(--transition);
  white-space: nowrap;
}
.section-link:hover { gap: 10px; }
.section-link svg { width: 15px; height: 15px; }

/* ─── CONTENT WRAPPER ─── */
.content { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ─── WELCOME SECTION ─── */
.welcome-section {
  background: var(--clr-card-bg);
  padding: 20px 0;
  border-bottom: 1px solid var(--clr-border);
}
.welcome-inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.welcome-text {
  flex: 1;
}
.welcome-text .section-label {
  margin-bottom: 16px;
}
.welcome-text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-text-secondary);
  margin-bottom: 16px;
}
.welcome-text p:last-child {
  margin-bottom: 0;
}
.welcome-link {
  color: var(--clr-accent);
  font-weight: 500;
}
.welcome-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.welcome-sign {
  flex-shrink: 0;
  text-align: right;
  padding-left: 40px;
  border-left: 3px solid var(--clr-accent);
}
.welcome-blessing {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 4px;
}
.welcome-signatory {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--clr-text);
  font-style: italic;
}
@media (max-width: 640px) {
  .welcome-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .welcome-sign {
    border-left: none;
    border-top: 3px solid var(--clr-accent);
    padding-left: 0;
    padding-top: 20px;
    text-align: left;
  }
}

/* ─── FEATURE CARDS (top 2×3 grid — mirrors Apple's feature cards) ─── */
.features { padding: 40px 0 80px; }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex; flex-direction: column;
}
.feature-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.feature-card-img {
  height: 180px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background-size: cover;
  background-position: center;
}
.feature-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.2);
  pointer-events: none;
}
/* Photo backgrounds — replace URLs with real parish images before launch */
.fc-burgundy { background-color: var(--clr-accent); }
.fc-gold     { background-color: #B89840; }
.fc-dark     { background-color: #2d2d2d; }
.fc-teal     { background-color: #2a7a7a; }
.fc-slate    { background-color: #3d4d5c; }
.fc-warm     { background-color: #7a4a28; }

.fc-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,.4);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.fc-icon svg { width: 28px; height: 28px; fill: #fff; }

.feature-card-body { padding: 22px 24px 28px; flex: 1; display: flex; flex-direction: column; }
.feature-card-body h4 {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.3px;
  margin-bottom: 8px;
}
.feature-card-body p {
  font-size: 0.875rem; color: var(--clr-text-secondary); line-height: 1.5; flex: 1;
}
.card-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 16px;
  font-size: 0.875rem; font-weight: 500; color: var(--clr-accent);
  transition: gap var(--transition);
}
.card-link:hover { gap: 10px; }
.card-link svg { width: 14px; height: 14px; }

/* ─── NEWS SECTION ─── */
.news { padding: 60px 0 80px; }
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex; flex-direction: column;
}
.news-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.news-card-img {
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background-size: cover;
  background-position: center;
}
.news-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.2);
  pointer-events: none;
}
.nc-a { background-color: var(--clr-accent); }
.nc-b { background-color: #B89840; }
.nc-c { background-color: #2d3a4a; }

.news-card-img svg { width: 36px; height: 36px; fill: rgba(255,255,255,.4); }
.news-card-img.has-photo,
.nw-card-img.has-photo,
.nw-featured-img.has-photo {
  background-size: cover;
}

.news-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; }
.news-card-body p { flex: 1; }
.news-tag {
  display: inline-block;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--clr-accent);
  background: rgba(27,58,107,.08);
  padding: 3px 10px; border-radius: 20px;
  margin-bottom: 10px;
}
.news-card-body h4 {
  font-size: 1rem; font-weight: 600; letter-spacing: -.2px;
  line-height: 1.35; margin-bottom: 8px;
}
.news-card-body p {
  font-size: 0.8125rem; color: var(--clr-text-secondary); line-height: 1.55;
}

/* ─── EVENTS + NEWSLETTER SPLIT ─── */
.split { padding: 60px 0 80px; }
.split-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}
/* Events list */
.events-panel {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.events-panel-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--clr-border);
}
.events-panel-header h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.3px; }
.events-panel-header p { font-size: 0.8125rem; color: var(--clr-text-secondary); margin-top: 4px; }

.event-row {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--transition);
}
.event-row:last-child { border-bottom: none; }
.event-row:hover { background: #fafafa; }

.event-date-box {
  flex-shrink: 0; width: 52px; text-align: center;
  background: var(--clr-bg); border-radius: 10px; padding: 8px 4px;
}
.event-date-box .month {
  font-size: 0.625rem; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--clr-accent);
}
.event-date-box .day {
  font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--clr-text);
}
.event-info h4 { font-size: 0.9375rem; font-weight: 600; letter-spacing: -.2px; }
.event-info p { font-size: 0.8125rem; color: var(--clr-text-secondary); margin-top: 3px; }
.event-info .event-loc {
  font-size: 0.75rem; color: var(--clr-accent); margin-top: 5px; font-weight: 500;
}

/* Events panel — scrollable list + click-to-detail */
.events-list-scroll {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--clr-accent) #f0f0f0;
}
.events-list-scroll::-webkit-scrollbar { width: 5px; }
.events-list-scroll::-webkit-scrollbar-track { background: #f0f0f0; }
.events-list-scroll::-webkit-scrollbar-thumb { background: var(--clr-accent); border-radius: 4px; }
.event-row[role="button"] { cursor: pointer; }
.event-row[role="button"]:focus { outline: 2px solid var(--clr-accent); outline-offset: -2px; }
.event-date-box--range .day { font-size: 0.9375rem; letter-spacing: -.5px; }

/* ─── Calendar Enhancements (Feature 23) ─── */

/* Pill filter (homepage events panel) */
.events-pill-filter {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 28px; border-bottom: 1px solid var(--clr-border);
  background: #fafbfc;
}
.events-pill {
  font: inherit;
  font-size: 0.75rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--clr-border); background: #fff;
  color: var(--clr-text-secondary); cursor: pointer;
  letter-spacing: .2px;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.events-pill:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
.events-pill:focus { outline: 2px solid var(--clr-accent); outline-offset: 2px; }

/* Per-venue pill colours — match the .event-venue-badge--* palette so
   filter chips read as the same colour as the events they filter to.
   Scoped with :not(.is-active) so the Marian-Blue active state always wins. */
.events-pill[data-pill="corpus_christi"]:not(.is-active)   { background: #E8EFF7; color: #1B3A6B; border-color: #B8C8DC; }
.events-pill[data-pill="st_peters_hadlow"]:not(.is-active) { background: #F4ECDC; color: #6B4E1B; border-color: #D8C39A; }
.events-pill[data-pill="st_justus"]:not(.is-active)        { background: #E5EFE8; color: #1B5B30; border-color: #B7D4C0; }
.events-pill[data-pill="fisher_hall"]:not(.is-active)      { background: #F1E5EE; color: #6B1B5A; border-color: #D5B7CD; }

.events-pill.is-active {
  background: var(--clr-accent); color: #fff; border-color: var(--clr-accent);
}

/* Venue badges (event row + detail view) */
.event-venues {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 5px;
}
.event-venue-badge {
  font-size: 0.6875rem; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  letter-spacing: .2px;
  background: #eef2f8; color: var(--clr-accent);
  border: 1px solid #d8e0ec;
  white-space: nowrap;
}
/* Per-venue colour modifiers — accessible contrast (WCAG AA on light bg) */
.event-venue-badge--corpus-christi   { background: #E8EFF7; color: #1B3A6B; border-color: #B8C8DC; }
.event-venue-badge--st-peters-hadlow { background: #F4ECDC; color: #6B4E1B; border-color: #D8C39A; }
.event-venue-badge--st-justus        { background: #E5EFE8; color: #1B5B30; border-color: #B7D4C0; }
.event-venue-badge--fisher-hall      { background: #F1E5EE; color: #6B1B5A; border-color: #D5B7CD; }

/* Detail view venues row */
.event-detail-venues {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 8px;
}

/* Private event placeholder card */
.event-row--private {
  background: #fafafa;
  cursor: default;
}
.event-row--private:hover { background: #fafafa; }
.event-row--private .event-date-box {
  background: #ececec;
}
.event-row--private .event-date-box .month,
.event-row--private .event-date-box .day { color: var(--clr-text-secondary); }
.event-private-label {
  font-style: italic;
  color: var(--clr-text-secondary);
  font-weight: 500;
  letter-spacing: .1px;
}
.event-private-label span[aria-hidden="true"] {
  margin-right: 4px;
  opacity: 0.7;
}

/* Hidden rows from pill filter — preserve layout, no flicker */
.event-row[aria-hidden="true"] { display: none; }

/* Mobile breakpoint: pills wrap and stay readable */
@media (max-width: 600px) {
  .events-pill-filter { padding: 10px 18px; gap: 5px; }
  .events-pill { font-size: 0.72rem; padding: 5px 10px; }
  .event-venue-badge { font-size: 0.625rem; padding: 1px 6px; }
}
.event-detail {
  padding: 20px 28px 24px;
}
.event-detail-back {
  background: none; border: none; cursor: pointer;
  font-size: 0.8125rem; color: var(--clr-accent); font-weight: 600;
  padding: 0; margin-bottom: 16px; display: flex; align-items: center; gap: 5px;
}
.event-detail-back:hover { text-decoration: underline; }
.event-detail-back:focus { outline: 2px solid var(--clr-accent); outline-offset: 2px; }
.event-detail h4 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -.3px; }
.event-detail-meta { font-size: 0.8125rem; color: var(--clr-accent); font-weight: 500; margin-bottom: 10px; }
.event-detail-desc { font-size: 0.875rem; color: var(--clr-text-secondary); line-height: 1.6; margin-bottom: 10px; }
.event-detail-cat { display: inline-block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; background: var(--clr-bg); color: var(--clr-accent); padding: 3px 9px; border-radius: 20px; }
.event-detail-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.event-detail-title-row h4 { flex: 1 1 auto; min-width: 0; margin: 0; }
.event-detail-cal-btns { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; padding-top: 2px; }
.event-detail-cal-btn { display: inline-block; font-size: 0.6875rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--clr-accent); color: var(--clr-accent); background: transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; font-family: inherit; line-height: 1.4; }
.event-detail-cal-btn:hover { background: var(--clr-accent); color: #fff; }
.event-detail-cal-btn:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }

/* Newsletter panel */
.newsletter-panel {
  background: linear-gradient(145deg, var(--clr-accent) 0%, #0D2240 100%);
  border-radius: var(--radius-card);
  padding: 36px 32px;
  color: #fff;
  position: relative; overflow: hidden;
}
.newsletter-panel::before {
  content: '';
  position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.newsletter-panel::after {
  content: '';
  position: absolute; bottom: -40px; left: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.newsletter-panel h3 {
  font-size: 1.375rem; font-weight: 600; letter-spacing: -.3px;
  position: relative; z-index: 1;
}
.newsletter-panel p {
  font-size: 0.875rem; color: rgba(255,255,255,.75);
  margin-top: 10px; line-height: 1.5;
  position: relative; z-index: 1;
}
.newsletter-input-wrap {
  margin-top: 24px; position: relative; z-index: 1;
  display: flex; gap: 10px;
}
.newsletter-input-wrap input {
  flex: 1; padding: 14px 20px;
  border-radius: 28px;
  border: none;
  font-size: 0.9375rem; font-family: var(--font);
  background: rgba(255,255,255,.14);
  color: #fff;
  outline: none;
  box-sizing: border-box;
  width: 100%;
  transition: background var(--transition);
}
.newsletter-input-wrap input::placeholder { color: rgba(255,255,255,.5); }
.newsletter-input-wrap input:focus { background: rgba(255,255,255,.2); }
.newsletter-input-wrap button {
  padding: 12px 22px;
  border-radius: 24px;
  border: none;
  background: var(--clr-gold);
  color: var(--clr-text);
  font-size: 0.875rem; font-weight: 600; font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition), transform .15s;
  white-space: nowrap;
}
.newsletter-input-wrap button:hover { background: #C4A85A; transform: scale(1.04); }
.newsletter-gdpr {
  font-size: 0.6875rem; color: rgba(255,255,255,.45);
  margin-top: 12px; line-height: 1.4;
  position: relative; z-index: 1;
}

/* ─── QUICK LINKS BAR ─── */
.quicklinks { padding: 60px 0 80px; }
.quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.quicklink-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.quicklink-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.ql-icon {
  width: 52px; height: 52px; border-radius: 14px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.ql-icon svg { width: 24px; height: 24px; }
.ql-burgundy { background: rgba(27,58,107,.1); }  .ql-burgundy svg { fill: var(--clr-accent); }
.ql-gold     { background: rgba(201,169,97,.15); } .ql-gold svg     { fill: #B09030; }
.ql-teal     { background: rgba(44,110,110,.12); } .ql-teal svg     { fill: #2c6e6e; }
.ql-dark     { background: rgba(29,29,31,.08);  } .ql-dark svg     { fill: var(--clr-text); }

.quicklink-card h4 { font-size: 0.9375rem; font-weight: 600; letter-spacing: -.2px; }
.quicklink-card p  { font-size: 0.8125rem; color: var(--clr-text-secondary); margin-top: 5px; line-height: 1.4; }

/* ─── FOOTER ─── */
footer {
  background: #0D2240;
  color: rgba(255,255,255,.7);
  padding: 64px 24px 32px;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand h3 {
  font-size: 1.25rem; font-weight: 600; color: #fff;
  letter-spacing: -.3px; margin-bottom: 12px;
}
.footer-brand p {
  font-size: 0.8125rem; line-height: 1.6; max-width: 300px;
}
.footer-col h4 {
  font-size: 0.75rem; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 0.875rem; color: rgba(255,255,255,.7);
  transition: color var(--transition);
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 28px;
  font-size: 0.75rem; color: rgba(255,255,255,.35);
}
.footer-bottom a { color: rgba(255,255,255,.5); transition: color var(--transition); }
.footer-bottom a:hover { color: #fff; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .feature-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
  .split-grid { grid-template-columns: 1fr; }
  .quicklinks-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .feature-grid, .news-grid, .quicklinks-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .newsletter-input-wrap { flex-direction: column; }
  .hero { min-height: 500px; padding: 60px 24px 24px; }
  .hero-carousel { height: 400px; }
  .hero-content-wrapper {
    min-height: 400px;
  }
  .hero-content-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 24px;
  }
  .hero-text { text-align: left; order: 1; width: auto; padding: 20px 22px; align-self: center; min-height: 0; }
  .hero-parish-name { text-align: right; font-size: clamp(0.6875rem, 3.2vw, 0.9375rem); order: 2; align-self: flex-end; }
  .hero h1 { font-size: clamp(1.6875rem, 8vw, 2.6875rem); }
  .hero-sub { font-size: 1rem; }
  .hero-cta { font-size: 0.75rem; padding: 6px 12px; }
}

/* ─── MOBILE NAV OVERLAY ─── */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--clr-white);
  flex-direction: column;
  padding: 80px 32px 40px;
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-size: 1.25rem; font-weight: 500; color: var(--clr-text);
  padding: 14px 0;
  border-bottom: 1px solid var(--clr-border);
  transition: color var(--transition);
}
.mobile-nav a:hover { color: var(--clr-accent); }
.mobile-nav .mobile-close {
  position: absolute; top: 18px; right: 24px;
  font-size: 1.75rem; cursor: pointer; color: var(--clr-text-secondary);
  background: none; border: none; font-family: var(--font);
}
.mobile-nav .mobile-donate {
  display: inline-block; margin-top: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #7189b0 100%);
  color: var(--clr-accent); padding: 12px 28px; border-radius: 24px;
  font-size: 1rem; font-weight: 600; border-bottom: none;
  text-align: center; box-shadow: 0 2px 8px rgba(27, 58, 107, 0.25);
}

/* ─── MASS TIMES PAGE ─── */

/* Page Hero */
/* Background image spans hero + nav pill sections */
.mt-hero-wrap {
  position: relative;
  isolation: isolate;
  background: transparent;
}
.mt-hero-wrap::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1200px;
  border-radius: var(--radius-card);
  background-image:
    linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 80%),
    url('/images/corpus-christi.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.mt-hero .section-label,
.mt-hero h1,
.mt-hero-sub {
  color: #000;
}
.mt-hero {
  padding: 120px 0 40px;
  background: transparent;
}
.mt-hero-inner {
  max-width: 640px;
}
.mt-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: #000;
  margin-bottom: 16px;
}
.mt-hero-sub {
  font-size: 1.0625rem;
  color: #000;
  line-height: 1.6;
  font-weight: 300;
}

/* Navigation Pills */
.mt-nav-section {
  padding: 0 0 8px;
  position: sticky;
  top: 52px;
  z-index: 50;
  background: transparent;
  transition: background 0.2s;
}
/* Applied via JS when the section is actually stuck to the top */
.mt-nav-section.is-stuck {
  background: rgba(240,244,250,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mt-pills {
  display: flex;
  gap: 10px;
  padding: 12px 0;
}
.mt-pill {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 24px;
  transition: all var(--transition);
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid var(--clr-accent);
  color: var(--clr-accent);
}
.mt-pill:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #fff;
}
.mt-pills:hover .mt-pill.active:not(:hover) {
  background: rgba(255, 255, 255, 0.75);
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}
.mt-pill-burgundy.active {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-accent);
}
.mt-pill-slate.active {
  background: #3a3a50;
  color: #fff;
  border-color: #3a3a50;
}
.mt-pill-teal.active {
  background: #2c6e6e;
  color: #fff;
  border-color: #2c6e6e;
}

/* Church Section */
.mt-church-section {
  padding: 56px 0 64px;
}
.mt-section-alt {
  background: var(--clr-white);
}

.mt-church-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
}
.mt-church-accent {
  width: 4px;
  height: 56px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 4px;
}
.mt-accent-burgundy { background: linear-gradient(180deg, var(--clr-accent) 0%, var(--clr-accent-light) 100%); }
.mt-accent-slate    { background: linear-gradient(180deg, #3a3a50 0%, #5a5a70 100%); }
.mt-accent-teal     { background: linear-gradient(180deg, #2c6e6e 0%, #4a9e9e 100%); }

.mt-church-header h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.15;
}
.mt-church-tagline {
  font-size: 0.9375rem;
  color: var(--clr-text-secondary);
  margin-top: 4px;
}

/* Schedule Grid */
.mt-schedule-grid {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Grid rows — always 4 columns: day + 3 mass slots */
.mt-time-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid var(--clr-border);
  transition: background var(--transition);
}
.mt-time-row:last-child { border-bottom: none; }
.mt-time-row:hover { background: #fafafa; }

.mt-day-badge {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 18px 24px;
  text-align: left;
}
.mt-badge-burgundy { color: var(--clr-accent); }
.mt-badge-slate { color: #3a3a50; }
.mt-badge-teal { color: #2c6e6e; }

/* Each mass cell — aligned column with | separator */
.mt-mass-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 24px;
  min-height: 54px;
  position: relative;
}
.mt-mass-cell::before {
  content: '|';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--clr-border);
  line-height: 1;
}
.mt-cell-empty::before {
  content: '|';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--clr-border);
  line-height: 1;
}
.mt-cell-empty {
  position: relative;
  min-height: 54px;
}
.mt-no-mass {
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
  font-style: italic;
  opacity: .45;
}
.mt-time {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.3px;
  color: var(--clr-text);
  white-space: nowrap;
}
.mt-type {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
  white-space: nowrap;
}
.mt-note {
  font-size: 0.75rem;
  color: var(--clr-accent);
  font-weight: 500;
  white-space: nowrap;
}

/* Church Opening Times */
.mt-opening-times {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  background: rgba(0,0,0,0.02);
}
.mt-opening-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clr-text-secondary);
  margin: 0 0 6px;
}
.mt-opening-text {
  font-size: 0.92rem;
  color: var(--clr-text);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

/* Church Footer with Directions */
.mt-church-footer {
  margin-top: 20px;
}
.mt-directions-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 24px;
  transition: all var(--transition);
}
.mt-directions-btn svg {
  width: 16px;
  height: 16px;
}
.mt-btn-burgundy {
  color: var(--clr-accent);
  background: rgba(27,58,107,.06);
}
.mt-btn-burgundy:hover {
  background: rgba(27,58,107,.12);
}
.mt-btn-slate {
  color: #3a3a50;
  background: rgba(58,58,80,.06);
}
.mt-btn-slate:hover {
  background: rgba(58,58,80,.12);
}
.mt-btn-teal {
  color: #2c6e6e;
  background: rgba(44,110,110,.06);
}
.mt-btn-teal:hover {
  background: rgba(44,110,110,.12);
}

/* Info Section */
.mt-info-section {
  padding: 60px 0 80px;
  border-top: 1px solid var(--clr-border);
}
.mt-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mt-info-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.mt-info-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.mt-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.mt-info-icon svg {
  width: 20px;
  height: 20px;
}
.mt-info-burgundy { background: rgba(27,58,107,.1); }
.mt-info-burgundy svg { stroke: var(--clr-accent); }
.mt-info-gold { background: rgba(201,169,97,.15); }
.mt-info-gold svg { stroke: #B09030; }
.mt-info-teal { background: rgba(44,110,110,.12); }
.mt-info-teal svg { stroke: #2c6e6e; }
.mt-info-dark { background: rgba(29,29,31,.08); }
.mt-info-dark svg { stroke: var(--clr-text); }

.mt-info-card h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -.2px;
  margin-bottom: 8px;
}
.mt-info-card p {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  line-height: 1.55;
}

/* Readings CTA Section */
.mt-readings-section {
  padding: 0 0 80px;
}
.mt-readings-card {
  background: linear-gradient(145deg, var(--clr-accent) 0%, #0D2240 100%);
  border-radius: var(--radius-card);
  padding: 36px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.mt-readings-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.mt-readings-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  gap: 24px;
}
.mt-readings-inner h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.3px;
}
.mt-readings-inner p {
  font-size: 0.875rem;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}
.mt-readings-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--clr-text);
  background: var(--clr-gold);
  padding: 12px 24px;
  border-radius: 24px;
  transition: all var(--transition);
  white-space: nowrap;
}
.mt-readings-btn:hover {
  background: #C4A85A;
  transform: scale(1.04);
}
.mt-readings-btn svg {
  width: 16px;
  height: 16px;
}

/* Mass Times Responsive */
@media (max-width: 900px) {
  .mt-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mt-hero { padding: 100px 0 32px; }
  .mt-pills { flex-wrap: wrap; }
  .mt-time-row { grid-template-columns: 1fr; }
  .mt-day-badge { padding: 12px 20px 2px; }
  .mt-mass-cell { padding: 2px 20px 4px; min-height: auto; }
  .mt-mass-cell::before { display: none; }
  .mt-mass-cell:last-child { padding-bottom: 12px; }
  .mt-cell-empty { display: none; }
  .mt-info-grid { grid-template-columns: 1fr; }
  .mt-readings-inner { flex-direction: column; text-align: center; }
  .mt-church-header { gap: 14px; }
}

/* ─── NEWS PAGE ─── */

/* Category Filter Pills */
.nw-nav-section {
  padding: 8px 0;
  position: sticky;
  top: 51px;
  z-index: 50;
  background: var(--clr-bg);
}
/* Override reveal transform on sticky element to avoid positioning quirks */
.nw-nav-section.reveal { transform: none; }
.nw-nav-section.reveal.visible { transform: none; }
.nw-pills {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.nw-pill {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 24px;
  transition: all var(--transition);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-text-secondary);
}
.nw-pill:hover {
  border-color: var(--clr-text-secondary);
  color: var(--clr-text);
}
.nw-pill.active {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-accent);
}
.nw-pill-teal.active {
  background: #2c6e6e;
  border-color: #2c6e6e;
}
.nw-pill-slate.active {
  background: #3a3a50;
  border-color: #3a3a50;
}
.nw-pill-gold.active {
  background: #B09030;
  border-color: #B09030;
}
/* Inline pills variant — sits beside section header */
.nw-pills-inline {
  padding: 0;
}

/* Articles Section */
.nw-articles-section {
  padding: 40px 0 60px;
}

/* Featured Article */
.nw-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  margin-bottom: 48px;
}
.nw-featured:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.nw-featured-img {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nw-featured-img svg {
  width: 64px;
  height: 64px;
  fill: rgba(255,255,255,.25);
}
.nw-featured-body {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nw-featured-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.nw-featured-meta time {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
}
.nw-featured-body h2 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1.2;
  margin-bottom: 14px;
}
.nw-featured-body h2 a {
  color: var(--clr-text);
  transition: color var(--transition);
}
.nw-featured-body h2 a:hover {
  color: var(--clr-accent);
}
.nw-featured-body > p {
  font-size: 0.9375rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}
.nw-author {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  font-weight: 500;
  margin-bottom: 4px;
}
.nw-read-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--clr-accent);
  transition: gap var(--transition);
}
.nw-read-more:hover { gap: 10px; }
.nw-read-more svg { width: 16px; height: 16px; }

/* More Header */
.nw-more-header {
  margin-top: 8px;
  margin-bottom: 32px;
}
.nw-more-header h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 12px;
}
.nw-more-header .section-label {
  margin-bottom: 4px;
}
.nw-pills-below {
  padding: 0 0 24px;
  border: none;
  box-shadow: none;
}

/* Category Badge */
.nw-category-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--clr-accent);
  background: rgba(27,58,107,.08);
  padding: 3px 10px;
  border-radius: 20px;
}
.nw-category-link {
  transition: background var(--transition);
}
.nw-category-link:hover {
  background: rgba(27,58,107,.15);
}

/* Article Card Grid */
.nw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.nw-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}
.nw-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.nw-card-img {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nw-card-img svg {
  width: 36px;
  height: 36px;
  fill: rgba(255,255,255,.3);
}
.nw-card-body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.nw-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.nw-card-meta time {
  font-size: 0.75rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
}
.nw-card-body h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.2px;
  line-height: 1.35;
  margin-bottom: 8px;
  color: var(--clr-text);
}
.nw-card-body p {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  line-height: 1.55;
  flex: 1;
}

/* Pagination */
.nw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--clr-border);
}
.nw-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-accent);
  padding: 10px 18px;
  border-radius: 24px;
  background: rgba(27,58,107,.06);
  transition: all var(--transition);
}
.nw-page-btn:hover {
  background: rgba(27,58,107,.12);
}
.nw-page-btn svg { width: 16px; height: 16px; }
.nw-page-disabled {
  color: var(--clr-text-secondary);
  background: transparent;
  opacity: .4;
  cursor: default;
}
.nw-page-disabled:hover {
  background: transparent;
}
.nw-page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px;
}
.nw-page-num {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  border-radius: 10px;
  transition: all var(--transition);
}
.nw-page-num:hover {
  background: var(--clr-white);
  color: var(--clr-text);
  box-shadow: var(--shadow-card);
}
.nw-page-current {
  background: var(--clr-accent);
  color: #fff;
}
.nw-page-current:hover {
  background: var(--clr-accent);
  color: #fff;
}

/* Empty State */
.nw-empty {
  text-align: center;
  padding: 80px 24px;
}
.nw-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  background: rgba(27,58,107,.08);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nw-empty-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--clr-accent);
}
.nw-empty h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.nw-empty p {
  font-size: 0.9375rem;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}
.nw-empty a {
  color: var(--clr-accent);
  font-weight: 500;
}

/* Newsletter CTA */
.nw-cta-section {
  padding: 0 0 80px;
}
.nw-cta-card {
  background: linear-gradient(145deg, var(--clr-accent) 0%, #0D2240 100%);
  border-radius: var(--radius-card);
  padding: 36px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.nw-cta-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.nw-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  gap: 24px;
}
.nw-cta-inner h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.3px;
}
.nw-cta-inner p {
  font-size: 0.875rem;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}
.nw-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--clr-text);
  background: var(--clr-gold);
  padding: 12px 24px;
  border-radius: 24px;
  transition: all var(--transition);
  white-space: nowrap;
}
.nw-cta-btn:hover {
  background: #C4A85A;
  transform: scale(1.04);
}
.nw-cta-btn svg { width: 16px; height: 16px; }

/* ─── ARTICLE DETAIL PAGE ─── */

/* Breadcrumb */
.nw-breadcrumb-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  padding: 12px 0;
}
.nw-breadcrumb-line a {
  color: var(--clr-text-secondary);
  font-weight: 400;
  transition: color var(--transition);
}
.nw-breadcrumb-line a:hover {
  color: var(--clr-accent);
}
.nw-breadcrumb-line svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: .5;
}
.nw-breadcrumb-line span {
  color: var(--clr-text);
  font-weight: 500;
}

/* Article Hero / Header */
.nw-article-hero {
  padding: 100px 0 0;
  background: var(--clr-card-bg);
  border-bottom: none;
}
.nw-article-header {
  max-width: 720px;
}
/* Category badge inline with meta */
.nw-category-meta {
  font-size: 0.875rem;
  padding: 2px 10px;
  transition: background var(--transition);
}
.nw-category-meta:hover {
  background: rgba(27,58,107,.15);
}
.nw-article-header h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.15;
  color: var(--clr-text);
  margin-bottom: 16px;
}
.nw-article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  flex-wrap: wrap;
}
.nw-meta-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-border);
  flex-shrink: 0;
}

/* Article Body */
.nw-article-section {
  padding: 16px 0 48px;
  background: var(--clr-card-bg);
}
.nw-article-image {
  margin: 16px 0 0;
}
.nw-article-image img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.nw-article-body {
  padding: 40px 0;
}
.nw-article-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--clr-text);
}
.nw-article-content p {
  margin-bottom: 16px;
}
.nw-article-content p:last-child {
  margin-bottom: 0;
}
.nw-article-content a {
  color: var(--clr-accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Article Footer */
.nw-article-footer {
  max-width: 720px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--clr-border);
}
.nw-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-accent);
  padding: 10px 20px;
  border-radius: 24px;
  background: rgba(27,58,107,.06);
  transition: all var(--transition);
}
.nw-back-link:hover {
  background: rgba(27,58,107,.12);
  gap: 10px;
}
.nw-back-link svg { width: 16px; height: 16px; }

/* === Feature 36 / Feature 40 — the individual article fills the full content
   container width, matching the fundraising post page (.project-detail-wrap has
   no cap and fills .content). F40 widened this from the F36 1100px cap to remove
   the wasted side space the user reported. Scoped to .nw-article-* only; the
   shared .pg-prose rule (max-width 780px, defined later in this file) is left
   untouched — .nw-article-content is qualified with both classes here to win on
   specificity so only the news article widens, not other .pg-prose pages. === */
.nw-article-header,
.nw-breadcrumb-line,
.nw-article-image,
.nw-article-footer,
.nw-article-content.pg-prose {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Related Articles */
.nw-related-section {
  padding: 60px 0 64px;
  border-top: 1px solid var(--clr-border);
}

/* News Page Responsive */
@media (max-width: 900px) {
  .nw-grid { grid-template-columns: repeat(2, 1fr); }
  .nw-featured { grid-template-columns: 1fr; }
  .nw-featured-img { min-height: 200px; }
  .nw-featured-body { padding: 28px 28px 32px; }
}
@media (max-width: 640px) {
  .nw-pills { flex-wrap: wrap; }
  .nw-grid { grid-template-columns: 1fr; }
  .nw-featured-body { padding: 24px 22px 28px; }
  .nw-cta-inner { flex-direction: column; text-align: center; }
  /* Feature 40: drop the extra 22px horizontal padding on mobile so the article
     body sits at the standard .content gutter (24px) and aligns with the hero
     image + matches the fundraising post page — was inset ~46px otherwise. */
  .nw-article-body { padding: 28px 0; }
  .nw-article-header h1 { font-size: clamp(1.5rem, 6vw, 2.125rem); }
  .nw-pagination { flex-wrap: wrap; justify-content: center; }
  .nw-breadcrumb-line { font-size: 0.75rem; gap: 6px; }
  .nw-more-header .nw-pills { gap: 8px; }
}

/* ─── INNER PAGE (generic page hero + body) ─── */
.pg-hero {
  /* F35.3.6: tightened from 120px so heroes sit flush below the fixed nav */
  padding: 60px 0 40px;
  position: relative;
  isolation: isolate;
  background: transparent;
}
/* Rounded card tile behind every pg-hero header */
.pg-hero::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1200px;
  border-radius: var(--radius-card);
  background: var(--clr-card-bg);
  z-index: -1;
}
/* Feature 36 — the bespoke .nl-hero / .nl-hero-latest* newsletters hero was
   replaced by the shared .pg-hero--banner + .news-hero-promo* pattern
   (see views/newsletters.ejs), so its CSS is removed here. The unrelated
   .nl-hero-image rule (newsletter *detail* page) lives further down and is kept. */

/* Per-page colour fills — right-side accent on the hero card */
.pg-hero--gold::before     { background: linear-gradient(to right, var(--clr-card-bg) 0%, var(--clr-card-bg) 45%, #C4A85A 100%); }
.pg-hero--teal::before     { background: linear-gradient(to right, var(--clr-card-bg) 0%, var(--clr-card-bg) 45%, #2c6e6e 100%); }
.pg-hero--slate::before    { background: linear-gradient(to right, var(--clr-card-bg) 0%, var(--clr-card-bg) 45%, #3a3a50 100%); }
.pg-hero--dark::before     { background: linear-gradient(to right, var(--clr-card-bg) 0%, var(--clr-card-bg) 45%, #0D2240 100%); }
.pg-hero--warm::before     { background: linear-gradient(to right, var(--clr-card-bg) 0%, var(--clr-card-bg) 45%, #7a4a2a 100%); }
/* Parish page — custom hero photo fills the card (::before), with dark overlay for legibility */
.pg-hero--image::before {
  background:
    linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 50%, rgba(255,255,255,0) 85%),
    var(--hero-img) center/cover no-repeat;
}
/* Real-element alternative — used by static parish page templates (e.g. clergy) */
.pg-hero-photo {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1200px;
  border-radius: var(--radius-card);
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.pg-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.92) 50%, rgba(255,255,255,0) 85%);
  border-radius: inherit;
}
/* R2 — shared overlay class replaces repeated inline-style divs in 12 EJS templates */
.pg-hero-img-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to right,
    rgba(255,255,255,1)    0%,
    rgba(255,255,255,0.92) 50%,
    rgba(255,255,255,0)    85%);
  pointer-events: none;
  border-radius: inherit;
}

/* === Feature 35.3 — Split hero (text 1/3 + image 2/3) === */

/* Section modifier: disables the card ::before; image + text live inside .pg-hero-banner-card */
.pg-hero--banner {
  /* F35.3.6: tightened from 120px so banner heroes sit flush below the fixed nav */
  padding: 60px 0 40px;
}
.pg-hero--banner::before {
  display: none;
}

/* Outer card wrapper — one rounded silhouette around text + image */
.pg-hero-banner-card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: stretch;
  height: 360px;           /* forced — image's intrinsic ratio must not push the row taller */
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--clr-card-bg);
}

/* Left panel — text, 1/3 width, white background, vertically centred */
.pg-hero-banner-text {
  background: var(--clr-card-bg);
  /* F35.3.8: all padding halved again (32px→16px vertical, 9px→5px horizontal) */
  padding: 16px 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Right panel — image, 2/3 width, grey gradient when no image uploaded */
.pg-hero-banner-img {
  background: linear-gradient(135deg, #d4d8e1 0%, #bcc0cb 100%);
  overflow: hidden;
  position: relative;
}
.pg-hero-banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* F35.3.7 — soft white-to-transparent fade on the left edge of the image
   so the seam between the white text panel and the photo isn't a hard
   vertical line. Text panel on the left is untouched. */
.pg-hero-banner-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--clr-card-bg, #FAF7F2) 0%,
    rgba(250, 247, 242, 0) 28%
  );
  pointer-events: none;
  z-index: 1;
}

/* massTimes image-only variant — collapse to single column, hide empty text panel */
.pg-hero-banner-card--image-only {
  grid-template-columns: 1fr;
}
.pg-hero-banner-card--image-only .pg-hero-banner-text {
  display: none;
}

/* F35.3.6 — /news split-hero. Left 1/3 keeps the page heading.
   Right 2/3 has the latest-article photo as full-bleed background;
   a navy tile floats on the right with title / meta / excerpt / CTA. */

.news-hero-promo {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(145deg, var(--clr-accent, #1B3A6B) 0%, #0D2240 100%);
  transition: filter 0.2s ease;
}
.news-hero-promo:hover { filter: brightness(1.05); }
.news-hero-promo:hover .news-hero-promo-cta { transform: translateX(2px); }

/* Full-bleed photo behind the floating tile */
.news-hero-promo-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* F35.3.7 — soft white-to-transparent fade on the left edge of the news
   hero photo so the seam with the text panel isn't a hard line. The
   navy floating tile sits on the right (z-index: 1) and is unaffected. */
.news-hero-promo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--clr-card-bg, #FAF7F2) 0%,
    rgba(250, 247, 242, 0) 28%
  );
  pointer-events: none;
  z-index: 0;
}

/* Floating Marian Blue tile pinned to the right inside the 2/3 panel.
   F35.3.6 final: top + bottom offsets match the 24px right-edge offset
   so the tile has equal breathing room on all three exposed sides. */
.news-hero-promo-tile {
  position: absolute;
  top: 24px;
  bottom: 24px;
  right: 24px;
  width: 320px;
  max-width: calc(100% - 48px);
  background: linear-gradient(145deg, var(--clr-accent, #1B3A6B) 0%, #0D2240 100%);
  color: #fff;
  padding: 22px 24px;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  z-index: 1;
  overflow: hidden;
  /* Flex column lets the excerpt grow into all remaining vertical space */
  display: flex;
  flex-direction: column;
}
/* Subtle gold cross pattern on the tile */
.news-hero-promo-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
  border-radius: inherit;
}
.news-hero-promo-tile > * { position: relative; z-index: 1; }

.news-hero-promo-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--clr-gold, #D4B96A);
  margin-bottom: 10px;
  flex-shrink: 0;
}
/* F04.3 fix round: the title, date and CTA never shrink, so a long (up to
   3-line) title always shows in full inside the fixed-height tile; the excerpt
   (flex:1, below) absorbs the difference by displaying fewer lines. The tile
   height is unchanged. */
.news-hero-promo-tile h2 {
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}
.news-hero-promo-meta {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 10px;
  flex-shrink: 0;
}
.news-hero-promo-excerpt {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 14px;
  /* Truncate with an ellipsis on a whole line rather than a hard mid-line cut.
     4 lines fits even under the tallest (3-line) title so nothing overflows the
     fixed tile; the CTA is pinned to the bottom via margin-top:auto below. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Gold CTA — reads consistently across the news + newsletters heroes. F35.3.6 final. */
.news-hero-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clr-gold, #D4B96A);
  color: var(--clr-text, #1a1a1a);
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: background .2s, transform .15s;
  /* Don't let CTA shrink/grow — it stays anchored to the bottom of the tile.
     margin-top:auto pushes it to the bottom now the excerpt is line-clamped
     (no longer flex-growing to fill the gap). */
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: auto;
}
.news-hero-promo-cta:hover {
  background: #C4A85A;
  transform: scale(1.03);
}

/* Mobile (<=700 px): tile becomes full-width at the bottom of the panel */
@media (max-width: 700px) {
  .news-hero-promo-tile {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }
  .news-hero-promo {
    display: flex;
    flex-direction: column;
  }
  .news-hero-promo-bg-img {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    height: auto;
  }
  /* F35.3.8: remove seam-fade on mobile — stacked layout has no left seam */
  .news-hero-promo::after { display: none; }
}

/* Mobile: stack vertically (image above text); release fixed height */
@media (max-width: 700px) {
  .pg-hero-banner-card {
    grid-template-columns: 1fr;
    height: auto;
  }
  /* F35.3.8: all padding halved again (28px→14px vertical, 12px→6px horizontal) */
  .pg-hero-banner-text {
    padding: 14px 6px;
  }
  .pg-hero-banner-img {
    aspect-ratio: 16 / 9;
  }
  /* F35.3.8: remove seam-fade overlay on mobile (stacked layout, no seam) */
  .pg-hero-banner-img::before {
    display: none;
  }
}

/* Mass times: image handled by preceding pg-hero--banner section;
   suppress bg image + remove duplicate nav-clearance padding */
.mt-hero-wrap--no-bg::before {
  display: none;
}
.mt-hero-wrap--no-bg .mt-hero {
  padding-top: 0;
}

/* ================================================================ */

.pg-hero-inner {
  max-width: 100%;
  position: relative;
  z-index: 1;
  padding: 0 14px;
}
.pg-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.1;
  color: #000;
  margin-bottom: 16px;
}
.pg-hero-sub {
  font-size: 1.0625rem;
  color: #000;
  line-height: 1.6;
  font-weight: 300;
}

/* Page body section */
.pg-body {
  padding: 40px 0 80px;
}
.pg-body-narrow {
  /* F35.3.1: widened from 720px → 100% so body prose fills the page width */
  max-width: 100%;
}
/* DB-driven parish page prose */
.pg-prose { max-width: 780px; line-height: 1.8; color: var(--clr-text); }
.pg-prose--wide { max-width: 100%; }
.pg-prose h1, .pg-prose h2, .pg-prose h3, .pg-prose h4 { color: var(--primary-color); margin: 1.4em 0 0.5em; }
.pg-prose p { margin: 0 0 1em; }
.pg-prose ul, .pg-prose ol { margin: 0 0 1em 1.5em; }
.pg-prose li { margin-bottom: 0.3em; }
.pg-prose a { color: var(--primary-color); }
.pg-prose a:hover { text-decoration: underline; }
/* Feature 37: inline images in rich-text article bodies */
.pg-prose img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.2em 0; display: block; }
.pg-prose blockquote { border-left: 4px solid var(--primary-color); margin: 1.2em 0; padding: 12px 20px; background: #F0F4FA; color: #555; font-style: italic; }
.pg-prose table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 0.93rem; table-layout: fixed; word-break: break-word; }
.pg-prose th { background: var(--primary-color); color: #fff; text-align: left; padding: 8px 14px; font-weight: 600; }
.pg-prose td { border: 1px solid #e0e0e0; padding: 8px 14px; vertical-align: top; word-break: break-word; }
.pg-prose tr:nth-child(even) td { background: #F0F4FA; }
@media (max-width: 640px) {
  .pg-prose table { font-size: 0.82rem; }
  .pg-prose th, .pg-prose td { padding: 7px 8px; }
}
.pg-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 40px 44px;
}
.pg-card p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--clr-text);
  margin-bottom: 16px;
}
.pg-card p:last-child { margin-bottom: 0; }
.pg-card a {
  color: var(--clr-accent);
  font-weight: 500;
}
.pg-card a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pg-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.3px;
  margin-bottom: 12px;
  color: var(--clr-text);
}
.pg-card h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -.2px;
  margin-bottom: 8px;
  color: var(--clr-text-secondary);
}

/* Card grid for pages like sacraments, clergy */
.pg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
/* Auto-flowing variant — cards fill the row and wrap; blank/omitted cards
   leave no gap (used by the combined Fisher Hall Rates + Terms section). */
.pg-grid--flow {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pg-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pg-grid-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.pg-grid-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.pg-grid-card-accent {
  height: 6px;
}
.pg-accent-burgundy { background: linear-gradient(90deg, var(--clr-accent) 0%, var(--clr-accent-light) 100%); }
.pg-accent-gold { background: linear-gradient(90deg, #D4B96A 0%, #C4A85A 100%); }
.pg-accent-teal { background: linear-gradient(90deg, #2c6e6e 0%, #4a9e9e 100%); }
.pg-accent-slate { background: linear-gradient(90deg, #3a3a50 0%, #5a5a70 100%); }
.pg-accent-dark { background: linear-gradient(90deg, #0D2240 0%, #1B3A6B 100%); }
.pg-accent-warm { background: linear-gradient(90deg, #7a4a2a 0%, #a06830 100%); }

.pg-grid-card-body {
  padding: 24px 28px 28px;
}
.pg-grid-card-body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.3px;
  margin-bottom: 10px;
}
.pg-grid-card-body p {
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}
.pg-grid-card-body p:last-child { margin-bottom: 0; }
.pg-grid-card-body a {
  color: var(--clr-accent);
  font-weight: 500;
}
.pg-grid-card-body strong {
  font-weight: 600;
  color: var(--clr-text);
}

/* Clergy profile cards */
.clergy-photo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.clergy-photo {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid var(--clr-accent-light);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.clergy-name {
  text-align: center;
  font-size: 1.25rem !important;
  margin-bottom: 4px !important;
}
.clergy-credential {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 4px !important;
}
.clergy-role {
  text-align: center;
  font-size: 0.75rem;
  color: var(--clr-accent);
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  margin-bottom: 20px !important;
}
.clergy-divider {
  width: 40px;
  height: 2px;
  background: var(--clr-accent-light);
  border-radius: 2px;
  margin: 0 auto 18px;
}
.clergy-photo-placeholder {
  background: #e8edf4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clergy-cross {
  color: var(--primary-color);
  font-size: 0.9em;
  margin-right: 2px;
}

/* Contact CTA bar (reusable) */
.pg-cta-section {
  padding: 0 0 80px;
}
.pg-cta-card {
  background: linear-gradient(145deg, var(--clr-accent) 0%, #0D2240 100%);
  border-radius: var(--radius-card);
  padding: 36px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.pg-cta-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.pg-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  gap: 24px;
}
.pg-cta-inner h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.3px;
}
.pg-cta-inner p {
  font-size: 0.875rem;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}
.pg-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--clr-text);
  background: var(--clr-gold);
  padding: 12px 24px;
  border-radius: 24px;
  transition: all var(--transition);
  white-space: nowrap;
}
.pg-cta-btn:hover {
  background: #C4A85A;
  transform: scale(1.04);
}
.pg-cta-btn svg { width: 16px; height: 16px; }

/* ─── PRIVACY POLICY PAGE ─── */
.pg-hero-meta {
  font-size: 0.8125rem;
  color: #888;
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.pg-card h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0 0 16px;
  letter-spacing: -.3px;
}
.pg-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-heading);
  margin: 24px 0 10px;
}
.pg-card h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-heading);
  margin: 0 0 8px;
}
.pg-card ul {
  margin: 0 0 16px 20px;
  padding: 0;
}
.pg-card ul li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--clr-text);
  margin-bottom: 6px;
}
.pp-table {
  border-collapse: collapse;
  width: auto;
  margin: 16px 0;
  font-size: 0.875rem;
}
.pp-table--full {
  width: 100%;
}
.pp-table th {
  background: var(--primary-color);
  color: #fff;
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  white-space: nowrap;
}
.pp-table td, .pp-table tbody th {
  border: 1px solid #d2d8e8;
  padding: 10px 14px;
  vertical-align: top;
  line-height: 1.6;
}
.pp-table tbody th {
  background: #F0F4FA;
  font-weight: 600;
  white-space: nowrap;
  color: var(--clr-heading);
}
.pp-table tr:nth-child(even) td { background: #F0F4FA; }
.pp-highlight-box {
  background: #F0F4FA;
  border-left: 4px solid var(--primary-color);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin-top: 20px;
}
.pp-highlight-box p {
  font-size: 0.9375rem !important;
  margin-bottom: 8px !important;
}
.pp-highlight-box p:last-child { margin-bottom: 0 !important; }
.pp-footer-note {
  font-size: 0.8125rem !important;
  color: #888 !important;
  border-top: 1px solid #d2d8e8;
  padding-top: 16px;
  margin-top: 8px;
  line-height: 1.7 !important;
}
@media (max-width: 640px) {
  .pp-table--full { font-size: 0.8125rem; }
  .pp-table th, .pp-table td, .pp-table tbody th { padding: 8px 10px; }
}

/* ─── CONTACT PAGE ─── */

.ct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.ct-info-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 36px 40px;
}
.ct-info-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.3px;
  margin-bottom: 20px;
}
/* Admin-editable left column (rendered from pages.content via Quill). Mirrors the
   typography of the former hardcoded .ct-info-block markup (removed with the
   hardcoded card when the column became admin-editable). */
.ct-info-body h3 {
  margin-bottom: 0;
}
.ct-info-body h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--clr-text-secondary);
  margin: 20px 0 8px;
}
.ct-info-body p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--clr-text);
  margin-bottom: 6px;
}
.ct-info-body p:last-child { margin-bottom: 0; }
.ct-info-body a {
  color: var(--clr-accent);
  font-weight: 500;
}
/* Empty-content fallback: no left card — centre the lone form at a sensible width. */
.ct-grid--single {
  grid-template-columns: 1fr;
  max-width: 680px;
  margin: 0 auto;
}
.ct-alert {
  background: rgba(27,58,107,.06);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--clr-text);
}
.ct-form-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 36px 40px;
}
.ct-form-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.3px;
  margin-bottom: 24px;
}
.ct-form-group {
  margin-bottom: 20px;
}
.ct-form-group label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--clr-text);
  margin-bottom: 6px;
}
.ct-form-group input,
.ct-form-group select,
.ct-form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-family: var(--font);
  color: var(--clr-text);
  background: var(--clr-white);
  transition: border-color var(--transition);
  outline: none;
}
.ct-form-group input:focus,
.ct-form-group select:focus,
.ct-form-group textarea:focus {
  border-color: var(--clr-accent);
}
.ct-form-group textarea {
  resize: vertical;
  min-height: 120px;
}
.ct-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--clr-accent);
  padding: 14px 28px;
  border-radius: 24px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
}
.ct-submit-btn:hover {
  background: var(--clr-accent-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(27,58,107,.3);
}

/* ─── CONTACT — MAPS ─── */
.ct-maps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ct-map-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ct-map-label {
  padding: 8px 12px;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 0.9rem;
}
@media (max-width: 900px) {
  .ct-maps-grid { grid-template-columns: 1fr; }
}

/* ─── NEWSLETTERS PAGE ─── */
.nl-subscribe-card {
  background: linear-gradient(145deg, var(--clr-accent) 0%, #0D2240 100%);
  border-radius: var(--radius-card);
  padding: 36px 40px 28px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 48px;
  max-width: 600px;
}
.nl-subscribe-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.nl-subscribe-card::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  pointer-events: none;
}
.nl-subscribe-inner {
  position: relative;
  z-index: 1;
}
.nl-subscribe-inner h3 {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -.4px;
  margin-bottom: 10px;
}
.nl-subscribe-inner p:not(.nl-gdpr) {
  font-size: 0.8125rem;
  color: rgba(255,255,255,.8);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 520px;
}
.nl-input-wrap {
  display: flex;
  gap: 10px;
}
.nl-input-wrap input {
  flex: 1;
  padding: 14px 20px;
  border-radius: 28px;
  border: none;
  font-size: 0.9375rem;
  font-family: var(--font);
  background: rgba(255,255,255,.14);
  color: #fff;
  outline: none;
  transition: background var(--transition);
}
.nl-input-wrap input::placeholder { color: rgba(255,255,255,.5); }
.nl-input-wrap input:focus { background: rgba(255,255,255,.2); outline: 2px solid rgba(255,255,255,.3); }
.nl-input-wrap button {
  padding: 14px 26px;
  border-radius: 28px;
  border: none;
  background: var(--clr-gold);
  color: var(--clr-text);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition), transform .15s;
  white-space: nowrap;
}
.nl-input-wrap button:hover { background: #C4A85A; transform: scale(1.04); }

/* Progressive-reveal subscribe form */

/* Name reveal container — collapses to zero height, fades in on reveal */
.nl-name-reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
  margin-top: 0;
}
.nl-name-reveal.nl-revealed {
  max-height: 200px;
  opacity: 1;
  margin-top: 10px;
}

.nl-name-wrap {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  overflow: hidden;
  max-width: 100%;
}
.nl-name-field {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nl-name-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  letter-spacing: .2px;
}
.nl-optional {
  font-weight: 400;
  font-size: 0.75rem;
  color: rgba(255,255,255,.55);
}
.nl-name-field input[type="text"] {
  background: rgba(255,255,255,.14);
  border: none;
  border-radius: 28px;
  color: #fff;
  font-size: 0.9375rem;
  font-family: var(--font);
  padding: 14px 20px;
  transition: background var(--transition);
  width: 100%;
  box-sizing: border-box;
  outline: none;
}
.nl-name-field input[type="text"]::placeholder { color: rgba(255,255,255,.5); }
.nl-name-field input[type="text"]:focus,
.nl-name-field input[type="text"]:focus-visible {
  background: rgba(255,255,255,.2);
  outline: none;
}
.nl-name-error {
  font-size: 0.8125rem;
  color: #ffcdd2;
  min-height: 1.25em;
  margin-bottom: 2px;
}
.nl-privacy-error {
  font-size: 0.8125rem;
  color: #ffcdd2;
}
.nl-privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8125rem;
  color: rgba(255,255,255,.75);
  margin-top: 10px;
  cursor: pointer;
  line-height: 1.5;
}
.nl-privacy-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--clr-gold);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.nl-privacy-label a { color: #fff; text-decoration: underline; }
.nl-privacy-label a:hover { color: var(--clr-gold); }

/* Mobile: stack name fields vertically */
@media (max-width: 480px) {
  .nl-name-wrap { flex-direction: column; gap: 10px; }
  .nl-name-reveal.nl-revealed { max-height: 320px; }
}

.nl-gdpr {
  font-size: 0.8125rem;
  color: rgba(255,255,255,.65);
  margin-top: 14px;
  line-height: 1.5;
}

/* Subscribe button — full-width gold pill below name fields */
.nl-submit-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 14px 26px;
  background: var(--clr-gold);
  color: #fff;
  border: none;
  border-radius: 28px;
  font-size: 1rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.nl-submit-btn:hover { background: #c4aa5a; transform: translateY(-1px); }
.nl-submit-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Newsletter archive table */
.nl-archive-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.nl-table {
  width: 100%;
  border-collapse: collapse;
}
.nl-table th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--clr-text-secondary);
  text-align: left;
  padding: 16px 24px;
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-bg);
}
.nl-table td {
  font-size: 0.9375rem;
  padding: 16px 24px;
  border-bottom: 1px solid var(--clr-border);
  color: var(--clr-text);
}
.nl-table tr:last-child td { border-bottom: none; }
.nl-table tr:hover td { background: #fafafa; }
.nl-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--clr-accent);
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(27,58,107,.06);
  transition: all var(--transition);
}
.nl-download-btn:hover {
  background: rgba(27,58,107,.12);
}
.nl-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--clr-text-secondary);
  font-size: 0.9375rem;
}

/* ─── 404 / ERROR PAGES ─── */
.err-section {
  padding: 120px 0 80px;
  text-align: center;
  background: var(--clr-bg);
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.err-inner {
  max-width: 480px;
  margin: 0 auto;
}
.err-code {
  font-size: clamp(4.5rem, 12vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -4px;
  color: var(--clr-accent);
  line-height: 1;
  margin-bottom: 16px;
}
.err-inner h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.err-inner p {
  font-size: 1rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}
.err-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.err-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 24px;
  transition: all var(--transition);
}
.err-btn-primary {
  color: #fff;
  background: var(--clr-accent);
}
.err-btn-primary:hover {
  background: var(--clr-accent-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(27,58,107,.3);
}
.err-btn-outline {
  color: var(--clr-accent);
  background: rgba(27,58,107,.06);
}
.err-btn-outline:hover {
  background: rgba(27,58,107,.12);
}

/* ─── INNER PAGE RESPONSIVE ─── */
@media (max-width: 900px) {
  .pg-grid { grid-template-columns: 1fr; }
  .pg-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .ct-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pg-hero { padding: 60px 0 32px; }
  .pg-card { padding: 28px 22px; }
  .pg-grid-3 { grid-template-columns: 1fr; }
  .pg-cta-inner { flex-direction: column; text-align: center; }
  .ct-info-card, .ct-form-card { padding: 28px 22px; }
  .nl-subscribe-card { padding: 28px 22px; }
  .nl-input-wrap { flex-direction: column; }
  .nl-table th, .nl-table td { padding: 12px 16px; }
  .err-section { padding: 100px 0 60px; }
}

/* ─── SKIP TO CONTENT (WCAG) ─── */
.skip-link {
  display: none;
}
.skip-link:focus {
  display: block;
  position: fixed;
  top: 0;
  left: 16px;
  z-index: 9999;
  background: var(--clr-accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ─── FOCUS STYLES (WCAG) ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}
.nav-links a:focus-visible {
  outline-offset: 4px;
  border-radius: 4px;
}
.dropdown-menu a:focus-visible {
  outline-offset: -2px;
}

/* ─── REVEAL ANIMATION ─── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── NEWSLETTER DETAIL PAGE ─── */
.pg-hero.nl-detail-hero {
  padding-bottom: 20px;
}
.pg-body.nl-detail-section {
  padding-top: 20px;
}
.nl-detail-body {
  max-width: none;
  margin: 0;
  padding: 0 0 64px;
}
.nl-detail-content {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--clr-text);
  width: 100%;
  display: block;
}
/* Subscribe form inline status messages */
.nl-subscribe-status {
  display: block;
  min-height: 18px;
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 500;
}
.nl-status-success { color: #d4f0e4; }
.nl-status-error   { color: #ffd5d5; }

/* ─── FEATURED NEWSLETTER HERO ─── */
/* Matches nl-subscribe-card: constrained to .content width, rounded corners */
.nl-featured {
  padding: 0;
}
.nl-featured-inner {
  background: linear-gradient(145deg, var(--clr-accent) 0%, #0D2240 100%);
  border-radius: var(--radius-card);
  padding: 36px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
  max-width: none;
}
.nl-featured-inner::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}
.nl-featured-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.nl-featured-title {
  font-size: clamp(1.125rem, 2.5vw, 1.625rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}
.nl-featured-meta {
  font-size: 0.8125rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.nl-featured-excerpt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255,255,255,.8);
  margin: 0 0 24px;
  max-width: 560px;
  position: relative;
  z-index: 1;
}
.nl-featured-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clr-gold);
  color: var(--clr-text);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 24px;
  text-decoration: none;
  transition: background .2s, transform .15s;
  position: relative;
  z-index: 1;
}
.nl-featured-btn:hover { background: #C4A85A; transform: scale(1.04); }

/* ─── RECENT NEWSLETTER CARDS ─── */
.nl-cards-section { padding: 56px 0 16px; }
.nl-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.nl-card {
  background: var(--clr-card-bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.nl-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.nl-card-header {
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.nl-card-header--burgundy { background: var(--clr-accent); }
.nl-card-header--gold     { background: #B89840; }
.nl-card-header--dark     { background: #2d2d2d; }
.nl-card-meta {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.75);
}
.nl-card-icon {
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nl-card-body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nl-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-text);
  margin: 0;
  line-height: 1.4;
}
.nl-card-excerpt {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.nl-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-accent);
  text-decoration: none;
  margin-top: 4px;
}
.nl-card-link:hover { text-decoration: underline; }
.nl-card-na {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  margin-top: 4px;
}

/* ─── UNSUBSCRIBE TOGGLE ─── */
.nl-unsub-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  color: rgba(255,255,255,.7);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: inherit;
  line-height: inherit;
}
.nl-unsub-link:hover { color: #fff; }
.nl-unsub-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 2px;
}
.nl-unsubscribe-status {
  display: block;
  min-height: 18px;
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Responsive — cards stack on mobile */
@media (max-width: 768px) {
  .nl-cards-grid { grid-template-columns: 1fr; }
  .nl-featured { padding: 0; }
  .nl-subscribe-card { max-width: 100%; }
}
@media (max-width: 480px) {
  .nl-featured-btn { width: 100%; justify-content: center; }
}

/* ─── REDUCED MOTION (WCAG) ─── */
@media (prefers-reduced-motion: reduce) {
  *:not(.rdg-skel-line), *:not(.rdg-skel-line)::before, *:not(.rdg-skel-line)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ─── FISHER HALL PAGE ─── */

/* Info strip */
/* Fisher Hall page — tighter vertical rhythm between the content sections.
   The whole page shares one background, so the default .pg-body 40/80 padding
   (plus the info-strip's own margin) left a ~168px dead gap between sections. */
.fh-body {
  padding-top: 32px;
  padding-bottom: 32px;
}
.fh-info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.fh-info-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.fh-info-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Coloured cap — image + colour overlay at 50% opacity */
.fh-info-card-cap {
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
/* Subtle vignette at the bottom for content legibility */
.fh-info-card-cap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.18) 100%);
  pointer-events: none;
  z-index: 0;
}
/* Decorative translucent circle — top-right */
.fh-info-card-cap::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  pointer-events: none;
  z-index: 0;
}
/* Keep icon and title above pseudo-elements */
.fh-info-card-icon,
.fh-info-card-cap h3 { position: relative; z-index: 1; }

/*
 * Cap colour variants — 50% opacity gradient layered over a sample photo.
 * TODO: replace picsum placeholder URLs with real Fisher Hall / parish photos.
 */
.fh-cap-burgundy {
  background: linear-gradient(135deg, rgba(27,58,107,.85) 0%, rgba(13,34,64,.85) 100%);
}
.fh-cap-teal {
  background: linear-gradient(135deg, rgba(44,110,110,.85) 0%, rgba(21,61,61,.85) 100%);
}
.fh-cap-gold {
  background: linear-gradient(135deg, rgba(122,80,16,.85) 0%, rgba(168,133,48,.85) 100%);
}

/* Icon inside the cap — white on frosted-glass pill */
.fh-info-card-icon {
  width: 52px; height: 52px;
  background: rgba(255,255,255,.22);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.fh-info-card-icon svg { width: 26px; height: 26px; }

/* Title inside the cap */
.fh-info-card-cap h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.3px;
  color: #fff;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* White content body below the cap */
.fh-info-card-body {
  padding: 20px 24px 26px;
  flex: 1;
}
.fh-info-card-body p { font-size: 0.8125rem; color: var(--clr-text-secondary); line-height: 1.6; margin: 0; }
.fh-info-list    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fh-info-list li { font-size: 0.8125rem; color: var(--clr-text-secondary); display: flex; align-items: center; gap: 10px; }
.fh-info-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--clr-accent); flex-shrink: 0; }

/* Pricing table */
.fh-pricing-table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.fh-pricing-table tr { border-bottom: 1px solid var(--clr-border); }
.fh-pricing-table tr:last-child { border-bottom: none; }
.fh-pricing-table td { padding: 12px 0; font-size: 0.875rem; color: var(--clr-text); }
.fh-pricing-table td:last-child { text-align: right; font-weight: 600; }
.fh-pricing-note { font-size: 0.8125rem; color: var(--clr-text-secondary); margin-top: 12px; }

/* Calendar navigation */
.fh-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.fh-cal-month-title { font-size: 1.1rem; font-weight: 700; color: var(--clr-text); letter-spacing: -.3px; margin: 0; }
.fh-cal-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--clr-card-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  font-size: 0.875rem; font-weight: 500; color: var(--clr-text); text-decoration: none;
  transition: all var(--transition);
}
.fh-cal-nav-btn:hover { border-color: var(--clr-accent); color: var(--clr-accent); }
.fh-cal-nav-btn:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }

/* Calendar grid */
.fh-cal-wrap {
  border: 1px solid var(--clr-border); border-radius: var(--radius-card);
  overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-card);
}
.fh-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.fh-cal-dow {
  background: var(--clr-accent); color: #fff; text-align: center;
  padding: 10px 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.fh-cal-grid > .fh-cal-dow:last-child { border-right: none; }
.fh-cal-day {
  min-height: 96px; border-right: 1px solid #ececec; border-bottom: 1px solid #ececec;
  padding: 8px; background: var(--clr-card-bg); box-sizing: border-box;
  cursor: pointer; transition: background var(--transition); position: relative;
}
.fh-cal-day:nth-child(7n) { border-right: none; }
.fh-cal-day:hover { background: #EFF4FB; }
.fh-cal-day:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: -2px; }
.fh-cal-day-empty {
  min-height: 96px; border-right: 1px solid #ececec; border-bottom: 1px solid #ececec;
  background: var(--clr-bg);
}
.fh-cal-day-today { background: #EFF4FB; }
.fh-cal-day-today .fh-cal-day-num {
  background: var(--clr-accent); color: #fff; border-radius: 50%;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.fh-cal-day-past { opacity: 0.45; cursor: default; }
.fh-cal-day-past:hover { background: var(--clr-card-bg); }
.fh-cal-day-num { font-size: 0.75rem; font-weight: 600; color: var(--clr-text-secondary); display: block; margin-bottom: 5px; }
.fh-cal-day-avail-hint {
  font-size: 0.625rem; color: #16a34a; font-weight: 600;
  opacity: 0; transition: opacity .2s; letter-spacing: .3px; display: block;
}
.fh-cal-day:not(.fh-cal-day-past):hover .fh-cal-day-avail-hint { opacity: 1; }

/* Booking chips */
.fh-chip {
  display: block; font-size: 0.6875rem; padding: 2px 6px; border-radius: 4px;
  margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5;
}
.fh-chip-public  { background: #d4edda; color: #155724; border-left: 3px solid #28a745; }
.fh-chip-private { background: #e9ecef; color: #495057; border-left: 3px solid #6c757d; }

/* Calendar legend */
.fh-legend { display: flex; gap: 20px; margin-bottom: 40px; font-size: 0.8125rem; color: var(--clr-text-secondary); flex-wrap: wrap; }
.fh-legend-item { display: flex; align-items: center; gap: 8px; }
.fh-legend-dot { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.fh-legend-dot--public  { background: #d4edda; border-left: 3px solid #28a745; }
.fh-legend-dot--private { background: #e9ecef; border-left: 3px solid #6c757d; }
.fh-legend-dot--avail   { background: var(--clr-card-bg); border: 1px solid var(--clr-border); }

/* Slide-in panel overlay */
.fh-panel-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; }
.fh-panel-overlay.fh-open { display: block; }

/* Slide-in panel */
.fh-panel {
  position: fixed; top: 0; right: -520px; width: 480px; max-width: 100vw; height: 100vh;
  background: var(--clr-card-bg); box-shadow: -4px 0 32px rgba(0,0,0,0.14);
  z-index: 201; transition: right .28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; display: flex; flex-direction: column;
}
.fh-panel.fh-open { right: 0; }
.fh-panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 18px;
  background: linear-gradient(145deg, var(--clr-accent) 0%, #0D2240 100%);
  color: #fff; flex-shrink: 0;
}
.fh-panel-date { font-size: 0.6875rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
.fh-panel-head h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.3px; margin: 0; color: #fff; }
.fh-panel-close {
  background: rgba(255,255,255,.15); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%; font-size: 1.25rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  transition: background .2s; flex-shrink: 0;
}
.fh-panel-close:hover { background: rgba(255,255,255,.28); }
.fh-panel-close:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.fh-panel-body { padding: 24px; flex: 1; }

/* Existing bookings list in panel */
.fh-section-title {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--clr-text-secondary); margin-bottom: 12px;
}
.fh-booking-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--clr-bg); border-radius: var(--radius-sm); margin-bottom: 8px; }
.fh-booking-item-time { font-size: 0.875rem; font-weight: 700; color: var(--clr-text); white-space: nowrap; flex-shrink: 0; padding-top: 2px; }
.fh-booking-item-info { flex: 1; min-width: 0; }
.fh-booking-item-title     { font-size: 0.8125rem; font-weight: 600; color: var(--clr-text); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-booking-item-organiser { font-size: 0.75rem; color: var(--clr-text-secondary); display: block; margin-top: 1px; }
.fh-booking-item-private   { font-size: 0.8125rem; font-weight: 600; color: var(--clr-text-secondary); display: block; }
.fh-booking-item-manage    { font-size: 0.75rem; color: var(--clr-accent); display: block; margin-top: 5px; text-decoration: underline; }
.fh-booking-badge {
  font-size: 0.625rem; padding: 2px 6px; border-radius: 4px; font-weight: 600;
  margin-top: 4px; display: inline-block; letter-spacing: .3px; text-transform: uppercase;
}
.fh-badge-public  { background: #d4edda; color: #155724; }
.fh-badge-private { background: #e9ecef; color: #495057; }

/* Availability notice */
.fh-avail-notice {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius-sm); margin-bottom: 20px;
}
.fh-avail-notice svg { width: 20px; height: 20px; color: #16a34a; flex-shrink: 0; }
.fh-avail-notice p { font-size: 0.8125rem; color: #166534; margin: 0; font-weight: 500; }
.fh-past-notice { padding: 24px 0; text-align: center; color: var(--clr-text-secondary); font-size: 0.875rem; }

/* Panel divider */
.fh-panel-divider { border: none; border-top: 1px solid var(--clr-border); margin: 20px 0; }

/* Booking form */
.fh-form-title { font-size: 1rem; font-weight: 700; letter-spacing: -.3px; margin-bottom: 16px; }
.fh-field { margin-bottom: 14px; }
.fh-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }
.fh-field-row .fh-field { margin-bottom: 14px; }
.fh-label { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--clr-text-secondary); margin-bottom: 5px; }
.fh-input {
  width: 100%; padding: 9px 12px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm);
  font-size: 0.875rem; font-family: var(--font); background: var(--clr-card-bg); color: var(--clr-text);
  box-sizing: border-box; transition: border-color .2s;
}
.fh-input:focus { outline: none; border-color: var(--clr-accent); box-shadow: 0 0 0 3px rgba(27,58,107,0.1); }
textarea.fh-input { resize: vertical; min-height: 72px; }

/* Time pair widget */
.fh-time-wrap { display: flex; align-items: center; gap: 6px; }
.fh-time-wrap .fh-input { flex: 1; min-width: 0; }
.fh-time-sep { font-weight: 700; font-size: 1.1rem; color: var(--clr-text); flex-shrink: 0; }

/* Price calculator */
.fh-price-summary { background: var(--clr-bg); border-radius: var(--radius-sm); padding: 16px; margin: 16px 0 20px; }
.fh-price-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8125rem; color: var(--clr-text-secondary); margin-bottom: 6px; }
.fh-price-row:last-child { margin-bottom: 0; }
.fh-price-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.9375rem; font-weight: 700; color: var(--clr-text); padding-top: 10px; border-top: 1px solid var(--clr-border); margin-top: 10px; }

/* Checkbox row */
.fh-checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.fh-checkbox-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--clr-accent); cursor: pointer; }
.fh-checkbox-row label { font-size: 0.8125rem; color: var(--clr-text-secondary); line-height: 1.5; cursor: pointer; }
.fh-checkbox-row a { color: var(--clr-accent); text-decoration: underline; }

/* Book button */
.fh-btn-book {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-light) 100%);
  color: #fff; border: none; border-radius: var(--radius-sm);
  font-size: 0.9375rem; font-weight: 700; letter-spacing: -.2px; cursor: pointer; transition: all var(--transition);
}
.fh-btn-book:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(27,58,107,0.35); }
.fh-btn-book:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }
.fh-btn-book:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.fh-btn-book svg { width: 18px; height: 18px; }
.fh-payment-note { text-align: center; font-size: 0.75rem; color: var(--clr-text-secondary); margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.fh-payment-note svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Homepage Fisher Hall panel */
.fh-home-section { padding: 0 0 60px; }
.fh-home-panel { background: var(--clr-card-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.fh-home-panel-header { padding: 24px 28px 20px; border-bottom: 1px solid var(--clr-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fh-home-panel-header h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.3px; }
.fh-home-panel-header p { font-size: 0.8125rem; color: var(--clr-text-secondary); margin-top: 4px; }
.fh-home-book-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: var(--clr-accent); color: #fff; border-radius: var(--radius-sm);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap; flex-shrink: 0;
  transition: background var(--transition);
}
.fh-home-book-btn:hover { background: var(--clr-accent-light); }
.fh-booking-row {
  display: flex; align-items: flex-start; gap: 16px; padding: 14px 28px;
  border-bottom: 1px solid var(--clr-border); transition: background var(--transition);
}
.fh-booking-row:last-child { border-bottom: none; }
.fh-booking-date-box { flex-shrink: 0; width: 52px; text-align: center; background: var(--clr-bg); border-radius: 10px; padding: 8px 4px; }
.fh-booking-date-box .month { font-size: 0.625rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--clr-accent); }
.fh-booking-date-box .day { font-size: 1.375rem; font-weight: 700; line-height: 1.2; color: var(--clr-text); }
.fh-booking-info h4 { font-size: 0.875rem; font-weight: 600; letter-spacing: -.2px; }
.fh-booking-info p { font-size: 0.8125rem; color: var(--clr-text-secondary); margin-top: 3px; }
.fh-booking-time { font-size: 0.75rem; color: var(--clr-accent); margin-top: 5px; font-weight: 500; }

/* Alert utility classes — used on Fisher Hall, contact, and other public pages */
.alert {
  border-radius: 8px; padding: 14px 18px; margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.6;
}
.alert p { margin: 0; }
.alert p + p { margin-top: .5rem; }
.alert ul { margin: .4rem 0 0 1.2rem; padding: 0; }
.alert-info    { background: #e0f2fe; border-left: 4px solid #0ea5e9; color: #0c4a6e; }
.alert-success { background: #d4edda; border-left: 4px solid #28a745; color: #155724; }
.alert-error   { background: #f8d7da; border-left: 4px solid #dc3545; color: #721c24; }

/* Booking status badges — used on fisherHallBooking.ejs */
.fh-booking-badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.fh-badge-confirmed { background: #d4edda; color: #155724; }
.fh-badge-pending   { background: #fff3cd; color: #856404; }
.fh-badge-cancelled { background: #f8d7da; color: #721c24; }

/* Booking summary table — used on fisherHallBooking.ejs */
.fh-summary-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.fh-summary-table th { text-align: left; color: var(--clr-text-secondary); font-weight: 600; padding: 8px 0; width: 45%; border-bottom: 1px solid var(--clr-border); vertical-align: top; }
.fh-summary-table td { padding: 8px 0; border-bottom: 1px solid var(--clr-border); vertical-align: top; }
.fh-summary-table tr:last-child th,
.fh-summary-table tr:last-child td { border-bottom: none; }
.fh-summary-table code { font-family: monospace; font-size: .9em; background: var(--clr-bg); padding: 2px 6px; border-radius: 4px; }

/* Fisher Hall responsive */
@media (max-width: 900px) {
  .fh-info-strip { grid-template-columns: 1fr 1fr; }
  .fh-field-row { grid-template-columns: 1fr; }
  .fh-cal-day { min-height: 72px; }
  .fh-panel { width: 100%; right: -100vw; }
  .fh-home-panel-header { flex-direction: column; }
}
@media (max-width: 640px) {
  .fh-info-strip { grid-template-columns: 1fr; }
  /* Allow columns to shrink below their content min-width so all 7 fit */
  .fh-cal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .fh-cal-dow { font-size: 0.625rem; padding: 7px 2px; }
  /* Chips become small coloured dots on mobile */
  .fh-chip {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    padding: 0; margin: 2px 2px 0 0;
    font-size: 0; line-height: 0;
    border-left: none;
    vertical-align: top;
    overflow: hidden;
    white-space: normal;
  }
  .fh-chip-public  { background: #28a745; }
  .fh-chip-private { background: #6c757d; }
  .fh-cal-day { height: 54px; min-height: 0; padding: 4px; overflow: hidden; border-right-color: #d8d8d8; border-bottom-color: #d8d8d8; }
  .fh-cal-day-empty { height: 54px; min-height: 0; border-right-color: #d8d8d8; border-bottom-color: #d8d8d8; }
  /* Hide hover hint on mobile — frees space for dots and removes desktop-only affordance */
  .fh-cal-day-avail-hint { display: none; }
  .fh-cal-day-num { font-size: 0.6875rem; }
  .fh-legend { flex-wrap: wrap; gap: 10px; }
  .fh-booking-row { padding: 12px 20px; }
}
@media (max-width: 420px) {
  /* On very small phones, shrink to single initial (M T W T F S S) */
  .fh-cal-dow { font-size: 0; padding: 9px 1px; }
  .fh-cal-dow::first-letter { font-size: 0.5625rem; font-weight: 700; }
  .fh-cal-day, .fh-cal-day-empty { height: 46px; min-height: 0; }
  .fh-cal-day { padding: 3px 2px; overflow: hidden; }
  .fh-cal-day-num { font-size: 0.625rem; }
}

/* ════════════════════════════════════════════
   ─── ADMIN ───
   All admin-interface styles live here.
   Prefix: adm-*
   ════════════════════════════════════════════ */

/* Layout */
.adm-wrap { display: flex; min-height: 100vh; flex-direction: column; }
.adm-header { background: var(--primary-color); color: #fff; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
.adm-header-brand { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: -.2px; }
.adm-header-right { display: flex; align-items: center; gap: 16px; font-size: 0.88rem; }
.adm-nav { position: static; background: #0D2240; padding: 8px 24px; display: flex; gap: 4px; flex-wrap: wrap; border-bottom: none; }
.adm-nav a { color: #ccc; text-decoration: none; padding: 6px 12px; border-radius: 5px; font-size: 0.82rem; transition: background 0.2s, color 0.2s; }
.adm-nav a:hover,
.adm-nav a.active { background: var(--primary-color); color: #fff; }
/* Feature 38 — pending-review count badge on the Approvals nav link */
.adm-nav-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; background: var(--secondary-color, #C9A54E); color: #0D2240; border-radius: 999px; font-size: 0.72rem; font-weight: 800; text-align: center; line-height: 18px; }

/* Admin nav dropdown */
.adm-nav-dropdown { position: relative; display: flex; align-items: center; }
.adm-nav-dropdown-btn {
  background: none; border: none; cursor: pointer;
  color: #ccc; padding: 6px 12px; border-radius: 5px;
  font-size: 0.82rem; font-family: inherit;
  transition: background 0.2s, color 0.2s;
}
.adm-nav-dropdown-btn:hover,
.adm-nav-dropdown.active .adm-nav-dropdown-btn { background: var(--primary-color); color: #fff; }
.adm-nav-dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0;
  background: #0D2240; border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px; padding: 4px 0;
  min-width: 150px; z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.adm-nav-dropdown-menu a {
  display: block; padding: 7px 14px;
  border-radius: 0; white-space: nowrap;
}
.adm-nav-dropdown:hover .adm-nav-dropdown-menu,
.adm-nav-dropdown.open .adm-nav-dropdown-menu { display: block; }
.adm-content { flex: 1; padding: 32px 24px; max-width: 1100px; margin: 0 auto; width: 100%; }

/* Buttons */
.adm-btn { display: inline-block; background: var(--primary-color); color: #fff; padding: 8px 18px; border-radius: 6px; font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: background .2s; }
.adm-btn:hover { background: #152E56; }
.adm-btn-outline { background: none; border: 1px solid var(--primary-color); color: var(--primary-color); padding: 7px 16px; border-radius: 6px; font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer; display: inline-block; }
.adm-btn-outline:hover { background: rgba(27,58,107,.06); }
.adm-btn-outline-sm { background: none; border: 1px solid rgba(255,255,255,.6); color: #fff; padding: 5px 12px; border-radius: 5px; font-size: 0.82rem; text-decoration: none; }
.adm-btn-outline-sm:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.adm-btn-danger { background: #9b1c1c; color: #fff; padding: 6px 14px; border-radius: 5px; font-size: 0.82rem; border: none; cursor: pointer; }
.adm-btn-danger:hover { background: #7b1515; }
.adm-btn-success { background: #1a6e3d; color: #fff; padding: 7px 16px; border-radius: 6px; font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer; text-decoration: none; display: inline-block; }
.adm-btn-success:hover { background: #155733; }

/* Cards */
.adm-card { background: #fff; border: 1px solid var(--clr-border); border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.adm-card-body { padding: 20px 24px; }

/* Tables */
.adm-table-wrap { border: 1px solid var(--clr-border); border-radius: 10px; overflow: hidden; overflow-x: auto; }
table.adm-table { width: 100%; border-collapse: collapse; }
table.adm-table th { background: #EFF4FB; text-align: left; padding: 10px 14px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary-color); border-bottom: 2px solid #c8d8f0; font-weight: 700; white-space: nowrap; }
table.adm-table td { padding: 10px 14px; border-bottom: 1px solid #f5f5f5; font-size: 0.875rem; vertical-align: middle; }
table.adm-table tr:last-child td { border-bottom: none; }
table.adm-table tr:hover td { background: #fafafa; }

/* Forms */
.adm-form-section { background: #fff; border: 1px solid var(--clr-border); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.adm-form-section h3 { margin: 0 0 20px; font-size: 1rem; color: var(--primary-color); font-weight: 700; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: #444; margin-bottom: 5px; }
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group select,
.form-group textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--clr-border); border-radius: 6px; font-size: 0.875rem; font-family: var(--font); transition: border-color .2s, box-shadow .2s; box-sizing: border-box; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(27,58,107,.1); outline: none; }

/* Badges */
.adm-badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 0.73rem; font-weight: 600; white-space: nowrap; }
.adm-badge-green  { background: #d4edda; color: #155724; }
.adm-badge-amber  { background: #fff3cd; color: #856404; }
.adm-badge-red    { background: #fde8e8; color: #9b1c1c; }
.adm-badge-blue   { background: #cce5f8; color: #0a5a8e; }
.adm-badge-purple { background: #ede9fe; color: #5b21b6; }
.adm-badge-grey   { background: #f0f0f0; color: #555; }
.adm-badge-brand  { background: rgba(27,58,107,.1); color: var(--primary-color); }

/* Flash messages */
.flash-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.875rem; }
.flash-error   { background: #fde8e8; color: #9b1c1c; border: 1px solid #f5c6cb; border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.875rem; }

/* Feature 38 — "resume your draft/returned submission" banner in the editors */
.draft-resume { border-radius: 8px; padding: 14px 18px; margin-bottom: 22px; border: 1px solid; }
.draft-resume-head { margin: 0; font-weight: 700; font-size: 0.95rem; }
.draft-resume-body { margin: 6px 0 0; font-size: 0.86rem; opacity: 0.9; }
.draft-resume-note { margin: 8px 0; padding: 10px 12px; background: rgba(255,255,255,0.6); border-radius: 6px; font-size: 0.9rem; white-space: pre-wrap; }
.draft-resume--rejected { background: #fdf2f2; border-color: #e6cccc; color: #8a2b2b; }
.draft-resume--pending  { background: #fdf6ec; border-color: #ecd9b0; color: #8a6d1b; }
.draft-resume--draft    { background: #eef2f8; border-color: #d3dced; color: #2d4a6e; }

/* Empty state */
.adm-empty { text-align: center; padding: 48px 20px; color: #999; font-size: 0.9rem; }

/* Page headings */
.adm-page-title    { color: var(--primary-color); margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; }
.adm-page-subtitle { color: #777; margin: 0 0 24px; font-size: 0.875rem; }

/* Admin responsive */
@media (max-width: 768px) {
  .adm-content { padding: 24px 16px; }
  .adm-header  { padding: 12px 16px; }
  .adm-nav     { padding: 6px 16px; }
  .adm-header-right span { display: none; }
}
@media (max-width: 480px) {
  .adm-header-brand { font-size: 1rem; }
  .adm-nav a { padding: 5px 9px; font-size: 0.78rem; }
}

/* Action button rows — shared across all CRUD views */
.action-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-action  { border: none; padding: 5px 10px; border-radius: 4px; font-size: 0.8rem; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.btn-edit    { background: #e8f4fd; color: #0a5a8e; }
.btn-edit:hover    { background: #cce5f8; }
.btn-toggle-on     { background: #fff3cd; color: #856404; }
.btn-toggle-on:hover  { background: #ffe69c; }
.btn-toggle-off    { background: #d4edda; color: #155724; }
.btn-toggle-off:hover { background: #b8dfc5; }

/* Profile — card heading + detail table */
.adm-card-title { color: var(--primary-color); font-size: 1rem; font-weight: 700; margin: 0 0 16px; }
.adm-detail-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.adm-detail-table th { text-align: left; color: #777; font-weight: 600; padding: 6px 0; width: 110px; white-space: nowrap; }
.adm-detail-table td { padding: 6px 0; color: #222; }
.adm-detail-table tr + tr th,
.adm-detail-table tr + tr td { border-top: 1px solid var(--clr-border); }

/* ── end ADMIN ── */

/* ─── CROSS CURSOR (no trail) ─── */
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .cursor-active,
  .cursor-active * { cursor: none !important; }

  .custom-cursor {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
  }
  .custom-cursor::before,
  .custom-cursor::after {
    content: '';
    position: absolute;
    background: #1B3A6B;
    border-radius: 1px;
    transition: background 0.15s;
  }
  .custom-cursor.on-dark::before,
  .custom-cursor.on-dark::after {
    background: #ffffff;
  }
  .custom-cursor::before {
    width: 2px; height: 100%;
    left: calc(50% - 1px); top: 0;
  }
  .custom-cursor::after {
    width: 100%; height: 2px;
    left: 0; top: calc(33% - 1px);
  }
}


/* ─── DONATIONS PAGE ─── */
.don-form-section {
  background: var(--clr-card-bg);
}
.don-pending-banner {
  margin-bottom: 2rem;
}

/* --- Dona iframe embed --- */
.don-iframe-wrap {
  max-width: 680px;
  margin: 0 auto 2rem;
}
.don-iframe-intro {
  font-size: 0.95rem;
  color: var(--clr-text-muted, #666);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.don-iframe-intro a {
  color: var(--clr-accent);
  text-decoration: underline;
}
.don-iframe-container {
  border: 1px solid var(--clr-border, #e0e0e0);
  border-radius: var(--radius-sm, 10px);
  overflow: hidden;
  background: #fff;
}
.don-iframe-container iframe {
  display: block;
  width: 100%;
  min-height: 700px;
  border: none;
}
.don-iframe-fallback {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--clr-text-muted, #666);
  text-align: center;
}
.don-iframe-fallback a {
  color: var(--clr-accent);
  text-decoration: underline;
}
@media (max-width: 600px) {
  .don-iframe-container iframe {
    min-height: 600px;
  }
}

/* ─── Payment form styles (SumUp form — commented out for Dona Phase 1) ──────
   These styles support the custom payment form (amount picker, Gift Aid fields,
   two-column layout, recurring donation UI). They are kept here for a future
   payment gateway integration (e.g. Stripe). If a hosted form is re-introduced,
   these styles can be reactivated. See features/07-donations/ for context.   ── */
.don-form-wrap {
  max-width: 600px;
  margin: 0 auto;
}
.don-amounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-btn);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  border: 2px solid transparent;
  line-height: 1.4;
  text-align: center;
  font-family: inherit;
}
.btn-outline {
  background: transparent;
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}
.btn-outline:hover {
  background: var(--clr-accent);
  color: #fff;
}
.donation-amount.active {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-accent);
}
.don-custom-amount {
  display: none;
  margin-top: 10px;
  width: 100%;
}
.don-custom-amount--visible {
  display: block;
}
.don-inline-link {
  color: var(--clr-accent);
  font-weight: 500;
}
.don-inline-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Gift Aid checkbox label */
.don-giftaid-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--clr-text);
}
.don-giftaid-label input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--clr-accent);
  cursor: pointer;
}
.don-giftaid-boost {
  color: var(--clr-text-secondary);
  font-size: 0.875rem;
}
/* Gift Aid expandable form */
.don-giftaid-form {
  display: none;
  margin-top: 16px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 24px;
  background: var(--clr-bg);
}
.don-giftaid-form--visible {
  display: block;
}
.don-giftaid-intro {
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  margin-bottom: 20px;
  line-height: 1.55;
}
.don-required {
  color: var(--clr-accent);
}
.don-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Postcode row */
.don-postcode-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.don-postcode-row input {
  flex: 1;
  max-width: 200px;
}
.don-find-addr-btn {
  padding: 10px 18px;
  background: var(--clr-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}
.don-find-addr-btn:hover {
  background: var(--clr-accent-light);
}
.don-find-addr-btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}
.don-find-addr-btn:disabled {
  background: var(--clr-border);
  color: var(--clr-text-secondary);
  cursor: not-allowed;
}
.don-postcode-status {
  font-size: 0.8125rem;
  margin-top: 6px;
  min-height: 18px;
  line-height: 1.4;
}
.don-postcode-status--error   { color: #c0392b; }
.don-postcode-status--success { color: #1a7a40; }
.don-postcode-status--loading { color: var(--clr-text-secondary); }
/* Address dropdown */
.don-address-select-wrap {
  display: none;
  margin-bottom: 16px;
}
.don-address-select-wrap--visible {
  display: block;
}
.don-address-select {
  width: 100%;
}
.don-manual-link {
  background: none;
  border: none;
  color: var(--clr-accent);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.don-manual-link:hover {
  color: var(--clr-accent-light);
}
.don-manual-link:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Address fields — hidden until postcode lookup or manual toggle */
.don-address-fields {
  display: none;
}
.don-address-fields--visible {
  display: block;
}
/* Submit button and footer note */
.don-submit {
  width: 100%;
  margin-top: 8px;
}
.don-submit:not(:disabled) {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-accent);
}
.don-submit:not(:disabled):hover {
  background: #1B3A6B;
  border-color: #1B3A6B;
}
.don-submit:disabled {
  background: #ccc;
  color: #888;
  border-color: #ccc;
  cursor: not-allowed;
}
.don-footer-note {
  text-align: center;
  margin-top: 20px;
  color: var(--clr-text-secondary);
  font-size: 0.9rem;
}
/* Email field validation states */
.don-field-valid {
  border-color: #1a7a40 !important;
  box-shadow: 0 0 0 2px rgba(26,122,64,.12);
}
.don-field-invalid {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 2px rgba(192,57,43,.10);
}
.don-field-error {
  font-size: 0.8125rem;
  color: #c0392b;
  margin-top: 5px;
}
/* Responsive */
@media (max-width: 580px) {
  .don-form-row-2 {
    grid-template-columns: 1fr;
  }
  .don-postcode-row {
    flex-wrap: wrap;
  }
  .don-postcode-row input {
    max-width: 100%;
  }
}
/* ── Donation type toggle (one-time / recurring) ── */
.don-type-toggle {
  display: inline-flex;
  background: var(--clr-bg);
  border: 2px solid var(--clr-border);
  border-radius: 50px;
  padding: 4px;
  gap: 4px;
}
.don-type-btn {
  padding: 9px 24px;
  border-radius: 50px;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--clr-text-secondary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  font-family: inherit;
  line-height: 1.4;
}
.don-type-btn.active {
  background: var(--clr-accent);
  color: #fff;
}
.don-type-btn:hover:not(.active) {
  background: rgba(27,58,107,.08);
  color: var(--clr-text);
}
.don-type-btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}
/* Recurring frequency row */
.don-recur-row {
  display: none;
  margin-top: -8px;
  margin-bottom: 24px;
  padding: 18px 20px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
}
.don-recur-row--visible {
  display: block;
}
.don-recur-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.don-freq-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.don-interval.active {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-accent);
}
/* Email field for recurring donations */
.don-recur-email {
  display: none;
}
.don-recur-email--visible {
  display: block;
}
.don-recur-email-hint {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  margin-top: 6px;
  line-height: 1.5;
}
/* Recurring giving UI — hidden pending COR-44 (recurring payment research spike).
   HTML + JS structure is preserved; remove this block to re-enable. */
.don-type-toggle,
.don-recur-row,
.don-recur-email { display: none !important; }
/* ── Overview strip ── */
.don-overview-section {
  background: var(--clr-card-bg);
}
.don-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.don-overview-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--clr-text);
  box-shadow: 0 2px 16px rgba(27, 58, 107, 0.09);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.don-overview-card:hover,
.don-overview-card:focus-visible {
  box-shadow: 0 10px 32px rgba(0,0,0,.17);
  transform: translateY(-4px);
  border-color: transparent;
}
/* Per-card accent colors on hover — burgundy / teal / gold */
.don-overview-card:nth-child(1):hover,
.don-overview-card:nth-child(1):focus-visible {
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-light) 100%);
}
.don-overview-card:nth-child(2):hover,
.don-overview-card:nth-child(2):focus-visible {
  background: linear-gradient(135deg, #2c6e6e 0%, #4a9e9e 100%);
}
.don-overview-card:nth-child(3):hover,
.don-overview-card:nth-child(3):focus-visible {
  background: linear-gradient(135deg, #a07828 0%, var(--clr-gold) 100%);
}
/* Text and icons go white on coloured background */
.don-overview-card:hover h3,
.don-overview-card:focus-visible h3,
.don-overview-card:hover .don-overview-icon,
.don-overview-card:focus-visible .don-overview-icon,
.don-overview-card:hover .don-overview-link,
.don-overview-card:focus-visible .don-overview-link {
  color: #fff;
}
.don-overview-card:hover p,
.don-overview-card:focus-visible p {
  color: rgba(255,255,255,.85);
}
.don-overview-icon {
  color: var(--clr-accent);
  margin-bottom: 16px;
  transition: color var(--transition);
}
.don-overview-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  transition: color var(--transition);
}
.don-overview-card p {
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 16px;
  transition: color var(--transition);
}
.don-overview-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-accent);
  margin-top: auto;
  transition: color var(--transition);
}
/* ── Two-column form layout ── */
.don-two-col {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 40px;
  align-items: start;
}
.don-two-col .don-form-wrap {
  max-width: none;
  margin: 0;
}
/* ── Donation summary sidebar ── */
.don-summary-card {
  position: sticky;
  top: 100px;
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.don-summary-header {
  background: var(--clr-accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 14px 20px;
}
.don-summary-body {
  padding: 20px;
}
.don-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
}
.don-summary-label {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  white-space: nowrap;
}
.don-summary-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--clr-text);
  text-align: right;
}
.don-summary-giftaid-row {
  display: none;
}
.don-summary-giftaid-row--visible {
  display: flex;
}
.don-summary-giftaid-value {
  color: #1a7a40;
  font-weight: 600;
}
.don-summary-divider {
  border-top: 1px solid var(--clr-border);
  margin: 8px 0;
}
.don-summary-total-row .don-summary-label {
  font-weight: 600;
  color: var(--clr-text);
  font-size: 0.875rem;
}
.don-summary-total {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--clr-accent) !important;
}
.don-summary-note {
  font-size: 0.75rem;
  color: var(--clr-text-secondary);
  line-height: 1.5;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--clr-border);
  margin: 0;
}
/* ── Bank details box ── */
.don-bank-details {
  margin-top: 16px;
  padding: 16px;
  background: var(--clr-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  font-size: 0.875rem;
  line-height: 1.9;
}
.don-bank-details p {
  margin: 0;
}
/* ── In-person section ── */
.don-inperson-section {
  background: var(--clr-card-bg);
}
.don-inperson-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.don-inperson-card {
  padding: 28px 24px;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
}
.don-inperson-icon {
  color: var(--clr-accent);
  margin-bottom: 14px;
}
.don-inperson-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.don-inperson-card p {
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
  line-height: 1.6;
  margin: 0;
}
/* ── Gift Aid explain section ── */
.don-giftaid-explain-section {
  background: var(--clr-bg);
}
.don-giftaid-explain-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.don-giftaid-explain-body p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--clr-text-secondary);
  margin-bottom: 16px;
}
.don-giftaid-explain-body p:last-child {
  margin-bottom: 0;
}
.don-giftaid-calc-box {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.don-giftaid-calc-title {
  background: var(--clr-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 12px 20px;
}
.don-giftaid-calc-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 0.9375rem;
  color: var(--clr-text);
}
.don-giftaid-calc-boost {
  color: #1a7a40;
  font-weight: 500;
}
.don-giftaid-calc-divider {
  border-top: 1px solid var(--clr-border);
  margin: 0 20px;
}
.don-giftaid-calc-total {
  font-weight: 700;
  font-size: 1.05rem !important;
  padding-top: 14px;
  padding-bottom: 14px;
}
.don-giftaid-calc-note {
  font-size: 0.75rem;
  color: var(--clr-text-secondary);
  padding: 8px 20px 16px;
  border-top: 1px solid var(--clr-border);
  margin: 0;
  line-height: 1.5;
}
/* ── Responsive: donations ── */
@media (max-width: 900px) {
  .don-two-col {
    grid-template-columns: 1fr;
  }
  .don-summary-card {
    position: static;
    order: -1;
  }
  .don-giftaid-explain-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .don-overview-grid,
  .don-inperson-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Daily Readings (Feature 16) — /readings page
   ══════════════════════════════════════════════════════════════════════════════ */

.readings-content {
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 48px;
}

/* Liturgical day name + date */
.readings-day-wrap {
  margin-bottom: 32px;
  text-align: center;
}
.readings-day-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 4px;
}
.readings-date-text {
  font-size: 0.875rem;
  color: var(--clr-text-secondary);
}

/* Loading state — skeleton lines */
.readings-loading {
  padding: 32px 0 48px;
  color: var(--clr-text-secondary);
  font-size: 0.9375rem;
}
.readings-loading-label {
  text-align: center;
  margin-bottom: 24px;
  color: var(--clr-text-secondary);
}
.readings-skeleton {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rdg-skel-card {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rdg-skel-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--clr-border) 25%, #e0e8f4 50%, var(--clr-border) 75%);
  background-size: 200% 100%;
  animation: rdg-shimmer 1.4s ease-in-out infinite;
  width: 100%;
}
.rdg-skel-line--ref     { width: 40%; height: 12px; opacity: 0.7; }
.rdg-skel-line--heading { width: 65%; height: 16px; }
.rdg-skel-line--short   { width: 75%; }
@keyframes rdg-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (max-width: 600px) {
  .rdg-skel-card { padding: 20px 16px; }
}

/* Error state */
.readings-error {
  text-align: center;
  padding: 48px 24px;
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 32px;
}
.readings-error p {
  font-size: 0.9375rem;
  color: var(--clr-text-secondary);
  margin-bottom: 16px;
}
.readings-fallback-link {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-accent);
  text-decoration: none;
  transition: color var(--transition);
}
.readings-fallback-link:hover { color: var(--clr-accent-light); }

/* No-JS fallback */
.readings-noscript {
  text-align: center;
  padding: 48px 24px;
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin-bottom: 32px;
}
.readings-noscript p {
  font-size: 0.9375rem;
  color: var(--clr-text-secondary);
  margin-bottom: 10px;
}
.readings-noscript a {
  color: var(--clr-accent);
  font-weight: 500;
}

/* Individual reading card */
.reading-block {
  background: var(--clr-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 24px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.reading-block:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.reading-block-accent {
  height: 6px;
}
.reading-block-body {
  padding: 24px 28px 28px;
}

/* Reading meta row — label + reference */
.reading-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.reading-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: var(--clr-text-secondary);
}
.reading-reference {
  font-size: 0.8125rem;
  font-weight: 500;
  font-style: italic;
  color: var(--clr-text-secondary);
}

/* Heading (thematic summary from Universalis) */
.reading-heading {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--clr-text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Reading body text */
.reading-text {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-text);
}
.reading-text p {
  margin-bottom: 14px;
}
.reading-text p:last-child {
  margin-bottom: 0;
}

/* Attribution line */
.readings-attribution {
  font-size: 0.75rem;
  color: var(--clr-text-secondary);
  text-align: center;
  margin-top: 16px;
  line-height: 1.6;
}
.readings-attribution a {
  color: var(--clr-accent);
  font-weight: 500;
}

/* Ensure hidden attribute always wins over explicit display rules on readings elements */
.readings-loading[hidden],
.readings-error[hidden],
.readings-day-wrap[hidden],
.reading-block[hidden] { display: none !important; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .reading-block-body {
    padding: 18px 20px 22px;
  }
  .reading-text {
    font-size: 0.9375rem;
  }
  .readings-content {
    padding-bottom: 32px;
  }
}

/* ── Admin: Events picker for Dates for Diary ─────────────────────────── */
.nl-events-hint {
  font-size: 13px;
  color: #666;
  margin: 4px 0 12px;
}
.nl-events-hint--empty {
  color: #888;
  font-style: italic;
}
.nl-events-hint--empty a { color: var(--primary-color); }
.nl-events-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fafafa;
}
.nl-event-check {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.nl-event-check:hover { background: #f0f4f8; }
.nl-event-check input[type="checkbox"] { flex-shrink: 0; margin-top: 2px; }
.nl-event-check-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-color);
  white-space: nowrap;
  flex-shrink: 0;
}
.nl-event-check-title {
  font-size: 13px;
  color: #333;
}

/* Mass picker — events with church selector */
.nl-mass-picker { max-height: 340px; }
.nl-mass-picker-hdr {
  display: grid;
  grid-template-columns: 20px 1fr 2fr 80px;
  gap: 8px;
  padding: 4px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #888;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 4px;
}
.nl-mass-event-row {
  display: grid;
  grid-template-columns: 20px 1fr 2fr 80px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.nl-mass-event-row:hover { background: #f0f4f8; }
.nl-mass-event-label {
  display: contents;
  cursor: pointer;
}
.nl-mass-church-select {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: #333;
}

/* ── Structured Newsletter Detail ───────────────────────────────────────── */

.nl-structured-page {
  padding-bottom: 48px;
}

.nl-structured-banner {
  background: var(--primary-color);
  color: #fff;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 6px 6px 0 0;
  margin-bottom: 0;
}

.nl-structured-intro {
  border-radius: 0;
}
/* Feature 04.3: newsletter body paragraphs read like the rest of the site */
.nl-section p { font-size: 1rem; line-height: 1.8; }
.nl-structured-intro p { margin: 0 0 1em; }
.nl-structured-intro p:last-child { margin-bottom: 0; }

.nl-section {
  padding: 18px 0;
  border-bottom: 1px solid #eee;
}
.nl-section:last-child {
  border-bottom: none;
}

.nl-section-heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

/* Two-column grid: 3fr sidebar 1fr at ≥900px */
.nl-structured-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 0 28px;
  align-items: start;
  margin-top: 0;
}

.nl-structured-main {
  border-right: 1px solid #eee;
  padding-right: 24px;
}

.nl-structured-sidebar {
  padding-left: 4px;
}

/* Mass intentions table */
.nl-mass-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 8px;
  /* Feature 40: fixed layout so the table never exceeds its container. With
     table-layout:auto a long Intention forced the table wider than the phone
     viewport and overflow-x:hidden on html/body clipped it (non-scrollable).
     Fixed layout + explicit column widths + in-cell wrapping keeps every row
     inside the viewport and tightens the wasted gaps between the short columns. */
  table-layout: fixed;
}
/* Feature 40: give the three short columns just what they need and hand the
   rest to Intention (was: auto-layout spread the slack as inter-column gaps). */
.nl-mass-table th:nth-child(1), .nl-mass-table td:nth-child(1) { width: 20%; }  /* Day / Date */
.nl-mass-table th:nth-child(2), .nl-mass-table td:nth-child(2) { width: 15%; }  /* Time */
.nl-mass-table th:nth-child(3), .nl-mass-table td:nth-child(3) { width: 10%; }  /* Church */
.nl-mass-table th:nth-child(4), .nl-mass-table td:nth-child(4) { width: 55%; }  /* Intention */
.nl-mass-table thead th {
  background: #fdf5e0;
  text-align: left;
  padding: 7px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #5a4010;
  border-bottom: 2px solid #e8d89a;
}
.nl-mass-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: top;
  /* Feature 40: wrap long words inside the cell only when they don't fit —
     overflow-wrap breaks at word boundaries first, so short day names / times
     stay on one line (no ugly mid-word "SATURD AY" breaks). */
  overflow-wrap: break-word;
}
/* Feature 40: the short "Ch" header label is mobile-only (see @640px below). */
.nl-mass-table .nl-th-sm { display: none; }
.nl-mass-table tbody tr:last-child td {
  border-bottom: none;
}
.nl-mass-table tbody tr:hover td {
  background: #fafaf5;
}

/* Finance card */
.nl-finance-card {
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 14px 16px;
  background: #fafaf5;
  margin-top: 12px;
}
.nl-finance-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 0.85rem;
  margin-top: 8px;
}
.nl-finance-grid dt {
  color: #666;
  font-weight: 400;
}
.nl-finance-grid dd {
  font-weight: 600;
  color: var(--clr-text);
  margin: 0;
  text-align: right;
}

/* Devotions sidebar box */
.nl-devotions-box {
  background: var(--primary-color);
  color: #fff;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  line-height: 1.6;
}
.nl-devotions-box p {
  white-space: pre-line;
  margin: 0;
  opacity: 0.92;
}

/* Notice items */
.nl-notice-item {
  margin-bottom: 12px;
}
.nl-notice-item strong {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #333;
  margin-bottom: 3px;
}
.nl-notice-item p {
  margin: 0;
  /* Feature 04.3: newsletter body text matches site-standard prose (1rem/1.8) */
  font-size: 1rem;
  line-height: 1.8;
  color: var(--clr-text);
}

/* Feature 37: admin-formatted rich-text blocks (notices + sidebar sections) */
/* Feature 04.3: 0.9rem/1.6 → site-standard 1rem/1.8 (matches .pg-prose) */
.nl-rich { font-size: 1rem; line-height: 1.8; color: var(--clr-text); }
.nl-rich p { margin: 0 0 1em; }
.nl-rich p:last-child { margin-bottom: 0; }
/* Feature 04.3 fix round: sidebar + footer rich blocks are lists (weekly
   devotions, sacraments, schools) — each item on its own line, tightly spaced,
   not with full prose paragraph gaps. Main-column prose keeps the 1em spacing. */
.nl-structured-sidebar .nl-rich p,
.nl-structured-footer .nl-rich p { margin: 0 0 0.15em; }
.nl-rich ul, .nl-rich ol { margin: 0 0 0.7em 1.3em; }
.nl-rich li { margin-bottom: 0.25em; }
.nl-rich h3, .nl-rich h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.3px; color: #333; margin: 0 0 4px; }
.nl-rich a { color: var(--primary-color); }
.nl-rich strong { color: #333; }
.nl-devotions-box .nl-rich, .nl-devotions-box .nl-rich a { color: #fff; }

/* Footer row: two columns at ≥640px */
.nl-structured-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  border-top: 2px solid #eee;
  margin-top: 8px;
  padding-top: 4px;
}

/* Print button */
.nl-print-btn {
  background: none;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  padding: 8px 20px;
  border-radius: 5px;
  font-size: 0.88rem;
  cursor: pointer;
  font-weight: 500;
}
.nl-print-btn:hover {
  background: var(--primary-color);
  color: #fff;
}

/* Responsive: single column at ≤900px */
@media (max-width: 900px) {
  .nl-structured-grid {
    grid-template-columns: 1fr;
  }
  .nl-structured-main {
    border-right: none;
    padding-right: 0;
  }
  .nl-structured-sidebar {
    padding-left: 0;
    border-top: 2px solid #eee;
    padding-top: 8px;
    margin-top: 8px;
  }
}

/* Responsive: single column footer at ≤640px */
@media (max-width: 640px) {
  .nl-structured-footer {
    grid-template-columns: 1fr;
  }
  /* Feature 40: reclaim the wide side gutter on phones so the mass table has
     more room to breathe (uses more of the space on the sides). Scoped to the
     newsletter body only. */
  .nl-detail-section > .content { padding-left: 12px; padding-right: 12px; }

  /* Feature 40: mass table on phones — smaller font + tight padding + column
     mix tuned so day names ("WEDNESDAY") and times ("10.00am") fit on one line
     (no mid-word breaks), and the short "Ch" header replaces "Church" (values
     are already CC/SJ/SPH codes) so the header can't overflow into Intention. */
  .nl-mass-table { font-size: 0.72rem; }
  .nl-mass-table thead th { padding: 5px 4px; font-size: 0.62rem; letter-spacing: 0; overflow-wrap: break-word; }
  .nl-mass-table tbody td { padding: 5px 4px; }
  .nl-mass-table .nl-th-lg { display: none; }
  .nl-mass-table .nl-th-sm { display: inline; }
  .nl-mass-table th:nth-child(1), .nl-mass-table td:nth-child(1) { width: 25%; }  /* Day / Date */
  .nl-mass-table th:nth-child(2), .nl-mass-table td:nth-child(2) { width: 16%; }  /* Time */
  .nl-mass-table th:nth-child(3), .nl-mass-table td:nth-child(3) { width: 11%; }  /* Church */
  .nl-mass-table th:nth-child(4), .nl-mass-table td:nth-child(4) { width: 48%; }  /* Intention */
}

/* Print styles */
@media print {
  header, footer, nav, .nl-print-btn,
  .nw-article-footer, .pg-hero,
  .nw-breadcrumb-line {
    display: none !important;
  }
  .nl-structured-page {
    padding: 0;
  }
  .nl-structured-banner {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .nl-structured-grid {
    grid-template-columns: 3fr 1fr;
  }
  .nl-structured-footer {
    grid-template-columns: 1fr 1fr;
  }
  .nl-devotions-box {
    background: #f0f0f0 !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body, p, td, th, li {
    font-size: 10pt;
    color: #000 !important;
  }
  .nl-section-heading {
    color: #000 !important;
  }
  a { color: #000 !important; text-decoration: none; }
  box-shadow { display: none; }
}

/* ─── Text Size Widget ─────────────────────────────────────────────────────── */

/* Scale applied to <html> element — rem-based values cascade automatically */
html.txt-md { font-size: 112%; }
html.txt-lg { font-size: 125%; }

/* Wrapper — anchors the pop-up panel */
.txt-resize {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 500;
}

/* Collapsed trigger button — circle with magnify+plus icon */
.txt-resize__toggle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--clr-border);
  background: var(--clr-white);
  box-shadow: 0 2px 16px rgba(0,0,0,.14);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent);
  transition: background .18s, color .18s, box-shadow .18s;
  padding: 0;
}
.txt-resize__toggle:hover,
.txt-resize[data-open] .txt-resize__toggle {
  background: var(--clr-accent);
  color: #fff;
  box-shadow: 0 4px 20px rgba(27,58,107,.28);
}
.txt-resize__toggle:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
}

/* Pop-up panel — positions above the toggle */
.txt-resize__panel {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  padding: 10px 12px 12px;
  min-width: 130px;
  /* Hidden by default */
  opacity: 0;
  transform: translateY(8px) scale(.95);
  transform-origin: bottom right;
  transition: opacity .18s, transform .18s;
  pointer-events: none;
  /* Keep in tab order only when visible */
  visibility: hidden;
}
.txt-resize[data-open] .txt-resize__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  visibility: visible;
}

/* Small label inside the panel */
.txt-resize__hint {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--clr-text-secondary);
  margin-bottom: 8px;
  user-select: none;
}

/* Row of size buttons */
.txt-resize__btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Individual size button */
.txt-resize__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  color: var(--clr-text-secondary);
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
  padding: 0;
}
.txt-resize__btn:hover {
  background: var(--clr-bg);
  color: var(--clr-text);
  border-color: var(--clr-border);
}
.txt-resize__btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

/* Three visually distinct sizes */
.txt-resize__btn                     { font-size: 0.75rem; }
.txt-resize__btn.txt-resize__btn--md { font-size: 1rem; }
.txt-resize__btn.txt-resize__btn--lg { font-size: 1.3125rem; }

/* Active / selected state */
.txt-resize__btn.txt-resize__btn--active {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-accent);
}
.txt-resize__btn.txt-resize__btn--active:hover {
  background: var(--clr-accent-light);
  border-color: var(--clr-accent-light);
  color: #fff;
}

/* Mobile: nudge inward from screen edge */
@media (max-width: 600px) {
  .txt-resize {
    bottom: 18px;
    right: 16px;
  }
  .txt-resize__toggle {
    width: 40px;
    height: 40px;
  }
  .txt-resize__panel {
    min-width: 120px;
    padding: 8px 10px 10px;
  }
}

/* Print: hide widget entirely */
@media print {
  .txt-resize { display: none !important; }
}
/* ── end text size widget ───────────────────────────────────────────────────── */

/* ── Mobile hero overlays — white gradient 100% left to 0% right ───────────── */
@media (max-width: 900px) {
  .mt-hero-wrap::before {
    background-image:
      linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%),
      url('/images/corpus-christi.jpg');
  }
}


/* === COOKIE CONSENT BANNER === */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #1B3A6B;
  color: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
}
.cookie-banner__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  min-width: 200px;
}
.cookie-banner__link {
  color: #D4B96A;
  text-decoration: underline;
  white-space: nowrap;
}
.cookie-banner__link:hover {
  color: #e8d08a;
}
.cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cookie-banner__btn {
  padding: 8px 18px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.cookie-banner__btn--accept {
  background: #D4B96A;
  color: #1B3A6B;
  border: 2px solid #D4B96A;
}
.cookie-banner__btn--accept:hover,
.cookie-banner__btn--accept:focus-visible {
  background: #e8d08a;
  border-color: #e8d08a;
}
.cookie-banner__btn--reject {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}
.cookie-banner__btn--reject:hover,
.cookie-banner__btn--reject:focus-visible {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}
.cookie-banner__btn:focus-visible {
  outline: 3px solid #D4B96A;
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  .cookie-banner__actions {
    width: 100%;
  }
  .cookie-banner__btn {
    flex: 1;
    text-align: center;
  }
}


/* === CONTACT FORM — SPAM PROTECTION === */

/* Honeypot wrapper: moves element off-screen without display:none
   (some bots skip fields hidden with display:none or visibility:hidden) */
.visually-hidden-offscreen {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Helper hint text beneath form fields */
.ct-form-hint {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}

/* Inline validation error state for contact form fields */
.ct-form-group input.ct-invalid,
.ct-form-group select.ct-invalid,
.ct-form-group textarea.ct-invalid {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.10);
}
.ct-field-error {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  color: #c0392b;
  line-height: 1.5;
}


/* Homepage events panel — "View full calendar" footer link (F24) */
.events-panel-footer {
  padding: 14px 20px 4px;
  text-align: right;
}
.events-view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-accent);
  text-decoration: none;
  padding: 6px 0;
  transition: gap 0.15s, color 0.15s;
}
.events-view-all svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.events-view-all:hover {
  color: var(--clr-accent-light);
  gap: 10px;
}
.events-view-all:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ==========================================================================
   PUBLIC CALENDAR PAGE (F24)
   ========================================================================== */

/* ── Page body wrapper ───────────────────────────────────────────────────── */
.cal-page {
  padding: 20px 0 80px;
}

/* ── Toolbar: view toggle + period nav ───────────────────────────────────── */
.cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 20px 0 16px;
  padding: 14px 18px;
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
}
.cal-view-toggle {
  display: inline-flex;
  background: var(--clr-bg);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.cal-view-btn {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-secondary);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cal-view-btn:hover {
  color: var(--clr-accent);
}
.cal-view-btn.is-active {
  background: var(--clr-accent);
  color: #fff;
}
.cal-view-btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}

.cal-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-nav-btn {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-accent);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cal-nav-btn:hover {
  background: var(--clr-accent);
  color: #fff;
  border-color: var(--clr-accent);
}
.cal-nav-btn:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 2px;
}
.cal-prev,
.cal-next {
  font-size: 1rem;
  padding: 6px 12px;
  min-width: 36px;
}
.cal-period-label {
  margin-left: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--clr-text);
}

/* ── Pill filter (inherits .events-pill styling from F23) ────────────────── */
.cal-pill-filter {
  margin: 0 0 18px;
  padding: 12px 16px;
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: 12px;
}

/* ── Container ──────────────────────────────────────────────────────────── */
.cal-container {
  background: var(--clr-card-bg);
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  padding: 18px;
  min-height: 320px;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.cal-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--clr-text-secondary);
}
.cal-empty h3 {
  font-size: 1.125rem;
  color: var(--clr-text);
  margin: 0 0 6px;
}
.cal-empty p { margin: 0; font-size: 0.9375rem; }

/* ── Week view ──────────────────────────────────────────────────────────── */
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.cal-week-col {
  background: var(--clr-bg);
  border-radius: 10px;
  padding: 10px;
  min-height: 220px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
}
.cal-week-col.is-today {
  background: #E8EFF7; /* Light Marian Blue tint */
  outline: 2px solid var(--clr-accent);
  outline-offset: -2px;
}
.cal-week-day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 8px;
}
.cal-week-dow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--clr-text-secondary);
}
.cal-week-daynum {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--clr-text);
}
.cal-week-col.is-today .cal-week-daynum { color: var(--clr-accent); }
.cal-week-events {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.cal-week-empty {
  font-size: 0.8125rem;
  color: var(--clr-text-secondary);
  text-align: center;
  padding-top: 18px;
  opacity: 0.5;
}

/* ── Month view ─────────────────────────────────────────────────────────── */
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-month-dow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--clr-text-secondary);
  text-align: center;
  padding: 8px 0;
}
.cal-day-cell {
  background: var(--clr-bg);
  border-radius: 8px;
  padding: 6px;
  min-height: 96px;
  max-height: 140px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-day-cell.is-other-month {
  opacity: 0.45;
}
.cal-day-cell.is-today {
  background: #E8EFF7;
  outline: 2px solid var(--clr-accent);
  outline-offset: -2px;
}
.cal-day-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--clr-text);
  text-align: right;
  padding: 0 2px;
}
.cal-day-cell.is-today .cal-day-number { color: var(--clr-accent); }
.cal-day-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

/* ── Chip (event tile inside week / month cell) ──────────────────────────── */
.cal-chip {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: var(--clr-card-bg);
  color: var(--clr-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  transition: filter 0.15s, transform 0.05s;
}
.cal-chip:hover { filter: brightness(0.96); }
.cal-chip:active { transform: translateY(1px); }
.cal-chip:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 1px; }

/* Chip venue tints — same WCAG-AA palette as event-venue-badge */
.cal-chip--corpus-christi   { background: #E8EFF7; color: #1B3A6B; border-color: #B8C8DC; }
.cal-chip--st-peters-hadlow { background: #F4ECDC; color: #6B4E1B; border-color: #D8C39A; }
.cal-chip--st-justus        { background: #E5EFE8; color: #1B5B30; border-color: #B7D4C0; }
.cal-chip--fisher-hall      { background: #F1E5EE; color: #6B1B5A; border-color: #D5B7CD; }
.cal-chip--private          { background: #ececec; color: var(--clr-text-secondary); border-color: #d8d8d8; font-style: italic; }
.cal-chip-more {
  background: transparent;
  color: var(--clr-accent);
  border-color: transparent;
  font-weight: 600;
  font-size: 0.6875rem;
  padding-top: 2px;
}

/* ── Day view ───────────────────────────────────────────────────────────── */
.cal-day-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cal-day-empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--clr-text-secondary);
  font-size: 0.9375rem;
}

/* ── Slide-in event-detail panel (mirrors .fh-panel pattern) ─────────────── */
.cal-panel-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
}
.cal-panel-overlay.is-open { display: block; }

.cal-panel {
  position: fixed;
  top: 0;
  right: -520px;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  background: var(--clr-card-bg);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.14);
  z-index: 210;
  transition: right 0.3s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.cal-panel.is-open { right: 0; }

.cal-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 18px;
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-light) 100%);
  color: #fff;
  flex-shrink: 0;
}
.cal-panel-date {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 4px;
}
.cal-panel-head h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0;
  color: #fff;
}
.cal-panel-close {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.cal-panel-close:hover { background: rgba(255, 255, 255, 0.28); }
.cal-panel-close:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }

.cal-panel-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cal-panel-meta {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}
.cal-panel-desc {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--clr-text);
  line-height: 1.6;
  white-space: pre-wrap;
}
.cal-panel-private-msg {
  margin: 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--clr-text-secondary);
}

.cal-panel-foot {
  padding: 14px 24px 20px;
  border-top: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.cal-back-btn {
  background: transparent;
  border: 1px solid var(--clr-border);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-accent);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cal-back-btn:hover { background: var(--clr-accent); color: #fff; }
.cal-back-btn:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }

/* ── Mobile breakpoints ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cal-day-cell { min-height: 80px; }
  .cal-week-col { min-height: 180px; }
}

@media (max-width: 700px) {
  /* Hero responsive sizing inherited from .pg-hero rules */

  .cal-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  /* Hide view-toggle buttons marked data-mobile-hidden (currently: Month).
     JS coerces currentView away from 'month' on mobile so the underlying
     state never lands here either. */
  .cal-view-btn[data-mobile-hidden="true"] { display: none; }
  .cal-view-toggle { justify-content: center; }
  .cal-nav { justify-content: center; }
  .cal-period-label { width: 100%; text-align: center; margin-left: 0; }

  /* Week view on mobile is rendered by renderWeekMobileAgenda() as a single
     vertical column of day-cards (.cal-week-agenda > .cal-agenda-day), so
     the desktop .cal-week-grid never appears here. Defensive reset clears
     the desktop max-height in case state ever lands on the grid renderer. */
  .cal-week-grid { display: none; }
  .cal-week-col { min-height: 0; max-height: none; overflow: visible; }

  /* Mobile Week agenda — stacked day-cards (Mon → Sun) */
  .cal-week-agenda {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .cal-agenda-day {
    background: var(--clr-bg);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .cal-agenda-day.is-today {
    background: #E8EFF7;
    outline: 2px solid var(--clr-accent);
    outline-offset: -2px;
  }
  .cal-agenda-day-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 10px;
    gap: 12px;
  }
  .cal-agenda-day-header h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.3;
  }
  .cal-agenda-day-meta {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .cal-agenda-day.is-today .cal-agenda-day-meta { color: var(--clr-accent); }
  .cal-agenda-day-empty {
    font-size: 0.875rem;
    color: var(--clr-text-secondary);
    font-style: italic;
    padding: 6px 0;
    opacity: 0.7;
  }
  /* event-row inside an agenda card — tighten margins to fit the card padding */
  .cal-agenda-day .event-row { margin: 6px 0; }
  .cal-agenda-day .event-row:first-of-type { margin-top: 0; }
  .cal-agenda-day .event-row:last-of-type  { margin-bottom: 0; }

  /* Month view is hidden on mobile (≤700px) via .cal-view-btn[data-mobile-hidden],
     and JS coerces stale 'month' state to 'week'. The compact Month-cell rules
     that previously lived here are therefore unreachable and have been removed. */

  .cal-panel { width: 100%; right: -100vw; }
}

/* ============================================================================
   Feature 25 — Parish Group Pages
   - .group-tile-grid + .group-tile : tile grid on /parish/groups
   - .group-detail-* : individual group sub-page (/parish/groups/:slug)
   - .group-lightbox : carousel overlay for images
   ============================================================================ */

/* Tile grid on the main /parish/groups listing page */
.group-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* desktop: 3 columns */
  gap: 28px;
  max-width: 1100px;
  margin: 36px auto 0;
}
@media (max-width: 960px) {
  .group-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .group-tile-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
}
.group-tile {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  text-decoration: none;
  color: var(--clr-text);
  box-shadow: 0 2px 14px rgba(27, 58, 107, 0.09);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  min-height: 200px;
}
.group-tile:hover,
.group-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(27, 58, 107, 0.14);
  border-color: var(--primary-color);
  outline: none;
}
.group-tile:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}
.group-tile h3 {
  margin: 0 0 10px;
  color: var(--primary-color);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}
.group-tile p {
  margin: 0 0 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clr-text);
  flex: 1;
}
.group-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-top: auto;
}

/* Individual group sub-page layout */
.group-detail-body { padding: 60px 0 40px; }
/* Shared 1100px wrapper so back-link, prose, and gallery share the same left edge */
.group-detail-wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.group-detail-prose {
  line-height: 1.75;
  color: var(--clr-text);
  font-size: 1.02rem;
}
.group-detail-prose h2,
.group-detail-prose h3,
.group-detail-prose h4 { color: var(--primary-color); margin: 1.4em 0 0.5em; }
.group-detail-prose p { margin: 0 0 1em; }
.group-detail-prose ul,
.group-detail-prose ol { margin: 0 0 1em 1.5em; }
.group-detail-prose li { margin-bottom: 0.3em; }
.group-detail-prose a { color: var(--primary-color); text-decoration: underline; }

.group-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 0.92rem;
  color: var(--primary-color);
  text-decoration: none;
}
.group-detail-back:hover { text-decoration: underline; }

/* Image gallery */
.group-gallery-section { padding: 20px 0 60px; }
.group-gallery-heading {
  max-width: 1100px;     /* match prose + gallery */
  margin: 0 auto 16px;
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: 700;
}
.group-gallery {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.group-gallery-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: none;
  padding: 0;
  background: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.group-gallery-item:hover,
.group-gallery-item:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  outline: none;
}
.group-gallery-item:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}
.group-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Lightbox carousel overlay */
.group-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.group-lightbox.is-open { display: flex; }
.group-lightbox-img-wrap {
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.group-lightbox-img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 4px;
}
.group-lightbox-btn {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.group-lightbox-btn:hover,
.group-lightbox-btn:focus-visible {
  background: rgba(0, 0, 0, 0.85);
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.group-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.group-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.group-lightbox-close { right: 16px; top: 16px; }
.group-lightbox-counter {
  position: absolute;
  left: 16px;
  top: 22px;
  color: #fff;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 10px;
  border-radius: 4px;
}
@media (max-width: 600px) {
  .group-lightbox-btn { width: 40px; height: 40px; font-size: 1.3rem; }
  .group-lightbox-prev { left: 8px; }
  .group-lightbox-next { right: 8px; }
  .group-lightbox-close { right: 8px; top: 8px; }
}

/* Admin: gallery management on group editor */
.adm-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.adm-gallery-item {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: #fafafa;
}
.adm-gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.adm-gallery-item .adm-gallery-meta {
  padding: 8px 10px;
  font-size: 0.78rem;
  color: #666;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.adm-gallery-item .adm-gallery-delete {
  background: none;
  border: none;
  color: #c0392b;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0;
}
.adm-gallery-item .adm-gallery-delete:hover { text-decoration: underline; }

/* ─── Feature 27: Groups Overview footer table ─────────────────────────── */
/* Inner wrapper for the admin-edited content_footer (sanitised on save).
   Nested inside the .group-footer-collapse <details> disclosure below
   (Feature 27 amendment 2026-05-18 — collapsible "Contacts" section). */
.groups-footer {
  width: 100%;
  font-size: 0.95rem;
  color: var(--clr-text);
  line-height: 1.55;
}
.groups-footer table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.groups-footer thead th {
  background: var(--primary-color, #1B3A6B);
  color: #fff;
  text-align: left;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding: 12px 16px;
  border-bottom: none;
}
.groups-footer tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
.groups-footer tbody tr:last-child td { border-bottom: none; }
.groups-footer tbody tr:nth-child(even) td { background: #fafafa; }
.groups-footer tbody tr:hover td { background: #f3f6fb; }
.groups-footer p { margin: 0 0 0.6em; }
.groups-footer p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .groups-footer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .groups-footer table { min-width: 540px; }
  .groups-footer thead th,
  .groups-footer tbody td { padding: 10px 12px; font-size: 0.88rem; }
}

/* ─── Feature 27 amendment (2026-05-18): collapsible Contacts disclosure ── */
/* Native <details>/<summary> widget that wraps the Groups Overview footer
   table. Closed by default; keyboard-accessible (Tab + Space/Enter to
   toggle) and screen-reader-friendly without ARIA. WCAG 2.1 AA: 44×44 px
   hit area on the summary; visible focus-visible outline; contrast against
   page background ≥ 4.5:1 using Marian Blue text on light-blue tint. */
.group-footer-collapse {
  margin: 48px auto 0;
  max-width: 1100px;
  border-top: 2px solid var(--primary-color, #1B3A6B);
  border-radius: 0 0 8px 8px;
}
.group-footer-collapse > summary {
  list-style: none;                  /* hide default triangle (we draw our own chevron) */
  cursor: pointer;
  padding: 14px 20px;
  min-height: 44px;                  /* WCAG 2.1 AA tap target */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--primary-color, #1B3A6B);
  background: rgba(27, 58, 107, 0.06);
  border-radius: 0 0 8px 8px;
  transition: background-color 0.15s ease;
}
.group-footer-collapse > summary::-webkit-details-marker { display: none; }
.group-footer-collapse > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);          /* chevron pointing down (closed) */
  transition: transform 0.2s ease;
  margin-right: 4px;
  flex-shrink: 0;
}
.group-footer-collapse[open] > summary {
  border-radius: 0;
  background: rgba(27, 58, 107, 0.1);
}
.group-footer-collapse[open] > summary::after {
  transform: rotate(-135deg);        /* chevron pointing up (open) */
  margin-top: 4px;
}
.group-footer-collapse > summary:hover {
  background: rgba(27, 58, 107, 0.12);
}
.group-footer-collapse > summary:focus-visible {
  outline: 2px solid var(--primary-color, #1B3A6B);
  outline-offset: 2px;
}
.group-footer-collapse[open] > .group-detail-wrap {
  padding: 24px 20px 8px;
}

/* ── Hero — Liturgical Band (Feature 01.1) ──────────────────────────────────
   Server-renders the band colour from --liturgical / --liturgical-dark inline-
   style tokens on the .hero-band + .hero-liturgical wrappers. The accent token
   cascades to the carousel border, headline italic, pull-quote rule, etc.
*/

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

/* Liturgical band — full-width strip below nav */
.hero-band {
  /* Feature 01.2 R13: band uses --liturgical-dark as background for AA contrast
     with white text. All 5 season palettes pass ≥ 4.5:1.
     Feature 01.2 R16: padding-top: 52px clears the fixed nav (matches the
     legacy hero's 80px top-padding pattern). Without this the entire band
     content sits BEHIND the fixed nav and only a thin strip peeks out. */
  width: 100%;
  padding-top: 52px;
  background: var(--liturgical-dark, #25592e);
  border-bottom: 3px solid var(--liturgical-dark, #25592e);
  color: #fff;
  /* Feature 01.2 R20 + R21: band typography trimmed 5 px (14 → 9 px), then
     bumped 2 px (9 → 11 px). */
  font-size: 0.6875rem;
  line-height: 1.2;
}
.hero-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* Feature 01.2 R18 + R20: visible band height shrunk in three passes —
     -25% (85 → 63 px), -15% (63 → 54 px), -25% (54 → 40 px). Final desktop
     dims: 5/27/5 + 3 border = 40 px. */
  padding: 5px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 27px;
  box-sizing: border-box;
}
.hero-band-left,
.hero-band-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-band-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid var(--liturgical-dark, #25592e);
  flex-shrink: 0;
  box-sizing: border-box;
}
.hero-band-season {
  /* Feature 01.2 R12 + R23: uppercase season name (EASTER, ADVENT, …) with
     wider letter-spacing for legibility at the smaller band-font size. */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.hero-band-sep {
  opacity: 0.6;
}
.hero-band-sunday {
  opacity: 0.95;
}
.hero-band-vestments {
  opacity: 0.95;
  font-weight: 500;
  line-height: 1;
}
.hero-band-readings-link {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s ease;
}
.hero-band-readings-link:hover,
.hero-band-readings-link:focus-visible {
  opacity: 0.85;
}
.hero-band-readings-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Main two-column hero stage */
.hero-liturgical {
  width: 100%;
  background: var(--clr-bg, #F0F4FA);
  padding: 48px 0 64px;
}
.hero-stage {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  /* Feature 01.2 R17 + R22 + R24: photo column sized in three passes from
     the design spec — 593 px (R17) → 504 px (-15%, R22) → 555 px (+10%, R24).
     1104 × 1.01/2.01 = 555 px at the 1280-px reference viewport. Height
     follows the 593/610 aspect-ratio (555 / 0.972 = 571 px). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.01fr);
  gap: 48px;
  align-items: center;
}
.hero-text-col {
  min-width: 0;
}
/* Feature 01.2 R15 (post-tester design alignment): left-column typography
   matches the Claude Design reference table exactly. Italic accent is static
   green (#3a7d47), NOT season-coloured — supersedes F01.2 R2 contrast swap. */
.hero-eyebrow {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  /* Feature 01.2 R28: rem-based font sizes so the footer magnifier
     (html.txt-md / txt-lg) scales hero text along with the rest of the page. */
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 3px;
  color: #1B3A6B;
  text-transform: uppercase;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-eyebrow::before {
  /* Feature 01.2 R16: dot mirrors the liturgical band colour (--liturgical-dark)
     so eyebrow / accent / reading-border all share the season-driven hue. */
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--liturgical-dark, #3a7d47);
  flex-shrink: 0;
}
.hero-headline {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* Feature 01.2 R19: upper bound trimmed 52 → 50 px so the italic accent
     "Corpus Christi," fits on one line at the design's 1280-px reference
     viewport.
     Feature 01.2 R28: upper bound expressed in rem (3.125rem = 50px) so the
     footer magnifier can scale the headline cap proportionally. */
  font-size: clamp(2rem, 5.2vw, 3.125rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -1px;
  color: #1B3A6B;
  margin: 0 0 14px;
}
.hero-headline-accent {
  /* Feature 01.2 R16: accent colour is dynamic — mirrors the liturgical band
     (--liturgical-dark). The Claude Design's hardcoded #3a7d47 is overridden
     per user direction so the season's hue carries through the hero.
     Feature 01.2 R19: white-space:nowrap keeps "Corpus Christi," as a single
     atomic phrase so it never breaks mid-name. */
  font-style: italic;
  font-weight: 500;
  color: var(--liturgical-dark, #3a7d47);
  white-space: nowrap;
}
.hero-sub-copy {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: #4A5568;
  max-width: 520px;
  margin: 0 0 22px;
}
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-cta-primary {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1B3A6B;
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-cta-primary:hover {
  background: #2C5496;
  transform: translateY(-1px);
}
.hero-cta-primary:focus-visible {
  outline: 2px solid #1B3A6B;
  outline-offset: 3px;
}
.hero-ghost-link {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: #1B3A6B;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 13px 16px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.hero-ghost-link:hover {
  opacity: 0.75;
}
.hero-ghost-link:focus-visible {
  outline: 2px solid #1B3A6B;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Pull-quote — design's left-accent treatment: 3px liturgical border, asymmetric
   radius (sharp left, rounded right), vertical gradient backdrop. Per user
   override the border colour mirrors --liturgical-dark instead of the hardcoded
   green from the design instruction. */
.hero-reading {
  max-width: 560px;
  background: linear-gradient(180deg, #f7faf5 0%, #f0f6ec 100%);
  border-left: 3px solid var(--liturgical-dark, #3a7d47);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px 14px 18px;
}
.hero-reading-meta {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--liturgical-dark, #3a7d47);
  margin-bottom: 8px;
}
.hero-reading-clip {
  position: relative;
  max-height: 84px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  margin-bottom: 10px;
}
.hero-reading-quote {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  /* Feature 01.2 R25: pull-quote body +2 px (16 → 18 px desktop).
     R28: 18px → 1.125rem so the magnifier scales it.
     Feature 35 R6: +2 px (18 → 20 px = 1.25rem). */
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.35;
  color: #1d1d1f;
  margin: 0;
}
.hero-reading-link {
  /* Feature 01.2 R16: link colour mirrors --liturgical-dark for consistency
     with the eyebrow dot / accent / reading border. */
  display: inline-block;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--liturgical-dark, #2c6e3a);
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.hero-reading-link:hover {
  opacity: 0.75;
}
.hero-reading-link:focus-visible {
  outline: 2px solid var(--liturgical-dark, #2c6e3a);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Photo column */
.hero-photo-col {
  position: relative;
}
.hero-photo-stack {
  /* Feature 01.2 R17: design spec is 593 × 610 at 1280-px reference — a
     slightly portrait, near-square tile (ratio ≈ 0.972). */
  position: relative;
  width: 100%;
  aspect-ratio: 593 / 610;
  border-radius: var(--radius-card, 18px);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  background: #ccc;
}
.hero-photo-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
  pointer-events: none;
}
.hero-photo-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.hero-photo-slide img {
  /* Feature 01.2 R17: img is absolutely positioned + inset:0 per design spec,
     fills the slide wrapper (which itself fills the tile). */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.hero-photo-tag {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  padding: 60px 16px 12px;
  margin: 0 -20px -20px;
  border-radius: 0 0 var(--radius-card, 18px) var(--radius-card, 18px);
  pointer-events: none;
}
.hero-photo-tag-name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.hero-photo-tag-next {
  font-size: 0.85rem;
  opacity: 0.92;
}
/* Feature 01.2 R6 (C4): optional third caption line for special_note */
.hero-photo-tag-note {
  font-size: 0.78rem;
  opacity: 0.85;
  font-style: italic;
  margin-top: 2px;
}

/* Dot controls */
.hero-dots {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hero-dot {
  /* Feature 01.2 R11: 10 px circle (was 8 px in F01.1 plan, but actual CSS was already 10 — left unchanged here);
     active dot stretches to 24 × 10 pill using --liturgical-dark for AA contrast. */
  appearance: none;
  border: none;
  background: rgba(255, 255, 255, 0.65);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: width 0.18s ease, background 0.18s ease, border-radius 0.18s ease;
}
.hero-dot.is-active {
  background: var(--liturgical-dark, #25592e);
  width: 24px;
  border-radius: 5px;
}
.hero-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Reduced motion: disable photo cross-fade transition */
@media (prefers-reduced-motion: reduce) {
  .hero-photo-slide {
    transition: none;
  }
}

/* Mobile (≤768 px): single column, photo above text */
@media (max-width: 768px) {
  .hero-band-inner {
    /* Feature 01.2 R18 + R20: mobile band trimmed three times — -25%
       (65 → 49 px), -15% (49 → 42 px), -25% (42 → 32 px). Final mobile
       dims: 3/23/3 + 3 = 32 px. Font trimmed 5 px then bumped 2 px (13 → 8 → 10 px). */
    padding: 3px 18px;
    min-height: 23px;
    font-size: 0.625rem;
  }
  .hero-band-right {
    /* Vestments label + readings link hidden on mobile per plan R5.1 */
    display: none;
  }

  .hero-liturgical {
    padding: 24px 0 36px;
  }
  .hero-stage {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0 18px;
  }
  .hero-photo-col {
    order: -1; /* photo carousel sits above headline on mobile per R5.1 */
  }
  .hero-photo-stack {
    /* Feature 01.2 R17: mobile keeps the design's aspect-ratio (no fixed
       pixel height) so the tile stays fluid across phone widths. */
    aspect-ratio: 593 / 610;
    touch-action: pan-y; /* R5.2 — vertical scroll passes through */
  }
  .hero-headline {
    /* R28: rem so the magnifier scales mobile headline too. 32px = 2rem. */
    font-size: 2rem;
    letter-spacing: -0.5px;
  }
  .hero-sub-copy {
    font-size: 1rem;
  }
  .hero-cta-row {
    gap: 8px;
    margin-bottom: 22px;
  }
  .hero-cta-primary {
    padding: 12px 20px;
    font-size: 0.875rem;
  }
  .hero-reading-clip {
    max-height: 76px;
  }
  .hero-reading-quote {
    /* Feature 01.2 R25: mobile pull-quote +2 px (15.5 → 17.5 px).
       R28: 17.5px → 1.09375rem.
       Feature 35 R6: +2 px mobile (17.5 → 19.5 px ≈ 1.125rem). */
    font-size: 1.125rem;
  }
}
/* ── end Hero — Liturgical Band ────────────────────────────────────────────── */

/* ============================================================================
   Feature 29 — Fundraising Projects Tracker (public listing + archive)
   - .project-tile-grid + .project-tile : tile grid on /projects
   - .project-tile-* : individual tile parts (photo, body, progress, amounts)
   - .project-archive-list + .project-archive-row : lighter list view on /projects/archive
   - .projects-archive-link : cross-link footer between listing and archive
   Detail page CSS (.project-detail-*) added in Step 5.
   ============================================================================ */

.project-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 36px auto 0;
}
@media (max-width: 960px) {
  .project-tile-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 600px) {
  .project-tile-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
}

.project-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: var(--clr-text);
  box-shadow: 0 2px 14px rgba(27, 58, 107, 0.09);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  min-height: 320px;
}
.project-tile:hover,
.project-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(27, 58, 107, 0.14);
  border-color: var(--primary-color);
  outline: none;
}
.project-tile:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

.project-tile-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f3f3f3;
  overflow: hidden;
}
.project-tile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-tile-photo--placeholder {
  background: linear-gradient(135deg, #e9edf5 0%, #d8e0ed 100%);
}

.project-tile-body {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
  flex: 1;
}

.project-tile-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.project-tile-badge--completed {
  background: #e0f1e6;
  color: #1b6a35;
}

.project-tile h3 {
  margin: 0 0 8px;
  color: var(--primary-color);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}
.project-tile p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--clr-text);
}

.project-tile-progress-bar {
  width: 100%;
  height: 8px;
  background: #eef0f5;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.project-tile-progress-fill {
  height: 100%;
  background: var(--primary-color, #1B3A6B);
  transition: width 0.4s ease;
}

.project-tile-amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 0.88rem;
  color: var(--clr-text);
  margin-bottom: 14px;
}
.project-tile-amounts strong {
  color: var(--primary-color);
  font-size: 1.05rem;
  font-weight: 700;
}
.project-tile-amounts span {
  color: #666;
}
.project-tile-pct {
  margin-left: auto;
  font-weight: 700;
  color: var(--primary-color);
}

.project-tile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-top: auto;
}

/* Cross-link footer between listing and archive */
.projects-archive-link {
  text-align: center;
  margin: 48px auto 0;
  max-width: 1100px;
}
.projects-archive-link a {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
}
.projects-archive-link a:hover,
.projects-archive-link a:focus-visible {
  text-decoration: underline;
}

/* Archive (lighter list) */
.project-archive-list {
  list-style: none;
  padding: 0;
  margin: 36px auto 0;
  max-width: 880px;
}
.project-archive-row {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #ececec;
  align-items: flex-start;
}
.project-archive-row:last-child {
  border-bottom: none;
}
.project-archive-thumb {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
  background: #f3f3f3;
}
.project-archive-thumb--placeholder {
  background: linear-gradient(135deg, #e9edf5 0%, #d8e0ed 100%);
}
.project-archive-meta {
  flex: 1;
  min-width: 0;
}
.project-archive-meta h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
}
.project-archive-meta h3 a {
  color: var(--primary-color);
  text-decoration: none;
}
.project-archive-meta h3 a:hover,
.project-archive-meta h3 a:focus-visible {
  text-decoration: underline;
}
.project-archive-meta p {
  margin: 0 0 6px;
  font-size: 0.88rem;
  color: var(--clr-text);
  line-height: 1.5;
}
.project-archive-totals {
  color: #555 !important;
  font-size: 0.85rem !important;
}
.project-archive-totals strong {
  color: var(--primary-color);
}

@media (max-width: 600px) {
  .project-archive-row { flex-direction: column; gap: 12px; }
  .project-archive-thumb { width: 100%; height: 160px; }
}

/* Project detail page (/projects/:slug) — Step 5 */

.project-detail-hero { position: relative; }
.project-detail-hero--has-photo .project-detail-hero-inner h1,
.project-detail-hero--has-photo .project-detail-hero-inner .pg-hero-sub,
.project-detail-hero--has-photo .project-detail-hero-inner .section-label {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.project-detail-hero-photo {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1200px;
  border-radius: 18px;
  overflow: hidden;
  z-index: 1;
}
.project-detail-hero-photo img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.project-detail-hero-gradient {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, rgba(13, 34, 64, 0.78) 0%, rgba(13, 34, 64, 0.30) 60%, rgba(13, 34, 64, 0.05) 100%);
}
.project-detail-hero-inner { position: relative; z-index: 2; }

.project-detail-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.project-detail-badge--completed { background: #e0f1e6; color: #1b6a35; }
.project-detail-badge--archived  { background: #ececec; color: #555; }
.project-detail-badge--paused    { background: #fff4e0; color: #a06a00; }

/* Body wrapper — fills the full content container so prose + "How to give"
   tiles + updates timeline span the same width as the news / events sections */
.project-detail-wrap {
  margin: 0 auto;
}

/* Progress card */
.project-detail-progress-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 36px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.project-detail-progress-amounts {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.project-detail-progress-raised {
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.1;
}
.project-detail-progress-of {
  font-size: 0.95rem;
  color: #555;
}
.project-detail-progress-pct {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--primary-color);
}
.project-detail-progress-bar {
  width: 100%;
  height: 14px;
  background: #eef0f5;
  border-radius: 7px;
  overflow: hidden;
}
.project-detail-progress-fill {
  height: 100%;
  background: var(--primary-color, #1B3A6B);
  transition: width 0.4s ease;
}

/* Description prose */
.project-detail-prose {
  margin: 36px 0;
  line-height: 1.75;
  color: var(--clr-text);
  font-size: 1.02rem;
}
.project-detail-prose h2,
.project-detail-prose h3,
.project-detail-prose h4 { color: var(--primary-color); margin: 1.4em 0 0.5em; }
.project-detail-prose p { margin: 0 0 1em; }
.project-detail-prose ul,
.project-detail-prose ol { margin: 0 0 1em 1.5em; }
.project-detail-prose li { margin-bottom: 0.3em; }
.project-detail-prose a { color: var(--primary-color); text-decoration: underline; }

/* "How to give" panel */
.project-detail-give-panel {
  background: #f6f8fb;
  border: 1px solid #d8e0ed;
  border-radius: 12px;
  padding: 28px;
  margin: 40px 0;
}
.project-detail-give-panel h2 {
  margin: 0 0 8px;
  color: var(--primary-color);
  font-size: 1.3rem;
}
.project-detail-give-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 700px) {
  .project-detail-give-channels { grid-template-columns: 1fr; gap: 16px; }
}
.project-detail-give-channel {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--clr-border, #e0e0e0);
  border-radius: 8px;
  padding: 20px;
  text-decoration: none;
  color: var(--clr-text);
  transition: border-color var(--transition, 0.2s ease),
              box-shadow var(--transition, 0.2s ease),
              transform var(--transition, 0.2s ease),
              background var(--transition, 0.2s ease);
}
.project-detail-give-channel:hover,
.project-detail-give-channel:focus-visible {
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
  border-color: transparent;
  outline: none;
}
/* Per-card accent gradients on hover — burgundy / teal / gold (matches /donate) */
.project-detail-give-channel:nth-child(1):hover,
.project-detail-give-channel:nth-child(1):focus-visible {
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-light) 100%);
}
.project-detail-give-channel:nth-child(2):hover,
.project-detail-give-channel:nth-child(2):focus-visible {
  background: linear-gradient(135deg, #2c6e6e 0%, #4a9e9e 100%);
}
.project-detail-give-channel:nth-child(3):hover,
.project-detail-give-channel:nth-child(3):focus-visible {
  background: linear-gradient(135deg, #a07828 0%, var(--clr-gold) 100%);
}
/* Text + button go white on coloured background */
.project-detail-give-channel:hover h3,
.project-detail-give-channel:focus-visible h3,
.project-detail-give-channel:hover .project-detail-give-btn,
.project-detail-give-channel:focus-visible .project-detail-give-btn {
  color: #fff;
}
.project-detail-give-channel:hover p,
.project-detail-give-channel:focus-visible p {
  color: rgba(255, 255, 255, 0.85);
}
.project-detail-give-channel h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--primary-color);
  transition: color var(--transition, 0.2s ease);
}
.project-detail-give-channel p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--clr-text);
  line-height: 1.5;
  flex: 1;
  transition: color var(--transition, 0.2s ease);
}
.project-detail-give-btn {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
  margin-top: auto;
  transition: color var(--transition, 0.2s ease);
}

/* Updates timeline */
.project-detail-updates { margin: 50px 0; }
.project-detail-updates h2 {
  color: var(--primary-color);
  font-size: 1.3rem;
  margin: 0 0 20px;
}
.project-detail-update {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 0;
  border-top: 1px solid #eee;
}
.project-detail-update:first-of-type { border-top: 2px solid var(--primary-color); }
.project-detail-update-photo {
  width: 140px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.project-detail-update-meta { flex: 1; min-width: 0; }
.project-detail-update-meta h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--primary-color);
}
.project-detail-update-date {
  font-size: 0.82rem;
  color: #888;
  margin-bottom: 8px;
}
.project-detail-update-body {
  font-size: 0.95rem;
  color: var(--clr-text);
  line-height: 1.6;
}
.project-detail-update-body p { margin: 0 0 8px; }
.project-detail-update-body a { color: var(--primary-color); text-decoration: underline; }
@media (max-width: 600px) {
  .project-detail-update { flex-direction: column; gap: 12px; }
  .project-detail-update-photo { width: 100%; height: 200px; }
}

/* Share controls */
.project-detail-share {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 40px 0 8px;
}
.project-detail-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.project-detail-share-btn:hover,
.project-detail-share-btn:focus-visible {
  background: #0d2240;
  outline: none;
}
.project-detail-share-email {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
}
.project-detail-share-email:hover,
.project-detail-share-email:focus-visible { text-decoration: underline; }
.project-detail-share-toast {
  display: inline-block;
  background: #1b6a35;
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.88rem;
  margin-top: 8px;
}
.project-detail-share-toast[hidden] { display: none; }

/* Back link */
.project-detail-back-wrap {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid #eee;
}
.project-detail-back {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
}
.project-detail-back:hover,
.project-detail-back:focus-visible { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────────────
   Feature 33.1 — Per-campaign FAQ accordion on /projects/:slug
   Each Q&A is a <details>/<summary> element, closed by default. Pattern
   mirrors the F27.1 .group-footer-collapse "Contacts" disclosure (Marian
   Blue accent, 44 px tap target, chevron rotation, focus-visible outline).
   .project-faq-answer uses white-space: pre-wrap so admin-entered line
   breaks render visibly without needing rich text.
   ───────────────────────────────────────────────────────────────────────── */
.project-detail-faqs {
  margin: 56px 0 8px;
}
.project-detail-faqs h2 {
  font-size: 1.4rem;
  margin: 0 0 18px;
  color: var(--primary-color, #1B3A6B);
}
.project-faq {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #fff;
}
.project-faq > summary {
  list-style: none;                  /* hide default triangle (we draw our own chevron) */
  cursor: pointer;
  padding: 14px 18px;
  min-height: 44px;                  /* WCAG 2.1 AA tap target */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-color, #1B3A6B);
  background: rgba(27, 58, 107, 0.04);
  border-radius: 8px;
  transition: background-color 0.15s ease;
}
.project-faq > summary::-webkit-details-marker { display: none; }
.project-faq > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);          /* chevron pointing down (closed) */
  transition: transform 0.2s ease;
  margin-right: 4px;
  flex-shrink: 0;
}
.project-faq[open] > summary {
  border-radius: 8px 8px 0 0;
  background: rgba(27, 58, 107, 0.08);
}
.project-faq[open] > summary::after {
  transform: rotate(-135deg);        /* chevron pointing up (open) */
  margin-top: 4px;
}
.project-faq > summary:hover {
  background: rgba(27, 58, 107, 0.10);
}
.project-faq > summary:focus-visible {
  outline: 2px solid var(--primary-color, #1B3A6B);
  outline-offset: 2px;
}
.project-faq-answer {
  padding: 16px 18px 18px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #333;
  white-space: pre-wrap;             /* preserve admin-entered line breaks */
}
@media (max-width: 700px) {
  .project-detail-faqs h2 { font-size: 1.2rem; }
  .project-faq > summary { font-size: 0.95rem; padding: 12px 16px; }
  .project-faq-answer { padding: 14px 16px 16px; font-size: 0.92rem; }
}

/* Homepage Featured Project card (Step 6) */
.featured-project-section { padding: 40px 0 0; }
.featured-project-card {
  display: flex;
  gap: 0;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--clr-text);
  box-shadow: 0 2px 16px rgba(27, 58, 107, 0.10);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.featured-project-card:hover,
.featured-project-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27, 58, 107, 0.16);
  border-color: var(--primary-color);
  outline: none;
}
.featured-project-card:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}
.featured-project-photo {
  position: relative;
  width: 38%;
  flex-shrink: 0;
  background: #f3f3f3;
  min-height: 220px;
}
.featured-project-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-project-photo--placeholder {
  background: linear-gradient(135deg, #e9edf5 0%, #d8e0ed 100%);
}
.featured-project-body { padding: 28px 32px; flex: 1; }
.featured-project-body h3 {
  margin: 6px 0 8px;
  color: var(--primary-color);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
}
.featured-project-body p {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--clr-text);
}
.featured-project-progress-bar {
  width: 100%;
  height: 10px;
  background: #eef0f5;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}
.featured-project-progress-fill {
  height: 100%;
  background: var(--primary-color, #1B3A6B);
}
.featured-project-amounts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 0.92rem;
  color: var(--clr-text);
  margin-bottom: 14px;
}
.featured-project-amounts strong {
  color: var(--primary-color);
  font-size: 1.1rem;
  font-weight: 700;
}
.featured-project-pct {
  margin-left: auto;
  font-weight: 700;
  color: var(--primary-color);
}
.featured-project-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
}
@media (max-width: 700px) {
  .featured-project-card { flex-direction: column; }
  .featured-project-photo { width: 100%; min-height: 180px; aspect-ratio: 16 / 9; }
}

/* Donations page "Current projects" CTA (Step 6) */
.don-projects-cta-section { padding: 20px 0 0; }
.don-projects-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: #f6f8fb;
  border: 1px solid #d8e0ed;
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.don-projects-cta-text { flex: 1; }
.don-projects-cta h2 {
  margin: 6px 0 6px;
  color: var(--primary-color);
  font-size: 1.3rem;
}
.don-projects-cta p {
  margin: 0;
  color: var(--clr-text);
  font-size: 0.95rem;
  line-height: 1.55;
}
.don-projects-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.don-projects-cta-btn:hover,
.don-projects-cta-btn:focus-visible {
  background: #0d2240;
  text-decoration: none;
}
@media (max-width: 700px) {
  .don-projects-cta { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
}

/* Mobile: reduce tile left/right padding by 25% across all pages */
@media (max-width: 700px) {
  .feature-card-body       { padding-left: 18px; padding-right: 18px; }
  .news-card-body          { padding-left: 16px; padding-right: 16px; }
  .don-overview-card       { padding-left: 21px; padding-right: 21px; }
  .group-tile              { padding-left: 18px; padding-right: 18px; }
  .project-tile-body       { padding-left: 16px; padding-right: 16px; }
  .featured-project-body   { padding-left: 24px; padding-right: 24px; }
}

/* ── end Feature 29 — Fundraising Projects ──────────────────────────────────── */

/* ── Feature 04.1 — Newsletter Word Import ───────────────────────────────── */
/* Public detail page: header image, feast banner row, highlight notice */
.nl-hero-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--radius-card, 8px);
  margin: 0 0 24px;
}
@media (max-width: 700px) {
  .nl-hero-image { max-height: 200px; }
}

.nl-mass-banner td {
  background: rgba(27, 58, 107, 0.07);
  color: var(--primary-color);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(27, 58, 107, 0.18);
}

.nl-notice-item--highlight {
  border-left: 3px solid var(--clr-accent, #D4B96A);
  background: rgba(212, 185, 106, 0.08);
  padding-left: 12px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin: 4px 0;
}

/* Admin: status pill (Draft / Published) */
.nl-admin-status-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  vertical-align: middle;
}
.nl-admin-status-pill--draft {
  background: #e8e8ec;
  color: #4a4a55;
  border: 1px solid #d0d0d8;
}
.nl-admin-status-pill--published {
  background: #d4f4dd;
  color: #14633a;
  border: 1px solid #9bd7af;
}

/* Admin: status strip with Publish/Unpublish button (newsletterEdit.ejs) */
.nl-status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fafafa;
  border: 1px solid #e6e6ea;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.nl-status-hint {
  margin-left: 12px;
  font-size: 0.85rem;
  color: #666;
}

/* Admin: parsing notes panel */
.nl-parse-notes {
  background: #fefbe6;
  border: 1px solid #f0d99c;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
}
.nl-parse-notes > summary {
  cursor: pointer;
  font-size: 0.95rem;
  list-style: none;
}
.nl-parse-notes > summary::-webkit-details-marker { display: none; }
.nl-parse-notes > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
  color: var(--primary-color);
}
.nl-parse-notes[open] > summary::before { content: '▾ '; }
.nl-parse-notes-source {
  font-size: 0.82rem;
  color: #6b6053;
  margin-left: 8px;
  font-style: italic;
}
.nl-parse-notes ul {
  margin: 8px 0 4px 22px;
  padding: 0;
  font-size: 0.88rem;
}
.nl-parse-notes ul li { margin-bottom: 2px; }
.nl-parse-notes-help {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #6b6053;
}

/* Admin: header image block on edit form */
.nl-header-image-block {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 18px;
  background: #fff;
}
.nl-header-image-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  border-radius: 6px;
  margin: 0 0 12px;
  border: 1px solid #e6e6ea;
}
.nl-header-image-empty {
  font-size: 0.88rem;
  color: #777;
  margin: 0 0 12px;
  font-style: italic;
}
.nl-header-image-hint {
  font-size: 0.78rem;
  color: #888;
  margin: 8px 0 0;
}

/* Admin: import form */
.nl-import-form {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 24px;
  background: #fafafa;
  max-width: 720px;
}
.nl-import-hint {
  font-size: 0.8rem;
  color: #777;
  margin: 4px 0 0;
}
.nl-import-help {
  margin-top: 28px;
  font-size: 0.88rem;
}
.nl-import-help > summary {
  cursor: pointer;
  color: var(--primary-color);
  font-weight: 600;
}
.nl-import-help ol { margin: 10px 0 0 22px; }
.nl-import-help li { margin-bottom: 6px; }
/* ── end Feature 04.1 ────────────────────────────────────────────────────── */