/* ============================================================
   ST MICHAEL AND ALL ANGELS — PARISH WEBSITE
   Minimal aesthetic, Poppins + League Spartan only
   ============================================================ */

/* ─── Tokens ──────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg: #FFFFFF;
  --bg-soft: #FAFAF8;
  --bg-line: #ECE9E2;

  /* Brand */
  --green-deep: #1B4332;
  --green-primary: #2D6A4F;
  --green-soft: #52B788;
  --gold: #FDBA12;
  --coral: #C8553D;

  /* Text */
  --ink: #1A1612;
  --ink-muted: #5A5048;
  --ink-fade: #8A8278;

  /* Layout */
  --maxw: 1240px;
  --maxw-content: 720px;
  --gutter: 32px;
}

/* ─── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.menu-open { overflow: hidden; }

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--green-primary); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'League Spartan', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0 0 0.5em;
  line-height: 1.1;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ─── Header ──────────────────────────────────────────────── */
.site-header {
  background: var(--bg);
  padding: 32px var(--gutter) 24px;
  position: relative;
}
.site-header-row {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}
.site-wordmark {
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1;
  padding: 0 8px;
  cursor: pointer;
}
.site-wordmark .wordmark-line,
.site-wordmark .wordmark-subline {
  transition: color 0.18s ease;
}
.site-wordmark:hover .wordmark-line,
.site-wordmark:focus-visible .wordmark-line,
.site-wordmark:hover .wordmark-subline,
.site-wordmark:focus-visible .wordmark-subline {
  color: var(--green-primary);
}
.wordmark-line {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 18px;
}
.wordmark-line:first-child {
  margin-bottom: 2px;
}

.site-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 36px;
}
.site-nav--left ul { justify-content: flex-end; }
.site-nav--right ul { justify-content: flex-start; }
.site-nav a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

/* Header actions: New here button + hamburger */
.site-header-actions {
  position: absolute;
  top: 32px;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}
.new-here-button {
  display: inline-block;
  padding: 10px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.new-here-button:hover {
  background: var(--ink);
  color: var(--bg);
}

.nav-toggle {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 36px;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
}

/* Mobile header */
@media (max-width: 900px) {
  .site-header { padding: 20px var(--gutter); }
  .site-header-row { grid-template-columns: 1fr; gap: 16px; }
  .site-nav { display: none; }
  .site-wordmark { padding: 0; }
  .wordmark-line { font-size: 16px; letter-spacing: 2.5px; }
  .site-header-actions {
    top: 20px;
  }
  .new-here-button { padding: 8px 14px; font-size: 11px; letter-spacing: 2px; }
}

/* ─── More menu (slide-out) ───────────────────────────────── */
.more-menu {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 18, 0.4);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.more-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.more-menu-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--bg);
  padding: 32px 36px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
.more-menu.is-open .more-menu-inner {
  transform: translateX(0);
}
.more-menu-close {
  position: absolute;
  top: 16px;
  right: 24px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--ink);
  line-height: 1;
  padding: 8px;
}
.more-menu-nav {
  margin-top: 40px;
}
.more-menu-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-fade);
  margin: 24px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-line);
}
.more-menu-label:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.more-menu-nav ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.more-menu-nav li {}
.more-menu-nav a {
  display: block;
  padding: 8px 0;
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--ink);
  text-decoration: none;
}
.more-menu-nav a:hover { color: var(--green-primary); }
.more-menu-link--highlight { color: var(--coral) !important; }

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 60px var(--gutter) 80px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-text {
  display: flex;
  flex-direction: column;
}
.hero-greeting {
  font-family: 'League Spartan', sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.75vw, 35.2px);
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--ink-muted);
  margin: 0 0 16px;
  line-height: 1;
}
.hero-headline {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -1px;
  margin: 0 0 32px;
  color: var(--ink);
}
.hero-headline span {
  display: block;
}
.hero-headline span:first-child {
  font-weight: 400;
  font-size: 0.55em;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--ink-muted);
}
.hero-description {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 28em;
}
.hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-art img {
  width: 100%;
  max-width: 480px;
  height: auto;
  display: block;
}

@media (max-width: 900px) {
  .hero { padding: 40px var(--gutter) 56px; }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero-art { order: -1; }
  .hero-art img { max-width: 280px; }
}

/* ─── Portal sections ─────────────────────────────────────── */
.portal-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--gutter);
}
.portal-section:empty { display: none; padding: 0; }

/* ─── Explore (three large links) ─────────────────────────── */
.explore {
  max-width: var(--maxw);
  margin: 40px auto 0;
  padding: 0 var(--gutter);
}
.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--bg-line);
  border-bottom: 1px solid var(--bg-line);
}
.explore-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  text-decoration: none;
  color: var(--ink);
  border-right: 1px solid var(--bg-line);
  transition: background 0.15s;
  position: relative;
}
.explore-card:last-child { border-right: none; }
.explore-card:hover { background: var(--bg-soft); color: var(--ink); }
.explore-card:hover .explore-arrow { transform: translateX(4px); }
.explore-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-fade);
  margin-bottom: 12px;
}
.explore-title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.3px;
  color: var(--ink);
  line-height: 1.1;
}
.explore-arrow {
  position: absolute;
  top: 32px;
  right: 28px;
  font-size: 22px;
  color: var(--ink-fade);
  transition: transform 0.15s, color 0.15s;
}
.explore-card:hover .explore-arrow { color: var(--green-primary); }

@media (max-width: 900px) {
  .explore-grid { grid-template-columns: 1fr; }
  .explore-card { border-right: none; border-bottom: 1px solid var(--bg-line); }
  .explore-card:last-child { border-bottom: none; }
}

/* ─── Daily (readings + sermons) ──────────────────────────── */
.daily {
  max-width: var(--maxw);
  margin: 60px auto 0;
  padding: 0 var(--gutter);
}
.daily-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.daily-block {
  display: flex;
  flex-direction: column;
}
.daily-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-fade);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-line);
}
.daily-prayer {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-left: 2px solid var(--green-primary);
}
.daily-prayer-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green-primary);
  margin: 0 0 6px;
}
.daily-prayer-text { color: var(--ink-muted); font-size: 15px; }
.daily-link {
  display: inline-block;
  margin-top: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.daily-link:hover { color: var(--green-primary); border-bottom-color: var(--green-primary); }

@media (max-width: 900px) {
  .daily { margin-top: 40px; }
  .daily-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ─── Inner page layout ───────────────────────────────────── */

/* The outer page container uses the wide max-width.
   Inner text content stays narrow via .page-content default width.
   Media blocks break out to wider via .block-width-wide on the block. */

:root {
  --maxw-text: 720px;
  --maxw-wide: 1040px;
}

.page {
  max-width: var(--maxw-wide);
  margin: 0 auto;
  padding: 40px var(--gutter) 80px;
}
.page-header {
  max-width: var(--maxw-text);
  margin: 0 auto 40px;
}
.page-title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 16px;
  color: var(--ink);
}
.page-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: var(--ink-muted);
  margin: 0 0 24px;
  line-height: 1.4;
}
.page-intro {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.6;
  max-width: 36em;
}

/* Page content: max-width centered narrow column by default.
   Media-style children expand wider via .block-breakout class. */
.page-content {
  font-size: 17px;
  color: var(--ink);
  max-width: var(--maxw-text);
  margin: 0 auto;
}
.page-content p { margin-bottom: 1.2em; line-height: 1.7; color: var(--ink-muted); }
.page-content h2 {
  font-family: 'League Spartan', sans-serif;
  font-size: 28px;
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.page-content h3 {
  font-family: 'League Spartan', sans-serif;
  font-size: 22px;
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  color: var(--ink);
}
.page-content ul, .page-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
  color: var(--ink-muted);
}
.page-content li { margin-bottom: 0.15em; line-height: 1.6; }
.page-content li > p { margin: 0; }
.page-content a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-fade);
  text-decoration: none;
}
.page-content a:hover { color: var(--green-primary); border-bottom-color: var(--green-primary); }
.page-content strong { color: var(--ink); font-weight: 600; }

