/*------------------------------------------------------------------
[Master Stylesheet]

Project:	One Ancient Hope Website
Last change:	2026 CSS organization cleanup
Designed by:	Kayleigh Pingel | kayleighpingel.com

[Table of contents]

0. Design Tokens
0a. Dark theme tokens
0.1 Web fonts (self-hosted)
1. Base & content patterns
2. Navigation
2b. Page Header
2c. Sunday Hero
3. Header
4. Sections
5. Footer
6. Components & page modules
7. Motion & accessibility

[Color codes]

All colors flow through CSS custom properties defined in :root below.
Edit tokens there to retheme the entire site.
-------------------------------------------------------------------*/

/*--------------------
0. Design Tokens
--------------------*/

:root {
    /* Tells the browser this is a light surface so native controls, form
       widgets, and scrollbars match. The dark theme blocks below flip it. */
    color-scheme: light;

    /* Color - primary palette.
       Colors that Bootstrap consumes as "r, g, b" triplets (see the bridge
       below) are authored as the triplet, and the color token is derived from it
       with rgb() — one source of truth, nothing to hand-sync. Hex equivalents are
       in comments; colors with no Bootstrap triplet stay plain hex. */
    --color-primary-rgb: 19, 96, 130;       /* #136082 */
    --color-primary: rgb(var(--color-primary-rgb));
    --color-accent: #fed136;
    --color-secondary-rgb: 79, 117, 83;     /* #4f7553 */
    --color-secondary: rgb(var(--color-secondary-rgb));
    /* Primary tuned for use as foreground text/icons on a surface. Equals
       --color-primary in light mode; the dark theme lifts it because the base
       primary is too dark to read as text. Use this for primary-colored text;
       keep --color-primary for fills/borders that carry white text. */
    --color-primary-text-rgb: var(--color-primary-rgb);
    --color-primary-text: rgb(var(--color-primary-text-rgb));

    /* Color - neutrals */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Color - surfaces & ink */
    --color-bg-rgb: 250, 247, 242;          /* #faf7f2 */
    --color-bg: rgb(var(--color-bg-rgb));
    --color-surface: #ffffff;
    --color-ink-rgb: 35, 35, 35;            /* #232323 */
    --color-ink: rgb(var(--color-ink-rgb));
    --color-body-rgb: 43, 43, 43;           /* #2b2b2b */
    --color-body: rgb(var(--color-body-rgb));
    --color-muted: #6b6b6b;
    --color-muted-inverse: #ccc;
    --color-border: #e8e8e8;
    --color-border-strong: #ccc;
    --color-surface-alt: #f0f4f8;
    --color-footer: #1d2522;
    --color-footer-text: #f7f1e8;
    --color-overlay: #323232;
    --color-overlay-scrim: rgba(15, 15, 15, 0.4);
    --color-overlay-scrim-light: rgba(255, 255, 255, 0.75);
    --color-selection: #33749c;
    --color-highlight-underline: rgba(254, 209, 54, 0.75);
    --color-highlight-underline-hover: rgba(255, 255, 255, 0.9);

    /* Typography - families */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-brand: "Oswald", var(--font-body);

    /* Typography - fluid scale (~1.25 ratio) */
    --font-size-sm: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
    --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --font-size-ui: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
    --font-size-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --font-size-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
    --font-size-h2: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
    --font-size-h1: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
    --line-height-base: 1.6;
    --line-height-heading: 1.15;

    /* Typography - letter-spacing */
    --tracking-normal: 0;
    --tracking-wide: 0;

    /* Spacing scale (4px base) */
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* Layout */
    --layout-fixed-header-offset: 80px;
    --layout-sticky-nav-offset: 70px;
    /* Approximate rendered height of .subnav. Must clear the sticky subnav so #id
       anchor jumps land below it. Keep in sync with .subnav padding + line-height. */
    --layout-subnav-height: 96px;
    --layout-navbar-logo-height: 130px;
    --layout-navbar-logo-width: 260px;
    --layout-navbar-logo-mark-width: 55px;
    --layout-navbar-logo-shrink-height: 50px;
    --layout-navbar-logo-mobile-height: 40px;
    --section-space-y: 70px;
    --section-space-y-mobile: 30px;

    /* Layout primitives */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.18);
    --shadow-photo: 0 2px 8px rgba(0, 0, 0, 0.18);
    --focus-ring-width: 3px;
    --focus-ring-offset: 3px;
    --focus-ring-radius: 2px;
    --focus-ring-shadow-light: 0 0 0 2px rgba(255, 255, 255, 0.9);
    --focus-ring-shadow-dark: 0 0 0 2px rgba(15, 15, 15, 0.6);

    /* Interactive states */
    --link-color: var(--color-primary-text);
    --link-hover-color-rgb: var(--color-secondary-rgb);
    --link-hover-color: rgb(var(--link-hover-color-rgb));
    --focus-ring-color: var(--color-primary);
    --focus-ring-shadow: var(--focus-ring-shadow-light);
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.35s ease;

    /* Hero scrim - directional gradient that replaces the flat overlay */
    --hero-scrim: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.20) 0%,
        rgba(0, 0, 0, 0.42) 50%,
        rgba(0, 0, 0, 0.72) 100%
    );

    /* Sunday hero scrim - washes the building photo so dark page-header text
       reads over it. Dark mode swaps in a dark wash (see dark theme tokens). */
    --sunday-hero-scrim: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.88));

    /* ----------------------------------------------------------------
       Bootstrap bridge

       Feed our design tokens into Bootstrap's shared CSS variables so
       Bootstrap base styles and common utilities like .text-primary,
       .bg-primary, links, borders, and body typography inherit our theme
       natively. Component-specific Bootstrap variables can still need
       explicit overrides when this site uses those components directly.

       site.css loads after bootstrap.min.css, so these :root values win over
       Bootstrap's defaults. Bootstrap needs colors as "r, g, b" triplets, which
       plain CSS can't derive from a hex/color value — so the --color-*-rgb tokens
       above are the source of truth, and both the color token and Bootstrap's
       *-rgb here reference them. Nothing to hand-sync. */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: var(--color-primary-rgb);
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: var(--color-secondary-rgb);
    --bs-secondary-color: var(--color-muted);

    --bs-body-bg: var(--color-bg);
    --bs-body-bg-rgb: var(--color-bg-rgb);
    --bs-body-color: var(--color-body);
    --bs-body-color-rgb: var(--color-body-rgb);
    --bs-body-font-family: var(--font-body);
    --bs-body-font-size: var(--font-size-base);
    --bs-body-line-height: var(--line-height-base);
    --bs-font-sans-serif: var(--font-body);

    --bs-emphasis-color: var(--color-ink);
    --bs-emphasis-color-rgb: var(--color-ink-rgb);
    --bs-heading-color: var(--color-ink);

    --bs-link-color: var(--link-color);
    --bs-link-color-rgb: var(--color-primary-text-rgb);
    --bs-link-hover-color: var(--link-hover-color);
    --bs-link-hover-color-rgb: var(--link-hover-color-rgb);

    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-pill: var(--radius-pill);
}

/*--------------------
0a. Dark theme tokens

Dark mode re-themes the site by overriding only the color tokens; the
typography, spacing, and layout tokens in :root are shared. Secondary and accent
brand hues are inherited unchanged; primary is lifted a touch (white text on it
still clears AA) so brand fills don't recede into the dark page, and the photo
scrims are deepened (see below) so daytime photos read as night.

theme.js sets data-theme (the resolved light/dark) and data-theme-pref (the
light/dark/system preference) on <html> before first paint. The "system"
preference — also the default when nothing is saved — resolves via the OS
prefers-color-scheme and keeps following it live; an explicit light/dark
preference (saved, or from a ?mode= visit) overrides the OS. Because the theme
is resolved in JS, this block keys off the resolved data-theme attribute and
needs no prefers-color-scheme media query of its own.

Dark mode overrides only the --color-*-rgb sources (plus a few non-triplet
tokens); the --color-* colors derive from them in :root and the Bootstrap *-rgb
bridge references the same sources, so neither needs restating here.
--------------------*/

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Surfaces & ink - inverted, kept warm to match the brand cream */
    --color-bg-rgb: 26, 24, 20;             /* #1a1814 */
    --color-surface: #262220;
    --color-ink-rgb: 244, 239, 230;         /* #f4efe6 */
    --color-body-rgb: 226, 220, 208;        /* #e2dcd0 */
    --color-muted: #a69e90;
    --color-border: #34302a;
    --color-border-strong: #4d473e;
    --color-surface-alt: #2f2a26;

    /* Brand primary fill - lifted from the daytime #136082 so buttons, the
       active nav pill, and other primary fills don't sink into the dark page.
       Kept dark enough that white text on it still clears AA (~5:1). Secondary
       and accent are intentionally left at their brand values. */
    --color-primary-rgb: 26, 120, 160;      /* #1a78a0 */

    /* Interactive states - brand primary is too dark to read as text on a dark
       surface, so primary text, links, and focus use lifted values (mirrors how
       .dark-overlay re-points these tokens). */
    --color-primary-text-rgb: 98, 180, 216; /* #62b4d8 */
    --link-hover-color-rgb: 143, 205, 232;  /* #8fcde8 */
    --focus-ring-color: var(--color-accent);
    --focus-ring-shadow: var(--focus-ring-shadow-dark);

    /* Photo overlays - the light-scrim treatments (.light-overlay sections and
       the Sunday hero) invert to a dark wash so they read like the .dark-overlay
       sections instead of staying bright. Their text already flips via
       --color-ink. The dark-overlay photo scrim is deepened too so daytime
       photos read as night rather than bright bands; the brightest treatments
       (home hero, building) get their own stronger overrides below this block. */
    --color-overlay: #14120f;
    --color-overlay-scrim-light: rgba(15, 15, 15, 0.5);
    --color-overlay-scrim: rgba(10, 9, 7, 0.5);
    --sunday-hero-scrim: linear-gradient(rgba(26, 24, 20, 0.84), rgba(26, 24, 20, 0.92));

    /* Elevation - the light-mode shadows are near-transparent black and vanish on
       a dark surface, so deepen them (same geometry, higher opacity) to keep card
       lift and hover feedback readable. */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.6);
    --shadow-photo: 0 2px 8px rgba(0, 0, 0, 0.55);

    /* Bootstrap bridge - the --bs-* vars (colors and *-rgb alike) reference the
       --color-* sources above, which already flip here, so there's nothing more
       to override. */
}

