/* ==========================================================================
   Holy Nativity Coptic Orthodox Church — Design System
   Parchment · Crimson · Gold — Byzantine display headings, sans-serif body

   CONTENTS
   1. Fonts
   2. Design tokens (:root)
   3. Base
   4. Utilities        (.container .display .label .rule-under .note)
   5. Buttons          (.btn .btn-primary .btn-gold .btn-ghost)
   6. Top line, header & navigation
   7. Cards            (.intro-card .card .card-actions .verse .services-list)
   8. Sections         (.section .section-head .week .schedule .filters .chip)
   9. Campaigns        (.campaigns .progress — used on the Donate page)
   10. Footer
   11. Animation       (.reveal)
   12. Responsive / mobile drawer
   ========================================================================== */


/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Byzantine';
  src: url('../fonts/ByzantineNormal.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* 2. Design tokens --------------------------------------------------------- */

:root {
  /* Palette — derived from the parish logo and parchment background */
  --crimson:        #8a1e24;
  --crimson-deep:   #831618;
  --crimson-shadow: #4a0d11;
  --gold:           #b8860b;
  --gold-bright:    #d9a62e;
  --gold-pale:      #ecd9a8;
  --blue:           #3d5c9e;
  --sky:            #bcd5e8;
  --parchment:      #d6c7b3;   /* page base color */
  --parchment-deep: #e3d6be;
  --card:           #fbf9f4;
  --ink:            #2b2016;
  --ink-soft:       #5c4b38;
  --ink-faint:      #8a765c;
  --line:           #d8c9ac;

  /* Type — Byzantine for display headings ONLY; sans-serif everywhere else */
  --font-display: 'Byzantine', 'Segoe UI', sans-serif;
  --font-body: 'Figtree', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ------------------------------------------------------------------
     FONT SIZE SCALE — adjust sizes here.
     clamp(minimum, fluid-preferred, maximum): text scales with the window
     between min and max. Floors meet readability standards (body ≥ 14px,
     fine print ≥ 12px); ceilings are the approved desktop sizes. All tiers
     scale proportionally, preserving the hierarchy at every window size.
     xs = fine print/chips · sm = secondary/buttons · md = body
     lg = card titles · xl = section headings · 2xl = page titles
     The top line (.topline) and menu (.nav a) have fixed sizes and are
     NOT affected by this scale.
     ------------------------------------------------------------------ */
  --text-xs:  clamp(0.75rem, 0.72rem + 0.1vw, 0.78rem);
  --text-sm:  clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --text-md:  clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
  --text-lg:  clamp(1rem, 0.93rem + 0.35vw, 1.18rem);
  --text-xl:  clamp(1.35rem, 1.14rem + 1vw, 1.88rem);
  --text-2xl: clamp(2rem, 1.6rem + 2.2vw, 3.2rem);

  /* Spacing scale */
  --space-1: 0.375rem;
  --space-2: 0.75rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: 3.25rem;
  --space-6: clamp(4rem, 3rem + 4vw, 7rem);

  /* Shape & shadow */
  --radius: 14px;
  --radius-btn: 9px;
  --tree-line: color-mix(in srgb, var(--gold) 30%, transparent);  /* WhatsApp directory tree connectors */
  --shadow-card: 0 1px 2px rgba(43, 32, 22, 0.08), 0 10px 30px -12px rgba(43, 32, 22, 0.25);
  --shadow-btn: 0 0 10px rgba(43, 32, 22, 0.16);          /* subtle, equidistant */
  --shadow-btn-hover: 0 0 14px rgba(43, 32, 22, 0.24);

  --measure: 68ch;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}


/* 3. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--ink);
  background-color: var(--parchment);
  background-image: url('../img/bg-page-b.png');
  background-repeat: no-repeat;      /* stretches — never tiles */
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

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

a { color: var(--crimson); text-decoration-color: var(--gold-bright); text-underline-offset: 3px; }
a:hover { color: var(--crimson-deep); }

h1, h2, h3 { margin: 0; font-weight: normal; }


/* 4. Utilities ------------------------------------------------------------- */

.container {
  width: min(1180px, 100% - clamp(2rem, 6vw, 5rem));
  margin-inline: auto;
}

/* Byzantine display heading */
.display {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
  line-height: 1.08;
  color: var(--crimson-deep);
}

/* Small-caps eyebrow label */
.label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.label-gold { color: var(--gold); }

/* Soft thin rule under major headings */
.rule-under::after {
  content: '';
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--line);
  margin-top: 0.25em;
}

/* Fine print */
.note { font-size: var(--text-xs); color: var(--ink-faint); font-style: italic; }


/* 5. Buttons — rectangular, subtle equidistant shadow ---------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  box-shadow: var(--shadow-btn);
  transition: box-shadow 0.2s var(--ease-out), background-color 0.2s, color 0.2s;
}
.btn:hover { box-shadow: var(--shadow-btn-hover); }

.btn-primary {
  background: linear-gradient(180deg, var(--crimson), var(--crimson-deep));
  color: var(--gold-pale);
}
.btn-primary:hover { color: #fff; }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--crimson-shadow);
}

.btn-ghost {
  border-color: var(--crimson);
  color: var(--crimson);
  background: transparent;
  box-shadow: none;
}
.btn-ghost:hover { background: color-mix(in srgb, var(--crimson) 8%, transparent); box-shadow: none; }


/* 6. Top line, header & navigation ----------------------------------------- */