/* MEDIA BREAKOUT: certain blocks expand to a wider canvas inside .page-content.
   Achieved via negative margins that overflow the narrow text column. */
.page-content .block-image,
.page-content .block-photo-grid,
.page-content .block-people-grid,
.page-content .block-photo-text,
.page-content .block-map,
.page-content .block-video-embed,
.page-content .block-card-row,
.page-content .block-faq {
  width: var(--maxw-wide);
  max-width: calc(100vw - var(--gutter) * 2);
  margin-left: calc(((var(--maxw-text)) - var(--maxw-wide)) / 2);
  margin-right: auto;
}

/* On smaller viewports, breakout blocks just stay within text column width */
@media (max-width: 1100px) {
  .page-content .block-image,
  .page-content .block-photo-grid,
  .page-content .block-people-grid,
  .page-content .block-photo-text,
  .page-content .block-map,
  .page-content .block-video-embed,
  .page-content .block-card-row,
  .page-content .block-faq {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.page-back {
  max-width: var(--maxw-text);
  margin: 64px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--bg-line);
}
.back-link {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-muted);
}
.back-link:hover { color: var(--ink); }

/* ─── Blocks ──────────────────────────────────────────────── */
.block-section-heading { margin: 2.5em 0 0.6em; }
.block-section-heading__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-fade);
  margin: 0 0 6px;
}
.block-section-heading__title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 28px;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.block-divider {
  border: none;
  height: 1px;
  background: var(--bg-line);
  margin: 16px 0;
}
.block-spacer { height: 32px; }
.block-portal-embed { margin: 16px auto; padding-top: 0; padding-bottom: 0; }
.block-raw-html { margin: 32px 0; }

/* --- Page contents - horizontal pill menu --- */
.block-page-contents {
  margin: 1.5em 0 2.5em;
}
.block-page-contents ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.block-page-contents a {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--bg-line);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.block-page-contents a:hover,
.block-page-contents a:focus {
  border-color: var(--ink);
  color: var(--ink);
}

@media (max-width: 600px) {
  .block-page-contents ul {
    flex-direction: column;
    gap: 6px;
  }
  .block-page-contents a {
    display: block;
    text-align: center;
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 7px 12px;
    border-color: var(--ink-muted);
    color: var(--ink);
  }
}


