/* ============================================================
   CHURCH STARTER — COMPONENTS
   ============================================================ */

/* ---------------------------------------------- HEADER */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,247,242,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 76px;
}
.brand-lockup { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand-lockup img.brand-mark { width: 230px; height: 42px; }
.brand-lockup .brand-text {
  font-family: var(--ui); font-weight: 800; color: var(--ink);
  font-size: 1.05rem; line-height: 1; letter-spacing: -.02em;
}
.brand-lockup .brand-text span {
  display: block; font-size: .62rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-muted); margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
  font-family: var(--ui); font-weight: 600; font-size: .94rem;
  color: var(--ink-2); text-decoration: none;
  padding: .55rem .8rem; border-radius: var(--radius);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--cream); }
.nav a[aria-current="page"] { color: var(--teal-deep); }

.header-cta .btn { white-space: nowrap; }
.header-cta { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.header-cta .btn { padding: .78em 1.35em; font-size: .92rem; }

.nav-toggle { display: none; }

@media (max-width: 1000px) {
  .nav, .header-cta .btn-outline { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 2px solid var(--line); border-radius: var(--radius);
    padding: .6rem .9rem; font-family: var(--ui); font-weight: 700; font-size: .9rem;
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle:hover { border-color: var(--ink); }
}

/* mobile drawer */
.mobile-nav {
  display: none; border-top: 1px solid var(--line);
  background: var(--paper); padding: var(--sp-3) 0 var(--sp-5);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; font-family: var(--ui); font-weight: 600; font-size: 1.05rem;
  color: var(--ink-2); text-decoration: none;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.mobile-nav .btn { width: 100%; margin-top: var(--sp-4); }

/* ---------------------------------------------- HERO */
.hero {
  position: relative; background: var(--ink); color: var(--white);
  overflow: hidden; isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(22,149,160,.42) 0%, transparent 58%),
    radial-gradient(100% 80% at 8% 92%, rgba(42,58,140,.34) 0%, transparent 60%),
    linear-gradient(160deg, #0C1055 0%, #060644 46%, #04032E 100%);
}
/* faint seal watermark — the mark as texture, not decoration */
.hero::after {
  content: ""; position: absolute; z-index: -1;
  right: -8%; top: 50%; transform: translateY(-50%);
  width: min(58vw, 660px); aspect-ratio: 1;
  background: url('../img/mark-wash.png') center/contain no-repeat;
  opacity: .05; pointer-events: none;
}
.hero-inner { padding-block: clamp(4.5rem, 12vw, 9rem); position: relative; }
.hero h1 {
  font-size: var(--step-6); color: var(--white); line-height: .94;
  letter-spacing: -.025em; max-width: 15ch;
  text-transform: uppercase;   /* every hero graphic the church makes is set this way */
}
.hero h1 .line-2 { color: var(--teal-light); display: block; }
.hero .lede { max-width: 46ch; margin-top: var(--sp-4); color: #C2CCDA; }
.hero .cluster { margin-top: var(--sp-6); }

/* service strip riding the bottom of the hero */
.service-strip {
  border-top: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
}
.service-strip .wrap {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4); padding-block: var(--sp-5);
}
.service-strip .item { display: flex; gap: var(--sp-3); align-items: baseline; }
.service-strip .time {
  font-family: var(--ui); font-weight: 800; font-size: var(--step-2);
  color: var(--teal-light); line-height: 1; letter-spacing: -.03em;
}
.service-strip .label {
  font-family: var(--ui); font-weight: 700; font-size: .95rem; color: var(--white);
  display: block; letter-spacing: -.01em;
}
.service-strip .sub { font-size: .88rem; color: #93A2B6; font-family: var(--ui); }

/* ---------------------------------------------- SECTION HEADS */
.section-head { max-width: 60ch; margin-bottom: var(--sp-6); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--step-4); text-transform: uppercase; letter-spacing: -.015em; }
.section-head p { margin-top: var(--sp-3); font-size: var(--step-1); color: var(--ink-3); }
:is(.bg-ink, .on-dark) .section-head p { color: #A9B6C7; }

/* ---------------------------------------------- CARDS */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-5);
  display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--teal-light); }
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card p { color: var(--ink-3); font-size: .97rem; }
.card .card-more {
  margin-top: auto; padding-top: var(--sp-4);
  font-family: var(--ui); font-weight: 700; font-size: .9rem; color: var(--teal-deep);
  display: inline-flex; align-items: center; gap: .4em;
}
a.card:hover .card-more .arrow { transform: translateX(4px); }
.card-more .arrow { transition: transform .2s var(--ease); display: inline-block; }

/* ministry cards get a colour spine */
.card-ministry { border-top: 4px solid var(--accent, var(--teal)); }
.card-ministry .tag {
  font-family: var(--ui); font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent, var(--teal-deep)); margin-bottom: var(--sp-2);
}