.topline {
  background: var(--crimson-deep);
  color: #ffb300;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.50rem;      /* fixed — independent of the type scale */
  font-weight: 900;
  letter-spacing: 0.5em;
  padding-block: 0.5rem;
}

.site-header {
  /* No backdrop-filter here: it would become the containing block for the
     fixed mobile drawer and clip it to the header's height. */
  background: var(--card); /* fully opaque — scrolled content must never show through */
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: 0.55rem;
}

.brand { display: inline-flex; }
.diocese-seal { display: inline-flex; }
.brand img, .diocese-seal img { width: 54px; height: 54px; }

.nav {
  margin-inline: auto;     /* centered between the two logos */
  display: flex;
  flex-wrap: nowrap;
  gap: 0.1rem;
  white-space: nowrap;
}
.nav a {
  font-size: 0.95rem;      /* fixed — independent of the type scale */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.5rem 0.62rem;
  border-radius: 8px;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.nav a:hover { color: var(--crimson); background: color-mix(in srgb, var(--gold-pale) 45%, transparent); }
.nav a[aria-current="page"] { color: var(--crimson); }
.nav a[aria-current="page"]::after {
  content: '';
  display: block;
  margin-top: 2px;
  border-bottom: 2px solid var(--gold-bright);
}

/* About dropdown */
.nav-drop { position: relative; display: flex; }
.drop-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 235px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 0.4rem;
  z-index: 60;
}
.nav-drop:hover .drop-menu,
.nav-drop:focus-within .drop-menu { display: block; }
.drop-menu a { display: block; }

/* Drawer chrome + icons: hidden on desktop, shown in the mobile drawer */
.nav a svg { display: none; }
.drawer-head, .drawer-logo, .nav-backdrop { display: none; }

/* Hamburger toggle — hidden on desktop */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--crimson);
  transition: transform 0.25s var(--ease-out), opacity 0.2s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* 7. Cards ------------------------------------------------------------------ */

.intro-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);   /* equal on all four sides */
  display: flex;
  flex-direction: column;
}
.intro-card > .card-actions:last-child { margin-top: auto; padding-top: var(--space-3); }

/* Byzantine is reserved for main page H1s (.page-head h1) and the topline.
   All lower-level headings use the body font, bold. */
.intro-card h2 {
  font-weight: 700;
  font-size: 1.3125rem; /* 21px */
  color: var(--crimson-deep);
  margin-bottom: var(--space-3);
}
/* Small square icon floated in a card corner; text wraps around it */
.card-icon {
  width: 118px;
  height: 118px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 0 8px rgba(43, 32, 22, 0.14);
  background: var(--parchment-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.card-icon.float-right { float: right; margin: 0.15rem 0 0.6rem 1rem; }
.card-icon.float-left { float: left; margin: 0.15rem 1rem 0.6rem 0; }

.card-tagline {
  font-style: italic;
  color: var(--gold);
  font-size: var(--text-sm);
  margin: -0.5em 0 var(--space-2);
}

/* Plain (non-Byzantine) card heading variant */
.h-plain { font-family: var(--font-body) !important; font-weight: 700; letter-spacing: 0.01em; }

.intro-card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--crimson);
  margin: var(--space-3) 0 0.1rem;
}
.intro-card h3:first-of-type { margin-top: 0; }
.intro-card h3 + p { margin-top: 0.2em; }

/* Generic card (campaign cards, etc.) */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}
.card h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); color: var(--crimson-deep); }

/* All card text is justified */
.intro-card p, .card p, .content-card p, .verse { text-align: justify; }

/* Actions row inside any card or modal — buttons align right by default */
.card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.action-tagline { margin: 0; }
.card-actions.center { justify-content: center; }

/* Scripture / liturgy quotation */
.verse {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  border-left: 3px solid var(--gold-bright);
  padding-left: var(--space-3);
  margin: 0 0 var(--space-3);
}
.verse cite { display: block; margin-top: 0.3em; font-style: normal; color: var(--gold); font-weight: 600; }

/* WhatsApp group directory */
.group-search {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: var(--space-2);
}
.group-search:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 1px; border-color: var(--crimson); }

.tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  align-items: center;
}
.tag-filters .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.tag-filters input[type="checkbox"] { accent-color: var(--crimson); width: 15px; height: 15px; }

.groups-empty { display: none; }

/* WhatsApp group directory — tree view.
   Category (large crimson heading, gold rule, flush left)
   → Subcategory (small gold caps, indented, hangs off a vertical guide line)
   → Group rows (✚ bullet + quiet ink text). Groups with no subcategory sit
   directly under the category on the same guide line. */
.group-cat { margin-top: var(--space-5); }
.group-cat:first-child { margin-top: var(--space-2); }
.group-cat-title {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #d9cba8;
}
/* Category header as an expand/collapse toggle */
.group-cat-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.group-cat-name { flex: 1 1 auto; }
.group-cat-count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--crimson);
  background: color-mix(in srgb, var(--gold-pale) 55%, transparent);
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
  min-width: 1.6rem;
  text-align: center;
}
.group-cat-chevron {
  color: var(--crimson);
  flex: 0 0 auto;
  transition: transform 0.2s var(--ease-out);
}
.group-cat.is-open .group-cat-chevron { transform: rotate(180deg); }
/* With JS, bodies start collapsed and open on toggle. Without JS (no .js on
   <html>), they remain visible so the list is never unreachable. */