/* Dark-mode photo overrides. The home hero and building slideshow carry a light
   daytime scrim, so they'd glare against the dark page; deepen just those two
   here (the rest inherit the deepened --color-overlay-scrim above). Scrim, not a
   filter, so the white text layered over them isn't dimmed too. */
[data-theme="dark"] .home-hero {
    --hero-scrim: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.32) 0%,
        rgba(0, 0, 0, 0.46) 50%,
        rgba(0, 0, 0, 0.66) 100%
    );
}

[data-theme="dark"] .building-section {
    --color-overlay-scrim: rgba(10, 9, 7, 0.55);
}

/*--------------------
0.1 Web fonts (self-hosted)
--------------------*/

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/fraunces-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Fraunces";
    font-style: italic;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/fraunces-latin-italic-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Oswald";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/oswald-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/inter-latin-italic-variable.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*--------------------
1. Base & content patterns
--------------------*/

html {
    scroll-padding-top: var(--layout-fixed-header-offset);
    -webkit-text-size-adjust: 100%;
}

html:has(.subnav) {
    scroll-padding-top: calc(var(--layout-fixed-header-offset) + var(--layout-subnav-height));
}

.skip-to-content {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 2000;
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

    .skip-to-content:hover,
    .skip-to-content:focus,
    .skip-to-content:active {
        color: var(--color-white);
    }

    .skip-to-content:focus {
        outline: var(--focus-ring-width) solid var(--color-accent);
        outline-offset: 2px;
    }

body {
    background-color: var(--color-bg);
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-body);
    padding-top: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
    letter-spacing: var(--tracking-normal);
    font-family: var(--font-display);
    color: var(--color-ink);
    line-height: var(--line-height-heading);
    text-wrap: balance;
    font-optical-sizing: auto;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

p {
    text-wrap: pretty;
}

a {
    color: var(--link-color);
    text-decoration: underline;
}

    a:hover,
    a:focus,
    a:active,
    a.active {
        color: var(--link-hover-color);
    }

a:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    box-shadow: var(--focus-ring-shadow);
    border-radius: var(--focus-ring-radius);
}

::selection {
    text-shadow: none;
    background: var(--color-selection);
    color: var(--color-white);
}

/* Home hero facts */
.home-hero-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--space-2);
    font-size: var(--font-size-ui);
}

.home-hero-facts li + li::before {
    content: "\00b7";
    margin: 0 var(--space-4);
    opacity: 0.6;
}

.home-hero-facts a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-highlight-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

.home-hero-facts a:hover,
.home-hero-facts a:focus {
    text-decoration-color: var(--color-highlight-underline-hover);
}

@media (max-width: 575.98px) {
    .home-hero-facts {
        flex-direction: column;
    }
    .home-hero-facts li + li::before {
        display: none;
    }
}

address {
    font-style: normal;
    margin: 0 0 var(--space-4);
}

/* Text content helpers */
.schedule-list,
.contact-list {
    margin: 0 0 var(--space-5);
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
}

    .schedule-list dt,
    .contact-list dt {
        font-weight: 600;
    }

    .schedule-list dd,
    .contact-list dd {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .contact-list dd address {
        margin: 0;
    }

.faq-list {
    margin: var(--space-5) 0 0;
}

    .faq-list dt {
        font-weight: 600;
        margin-top: var(--space-4);
    }

        .faq-list dt:first-child {
            margin-top: 0;
        }

    .faq-list dd {
        margin: var(--space-2) 0 0;
    }

.beliefs-list {
    margin: var(--space-5) 0 0;
    padding-left: var(--space-6);
}

    .beliefs-list li {
        margin-bottom: var(--space-4);
    }

        .beliefs-list li:last-child {
            margin-bottom: 0;
        }

/* Cards and repeated surfaces */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-7);
}

