/* Church websites. Every church picks a look (body class tpl-*), an accent color (--accent, set per church in a nonce'd style tag),
   and a font style. The shared structure below reads design tokens; each look at the bottom only changes tokens and a few signature details.
   Hand-written, no build step, no inline styles (CSP). Motion is skipped for people who ask for reduced motion. */

/* ======================================================================
   1. Tokens (the default "dawn" look). Looks override these.
   ====================================================================== */
.church-site {
  --nav-bg: rgba(255, 251, 246, .82);
  --nav-line: var(--line);
  --card-bg: var(--white);
  --card-border: var(--line);
  --card-radius: var(--radius);
  --card-shadow: var(--shadow);
  --tint: color-mix(in srgb, var(--accent) 9%, var(--paper));
  --tint-strong: color-mix(in srgb, var(--accent) 18%, var(--white));
  --glow: color-mix(in srgb, var(--accent) 78%, #fff);
  --ring: color-mix(in srgb, var(--accent) 55%, transparent);
  --label: color-mix(in srgb, var(--accent-ink) 70%, var(--ink));
  --btn-radius: 999px;
  --hero-bg: linear-gradient(135deg, #150F3C 0%, #2B1A78 55%, #5B2EA6 100%);
  --page-hero-bg: radial-gradient(60% 160% at 92% 140%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%), linear-gradient(135deg, #150F3C 0%, #2B1A78 58%, #5B2EA6 100%);
  --section-pad: clamp(52px, 6.5vw, 88px);
  --visit-overlap: clamp(44px, 5vw, 64px); /* how far the visit card hangs below the bottom edge of the home banner */
  --head-weight: 600;
  --head-track: -0.02em;
  text-wrap: pretty;
  background: var(--paper);
}
/* Headings: display faces set big look cramped, so a little word space and gentler tracking keep the words apart */
.church-site h1, .church-site h2, .church-site h3 { text-wrap: balance; font-weight: var(--head-weight); letter-spacing: var(--head-track); word-spacing: .05em; }
.church-site .btn { border-radius: var(--btn-radius); }
.church-site .eyebrow { color: var(--label); letter-spacing: .16em; }
.church-site .lead { text-wrap: pretty; }
.church-site :focus-visible { outline-color: var(--focus); }

/* Smooth page-to-page transitions where the browser supports them (progressive; skipped for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .church-site .church-nav { view-transition-name: church-nav; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
}

/* ======================================================================
   2. Staff bar (only people on the church team see it)
   ====================================================================== */
.staff-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 8px max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); background: #150F3C; color: #E9E4FF; font-size: .875rem; line-height: 1.4; }
.staff-bar p { margin: 0; display: flex; align-items: center; gap: 8px; }
.staff-bar a { color: #fff; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px; border-radius: 999px; text-decoration: none; font-weight: 600; background: rgba(255, 255, 255, .12); }
.staff-bar a:hover { background: #fff; color: #150F3C; }
.staff-bar-actions { flex-wrap: wrap; gap: 8px; }
.staff-bar :focus-visible { outline-color: #FFC24B; }
@media print { .staff-bar { display: none; } }

/* ======================================================================
   3. Header and menu
   ====================================================================== */
.church-site .church-nav { background: var(--nav-bg); -webkit-backdrop-filter: saturate(1.7) blur(18px); backdrop-filter: saturate(1.7) blur(18px); border-bottom: 1px solid var(--nav-line); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset; }
.church-site .church-nav-inner { min-height: 76px; gap: 16px; }
@media (min-width: 1100px) {
  .church-site .church-nav-inner { flex-wrap: nowrap; }
  .church-site .church-nav .brand { flex: 0 1 auto; min-width: 0; max-width: 42%; }
  .church-site .primary-nav { flex: 0 0 auto; }
  .church-site .primary-nav ul { flex-wrap: nowrap; }
}
.church-site .church-nav .brand { gap: 12px; font: var(--head-weight) clamp(1.15rem, 1.5vw + .6rem, 1.5rem)/1.1 var(--font-head); letter-spacing: var(--head-track); }
.church-site .church-nav .brand img { width: auto; height: 44px; max-width: min(220px, 46vw); object-fit: contain; border-radius: 10px; }
.brand-mark { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--accent); color: var(--accent-text); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent); }
.brand-name { min-width: 0; overflow-wrap: anywhere; }
.church-site .church-nav a.nav-link, .church-site .nav-more summary.nav-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 6px 13px; border-radius: 999px; font-weight: 500; font-size: .95rem; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .18s, color .18s; }
.church-site .church-nav a.nav-link:hover, .church-site .nav-more summary.nav-link:hover, .church-site .nav-more details[open] > summary { background: var(--tint-strong); color: var(--ink); }
.church-site .church-nav a.nav-link[aria-current="page"] { background: var(--tint-strong); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.church-site .church-nav .nav-cta a.nav-link { background: var(--accent); color: var(--accent-text); font-weight: 600; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent); }
.church-site .church-nav .nav-cta a.nav-link:hover { background: var(--accent-hover); color: var(--accent-hover-text); }
.nav-more summary { list-style: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more details[open] > summary .icon { transform: rotate(180deg); }
.nav-more { position: relative; }
.nav-more details > ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: var(--shadow-lift); }
.nav-more details > ul a.nav-link { width: 100%; border-radius: 12px; }
.nav-extra { display: none; }
@media (max-width: 1099px) {
  /* One row: the name takes what is left and wraps inside its own space, so the Menu button never drops under it */
  .church-site .church-nav-inner { min-height: 64px; padding-block: 8px; gap: 8px 14px; }
  .church-site .church-nav .brand { flex: 1 1 0; min-width: 0; max-width: none; margin-right: 0; font-size: clamp(1.05rem, 3.6vw, 1.3rem); line-height: 1.15; }
  .church-site .church-nav .brand img { height: 38px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .church-site .nav-toggle { flex: none; }
  .church-site .primary-nav { flex: 1 1 100%; }
  .church-site .nav-toggle { display: none; }
  .js.church-site .nav-toggle, .js .church-site .nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 2px solid var(--ink); border-radius: 999px; background: none; font: 600 .95rem var(--font-body); color: var(--ink); cursor: pointer; }
  .church-site .primary-nav ul { gap: 2px; padding: 8px 0 14px; }
  .church-site .primary-nav a.nav-link { width: 100%; min-height: 52px; font-size: 1.05rem; padding-inline: 18px; border-radius: 16px; }
  .church-site .primary-nav li + li { border-top: 1px solid var(--nav-line); }
  .church-site .primary-nav .nav-cta { border-top: 0; padding-top: 8px; }
  .church-site .primary-nav .nav-cta a.nav-link { justify-content: center; }
  .church-site .nav-more { display: none; }
  .church-site .nav-extra { display: list-item; }
}

/* ======================================================================
   4. Home hero
   ====================================================================== */
/* flow-root keeps the visit card's negative bottom margin from collapsing into the banner's own margin, so the card truly hangs over the banner's edge */
.church-site .church-hero { position: relative; isolation: isolate; display: flow-root; color: #fff; background: var(--hero-bg); overflow: visible; }
.church-site .church-hero.has-visit { margin-bottom: var(--visit-overlap); }
.church-site .church-hero.has-visit + .section { padding-top: clamp(36px, 4.5vw, 60px); }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--hero-bg); }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.hero-shade { position: absolute; inset: 0; background: radial-gradient(70% 90% at 12% 100%, rgba(10, 7, 40, .62), transparent 70%), linear-gradient(180deg, rgba(10, 7, 40, .44), rgba(10, 7, 40, .30) 45%, rgba(10, 7, 40, .68)); }
.church-site .church-hero.hero-photo .eyebrow { text-shadow: 0 1px 14px rgba(10, 7, 40, .7); }
.hero-glow { position: absolute; inset: auto -10% -40% 30%; height: 90%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); filter: blur(30px); opacity: .55; pointer-events: none; }
.church-site .church-hero .container { position: relative; padding-block: 0; }
.church-site .church-hero .hero-inner { padding-block: clamp(52px, 7vw, 96px) clamp(36px, 4.5vw, 60px); max-width: 1180px; }
.church-site .church-hero:not(.has-visit) .hero-inner { padding-bottom: clamp(52px, 6vw, 88px); }
.church-site .church-hero .eyebrow { color: var(--glow); margin-bottom: 1rem; display: inline-flex; align-items: center; gap: .6rem; }
.church-site .church-hero .eyebrow::before { content: ''; width: 36px; height: 2px; background: currentColor; border-radius: 2px; opacity: .8; }
.church-site .church-hero h1 { color: #fff; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem); line-height: 1.07; letter-spacing: -0.02em; word-spacing: .06em; max-width: 20ch; margin: 0 0 .3em; text-shadow: 0 2px 40px rgba(10, 7, 40, .45); }
.church-site .church-hero .lead { color: rgba(255, 255, 255, .94); font-size: clamp(1.05rem, .85rem + .7vw, 1.3rem); line-height: 1.5; max-width: 42ch; margin-bottom: 0; text-shadow: 0 1px 18px rgba(10, 7, 40, .4); }
.church-site .hero-actions { margin-top: clamp(1.25rem, 2.5vw, 1.9rem); gap: 12px; }
.church-site .church-hero .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .8); }
.church-site .church-hero .btn-secondary:hover { background: #fff; color: #150F3C; border-color: #fff; }
.church-site .church-hero .btn-primary { box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 55%, transparent); }
.church-site .church-hero :focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .church-hero.hero-photo .hero-bg img { animation: hero-drift 30s ease-out both; }
  .church-hero .hero-inner > * { animation: hero-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .church-hero .hero-inner > :nth-child(2) { animation-delay: .08s; } .church-hero .hero-inner > :nth-child(3) { animation-delay: .16s; } .church-hero .hero-inner > :nth-child(4) { animation-delay: .24s; }
}
@keyframes hero-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* The visit card: times and address, overlapping the hero's bottom edge */
.hero-visit-wrap { position: relative; z-index: 2; margin-bottom: calc(-1 * var(--visit-overlap)); }
.visit-card { text-align: left; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; align-items: center; padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px); border-radius: calc(var(--card-radius) + 4px); background: color-mix(in srgb, var(--card-bg) 96%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--card-border); box-shadow: 0 24px 56px rgba(15, 11, 51, .22), 0 2px 6px rgba(15, 11, 51, .08); color: var(--ink); }
/* Times (and the address when there is one) on the left, one button on the right. With no address the two columns are just times and button. */
@media (min-width: 760px) {
  .visit-card { grid-template-columns: minmax(0, 1fr) auto; }
  .visit-card:has(.visit-times):has(.visit-where) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; }
}
.visit-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.visit-times ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; align-items: baseline; }
.visit-times li { display: contents; }
.visit-day { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.visit-at { font: 600 1.125rem/1.3 var(--font-head); letter-spacing: -0.01em; }
.visit-more { margin-top: 6px; font-size: .875rem; color: var(--ink-soft); }
.visit-where p:not(.visit-label) { margin: 0; line-height: 1.5; }
.visit-card .btn { justify-self: start; white-space: nowrap; }
@media (min-width: 760px) { .visit-card .btn { justify-self: end; } }

/* ======================================================================
   5. Sections and headings
   ====================================================================== */
.church-site .section { padding-block: var(--section-pad); }
.church-site .section-white { background: var(--card-bg); }
.church-site .section-tint { background: var(--tint); }
.section-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
.section-head-row h2 { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem); line-height: 1.12; }
.section-head-row .eyebrow { margin-bottom: .6rem; }
.more-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 18px; border-radius: 999px; border: 1.5px solid var(--card-border); background: var(--card-bg); color: var(--ink); font-weight: 600; font-size: .95rem; text-decoration: none; transition: background .18s, border-color .18s, transform .18s; }
.more-link:hover { background: var(--tint-strong); border-color: var(--ring); color: var(--ink); }
.more-link .icon { transition: transform .18s; }
.more-link:hover .icon { transform: translateX(3px); }