.js .group-cat-body { display: none; }
.js .group-cat.is-open .group-cat-body { display: block; }
/* Tree connectors, classic treeview style:
   – each list draws ONE continuous vertical trunk (ul::before), so there are
     never seams or gaps between rows;
   – each row reaches out to the trunk with a horizontal stub at its own
     vertical center, touching the ✚ bullet;
   – the last row paints a card-colored patch over the trunk below its stub,
     so the trunk visibly ends at the last branch (└). */
.group-tree, .group-list { list-style: none; margin: 0; padding: 0; position: relative; }
.group-cat > .group-tree { margin: var(--space-2) 0 0 0.5rem; }

.group-tree::before,
.group-list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--tree-line);
}
/* Trunk of a nested list starts right under its subcategory title */
.group-list::before { top: -0.35rem; }

.group-tree li { position: relative; padding-left: 1.6rem; }
.group-tree li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.3rem;                 /* stub reaches the ✚ bullet */
  border-top: 1px solid var(--tree-line);
}
/* End the trunk at the last row's stub. Search hides rows with inline
   display:none, so "last" means last VISIBLE row, not last child. */
.group-tree > li:nth-last-child(1 of :not([style*="none"]))::after,
.group-list > li:nth-last-child(1 of :not([style*="none"]))::after {
  content: '';
  position: absolute;
  left: -1px;
  width: 3px;
  top: calc(50% + 1px);
  bottom: 0;
  background: var(--card);
}

/* Subcategory branch: breathing room is padding (not margin) so the trunk
   stays unbroken through it; its stub is drawn by the title itself, so it is
   always dead-centered on the heading text (a li-level 50% stub would land
   mid-branch, inside the nested list). */
.group-branch { padding-top: 0.6rem; }
.group-branch::before { display: none; }
/* Heading row height = the 1.6em candle icon, so its center is 0.8em down */
.group-tree > .group-branch:nth-last-child(1 of :not([style*="none"]))::after { top: calc(0.6rem + var(--text-xs) * 0.8 + 1px); }
.group-sub-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0 0 0.4rem;
  position: relative;
}
.sub-icon {
  height: 1.6em;
  width: auto;
}
.group-sub-title::before {
  content: '';
  position: absolute;
  left: -1.6rem;                 /* back to the category trunk */
  top: 50%;
  width: 1.3rem;
  border-top: 1px solid var(--tree-line);
}

.group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 0.3rem;
}
.group-name { font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.group-name::before { content: '✚'; color: var(--gold); font-size: 0.75em; margin-right: 0.5rem; }
.group-desc { font-size: var(--text-sm); color: var(--ink-soft); }

/* Understated join link — visible but never louder than the group names */
.group-join {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--crimson);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 0.2rem 0.75rem;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s;
}
.group-join:hover,
.group-join:focus-visible {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}

.btn-sm { padding: 0.45rem 0.95rem; font-size: var(--text-xs); }

/* Day/time list (Regular Services) */
.services-list { list-style: none; margin: 0; padding: 0; }
.services-list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-2);
  padding-block: 0.55rem;
  border-bottom: 1px solid #ededed;
}
.services-list li:last-child { border-bottom: none; }
.services-list .day { font-weight: 700; color: var(--crimson); }
.services-list .svc-title { font-weight: 700; color: var(--ink); white-space: nowrap; }
.services-list .svc-time { font-size: var(--text-xs); color: var(--ink-soft); margin-top: 0.1rem; }

/* Contact-page variant — wider label column so "Address"/"Facebook" never crowd the value */
.contact-info li { grid-template-columns: 7rem 1fr; column-gap: var(--space-3); }
.contact-info .day { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; align-self: center; }


/* 8. Sections ---------------------------------------------------------------- */

.section { padding-block: var(--space-6); }

.section-head { max-width: var(--measure); margin-bottom: var(--space-5); }
.section-head .label { color: var(--gold); }
.section-head h2 { font-size: var(--text-xl); margin-top: var(--space-1); }

/* Intro band: two cards side by side */
.intro { padding-block: var(--space-5) var(--space-6); }
.intro .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

/* Week band: services card (1/3) + open schedule (2/3), alternate background */
.week { background: color-mix(in srgb, var(--card) 72%, transparent); border-block: 1px solid var(--line); }
.week .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: stretch;
}
.week .label { margin: 0; }
.week .intro-card { padding: var(--space-3) var(--space-4); }
/* Matches the card headings beside it (.intro-card h2) so the two column
   titles read as the same level. */
.week-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.3125rem; /* 21px */
  color: var(--crimson-deep);
  margin: var(--space-1) 0 var(--space-3);
}

/* Ruled liturgical schedule list */
.schedule { list-style: none; margin: 0; padding: 0; }
.schedule li {
  display: grid;
  grid-template-columns: 5.2rem 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.schedule li:last-child { border-bottom: none; }

.sched-date { text-align: center; line-height: 1.1; }
.sched-date .dow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.sched-date .day { font-family: var(--font-display); font-size: 1.6rem; color: var(--crimson-deep); }

.sched-title { font-size: var(--text-md); font-weight: 600; }
.sched-meta { font-size: var(--text-sm); color: var(--ink-soft); }

/* Category filter buttons */
.filters { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: var(--space-3); }
.filter-btn,
.view-btn {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.filter-btn:hover, .view-btn:hover { color: var(--crimson); border-color: var(--crimson); }
.filter-btn.active,
.view-btn.active {
  background: linear-gradient(180deg, var(--crimson), var(--crimson-deep));
  border-color: var(--crimson-deep);
  color: var(--gold-pale);
}

/* Category chips (schedule/calendar entries) */
.chip {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  white-space: nowrap;
}
.chip-liturgical { background: color-mix(in srgb, var(--crimson) 12%, transparent); color: var(--crimson-deep); }
.chip-feast      { background: color-mix(in srgb, var(--gold-bright) 26%, transparent); color: #6d4e05; }
.chip-ministry   { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--blue); }
.chip-event      { background: color-mix(in srgb, var(--ink-soft) 12%, transparent); color: var(--ink-soft); }


/* 9. Campaigns (Donate page) -------------------------------------------------- */

.campaigns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}
.campaign p { color: var(--ink-soft); font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-3); }