/* ---------------------------------------------- STEPS (plan a visit) */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.step::before {
  counter-increment: step; content: counter(step);
  font-family: var(--ui); font-weight: 800; font-size: 1.05rem;
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--teal-wash); color: var(--teal-deep); border: 2px solid var(--teal-light);
}
:is(.bg-ink, .on-dark) .step::before { background: rgba(229,184,92,.14); border-color: rgba(229,184,92,.45); color: var(--teal-light); }
.step h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.step p { color: var(--ink-3); }
:is(.bg-ink, .on-dark) .step p { color: #A9B6C7; }

/* ---------------------------------------------- SPLIT */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.split-wide { grid-template-columns: 1.15fr .85fr; } }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; }

/* ---------------------------------------------- STAT ROW */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-5); }
.stat .num {
  font-family: var(--ui); font-weight: 800; font-size: var(--step-4);
  color: var(--teal); line-height: 1; letter-spacing: -.03em;
}
.stat .cap {
  font-family: var(--ui); font-weight: 600; font-size: .9rem; color: var(--ink-3);
  margin-top: var(--sp-2); line-height: 1.4;
}
:is(.bg-ink, .on-dark) .stat .cap { color: #93A2B6; }
:is(.bg-ink, .on-dark) .stat .num { color: var(--teal-light); }

/* ---------------------------------------------- CTA BAND */
.cta-band { background: var(--teal-wash); border-block: 1px solid var(--line); }
.cta-band .inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding-block: clamp(2.5rem, 5vw, 4rem);
}
.cta-band h2 { font-size: var(--step-3); max-width: 20ch; }
.cta-band p { color: var(--ink-3); margin-top: var(--sp-2); max-width: 46ch; }

/* ---------------------------------------------- FOOTER */
.site-footer { background: var(--ink); color: #93A2B6; padding-block: var(--sp-8) var(--sp-5); }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-brand img { width: 230px; height: 42px; margin-bottom: var(--sp-3); }
.footer-brand p { font-size: .95rem; max-width: 30ch; }
.site-footer h4 {
  font-family: var(--ui); font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-light); margin-bottom: var(--sp-3);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: .6rem; }
.site-footer a { color: #B7C2D2; text-decoration: none; font-family: var(--ui); font-size: .95rem; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: .85rem; font-family: var(--ui);
}
.social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.social a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center;
  transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.social a:hover { background: var(--teal); border-color: var(--teal); }
.social a:hover svg { fill: var(--ink); }
.social svg { width: 18px; height: 18px; fill: #B7C2D2; transition: fill .18s var(--ease); }

/* ---------------------------------------------- FAQ (details/summary)
   Native disclosure, no JS. Keyboard accessible for free. */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  font-family: var(--ui); font-weight: 700; font-size: var(--step-1);
  color: var(--ink); padding: var(--sp-4) 3rem var(--sp-4) 0;
  position: relative; transition: color .15s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-deep); }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p { padding: 0 3rem var(--sp-5) 0; color: var(--ink-3); max-width: 68ch; }

/* ---------------------------------------------- HEADER, SMALL SCREENS
   At 375px the lockup + CTA + Menu do not fit on one line: the CTA pushed
   the Menu button off the viewport entirely. Below 560px the header keeps
   only the mark and the Menu toggle; "Plan Your Visit" lives in the drawer,
   which is where a thumb is already headed. */
@media (max-width: 560px) {
  .header-inner { min-height: 64px; }
  .header-cta .btn-primary { display: none; }
  .brand-lockup img.brand-mark { width: 196px; height: 36px; }
  .brand-lockup .brand-text { font-size: .98rem; }
  .brand-lockup .brand-text span { font-size: .56rem; letter-spacing: .1em; }
}

