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

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

[Table of contents]

0.0 Reset & retained utilities
0. Design Tokens
0a. Dark theme tokens
0.1 Web fonts (self-hosted)
1. Base & content patterns
  1a. Home hero facts
  1b. Text content helpers
  1c. Cards and repeated surfaces
  1d. Scripture references
  1e. Glossary terms
  1f. Parking
  1g. Embedded media
  1h. Sermon library
  1i. RUF profile
  1j. Staff profiles
2. Navigation
2b. Page Header
2c. Sunday Hero
3. Header
4. Sections
4a. Our Building section
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.0 Reset & retained utilities
--------------------*/

/* The slice of Bootstrap 5.3.8's Reboot this site actually relies on, ported
   when the framework was removed (rem converted to px at the 16px root). Only
   elements the views use are covered; UA defaults stand for everything else.
   Kept in a cascade layer so every unlayered rule in the sheet beats it
   regardless of source position or specificity, as when bootstrap.min.css
   loaded before this stylesheet. */

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

    @media (prefers-reduced-motion: no-preference) {
        :root {
            scroll-behavior: smooth;
        }
    }

    body {
        -webkit-tap-highlight-color: transparent;
    }

    h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        margin-bottom: 8px;
    }

    p {
        margin-top: 0;
        margin-bottom: 16px;
    }

    ol, ul {
        padding-left: 32px;
    }

    dl, ol, ul {
        margin-top: 0;
        margin-bottom: 16px;
    }

    ol ol, ol ul, ul ol, ul ul {
        margin-bottom: 0;
    }

    dt {
        font-weight: 700;
    }

    dd {
        margin-bottom: 8px;
        margin-left: 0;
    }

    blockquote {
        margin: 0 0 16px;
    }

    address {
        margin-bottom: 16px;
        font-style: normal;
        line-height: inherit;
    }

    b, strong {
        font-weight: bolder;
    }

    small {
        font-size: 0.875em;
    }

    /* Reboot also tinted <code> pink; it inherits the surrounding text color
       instead so the one place it appears (the error page) follows the palette. */
    code {
        font-size: 0.875em;
        overflow-wrap: break-word;
    }

    figure {
        margin: 0 0 16px;
    }

    img, svg {
        vertical-align: middle;
    }

    label {
        display: inline-block;
    }

    button, input, optgroup, select, textarea {
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    button, select {
        text-transform: none;
    }

    button {
        border-radius: 0;
    }

        button:focus:not(:focus-visible) {
            outline: 0;
        }

    button, [type="button"], [type="reset"], [type="submit"] {
        -webkit-appearance: button;
    }

        button:not(:disabled), [type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled) {
            cursor: pointer;
        }

    ::-moz-focus-inner {
        padding: 0;
        border-style: none;
    }

    [type="search"] {
        outline-offset: -2px;
        -webkit-appearance: textfield;
    }

    [role="button"] {
        cursor: pointer;
    }

    summary {
        display: list-item;
        cursor: pointer;
    }

    iframe {
        border: 0;
    }

    /* The handful of Bootstrap utility classes the markup still uses. */

    .visually-hidden,
    .visually-hidden-focusable:not(:focus):not(:focus-within) {
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

        .visually-hidden:not(caption),
        .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
            position: absolute !important;
        }

        .visually-hidden *,
        .visually-hidden-focusable:not(:focus):not(:focus-within) * {
            overflow: hidden !important;
        }

    .text-center {
        text-align: center !important;
    }

    .img-fluid {
        max-width: 100%;
        height: auto;
    }

    .d-block {
        display: block !important;
    }

    .mx-auto {
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/*--------------------
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 rules elsewhere consume as "r, g, b" triplets (inside
       rgba(var(--…-rgb), α)) 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 never used as a
       triplet stay plain hex. */
    --color-primary-rgb: 19, 96, 130;       /* #136082 */
    --color-primary: rgb(var(--color-primary-rgb));
    --color-accent-rgb: 254, 209, 54;       /* #fed136 */
    --color-accent: rgb(var(--color-accent-rgb));
    --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));
    /* Secondary tuned for use as foreground text, mirroring --color-primary-text.
       Equals --color-secondary in light mode; the dark theme lifts it. */
    --color-secondary-text: var(--color-secondary);

    /* 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-rgb: 247, 241, 232; /* #f7f1e8 */
    --color-footer-text: rgb(var(--color-footer-text-rgb));
    --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(var(--color-accent-rgb), 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;

    /* 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));

}

/*--------------------
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 saved light/dark
preference 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, so they need no
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 */
    --color-secondary-text: #8fca96;        /* lifted from #4f7553 */
    --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);

}