.progress { height: 8px; border-radius: 999px; background: var(--parchment-deep); overflow: hidden; }
.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin: var(--space-1) 0 var(--space-3);
}
.progress-meta strong { color: var(--ink-soft); }


/* 10. Footer ------------------------------------------------------------------ */

.footer { background: var(--crimson-shadow); color: var(--gold-pale); font-size: var(--text-sm); }
.footer > .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  padding-block: var(--space-5);
}
.footer h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  margin-bottom: var(--space-3);
}
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--gold-bright); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

/* Contact column — small 30% separator line beneath each item */
.contact-list li:not(:last-child)::after {
  content: '';
  display: block;
  width: 30%;
  border-bottom: 1px solid color-mix(in srgb, var(--gold-pale) 35%, transparent);
  margin-top: 0.7rem;
}

.footer-legal {
  border-top: 1px solid color-mix(in srgb, var(--gold-pale) 25%, transparent);
  padding-block: var(--space-3);
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--gold-pale) 70%, transparent);
}


/* 11. Animation ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); animation: reveal 0.9s var(--ease-out) forwards; }
  .reveal:nth-child(2) { animation-delay: 0.12s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}


/* 12. Responsive / mobile drawer ------------------------------------------------ */

@media (max-width: 900px) {
  .topline { font-size: 0.9rem; letter-spacing: 0.18em; }

  .brand img, .diocese-seal img { width: 44px; height: 44px; }

  /* Header order: church logo · diocese seal · hamburger (far right) */
  .diocese-seal { margin-left: auto; }
  .menu-toggle { display: flex; }

  /* Menu becomes a right-side overlay drawer */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 100;
    width: min(320px, 85vw);
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    white-space: normal;
    background: var(--card);
    border-radius: 18px 0 0 18px;
    box-shadow: -14px 0 34px rgba(43, 32, 22, 0.35);
    padding: 1rem 1.1rem 1.2rem;
    overflow-y: auto;
    transform: translateX(105%);
    transition: transform 0.3s var(--ease-out);
  }
  .nav.open { transform: none; }
  .nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;             /* mobile tap target */
    padding: 0.85rem 0.5rem;
    font-size: 1rem;
  }
  .nav a svg { display: block; width: 19px; height: 19px; flex: none; color: var(--ink-faint); }
  .nav-drop { flex-direction: column; }
  .drop-menu {
    display: block;
    position: static;
    min-width: 0;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 0 0 2.1rem;
  }
  .drop-menu a { font-size: 0.92rem; padding: 0.75rem 0.5rem; min-height: 44px; }
  .nav a[aria-current="page"] { background: color-mix(in srgb, var(--gold-pale) 40%, transparent); border-radius: 8px; }
  .nav a[aria-current="page"] svg { color: var(--crimson); }
  .nav a[aria-current="page"]::after { display: none; }

  .drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.3rem 0.2rem 0.8rem;
    border-bottom: 2px solid var(--gold-bright);
    margin-bottom: 0.5rem;
  }
  .drawer-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1.15;
    color: var(--crimson-deep);
  }
  .drawer-title small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .drawer-close {
    display: grid;
    place-items: center;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--crimson);
    min-width: 44px;
    min-height: 44px;
    padding: 0.35rem;
    cursor: pointer;
    border-radius: 8px;
  }
  .drawer-close:active { background: color-mix(in srgb, var(--crimson) 8%, transparent); }
  .drawer-logo { display: block; width: 72px; margin: auto auto 0; padding-top: 1.2rem; }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(43, 32, 22, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-out);
  }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }

  /* Layout collapses to a single column */
  .intro .container { grid-template-columns: 1fr; }
  .week .container { grid-template-columns: 1fr; }
  .intro-card { padding: var(--space-4); }
  .services-list li { grid-template-columns: 3.2rem 1fr; }
  .contact-info li { grid-template-columns: 7rem 1fr; }

  /* Stacked card buttons share the same (full) width */
  .card-actions .btn { flex: 1 1 100%; justify-content: center; }

  /* Page templates collapse to a single column */
  .with-toc { grid-template-columns: 1fr; }
  .toc { position: static; }
  .form-row-split { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .cal-day { min-height: 72px; }
}


/* 13. Forms ------------------------------------------------------------------- */

.form { display: grid; gap: var(--space-3); }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* min-width: 0 lets grid items shrink below their content's intrinsic min-width.
   Without this, a text input's default `size=20` forces its parent grid track to
   ~200px, so the whole form overflows narrow cards on mobile. */
.form,
.form-row-split,
.field { min-width: 0; }