.contact-card,
.home-card,
.parking-address,
.parking-card,
.parking-figure {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.contact-card {
    padding: var(--space-6);
}

    .contact-card h3 {
        margin: 0 0 var(--space-4);
        font-size: var(--font-size-h3);
    }

    .contact-card .schedule-list,
    .contact-card .contact-list {
        margin-bottom: var(--space-4);
    }

    .contact-card > :last-child {
        margin-bottom: 0;
    }

.elder-card {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

    .elder-card:last-child {
        border-bottom: 0;
    }

    .elder-card .elder-card-name {
        margin: 0 0 var(--space-2);
    }

    .elder-card p {
        margin: 0;
    }

.elder-list {
    margin-top: var(--space-7);
}

    .elder-list > h3 {
        margin-bottom: var(--space-3);
    }

blockquote {
    border-left: 4px solid var(--color-primary);
    padding: var(--space-3) var(--space-5);
    margin: var(--space-5) auto;
    max-width: 65ch;
    font-style: italic;
}

blockquote p {
    margin: 0;
}

blockquote footer {
    background-color: transparent;
    padding: var(--space-2) 0 0;
    font-style: normal;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

/* Scripture references */
.scripture-ref {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

    .scripture-ref:hover,
    .scripture-ref:focus {
        text-decoration-thickness: 2px;
    }

.scripture-popover {
    /* Override the UA-default top-layer centering so we can anchor to the trigger. */
    position: absolute;
    inset: auto;
    margin: 0;
    padding: 0;
    width: max-content;
    max-width: min(36rem, calc(100vw - 2rem));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    color: var(--color-body);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: 1.45;
    opacity: 0;
    transition:
        opacity var(--transition-fast),
        display var(--transition-fast) allow-discrete,
        overlay var(--transition-fast) allow-discrete;
}

    .scripture-popover:popover-open {
        opacity: 1;
    }

    @starting-style {
        .scripture-popover:popover-open {
            opacity: 0;
        }
    }

    .scripture-popover-header {
        display: block;
        padding: var(--space-2) var(--space-3);
        border-bottom: 1px solid var(--color-border);
        font-weight: 700;
    }

    .scripture-popover-body {
        display: block;
        padding: var(--space-2) var(--space-3);
    }

/* Glossary terms */
.glossary-term {
    display: inline;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    background: transparent;
    text-decoration: underline dotted var(--color-highlight-underline);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.22em;
    cursor: help;
    transition: text-decoration-color var(--transition-fast),
                text-decoration-thickness var(--transition-fast),
                background-color var(--transition-fast);
}

    .glossary-term:hover {
        color: inherit;
        text-decoration-color: var(--color-accent);
        text-decoration-thickness: 2px;
        background-color: rgba(254, 209, 54, 0.14);
    }

.glossary-popover {
    display: none;
    position: fixed;
    z-index: 1080;
    inset: auto;
    bottom: 1rem;
    left: 50%;
    width: max-content;
    max-width: min(28rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.75rem 1rem;
    transform: translateX(-50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-body);
}

    @media (hover: hover) and (pointer: fine) {
        .glossary-term:hover + .glossary-popover {
            display: block;
        }
    }

    @supports not selector(:popover-open) {
        .glossary-term:hover + .glossary-popover {
            display: block;
        }
    }

    @supports (anchor-name: none) and (position-area: top) {
        .glossary-popover {
            position: absolute;
            inset: auto;
            position-area: top center;
            position-try-fallbacks: bottom center, right center, left center;
            margin-block: 0 0.5rem;
            transform: none;
        }
    }

    @media print {
        .glossary-term {
            text-decoration: none;
            color: inherit;
            background: transparent;
        }

        .glossary-popover {
            display: inline !important;
            position: static !important;
            inset: auto !important;
            transform: none !important;
            margin: 0 0.15em !important;
            padding: 0 !important;
            border: 0 !important;
            box-shadow: none !important;
            background: transparent !important;
            color: inherit;
            font-size: inherit;
            font-style: italic;
        }

        .glossary-popover::before {
            content: " (";
        }

        .glossary-popover::after {
            content: ")";
        }
    }

/* Footer social links */
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: var(--space-2);
    text-decoration: none;
    transition: transform var(--transition-fast);
}

.social-link:hover,
.social-link:focus-visible {
    transform: translateY(-2px);
}

.social-icon {
    width: 32px;
    height: 32px;
    transition: filter var(--transition-fast), transform var(--transition-fast);
}

.social-link:hover .social-icon,
.social-link:focus-visible .social-icon {
    filter: brightness(1.08) drop-shadow(0 0 0.35rem var(--color-accent));
    transform: scale(1.05);
}

.parking-layout {
    display: grid;
    gap: var(--space-6);
}

.parking-layout > * {
    min-width: 0;
}

.parking-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.parking-copy-intro h2,
.parking-copy-intro p {
    margin: 0;
}

.parking-lead {
    margin-top: var(--space-3);
}

.parking-address {
    margin: 0;
    padding: var(--space-5);
    font-style: normal;
}

.parking-copy-intro .parking-address {
    margin-top: var(--space-4);
}

.parking-address strong,
.parking-address span {
    display: block;
}

.parking-address-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.parking-address-link:hover,
.parking-address-link:focus-visible {
    text-decoration: underline;
    text-decoration-color: var(--color-primary-text);
    text-underline-offset: 3px;
}

.parking-address strong {
    margin-bottom: var(--space-2);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--font-size-h4);
    line-height: 1.2;
}

.parking-address-action {
    margin-top: var(--space-3);
    color: var(--color-primary-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.parking-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

.parking-card {
    padding: var(--space-5);
    overflow-wrap: break-word;
}

.parking-card h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-h4);
}

.parking-list {
    margin: 0;
    padding-left: 1.25rem;
}

.parking-list li + li {
    margin-top: var(--space-2);
}

.parking-list strong {
    color: var(--color-ink);
}

.parking-figure {
    margin: 0;
    padding: var(--space-4);
    overflow: hidden;
}

.parking-map {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.parking-map-wrap {
    position: relative;
    display: block;
}

.church-parking-info,
.lot-24-info {
    position: absolute;
    padding: 0;
    border: 0;
    background-color: rgba(254, 209, 54, 0.35);
    border-radius: var(--radius-sm);
    appearance: none;
    cursor: pointer;
    font: inherit;
    transition: background-color var(--transition-fast);
}

.church-parking-info {
    top: 41.1%;
    left: 30.6%;
    width: 20%;
    height: 7.5%;
}

.lot-24-info {
    top: 75%;
    left: 1.7%;
    width: 15%;
    height: 13.6%;
    border-radius: 13.9% / 20.4%;
}

:is(.church-parking-info, .lot-24-info):is(:hover, :focus, :focus-within) {
    background-color: rgba(254, 209, 54, 0.6);
}

:is(.church-parking-info, .lot-24-info)::after {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-primary);
    content: "";
    pointer-events: none;
}

.street-parking-info {
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    pointer-events: none;
}

.street-parking-segment {
    position: absolute;
    background-color: rgba(19, 96, 130, 0.12);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color var(--transition-fast);
}

.street-parking-segment::before {
    position: absolute;
    inset: -8px;
    content: "";
}

.church-street-segment {
    top: 8.9%;
    left: 25.85%;
    width: calc(54.15% + 1px);
    height: 9.4%;
}

.dubuque-street-segment {
    top: 8.9%;
    left: 80%;
    width: 7.1%;
    height: 85.8%;
}

.clinton-street-segment {
    top: 8.9%;
    left: 18.75%;
    width: 7.1%;
    height: 85.8%;
    border-top-left-radius: 70.6% 7.8%;
}

.fairchild-street-segment {
    top: 85%;
    left: 25.85%;
    width: calc(54.15% + 1px);
    height: 9.7%;
}

.street-parking-info:hover .street-parking-segment,
.street-parking-info:focus .street-parking-segment,
.street-parking-info:focus-within .street-parking-segment {
    background: rgba(19, 96, 130, 0.38);
}

.church-parking-info:focus-visible,
.lot-24-info:focus-visible,
.street-parking-info:focus-visible .street-parking-segment {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.parking-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--space-3));
    z-index: 1;
    width: min(260px, 70vw);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--color-body);
    font-size: var(--font-size-sm);
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translateX(-50%) translateY(4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.parking-tooltip::after {
    position: absolute;
    bottom: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border-strong);
    border-bottom: 1px solid var(--color-border-strong);
    content: "";
    transform: translateX(-50%) rotate(45deg);
}

.lot-24-info .parking-tooltip {
    left: 0;
    transform: translateY(4px);
}

.lot-24-info .parking-tooltip::after {
    left: 44px;
}

.street-parking-info .parking-tooltip {
    top: 20%;
    bottom: auto;
    left: 68%;
}

.limited-parking-info .parking-tooltip {
    top: 68%;
    bottom: auto;
    left: 50%;
}

.street-parking-info .parking-tooltip::after,
.limited-parking-info .parking-tooltip::after {
    display: none;
}

:is(.church-parking-info, .lot-24-info, .street-parking-info):is(:hover, :focus, :focus-within) .parking-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.lot-24-info:is(:hover, :focus, :focus-within) .parking-tooltip {
    transform: translateY(0);
}

@media (max-width: 767.98px) {
    .parking-tooltip,
    .lot-24-info .parking-tooltip,
    .street-parking-info .parking-tooltip,
    .limited-parking-info .parking-tooltip {
        position: fixed;
        top: auto;
        right: var(--space-4);
        bottom: var(--space-4);
        left: var(--space-4);
        width: auto;
        max-width: none;
        transform: translateY(var(--space-2));
    }

    .parking-tooltip::after {
        display: none;
    }

    .lot-24-info:is(:hover, :focus, :focus-within) .parking-tooltip,
    :is(.church-parking-info, .lot-24-info, .street-parking-info):is(:hover, :focus, :focus-within) .parking-tooltip {
        transform: translateY(0);
    }
}

.parking-figure figcaption {
    margin-top: var(--space-3);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* Embedded media */
.embed-frame {
    border: 0;
}

.embed-frame-full-width {
    display: block;
    width: 100%;
    max-width: 100%;
}

.sermon-library-section {
    background-color: var(--color-surface);
}

.sermon-book-filter {
    margin: var(--space-4) 0 var(--space-6);
}

/* Search input and the "Browse by book" trigger share one compact row so the
   library list stays high on the page; the book chips expand on demand below. */
.sermon-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    max-width: 52rem;
}

.sermon-search {
    flex: 1 1 20rem;
    min-width: min(100%, 16rem);
}

.sermon-search-control {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.sermon-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
}

.sermon-search-input {
    flex: 1 1 14rem;
    min-height: 44px;
    min-width: min(100%, 14rem);
    padding: 0.55rem 0.8rem 0.55rem 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-ink);
    font: inherit;
}

.sermon-search-input:focus-visible {
    border-color: var(--color-primary-text);
    outline: 2px solid color-mix(in srgb, var(--focus-ring-color) 35%, transparent);
    outline-offset: 2px;
}

.sermon-search-clear {
    min-height: 44px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-primary-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.sermon-search-clear:hover,
.sermon-search-clear:focus-visible {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
}

.sermon-book-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-primary-text);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.sermon-book-filter-toggle:hover,
.sermon-book-filter-toggle:focus-visible {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
}

.sermon-book-filter-toggle::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--transition-fast);
}

.sermon-book-filter-toggle[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(225deg);
}

/* Status is empty (and so collapsed) until a search or book filter is active,
   keeping the resting toolbar to a single row. */
.sermon-filter-status {
    margin: var(--space-2) 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.sermon-filter-status:empty {
    display: none;
}

.sermon-book-filter-panel {
    margin-top: var(--space-3);
}

.sermon-book-filter-panel[hidden] {
    display: none;
}

.sermon-book-filter-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-size-ui);
    font-weight: 600;
}

.sermon-book-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sermon-book-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-ink);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.sermon-book-chip:hover,
.sermon-book-chip:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary-text);
}

.sermon-book-chip.is-active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.sermon-book-chip-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-pill);
    background: var(--color-border);
    color: var(--color-ink);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.sermon-book-chip.is-active .sermon-book-chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}

.sermon-book-filter-empty {
    margin: var(--space-4) 0 0;
    color: var(--color-muted);
    font-style: italic;
}