/* ─── Contact form ────────────────────────────────────────── */
.contact-email,
.contact-form-wrap,
.page-contact .block-map,
.page-back {
  max-width: var(--maxw-text);
  margin-left: auto !important;
  margin-right: auto !important;
}
.page-contact .portal-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.contact-email {
  font-size: 17px;
  color: var(--ink-muted);
  margin-bottom: 32px;
}
.contact-email a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}
.contact-form-wrap { margin-bottom: 32px; }
.form-success {
  padding: 20px 24px;
  border: 1.5px solid var(--green-primary);
  background: var(--bg-soft);
  color: var(--green-deep);
}
.form-error {
  padding: 16px 20px;
  border: 1.5px solid var(--coral);
  color: var(--coral);
  margin-bottom: 16px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-form label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink, #1A1612);
  transition: color 0.15s;
}
.contact-form input,
.contact-form textarea {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 11px 14px;
  border: 1px solid var(--ink-faint, #E8E2D9);
  background: #FFFFFF;
  color: var(--ink, #1A1612);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.contact-form input:hover,
.contact-form textarea:hover {
  border-color: var(--ink-muted, #8B8378);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--green-primary, #2D6A4F);
  border-width: 1.5px;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12);
}
/* When an input is focused, turn its sibling label green */
.contact-form-row:focus-within label {
  color: var(--green-primary, #2D6A4F);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ink-muted, #8B8378);
  opacity: 1;
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-form-actions {
  margin-top: 8px;
}
.contact-form button {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 13px 32px;
  background: var(--ink, #1A1612);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}
.contact-form button:hover {
  background: var(--green-primary, #2D6A4F);
}

/* ─── Footer ──────────────────────────────────────────────── */
.site-footer {
  margin-top: 100px;
  background: var(--bg);
  border-top: 1px solid var(--bg-line);
  padding-top: 56px;
}

/* Footer columns — flexible flex layout.
   Each .footer-col carries a --w-narrow / --w-standard / --w-wide class
   controlling its preferred basis. Columns wrap as needed.
   Optional .footer-col--hide-mobile hides on small screens. */
.site-footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: flex-start;
  justify-content: space-between;
}
.footer-col { min-width: 0; }

/* Column-width preferred basis. The flex-basis is the column's target
   width on desktop; flex-grow lets them stretch evenly to fill the row. */
.footer-col--w-narrow   { flex: 1 1 140px; max-width: 220px; }
.footer-col--w-standard { flex: 1 1 200px; max-width: 320px; }
.footer-col--w-wide     { flex: 2 1 320px; max-width: 520px; }

/* Shared text styles in all footer cols. */
.footer-wordmark {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink);
  margin: 0 0 16px;
}
.footer-address {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.7;
  margin-bottom: 12px;
}
.footer-contact a {
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-fade);
}
.footer-contact a:hover { border-bottom-color: var(--ink); }
.footer-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-fade);
  margin: 0 0 12px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li { margin-bottom: 8px; }
.footer-col--links a,
.footer-col--richtext a {
  font-size: 14px;
  color: var(--ink-muted);
  text-decoration: none;
}
.footer-col--links a:hover,
.footer-col--richtext a:hover { color: var(--ink); }

/* Logo block. */
.footer-col--logo img {
  max-width: 100%;
  height: auto;
  display: block;
}
.footer-logo-link { display: inline-block; }
.footer-logo-caption {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-fade);
}

/* Rich text block. */
.footer-richtext-body {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
}
.footer-richtext-body p { margin: 0 0 0.8em; }
.footer-richtext-body p:last-child { margin-bottom: 0; }
.footer-richtext-body ul { padding-left: 20px; margin: 0 0 0.8em; }
.footer-richtext-body ul li { margin-bottom: 4px; list-style: disc; }

/* Stacked column — vertical layout of inner items. */
.footer-col--stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.footer-stack-item { display: block; }
.footer-stack-item > p:last-child,
.footer-stack-item > ul:last-child { margin-bottom: 0; }

/* Social icons. */
.footer-social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.footer-social-list li { margin: 0; }
.footer-social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ink-muted);
  background: var(--bg-soft);
  transition: color 0.15s ease, background 0.15s ease;
}
.footer-social-list a:hover {
  color: var(--bg);
  background: var(--ink);
}
.footer-social-list svg { width: 18px; height: 18px; }

.site-footer-bottom {
  border-top: 1px solid var(--bg-line);
  padding: 20px var(--gutter);
  text-align: center;
  font-size: 12px;
  color: var(--ink-fade);
}

@media (max-width: 900px) {
  .site-footer { margin-top: 60px; padding-top: 40px; }
  /* Stack columns one per row on mobile. */
  .site-footer-inner {
    flex-direction: column;
    gap: 28px;
  }
  /* All column-width classes become full width on mobile. */
  .footer-col--w-narrow,
  .footer-col--w-standard,
  .footer-col--w-wide { flex: 1 1 auto; max-width: 100%; }
  /* Per-block opt-out of mobile rendering. */
  .footer-col--hide-mobile { display: none; }
}

/* ─── New blocks ──────────────────────────────────────────── */

/* Photo grid */
.block-photo-grid { margin: 2.5em 0; }
.block-photo-grid__grid {
  display: grid;
  gap: 12px;
}
.block-photo-grid--grid2x2 .block-photo-grid__grid {
  grid-template-columns: 1fr 1fr;
}
.block-photo-grid--grid3up .block-photo-grid__grid {
  grid-template-columns: repeat(3, 1fr);
}
.block-photo-grid--grid4up .block-photo-grid__grid {
  grid-template-columns: repeat(4, 1fr);
}
.block-photo-grid__item {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.block-photo-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.block-photo-grid__caption {
  margin-top: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-fade);
  text-align: center;
}
@media (max-width: 700px) {
  .block-photo-grid--grid4up .block-photo-grid__grid,
  .block-photo-grid--grid3up .block-photo-grid__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Linked photo grid
   Editorial style — no card framing. Photo on top, label below in
   League Spartan, link covers both. Hover only underlines the label.
   Photo fit:
     fill (default) — object-fit: cover, all photos render at the same
                      uniform size (some cropping)
     fit            — object-fit: contain, whole photo always visible
                      (may leave empty space around it) */
.block-linked-photo-grid { margin: 2.5em 0; }
.block-linked-photo-grid__caption {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 18px;
  text-align: center;
}
.block-linked-photo-grid__grid {
  display: grid;
  gap: 28px 20px;
}
.block-linked-photo-grid--grid2x2 .block-linked-photo-grid__grid {
  grid-template-columns: 1fr 1fr;
}
.block-linked-photo-grid--grid3up .block-linked-photo-grid__grid {
  grid-template-columns: repeat(3, 1fr);
}
.block-linked-photo-grid--grid4up .block-linked-photo-grid__grid {
  grid-template-columns: repeat(4, 1fr);
}
.block-linked-photo-grid__item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  color: var(--ink);
}
.block-linked-photo-grid__item:hover,
.block-linked-photo-grid__item:focus-visible {
  text-decoration: none;
  color: var(--ink);
}
.block-linked-photo-grid__item:hover .block-linked-photo-grid__label,
.block-linked-photo-grid__item:focus-visible .block-linked-photo-grid__label {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.block-linked-photo-grid__item:focus-visible {
  outline: 2px solid var(--green-primary, #2D6A4F);
  outline-offset: 2px;
}
.block-linked-photo-grid__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.block-linked-photo-grid__photo img {
  width: 100%;
  height: 100%;
  display: block;
}
/* Fill: crop to uniform size (default) */
.block-linked-photo-grid--fit-fill .block-linked-photo-grid__photo img {
  object-fit: cover;
}
/* Fit: preserve whole photo, may letterbox */
.block-linked-photo-grid--fit-fit .block-linked-photo-grid__photo img {
  object-fit: contain;
}
.block-linked-photo-grid__label {
  display: block;
  margin-top: 12px;
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 700px) {
  .block-linked-photo-grid--grid3up .block-linked-photo-grid__grid,
  .block-linked-photo-grid--grid4up .block-linked-photo-grid__grid {
    grid-template-columns: 1fr 1fr;
  }
  .block-linked-photo-grid__label { font-size: 14px; margin-top: 10px; }
}

/* Single image
   Five rendering widths:
     narrow      ~50% of prose, centred (good for portraits / small photos)
     standard    matches the prose column (~720px) — the safe default
     wide        fills the content container (~1040px) — bigger than prose
     extra_wide  extends beyond the container, stops at the page gutters
     full_width  true edge-to-edge to the browser window, capped at 1920px
   All collapse to 100% on mobile (≤700px) so they're touch-friendly. */
.block-image { margin: 2.5em 0; }
.block-image img { width: 100%; height: auto; display: block; }
/* Width variants are scoped under .page-content / .block-container__inner
   so they beat the generic .page-content .block-image rule which sets
   width: var(--maxw-wide). Without this scoping they're ignored. */
.page-content .block-image--narrow,
.block-container__inner .block-image--narrow {
  width: 50%;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.page-content .block-image--standard,
.block-container__inner .block-image--standard {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.page-content .block-image--wide,
.block-container__inner .block-image--wide {
  width: 100%;
  max-width: var(--maxw-wide, 1040px);
  margin-left: auto;
  margin-right: auto;
}
.page-content .block-image--extra_wide,
.block-container__inner .block-image--extra_wide {
  width: auto;
  margin-left: calc(50% - 50vw + var(--gutter));
  margin-right: calc(50% - 50vw + var(--gutter));
  max-width: calc(100vw - var(--gutter) * 2);
}
.page-content .block-image--full_width,
.block-container__inner .block-image--full_width {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
.page-content .block-image--full_width img,
.block-container__inner .block-image--full_width img {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}
.block-image__caption {
  margin-top: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-fade);
  text-align: center;
}
@media (max-width: 700px) {
  .page-content .block-image--narrow,
  .page-content .block-image--standard,
  .block-container__inner .block-image--narrow,
  .block-container__inner .block-image--standard { width: 100%; max-width: 100%; }
  .page-content .block-image--extra_wide,
  .page-content .block-image--full_width,
  .block-container__inner .block-image--extra_wide,
  .block-container__inner .block-image--full_width { margin-left: 0; margin-right: 0; max-width: 100%; }
  .page-content .block-image--full_width img,
  .block-container__inner .block-image--full_width img { max-width: 100%; }
}

/* Photo + text */
.block-photo-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 3em 0;
  align-items: center;
}
.block-photo-text--right .block-photo-text__image {
  order: 2;
}
.block-photo-text__image img {
  width: 100%;
  height: auto;
  display: block;
}
.block-photo-text__heading {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.3px;
  margin: 0 0 12px;
  color: var(--ink);
}
.block-photo-text__text { color: var(--ink-muted); line-height: 1.7; }
@media (max-width: 700px) {
  .block-photo-text { grid-template-columns: 1fr; gap: 20px; }
  .block-photo-text--right .block-photo-text__image { order: 0; }
}

/* Pull quote */
.block-pullquote {
  margin: 2.5em 0;
  padding: 24px 0 24px 28px;
  border-left: 2px solid var(--green-primary);
}
.block-pullquote__text {
  font-family: 'League Spartan', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0 0 12px;
}
.block-pullquote__attribution {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-muted);
}

/* Button */
.block-button-wrap { margin: 2em 0; }
.block-button-wrap--center { text-align: center; }
.block-button {
  display: inline-block;
  padding: 14px 28px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.block-button--outline {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.block-button--outline:hover {
  background: var(--ink);
  color: var(--bg);
}
.block-button--filled {
  background: var(--ink);
  color: var(--bg);
  border: 1.5px solid var(--ink);
}
.block-button--filled:hover {
  background: var(--green-primary);
  border-color: var(--green-primary);
}

/* Card row */
.block-card-row { margin: 2.5em 0; }
.block-card-row__intro {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-fade);
  margin: 0 0 16px;
  text-align: center;
}
.block-card-row__grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--bg-line);
  border-bottom: 1px solid var(--bg-line);
}
.block-card-row--2 .block-card-row__grid { grid-template-columns: repeat(2, 1fr); }
.block-card-row--3 .block-card-row__grid { grid-template-columns: repeat(3, 1fr); }
.block-card-row--4 .block-card-row__grid { grid-template-columns: repeat(4, 1fr); }
.block-card-row__card {
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  text-decoration: none;
  color: var(--ink);
  border-right: 1px solid var(--bg-line);
  transition: background 0.15s;
  position: relative;
}
.block-card-row__card:last-child { border-right: none; }
.block-card-row__card:hover { background: var(--bg-soft); color: var(--ink); }
.block-card-row__card:hover .block-card-row__arrow { transform: translateX(4px); color: var(--green-primary); }
.block-card-row__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-fade);
  margin-bottom: 10px;
}
.block-card-row__title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.2px;
  color: var(--ink);
  line-height: 1.15;
}
.block-card-row__description {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-muted);
}
.block-card-row__arrow {
  position: absolute;
  top: 24px;
  right: 20px;
  font-size: 20px;
  color: var(--ink-fade);
  transition: transform 0.15s, color 0.15s;
}
@media (max-width: 700px) {
  .block-card-row--2 .block-card-row__grid,
  .block-card-row--3 .block-card-row__grid,
  .block-card-row--4 .block-card-row__grid { grid-template-columns: 1fr; }
  .block-card-row__card { border-right: none; border-bottom: 1px solid var(--bg-line); }
  .block-card-row__card:last-child { border-bottom: none; }
}

