@media (min-width: 768px) {
header nav img {
    max-height: 50px !important;
    width: auto !important;
}


/* ============================================================
   2. HERO / BANNER
   ============================================================ */

header.cover {
    min-height: 40vh !important;
    height: auto !important;

    display: grid !important;

    position: relative !important;

    box-sizing: border-box;
}


/*
   The dark overlay occupies the entire hero.
*/
header.cover > .bg-black-60 {
    grid-area: 1 / 1;

    width: 100% !important;

    min-height: 100% !important;
    height: auto !important;

    box-sizing: border-box;

    display: flex !important;
    flex-direction: column !important;
}


/*
   Keep the navigation and hero content above the overlay.
*/
header.cover > .bg-black-60 > * {
    position: relative;
}


/* ============================================================
   3. HERO CONTENT
   ============================================================ */

header.cover .tc {
    width: 100% !important;

    box-sizing: border-box;

    padding: 2rem 1rem !important;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}

header.cover .tc,
header.cover .tc-l {
    text-align: center !important;
}

header.cover .tc h1,
header.cover .tc h2,
header.cover .tc-l h1,
header.cover .tc-l h2 {
    text-align: center !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
   4. MAIN CONTENT
   ============================================================ */

main > article {
    margin-top: 0 !important;

    padding-top: 2rem !important;
}

/* Keep the final contact section flush with the footer. */
body.section-about_us main > article,
body.section-about_us main > article > section {
    padding-bottom: 0 !important;
}

.color-section .contact-email,
.color-section .contact-email:visited {
    color: #ffffff !important;
}


/* ============================================================
   5. FIXED NAVIGATION
   ============================================================ */

nav[role="navigation"] {
    position: fixed !important;

    top: 0;

    width: 100%;

    z-index: 9999;

    background-color: rgba(0, 0, 0, 0.8) !important;

    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
}
}


/* ============================================================
   6. SCRIPTURE REFERENCE POP-UPS ("Our Beliefs" section)
   Pure CSS checkbox/label toggle - no JavaScript.
   A small custom icon sits wherever you place it in the sentence;
   clicking it opens a card with the Scripture reference, written
   directly on the site (nothing links off-site). Intentionally
   left outside the media query above so it also works on mobile.

   IMPORTANT: the card is anchored to the bottom of the SCREEN, not
   to the icon. Anchoring it to the icon's exact position used to
   cause it to run off-screen whenever an icon landed at the start
   of a wrapped line - this fixes that for good, no matter where an
   icon ends up in the text.

   NOTE: this used to be built with <details>/<summary>. Don't go back
   to that (or to a <div> anywhere in here) - per the HTML parsing spec,
   those tags force-close any <p> they're inside, even through an
   inline <span>, which silently split every sentence that ended with
   the icon and dropped it onto its own line below the paragraph, in
   every browser. Everything in this component has to stay limited to
   span/input/label so it can never do that again.
   ============================================================ */

/* Wrapper kept inline so it flows with the surrounding sentence */
.scripture-ref {
    display: inline-block;
    line-height: 1;
}

/* The actual checkbox that tracks open/closed state - visually hidden
   but still focusable/toggleable via keyboard (Tab + Space), unlike
   display:none which would remove it from the tab order entirely. */
.scripture-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Remove the browser's default checkbox rendering isn't needed since
   it's visually hidden above; this just keeps it from ever flashing
   visible before the stylesheet loads. */
.scripture-toggle {
    appearance: none;
    -webkit-appearance: none;
}

/* The icon badge itself (a <label for="...">, clicking it toggles the
   checkbox). `top` is set inline per-instance via the shortcode's `dy`
   param, for small manual nudges. */
.scripture-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    line-height: 0;
    margin-left: 3px;
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* The custom icon images are square PNGs with their own navy/white
   design baked in, so we just size them small - no extra background
   circle needed behind them. */
.scripture-badge img {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.scripture-badge:hover {
    transform: scale(1.18);
}

.scripture-toggle:focus-visible + .scripture-badge {
    transform: scale(1.18);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 174, 0, 0.55);
}

.scripture-toggle:checked + .scripture-badge {
    box-shadow: 0 0 0 3px rgba(27, 42, 74, 0.35);
}

/* Fallback shown only if an icon filename doesn't resolve, so a typo'd
   icon number is still visible/clickable rather than silently blank. */
.scripture-badge-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #1b2a4a;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

/* Invisible full-screen click-catcher, shown only while the panel is
   open. It sits behind the panel (lower z-index) but above everything
   else on the page, so a click anywhere outside the panel lands on
   this label instead and toggles the same checkbox closed. Clicks
   inside the panel itself hit the panel (it's stacked on top here),
   so they never reach this backdrop and never close it. */
.scripture-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9997;
    cursor: default;
}

.scripture-toggle:checked ~ .scripture-backdrop {
    display: block;
}

/* The pop-up card holding the Scripture reference - fixed to the
   viewport so its position never depends on where the icon sits.
   Hidden by default (this used to be handled for free by <details> not
   being [open]; now that it's a plain <span> we show/hide it ourselves
   based on the checkbox's state). */
.scripture-panel {
    display: none;
    position: fixed;
    z-index: 9998;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    width: calc(100% - 3rem);
    max-width: 380px;
    text-align: left;
    background: #ffffff;
    color: #1b2a4a;
    border: 1px solid #e2e2e2;
    border-left: 4px solid rgb(255, 123, 0);
    border-radius: 10px;
    box-shadow: 0 14px 36px rgba(27, 42, 74, 0.3);
    padding: 0.9rem 1.1rem;
}

.scripture-toggle:checked ~ .scripture-panel {
    display: block;
    animation: scriptureFadeIn 0.15s ease-out;
}

.scripture-panel-verse {
    display: block;
    margin: 0 0 0.35rem 0;
    font-family: georgia, serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #1b2a4a;
}

.scripture-panel-text {
    display: block;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;
}

@keyframes scriptureFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Individual scripture sections inside one pop-up */
.scripture-entry {
    display: block;
}

/* Divider between multiple scriptures */
.scripture-entry + .scripture-entry {
    border-top: 1px solid #ddd;
    margin-top: 0.9rem;
    padding-top: 0.9rem;
}