/* very narrow (older/smaller phones): drop the wordmark, keep the seal */
@media (max-width: 360px) {
  .brand-lockup .brand-text span { display: none; }
}

/* ============================================================
   WORDPRESS ADDITIONS
   Everything below exists because WordPress emits markup the static
   prototype did not (menu lists, editor blocks, embeds).
   ============================================================ */

/* ---------------------------------------------- NAV LISTS */
.nav-list, .mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; }
/* Uppercase and non-wrapping. Dalton First's own nav is set in caps, and
   without nowrap "I'm New" and "Learning Center" broke onto two lines and
   made the header two rows tall. Tracking is tightened so six items still
   fit a laptop width. */
.nav-list a {
  font-family: var(--ui); font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-2); text-decoration: none;
  padding: .55rem .62rem; border-radius: 999px; display: block;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-list a:hover { color: var(--ink); background: var(--cream); }
.nav-list .current-menu-item > a { color: var(--teal-deep); }

.mobile-nav-list a {
  display: block; font-family: var(--ui); font-weight: 600; font-size: 1.05rem;
  color: var(--ink-2); text-decoration: none;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.mobile-nav-list .current-menu-item > a { color: var(--teal-deep); }

/* ---------------------------------------------- PAGE HERO
   Shorter than the homepage hero — an interior page should not spend
   a full screen before the content starts. */
.page-hero .hero-inner { padding-block: clamp(3rem, 7vw, 5.5rem); }
.page-hero h1 { font-size: var(--step-5); max-width: 20ch; }

/* the service-time unit ("am") sits smaller against the numeral */
.service-strip .time .unit { font-size: .5em; }

/* ---------------------------------------------- EMBED FRAME
   Third-party embeds (Subsplash, Google Calendar) carry their own styling.
   This frame gives them a consistent edge so they read as part of the page
   rather than as something pasted on top of it. */
.embed-frame {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.embed-frame iframe { display: block; width: 100%; border: 0; }

/* ---------------------------------------------- PROSE (block editor output)
   Staff write in the block editor; these rules make ordinary paragraphs,
   headings and lists land in the type system without them choosing anything. */
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--step-3); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--step-2); margin-top: var(--sp-6); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
/* Scripture gets the Bodoni italic. This is the brand's sparing serif use, and
   it also fixes a real rendering problem: the Montserrat variable file ships no
   italic face, so `font-style: italic` on it was producing a browser-synthesised
   fake oblique — a slanted sans, not an italic. */
.prose blockquote {
  border-left: 4px solid var(--teal); padding-left: var(--sp-4);
  font-family: var(--serif); font-size: var(--step-2); font-style: italic;
  font-weight: 500; letter-spacing: 0; color: var(--ink);
}
.prose blockquote cite {
  display: block; margin-top: var(--sp-3); font-family: var(--ui);
  font-style: normal; font-weight: 700; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-deep);
}
.prose table { width: 100%; border-collapse: collapse; font-family: var(--ui); font-size: .95rem; }
.prose table th, .prose table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.prose table th { font-weight: 700; color: var(--ink); }
.prose figure { margin: 0; }

/* wide content must scroll inside itself, never the page */
.prose table { display: block; overflow-x: auto; }

/* The core Details block powers the FAQ — same look as the prototype,
   with no plugin and no custom block. */
.prose details {
  border-bottom: 1px solid var(--line); margin-top: 0;
}
.prose details:first-of-type { border-top: 1px solid var(--line); }
.prose details summary {
  list-style: none; cursor: pointer;
  font-family: var(--ui); font-weight: 700; font-size: var(--step-1);
  color: var(--ink); padding: var(--sp-4) 3rem var(--sp-4) 0;
  position: relative; transition: color .15s var(--ease);
}
.prose details summary::-webkit-details-marker { display: none; }
.prose details summary:hover { color: var(--teal-deep); }
.prose details summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.prose details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.prose details > *:not(summary) { padding: 0 3rem var(--sp-4) 0; color: var(--ink-3); }