/* Two columns */
.block-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 2.5em 0;
}
.block-two-columns__heading {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.2px;
  margin: 0 0 12px;
  color: var(--ink);
}
.block-two-columns__text { color: var(--ink-muted); line-height: 1.7; }
@media (max-width: 700px) {
  .block-two-columns { grid-template-columns: 1fr; gap: 24px; }
}

/* Info box */
.block-info-box {
  margin: 2.5em 0;
  padding: 24px 28px;
  border-radius: 4px;
  border-left: 3px solid;
}
.block-info-box--neutral {
  background: var(--bg-soft);
  border-left-color: var(--ink-muted);
}
.block-info-box--green {
  background: #EBF4EE;
  border-left-color: var(--green-primary);
}
.block-info-box--gold {
  background: #FBF4DC;
  border-left-color: var(--gold);
}
.block-info-box__heading {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.block-info-box__text { color: var(--ink-muted); }
.block-info-box__text p:last-child { margin-bottom: 0; }

/* People grid */
.block-people-grid { margin: 2.5em 0; }
.block-people-grid__intro {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.3px;
  margin: 0 0 24px;
}
.block-people-grid__grid {
  display: grid;
  gap: 32px 24px;
}
/* Column variants */
.block-people-grid--cols-2 .block-people-grid__grid { grid-template-columns: repeat(2, 1fr); }
.block-people-grid--cols-3 .block-people-grid__grid { grid-template-columns: repeat(3, 1fr); }
.block-people-grid--cols-4 .block-people-grid__grid { grid-template-columns: repeat(4, 1fr); }

/* Width variants — scoped under .page-content / .block-container__inner so
   they beat the generic .page-content .block-people-grid rule which sets
   width: var(--maxw-wide). Mirror the .block-image width variants. */
.page-content .block-people-grid--w-narrow,
.block-container__inner .block-people-grid--w-narrow {
  width: 50%;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.page-content .block-people-grid--w-standard,
.block-container__inner .block-people-grid--w-standard {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.page-content .block-people-grid--w-wide,
.block-container__inner .block-people-grid--w-wide {
  width: 100%;
  max-width: var(--maxw-wide, 1040px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .page-content .block-people-grid--w-narrow,
  .page-content .block-people-grid--w-standard,
  .page-content .block-people-grid--w-wide,
  .block-container__inner .block-people-grid--w-narrow,
  .block-container__inner .block-people-grid--w-standard,
  .block-container__inner .block-people-grid--w-wide { width: 100%; max-width: 100%; }
}

.block-people-grid__person {
  display: flex;
  flex-direction: column;
}
.block-people-grid__photo {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg-soft);
  margin-bottom: 16px;
  width: 100%;
  max-width: 100%;
}
/* Shape variants */
.block-people-grid--circle .block-people-grid__photo {
  border-radius: 50%;
  width: 140px;
  height: 140px;
}
.block-people-grid--square .block-people-grid__photo {
  border-radius: 4px;
}
/* In smaller column counts, circles can stay generous; in 4-cols force smaller */
.block-people-grid--cols-4.block-people-grid--circle .block-people-grid__photo {
  width: 110px;
  height: 110px;
}

.block-people-grid__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block-people-grid__photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-people-grid__photo--placeholder span {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 42px;
  color: var(--ink-fade);
}
/* Name & role: parent selector bumps specificity above .page-content p
   which would otherwise inject a 1.2em margin-bottom. */
.block-people-grid .block-people-grid__name {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 2px;
}
.block-people-grid .block-people-grid__role {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 500;
}
.block-people-grid__bio {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
}
@media (max-width: 700px) {
  .block-people-grid--cols-3 .block-people-grid__grid,
  .block-people-grid--cols-4 .block-people-grid__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }
  .block-people-grid--circle .block-people-grid__photo { width: 110px; height: 110px; }
}
@media (max-width: 420px) {
  .block-people-grid__grid { grid-template-columns: 1fr !important; }
}

/* Video embed */
.block-video-embed { margin: 2.5em 0; }
.block-video-embed__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-soft);
  overflow: hidden;
  border-radius: 8px;
}
.block-video-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.block-video-embed__caption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-fade);
  text-align: center;
}

/* Width variants — mirror .block-image--* rules.
   Scoped under .page-content / .block-container__inner so they beat the
   generic breakout rule that gives every block --maxw-wide width. */
.page-content .block-video-embed--narrow,
.block-container__inner .block-video-embed--narrow {
  width: 50%;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.page-content .block-video-embed--standard,
.block-container__inner .block-video-embed--standard {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.page-content .block-video-embed--wide,
.block-container__inner .block-video-embed--wide {
  width: 100%;
  max-width: var(--maxw-wide, 1040px);
  margin-left: auto;
  margin-right: auto;
}
.page-content .block-video-embed--extra_wide,
.block-container__inner .block-video-embed--extra_wide {
  width: auto;
  margin-left: calc(50% - 50vw + var(--gutter));
  margin-right: calc(50% - 50vw + var(--gutter));
  max-width: calc(100vw - var(--gutter) * 2);
}
.page-content .block-video-embed--full_width,
.block-container__inner .block-video-embed--full_width {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
@media (max-width: 700px) {
  .page-content .block-video-embed--narrow,
  .page-content .block-video-embed--standard,
  .block-container__inner .block-video-embed--narrow,
  .block-container__inner .block-video-embed--standard { width: 100%; max-width: 100%; }
  .page-content .block-video-embed--extra_wide,
  .page-content .block-video-embed--full_width,
  .block-container__inner .block-video-embed--extra_wide,
  .block-container__inner .block-video-embed--full_width { margin-left: 0; margin-right: 0; max-width: 100%; }
}

/* FAQ */
.block-faq { margin: 2.5em 0; }
.block-faq__intro {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.3px;
  margin: 0 0 16px;
}
.block-faq__item {
  border-top: 1px solid var(--bg-line);
}
.block-faq__list .block-faq__item:last-child { border-bottom: 1px solid var(--bg-line); }
.block-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.block-faq__question::-webkit-details-marker { display: none; }
.block-faq__icon {
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-fade);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.block-faq__item[open] .block-faq__icon {
  transform: rotate(45deg);
}
.block-faq__answer {
  padding: 0 0 20px;
  color: var(--ink-muted);
  line-height: 1.7;
}

/* Map */
.block-map { margin: 2.5em 0; }
.block-map__heading {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.2px;
  margin: 0 0 12px;
}
.block-map__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-soft);
  overflow: hidden;
  border-radius: 8px;
}
.block-map__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.block-map__address {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-muted);
}
.block-map__address a {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-fade);
}

/* ─── Homepage-specific block adjustments ─────────────────── */

/* On homepage, card row goes full width with thicker borders */
.home > .block-card-row {
  max-width: var(--maxw);
  margin: 40px auto;
  padding: 0 var(--gutter);
}
.home > .block-card-row .block-card-row__card {
  padding: 32px 28px;
}
.home > .block-card-row .block-card-row__title {
  font-size: 26px;
}
.home > .block-card-row .block-card-row__arrow {
  top: 32px;
  right: 28px;
  font-size: 22px;
}