.sermon-refresh-indicator {
    display: inline-block;
    margin: 0 0 var(--space-3);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    background-color: var(--color-surface-alt);
    color: var(--color-muted);
    font-size: 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.sermon-library-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.sermon-library-main > p {
    margin-left: 0;
    margin-right: 0;
}

.sermon-library-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    padding: 0;
    margin: var(--space-5) 0 0;
    list-style: none;
}

.sermon-library-stats li {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.sermon-library-stats strong,
.sermon-library-stats span {
    display: block;
}

.sermon-library-stats strong {
    color: var(--color-primary-text);
    font-family: var(--font-display);
    font-size: var(--font-size-h3);
    line-height: 1;
}

.sermon-library-stats span {
    margin-top: 4px;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.sermon-series-group {
    margin-top: var(--space-6);
    scroll-margin-top: calc(var(--layout-fixed-header-offset) + var(--layout-subnav-height));
}

.sermon-latest-section {
    margin-top: var(--space-6);
}

.sermon-latest-section h3 {
    margin: 0 0 var(--space-4);
}

.sermon-latest-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--space-4);
    padding: 10px var(--space-5);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-primary-text);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sermon-latest-toggle::after {
    margin-left: var(--space-3);
    content: "\2193";
}

.sermon-latest-toggle[aria-expanded="true"]::after {
    content: "\2191";
}

.sermon-latest-toggle:hover,
.sermon-latest-toggle:focus {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.sermon-series-heading {
    margin: var(--space-6) 0 0;
}

.sermon-series-disclosure {
    border-radius: var(--radius-md);
}

.sermon-podcast-link {
    margin: var(--space-6) 0 0;
}

.sermon-podcast-link a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 12px var(--space-5);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-ui);
    font-weight: 700;
    text-decoration: none;
    text-transform: capitalize;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.sermon-podcast-link a::after {
    margin-left: var(--space-3);
    content: "\2192";
}

.sermon-podcast-link a:hover,
.sermon-podcast-link a:focus {
    border-color: var(--color-secondary);
    background: var(--color-secondary);
    color: var(--color-white);
    text-decoration: none;
}

.sermon-series-banner {
    position: relative;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-4);
    padding-right: calc(var(--space-4) + 2rem);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    cursor: pointer;
    list-style: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sermon-series-banner::-webkit-details-marker {
    display: none;
}

.sermon-series-banner::after {
    position: absolute;
    top: 50%;
    right: var(--space-4);
    width: 1.5rem;
    height: 1.5rem;
    transform: translateY(-50%);
    color: var(--color-primary-text);
    content: "+";
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.sermon-series-disclosure[open] > .sermon-series-banner::after {
    content: "-";
}

.sermon-series-banner:hover,
.sermon-series-banner:focus-visible {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.sermon-series-banner-art {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.sermon-series-banner-copy {
    display: block;
    min-width: 0;
}

.sermon-series-banner-title {
    display: block;
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--font-size-h3);
    font-weight: 500;
    line-height: var(--line-height-heading);
}

.sermon-series-banner-eyebrow {
    display: block;
    margin: 0 0 var(--space-2);
    color: var(--color-secondary);
    font-family: var(--font-brand);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="dark"] .sermon-series-banner-eyebrow {
    color: #8fca96;
}

.sermon-series-banner-summary {
    display: block;
    margin: 0 0 var(--space-2);
    color: var(--color-body);
}

.sermon-series-banner-count {
    display: block;
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.sermon-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.sermon-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sermon-item:hover,
.sermon-item:focus-within {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.sermon-item-art {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.sermon-item-body {
    min-width: 0;
}

.sermon-item-title {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: var(--font-size-lg);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sermon-item-title a {
    text-decoration: none;
}

.sermon-item-title a:hover,
.sermon-item-title a:focus {
    text-decoration: underline;
}

.sermon-scripture {
    color: var(--color-primary-text);
    font-weight: 700;
}

.sermon-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.sermon-item-meta > * + *::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--color-border-strong);
    font-weight: 400;
}

.sermon-audio {
    display: block;
    width: 100%;
    height: 34px;
    margin-top: 6px;
}

/* On-demand player: a custom transport bar (play/pause, ±15s skip, seek slider, time) wrapped
   around a headless <audio>. The native controls are sealed, so skip can only live *inside* the
   player by drawing the controls ourselves. Built by initializeSermonPlayers. */
.sermon-player {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 6px;
    padding: 4px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: 22px;
}

.sermon-player .sermon-audio {
    display: none;
}

.sermon-play-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: #fff;
    background: var(--color-primary);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.sermon-play-toggle:hover,
.sermon-play-toggle:focus-visible {
    background: var(--link-hover-color);
}

.sermon-play-toggle svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.sermon-skip-button {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 40px;
    height: 36px;
    padding: 0 4px;
    color: var(--color-primary-text);
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.sermon-skip-button:hover,
.sermon-skip-button:focus-visible {
    color: var(--link-hover-color);
}

.sermon-seek {
    flex: 1 1 auto;
    min-width: 0;
    height: 16px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sermon-seek:disabled {
    cursor: default;
    opacity: 0.6;
}

.sermon-seek::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right,
        var(--color-primary-text) var(--sermon-seek-pct, 0%),
        var(--color-border-strong) var(--sermon-seek-pct, 0%));
}

.sermon-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary-text);
    cursor: pointer;
}

.sermon-seek::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-strong);
}

.sermon-seek::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--color-primary-text);
}

.sermon-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary-text);
    cursor: pointer;
}

.sermon-seek:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 3px;
    border-radius: 2px;
}

.sermon-time {
    flex: none;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On narrow screens the duration already appears in the item meta row, so drop the readout
   to give the seek slider room. */
@media (max-width: 480px) {
    .sermon-time {
        display: none;
    }
}

/* Shown in place of the player when the audio can't be played (load/decode error) or the
   custom controls fail to build. Routes the visitor to SoundCloud. */
.sermon-player-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

.sermon-player-error a {
    font-weight: 600;
}

/* Quiet, on-brand play affordance shown until the visitor presses play; site.js then
   swaps in a real <audio> with the same .sermon-audio class. Styled as a text link (no
   border/fill) to match the site's links, and keeps 100+ media elements from being
   instantiated on load. */
.sermon-play-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    margin-top: var(--space-2);
    padding: 0;
    color: var(--color-primary-text);
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.sermon-play-button:hover,
.sermon-play-button:focus-visible {
    color: var(--link-hover-color);
    text-decoration: underline;
    text-decoration-color: var(--color-highlight-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

.sermon-play-button::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent currentColor;
}

.sermon-author {
    color: var(--color-muted);
}

@media (max-width: 991.98px) {
    .sermon-library-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .sermon-library-stats {
        grid-template-columns: 1fr;
    }

    .sermon-series-banner {
        grid-template-columns: 88px 1fr;
        gap: var(--space-4);
    }

    .sermon-series-banner-art {
        width: 88px;
        height: 88px;
    }

}

/* RUF profile */
.ruf-family-figure {
    margin: 0 auto;
    text-align: center;
}

.ruf-family-caption {
    display: block;
    margin-top: 6px;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.ruf-family-photo {
    max-width: 450px;
}

/* Staff profiles */
.staff-card {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

    .staff-card:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .staff-card .staff-card-photo-col {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-2);
        width: 180px;
    }

    .staff-card .staff-card-photo {
        width: 180px;
        height: 240px;
        object-fit: cover;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-photo);
        margin-top: 4px;
    }

    .staff-card .staff-card-body {
        flex: 1 1 auto;
        min-width: 0;
    }

        .staff-card .staff-card-body p {
            margin: 0 0 var(--space-4);
        }

    .staff-card .staff-card-name {
        margin: 0;
    }

    .staff-card .staff-card-role {
        display: inline-block;
        margin-bottom: var(--space-3);
        padding: 4px 10px;
        background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg));
        color: var(--color-primary-text);
        border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
        border-radius: var(--radius-pill);
        font-size: var(--font-size-sm);
        font-weight: 700;
        letter-spacing: 0;
    }

    .staff-card p:last-child {
        margin-bottom: 0;
    }

@media (max-width: 575.98px) {
    .staff-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

        .staff-card .staff-card-photo-col {
            width: 200px;
        }

        .staff-card .staff-card-photo {
            width: 200px;
            height: 267px;
        }
}

/*--------------------
2. Navigation - Bootstrap 5
--------------------*/