/* ---------------------------------------------- VERSE CARD */
.verse-card { background: var(--teal-wash); border-color: var(--teal-light); }
.verse-card .verse {
  font-family: var(--serif); font-size: var(--step-3); line-height: 1.35;
  color: var(--ink); font-style: italic; font-weight: 500; letter-spacing: 0;
}
.verse-card .verse-ref {
  font-family: var(--ui); font-weight: 700; font-size: .9rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-deep); margin-top: var(--sp-4);
}

/* ---------------------------------------------- STAFF */
.staff-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.staff-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.staff-photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-photo-empty {
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--cream), var(--teal-wash));
}
.staff-photo-empty span {
  font-family: var(--ui); font-weight: 800; font-size: 4rem;
  color: var(--teal); opacity: .55;
}
.staff-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.staff-body h2 { font-size: var(--step-1); }
.staff-role {
  font-family: var(--ui); font-weight: 700; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-deep);
}
.staff-bio { color: var(--ink-3); font-size: .97rem; }
.staff-contact { font-family: var(--ui); font-size: .92rem; font-weight: 600; margin-top: auto; padding-top: var(--sp-3); }

/* ---------------------------------------------- WP CORE ODDS AND ENDS */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.alignwide, .alignfull { max-width: 100%; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ui); font-weight: 700; line-height: 1;
  padding: 1.05em 1.9em; border-radius: var(--radius);
  background: var(--teal); color: var(--ink); text-decoration: none;
}
.wp-block-button__link:hover { background: var(--teal-light); }

/* ---------------------------------------------- SOURCE LINK / NOTE
   Used when a content provider refuses to be embedded (Church Center sends
   X-Frame-Options: SAMEORIGIN) or has not been connected yet. A clear route
   onward beats a broken iframe. */
.source-link {
  background: var(--teal-wash); border: 1px solid var(--teal-light);
  border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center; display: grid; gap: var(--sp-4); justify-items: center;
}
.source-link p { color: var(--ink-2); max-width: 46ch; margin: 0; }

.embed-note {
  margin-top: var(--sp-4); color: var(--ink-3);
  font-family: var(--ui); font-size: .95rem; text-align: center;
}

/* ============================================================
   DROPDOWN SUB-MENUS
   Hover alone is not enough: it excludes touch and keyboard users. Each
   parent item also gets a caret button (added in site.js) that toggles
   .is-open, so the menu works with a mouse, a thumb, or the Tab key.
   ============================================================ */

/* ---------------------------------------------- DESKTOP */
.nav-list li { position: relative; }
.nav-list .menu-item-has-children > a { padding-right: .3rem; }

.nav-list .sub-menu {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 200;
  min-width: 230px; margin: 0; padding: .4rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu,
.nav-list li.is-open > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-list .sub-menu a {
  white-space: nowrap; padding: .6rem .8rem; border-radius: var(--radius);
  font-size: .92rem;
}
.nav-list .sub-menu a:hover { background: var(--cream); }

/* the caret button, sitting alongside the parent link */
.submenu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  padding: .4rem .35rem; margin-left: -.25rem; border-radius: var(--radius);
  color: var(--ink-muted);
}
.submenu-toggle:hover { color: var(--ink); background: var(--cream); }
.submenu-toggle span {
  display: block; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s var(--ease);
}
.nav-list li.is-open > .submenu-toggle span,
.mobile-nav-list li.is-open > .submenu-toggle span {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* parent items sit inline with their caret */
.nav-list .menu-item-has-children,
.mobile-nav-list .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
.nav-list .menu-item-has-children > .sub-menu { flex-basis: 100%; }

/* ---------------------------------------------- MOBILE
   No hover on a phone, so sub-menus stay collapsed until the caret is
   tapped, then push the list down rather than floating over it. */
.mobile-nav-list .menu-item-has-children > a { flex: 1; border-bottom: 0; }
.mobile-nav-list .menu-item-has-children { border-bottom: 1px solid var(--line); }

.mobile-nav-list .sub-menu {
  flex-basis: 100%; list-style: none; margin: 0;
  padding: 0 0 .5rem 1rem;
  display: none;
}
.mobile-nav-list li.is-open > .sub-menu { display: block; }
.mobile-nav-list .sub-menu a {
  font-size: .98rem; padding: .65rem 0; border-bottom: 0;
  color: var(--ink-3);
}
.mobile-nav-list .submenu-toggle { padding: .85rem .6rem; }

/* Touch devices get no hover-open at all — the caret is the only way in,
   which avoids a tap opening a menu and following the link at once. */
@media (hover: none) {
  .nav-list li:hover > .sub-menu { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .nav-list li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ============================================================
   SERMONS
   Thumbnail facades rather than live iframes: fifteen embedded YouTube
   players would cost several megabytes before anyone pressed play. The
   real player is swapped in on click (see site.js).
   ============================================================ */

.sermon-player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--ink);
  cursor: pointer;
}
.sermon-player img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease), opacity .2s var(--ease);
}
.sermon-player:hover img { transform: scale(1.03); opacity: .85; }
.sermon-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sermon-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(22,32,46,.05), rgba(22,32,46,.45));
  border: 0; cursor: pointer; padding: 0;
}
.sermon-play-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--teal); display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.sermon-play-icon::after {
  content: ""; display: block;
  border-left: 18px solid var(--ink);
  border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  margin-left: 5px;
}
.sermon-player:hover .sermon-play-icon { transform: scale(1.08); background: var(--teal-light); }
.sermon-play:focus-visible { outline: 3px solid var(--teal-light); outline-offset: -6px; }