.field { display: grid; gap: 0.3rem; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.field .opt { color: var(--gold); font-style: italic; font-size: 0.85em; }

.field input,
.field textarea,
.field select {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 1px solid var(--gold-bright);
  outline-offset: 1px;
  border-color: var(--crimson);
}

.form-success {
  background: color-mix(in srgb, var(--gold-pale) 55%, transparent);
  border: 1px solid var(--gold-bright);
  border-radius: 8px;
  color: var(--crimson-deep);
  font-weight: 600;
  padding: 0.8rem 1rem;
}


/* 14. Page scaffolding ---------------------------------------------------------- */

.page-head { padding: var(--space-5) 0 0; }
.page-head h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--crimson-deep);
  line-height: 1.08;
}
.page-head .label { margin: 0 0 var(--space-1); }

/* Article layout with a sticky table of contents on the left */
.with-toc {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.toc {
  position: sticky;
  top: 84px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  font-size: var(--text-sm);
}
.toc .label { display: block; margin: var(--space-3) 0 var(--space-1); color: var(--gold); }
.toc .label:first-child { margin-top: 0; }
.toc a {
  display: flex;                /* wrapped lines align with the first letter, past the bullet */
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.toc a::before {
  content: '✚';
  flex: none;
  color: var(--gold-bright);
  font-size: 0.6em;
}
.toc a:hover { color: var(--crimson); background: color-mix(in srgb, var(--gold-pale) 40%, transparent); }
.toc a.active { color: var(--crimson); border-left-color: var(--gold-bright); font-weight: 600; }

/* White card wrapping longform content (About pages) */
.content-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  max-width: none;
}

/* Longform article text */
.prose { }
.prose h2 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-xl); color: var(--crimson-deep); margin: var(--space-5) 0 var(--space-2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); color: var(--wp-admin-theme-color-darker-20); margin: var(--space-3) 0 0.4rem; }
.prose p { margin: 0 0 var(--space-2); }


/* 15. Calendar -------------------------------------------------------------------- */

.cal-toolbar { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.cal-title { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); color: var(--crimson-deep); margin-right: auto; }

/* Segmented control — fused buttons for the view switcher */
.seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 70%, transparent);
}
.seg .view-btn { border: none; border-radius: 0; border-right: 1px solid var(--line); background: none; }
.seg .view-btn:last-child { border-right: none; }
.seg .view-btn.active { background: linear-gradient(180deg, var(--crimson), var(--crimson-deep)); }

/* Category filter row — separate from the toolbar, dots match chip colors */
.cal-filterbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.filter-btn::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: 0.05em;
  background: var(--ink-faint);
}
.filter-btn[data-filter="all"]::before { display: none; }
.filter-btn[data-filter="liturgical"]::before { background: var(--crimson); }
.filter-btn[data-filter="feast"]::before { background: var(--gold-bright); }
.filter-btn[data-filter="ministry"]::before { background: var(--blue); }
.filter-btn[data-filter="event"]::before { background: var(--ink-soft); }
.filter-btn.active::before { background: var(--gold-pale); }
.filter-btn.active[data-filter="all"]::before { display: none; }

.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-head div {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.4rem 0;
}
.cal-grid {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-day { background: var(--card); min-height: 108px; padding: 0.4rem 0.45rem; font-size: var(--text-xs); }
.cal-day .d { font-weight: 700; color: var(--ink-soft); }
.cal-day.muted { background: color-mix(in srgb, var(--card) 55%, transparent); }
.cal-day.muted .d { color: var(--ink-faint); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--gold-bright); }

.cal-event {
  display: block;
  margin-top: 3px;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* 16. Map, plugin slots & albums --------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; }

/* Equal-height contact cards: the form stretches, its message box absorbs
   the extra room so the submit button sits at the card bottom */
.contact-grid .form { flex: 1 1 auto; display: flex; flex-direction: column; }
.contact-grid .form .field:has(textarea) { flex: 1; display: flex; flex-direction: column; }
.contact-grid .form .field textarea { flex: 1; }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
  background: var(--parchment-deep);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Region rendered by a WordPress plugin (GiveWP, gallery, Forminator, …) */
.plugin-slot {
  border: 2px dashed var(--gold-bright);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--card) 55%, transparent);
}
.plugin-slot > .note { display: block; margin: 0 0 var(--space-3); }

/* Media album cards */
.albums { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }
.album-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--parchment-deep), var(--gold-pale));
  color: var(--crimson);
  margin-bottom: var(--space-2);
}
.album-meta { font-size: var(--text-xs); color: var(--ink-faint); }

/* Visually hidden, but read by screen readers and indexed by search engines.
   Used for the home page H1, which the design shows no visible heading for. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Spam trap — must stay in the DOM and focusable-free, but never visible */
.hnc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Validation notice, mirroring .form-success */
.form-error {
  color: var(--crimson);
  font-weight: 600;
  font-size: var(--text-sm);
  margin: var(--space-2) 0 0;
}
[aria-invalid="true"] { border-color: var(--crimson); }

/* Radio group (registration form) — sits on the same baseline as inputs */
.radio-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  min-height: 2.6rem;
}
.radio-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  cursor: pointer;
  margin: 0;
}
.radio-opt input { accent-color: var(--crimson); margin: 0; }

/* Multi-column form rows (registration). cols-N overrides the default 2-up. */
.form-row-split.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 640px) {
  .form-row-split.cols-3 { grid-template-columns: 1fr; }
}

/* Section heading inside a form (Identity / Contact) */
.form-section {
  margin: var(--space-3) 0 0.2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
}
.form:first-child > .form-section:first-child,
.form > .form-section:first-of-type { margin-top: 0; }

/* Conditional field: visible by default so it's always reachable without JS.
   When JS is present (html.js), it's hidden until its trigger matches. The
   .js flag is set by an inline head script, so there's no flash. */