.navbar {
    background-color: var(--color-bg);
    border-bottom: 2px solid var(--color-border-strong);
}

    .navbar .navbar-logo {
        color: var(--color-white);
        font-family: var(--font-display);
        padding: 0;
    }

        .navbar .navbar-logo:hover, .navbar .navbar-logo:focus, .navbar .navbar-logo:active, .navbar .navbar-logo.active {
            color: var(--color-accent);
        }

    .navbar .navbar-collapse {
        border-color: rgba(255, 255, 255, 0.02);
    }

    .navbar .navbar-toggler {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

        .navbar .navbar-toggler:hover, .navbar .navbar-toggler:focus {
            background-color: var(--color-accent);
            border-color: var(--color-accent);
        }

    .navbar .nav-link {
        font-family: var(--font-body);
        text-transform: uppercase;
        font-weight: 500;
        letter-spacing: var(--tracking-normal);
        color: var(--color-ink);
        text-decoration: none;
        font-size: var(--font-size-ui);
    }

        .navbar .nav-link:hover, .navbar .nav-link:focus {
            color: var(--color-primary-text);
        }

        .navbar .nav-link:focus-visible {
            outline-offset: 2px;
        }

    .navbar .navbar-nav .nav-link.active {
        border-radius: 0;
        color: var(--color-white);
        background-color: var(--color-primary);
    }

        .navbar .navbar-nav .nav-link.active:hover, .navbar .navbar-nav .nav-link.active:focus {
            color: var(--color-ink);
            background-color: var(--color-accent);
        }

    /* Split nav item: link + caret toggle that opens a section dropdown. */
    .navbar .nav-item-split {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        justify-content: center;
    }

    .navbar .nav-item-split .nav-link-caret {
        display: inline-flex;
        align-items: center;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: 0;
        padding-left: 0;
        padding-right: 8px;
        color: inherit;
        opacity: 0.72;
        transition: color var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
    }

        .navbar .nav-item-split .nav-link-caret:hover,
        .navbar .nav-item-split .nav-link-caret:focus {
            opacity: 1;
        }

        .navbar .nav-item-split .nav-link-caret:focus:not(:focus-visible) {
            outline: 0;
            box-shadow: none;
        }

        .navbar .nav-item-split .nav-link-caret:focus-visible {
            outline: 2px solid color-mix(in srgb, var(--color-primary) 70%, var(--color-white));
            outline-offset: 1px;
            box-shadow: none;
            border-radius: var(--radius-sm);
        }

        .navbar .nav-item-split .nav-link-caret::after {
            margin-left: 0.1em;
            vertical-align: 0.15em;
        }

    .navbar .nav-item-split .dropdown-menu {
        flex: 0 0 100%;
        font-family: var(--font-body);
        font-size: var(--font-size-sm);
        text-align: center;
        padding: 6px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        /* Set our own surface so the menu follows the theme. Bootstrap's default
           --bs-dropdown-bg is white and (with data-bs-theme="light" on the nav)
           would leave light item text on a white menu in dark mode. */
        background-color: var(--color-surface);
    }

    .navbar .nav-item-split .dropdown-item {
        padding: 6px 12px;
        border-radius: var(--radius-sm);
        color: var(--color-body);
        font-weight: 400;
        letter-spacing: 0;
        transition: color var(--transition-fast), background-color var(--transition-fast);
    }

        .navbar .nav-item-split .dropdown-item:hover,
        .navbar .nav-item-split .dropdown-item:focus {
            color: var(--color-primary-text);
            background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
        }
.navbar-logo {
    display: block;
    background-image: url(/images/OAHWebLogoText.png);
    background-image: image-set(
        url(/images/OAHWebLogoText.avif) type("image/avif"),
        url(/images/OAHWebLogoText.webp) type("image/webp"),
        url(/images/OAHWebLogoText.png) type("image/png")
    );
    background-size: contain;
    background-repeat: no-repeat;
    height: var(--layout-navbar-logo-height);
    width: var(--layout-navbar-logo-width);
}

    .navbar-logo-text {
        display: none;
        font-family: var(--font-brand);
        text-transform: uppercase;
        margin-left: var(--layout-navbar-logo-mark-width);
        font-weight: 500;
        font-size: 18px;
        line-height: 40px;
        color: var(--color-white);
    }

    .navbar.navbar-shrink .navbar-logo-text {
        color: var(--color-ink);
    }

.navbar.navbar-shrink .nav-link {
    color: var(--color-ink);
}

.navbar.navbar-shrink .navbar-logo {
    height: var(--layout-navbar-logo-shrink-height);
    width: var(--layout-navbar-logo-mark-width);
    background-image: url(/images/OAHWebLogo.png);
    background-image: image-set(
        url(/images/OAHWebLogo.avif) type("image/avif"),
        url(/images/OAHWebLogo.webp) type("image/webp"),
        url(/images/OAHWebLogo.png) type("image/png")
    );
}

.navbar-nav {
    margin-left: auto;
}

.subnav {
    padding: var(--space-5) 0 var(--space-4);
    margin-top: var(--layout-navbar-logo-height);
    text-align: center;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: var(--layout-sticky-nav-offset);
    z-index: 1020;
    font-size: var(--font-size-ui);
}
    .subnav .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: var(--space-3) var(--space-5);
    }

    .subnav strong { display: inline-block; }
    .subnav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3) var(--space-5);
        list-style-type: none;
        padding: 0;
        margin-bottom: 0;
    }
    .subnav li {
        display: block;
        padding: 0;
        font-family: var(--font-body);
        font-size: var(--font-size-ui);
        font-weight: 400;
        letter-spacing: var(--tracking-normal);
    }
    .subnav a {
        text-decoration: none;
        padding: 4px 2px;
        border-bottom: 2px solid transparent;
        transition: color var(--transition-fast), border-color var(--transition-fast);
    }
        .subnav a.active {
            color: var(--color-primary-text);
            border-bottom-color: var(--color-accent);
        }

@media (min-width: 768px) {
    .navbar {
        background-color: transparent;
        padding: var(--space-5) 0;
        transition: padding var(--transition-base);
        border: 0;
    }

        .navbar .navbar-logo {
            font-size: 2em;
            transition: height var(--transition-base),
                        width var(--transition-base),
                        font-size var(--transition-base);
        }

        .navbar .navbar-nav .nav-link.active {
            border-radius: var(--radius-sm);
        }

        .navbar.navbar-shrink {
            background-color: var(--color-bg);
            padding: 10px 0;
        }

            .navbar.navbar-shrink .navbar-logo {
                font-size: 1.5em;
            }

}

@media (min-width: 992px) {
    /* Home page: keep top nav text bright over hero image until shrink kicks in. */
    body.controller-home .navbar:not(.navbar-shrink) .nav-link {
        color: var(--color-white);
        font-size: var(--font-size-base);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    }

    body.controller-home .navbar:not(.navbar-shrink) .nav-link:hover,
    body.controller-home .navbar:not(.navbar-shrink) .nav-link:focus {
        color: var(--color-accent);
    }

    /* Allow the row of nav items to wrap to a second line when there isn't room
       (e.g. 200% text zoom) instead of clipping the rightmost items off-screen. */
    .navbar-nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: var(--space-2);
    }

    .navbar .nav-item-split {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .navbar .nav-item-split > .nav-link:not(.nav-link-caret) {
        padding-right: 2px;
    }

    .navbar .nav-item-split .nav-link-caret {
        padding-right: 6px;
    }

    .navbar .nav-item-split:has(> .nav-link.active) {
        border-radius: var(--radius-sm);
    }

        .navbar .nav-item-split:has(> .nav-link.active) > .nav-link.active,
        .navbar .nav-item-split:has(> .nav-link.active) > .nav-link-caret {
            background-color: transparent;
            color: var(--color-primary-text);
            border-radius: 0;
        }

        .navbar .nav-item-split:has(> .nav-link.active) > .nav-link.active {
            box-shadow: inset 0 -2px 0 var(--color-accent);
        }

        .navbar .nav-item-split:has(> .nav-link.active):hover,
        .navbar .nav-item-split:has(> .nav-link.active):focus-within {
            background-color: transparent;
            color: var(--color-primary-text);
        }

    .navbar .nav-item-split .dropdown-menu {
        flex-basis: auto;
        min-width: 11rem;
        margin-top: 8px;
        text-align: left;
    }

    .navbar.navbar-shrink .navbar-logo-text {
        width: 270px;
        display: block;
        line-height: var(--layout-navbar-logo-shrink-height);
        margin-left: 65px;
    }
    .navbar.navbar-shrink .navbar-logo { width: var(--layout-navbar-logo-width); }
}

/* Collapsed (touch) navigation. The desktop :has() parent-paint can't be used
   here because in collapsed mode the dropdown opens in flow under the caret -
   painting the parent would bleed behind the menu. Instead, give the caret a
   matching active background so link + caret read as one pill, and grow the
   caret's hit area to a tap-target-friendly size. */