/* ---------------------------------------------- most recent */
.sermon-latest { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .sermon-latest { grid-template-columns: 1.4fr 1fr; } }
.sermon-latest .sermon-player { box-shadow: var(--shadow-lg); }
.sermon-latest-meta h2 { font-size: var(--step-3); margin-top: var(--sp-1); }

.sermon-sub {
  font-family: var(--ui); font-size: .9rem; font-weight: 600;
  color: var(--ink-muted); margin-top: var(--sp-2);
}

/* ---------------------------------------------- grid */
.sermon-grid-head {
  font-size: var(--step-2); margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: var(--sp-5); border-top: 1px solid var(--line);
}
.sermon-grid {
  display: grid; gap: var(--sp-5); margin-top: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.sermon-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.sermon-card .sermon-play-icon { width: 52px; height: 52px; }
.sermon-card .sermon-play-icon::after {
  border-left-width: 15px; border-top-width: 9px; border-bottom-width: 9px;
}
.sermon-card-body h3 { font-size: var(--step-0); line-height: 1.35; font-weight: 700; }

.sermon-archive { margin-top: clamp(2.5rem, 6vw, 4rem); text-align: center; }

/* ================================================================
   THE DIAGONAL

   Dalton First's sections meet at an angled edge, not a straight one.
   After the logo it is the most recognisable thing the church owns, and
   on the old site it was baked into fixed-height image slices that broke
   at odd viewport widths. Here it is a clip-path on the section itself,
   so it holds at every screen size and costs no images.

   Padding is compensated by the slant height on the clipped edge, or text
   collides with the angle on narrow screens — which is exactly how the
   old build failed.

   .slant-b   bottom edge angles up to the right (left side taller)
   .slant-b-r bottom edge angles the other way
   .slant-t   top edge angles, to sit under a .slant-b
   Alternate directions down the page to get the brand's zigzag rhythm.
   ================================================================ */
:root { --slant: clamp(28px, 4.5vw, 92px); }

.slant-b, .slant-b-r, .slant-t, .slant-t-r { position: relative; }

.slant-b   { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.slant-b-r { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--slant))); }
.slant-t   { clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); }
.slant-t-r { clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%); }

/* keep content clear of the angle */
.slant-b, .slant-b-r   { padding-bottom: calc(clamp(3.5rem, 8vw, 7rem) + var(--slant)); }
.slant-t, .slant-t-r   { padding-top:    calc(clamp(3.5rem, 8vw, 7rem) + var(--slant)); }

/* a section that slants into the next one should not leave a paper gap */
.slant-b + .slant-t, .slant-b-r + .slant-t-r { margin-top: calc(var(--slant) * -1); }

@supports not (clip-path: polygon(0 0)) {
  .slant-b, .slant-b-r, .slant-t, .slant-t-r { clip-path: none; }
}

/* ---------------------------------------------- SERIF ACCENT
   Bodoni italic, used the way the brand uses it: one or two words inside
   a Montserrat Black line ("Welcome HOME"), never a paragraph. */