.js .js-conditional { display: none; }
.js .js-conditional.is-visible { display: grid; }

/* Family-member rows (registration) */
.family-member {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: color-mix(in srgb, var(--gold-pale) 18%, transparent);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.family-member .form-row-split { margin-bottom: 0; }
.family-member .form-row-split + .form-row-split { margin-top: var(--space-2); }
.family-remove {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1;
  font-size: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--crimson);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.family-remove:hover { border-color: var(--crimson); background: color-mix(in srgb, var(--crimson) 8%, transparent); }
.hnc-add-family { margin-top: var(--space-1); }

/* 16. Giving page ---------------------------------------------------------------- */

.give-tithe-body h2 { margin-bottom: var(--space-2); }

/* Special Projects band — tinted like the home "This Week" section */
.give-projects-band {
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border-block: 1px solid var(--line);
}

/* Special Projects grid (with pictures) */
.project-grid {
  display: grid;
  /* 6 projects divide evenly: 3 per row on desktop, 2 on tablet, 1 on mobile
     — never an orphaned card. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
}
/* Compact card: small square image floated, text wrapping around it.
   The footer is absolutely pinned to the card bottom, so the Give button is
   always in the same lower-right corner regardless of text length. Extra
   bottom padding reserves space for it. */
.project-card {
  position: relative;
  padding: var(--space-3);
  padding-bottom: 5.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.project-cover {
  float: left;
  width: 100px;
  height: 100px;   /* small square */
  margin: 0 var(--space-3) var(--space-2) 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: color-mix(in srgb, var(--gold-pale) 40%, transparent);
}
.project-cover img { width: 100%; height: 100%; object-fit: cover; }
.project-cover-empty {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: color-mix(in srgb, var(--gold) 60%, var(--ink-faint));
}
/* Natural flow: the text wraps around the floated image. */
.project-body { display: block; }
.project-body h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); color: var(--crimson-deep); }
.project-body p { font-size: var(--text-sm); color: var(--ink-soft); margin: 0.3rem 0 var(--space-2); }

/* Pinned to the card bottom: raised bar (left, middle-aligned) + Give (right). */
.project-foot {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* The bar is the only in-flow content, so align-items:center puts it on the
   button's vertical center; the meta hangs just below the bar. */
.project-progress { flex: 1 1 auto; min-width: 0; position: relative; }
.project-progress .progress { margin: 0; }
.project-progress .progress-meta {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  margin: 0;
}
.project-foot .btn { flex: 0 0 auto; }

/* Ways to Give — platform grid */
.give-lead { font-size: var(--text-lg); color: var(--ink-soft); margin: 0 0 var(--space-3); }
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.method-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.method-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.method-card--pref { border-color: var(--gold); background: color-mix(in srgb, var(--gold-pale) 30%, transparent); }
.method-icon {
  flex: 0 0 auto;
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--crimson) 9%, transparent);
  color: var(--crimson);
}
/* Uniform monotone icons: same size, crimson via currentColor. */
.method-icon svg { width: 60%; height: 60%; fill: currentColor; }
.method-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.15rem; }
.method-name { font-weight: 700; color: var(--crimson-deep); }
.method-tag {
  margin-left: 0.5rem; font-size: var(--text-xs); font-weight: 700; color: var(--crimson);
  background: var(--card); border: 1px solid var(--gold); border-radius: 999px; padding: 0.05rem 0.55rem;
}
.method-blurb { font-size: var(--text-sm); color: var(--ink-soft); }
.method-go { color: var(--gold); font-size: 1.3rem; flex: 0 0 auto; }
.give-back { margin-top: var(--space-3); }
.give-pay .services-list { margin-top: var(--space-2); }

@media (max-width: 620px) {
  .method-grid { grid-template-columns: 1fr; }
}

/* Tithing card — floated icon with the copy wrapping around it */
.tithe-icon {
  float: left;
  width: 180px;
  margin: 0.2rem var(--space-4) var(--space-2) 0;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 0 8px rgba(43, 32, 22, 0.14);
}
/* Run-in heading: the h3 sits inline and the body continues on the same line. */
.tithe-copy h3 {
  display: inline;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--wp-admin-theme-color-darker-20);
}
/* Each section is a block so consecutive run-in headings don't run together.
   Its body <p> (added by the editor's auto-formatting) is inline so the text
   continues on the same line as the heading. */
.tithe-sec { margin: 0 0 var(--space-3); text-align: justify; }
.tithe-sec p { display: inline; margin: 0; }
/* Scripture verses — consistently italic and crimson. */
.tithe-copy .scripture { font-style: italic; color: var(--crimson); }
.tithe-copy .card-actions { clear: both; margin-top: var(--space-3); }

@media (max-width: 620px) {
  .tithe-icon { float: none; display: block; margin: 0 auto var(--space-3); }
}

/* Explanatory note above an embedded GiveWP form (e.g. PayPal step notice) */
.give-explain {
  background: color-mix(in srgb, var(--gold-pale) 40%, transparent);
  border: 1px solid var(--gold);
  border-radius: var(--radius-btn);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}
.give-explain p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.give-explain strong { color: var(--crimson-deep); }

/* Zelle QR code — the bank's "scan to give" card, centered */
.zelle-qr {
  max-width: 320px;
  margin: var(--space-3) auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-2);
}
.zelle-qr img { width: 100%; display: block; }

.zelle-scan { text-align: center; margin: 0 0 var(--space-2); color: var(--ink-soft); font-weight: 600; }