@media (max-width: 991.98px) {
    .navbar {
        background-color: var(--color-bg);
        border-bottom: 2px solid var(--color-border-strong);
    }

    .navbar .navbar-collapse {
        padding: var(--space-3) 0 var(--space-4);
        /* Short viewports (e.g. phone landscape): keep the open menu inside the
           viewport and let it scroll on its own instead of running off the
           bottom where the last items become unreachable. */
        max-height: calc(100vh - var(--layout-navbar-logo-height) - var(--space-6));
        max-height: calc(100dvh - var(--layout-navbar-logo-height) - var(--space-6));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .navbar .nav-item-split .nav-link-caret {
        padding-left: 12px;
        padding-right: 12px;
    }

    .navbar .nav-item-split .nav-link.active {
        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
        color: var(--color-primary-text);
    }

    .navbar .nav-item-split .nav-link.active + .nav-link-caret {
        background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
        color: var(--color-primary-text);
    }

        .navbar .nav-item-split .nav-link.active + .nav-link-caret:hover,
        .navbar .nav-item-split .nav-link.active + .nav-link-caret:focus {
            background-color: color-mix(in srgb, var(--color-primary) 14%, transparent);
            color: var(--color-primary-text);
        }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-nav {
        margin-left: 0;
        text-align: center;
    }

    .navbar-logo {
        margin: 0 auto;
    }

    /* In this range the active nav-link rounds all four corners (see line ~1250).
       Flatten its inner edge and round the caret's outer edge so the pill reads
       as a single shape rather than a rounded link butted against a square caret. */
    .navbar .nav-item-split .nav-link.active {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

        .navbar .nav-item-split .nav-link.active + .nav-link-caret {
            border-top-right-radius: var(--radius-sm);
            border-bottom-right-radius: var(--radius-sm);
        }
}

@media (max-width: 767.98px) {
    .navbar-nav { text-align: center; }

    .navbar-logo {
        background-image: url(/images/OAHWebLogo.png);
        background-image: image-set(
            url(/images/OAHWebLogo.avif) type("image/avif"),
            url(/images/OAHWebLogo.webp) type("image/webp"),
            url(/images/OAHWebLogo.png) type("image/png")
        );
        height: var(--layout-navbar-logo-mobile-height);
        margin: 5px;
    }

    .navbar-logo-text {
        display: block;
        color: var(--color-ink);
    }

    .navbar.navbar-shrink .navbar-logo {
        height: var(--layout-navbar-logo-mobile-height);
        width: var(--layout-navbar-logo-width);
    }

    .navbar .nav-link {
        color: var(--color-ink);
    }

    /* Logo shrinks to the mobile mark here, so the menu can use more height. */
    .navbar .navbar-collapse {
        max-height: calc(100vh - var(--layout-navbar-logo-mobile-height) - var(--space-4));
        max-height: calc(100dvh - var(--layout-navbar-logo-mobile-height) - var(--space-4));
    }
}

/* Narrowest layouts (≤360px): keep the wordmark from overflowing. This tier is
   driven mainly by reflow / high text-zoom (WCAG 1.4.10), not just tiny-screen
   hardware, so keep it even though few devices are this narrow at 100% zoom. */
@media (max-width: 359.98px) {
    .navbar-logo {
        width: 220px;
    }

    .navbar-logo-text {
        font-size: 15px;
    }
}

/*--------------------
2b. Page Header
--------------------*/

.page-header {
    background-color: var(--color-surface);
    color: var(--color-ink);
    text-shadow: none;
    margin-top: 0;
    padding: 80px 0 22px;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
}

    .page-header .container {
        min-height: 0;
    }

    .page-header h1 {
        font-weight: 600;
        line-height: 1.1;
        margin: 0;
    }

    .page-header h1::after {
        content: "";
        display: block;
        width: 56px;
        height: 3px;
        background-color: var(--color-accent);
        margin: 18px auto 0;
    }

    .page-header h2 {
        margin: 18px 0 0;
        font-weight: 600;
    }

    .page-header .page-header-tagline {
        margin: 18px auto 0;
        max-width: 60ch;
        line-height: 1.5;
        color: var(--color-muted);
        padding: 0 15px;
    }

    .page-header + .subnav {
        margin-top: 0;
        padding-top: 18px;
        padding-bottom: 14px;
    }

@media (min-width: 768px) {
    .page-header {
        padding: 100px 0 28px;
    }
}

@media (min-width: 992px) {
    .page-header {
        padding: 105px 0 32px;
    }
}

/*--------------------
2c. Sunday Hero
--------------------*/

.sunday-hero {
    background-image:
        var(--sunday-hero-scrim),
        url(/images/building-outside.jpg);
    background-image:
        var(--sunday-hero-scrim),
        image-set(
            url(/images/building-outside.avif) type("image/avif"),
            url(/images/building-outside.webp) type("image/webp"),
            url(/images/building-outside.jpg) type("image/jpeg")
        );
    background-position: center 38%;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: calc(var(--layout-fixed-header-offset) + 48px);
    padding-bottom: 56px;
}

@media (max-width: 768px) {
    .sunday-hero {
        background-image:
            var(--sunday-hero-scrim),
            url(/images/building-outside-800.jpg);
        background-image:
            var(--sunday-hero-scrim),
            image-set(
                url(/images/building-outside-800.avif) type("image/avif"),
                url(/images/building-outside-800.webp) type("image/webp"),
                url(/images/building-outside-800.jpg) type("image/jpeg")
            );
    }
}

    .sunday-hero .page-header-tagline {
        max-width: 48ch;
    }

@media (max-width: 767.98px) {
    .sunday-hero {
        padding-top: calc(var(--layout-fixed-header-offset) + 28px);
        padding-bottom: var(--space-6);
    }

    .sunday-hero h2 {
        font-size: var(--font-size-h3);
    }
}

/*--------------------
3. Header
--------------------*/

.hero-header {
    background-color: var(--color-primary);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;
    color: var(--color-white);
    text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
    margin-top: calc(-1 * var(--layout-fixed-header-offset));
    padding-top: var(--layout-fixed-header-offset);
}
    .hero-header .container {
        min-height: 180px;
    }
        .hero-header .intro-text {
            padding-top: 100px;
            padding-bottom: 50px;
        }

        .home-hero .intro-text {
            padding-top: 128px;
            padding-bottom: 32px;
        }

    .hero-header .intro-text .intro-heading {
        color: inherit;
        margin: 0;
        font-weight: 600;
        font-size: clamp(3rem, 2rem + 4vw, 5rem);
        line-height: 1.05;
        margin-bottom: 18px;
    }

    .home-hero .intro-text .intro-heading {
        font-family: var(--font-brand);
        font-weight: 500;
        letter-spacing: var(--tracking-normal);
    }

    .home-hero-title-line {
        display: inline;
    }

    .home-hero-eyebrow-line,
    .home-hero-eyebrow-separator {
        display: inline;
    }

    body.toggle-home-hero-warm-heading .home-hero .intro-text .intro-heading {
        font-family: var(--font-display);
        font-size: clamp(2.75rem, 1.75rem + 3.6vw, 4.5rem);
        font-weight: 600;
        line-height: 1.08;
    }

    .home-hero .intro-text .hero-eyebrow {
        font-family: var(--font-body);
        font-size: var(--font-size-ui);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
        color: var(--color-white);
        margin-bottom: 18px;
    }

    .home-hero .intro-text .hero-subhead {
        font-family: var(--font-display);
        font-style: italic;
        font-size: var(--font-size-h3);
        font-weight: 400;
        color: var(--color-muted-inverse);
        margin-bottom: 0;
    }


    @media (min-width: 768px) {
        .hero-header .container {
            min-height: 215px;
        }

        .hero-header .intro-text {
            padding-top: 250px;
            padding-bottom: 100px;
        }

        .home-hero .intro-text {
            padding-top: 290px;
            padding-bottom: 72px;
        }
    }
    @media (min-width: 992px) {
        .hero-header .intro-text {
            padding-top: 200px;
        }

        .home-hero .intro-text {
            padding-top: 240px;
        }
    }

    @media (max-width: 575.98px) {
        .home-hero .intro-text .intro-heading {
            font-size: 2.35rem;
        }

        .home-hero .intro-text .hero-subhead {
            font-size: var(--font-size-h4);
        }

        .home-hero-title-line {
            display: block;
        }

        .home-hero-eyebrow-line {
            display: block;
        }

        .home-hero-eyebrow-separator {
            display: none;
        }
    }
/*--------------------
4. Sections
--------------------*/
.content-section {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--color-bg);
    padding: var(--section-space-y) 0;
}

@media (max-width: 767.98px) {
    .content-section { padding: var(--section-space-y-mobile) 0; }
}

/* Home hero background. To switch heroes, define a new bg-home-* rule here and
   point Helpers/HomeHero.cs (class + preload URLs) at it so both stay in sync. */
.bg-home-capitol-sunset {
    background-image: url(/images/home-capitol-sunset.jpeg);
    background-image: image-set(
        url(/images/home-capitol-sunset.avif) type("image/avif"),
        url(/images/home-capitol-sunset.webp) type("image/webp"),
        url(/images/home-capitol-sunset.jpeg) type("image/jpeg")
    );
}

/* Phones get a 1100px-wide crop instead of the full 1800px hero. The preload in
   _Layout.cshtml mirrors this breakpoint, so keep the URLs and 768px boundary in
   sync (see Helpers/HomeHero.cs). */
@media (max-width: 768px) {
    .bg-home-capitol-sunset {
        background-image: url(/images/home-capitol-sunset-1100.jpg);
        background-image: image-set(
            url(/images/home-capitol-sunset-1100.avif) type("image/avif"),
            url(/images/home-capitol-sunset-1100.webp) type("image/webp"),
            url(/images/home-capitol-sunset-1100.jpg) type("image/jpeg")
        );
    }
}

.home-hero {
    --hero-scrim: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.02) 0%,
        rgba(0, 0, 0, 0.10) 50%,
        rgba(0, 0, 0, 0.34) 100%
    );
}