/* Single daily-prompts visible (only readings or only sermons) */
.daily-grid--single {
  grid-template-columns: 1fr;
  max-width: 600px;
  margin: 0 auto;
}

/* Better home spacing between blocks */
.home > .hero + .portal-section,
.home > .portal-section + .portal-section {
  margin-top: 0;
}

/* ============================================================
   BLOCK WIDTH SYSTEM
   Half and Third widths flow side by side inside .block-row.
   ============================================================ */

/* Row container — wraps consecutive non-full-width blocks */
.block-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 2em 0;
}

/* Width classes — applied to the block itself */
.block-width-full {
  flex: 1 1 100%;
}

/* Half width: 2 fit per row with gap */
.block-width-half {
  flex: 1 1 calc(50% - 16px);
  min-width: 0;
}

/* Third width: 3 fit per row with gaps */
.block-width-third {
  flex: 1 1 calc(33.333% - 22px);
  min-width: 0;
}

/* On homepage, .block-row needs to inherit the home max-width */
.home > .block-row {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--gutter);
}

/* Mobile: everything stacks to full width, gap reduces */
@media (max-width: 800px) {
  .block-row {
    gap: 24px;
    flex-direction: column;
  }
  .block-width-half,
  .block-width-third {
    flex: 1 1 100%;
  }
}

/* Mobile first: this block moves to the top within its row */
@media (max-width: 800px) {
  .block-row .block-mobile-first {
    order: -1;
  }
}

/* Hide on mobile */
@media (max-width: 800px) {
  .block-hide-mobile {
    display: none !important;
  }
}

/* Block content inside row needs spacing reset since row handles it */
.block-row > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Readings & prayer / podcast embed - common styles */
.block-readings-prayer,
.block-podcast-embed {
  display: flex;
  flex-direction: column;
}
.block-readings-prayer .daily-label,
.block-podcast-embed .daily-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--ink-fade);
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bg-line);
}
.block-readings-prayer .daily-prayer {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--bg-soft);
  border-left: 2px solid var(--green-primary);
}
.block-readings-prayer .daily-prayer-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--green-primary);
  margin: 0 0 6px;
}
.block-readings-prayer .daily-prayer-text {
  color: var(--ink-muted);
  font-size: 15px;
}
.block-podcast-embed .daily-link {
  display: inline-block;
  margin-top: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  align-self: flex-start;
}
.block-podcast-embed .daily-link:hover {
  color: var(--green-primary);
  border-bottom-color: var(--green-primary);
}


/* ============================================================
   HOMEPAGE BLOCK CENTRING
   Ensure all direct children of .home are constrained and centred
   ============================================================ */

/* Direct full-width blocks inside .home get max-width + auto margins */
.home > .block-readings-prayer,
.home > .block-podcast-embed,
.home > .block-rich-text,
.home > .block-section-heading,
.home > .block-pullquote,
.home > .block-button-wrap,
.home > .block-info-box,
.home > .block-image,
.home > .block-photo-text,
.home > .block-photo-grid,
.home > .block-people-grid,
.home > .block-faq,
.home > .block-map,
.home > .block-video-embed,
.home > .block-two-columns,
.home > .block-divider {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: border-box;
  width: 100%;
}

/* Block-row already has its own padding/max-width — don't double up */
.home > .block-row {
  max-width: var(--maxw);
  margin: 32px auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
  width: 100%;
}

/* Blocks INSIDE a block-row should not get the home padding */
.block-row .block-readings-prayer,
.block-row .block-podcast-embed,
.block-row .block-rich-text,
.block-row .block-section-heading,
.block-row .block-pullquote,
.block-row .block-button-wrap,
.block-row .block-info-box,
.block-row .block-image,
.block-row .block-photo-text,
.block-row .block-faq,
.block-row .block-map,
.block-row .block-video-embed,
.block-row .block-divider {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}


/* ============================================================
   Parallax banner block
   ============================================================ */

.block-parallax {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Mobile: disable fixed bg (poor browser support, causes jank) */
@media (max-width: 900px) {
  .block-parallax { background-attachment: scroll; }
}

/* Heights */
.block-parallax--small      { min-height: 300px; }
.block-parallax--medium     { min-height: 450px; }
.block-parallax--tall       { min-height: 600px; }
.block-parallax--xtall      { min-height: 800px; }
.block-parallax--fullscreen { min-height: 100vh; }

/* Inner container — content lives here at normal text width */
.block-parallax__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw-wide, 1040px);
  margin: 0 auto;
  padding: 48px var(--gutter, 32px);
  box-sizing: border-box;
  display: flex;
}

.block-parallax--align-left   .block-parallax__inner { justify-content: flex-start; }
.block-parallax--align-center .block-parallax__inner { justify-content: center;    text-align: center; }
.block-parallax--align-right  .block-parallax__inner { justify-content: flex-end;  text-align: right; }

.block-parallax__content {
  max-width: 640px;
}

/* Overlay (darkening layer) */
.block-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.block-parallax--overlay-none::before   { background: transparent; }
.block-parallax--overlay-light::before  { background: rgba(0,0,0,0.20); }
.block-parallax--overlay-medium::before { background: rgba(0,0,0,0.40); }
.block-parallax--overlay-heavy::before  { background: rgba(0,0,0,0.60); }