/* Give payment pages: labels like "Or send to" need room to stay on one line */
.give-pay .services-list li { grid-template-columns: max-content 1fr; gap: var(--space-3); }
.give-pay .services-list .day { white-space: nowrap; }

/* 17. ACH authorization — fillable, printable form --------------------------- */

.ach-intro { margin-bottom: var(--space-4); }
.ach-steps { margin: var(--space-2) 0 var(--space-3); padding-left: 1.3rem; }
.ach-steps li { margin: 0.25rem 0; }

.ach-doc { color: var(--ink); }
.ach-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--crimson-deep);
  text-align: center;
  margin-bottom: var(--space-3);
}
.ach-h {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--crimson-deep);
  margin: var(--space-3) 0 var(--space-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
}
.ach-para { line-height: 2.1; }
.ach-hint { color: var(--ink-faint); font-size: var(--text-sm); }

/* Inline fill-in-the-blank fields */
.ach-fill {
  border: none;
  border-bottom: 1px solid var(--ink-soft);
  background: transparent;
  font: inherit;
  color: var(--crimson-deep);
  padding: 0 0.25rem;
}
.ach-fill:focus-visible { outline: none; border-bottom-color: var(--crimson); }

/* Labelled boxes (billing + bank details) */
.ach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-3); }
.ach-field { display: flex; flex-direction: column; gap: 0.2rem; }
.ach-field span { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.ach-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: var(--ink);
  padding: 0.5rem 0.65rem;
}
.ach-box:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 1px; border-color: var(--crimson); }

.ach-account-type { display: flex; gap: var(--space-4); margin-bottom: var(--space-2); }
.ach-radio { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.ach-radio input { accent-color: var(--crimson); }

.ach-attach { margin-top: var(--space-3); color: var(--crimson-deep); }
.ach-legal { font-size: var(--text-xs); color: var(--ink-soft); line-height: 1.5; margin-top: var(--space-2); }

.ach-sign { display: flex; gap: var(--space-4); margin-top: var(--space-5); }
.ach-sign-line { flex: 1 1 auto; border-top: 1px solid var(--ink); padding-top: 0.3rem; }
.ach-sign-date { flex: 0 0 12rem; }
.ach-sig-label { font-size: var(--text-sm); color: var(--ink-soft); }

@media (max-width: 620px) {
  .ach-grid { grid-template-columns: 1fr; }
}

/* Print: just the filled form, on white, no site chrome */
@media print {
  .topline, .site-header, .footer, .ach-noprint, .page-head { display: none !important; }
  body { background: #fff !important; color: #000; }
  .section { padding: 0 !important; }
  .intro-card { box-shadow: none !important; border: none !important; padding: 0 !important; background: #fff !important; }
  .ach-box { border: 1px solid #999 !important; }
  .ach-fill { color: #000 !important; }
  .ach-title, .ach-h, .ach-attach { color: #000 !important; }
  .ach-legal { color: #333 !important; }
}

.ach-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.ach-status { flex-basis: 100%; margin: var(--space-2) 0 0; font-size: var(--text-sm); }
.ach-status--ok { color: var(--crimson-deep); font-weight: 600; }
.ach-status--err { color: var(--crimson); font-weight: 600; }

/* ACH form updates: watermark styling and next-steps block below the form */
.ach-fill::placeholder { color: color-mix(in srgb, var(--ink-faint) 65%, transparent); font-style: italic; }
.ach-box::placeholder { color: color-mix(in srgb, var(--ink-faint) 65%, transparent); font-style: italic; }
.ach-next { margin-top: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-3); }
.ach-next .ach-steps { margin: 0 0 var(--space-3); }

/* 18. Media page — text tabs + embedded services ---------------------------- */

.media-tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
}
.media-tab {
  position: relative;
  padding: 0.6rem 0.2rem;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: var(--text-md);
  color: var(--ink-soft);
  text-decoration: none;
  border: none;
  background: none;
}
.media-tab:hover { color: var(--crimson); }
.media-tab.is-active { color: var(--crimson-deep); }
.media-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--crimson);
  border-radius: 2px 2px 0 0;
}

/* Embedded video / audio */
.media-embed {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: #000;
}
.media-embed--16x9 { aspect-ratio: 16 / 9; }
.media-embed--audio { min-height: 360px; background: var(--card); }
.media-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.media-source { margin-top: var(--space-2); font-size: var(--text-sm); text-align: right; }

/* Google Photos: no embed possible, so tiles link out */
.media-empty { text-align: center; }
.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.album-tile {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease-out), border-color 0.2s;
}
.album-tile:hover { transform: translateY(-2px); border-color: var(--gold); }
.album-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.album-tile-title { display: block; padding: var(--space-2) var(--space-3); font-weight: 600; color: var(--crimson-deep); }

/* Media grid: video/audio tiles below a large "now playing" player */
.media-now-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--crimson-deep);
  margin: var(--space-3) 0 var(--space-3);
}
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.media-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease-out), border-color 0.2s;
}
.media-tile:hover { transform: translateY(-2px); border-color: var(--gold); }
.media-tile.is-current { border-color: var(--crimson); box-shadow: 0 0 0 2px color-mix(in srgb, var(--crimson) 25%, transparent); }
.media-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--gold-pale) 30%, transparent);
  display: block;
  overflow: hidden;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: color-mix(in srgb, var(--gold) 60%, var(--ink-faint));
}
.media-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}
.media-play svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.media-tile:hover .media-play,
.media-tile.is-current .media-play { opacity: 1; }
.media-tile-title {
  padding: 0.65rem var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--crimson-deep);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.media-tile.is-current .media-tile-title { color: var(--crimson); }