.accent-italic {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.hero h1 .accent-italic { color: var(--teal-light); }

/* the brand yellow, safe here because it is never text on light */
.rule-sun { border: 0; height: 4px; width: 64px; background: var(--sun); margin-bottom: var(--sp-4); }
:is(.bg-ink, .on-dark) .stat-num { color: var(--sun); }

/* ================================================================
   NORTH POINT-INFLUENCED LAYER

   Patterns taken from northpoint.org, applied to Dalton First's own brand
   and content. What was actually worth borrowing:

   1. The hero leads with the VISITOR's felt need, set at a modest size over
      real photography — their h1 is 36.8px, not a 79px slogan. Impact comes
      from the message and the picture, not the type size.
   2. Near-monochrome base with exactly ONE loud accent (they run black/white/
      grey plus #FE5000, used 52 times). Here that accent is the teal.
   3. Sunday broken out BY AGE, each card carrying an outcome, not a
      description — "Building a foundation that lasts", not "ages 3–5 meet in
      room 2124". A parent can scan it in four seconds.
   4. An explicit, numbered next step. They spell out "Here's how to start
      your journey" rather than hoping visitors infer it.
   ================================================================ */

/* ---------------------------------------------- HERO OVER PHOTOGRAPHY */
.hero-photo::before {
  background:
    linear-gradient(180deg, rgba(6,6,68,.55) 0%, rgba(6,6,68,.72) 55%, rgba(6,6,68,.92) 100%),
    var(--hero-img) center 38% / cover no-repeat;
}
/* The seal watermark is a 14KB image sitting at 4% opacity behind a photograph
   — invisible, and a wasted request. Drop it entirely when there is a photo. */
.hero-photo::after { display: none; }

/* the church's own rallying cry, kept as an identity badge above the
   visitor-facing headline rather than as the headline itself */
.hero-kicker {
  display: inline-block; font-family: var(--ui); font-weight: 900;
  font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal-light); margin-bottom: var(--sp-4);
}
.hero-photo h1 { font-size: var(--step-5); max-width: 17ch; }
.hero-photo .lede { color: #D6DEE9; }

/* ---------------------------------------------- NEXT SERVICE COUNTDOWN */
.countdown {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin-top: var(--sp-6); font-family: var(--ui);
}
.countdown-label {
  font-size: var(--step--1); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-light);
}
.countdown-clock { font-size: var(--step-2); font-weight: 900; color: var(--white); letter-spacing: .01em; }
.countdown-clock span { font-size: .55em; font-weight: 700; opacity: .75; margin-left: .1em; margin-right: .5em; }

/* ---------------------------------------------- SUNDAY BY AGE */
.age-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.age-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.age-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.age-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.age-card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.age-card .age-range {
  font-family: var(--ui); font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-deep);
}
.age-card h3 { font-size: var(--step-1); }
.age-card p { font-size: var(--step--1); color: var(--ink-3); margin-top: .15rem; }
.age-card .age-when {
  margin-top: auto; padding-top: var(--sp-3); font-family: var(--ui);
  font-size: .78rem; font-weight: 700; color: var(--ink-muted);
}

/* ---------------------------------------------- NUMBERED NEXT STEPS */
.pathway { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.pathway-step { counter-increment: step; position: relative; padding-top: var(--sp-5); }
.pathway-step::before {
  content: counter(step); position: absolute; top: 0; left: 0;
  font-family: var(--ui); font-weight: 900; font-size: var(--step-4);
  color: var(--teal); line-height: 1; opacity: .95;
}
.pathway-step::after {
  content: ""; position: absolute; top: calc(var(--sp-5) * -0.15); left: 0;
  width: 42px; height: 3px; background: var(--sun);
}
.pathway-step h3 { font-size: var(--step-1); margin-bottom: .4rem; }
.pathway-step p { color: var(--ink-3); font-size: var(--step--1); }
:is(.bg-ink, .on-dark) .pathway-step p { color: #B7C2D2; }
:is(.bg-ink, .on-dark) .pathway-step::before { color: var(--teal-light); }

/* photography inside ministry cards */
.card-ministry.has-photo { padding: 0; overflow: hidden; }
.card-ministry.has-photo img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.card-ministry.has-photo .card-inner { padding: var(--sp-4) var(--sp-5) var(--sp-5); }