/* 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;
}

/* The page-width wrapper. The max-widths and 12px side padding replicate
   Bootstrap 5.3's .container tier for tier; every breakpoint must keep these
   exact values so nothing shifts as the framework is retired. */
.container {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto;
}

@media (width >= 576px) {
    .container { max-width: 540px; }
}

@media (width >= 768px) {
    .container { max-width: 720px; }
}

@media (width >= 992px) {
    .container { max-width: 960px; }
}

@media (width >= 1200px) {
    .container { max-width: 1140px; }
}

@media (width >= 1400px) {
    .container { max-width: 1320px; }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
    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);
}

/*--------------------
1a. 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 (width < 576px) {
    .home-hero-facts {
        flex-direction: column;
    }
    .home-hero-facts li + li::before {
        display: none;
    }
}

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

/*--------------------
1b. 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;
        }

/*--------------------
1c. 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);
}

/*--------------------
1d. 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);
    }

/*--------------------
1e. 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(var(--color-accent-rgb), 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: ")";
        }
    }

/*--------------------
1f. Parking
--------------------*/
.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(var(--color-accent-rgb), 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(var(--color-accent-rgb), 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(var(--color-primary-rgb), 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(var(--color-primary-rgb), 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 (width < 768px) {
    .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;
}

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

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

/*--------------------
1h. Sermon library
--------------------*/
.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-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-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-text);
    font-family: var(--font-brand);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.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-h4);
    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 (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; sermon-library.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 (width < 992px) {
    .sermon-library-layout {
        grid-template-columns: 1fr;
    }
}

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

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

}

/*--------------------
1i. 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;
}

/*--------------------
1j. 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 (width < 576px) {
    .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
--------------------*/

/* Structural skeleton based on the Bootstrap 5.3.8 navbar, collapse, and
   dropdown pieces the site used (rem converted to px at the 16px root). The
   visual design further down was built against these dimensions and cascade
   positions - the skeleton must stay ABOVE the look rules so equal-specificity
   ties resolve the same way they did when bootstrap.min.css loaded first.
   (Deliberately NOT in a cascade layer, unlike the reboot: resets here such as
   .nav-link's color/text-decoration must beat the unlayered `a` element rule
   on specificity while still losing to `a:hover` - a relationship layers
   cannot express. Layering this block would tint subnav links and underline
   dropdown items.) */

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
}

    .navbar > .container {
        display: flex;
        flex-wrap: inherit;
        align-items: center;
        justify-content: space-between;
    }

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar-brand {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 16px;
    font-size: 20px;
    text-decoration: none;
    white-space: nowrap;
}

.navbar-toggler {
    padding: 4px 12px;
    font-size: 20px;
    line-height: 1;
    color: rgba(var(--color-ink-rgb), 0.65);
    background-color: transparent;
    border: 1px solid rgba(var(--color-ink-rgb), 0.15);
    border-radius: var(--radius-md);
    transition: box-shadow 0.15s ease-in-out;
}

    .navbar-toggler:hover {
        text-decoration: none;
    }

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: 0 0 0 4px;
    }

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