/* ======================================================================
   6. Cards and the home blocks
   ====================================================================== */
.church-site .card { --card-pad: clamp(22px, 2.4vw, 30px); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: var(--card-pad); }
.church-site a.card:hover { border-color: var(--ring); }
.church-site .icon-badge { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--accent); color: var(--accent-text); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 34%, transparent); }
.group-card h3 { font-size: 1.35rem; }

/* Plan your visit: one compact panel with the times, the place and the welcome side by side. The banner's visit card already gave the quick view, so this stays short.
   (--rule is the line weight, 1px on most looks; Modern makes it 2px.) */
.section-visit { padding-block: clamp(28px, 3.5vw, 48px) clamp(36px, 4.5vw, 60px); }
.section-visit .section-head-row { margin-bottom: clamp(1rem, 2vw, 1.4rem); }
.section-visit .section-head-row h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
.bento { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: var(--card-bg); border: var(--rule, 1px) solid var(--card-border); border-radius: calc(var(--card-radius) + 4px); box-shadow: var(--card-shadow); }
.church-site .bento > .bento-card { padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.8vw, 32px); border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.church-site .bento > .bento-card + .bento-card { border-top: var(--rule, 1px) solid var(--card-border); }
.church-site .bento > .bento-welcome { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 14%, var(--card-bg)), var(--card-bg) 75%); }
@media (min-width: 640px) { /* tablet: times and place side by side, the welcome across the bottom */
  .bento:has(.bento-where) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento:has(.bento-where) > .bento-welcome { grid-column: 1 / -1; }
  .church-site .bento:has(.bento-where) > .bento-where { border-top: 0; border-left: var(--rule, 1px) solid var(--card-border); }
}
@media (min-width: 900px) { /* desktop: all three in one row */
  .bento:has(.bento-where) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .bento:has(.bento-where) > .bento-welcome { grid-column: auto; }
  .bento:not(:has(.bento-where)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .church-site .bento > .bento-card + .bento-card { border-top: 0; border-left: var(--rule, 1px) solid var(--card-border); }
}
@media (min-width: 1200px) { .bento:has(.bento-where) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.65fr); } }
.bento .bento-label { margin-bottom: 10px; }
/* day and time sit in two aligned columns (the day column is as wide as the longest day) */
.bento .time-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; align-items: baseline; }
.bento .time-list li { display: contents; }
/* in narrow columns the day goes above its time instead */
@media (min-width: 640px) and (max-width: 1199px), (max-width: 520px) {
  .bento .time-list { display: block; }
  .bento .time-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-block: 8px; border-top: 1px solid var(--card-border); }
  .bento .time-list li:first-child { border-top: 0; padding-top: 0; }
  .bento .time-list li:last-child { padding-bottom: 0; }
}
.bento .time-at { font-size: clamp(1.05rem, .95rem + .35vw, 1.2rem); }
.bento .where-address { font-size: 1.05rem; margin-bottom: .8rem; }
.bento .bento-lead { font-size: clamp(1.05rem, .95rem + .4vw, 1.2rem); line-height: 1.45; margin-bottom: .9rem; }
.bento-card { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: clamp(24px, 3vw, 38px); border-radius: calc(var(--card-radius) + 4px); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.bento-label { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 700 .78rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.bento-welcome { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, var(--card-bg)), var(--card-bg) 70%); }
.bento-lead { font: 500 clamp(1.15rem, .9rem + .8vw, 1.45rem)/1.4 var(--font-head); letter-spacing: -0.01em; margin-bottom: 1.1rem; text-wrap: balance; }
.bento-times { justify-content: flex-start; }
.time-list { list-style: none; margin: 0; padding: 0; }
.time-list li { display: grid; grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr); align-items: baseline; gap: 2px 20px; padding: 12px 0; border-top: 1px solid var(--card-border); }
.time-list li:first-child { border-top: 0; padding-top: 0; }
.time-list li:last-child { padding-bottom: 0; }
.time-day { font-weight: 700; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.time-at { font: 600 clamp(1.15rem, .9rem + .7vw, 1.4rem)/1.3 var(--font-head); letter-spacing: -0.01em; }
@media (max-width: 520px) { .time-list li { grid-template-columns: minmax(0, 1fr); } }
.where-address { font-size: 1.1rem; line-height: 1.5; margin-bottom: 1rem; }

/* Announcements */
.callout { position: relative; padding: clamp(22px, 2.4vw, 30px); padding-left: clamp(26px, 2.8vw, 34px); border-radius: var(--card-radius); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); overflow: hidden; }
.callout::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--accent); }
.callout-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 14px; background: var(--tint-strong); color: var(--label); }
.callout h3 { font-size: 1.3rem; margin-bottom: .3em; }