/* Text colours */
.block-parallax--text-light .block-parallax__heading,
.block-parallax--text-light .block-parallax__subheading {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.block-parallax--text-dark .block-parallax__heading,
.block-parallax--text-dark .block-parallax__subheading {
  color: var(--ink, #1A1612);
}

.block-parallax__heading {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.block-parallax__subheading {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.5;
  margin: 0 0 24px;
}

.block-parallax__button {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border: 2px solid currentColor;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.block-parallax--text-light .block-parallax__button { color: #fff; }
.block-parallax--text-light .block-parallax__button:hover { background: #fff; color: var(--ink, #1A1612); }
.block-parallax--text-dark  .block-parallax__button { color: var(--ink, #1A1612); }
.block-parallax--text-dark  .block-parallax__button:hover { background: var(--ink, #1A1612); color: #fff; }

/* ============================================================
   Container block
   ============================================================ */

.block-container {
  width: 100%;
  margin: 32px 0;
  box-sizing: border-box;
}

/* Tone */
.block-container--tone-white       { background: var(--bg, #fff); }
.block-container--tone-cream       { background: var(--bg-soft, #FAFAF8); }
.block-container--tone-green       { background: var(--green-primary, #2D6A4F); color: #fff; }
.block-container--tone-gold        { background: var(--gold, #FDBA12); color: var(--ink, #1A1612); }
.block-container--tone-transparent { background: transparent; }

.block-container--tone-green a   { color: var(--gold, #FDBA12); }
.block-container--tone-green h2,
.block-container--tone-green h3,
.block-container--tone-green h4 { color: #fff; }

/* Padding */
.block-container--pad-none   .block-container__inner { padding: 0; }
.block-container--pad-small  .block-container__inner { padding: 20px 24px; }
.block-container--pad-medium .block-container__inner { padding: 40px 32px; }
.block-container--pad-large  .block-container__inner { padding: 64px 40px; }

/* Pad-none containers have no outer margin either, so they flow as
   tightly as plain text blocks. */
.block-container--pad-none { margin: 0; }

/* Transparent containers have no visible box, so horizontal padding only
   shrinks their content for no visible reason. Zero out horizontal padding
   so content sits flush with the surrounding page text. Vertical padding
   stays so consecutive containers don't collide. Coloured containers
   (white/cream/green/gold) keep their full padding to breathe inside
   their visible box. */
.block-container--tone-transparent.block-container--pad-small  .block-container__inner,
.block-container--tone-transparent.block-container--pad-medium .block-container__inner,
.block-container--tone-transparent.block-container--pad-large  .block-container__inner {
  padding-left: 0;
  padding-right: 0;
}

/* Rounded corners */
.block-container--rounded { border-radius: 12px; overflow: hidden; }

/* Width modes */
.block-container__inner {
  margin: 0 auto;
  box-sizing: border-box;
}
.block-container--w-text .block-container__inner { max-width: var(--maxw-text, 720px); }
.block-container--w-wide .block-container__inner { max-width: var(--maxw-wide, 1040px); }

.block-container--w-full {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}
.block-container--w-full .block-container__inner { max-width: var(--maxw-wide, 1040px); }


/* ============================================================
   Columns block
   ============================================================ */

.block-columns {
  display: grid;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.block-columns--cols2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.block-columns--cols3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }

/* Two-column ratios — only apply when cols2 is set. The cols2 default rule
   above already sets 1:1; these override for non-equal ratios. */
.block-columns--cols2.block-columns--ratio-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.block-columns--cols2.block-columns--ratio-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.block-columns--cols2.block-columns--ratio-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.block-columns--cols2.block-columns--ratio-2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

/* Inside columns, any block fills its column regardless of width class */
.block-columns__col > *,
.block-columns__col .block-image,
.block-columns__col .block-image.block-width-full,
.block-columns__col .block-image.block-width-half,
.block-columns__col .block-image.block-width-third,
.block-columns__col .block-image.block-width-two-thirds {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.block-columns__col img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}
/* Tighten top/bottom margin of blocks inside columns so they don't add huge gaps */
.block-columns__col > * { margin-top: 0; margin-bottom: 0; }
.block-columns__col > * + * { margin-top: 16px; }

/* Strip stray margins from inner paragraphs at the top and bottom of a
   column's rich text — they create invisible whitespace that breaks visual
   vertical centring against image columns. */
.block-columns__col .block-rich-text > p:first-child { margin-top: 0; }
.block-columns__col .block-rich-text > p:last-child { margin-bottom: 0; }
.block-columns__col .block-rich-text { margin-top: 0; margin-bottom: 0; }

.block-columns--gap-small  { gap: 16px; }
.block-columns--gap-medium { gap: 32px; }
.block-columns--gap-large  { gap: 64px; }

.block-columns--valign-top    { align-items: start; }
.block-columns--valign-middle { align-items: center; }
.block-columns--valign-bottom { align-items: end; }

/* When vertically aligning, also make each column a flex container so its
   internal content aligns the same way (not just the column box). This makes
   image+text actually visually centred to each other, not just bounded. */
.block-columns--valign-middle .block-columns__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.block-columns--valign-bottom .block-columns__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.block-columns__col > * { margin-top: 0; }
.block-columns__col > *:first-child { margin-top: 0; }

/* Mobile: stack all columns to a single column. Specificity bumped to
   match the ratio rules above (.block-columns--cols2.block-columns--ratio-X-Y)
   which would otherwise keep the desktop ratio at narrow viewports. */
@media (max-width: 760px) {
  .block-columns.block-columns--cols2,
  .block-columns.block-columns--cols3,
  .block-columns.block-columns--cols2.block-columns--ratio-2-1,
  .block-columns.block-columns--cols2.block-columns--ratio-1-2,
  .block-columns.block-columns--cols2.block-columns--ratio-3-2,
  .block-columns.block-columns--cols2.block-columns--ratio-2-3 {
    grid-template-columns: 1fr;
  }
  /* Tighter gap when stacked */
  .block-columns.block-columns--gap-medium { gap: 20px; }
  .block-columns.block-columns--gap-large  { gap: 24px; }
  /* Reset valign so columns stack naturally top-to-bottom */
  .block-columns--valign-middle .block-columns__col,
  .block-columns--valign-bottom .block-columns__col {
    justify-content: flex-start;
  }
}


/* ============================================================
   Header responsive — new-here button collapses below 900px
   ============================================================ */

@media (max-width: 900px) {
  .new-here-button { display: none; }
}

/* ============================================================
   Parallax button — colour, style, opacity, position
   ============================================================ */

/* Position slots (top/center/bottom anchor the button absolutely within the banner) */
.block-parallax__button-slot {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter, 32px);
  pointer-events: none;
}
.block-parallax__button-slot > * { pointer-events: auto; }

.block-parallax__button-slot--top    { top: 32px; }
.block-parallax__button-slot--center { top: 50%; transform: translateY(-50%); }
.block-parallax__button-slot--bottom { bottom: 32px; }

/* Make align-left/right propagate to absolute slots too */
.block-parallax--align-left  .block-parallax__button-slot { justify-content: flex-start; }
.block-parallax--align-right .block-parallax__button-slot { justify-content: flex-end; }

/* Button colours (replaces old hardcoded white style above) */
.block-parallax__button {
  --pbtn-bg: rgba(255,255,255,1);
  --pbtn-fg: #fff;
  --pbtn-border: currentColor;
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border: 2px solid var(--pbtn-border);
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  cursor: pointer;
}

.block-parallax__button--color-white { --pbtn-fg: #fff; --pbtn-border: #fff; }
.block-parallax__button--color-gold  { --pbtn-fg: var(--gold,  #FDBA12); --pbtn-border: var(--gold,  #FDBA12); }
.block-parallax__button--color-coral { --pbtn-fg: var(--coral, #C8553D); --pbtn-border: var(--coral, #C8553D); }
.block-parallax__button--color-green { --pbtn-fg: var(--green-primary, #2D6A4F); --pbtn-border: var(--green-primary, #2D6A4F); }
.block-parallax__button--color-ink   { --pbtn-fg: var(--ink, #1A1612); --pbtn-border: var(--ink, #1A1612); }

/* Outline style — transparent bg, coloured border + text */
.block-parallax__button--outline {
  background: transparent;
  color: var(--pbtn-fg);
}
.block-parallax__button--outline:hover {
  background: var(--pbtn-fg);
  color: var(--bg, #fff);
}

/* Filled style — coloured bg, contrasting text */
.block-parallax__button--filled {
  background: var(--pbtn-fg);
  color: var(--bg, #fff);
}
.block-parallax__button--filled.block-parallax__button--color-gold,
.block-parallax__button--filled.block-parallax__button--color-white {
  color: var(--ink, #1A1612);
}
.block-parallax__button--filled:hover { opacity: 0.85; }

/* Opacity — applied to background fill and border colour */
.block-parallax__button--opacity-100 { opacity: 1; }
.block-parallax__button--opacity-90  { opacity: 0.90; }
.block-parallax__button--opacity-80  { opacity: 0.80; }
.block-parallax__button--opacity-70  { opacity: 0.70; }
.block-parallax__button--opacity-60  { opacity: 0.60; }
.block-parallax__button--opacity-50  { opacity: 0.50; }
.block-parallax__button--opacity-40  { opacity: 0.40; }
.block-parallax__button--opacity-30  { opacity: 0.30; }
.block-parallax__button--opacity-20  { opacity: 0.20; }

/* Wordmark subline — sits under the title, aligned to centre, smaller */
.wordmark-subline {
  display: block;
  font-family: 'League Spartan', sans-serif;
  font-weight: 500;
  color: var(--ink-muted, #5A5048);
  text-transform: uppercase;
  letter-spacing: 2.75px;
  font-size: 12px;
  margin-top: 4px;
  text-align: center;
}
@media (max-width: 760px) {
  .wordmark-subline { font-size: 9.5px; letter-spacing: 2px; margin-top: 3px; }
}

/* Hamburger — show desktop menu on wide screens, mobile menu on narrow */

/* ============================================================
   Sunday strip — mobile-only sticky banner at top of every page.
   Populated by sundaystripembed.js from the portal.
   ============================================================ */

.sunday-strip {
  display: none;
}

@media (max-width: 900px) {
  .sunday-strip {
    display: block;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--green-primary, #2D6A4F);
    color: #fff;
    text-align: center;
    min-height: 36px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .sunday-strip[data-state="loading"] {
    /* Reserve height so layout doesn't jump when content arrives */
    min-height: 36px;
  }
  .sunday-strip[data-state="empty"] {
    display: none;
  }
  .sunday-strip .sss-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    color: #fff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.2;
  }
  .sunday-strip .sss-sep {
    opacity: 0.45;
  }
  .sunday-strip .sss-date,
  .sunday-strip .sss-time {
    opacity: 0.85;
  }
  .sunday-strip .sss-title {
    font-weight: 600;
  }
}

/* ============================================================
   Upcoming services — one inline line per service.
   Matches body Poppins style; no table look.
   ============================================================ */

.upcoming-services {
  margin: 0 0 16px;
}
/* When inside a portal-section wrapper, neutralise its left padding so the
   list aligns with the rest of the page text. */
.portal-section:has(.upcoming-services) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.upcoming-services {
  margin: 0 !important;
}
.upcoming-services[data-state="loading"] { min-height: 100px; }
.upcoming-services[data-state="empty"]   { display: none; }

.upcoming-services .us-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.upcoming-services .us-row {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink, #1A1612);
  padding: 0;
  margin: 0;
}

.upcoming-services .us-date {
  font-weight: 600;
}

.upcoming-services .us-date::after {
  content: " — ";
  font-weight: 400;
  color: var(--ink-muted, #5A5048);
}

.upcoming-services .us-title::after {
  content: " · ";
  color: var(--ink-muted, #5A5048);
}

.upcoming-services .us-time {
  color: var(--ink-muted, #5A5048);
}

/* ============================================================
   Lectionary embed — strip portal-section padding on /scripture
   (where the lectionary lives) so it aligns with body text.
   ============================================================ */
.page-scripture .portal-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   Prayer rhythms — match the upcoming services inline-row style.
   Self-created by prayerrhythmsembed.js into <div id="prayer-rhythms">.
   ============================================================ */

.prayer-rhythms {
  margin: 0 0 16px;
}
.prayer-rhythms[data-state="loading"] { min-height: 80px; }
.prayer-rhythms[data-state="empty"]   { display: none; }

.prayer-rhythms .pr-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prayer-rhythms .pr-row {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink, #1A1612);
  padding: 0;
  margin: 0;
}

.prayer-rhythms .pr-name {
  font-weight: 600;
}

.prayer-rhythms .pr-name::after {
  content: " — ";
  font-weight: 400;
  color: var(--ink-muted, #5A5048);
}

.prayer-rhythms .pr-when {
  color: var(--ink-muted, #5A5048);
}

/* If wrapped in a portal-section (raw_html on /prayer doesn't wrap, but
   guard anyway in case the structure changes later) */
.portal-section:has(.prayer-rhythms) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   Unified events embed — single inline-row style for all configs
   (upcoming-services, prayer-rhythms, crafternoons, tikanga, youth).
   Replaces the old .upcoming-services and .prayer-rhythms styles.
   ============================================================ */

.events-embed {
  margin: 0 0 16px;
}
.events-embed[data-state="loading"] { min-height: 80px; }
.events-embed[data-state="empty"]   { display: none; }

.events-embed .ee-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.events-embed .ee-row {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink, #1A1612);
  padding: 0;
  margin: 0;
}

.events-embed .ee-primary {
  font-weight: 600;
}
.events-embed .ee-primary::after {
  content: " — ";
  font-weight: 400;
  color: var(--ink-muted, #5A5048);
}

.events-embed .ee-secondary {
  color: var(--ink, #1A1612);
}

.events-embed .ee-suffix {
  color: var(--ink-muted, #5A5048);
  margin-left: 8px;
  font-size: 15px;
}

/* When wrapped in portal-section, neutralise its left/right padding so
   the list aligns with body text. */
.portal-section:has(.events-embed) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   Prayer diary embed (when loaded with ?style=plain)
   Heading matches .block-section-heading__title exactly, just green.
   Dark-green left bar sits to the LEFT of the text column so the
   text aligns flush with body content above and below.
   ============================================================ */

.pde-card {
  position: relative;
  margin: 2.5em 0 24px -22px;
  padding-left: 18px;
  border-left: 4px solid var(--green-primary, #2D6A4F);
}
.pde-label {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.3px;
  color: var(--green-primary, #2D6A4F);
  margin: 0 0 0.6em;
}
.pde-body {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink, #1A1612);
}

/* Section heading anchors — scroll-margin so anchors don't hide
   behind the sticky Sunday strip and sticky site header when
   navigated via #hash. Tuned for the rendered heights: desktop
   ~110px header (no strip), mobile ~36px strip + 87px header. */
.block-section-heading[id] {
  scroll-margin-top: 130px;
}

/* ============================================================
   Section heading levels — major (large, green on /get-involved)
   and minor (subheading style, ink colour). Minor applies site-wide.
   ============================================================ */

/* Major section_heading: large, ink/black colour (default style). */
.block-section-heading--major .block-section-heading__title {
  font-size: 42px;
  color: var(--ink, #1A1612);
  margin-top: 0.4em;
}
/* Green major section_heading: large + green (opt-in). */
.block-section-heading--green_major .block-section-heading__title {
  font-size: 42px;
  color: var(--green-primary, #2D6A4F);
  margin-top: 0.4em;
}
@media (max-width: 600px) {
  .block-section-heading--major .block-section-heading__title,
  .block-section-heading--green_major .block-section-heading__title {
    font-size: 32px;
  }
}

/* Minor anywhere: subheading style, ink colour, smaller */
.block-section-heading--minor {
  margin: 1.5em 0 0.4em;
}
.block-section-heading--minor .block-section-heading__title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.2px;
  color: var(--ink, #1A1612);
  margin: 0;
}

/* ============================================================
   H4 inside rich_text = "green major heading" style.
   Use the H4 button in the rich_text editor toolbar to apply.
   ============================================================ */
.block-rich-text h4 {
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.3px;
  color: var(--green-primary, #2D6A4F);
  margin: 2em 0 0.6em;
}
@media (max-width: 600px) {
  .block-rich-text h4 {
    font-size: 32px;
  }
}

/* ============================================================
   Sticky shrink-on-scroll header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg, #fff);
  transition: padding 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 900px) {
  /* Sit below sticky Sunday strip on mobile */
  .site-header { top: 38px; }
}

/* Subtle shadow when scrolled past top */
body.is-scrolled .site-header {
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}


/* ============================================================
   Top-of-page Call-to-action bar
   Rendered above the site header by partials/cta_bar.
   When active, body gets .has-active-cta which hides the
   mobile .sunday-strip (the strip is mobile-only anyway).
   ============================================================ */

.parish-cta {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  opacity: 1;
  transition: opacity 0.2s ease;
  z-index: 99; /* below sticky sunday-strip mobile (100), above page content */
}

.parish-cta--closing { opacity: 0; }

.parish-cta__inner {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  padding: 10px 16px;
  text-align: center;
}

.parish-cta--dismissible .parish-cta__inner {
  /* Reserve space so the X doesn't overlap text on narrow widths */
  padding-right: 42px;
}

.parish-cta__text,
.parish-cta__link {
  display: inline-block;
}

.parish-cta__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.parish-cta__link:hover { color: inherit; opacity: 0.85; }

.parish-cta__btn {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.parish-cta__btn:hover { background: #fff; color: var(--ink); }

.parish-cta__close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
  padding: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.parish-cta__close:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.parish-cta__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  opacity: 1;
}

/* Colour variants */
.parish-cta--green {
  background: var(--green-primary, #2D6A4F);
  color: #fff;
}
.parish-cta--red {
  background: var(--coral, #C8553D);
  color: #fff;
}
.parish-cta--gold {
  background: var(--gold, #FDBA12);
  color: var(--ink, #1A1612);
}
.parish-cta--gold .parish-cta__btn {
  background: var(--ink, #1A1612);
  color: var(--gold, #FDBA12);
}
.parish-cta--gold .parish-cta__btn:hover {
  background: #000;
  color: var(--gold, #FDBA12);
}
.parish-cta--gold .parish-cta__close:hover {
  background: rgba(0,0,0,0.12);
}
.parish-cta--gold .parish-cta__close:focus-visible {
  outline-color: var(--ink, #1A1612);
}
.parish-cta--ink {
  background: var(--ink, #1A1612);
  color: #fff;
}

/* When CTA is showing, hide the mobile 'this Sunday' strip
   (CTA replaces it on mobile, as designed). Desktop is unaffected
   because .sunday-strip is mobile-only via its own media query. */
@media (max-width: 900px) {
  body.has-active-cta .sunday-strip {
    display: none !important;
  }
  /* On mobile, allow up to two lines comfortably */
  .parish-cta {
    font-size: 13px;
  }
  .parish-cta__inner {
    padding: 9px 14px;
    gap: 6px 12px;
  }
  .parish-cta--dismissible .parish-cta__inner {
    padding-right: 40px;
  }
  .parish-cta__btn {
    padding: 4px 12px;
    font-size: 12px;
  }
}

/* ─── 404 page ─────────────────────────────────────────────
   Lost sheep animation adapted from
   https://codepen.io/vineethtrv/pen/zxOdVPd (Vineeth.TR)
*/
.error-404 {
  /* Scale: smaller than the original full-viewport pen since this sits
     between the site header and footer. */
  --error-size: min(18vw, 18vh, 200px);
  /* Wool body — slightly darker than the original #d0d2ca so it reads on cream. */
  --error-body: #bdb5a4;
  /* Sheep face & legs — site's deep ink. */
  --error-ink: var(--ink);
  /* The 4s — darker than the original (which was the same colour as the wool). */
  --error-fig: var(--ink-muted);
  text-align: center;
}
.error-404 .page-inner {
  padding: 48px 24px 64px;
}
.error-404-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--error-size) / 3);
  margin: 24px auto 40px;
}
.error-404-text { border-top: 0; padding-top: 0; }
.error-404-title {
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 4vw, 36px);
  color: var(--ink);
  margin: 0 0 8px;
}
.error-404-sub {
  font-size: 17px;
  color: var(--ink-muted);
  margin: 0 0 28px;
}
.error-404-actions { margin: 0; }
.error-404-home { display: inline-block; padding: 8px 0; }

/* ─── The two 4 figures ─── */
.error-404 .four {
  position: relative;
  color: var(--error-fig);
  font-size: calc(var(--error-size) / 2.5);
  width: 1.75em;
  height: 1.75em;
  border-bottom: 0.4em solid;
  border-left: 0.4em solid;
}
.error-404 .four:after {
  content: "";
  position: absolute;
  background-color: var(--error-fig);
  width: 0.4em;
  height: 2em;
  left: 50%;
  top: 0;
  transform: translate(-50%, 25%);
}

/* ─── Sheep body ─── */
.error-404 .sheep {
  font-size: calc(var(--error-size) / 2.5);
  height: var(--error-size);
  width: var(--error-size);
  border-radius: 50%;
  background: var(--error-body);
  position: relative;
}
.error-404 .sheep:after {
  /* The wool bobbles around the body — drawn with box-shadow clones */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -25%);
  color: var(--error-body);
  background: currentcolor;
  height: 1em;
  width: 1em;
  border-radius: 50%;
  box-shadow:
    0 2em,
    1em 1em,
    -1em 1em,
    -0.75em 1.75em,
    0.75em 1.75em,
    0.75em 0.25em,
    -0.75em 0.25em;
}
.error-404 .sheep:before {
  /* Legs */
  content: "";
  position: absolute;
  color: var(--error-ink);
  background: currentcolor;
  width: 0.2em;
  height: 0.65em;
  top: 100%;
  left: 25%;
  transform: translate(0, -25%);
  box-shadow: 1em 0;
}

/* ─── Head ─── */
.error-404 .sheep .head {
  position: absolute;
  width: 0.75em;
  height: 1em;
  border-radius: 0.3em;
  background: var(--error-ink);
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 5%;
  animation: 5s errorHeadMove infinite;
}
.error-404 .sheep .head:after {
  /* Mouth */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.2em;
  transform: translatex(-50%);
  width: 0.2em;
  height: 0.13em;
  background: rgba(0, 0, 0, 0.1);
  border-bottom: 0.06em solid #414241;
  border-radius: 0.05em;
}
.error-404 .sheep .head:before {
  /* Nose */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.12em;
  transform: translatex(-50%);
  width: 0.05em;
  height: 0.1em;
  background: #414241;
  border-radius: 0.02em;
}

/* ─── Ears ─── */
.error-404 .sheep .head .ear {
  position: absolute;
  height: 0.6em;
  width: 0.5em;
  border-radius: 0 100%;
  background: #494949;
  top: -15%;
  left: 90%;
  transform: rotate(-10deg);
  animation: 5s errorRightEar infinite;
}
.error-404 .sheep .head .ear + .ear {
  transform: rotate(90deg);
  animation: 5s errorLeftEar infinite;
  left: auto;
  right: 90%;
}

/* ─── Eyes ─── */
.error-404 .sheep .head .eye {
  position: absolute;
  left: -0.15em;
  top: -0.15em;
  height: 0.55em;
  width: 0.55em;
  border-radius: 50%;
  border: 0.1em solid var(--error-ink);
  background: var(--error-ink) linear-gradient(var(--error-ink) 40%, #fff 0) no-repeat;
  background-size: 100% 0.88em;
  background-position: 0px -0.2em;
  overflow: hidden;
  animation: 5s errorEyeShade infinite;
}
.error-404 .sheep .head .eye:before {
  content: "";
  position: absolute;
  height: 0.1em;
  width: 0.1em;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #3e3f3e;
  transform-origin: 50% -0.1em;
  animation: 5s errorEyeMovement infinite;
}
.error-404 .sheep .head .eye + .eye {
  left: auto;
  right: -0.15em;
}

@keyframes errorHeadMove {
  0%, 50%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25%           { transform: translate(-75%, -50%) rotate(5deg); }
  75%           { transform: translate(-25%, -50%) rotate(-5deg); }
}
@keyframes errorRightEar {
  0%, 50%, 100% { transform: translatex(0) rotate(-10deg); }
  25%           { transform: translatex(0) rotate(-15deg); }
  75%           { transform: translatex(-0.1em) rotate(-10deg); }
}
@keyframes errorLeftEar {
  0%, 50%, 100% { transform: translatex(0) rotate(90deg); }
  25%           { transform: translatex(0.1em) rotate(90deg); }
  75%           { transform: translatex(-0.1em) rotate(90deg); }
}
@keyframes errorEyeMovement {
  0%, 50%, 100% { transform: translate(-50%, 0.05em) rotate(0deg); }
  25%           { transform: translate(-50%, 0.05em) rotate(45deg); }
  75%           { transform: translate(-50%, 0.05em) rotate(-45deg); }
}
@keyframes errorEyeShade {
  0%, 50%, 100% { background-position: 0px -0.14em; }
  25%, 75%      { background-position: 0px -0.22em; }
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .error-404 .sheep .head,
  .error-404 .sheep .head .ear,
  .error-404 .sheep .head .ear + .ear,
  .error-404 .sheep .head .eye,
  .error-404 .sheep .head .eye:before {
    animation: none;
  }
}