[data-theme="dark"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.collapse:not(.show) {
    display: none;
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

.navbar-collapse {
    flex-grow: 1;
    flex-basis: 100%;
    align-items: center;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.navbar-nav .nav-link {
    padding: 8px 0;
}

.dropdown {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap;
}

    .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 160px;
    margin: 0;
    list-style: none;
}

    .dropdown-menu.show {
        display: block;
    }

.navbar-nav .dropdown-menu {
    position: static;
}

.dropdown-item {
    display: block;
    width: 100%;
    clear: both;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

@media (width >= 992px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }

    /* top/left anchor the open menu under its .dropdown parent - Bootstrap's
       JS used to switch this on via a [data-bs-popper] attribute. Inert below
       lg, where the menu is static and opens in flow. */
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 8px;
        padding-left: 8px;
    }

    /* Wins over .collapse:not(.show) on source order (same specificity);
       Bootstrap's compiled !important isn't needed with both rules here. */
    .navbar-expand-lg .navbar-collapse {
        display: flex;
        flex-basis: auto;
    }

    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
}

/* Visual design layered on the skeleton above. */

.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;
        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);
        /* Theme surface, not white, so the menu follows 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;
    }
    .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 (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 (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 (width < 992px) {
    .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 (768px <= width < 992px) {
    .navbar-nav {
        margin-left: 0;
        text-align: center;
    }

    .navbar-logo {
        margin: 0 auto;
    }

    /* In this range the active nav-link rounds all four corners. 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 (width < 768px) {
    .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 (width < 360px) {
    .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;
    }

    /* Visual subtitle under the page h1. A <p> rather than an <h2> so it doesn't
       sit in the document outline as a peer of the real section headings; restate
       the heading typography it no longer inherits from the h1-h6 element rules. */
    .page-header .page-header-subtitle {
        margin: 18px 0 0;
        font-weight: 600;
        font-family: var(--font-display);
        font-size: var(--font-size-h2);
        line-height: var(--line-height-heading);
        text-wrap: balance;
        font-optical-sizing: auto;
    }

    .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 (width >= 768px) {
    .page-header {
        padding: 100px 0 28px;
    }
}

@media (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 (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 (width < 768px) {
    .sunday-hero {
        padding-top: calc(var(--layout-fixed-header-offset) + 28px);
        padding-bottom: var(--space-6);
    }

    .sunday-hero .page-header-subtitle {
        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;
    }

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

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

    .home-hero .intro-text .hero-eyebrow {
        font-family: var(--font-body);
        font-size: var(--font-size-ui);
        font-weight: 500;
        text-transform: uppercase;
        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 (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 (width >= 992px) {
        .hero-header .intro-text {
            padding-top: 200px;
        }

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

    @media (width < 576px) {
        .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 (width < 768px) {
    .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 (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 (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 (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;
    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);
    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 (width < 768px) {
    .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(var(--color-footer-text-rgb), 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(var(--color-accent-rgb), 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(var(--color-accent-rgb), 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(var(--color-footer-text-rgb), 0.2);
    border-radius: var(--radius-sm);
    background: rgba(var(--color-footer-text-rgb), 0.06);
    color: rgba(var(--color-footer-text-rgb), 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(var(--color-accent-rgb), 0.14);
    border-color: rgba(var(--color-accent-rgb), 0.5);
}

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

.site-footer-social .social-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    transition: filter var(--transition-fast), transform var(--transition-fast);
}

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

.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(var(--color-footer-text-rgb), 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(var(--color-footer-text-rgb), 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(var(--color-footer-text-rgb), 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(var(--color-footer-text-rgb), 0.96);
    background-color: rgba(var(--color-footer-text-rgb), 0.14);
}

.site-footer-bottom p {
    margin: 0;
    color: rgba(var(--color-footer-text-rgb), 0.66);
}

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

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

@media (width < 768px) {
    .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;
    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 (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;
    }
}

/* Windows High Contrast (forced colors) strips author backgrounds, so the two
   controls whose selected state is a background fill alone need a substitute.
   Borders survive - recolored, but CSS system colors are honored as specified -
   so mark the pressed theme option and the active book-filter chip with a
   SelectedItem border. A border rather than an outline so it can coexist with
   the UA's focus indicator. */
@media (forced-colors: active) {
    .theme-toggle-option[aria-pressed="true"],
    .sermon-book-chip.is-active {
        border: 2px solid SelectedItem;
    }
}