.bg-hero-4 {
    background-image: url(/images/hero4.jpeg);
    background-image: image-set(
        url(/images/hero4.avif) type("image/avif"),
        url(/images/hero4.webp) type("image/webp"),
        url(/images/hero4.jpeg) type("image/jpeg")
    );
}

.bg-iowa-city {
    background-image: url(/images/iowa-city.jpg);
    background-image: image-set(
        url(/images/iowa-city.avif) type("image/avif"),
        url(/images/iowa-city.webp) type("image/webp"),
        url(/images/iowa-city.jpg) type("image/jpeg")
    );
}

/* This section background appears on About, Community and Sunday; phones get the
   800px-wide variant. */
@media (max-width: 768px) {
    .bg-iowa-city {
        background-image: url(/images/iowa-city-800.jpg);
        background-image: image-set(
            url(/images/iowa-city-800.avif) type("image/avif"),
            url(/images/iowa-city-800.webp) type("image/webp"),
            url(/images/iowa-city-800.jpg) type("image/jpeg")
        );
    }
}

/*--------------------
4a. Our Building section
--------------------*/
.building-section {
    --color-overlay-scrim: rgba(15, 15, 15, 0.3);
    min-height: clamp(560px, 72vh, 820px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    /* Fallback for the first slide so something paints before the slideshow JS
       initializes (or if it never does). The JS layers sit at z-index -2, above
       this background, and take over once active. */
    background-image: url(/images/building-front-summer.jpg);
    background-image: image-set(
        url(/images/building-front-summer.avif) type("image/avif"),
        url(/images/building-front-summer.webp) type("image/webp"),
        url(/images/building-front-summer.jpg) type("image/jpeg")
    );
    background-size: cover;
    background-position: center 58%;
}

@media (max-width: 768px) {
    .building-section {
        background-image: url(/images/building-front-summer-1100.jpg);
        background-image: image-set(
            url(/images/building-front-summer-1100.avif) type("image/avif"),
            url(/images/building-front-summer-1100.webp) type("image/webp"),
            url(/images/building-front-summer-1100.jpg) type("image/jpeg")
        );
    }
}

.building-section-copy {
    display: flex;
    flex-direction: column;
    padding-block: var(--space-7);
}

.building-heading {
    flex: 0 0 auto;
}

.building-heading h2 {
    margin-bottom: var(--space-3);
}

.building-quote {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: var(--space-6) auto 0;
    max-width: 60ch;
    min-height: 9em;
    transition: opacity 350ms ease;
}

.building-quote.is-fading {
    opacity: 0;
}

.building-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    max-width: none;
    text-align: left;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    line-height: 1.55;
    color: var(--color-white);
}

.building-quote blockquote p {
    margin: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
}

.building-quote figcaption {
    margin-top: var(--space-3);
    font-family: var(--font-display);
    font-style: normal;
    font-size: 0.95rem;
    letter-spacing: var(--tracking-normal);
    color: var(--color-accent);
}

.building-quote figcaption cite {
    font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
    .building-quote {
        transition: none;
    }
}

.building-background-layer {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 700ms ease;
}

.building-background-layer.is-active {
    opacity: 1;
}

.building-slideshow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    inset: 0;
    /* Cap arrow placement on wide screens so they flank the centered quote
       instead of sitting at the section edges. Auto margins center the
       absolutely-positioned slideshow within its inset bounds. */
    max-width: 1280px;
    margin-inline: auto;
    padding: 0 clamp(var(--space-3), 3vw, var(--space-6));
    pointer-events: none;
}

.building-slide-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.building-slide-arrow:hover,
.building-slide-arrow:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.building-slide-caption {
    position: absolute;
    left: 50%;
    bottom: var(--space-3);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    max-width: min(90%, 60ch);
    color: var(--color-white);
    font-size: 0.85rem;
    line-height: 1.2;
    background: rgba(0, 0, 0, 0.6);
    padding: var(--space-2) calc(var(--space-2) * 1.75);
    border-radius: var(--radius-pill);
    pointer-events: none;
    text-align: center;
    transition: opacity 350ms ease;
}

.building-slide-caption.is-fading {
    opacity: 0;
}

.building-slide-caption-label {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-normal);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.building-slide-caption-sep {
    opacity: 0.55;
}

.building-slide-caption-count {
    flex-shrink: 0;
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .building-background-layer,
    .building-slide-arrow,
    .building-slide-caption {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .building-slideshow {
        position: static;
        max-width: none;
        margin-inline: 0;
        gap: var(--space-3);
        margin-top: var(--space-5);
        padding: 0;
    }

    .building-slide-caption {
        position: static;
        transform: none;
        flex: 1 1 auto;
        justify-content: center;
        max-width: none;
    }
}


.bg-old-capitol {
    background-image: url(/images/old-capitol.jpeg);
    background-image: image-set(
        url(/images/old-capitol.avif) type("image/avif"),
        url(/images/old-capitol.webp) type("image/webp"),
        url(/images/old-capitol.jpeg) type("image/jpeg")
    );
}

.content-section h2 {
    margin-bottom: var(--space-5);
}

.content-section img {
    max-width: 100%;
    display: inline-block;
}

.section-copy > p {
    line-height: 1.65;
    margin: 20px auto;
    max-width: 65ch;
}

.section-copy > ul:not([class]),
.section-copy > ol:not([class]) {
    margin: 20px auto;
    max-width: 65ch;
    line-height: 1.65;
    list-style-position: outside;
    padding-left: 1.25em;
}

.section-copy > :last-child {
    margin-bottom: 0;
}

/* Dark overlay theme - redefines link/focus tokens in scope instead of
   fighting specificity. Any element inside inherits the inverted palette
   without needing `.dark-overlay .foo` overrides. */
.dark-overlay {
    --link-color: var(--color-accent);
    --link-hover-color: var(--color-white);
    --focus-ring-color: var(--color-accent);
    --focus-ring-shadow: var(--focus-ring-shadow-dark);
    background-color: var(--color-overlay);
    color: var(--color-white);
}

.dark-overlay :is(p, h1, h2, h3, h4, h5, h6) {
    color: var(--color-white);
}

.dark-overlay blockquote {
    border-left-color: var(--color-accent);
}

.dark-overlay blockquote footer {
    color: var(--color-muted-inverse);
}

/* Gold accent text (scripture citations) sits over photos behind only a 40%
   scrim, so over bright regions of an image the contrast can dip below AA.
   A dark shadow restores legibility without altering the brand accent,
   matching the text-shadow already used on the photo hero headings. */
.dark-overlay .scripture-ref,
.building-quote figcaption {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.dark-overlay::before,
.light-overlay::before {
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}

.dark-overlay::before {
    background-color: var(--color-overlay-scrim);
}

/* Hero header uses a directional gradient for cinematic depth;
   mid-page section overlays keep the flat scrim above. */
.hero-header.dark-overlay::before {
    background: var(--hero-scrim);
}

.light-overlay::before {
    background-color: var(--color-overlay-scrim-light);
}

.light-overlay,
.light-overlay p {
    color: var(--color-ink);
}

.dark-overlay,
.light-overlay {
    position: relative;
    z-index: 1;
}

/* Section layout variants - alternate narrow and split to break up the
   stacked-slab feel of a page of centered text blocks. */
.section-narrow .container {
    max-width: 780px;
}

.partner-section .partner-intro {
    max-width: 780px;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.partner-card {
    min-height: 100%;
}

.partner-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-5);
    color: var(--color-body);
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.partner-card-link:hover,
.partner-card-link:focus {
    color: var(--color-body);
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.partner-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-4);
}

.partner-logo {
    max-width: 100%;
    max-height: 130px;
    object-fit: contain;
}

.partner-logo-shield {
    max-height: 110px;
}

.partner-card-body {
    display: block;
}

.partner-card-title {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--font-size-h4);
    line-height: 1.2;
}

.partner-card-summary {
    display: block;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.section-narrow .section-copy > p,
.section-narrow .section-copy > ul:not([class]),
.section-narrow .section-copy > ol:not([class]),
.section-narrow .section-copy > blockquote {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}


/* Card grid - used on the home page to break the three summary blocks
   out of their stacked-slab layout. */
.home-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}
.home-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.home-card:hover, .home-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.home-card-photo {
    min-height: 126px;
    background-position: center;
    background-size: cover;
}
/* These three card photos sit below the hero, so their image URLs live in custom
   properties and are only fetched once a rule actually consumes them (a property
   holding a URL triggers no request on its own). site.js adds .is-bg-loaded as
   each card nears the viewport; the <noscript> block in Home/Index.cshtml
   applies the same backgrounds when scripting is off. */