/* Events */
.event-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.church-site .event-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 16px 22px 16px 16px; border-radius: var(--card-radius); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.church-site .event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--ring); color: var(--ink); }
.church-site .event-date { width: 76px; height: 76px; border-radius: calc(var(--card-radius) - 6px); background: var(--tint-strong); color: var(--ink); }
.church-site .event-date span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-soft); }
.church-site .event-date strong { font: 600 2rem/1 var(--font-head); letter-spacing: -0.03em; }
.event-body { display: grid; gap: 4px; min-width: 0; }
.event-title { font: var(--head-weight) 1.3rem/1.2 var(--font-head); letter-spacing: -0.015em; }
.event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: .9rem; color: var(--ink-soft); }
.event-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tint-strong); color: var(--ink); transition: transform .2s, background .2s; }
.event-card:hover .event-go { transform: translateX(4px); background: var(--accent); color: var(--accent-text); }
@media (max-width: 480px) { .church-site .event-card { grid-template-columns: auto 1fr; } .event-go { display: none; } }
.church-site .event-card.has-cover { grid-template-columns: auto 1fr auto auto; }
@media (max-width: 480px) { .church-site .event-card.has-cover { grid-template-columns: auto 1fr auto; } }

/* Latest sermon */
.sermon-feature { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px 28px; padding: clamp(24px, 3.4vw, 44px); border-radius: calc(var(--card-radius) + 8px); color: #fff; text-decoration: none; overflow: hidden; background: radial-gradient(60% 140% at 100% 120%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 70%), linear-gradient(120deg, #150F3C, #2B1A78 70%, #4B2A9A); box-shadow: 0 24px 60px rgba(35, 21, 102, .28); transition: transform .25s, box-shadow .25s; }
.sermon-feature:hover { transform: translateY(-4px); box-shadow: 0 34px 74px rgba(35, 21, 102, .36); color: #fff; }
.sermon-play { display: grid; place-items: center; width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); border-radius: 50%; background: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 28%, transparent), 0 14px 34px rgba(0, 0, 0, .3); transition: transform .25s; }
.sermon-feature:hover .sermon-play { transform: scale(1.06); }
.sermon-play .icon { margin-left: 4px; }
.sermon-body { display: grid; gap: 6px; min-width: 0; }
.sermon-title { font: var(--head-weight) clamp(1.5rem, 2.6vw + .5rem, 2.5rem)/1.1 var(--font-head); letter-spacing: -0.025em; text-wrap: balance; }
.sermon-meta { color: rgba(255, 255, 255, .86); font-size: 1rem; }
.sermon-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .7); font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.sermon-feature:hover .sermon-cta { background: #fff; color: #150F3C; }
@media (max-width: 760px) { .sermon-feature { grid-template-columns: auto 1fr; } .sermon-cta { grid-column: 1 / -1; justify-self: start; } }

/* Staff */
.people-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.person-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 20px 26px; border-radius: var(--card-radius); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.person-photo { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; box-shadow: 0 0 0 4px var(--card-bg), 0 0 0 7px var(--ring); background: var(--tint-strong); }
.person-initials { display: inline-grid; place-items: center; font: 600 2.6rem/1 var(--font-head); letter-spacing: -0.03em; color: #fff; background: linear-gradient(135deg, #2B1A78, color-mix(in srgb, var(--accent) 70%, #2B1A78)); }
.person-card h3 { font-size: 1.3rem; margin-bottom: .15em; }
.person-role { color: var(--label); font-weight: 600; font-size: .9rem; margin: 0; }
.person-bio { margin: 14px 0 0; font-size: .95rem; color: var(--ink-soft); text-align: left; }
.about-people .person-card { align-items: flex-start; text-align: left; }

/* Giving band */
.church-site .give-band { color: #fff; background: radial-gradient(70% 150% at 95% 130%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 70%), linear-gradient(120deg, #150F3C, #2B1A78 65%, #4B2A9A); }
.give-band h2, .give-band .lead, .give-band strong, .give-band .small { color: #fff; }
.give-band .eyebrow { color: var(--glow); }
.give-band .lead { max-width: 44ch; color: rgba(255, 255, 255, .92); }
.give-inner { display: grid; gap: 28px 48px; align-items: center; }
@media (min-width: 800px) { .give-inner { grid-template-columns: 1fr auto; } }
.give-action { margin: 0; }
.give-band .campaign { max-width: 520px; margin-bottom: 18px; }
.church-site progress.meter { height: 12px; background: rgba(255, 255, 255, .2); }
.church-site progress.meter::-webkit-progress-bar { background: rgba(255, 255, 255, .2); }
.church-site progress.meter::-webkit-progress-value { background: linear-gradient(90deg, var(--glow), var(--accent)); }
.church-site progress.meter::-moz-progress-bar { background: linear-gradient(90deg, var(--glow), var(--accent)); }
.church-site .card progress.meter, .church-site .section-white progress.meter { background: var(--line); }
.church-site .card progress.meter::-webkit-progress-bar { background: var(--line); }

/* Newsletter and prayer invitations */
.panel-invite { max-width: 780px; margin-inline: auto; padding: clamp(32px, 5vw, 60px); text-align: center; border-radius: calc(var(--card-radius) + 10px); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.invite-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; margin-bottom: 18px; background: var(--accent); color: var(--accent-text); box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 38%, transparent); }
.panel-invite h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.panel-invite .inline-form input[type=email] { border-radius: 999px; padding-inline: 22px; max-width: 360px; }

/* Watch live */
.church-site .live-band { background: #150F3C; color: #fff; padding-block: 14px; }
.church-site .live-band .muted { color: #D9D3F5; }
.live-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #FF4D4D; box-shadow: 0 0 0 0 rgba(255, 77, 77, .7); }
@media (prefers-reduced-motion: no-preference) { .live-dot { animation: live-pulse 1.8s ease-out infinite; } }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 12px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } }

/* ======================================================================
   7. Inner pages
   ====================================================================== */
.church-site .page-hero { position: relative; overflow: hidden; color: #fff; background: var(--page-hero-bg); padding-block: clamp(40px, 5.5vw, 72px) clamp(32px, 4.5vw, 56px); }
.church-site .page-hero h1 { color: #fff; font-size: clamp(2rem, 1.1rem + 2.8vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 26ch; margin-bottom: .25em; }
.church-site .page-hero .eyebrow { margin-bottom: .6rem; }
.church-site .page-hero .lead { color: rgba(255, 255, 255, .9); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); max-width: 48ch; margin-bottom: 0; }
.church-site .page-hero .muted { color: rgba(255, 255, 255, .8); }
.church-site .page-hero .eyebrow, .church-site .page-hero .eyebrow a { color: var(--glow); }
.church-site .page-hero a:not(.btn) { color: #fff; }
.church-site .page-hero :focus-visible { outline-color: #fff; }
.church-site .page-hero + .section { padding-top: clamp(32px, 4.5vw, 56px); }

.church-site .prose { max-width: 70ch; font-size: 1.075rem; line-height: 1.75; }
.church-site .prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-top: 1.8em; }
.church-site .prose h3 { margin-top: 1.5em; }
.church-site .prose a { color: var(--label); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.church-site .prose blockquote { margin: 1.6em 0; padding: .4em 0 .4em 1.4em; border-left: 4px solid var(--accent); font: italic 500 1.25rem/1.6 var(--font-head); color: var(--ink); }
.church-site .prose hr { border: 0; height: 1px; background: var(--card-border); margin: 2.4em 0; }
.church-site .prose table { border-collapse: collapse; width: 100%; }
.church-site .prose th, .church-site .prose td { padding: 10px 14px; border-bottom: 1px solid var(--card-border); text-align: left; }
.church-site .scripture { border-left-color: var(--accent); background: var(--card-bg); border-radius: 0 var(--card-radius) var(--card-radius) 0; }
/* inside a Scripture card the card carries the accent bar, so the quote itself has no second bar and the reference lines up with the words */
.church-site .scripture blockquote { font-style: italic; margin: 0; padding: 0; border-left: 0; font-size: 1.15rem; line-height: 1.7; }
.church-site .scripture figcaption { text-align: left; }

.about-grid { display: grid; gap: clamp(28px, 5vw, 64px); }
@media (min-width: 980px) { .about-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .about-aside { position: sticky; top: 108px; } }
.about-aside .bento-card { box-shadow: var(--card-shadow); }
.about-aside .time-list li { grid-template-columns: minmax(0, 1fr); }
.about-aside .time-at { font-size: 1.2rem; }
.beliefs { margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 4vw, 48px); border-radius: calc(var(--card-radius) + 8px); background: var(--tint); }
.beliefs h2 { margin-top: 0; }

/* Headings inside page content (a sermon's Scripture and Notes, "Register", "Ask to join", "Plan a visit"): clearly a heading, never bigger than the page title */
.church-site .content-heading { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; margin: clamp(1.8rem, 3vw, 2.6rem) 0 .6em; }
.church-site .content-heading.first { margin-top: 0; }
.church-site .scripture + .content-heading { margin-top: clamp(2rem, 3.5vw, 3rem); }

/* Forms on church pages sit on a soft card */
.church-site .form { background: var(--card-bg); padding: clamp(22px, 3.2vw, 40px); border-radius: calc(var(--card-radius) + 4px); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); max-width: 680px; }
.church-site .narrow .form { max-width: none; }
.church-site input[type=text], .church-site input[type=email], .church-site input[type=tel], .church-site input[type=search], .church-site input[type=password], .church-site select, .church-site textarea { border-radius: calc(var(--card-radius) - 8px); }
.church-site input:focus, .church-site select:focus, .church-site textarea:focus { border-color: var(--label); outline-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.church-site .check input { accent-color: var(--label); }
.church-site .filter-bar { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: 16px 18px; }
.church-site .alert { border-radius: calc(var(--card-radius) - 6px); }
.church-site .notice { background: var(--tint); }

/* Segmented tabs (events: list / month) */
.church-site .tabs { display: inline-flex; gap: 4px; padding: 5px; border: 0; border-radius: 999px; background: var(--tint-strong); width: fit-content; }
.church-site .tabs a { padding: 8px 22px; min-height: 42px; margin: 0; border: 0; border-radius: 999px; color: var(--ink); font-weight: 600; }
.church-site .tabs a:hover { background: color-mix(in srgb, var(--card-bg) 60%, transparent); color: var(--ink); }
.church-site .tabs a[aria-current="page"] { background: var(--card-bg); color: var(--ink); box-shadow: 0 2px 8px rgba(15, 11, 51, .12); border: 0; }

/* Calendar */
.church-site .cal { border-radius: var(--card-radius); border-color: var(--card-border); background: var(--card-bg); }
.church-site .cal th { background: var(--tint-strong); color: var(--ink); }
.church-site .cal td, .church-site .cal th { border-color: var(--card-border); }
.church-site .cal td.today { background: color-mix(in srgb, var(--accent) 16%, var(--card-bg)); box-shadow: inset 0 0 0 2px var(--accent); }
.church-site .cal td.out { background: color-mix(in srgb, var(--paper) 70%, var(--card-bg)); color: var(--ink-soft); }
.church-site .cal .ev { background: var(--tint-strong); color: var(--ink); }
.church-site .cal .ev:hover { background: var(--accent); color: var(--accent-text); }

.church-site .video-embed { border-radius: calc(var(--card-radius) + 6px); box-shadow: 0 24px 60px rgba(35, 21, 102, .28); }
.church-site .social-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.church-site .social-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); text-decoration: none; font-size: .9rem; }
.church-site .social-links a:hover { background: #fff; color: #150F3C; border-color: #fff; }
.church-site .chip-warn { border-radius: 999px; }

/* ======================================================================
   8. Footer
   ====================================================================== */
.church-footer { padding-block: clamp(56px, 7vw, 96px) 32px; }
.footer-invite { display: grid; gap: 28px; align-items: end; padding-bottom: clamp(36px, 5vw, 56px); margin-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 860px) { .footer-invite { grid-template-columns: 1fr auto; } }
.church-footer .eyebrow { color: var(--glow); margin-bottom: .6rem; }
.footer-name { color: #fff; font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.6rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .3em; max-width: 24ch; }
.footer-tagline { color: #D9D3F5; margin: 0; max-width: 40ch; font-size: 1.05rem; }
.footer-invite-cta { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.church-footer .footer-grid h2 { color: var(--glow); }
.church-footer .footer-grid p { margin-bottom: .6em; }
.footer-times { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.church-footer .footer-note { font-weight: 500; }
.church-footer a.btn-primary { color: var(--accent-text); }
.church-footer a.btn-secondary { color: #fff; }
.church-footer a.btn-secondary:hover { color: #150F3C; }
.footer-scripture { margin-top: .4rem; }
.church-site .powered-by { background: var(--paper); }

/* ======================================================================
   9. Looks. Each sets tokens, then a few signature touches.
   ====================================================================== */

/* ---------- Dawn: the default sunrise. Deep indigo sky, warm gold light ---------- */
.tpl-dawn .church-hero.hero-art .hero-shade { background: linear-gradient(180deg, rgba(10, 7, 40, .1), rgba(10, 7, 40, .0) 40%, rgba(10, 7, 40, .5)); }
.tpl-dawn .section-tint { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, #F4EFFF), color-mix(in srgb, var(--accent) 10%, var(--paper))); }
.tpl-dawn .card, .tpl-dawn .person-card, .tpl-dawn .callout, .tpl-dawn .bento-card, .tpl-dawn .event-card { box-shadow: 0 1px 2px rgba(35, 21, 102, .05), 0 14px 34px rgba(35, 21, 102, .08); }

/* ---------- Classic: ivory paper, serif headings, thin rules, centered welcome ---------- */
.tpl-classic { --paper: #FBF9F4; --card-bg: #FFFFFF; --card-radius: 6px; --card-shadow: 0 1px 2px rgba(35, 21, 102, .05); --card-border: #E4DDCB; --line: #E4DDCB; --nav-bg: rgba(255, 255, 255, .92); --nav-line: #E4DDCB; --font-head: 'Fraunces', Georgia, serif; --head-weight: 500; --head-track: -0.015em; --btn-radius: 6px;
  --tint: #F4EFE3; --tint-strong: #EFE7D3; --page-hero-bg: #FBF9F4; --hero-bg: #FBF9F4; }
.tpl-classic .church-hero { color: var(--ink); text-align: center; border-bottom: 4px double #D6CBB0; }
.tpl-classic .church-hero.has-visit { border-bottom: 0; }
.tpl-classic .church-hero.has-visit .hero-bg { border-bottom: 4px double #D6CBB0; }
.tpl-classic .church-hero .hero-bg { background: #FBF9F4; }
.tpl-classic .church-hero .hero-shade, .tpl-classic .church-hero .hero-glow { display: none; }
.tpl-classic .church-hero h1 { color: var(--ink); text-shadow: none; max-width: 18ch; margin-inline: auto; font-weight: 500; }
.tpl-classic .church-hero .lead { color: var(--ink-soft); text-shadow: none; margin-inline: auto; }
.tpl-classic .church-hero .eyebrow { color: var(--label); justify-content: center; }
.tpl-classic .church-hero .hero-actions { justify-content: center; }
.tpl-classic .church-hero .btn-secondary { color: var(--ink); border-color: var(--ink); }
.tpl-classic .church-hero .btn-secondary:hover { background: var(--ink); color: #fff; }
.tpl-classic .church-hero :focus-visible { outline-color: var(--focus); }
.tpl-classic .church-hero.hero-photo { color: #fff; border-bottom-width: 0; }
.tpl-classic .church-hero.hero-photo .hero-shade { display: block; }
.tpl-classic .church-hero.hero-photo h1, .tpl-classic .church-hero.hero-photo .lead { color: #fff; text-shadow: 0 2px 30px rgba(10, 7, 40, .5); }
.tpl-classic .church-hero.hero-photo .eyebrow { color: var(--glow); }
.tpl-classic .church-hero.hero-photo .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .85); }
.tpl-classic .church-hero.hero-photo .btn-secondary:hover { background: #fff; color: #150F3C; }
.tpl-classic .church-hero.hero-photo :focus-visible { outline-color: #fff; }
.tpl-classic .church-hero.hero-art .hero-bg img { opacity: .18; }
.tpl-classic .page-hero { color: var(--ink); text-align: center; border-bottom: 1px solid #E4DDCB; }
.tpl-classic .page-hero h1, .tpl-classic .page-hero a:not(.btn) { color: var(--ink); margin-inline: auto; }
.tpl-classic .page-hero .lead, .tpl-classic .page-hero .muted { color: var(--ink-soft); margin-inline: auto; }
.tpl-classic .page-hero .eyebrow, .tpl-classic .page-hero .eyebrow a { color: var(--label); }
.tpl-classic .page-hero :focus-visible { outline-color: var(--focus); }
.tpl-classic .section-head-row { justify-content: center; text-align: center; flex-direction: column; align-items: center; }
.tpl-classic .section-head-row .more-link { margin-top: 4px; }
.tpl-classic .section-head-row h2::after { content: ''; display: block; width: 72px; height: 9px; margin: 16px auto 0; border-block: 1px solid var(--accent); }
.tpl-classic .visit-card { border-radius: 8px; box-shadow: 0 24px 56px rgba(40, 30, 10, .18); }
.tpl-classic .time-at { font-weight: 500; }
.tpl-classic .bento-card, .tpl-classic .card, .tpl-classic .event-card, .tpl-classic .callout, .tpl-classic .person-card { box-shadow: none; }
.tpl-classic .sermon-feature { background: #FFFFFF; color: var(--ink); border: 1px solid #E4DDCB; box-shadow: none; border-radius: 8px; }
.tpl-classic .sermon-feature:hover { color: var(--ink); box-shadow: 0 14px 34px rgba(40, 30, 10, .12); }
.tpl-classic .sermon-meta { color: var(--ink-soft); }
.tpl-classic .sermon-cta { border-color: var(--ink); }
.tpl-classic .sermon-feature:hover .sermon-cta { background: var(--ink); color: #fff; }
.tpl-classic .give-band { background: #F4EFE3; color: var(--ink); }
.tpl-classic .give-band h2, .tpl-classic .give-band .lead, .tpl-classic .give-band strong, .tpl-classic .give-band .small { color: var(--ink); }
.tpl-classic .give-band .eyebrow { color: var(--label); }
.tpl-classic .give-band progress.meter { background: #E4DDCB; }
.tpl-classic .give-band progress.meter::-webkit-progress-bar { background: #E4DDCB; }
.tpl-classic .person-card { text-align: center; }

/* ---------- Modern: big bold type, color blocks, sharp edges ---------- */
.tpl-modern { --rule: 2px; --font-head: 'Inter', system-ui, sans-serif; --head-weight: 800; --head-track: -0.04em; --card-radius: 14px; --card-shadow: none; --card-border: #150F3C; --btn-radius: 12px; --nav-bg: rgba(255, 255, 255, .92); --nav-line: #150F3C;
  --hero-bg: var(--accent); --page-hero-bg: var(--accent); --tint: color-mix(in srgb, var(--accent) 12%, #fff); --tint-strong: color-mix(in srgb, var(--accent) 24%, #fff); }
.tpl-modern .church-nav { border-bottom-width: 2px; }
.tpl-modern .church-hero { color: var(--accent-text); }
.tpl-modern .church-hero .hero-bg { background: var(--accent); }
.tpl-modern .church-hero .hero-shade, .tpl-modern .church-hero .hero-glow { display: none; }
.tpl-modern .church-hero.hero-art .hero-bg img { opacity: .22; mix-blend-mode: multiply; }
.tpl-modern .church-hero .hero-inner { padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 72px); }
.tpl-modern .church-hero:not(.has-visit) .hero-inner { padding-bottom: clamp(56px, 7vw, 96px); }
.tpl-modern .church-hero h1 { color: var(--accent-text); text-shadow: none; font-size: clamp(2.5rem, 1rem + 5.4vw, 4.75rem); line-height: .98; max-width: 14ch; font-weight: 800; letter-spacing: -0.035em; }
.tpl-modern .church-hero .lead { color: var(--accent-text); opacity: .92; text-shadow: none; font-weight: 500; }
.tpl-modern .church-hero .eyebrow { color: var(--accent-text); }
.tpl-modern .church-hero .btn-primary { background: var(--accent-text); color: var(--accent); box-shadow: none; }
.tpl-modern .church-hero .btn-primary:hover { background: var(--accent-text); color: var(--accent); opacity: .88; }
.tpl-modern .church-hero .btn-secondary { color: var(--accent-text); border-color: var(--accent-text); }
.tpl-modern .church-hero .btn-secondary:hover { background: var(--accent-text); color: var(--accent); }
.tpl-modern .church-hero :focus-visible { outline-color: var(--accent-text); }
.tpl-modern .church-hero.hero-photo { color: #fff; }
.tpl-modern .church-hero.hero-photo .hero-shade { display: block; }
.tpl-modern .church-hero.hero-photo h1, .tpl-modern .church-hero.hero-photo .lead, .tpl-modern .church-hero.hero-photo .eyebrow { color: #fff; text-shadow: 0 2px 30px rgba(10, 7, 40, .5); }
.tpl-modern .church-hero.hero-photo .btn-primary { background: var(--accent); color: var(--accent-text); }
.tpl-modern .church-hero.hero-photo .btn-secondary { color: #fff; border-color: #fff; }
.tpl-modern .church-hero.hero-photo .btn-secondary:hover { background: #fff; color: #150F3C; }
.tpl-modern .church-hero.hero-photo :focus-visible { outline-color: #fff; }
.tpl-modern .page-hero { color: var(--accent-text); }
.tpl-modern .page-hero h1, .tpl-modern .page-hero a:not(.btn), .tpl-modern .page-hero .lead, .tpl-modern .page-hero .muted, .tpl-modern .page-hero .eyebrow, .tpl-modern .page-hero .eyebrow a { color: var(--accent-text); }
.tpl-modern .page-hero h1 { font-size: clamp(2.2rem, 1rem + 3.8vw, 3.75rem); line-height: 1; letter-spacing: -0.035em; }
.tpl-modern .page-hero :focus-visible { outline-color: var(--accent-text); }
.tpl-modern .card, .tpl-modern .bento-card, .tpl-modern .event-card, .tpl-modern .callout, .tpl-modern .person-card, .tpl-modern .panel-invite { border-width: 2px; }
.tpl-modern a.card:hover, .tpl-modern .event-card:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 #150F3C; border-color: #150F3C; }
.tpl-modern .visit-card { border: 2px solid #150F3C; background: #fff; box-shadow: 8px 8px 0 #150F3C; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 16px; }
.tpl-modern .section-head-row h2 { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.25rem); line-height: 1; letter-spacing: -0.035em; }
.tpl-modern .time-at, .tpl-modern .visit-at { font-weight: 800; letter-spacing: -0.02em; }
.tpl-modern .person-photo { box-shadow: 0 0 0 3px #150F3C; border-radius: 22px; }
.tpl-modern .person-initials { border-radius: 22px; background: var(--accent); color: var(--accent-text); }
.tpl-modern .sermon-feature { background: #150F3C; border: 2px solid #150F3C; box-shadow: 8px 8px 0 var(--accent); border-radius: 16px; }
.tpl-modern .sermon-feature:hover { box-shadow: 12px 12px 0 var(--accent); transform: translate(-3px, -3px); }
.tpl-modern .give-band { background: #150F3C; }
.tpl-modern .more-link { border: 2px solid #150F3C; }
.tpl-modern .btn { font-weight: 700; }
.tpl-modern .church-hero .eyebrow::before { height: 3px; }

/* ---------- Warm: cream, soft and rounded, a friendly neighborhood feel ---------- */
.tpl-warm { --paper: #FBF3E6; --sky: #F6E7CF; --line: #EBDDC5; --card-bg: #FFFDF8; --card-border: #EBDDC5; --card-radius: 28px; --card-shadow: 0 2px 4px rgba(120, 70, 20, .05), 0 18px 40px rgba(120, 70, 20, .09); --font-head: 'Fraunces', Georgia, serif; --head-weight: 500; --nav-bg: rgba(251, 243, 230, .86); --nav-line: #EBDDC5;
  --tint: #F8E9D1; --tint-strong: #F3DDBB; --hero-bg: linear-gradient(135deg, #2B1A78, #5B2EA6 60%, #B0387F); --page-hero-bg: #F6E7CF; }
.tpl-warm .church-hero { background: transparent; padding: 18px var(--gutter) 0; }
.tpl-warm .church-hero.has-visit { margin-bottom: var(--visit-overlap); }
.tpl-warm .church-hero .hero-bg { inset: 18px var(--gutter) 0; border-radius: 40px; max-width: 1180px; margin-inline: auto; background: var(--hero-bg); }
.tpl-warm .church-hero .hero-glow { display: block; opacity: .4; }
.tpl-warm .church-hero .container { padding-inline: clamp(24px, 4vw, 56px); }
.tpl-warm .church-hero .hero-inner { padding-block: clamp(52px, 7vw, 100px) clamp(40px, 5vw, 64px); }
.tpl-warm .church-hero:not(.has-visit) .hero-inner { padding-bottom: clamp(52px, 6vw, 88px); }
.tpl-warm .church-hero h1 { font-weight: 500; letter-spacing: -0.03em; }
.tpl-warm .hero-visit-wrap { margin-inline: auto; max-width: 1060px; padding-inline: clamp(12px, 3vw, 40px); }
.tpl-warm .page-hero { color: var(--ink); background: var(--page-hero-bg); border-radius: 0 0 44px 44px; }
.tpl-warm .page-hero h1, .tpl-warm .page-hero a:not(.btn) { color: var(--ink); }
.tpl-warm .page-hero .lead, .tpl-warm .page-hero .muted { color: var(--ink-soft); }
.tpl-warm .page-hero .eyebrow, .tpl-warm .page-hero .eyebrow a { color: var(--label); }
.tpl-warm .page-hero :focus-visible { outline-color: var(--focus); }
.tpl-warm .section-white { background: #FFF9EF; }
.tpl-warm .section-visit { position: relative; }
.tpl-warm .bento-card { border-radius: 32px; }
.tpl-warm .event-date { border-radius: 22px; }
.tpl-warm .person-photo { box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--ring); }
.tpl-warm .sermon-feature { border-radius: 36px; background: linear-gradient(120deg, #3A1D5C, #7A2C9C 70%, #B0387F); }
.tpl-warm .give-band { background: linear-gradient(135deg, #3A1D5C, #7A2C9C 60%, #D05A6E); }
.tpl-warm .panel-invite { border-radius: 40px; }
.tpl-warm .church-nav { box-shadow: none; }

/* ---------- Minimal: quiet, white space, thin lines ---------- */
.tpl-minimal { --paper: #FFFFFF; --card-bg: #FFFFFF; --card-radius: 4px; --card-shadow: none; --card-border: #E6E3EE; --line: #E6E3EE; --nav-bg: rgba(255, 255, 255, .94); --nav-line: #E6E3EE; --font-head: 'Inter', system-ui, sans-serif; --head-weight: 600; --head-track: -0.035em; --btn-radius: 4px;
  --tint: #F7F6FA; --tint-strong: #F0EEF6; --hero-bg: #fff; --page-hero-bg: #fff; --section-pad: clamp(64px, 9vw, 120px); }
.tpl-minimal .church-hero { color: var(--ink); border-bottom: 1px solid var(--card-border); background: #fff; }
.tpl-minimal .church-hero .hero-bg { background: #fff; }
.tpl-minimal .church-hero .hero-bg img, .tpl-minimal .church-hero .hero-shade, .tpl-minimal .church-hero .hero-glow { display: none; }
.tpl-minimal .church-hero.hero-photo { color: #fff; }
.tpl-minimal .church-hero.hero-photo .hero-bg img, .tpl-minimal .church-hero.hero-photo .hero-shade { display: block; }
.tpl-minimal .church-hero .hero-inner { padding-block: clamp(52px, 7vw, 96px) clamp(36px, 4.5vw, 60px); }
.tpl-minimal .church-hero:not(.has-visit) .hero-inner { padding-bottom: clamp(52px, 6vw, 88px); }
.tpl-minimal .church-hero h1 { color: var(--ink); text-shadow: none; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 3.75rem); font-weight: 600; max-width: 20ch; }
.tpl-minimal .church-hero .lead { color: var(--ink-soft); text-shadow: none; }
.tpl-minimal .church-hero .eyebrow { color: var(--label); }
.tpl-minimal .church-hero .btn-secondary { color: var(--ink); border-color: var(--card-border); }
.tpl-minimal .church-hero .btn-secondary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.tpl-minimal .church-hero .btn-primary { box-shadow: none; }
.tpl-minimal .church-hero :focus-visible { outline-color: var(--focus); }
.tpl-minimal .church-hero.hero-photo h1, .tpl-minimal .church-hero.hero-photo .lead { color: #fff; text-shadow: 0 2px 30px rgba(10, 7, 40, .5); }
.tpl-minimal .church-hero.hero-photo .eyebrow { color: var(--glow); }
.tpl-minimal .church-hero.hero-photo .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .85); }
.tpl-minimal .church-hero.hero-photo .btn-secondary:hover { background: #fff; color: #150F3C; }
.tpl-minimal .church-hero.hero-photo :focus-visible { outline-color: #fff; }
.tpl-minimal .page-hero { color: var(--ink); border-bottom: 1px solid var(--card-border); }
.tpl-minimal .page-hero h1, .tpl-minimal .page-hero a:not(.btn) { color: var(--ink); }
.tpl-minimal .page-hero .lead, .tpl-minimal .page-hero .muted { color: var(--ink-soft); }
.tpl-minimal .page-hero .eyebrow, .tpl-minimal .page-hero .eyebrow a { color: var(--label); }
.tpl-minimal .page-hero :focus-visible { outline-color: var(--focus); }
.tpl-minimal .visit-card { box-shadow: 0 20px 50px rgba(21, 15, 60, .1); border-radius: 6px; }
.tpl-minimal .section-white, .tpl-minimal .section-tint, .tpl-minimal .give-band { border-top: 1px solid var(--card-border); }
.tpl-minimal .section-white { background: #fff; }
.tpl-minimal .event-card { border-width: 0 0 1px; border-radius: 0; padding-inline: 0; background: transparent; }
.tpl-minimal .event-card:hover { transform: none; box-shadow: none; background: var(--tint); padding-inline: 12px; }
.tpl-minimal .event-date { background: transparent; border: 1px solid var(--card-border); }
.tpl-minimal .icon-badge, .tpl-minimal .invite-icon, .tpl-minimal .callout-icon { box-shadow: none; border-radius: 6px; }
.tpl-minimal .person-photo { box-shadow: none; }
.tpl-minimal .sermon-feature { background: #fff; color: var(--ink); border: 1px solid var(--card-border); box-shadow: none; border-radius: 6px; }
.tpl-minimal .sermon-feature:hover { color: var(--ink); box-shadow: none; border-color: var(--ink); }
.tpl-minimal .sermon-meta { color: var(--ink-soft); }
.tpl-minimal .sermon-cta { border-color: var(--ink); }
.tpl-minimal .sermon-feature:hover .sermon-cta { background: var(--ink); color: #fff; }
.tpl-minimal .give-band { background: #F7F6FA; color: var(--ink); }
.tpl-minimal .give-band h2, .tpl-minimal .give-band .lead, .tpl-minimal .give-band strong, .tpl-minimal .give-band .small { color: var(--ink); }
.tpl-minimal .give-band .eyebrow { color: var(--label); }
.tpl-minimal .give-band progress.meter, .tpl-minimal .give-band progress.meter::-webkit-progress-bar { background: #E6E3EE; }
.tpl-minimal .panel-invite { border-radius: 6px; box-shadow: none; }
.tpl-minimal .church-nav { box-shadow: none; }

/* ---------- Night: a deep, glowing dark look for evening reading ---------- */
.tpl-night { --paper: #0C0827; --white: #171040; --ink: #F4F1FF; --ink-soft: #C4BDE8; --line: rgba(255, 255, 255, .15); --sky: #1D1558; --link: #FFD36E; --plum: #FFFFFF; --dawn-ink: #FFC24B; --focus: #FFD36E;
  --card-bg: #171040; --card-border: rgba(255, 255, 255, .14); --card-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 50px rgba(0, 0, 0, .35); --nav-bg: rgba(12, 8, 39, .78); --nav-line: rgba(255, 255, 255, .12);
  --label: #FFD36E; --tint: #120C34; --tint-strong: color-mix(in srgb, var(--accent) 24%, #171040); --hero-bg: linear-gradient(140deg, #0C0827, #1D1558 60%, #34196F); --page-hero-bg: radial-gradient(60% 160% at 92% 140%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%), linear-gradient(135deg, #0C0827, #1D1558 60%, #2B1A78);
  color-scheme: dark; }
.tpl-night a:hover { color: #fff; }
.tpl-night .eyebrow, .tpl-night .visit-label, .tpl-night .bento-label, .tpl-night .person-role { color: var(--glow); }
.tpl-night .church-nav { box-shadow: none; }
.tpl-night .church-nav a.nav-link[aria-current="page"], .tpl-night .church-nav a.nav-link:hover, .tpl-night .nav-more summary.nav-link:hover { color: #fff; }
.tpl-night .nav-toggle { border-color: #fff; color: #fff; }
.tpl-night .church-hero .hero-glow { opacity: .75; }
.tpl-night .church-hero .hero-bg { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); } /* the glow fades into the page instead of ending in a hard line */
.tpl-night .church-hero.hero-art .hero-bg img { opacity: .55; }
.tpl-night .visit-card { background: color-mix(in srgb, #171040 90%, transparent); border-color: rgba(255, 255, 255, .18); }
.tpl-night .section-white { background: #100A31; }
.tpl-night .icon-badge, .tpl-night .invite-icon { color: var(--accent-text); }
.tpl-night .callout-icon { color: var(--glow); }
.tpl-night .event-date { color: #fff; }
.tpl-night .event-date span { color: #D9D3F5; }
.tpl-night .person-photo { box-shadow: 0 0 0 4px #171040, 0 0 0 7px var(--ring); }
.tpl-night .sermon-feature { border: 1px solid rgba(255, 255, 255, .14); }
.tpl-night .give-band { background: radial-gradient(70% 150% at 95% 130%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%), linear-gradient(120deg, #0C0827, #1D1558 65%, #34196F); }
.tpl-night .site-footer, .tpl-night .church-footer { background: radial-gradient(60% 90% at 85% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), #070419; }
.tpl-night .powered-by { background: #070419; color: #C4BDE8; border-top-color: rgba(255, 255, 255, .12); }
.tpl-night .powered-by a { color: #FFD36E; }
.tpl-night .scripture { background: #171040; }
.tpl-night .form, .tpl-night .filter-bar { background: #171040; }
.tpl-night input[type=text], .tpl-night input[type=email], .tpl-night input[type=tel], .tpl-night input[type=search], .tpl-night select, .tpl-night textarea { background: #0C0827; color: #F4F1FF; border-color: #8C84C0; }
.tpl-night input::placeholder, .tpl-night textarea::placeholder { color: #A9A1D6; }
.tpl-night .btn-secondary { color: #F4F1FF; border-color: rgba(255, 255, 255, .7); }
.tpl-night .btn-secondary:hover { background: #fff; color: #150F3C; border-color: #fff; }
.tpl-night .more-link { color: #F4F1FF; }
.tpl-night .alert { background: #171040; border-color: rgba(255, 255, 255, .2); color: #F4F1FF; }
.tpl-night .alert-success { background: #12301F; color: #D6F2E1; border-color: #2F7A52; }
.tpl-night .alert-error { background: #3A1420; color: #FFD9DE; border-color: #D86A7A; }
.tpl-night .notice { background: #1D1558; color: #F4F1FF; }
.tpl-night .chip, .tpl-night .tabs a { color: #F4F1FF; }
.tpl-night .cal td.out { color: #9890C8; }
.tpl-night .prose a { color: #FFD36E; }
.tpl-night .video-embed { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.tpl-night .alert-crisis { background: #3A1420; color: #FFD9DE; }
.tpl-night .error-text { color: #FFB4BE; }

/* ======================================================================
   10. Small screens and print
   ====================================================================== */
@media (max-width: 640px) {
  .church-site .church-hero .hero-inner { padding-block: 44px 32px; }
  .church-site .church-hero:not(.has-visit) .hero-inner { padding-bottom: 48px; }
  .church-site .hero-actions .btn-lg { min-height: 52px; padding: 12px 26px; }
  .church-site .church-hero h1 { max-width: 100%; }
  .section-head-row { align-items: flex-start; }
  .bento-card { padding: 22px; }
  .church-site .form { padding: 20px; }
  .church-site .staff-bar { font-size: .8125rem; }
}
@media print {
  .church-nav, .staff-bar, .hero-glow, .visit-card .btn { display: none !important; }
  .church-site .church-hero { color: #000; background: none; }
  .church-site .church-hero h1, .church-site .church-hero .lead { color: #000; text-shadow: none; }
}

/* ======================================================================
   11. List pages
   ====================================================================== */
.list-heading { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 1rem; }
.hero-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; font-weight: 600; font-size: .875rem; }
.hero-pill:hover { background: #fff; color: #150F3C; }
.tpl-classic .hero-pill, .tpl-minimal .hero-pill, .tpl-warm .hero-pill { color: var(--ink); border-color: var(--card-border); background: var(--card-bg); }
.tpl-classic .hero-pill:hover, .tpl-minimal .hero-pill:hover, .tpl-warm .hero-pill:hover { background: var(--ink); color: #fff; }
.tpl-modern .hero-pill { color: var(--accent-text); border-color: var(--accent-text); background: transparent; }
.tpl-modern .hero-pill:hover { background: var(--accent-text); color: var(--accent); }
.sermon-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sermon-card-top .icon-badge { margin: 0; width: 46px; height: 46px; border-radius: 14px; }
.sermon-card-date { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
/* The full events page uses the width: two columns on a desktop, one on a phone (a single event fills the row) */
.church-site .event-list-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px 20px; }
.church-site .grid-3 .card { height: 100%; }

/* Cards in a row keep one width, even when there is only one (auto-fill, not auto-fit) */
.church-site .grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.church-site .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.church-site .contact-grid { align-items: start; gap: clamp(28px, 5vw, 64px); }

/* Contact details */
.info-list { display: grid; gap: 22px; }
.info-row { display: flex; gap: 18px; align-items: flex-start; }
.info-row .icon-badge { margin: 0; flex: none; }
.info-label { font: 700 .78rem var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin: 4px 0 6px; }
.info-times { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.church-site .info-row a { color: var(--ink); text-underline-offset: 4px; }
.tpl-night .info-row a { color: var(--link); }

/* ======================================================================
   Photos from the church's library: page banners and pictures inside pages
   ====================================================================== */
.church-site .page-hero.has-photo { background: #150F3C; color: #fff; border-bottom: 0; text-shadow: 0 1px 12px rgba(10, 6, 34, .35); }
.church-site .page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.church-site .page-hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.church-site .page-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 8, 44, .5), rgba(14, 8, 44, .8)); }
.church-site .page-hero.has-photo > .container { position: relative; z-index: 1; }
.church-site .page-hero.has-photo h1, .church-site .page-hero.has-photo .lead, .church-site .page-hero.has-photo .muted, .church-site .page-hero.has-photo a:not(.btn),
.church-site .page-hero.has-photo .eyebrow, .church-site .page-hero.has-photo .eyebrow a { color: #fff; }
.church-site .page-hero.has-photo :focus-visible { outline-color: #fff; }

.church-site .prose img { max-width: 100%; height: auto; border-radius: 14px; }
.church-site .prose figure.photo { margin: 2em 0; }
.church-site .prose figure.photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(78vh, 640px); margin-inline: auto; box-shadow: 0 14px 36px rgba(20, 12, 60, .16); }
.church-site .prose figcaption { margin-top: .7em; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); text-align: center; }
.tpl-classic .prose img { border-radius: 2px; }
.tpl-classic .prose figure.photo img { box-shadow: none; outline: 1px solid #D6CBB0; outline-offset: 6px; }
.tpl-modern .prose img { border-radius: 0; }
.tpl-modern .prose figure.photo img { box-shadow: 10px 10px 0 var(--accent); }
.tpl-warm .prose img { border-radius: 28px; }
.tpl-minimal .prose img { border-radius: 0; }
.tpl-minimal .prose figure.photo img { box-shadow: none; }
.tpl-night .prose figure.photo img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 20px 50px rgba(0, 0, 0, .5); }

/* Cover photos on cards: a series, an event or a group can show a photo from the library. When one card in a list has a photo, every card gets the same slot (the photo, or a tinted tile with the icon), so the cards stay the same height. */
.church-site .card-cover { display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 9; margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 18px; border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0; background: var(--tint-strong); }
.church-site .card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.church-site .card-cover-ph { background: linear-gradient(135deg, var(--tint), var(--tint-strong)); }
.church-site .card-cover-ph .icon-badge { display: grid; place-items: center; width: 56px; height: 56px; }
.church-site .event-thumb { display: grid; place-items: center; overflow: hidden; width: 76px; height: 76px; border-radius: calc(var(--card-radius) - 6px); background: var(--tint-strong); color: var(--ink-soft); }
.church-site .event-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) { .church-site .event-card.has-cover .event-thumb { width: 60px; height: 60px; } }

/* Hero photo care: which part of the photo stays in view (set from the church's saved choice) and how dark the veil is. The veil never goes away, so the white text stays readable. */
.church-hero.hero-photo .hero-bg img { object-position: var(--hero-x, 50%) var(--hero-y, 40%); }
.church-hero.shade-strong .hero-shade { background: radial-gradient(70% 90% at 12% 100%, rgba(10, 7, 40, .8), transparent 75%), linear-gradient(180deg, rgba(10, 7, 40, .62), rgba(10, 7, 40, .5) 45%, rgba(10, 7, 40, .84)); }
.church-hero.shade-light .hero-shade { opacity: .55; }

/* "Next service: Sunday at 9:00 AM" above the list of times (visit card and About page) */
.church-site .visit-next { margin: 0 0 8px; font-size: .95rem; color: var(--ink-soft); }
.church-site .visit-next strong { color: var(--ink); }
.church-site .bento-card .visit-next { margin: 0 0 14px; }

/* Announcements: pinned label, links in the text, optional button */
.church-site .callout-pin { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--label, var(--ink-soft)); }
.church-site .callout-text > :last-child { margin-bottom: 0; }
.church-site .callout-text a { text-underline-offset: 3px; }
.church-site .callout-cta { margin-top: 14px; }

/* Social glyphs beside the footer links */
.church-site .social-links a { gap: 8px; }
.church-site .icon-brand { flex: none; }

/* "Plan a visit": a bar fixed to the bottom of the screen on phones, so the next step is always one tap away */
.church-site .visit-bar { display: none; }
@media (max-width: 640px) {
  .church-site .visit-bar { display: block; position: fixed; inset: auto 0 0 0; z-index: 30; padding: 10px var(--gutter, 16px) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--card-bg); border-top: 1px solid var(--card-border); box-shadow: 0 -10px 28px rgba(20, 12, 60, .14); }
  .church-site .visit-bar .btn { width: 100%; justify-content: center; }
  .church-site:not(.is-embedded) { padding-bottom: 76px; }
  html { scroll-padding-bottom: 84px; } /* a control reached with the keyboard is never hidden behind the bar */
}
@media print { .church-site .visit-bar { display: none !important; } }

/* Hero color presets (hero_color): a dark gradient behind the title and the page banners when there is no photo, with white words.
   The home title reuses the "photo" rules (hero-photo hero-tint); page banners reuse the has-photo rules, written out here for the body class. */
.church-site.tint-indigo { --tint-bg: linear-gradient(135deg, #150F3C 0%, #2B1A78 58%, #5B2EA6 100%); }
.church-site.tint-forest { --tint-bg: linear-gradient(135deg, #0B2A21 0%, #14503E 60%, #2A7558 100%); }
.church-site.tint-ocean { --tint-bg: linear-gradient(135deg, #08233F 0%, #0F4C81 60%, #1A6FAE 100%); }
.church-site.tint-plum { --tint-bg: linear-gradient(135deg, #2D1029 0%, #6A2260 60%, #93388A 100%); }
.church-site.tint-charcoal { --tint-bg: linear-gradient(135deg, #14171D 0%, #2B313C 60%, #434C5C 100%); }
.church-site.tint-ember { --tint-bg: linear-gradient(135deg, #2E1006 0%, #8A3410 60%, #B04A15 100%); }
.church-site .church-hero.hero-tint .hero-bg { background: var(--tint-bg); }
.church-site .church-hero.hero-tint .hero-shade, .church-site .church-hero.hero-tint .hero-glow { display: none; }
.church-site[class*="tint-"] .page-hero:not(.has-photo) { background: var(--tint-bg); color: #fff; border-bottom: 0; border-radius: 0; text-shadow: 0 1px 12px rgba(10, 6, 34, .35); }
.church-site[class*="tint-"] .page-hero:not(.has-photo) h1, .church-site[class*="tint-"] .page-hero:not(.has-photo) .lead, .church-site[class*="tint-"] .page-hero:not(.has-photo) .muted,
.church-site[class*="tint-"] .page-hero:not(.has-photo) a:not(.btn), .church-site[class*="tint-"] .page-hero:not(.has-photo) .eyebrow, .church-site[class*="tint-"] .page-hero:not(.has-photo) .eyebrow a { color: #fff; }
.church-site[class*="tint-"] .page-hero:not(.has-photo) :focus-visible { outline-color: #fff; }

/* A paragraph that is only a link titled "button" (see services/content.js buttonize) */
.church-site .prose .md-button { margin: 1.6em 0; }
.church-site .prose .md-button .btn { text-decoration: none; }
.church-site .prose .md-button .btn-primary { color: var(--accent-text); }
.church-site .prose .md-button .btn-primary:hover { background: var(--accent-hover); color: var(--accent-hover-text); }