/* Clergy biography — portrait floated left, text wraps around it */
.clergy-bio { overflow: hidden; }
.clergy-portrait {
  float: left;
  width: 260px;
  max-width: 40%;
  margin: 0 var(--space-4) var(--space-3) 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.clergy-bio h2,
.clergy-bio h3 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--crimson-deep);
  margin-top: var(--space-3);
}
.clergy-bio h2:first-child,
.clergy-bio h3:first-child { margin-top: 0; }
.clergy-bio p { margin: 0 0 var(--space-2); }
.clergy-bio ul { margin: var(--space-2) 0; }
@media (max-width: 620px) {
  .clergy-portrait { float: none; display: block; margin: 0 auto var(--space-3); max-width: 220px; }
}

/* Mobile/tablet tap-target polish (WCAG 2.5.5 / iOS HIG 44pt / Material 48dp).
   Uses the same 900px breakpoint as the hamburger drawer so drawer nav items
   are always comfortable to tap, on tablet as well as phone. */
@media (max-width: 900px) {
  /* ACH inline underline fields (.ach-fill) — inline-block so min-height works. */
  .ach-fill { display: inline-block; min-height: 44px; padding: 0.5rem 0.35rem; vertical-align: middle; }
  .ach-para { line-height: 2.6; }

  /* ACH labelled boxes — bump to 44 */
  .ach-box { min-height: 44px; }

  /* Radio labels: expand the tap area to the whole label row */
  .ach-radio { min-height: 44px; padding: 0.4rem 0.2rem; }
  .radio-opt { min-height: 44px; padding: 0.4rem 0.2rem; }

  /* Media tabs — Pictures / Video / Audio */
  .media-tab { min-height: 44px; padding: 0.85rem 0.4rem; }

  /* Filter chips (calendar filters, category buttons) */
  .filter-btn, .view-btn { min-height: 44px; padding: 0.5rem 0.9rem; }

  /* WhatsApp accordion category headers */
  .group-cat-toggle { min-height: 48px; padding: 0.3rem 0; }

  /* Join / Give small buttons — ensure minimum */
  .group-join, .method-go { min-height: 40px; }

  /* Notes and fine print must stay readable — floor at 12px */
  .note { font-size: max(12px, var(--text-xs)); }
  .footer .col li, .footer p, .footer .fine { font-size: max(12px, var(--text-xs)); }
}

/* "Add to Home Screen" banner — a discreet, dismissible bottom sheet */
#hnc-install-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  padding: 0.75rem;
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#hnc-install-banner.is-open { transform: none; }
.hnc-install-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 560px;
  margin: 0 auto;
  padding: 0.7rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(43, 32, 22, 0.28);
}
.hnc-install-icon { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; }
.hnc-install-copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.hnc-install-copy strong { color: var(--crimson-deep); }
.hnc-install-copy span { font-size: var(--text-sm); color: var(--ink-soft); }
.hnc-install-copy b { color: var(--crimson); font-weight: 700; }
.hnc-install-btn {
  flex: 0 0 auto;
  background: linear-gradient(180deg, var(--crimson), var(--crimson-deep));
  color: var(--gold-pale);
  border: none;
  padding: 0.55rem 0.95rem;
  border-radius: 9px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  min-height: 40px;
}
.hnc-install-btn:disabled { opacity: 0.6; cursor: default; }
.hnc-install-close {
  flex: 0 0 auto;
  background: none; border: 0; color: var(--ink-soft);
  font-size: 1.4rem; line-height: 1;
  padding: 0.25rem 0.4rem; cursor: pointer;
  border-radius: 6px;
}
.hnc-install-close:hover { color: var(--crimson); background: color-mix(in srgb, var(--gold-pale) 40%, transparent); }

@media (max-width: 380px) {
  .hnc-install-btn { padding: 0.5rem 0.65rem; font-size: var(--text-sm); }
}


/* 21. Mobile overrides ------------------------------------------------------
   These rules sit at the end of the file on purpose. Several page layouts
   (.contact-grid, .with-toc, .form-row-split, .ach-grid, .method-grid) declare
   their default two-column grid AFTER the main @media (max-width: 900px) block,
   so those earlier collapse rules lose the cascade by source order. This
   final block wins and forces a single-column stack on phones. */
@media (max-width: 900px) {
  .container.contact-grid,
  .contact-grid,
  .with-toc,
  .form-row-split,
  .form-row-split.cols-3,
  .ach-grid,
  .method-grid,
  .give-methods,
  .intro .container,
  .week .container {
    grid-template-columns: 1fr !important;
  }

  /* Text justified across a narrow column produces enormous inter-word gaps.
     Left-align once the viewport is narrow enough that justification hurts. */
  .intro-card p,
  .card p,
  .content-card p,
  .clergy-bio p,
  .tithe-sec {
    text-align: left;
    hyphens: auto;
  }

  /* Table-of-contents sidebar reads better as a collapsed list at the top. */
  .toc { position: static; margin-bottom: var(--space-4); }

  /* Section container padding is already tight; make sure nothing bleeds out. */
  .container { padding-left: var(--space-3); padding-right: var(--space-3); }
}

@media (max-width: 620px) {
  /* Register / clergy contact form: split rows also stack. */
  .form-row-split,
  .form-row-split.cols-3,
  .ach-grid,
  .contact-grid,
  .method-grid {
    grid-template-columns: 1fr !important;
  }
}