.home-card-photo-worship {
    --card-bg: url(/images/home-card-worship.jpg);
}
.home-card-photo-identity {
    --card-bg: url(/images/home-card-identity.jpg);
}
.home-card-photo-community {
    --card-bg: url(/images/home-card-community-group.jpg);
}
@supports (background-image: image-set(url("/images/home-card-worship.avif") type("image/avif"))) {
    .home-card-photo-worship {
        --card-bg: image-set(
            url(/images/home-card-worship.avif) type("image/avif"),
            url(/images/home-card-worship.webp) type("image/webp"),
            url(/images/home-card-worship.jpg) type("image/jpeg")
        );
    }
    .home-card-photo-identity {
        --card-bg: image-set(
            url(/images/home-card-identity.avif) type("image/avif"),
            url(/images/home-card-identity.webp) type("image/webp"),
            url(/images/home-card-identity.jpg) type("image/jpeg")
        );
    }
    .home-card-photo-community {
        --card-bg: image-set(
            url(/images/home-card-community-group.avif) type("image/avif"),
            url(/images/home-card-community-group.webp) type("image/webp"),
            url(/images/home-card-community-group.jpg) type("image/jpeg")
        );
    }
}
.home-card-photo.is-bg-loaded {
    background-image: var(--card-bg);
}
.home-card h2 {
    font-size: var(--font-size-h3);
    margin: var(--space-6) var(--space-6) var(--space-3);
    text-align: left;
}
.home-card p {
    margin: 0 var(--space-6) var(--space-3);
    max-width: 100%;
}
.home-card address {
    margin-left: var(--space-6);
    margin-right: var(--space-6);
}
.home-card .home-card-lede {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--font-size-h4);
    line-height: 1.35;
}
.home-card-link {
    margin-top: auto;
    padding: var(--space-3) var(--space-6) var(--space-6);
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary-text);
}
.home-card-link:hover, .home-card-link:focus {
    text-decoration: underline;
}

.error-page {
    margin-top: 150px;
}

.error-page-title {
    font-size: clamp(3rem, 2rem + 4vw, 5rem);
    color: var(--color-primary-text);
    margin-bottom: 20px;
}

.error-page-summary {
    margin: 30px 0;
}

.error-page-links {
    margin: 40px 0;
}

.error-page-links ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.error-page-links li {
    margin: 15px 0;
}

.error-page-link {
    font-size: var(--font-size-h4);
    text-decoration: underline;
}

.error-page-contact {
    margin-top: 40px;
}

.error-page-request-id {
    margin-top: 30px;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

/*--------------------
5. Footer
--------------------*/

.site-footer {
    padding: var(--space-7) 0 var(--space-5);
    background: var(--color-footer);
    color: var(--color-footer-text);
}

.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.9fr) minmax(180px, 0.75fr);
    gap: var(--space-7);
}

.site-footer h2 {
    margin: 0 0 var(--space-3);
    color: inherit;
    font-size: var(--font-size-h4);
}

.site-footer p,
.site-footer address,
.site-footer li {
    color: rgba(247, 241, 232, 0.82);
    font-size: var(--font-size-sm);
    line-height: 1.55;
}

.site-footer p,
.site-footer address {
    margin: 0 0 var(--space-3);
}

.site-footer a {
    color: inherit;
    text-decoration-color: rgba(254, 209, 54, 0.55);
    text-underline-offset: 0.18em;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--color-accent);
}

.site-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-family: var(--font-brand);
    font-size: var(--font-size-h4);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.site-footer-logo img {
    width: 54px;
    height: auto;
}

.site-footer-brand h2 {
    max-width: 18rem;
}

.site-footer-brand p {
    max-width: 28rem;
}

.site-footer-affiliation {
    padding-top: var(--space-3);
    border-top: 1px solid rgba(254, 209, 54, 0.22);
}

.site-footer-links ul {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer-links a {
    text-decoration: none;
}

.site-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.site-footer-social .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 40px;
    min-width: 40px;
    margin-left: 0;
    gap: var(--space-2);
    padding: 0 var(--space-2);
    border: 1px solid rgba(247, 241, 232, 0.2);
    border-radius: var(--radius-sm);
    background: rgba(247, 241, 232, 0.06);
    color: rgba(247, 241, 232, 0.88);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.site-footer-social .social-link:hover,
.site-footer-social .social-link:focus {
    background: rgba(254, 209, 54, 0.14);
    border-color: rgba(254, 209, 54, 0.5);
    transform: none;
}

.site-footer-social .social-link-icon {
    width: 40px;
    padding: 0;
}

.site-footer-social .social-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.site-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Keep the toggle (and copyright) out of the bottom-right corner so they
       don't collide with the fixed #back-top button when scrolled to the foot. */
    justify-content: flex-start;
    column-gap: var(--space-5);
    row-gap: var(--space-3);
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid rgba(247, 241, 232, 0.14);
}

/* Theme control. Hidden until theme.js adds .theme-js to <html>, so no-JS
   visitors don't see controls that can't work (theming is client-side; see
   theme.js). */
.theme-toggle {
    display: none;
    align-items: center;
    padding: 2px;
    border: 1px solid rgba(247, 241, 232, 0.22);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.theme-js .theme-toggle {
    display: inline-flex;
}

.theme-toggle-option {
    appearance: none;
    -webkit-appearance: none;
    min-height: 34px;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: rgba(247, 241, 232, 0.88);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.theme-toggle-option:hover,
.theme-toggle-option:focus-visible {
    color: var(--color-accent);
}

.theme-toggle-option:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-accent);
    outline-offset: 2px;
}

.theme-toggle-option[aria-pressed="true"] {
    color: rgba(247, 241, 232, 0.96);
    background-color: rgba(247, 241, 232, 0.14);
}

.site-footer-bottom p {
    margin: 0;
    color: rgba(247, 241, 232, 0.66);
}

@media (max-width: 991.98px) {
    .site-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6) var(--space-5);
    }

    .site-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .site-footer {
        padding: var(--space-6) 0 var(--space-5);
    }

    /* Stack the three footer sections in a single column across the whole phone
       range. One early stack keeps long contact strings (the email) on one line
       without the multi-stage column reflow narrower phones used to need. */
    .site-footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .site-footer-logo {
        margin-bottom: var(--space-3);
    }

    .site-footer-brand p {
        margin-bottom: var(--space-2);
    }

    .site-footer-links ul {
        grid-template-columns: 1fr;
    }

    /* Long contact strings (email) must wrap rather than overflow. */
    .site-footer-contact a {
        overflow-wrap: anywhere;
    }

    .site-footer-social {
        gap: var(--space-2);
        margin-top: var(--space-4);
    }

    .site-footer-bottom {
        margin-top: var(--space-5);
    }
}

/* On touch devices the footer's standalone nav and contact links need a hit area
   that meets WCAG 2.2 SC 2.5.8 (minimum 24x24px). Scope to coarse pointers so the
   mouse-targeted desktop footer keeps its tighter vertical rhythm. The inline
   affiliation link sits within running text, so it stays exempt. */
@media (pointer: coarse) {
    .site-footer-links a,
    .site-footer-contact a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/*--------------------
6. Components & page modules
--------------------*/

.button-link {
    display: inline-block;
    font-size: var(--font-size-ui);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-slow), color var(--transition-slow), border-color var(--transition-slow);
}

.button-link:hover,
.button-link:focus,
.button-link:active {
    text-decoration: none;
}

.button-link-primary {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 75%, var(--color-black));
}

.button-link-primary:hover,
.button-link-primary:focus,
.button-link-primary:active {
    color: var(--color-ink);
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.button-link-compact {
    padding: var(--space-2) var(--space-4);
}

.button-link-lg {
    padding: 20px 40px;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* Back to top button */
#back-top {
    position: fixed;
    z-index: 1000;
    bottom: 40px;
    right: 50px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

#back-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

#back-top button {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--color-white);
    background: var(--color-primary);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background-color var(--transition-base),
                color var(--transition-base),
                box-shadow var(--transition-base),
                transform var(--transition-base);
}

#back-top button:hover,
#back-top button:focus-visible {
    background: var(--color-accent);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

@media (max-width: 480px) {
    #back-top {
        bottom: 16px;
        right: 20px;
    }

    #back-top button {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/*--------------------
7. Motion & accessibility
--------------------*/

/* A theme switch flips many tokens at once. Most elements only transition a
   property or two (for hover), so animating the switch cross-fades unevenly -
   some borders/links ease while backgrounds snap. theme.js adds this class for
   one frame around a live switch so the new theme lands instantly; hover
   transitions resume as soon as it's removed. (The initial, pre-paint theme has
   no prior state, so it never animates.) */
.theme-no-transitions,
.theme-no-transitions *,
.theme-no-transitions *::before,
.theme-no-transitions *::after {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}