/* ============================================================================
 * RCCG Bethel Assembly - Brand layer over Avenix template
 *
 * Palette is sourced from the official RCCG mark only; no invented hues.
 *   #180c62  navy   - Agape (divine love)             -> primary brand
 *   #d61812  red    - blood of Jesus (logo rings)     -> accent / important CTAs
 *   #028a2c  green  - fruitfulness, multiplication    -> success / scripture
 *   #fefefe  white  - Holy Spirit dove                 -> surfaces
 *
 * Layered AFTER css/custom.css. Edge-cases handled below: WCAG contrast,
 * reduced-motion, dark mode, forced-colors, print, focus-visible, color-blind
 * pairings (icon + text for status), touch-target minimums, scrollbar, and
 * branded text selection.
 * ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Brand (from logo, exact hex) */
    --brand-navy:        #180c62;
    --brand-red:         #d61812;
    --brand-green:       #028a2c;
    --brand-white:       #fefefe;

    /* Tonal ramps - generated by mixing the brand hue with white/black at
       fixed steps so every shade traces back to the logo. */
    --navy-50:           #efedf8;
    --navy-100:          #d6d1ee;
    --navy-200:          #a89fdb;
    --navy-300:          #7766c4;
    --navy-500:          #3c2bad;
    --navy-700:          #251b86;   /* hover for navy buttons */
    --navy-900:          var(--brand-navy);
    --navy-950:          #0c0635;

    --red-50:            #fdecec;
    --red-100:           #fbcfcd;
    --red-300:           #ee7c77;
    --red-500:           var(--brand-red);
    --red-700:           #a3120e;
    --red-900:           #6c0c08;

    --green-50:          #e6f5ec;
    --green-100:         #c4e7d1;
    --green-500:         var(--brand-green);
    --green-700:         #016a22;

    /* Neutral surfaces - cool-tinted toward navy so cards feel cohesive */
    --surface-page:      #f7f7fb;
    --surface-card:      #ffffff;
    --surface-muted:     #f1f0f8;
    --surface-overlay:   rgba(24, 12, 98, 0.86);
    --hairline:          #e5e3f0;
    --hairline-strong:   #cfccdf;

    /* Semantic text - all combinations audited to WCAG AA on stated bg */
    --ink-primary:       #1a1632;   /* on white: 16.1:1 */
    --ink-secondary:     #524d68;   /* on white:  8.2:1 */
    --ink-muted:         #6f6a82;   /* on white:  5.4:1 */
    --ink-on-brand:      #ffffff;   /* on navy:  17.0:1 */
    --ink-on-brand-mute: rgba(255,255,255,0.78);

    /* Status (always paired with an icon in the markup, never colour-only) */
    --success-fg:        #016a22;
    --success-bg:        var(--green-50);
    --danger-fg:         #8a0c08;
    --danger-bg:         var(--red-50);
    --warning-fg:        #7a5500;
    --warning-bg:        #fff5d6;
    --info-fg:           var(--navy-700);
    --info-bg:           var(--navy-50);

    /* Elevation - tinted with brand so shadows feel cohesive */
    --shadow-xs:         0 1px 2px  rgba(24, 12, 98, 0.06);
    --shadow-sm:         0 2px 8px  rgba(24, 12, 98, 0.07);
    --shadow-md:         0 8px 24px rgba(24, 12, 98, 0.10);
    --shadow-lg:         0 18px 50px rgba(24, 12, 98, 0.16);
    --ring-focus:        0 0 0 4px rgba(24, 12, 98, 0.22);
    --ring-focus-danger: 0 0 0 4px rgba(214, 24, 18, 0.28);

    /* Radii */
    --r-sm:              8px;
    --r-md:              14px;
    --r-lg:              22px;
    --r-pill:            9999px;

    /* Motion */
    --ease:              cubic-bezier(.2, .8, .25, 1);
    --dur-1:             .18s;
    --dur-2:             .32s;
    --dur-3:             .55s;

    /* Map onto Avenix template variables so the bought theme inherits us */
    --primary-color:      var(--brand-navy);
    --secondary-color:    var(--surface-page);
    --text-color:         var(--ink-primary);
    --accent-color:       var(--brand-red);
    --white-color:        var(--brand-white);
    --divider-color:      rgba(255, 255, 255, 0.16);
    --dark-divider-color: var(--hairline);
}

/* ── Page baseline ──────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
    background: var(--surface-page);
    color: var(--ink-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Branded text selection */
::selection      { background: var(--brand-navy); color: #fff; }
::-moz-selection { background: var(--brand-navy); color: #fff; }

/* Slim brand-tinted scrollbar (Webkit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--navy-300) transparent; }
*::-webkit-scrollbar           { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb     { background: var(--navy-300); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--navy-500); }
*::-webkit-scrollbar-track     { background: transparent; }

/* Universal focus-visible - keyboard nav only, never on click */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--brand-navy);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Skip-link - visually hidden until keyboard-focused (WCAG-compliant) */
.skip-link {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    top: 12px; left: 12px;
    width: auto; height: auto;
    clip: auto; overflow: visible;
    padding: .75rem 1.1rem;
    background: var(--brand-navy);
    color: #fff !important;
    border-radius: var(--r-sm);
    font-weight: 700;
    z-index: 9999;
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

/* Touch-target floor: 44x44 (WCAG 2.5.5 AAA) */
a, button, [role="button"] { min-height: 44px; }
.nav-link, .breadcrumb-item a { min-height: auto; }

/* ── Brand utilities ────────────────────────────────────────────────────── */
.brand-bg          { background: var(--brand-navy) !important; color: #fff; }
.brand-bg-grad     { background: linear-gradient(135deg, var(--navy-950) 0%, var(--brand-navy) 55%, var(--navy-700) 100%) !important; color: #fff; }
.brand-bg-soft     { background: var(--navy-50) !important; }
.brand-text        { color: var(--brand-navy) !important; }
.brand-accent-text { color: var(--brand-red) !important; }
.brand-success-text{ color: var(--brand-green) !important; }

/* ── Section title - kerned, bold, brand-led ───────────────────────────── */
.section-title h3 {
    color: var(--brand-green);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 700;
    font-size: .85rem;
    display: inline-block;
    padding: .35rem .9rem;
    background: var(--green-50);
    border-radius: var(--r-pill);
    border: 1px solid rgba(2, 138, 44, .18);
}
.section-title h2,
.section-title h2 span,
.text-anime-style-2,
.text-anime-style-2 span {
    color: var(--brand-navy);
    letter-spacing: -.01em;
}
.section-title h2 span,
.text-anime-style-2 span {
    background: linear-gradient(135deg, var(--brand-red), var(--brand-navy));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Buttons - clean Astra-style pills, no template pseudo-decoration ──── */
.btn-default {
    background-color: var(--brand-navy);
    color: #fff;
    padding: .9rem 2rem !important;
    border-radius: var(--r-pill);
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: .015em;
    box-shadow: var(--shadow-sm);
    transition:
        background-color var(--dur-2) var(--ease),
        box-shadow var(--dur-1) var(--ease),
        transform var(--dur-1) var(--ease),
        color var(--dur-2) var(--ease);
}
/* Kill the template's decorative arrow circle + ink-reveal pseudo-elements */
.btn-default::before,
.btn-default::after,
.btn-default:hover::before,
.btn-default:hover::after { content: none !important; display: none !important; }

.btn-default:hover,
.btn-default:focus-visible {
    background-color: var(--navy-700);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* CTA / important action - red pill (matches logo rings) */
.btn-default.btn-highlighted {
    background-color: var(--brand-red);
    color: #fff;
}
.btn-default.btn-highlighted:hover,
.btn-default.btn-highlighted:focus-visible {
    background-color: var(--red-700);
    box-shadow: 0 14px 32px rgba(214, 24, 18, .32);
}

/* Outline (secondary) */
.btn-default.btn-outline {
    background-color: transparent;
    color: var(--brand-navy);
    box-shadow: inset 0 0 0 2px var(--brand-navy);
}
.btn-default.btn-outline:hover,
.btn-default.btn-outline:focus-visible {
    background-color: var(--brand-navy);
    color: #fff;
    box-shadow: inset 0 0 0 2px var(--brand-navy), var(--shadow-md);
}

/* Outline on dark surfaces (hero, donate strip) */
.btn-default.btn-outline-light {
    background-color: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
.btn-default.btn-outline-light:hover,
.btn-default.btn-outline-light:focus-visible {
    background-color: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 2px #fff, var(--shadow-md);
}

/* ============================================================================
 * NAV BAR v3 — Porsche-style mega menu.
 * ─────────────────────────────────────────────────────────────────────────────
 *  • Dark navy (RCCG #180c62) bar, white tracked-uppercase items.
 *  • Top-level items are FEW. Each opens a FULL-WIDTH white card that drops
 *    below the bar with a subtle ease-out, plus a page-dimming scrim.
 *  • Mega card is multi-column: items list on the left (with descriptions),
 *    featured story card on the right.
 *  • Mobile: the mega panels collapse into an in-line drawer; no float-out.
 *  • State machine is Alpine.js (vendored). [x-cloak] hides until hydrated.
 *  • All selectors scoped under `.rccg-nav`/`.rccg-mega` so nothing bleeds.
 * ========================================================================== */
[x-cloak] { display: none !important; }

.rccg-nav {
    --nav-bg:        #180c62;       /* RCCG navy */
    --nav-bg-strong: #110949;       /* used after scroll for extra weight */
    --nav-fg:        #ffffff;
    --nav-fg-muted:  rgba(255,255,255,.72);
    --nav-accent:    #d61812;       /* RCCG red */
    --nav-accent-2:  #028a2c;       /* RCCG green */
    --mega-bg:       #ffffff;
    --mega-fg:       #0c0930;
    --mega-fg-muted: #5a5a72;
    --mega-line:     #efeff4;
    --mega-hover:    #f6f6fb;
    --bar-h-d:       80px;
    --bar-h-m:       64px;
    --ease:          cubic-bezier(.22,.61,.36,1);

    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: var(--nav-bg);
    color: var(--nav-fg);
    transition: background .35s var(--ease), box-shadow .35s var(--ease);
    isolation: isolate;        /* keep z-stacking sane */
    will-change: background;
}
.rccg-nav.is-scrolled {
    background: var(--nav-bg-strong);
    box-shadow: 0 6px 24px -12px rgba(0,0,0,.45);
}
.rccg-nav.is-open {
    background: var(--nav-bg-strong);
    box-shadow: none;
}

/* ── Bar ───────────────────────────────────────────────────────────────── */
.rccg-nav__bar {
    height: var(--bar-h-d);
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
}

.rccg-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--nav-fg);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .02em;
    line-height: 1;
}
.rccg-nav__brand img {
    height: 52px;
    width: auto;
    display: block;
    /* Bigger on the dark bar so the multi-color seal's internal detail
       (dove, rings, decorative text) reads. The seal's own white outer
       disc isolates it from the navy background — no CSS recolor needed. */
}
@media (max-width: 991.98px) {
    .rccg-nav__brand img { height: 40px; }
}
.rccg-nav__brand span {
    white-space: nowrap;
    text-transform: uppercase;
    font-size: .82rem;
    letter-spacing: .12em;
}

/* ── Primary list ──────────────────────────────────────────────────────── */
.rccg-nav__primary {
    justify-self: center;
}
.rccg-nav__primary > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.4rem);
}
.rccg-nav__link {
    --pad-x: .25rem;
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--nav-fg);
    text-decoration: none;
    font: inherit;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 1.1rem var(--pad-x);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    position: relative;
    transition: color .25s var(--ease), opacity .25s var(--ease);
}
.rccg-nav__link:hover,
.rccg-nav__link:focus-visible {
    color: var(--nav-fg);
    opacity: .82;
    outline: none;
}
.rccg-nav__link::after {
    content: '';
    position: absolute;
    left: var(--pad-x);
    right: var(--pad-x);
    bottom: .55rem;
    height: 2px;
    background: var(--nav-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s var(--ease);
    pointer-events: none;
}
.rccg-nav__link.is-active::after,
.rccg-nav__link.is-open::after,
.rccg-nav__link:focus-visible::after {
    transform: scaleX(1);
}
.rccg-nav__chev {
    transition: transform .3s var(--ease);
    opacity: .9;
}
.rccg-nav__link.is-open .rccg-nav__chev { transform: rotate(180deg); }

/* ── CTA cluster ───────────────────────────────────────────────────────── */
.rccg-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    justify-self: end;
}
.rccg-nav__give {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem 1.2rem;
    background: var(--nav-accent);
    color: #fff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.rccg-nav__give:hover {
    background: #b8120f;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(214, 24, 18, .8);
}

.rccg-nav__burger {
    display: none;
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    color: var(--nav-fg);
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}
.rccg-nav__burger span {
    position: absolute;
    left: 50%;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: transform .3s var(--ease), opacity .25s var(--ease), top .3s var(--ease);
}
.rccg-nav__burger span:nth-child(1) { top: 17px; }
.rccg-nav__burger span:nth-child(2) { top: 25px; }
.rccg-nav__burger.is-open span:nth-child(1) { top: 21px; transform: translateX(-50%) rotate( 45deg); }
.rccg-nav__burger.is-open span:nth-child(2) { top: 21px; transform: translateX(-50%) rotate(-45deg); }

/* ── Mega panel ────────────────────────────────────────────────────────── */
.rccg-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--mega-bg);
    color: var(--mega-fg);
    border-top: 1px solid var(--mega-line);
    box-shadow: 0 24px 48px -16px rgba(12, 9, 48, .25);
    z-index: 1099;
    overflow: hidden;
}
.rccg-mega__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 3rem clamp(1rem, 3vw, 2.5rem) 3.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
}
.rccg-mega__eyebrow {
    margin: 0 0 1.25rem;
    font-size: .68rem;
    letter-spacing: .22em;
    color: var(--nav-accent);
    font-weight: 700;
    text-transform: uppercase;
}
.rccg-mega__list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .25rem 1.5rem;
}
.rccg-mega__item {
    display: block;
    padding: .9rem 1rem;
    margin: 0 -1rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--mega-fg);
    transition: background .2s var(--ease), transform .2s var(--ease);
}
.rccg-mega__item:hover {
    background: var(--mega-hover);
    transform: translateX(2px);
    color: var(--mega-fg);
}
.rccg-mega__item.is-active {
    background: var(--mega-hover);
    color: var(--mega-fg);
    box-shadow: inset 3px 0 0 var(--nav-accent);
}
.rccg-mega__title {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.25;
}
.rccg-mega__desc {
    display: block;
    margin-top: .25rem;
    font-size: .82rem;
    color: var(--mega-fg-muted);
    line-height: 1.45;
}

.rccg-mega__feature {
    background: linear-gradient(135deg, #f6f6fb 0%, #ffffff 100%);
    border: 1px solid var(--mega-line);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    align-self: start;
}
.rccg-mega__kicker {
    margin: 0;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--nav-accent-2);
    font-weight: 700;
}
.rccg-mega__feature h3 {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--mega-fg);
    font-weight: 700;
}
.rccg-mega__feature p {
    margin: 0;
    color: var(--mega-fg-muted);
    line-height: 1.55;
    font-size: .94rem;
}
.rccg-mega__cta {
    align-self: flex-start;
    margin-top: .25rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    background: var(--nav-bg);
    color: #fff;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.rccg-mega__cta:hover {
    background: var(--nav-bg-strong);
    color: #fff;
    transform: translateX(3px);
}

/* Alpine x-transition classes */
.rccg-mega--enter      { transition: opacity .28s var(--ease), transform .35s var(--ease); }
.rccg-mega--enter-from { opacity: 0; transform: translateY(-8px); }
.rccg-mega--enter-to   { opacity: 1; transform: translateY(0); }
.rccg-mega--leave      { transition: opacity .2s var(--ease), transform .25s var(--ease); }
.rccg-mega--leave-from { opacity: 1; transform: translateY(0); }
.rccg-mega--leave-to   { opacity: 0; transform: translateY(-6px); }

/* ── Page-dimming scrim ────────────────────────────────────────────────── */
.rccg-nav__scrim {
    position: fixed;
    inset: 0;
    top: var(--bar-h-d);
    background: rgba(8, 6, 36, .42);
    z-index: 1090;
    pointer-events: auto;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Mobile (≤ 991px) ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .rccg-nav__bar {
        height: var(--bar-h-m);
        grid-template-columns: auto 1fr auto;
    }
    .rccg-nav__brand img { height: 32px; }
    .rccg-nav__brand span { display: none; }

    .rccg-nav__burger { display: inline-flex; align-items: center; justify-content: center; }

    /* Light drawer — text on a dark navy background tested poorly for older
       readers (low-opacity whites blended into the brand colour). The desktop
       mega already uses a white surface with dark text; we mirror that on
       mobile so the system is one readable language. The header bar itself
       stays dark — only the drawer surface flips. */
    .rccg-nav__primary {
        position: fixed;
        inset: var(--bar-h-m) 0 0 0;
        background: var(--mega-bg);
        color: var(--mega-fg);
        padding: 1.5rem clamp(1rem, 4vw, 2rem) 2rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .35s var(--ease);
        justify-self: stretch;
        box-shadow: -16px 0 32px -16px rgba(8, 6, 36, .35);
    }
    .rccg-nav.is-mobile-open .rccg-nav__primary { transform: translateX(0); }

    .rccg-nav__primary > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .rccg-nav__link {
        width: 100%;
        justify-content: space-between;
        padding: 1.1rem 0;
        font-size: 1rem;
        letter-spacing: .08em;
        color: var(--mega-fg);
        border-bottom: 1px solid var(--mega-line);
    }
    .rccg-nav__link:hover,
    .rccg-nav__link:focus-visible { color: var(--mega-fg); opacity: 1; }
    .rccg-nav__link.is-active     { color: var(--nav-accent); }
    .rccg-nav__link::after        { display: none; }
    .rccg-nav__chev               { color: var(--mega-fg-muted); }

    .rccg-mega {
        position: static;
        background: transparent;
        color: var(--mega-fg);
        border: 0;
        box-shadow: none;
    }
    .rccg-mega__inner {
        grid-template-columns: 1fr;
        padding: 1rem 0 1.5rem;
        gap: 1.25rem;
    }
    .rccg-mega__eyebrow { color: var(--nav-accent); }
    .rccg-mega__item {
        color: var(--mega-fg);
        margin: 0;
        padding: .75rem 0;
        border-radius: 0;
        border-bottom: 1px solid var(--mega-line);
    }
    .rccg-mega__item:hover,
    .rccg-mega__item.is-active {
        background: transparent;
        color: var(--mega-fg);
        box-shadow: none;
        transform: none;
    }
    .rccg-mega__item.is-active .rccg-mega__title { color: var(--nav-accent); }
    .rccg-mega__title { font-weight: 600; }
    .rccg-mega__desc  { color: var(--mega-fg-muted); }

    .rccg-mega__feature {
        background: linear-gradient(135deg, #f6f6fb 0%, #ffffff 100%);
        border: 1px solid var(--mega-line);
        color: var(--mega-fg);
    }
    .rccg-mega__feature h3 { color: var(--mega-fg); }
    .rccg-mega__feature p  { color: var(--mega-fg-muted); }
    .rccg-mega__cta        { background: var(--nav-bg); color: #fff; }
    .rccg-mega__cta:hover  { background: var(--nav-bg-strong); color: #fff; }

    .rccg-nav__cta { gap: .5rem; }
    .rccg-nav__give { padding: .6rem .9rem; font-size: .72rem; }

    .rccg-nav__scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rccg-nav, .rccg-nav *, .rccg-mega, .rccg-mega * {
        transition: none !important;
        animation: none !important;
    }
}

.responsive-menu, .slicknav_menu { display: none !important; }
.rccg-nav .navbar-toggle { display: none; }
/* ── Legacy header (admin layouts, error pages) ───────────────────────── */
.main-header:not(.rccg-nav) {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-xs);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .main-header { background: #fff; }
}
.header-sticky.fixed-header {
    box-shadow: var(--shadow-sm);
    background: rgba(255, 255, 255, .96);
}
.main-header .navbar { padding: .5rem 0; }
.main-header .navbar-brand { display: flex; align-items: center; gap: .65rem; padding: 0; }
.main-header .navbar-brand img { max-height: 48px; width: auto; }
.main-header .navbar-brand small { display: block; font-size: .68rem; opacity: .7; letter-spacing: .04em; }

/* Nav links - bold but airy, brand-coloured underline on hover/active */
.main-header .nav-link {
    color: var(--ink-primary);
    font-weight: 600;
    font-size: .92rem;
    position: relative;
    padding: .55rem .9rem;
    margin: 0 .15rem;
    border-radius: var(--r-sm);
    transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.main-header .nav-link::after {
    content: ""; position: absolute; left: 50%; bottom: .15rem;
    width: 0; height: 2px;
    background: var(--brand-red);
    transition: width var(--dur-2) var(--ease), left var(--dur-2) var(--ease);
    border-radius: 2px;
}
.main-header .nav-link:hover {
    color: var(--brand-navy);
    background: var(--navy-50);
}
.main-header .nav-item.active > .nav-link {
    color: var(--brand-navy);
    background: var(--navy-50);
}
.main-header .nav-link:hover::after,
.main-header .nav-item.active > .nav-link::after { width: 60%; left: 20%; }

/* The pill-style "Give now" sits in the header-btn slot - nav also has a
   highlighted-menu variant for mobile only (the blade now uses d-lg-none). */
.main-header .highlighted-menu .nav-link {
    background: var(--brand-red);
    color: #fff !important;
    border-radius: var(--r-pill);
    padding: .5rem 1.15rem;
    margin-left: .35rem;
}
.main-header .highlighted-menu .nav-link::after { display: none; }
.main-header .highlighted-menu .nav-link:hover { background: var(--red-700); color: #fff !important; }

/* ── Submenu dropdowns - logo-coloured: white card, navy text, red rings ──
   Carries the official RCCG palette across every state:
   - white surface (dove background)
   - navy text + hover (Agape / divine love)
   - red top accent + active indicator (blood of Jesus rings)
   - green dot on the current page (fruitfulness ring)                   */

.main-header .nav-item.submenu { position: relative; }
.main-header .nav-item.submenu > .nav-link::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    margin-left: .4rem; vertical-align: middle;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: .55;
    transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.main-header .nav-item.submenu:hover > .nav-link,
.main-header .nav-item.submenu:focus-within > .nav-link { color: var(--brand-red); }
.main-header .nav-item.submenu:hover > .nav-link::before,
.main-header .nav-item.submenu:focus-within > .nav-link::before {
    transform: translateY(0) rotate(225deg);
    opacity: 1;
}

.main-header .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 250px;
    background: #fff;
    list-style: none;
    margin: 0;
    padding: .5rem;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--brand-red);   /* logo's outer ring echo */
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity var(--dur-1) var(--ease),
        transform var(--dur-1) var(--ease),
        visibility 0s linear var(--dur-1);
    z-index: 100;
}
.main-header .nav-item.submenu:hover > .sub-menu,
.main-header .nav-item.submenu:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition-delay: 0s;
}
/* Bridge the gap between menu item and dropdown so hover doesn't drop on the way down */
.main-header .nav-item.submenu > .sub-menu::before {
    content: ""; position: absolute;
    top: -10px; left: 0; right: 0; height: 10px;
}

.main-header .sub-menu .nav-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .85rem !important;
    margin: 0 !important;
    font-size: .92rem;
    border-radius: var(--r-sm);
    color: var(--ink-primary);
    border-left: 3px solid transparent;   /* placeholder to prevent jump on hover */
    transition: background-color var(--dur-1) var(--ease),
                color var(--dur-1) var(--ease),
                border-color var(--dur-1) var(--ease),
                padding var(--dur-1) var(--ease);
}
.main-header .sub-menu .nav-link::after { display: none; }
.main-header .sub-menu .nav-link:hover,
.main-header .sub-menu .nav-link:focus-visible {
    background: var(--navy-50);
    color: var(--brand-navy);
    border-left-color: var(--brand-red);   /* red ring indicator */
    padding-left: 1.1rem !important;
}
/* Active page within a dropdown - green dot mirrors logo's text-ring colour */
.main-header .sub-menu .nav-link[aria-current="page"] {
    color: var(--brand-navy);
    font-weight: 700;
    background: var(--navy-50);
    border-left-color: var(--brand-red);
}
.main-header .sub-menu .nav-link[aria-current="page"]::after {
    display: inline-block !important;
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-green);
    box-shadow: 0 0 0 2px rgba(2, 138, 44, .18);
    margin-left: .5rem;
}
.main-header .nav-item.submenu.active > .nav-link {
    color: var(--brand-navy);
    background: var(--navy-50);
}

/* ── Mobile (SlickNav) - same logo palette, vertical layout ────────────── */
.slicknav_nav .submenu > a::after { display: none; }
.slicknav_nav .submenu > a::before { display: none; }   /* hide our chevron pseudo */

.slicknav_nav .sub-menu {
    margin: .25rem 0 .5rem;
    padding: 0 0 0 .5rem;
    list-style: none;
    border-left: 2px solid var(--brand-red);   /* red ring echoes the logo */
    margin-left: 1rem;
}
.slicknav_nav .sub-menu .nav-link {
    font-weight: 500;
    color: rgba(255, 255, 255, .82) !important;
    padding: .85rem 1rem !important;     /* 44px+ touch target */
    border-radius: var(--r-sm);
    transition: background var(--dur-1) var(--ease);
}
.slicknav_nav .sub-menu .nav-link:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}
.slicknav_nav .sub-menu .nav-link[aria-current="page"] {
    color: #fff !important;
    background: var(--brand-red) !important;
    font-weight: 700;
}
/* Make slicknav arrow open chevron use logo red */
.slicknav_nav .slicknav_arrow { color: var(--brand-red) !important; font-size: .9em; }
/* Larger tap targets at the SlickNav top button */
.slicknav_btn { padding: .8rem 1rem !important; min-height: 44px; }

/* Show the right-side header pill on mobile too (compact) */
@media (max-width: 991.98px) {
    .main-header .header-btn { display: none !important; }
}

/* Header button (right-side CTA) - aligns with our btn-default tokens */
.main-header .header-btn .btn-default {
    padding: .55rem 1.4rem !important;
    font-size: .9rem;
}

/* ── Mobile nav (SlickNav plugin) ─────────────────────────────────────── */
.slicknav_menu {
    background: var(--brand-navy);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-md);
    padding: .5rem .75rem;
}
.slicknav_btn { background: transparent !important; }
.slicknav_btn .slicknav_icon-bar { background: #fff !important; }
.slicknav_nav { color: #fff; padding: .5rem 0; }
.slicknav_nav a {
    color: #fff !important;
    padding: .85rem 1rem !important;
    font-weight: 600;
    border-radius: var(--r-sm);
    margin: 2px 0;
    transition: background var(--dur-1) var(--ease);
}
.slicknav_nav a:hover,
.slicknav_nav .slicknav_row:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
.slicknav_nav .slicknav_arrow { color: rgba(255, 255, 255, .65) !important; }
.slicknav_nav .highlighted-menu a {
    background: var(--brand-red);
    margin: 6px 0;
}
.slicknav_nav .highlighted-menu a:hover { background: var(--red-700) !important; }

/* ── Hero - real congregation photos, simple gradient overlay ──────────── */
.hero-content { position: relative; z-index: 2; }
.hero-content h1, .hero-content p { color: #fff; }
.hero-content h3 {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .32);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .85rem;
    display: inline-block;
    padding: .4rem 1rem;
    border-radius: var(--r-pill);
}
.hero-content h1 {
    text-shadow: 0 4px 24px rgba(0, 0, 0, .45);
    letter-spacing: -.01em;
}
.hero-content p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

/* WOW.js fade-ins flash on every Swiper loop, which looks broken because
   slides auto-advance every 4s. Force them visible inside the hero so each
   slide reads instantly. */
.hero .wow,
.hero .text-anime-style-2 { visibility: visible !important; opacity: 1 !important; animation: none !important; }

/* Photo + single gradient overlay. No multiply blend, no Ken-Burns - those
   accumulate state across Swiper's looped clones and look choppy. */
.hero-slider-image {
    position: absolute; inset: 0;
    overflow: hidden;
    background: var(--brand-navy);
}
.hero-slider-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1);   /* explicit reset for any leftover transform on loop */
}
.hero-slider-image::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(105deg,
        rgba(12, 6, 53, .80) 0%,
        rgba(24, 12, 98, .55) 40%,
        rgba(24, 12, 98, .15) 75%,
        transparent 100%);
    pointer-events: none;
}

/* Pagination dots - brand red, growing pill on active */
.hero-slider-layout .hero-pagination {
    bottom: 28px;
    display: flex; justify-content: center; align-items: center;
    width: 100%;
}
.hero-slider-layout .hero-pagination .swiper-pagination-bullet {
    width: 10px; height: 10px;
    background: rgba(255, 255, 255, .55);
    opacity: 1;
    margin: 0 5px;
    transition: width var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active {
    width: 30px; border-radius: 6px;
    background: var(--brand-red);
}

/* Down-arrow - simple ring, no blur (avoids stacking-context confusion) */
.down-arrow a {
    border-color: rgba(255, 255, 255, .75);
    background: transparent;
}
.down-arrow a:hover { border-color: var(--brand-red); }
.down-arrow a i     { color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
   Cinematic split-stage hero (home page)
   - Asymmetric grid: typography panel left, image deck right
   - Slides cross-fade with a clip-path curtain wipe + slow Ken Burns
   - Word-by-word headline reveal staged with the slide change
   - Bottom-left vertical slide nav doubles as an autoplay progress bar
   ────────────────────────────────────────────────────────────────────────── */

/* Reset base theme .hero rules (padding/margin/background image/::before tint)
   that would otherwise break the split-stage layout. */
.hero.hero-cinematic {
    padding: 0;
    margin-top: 0;
    background: var(--brand-navy);
}
.hero.hero-cinematic::before { content: none; }

.hero-cinematic {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background: var(--brand-navy);
    display: grid;
    /* Explicit single row so the stage column stretches to the full
       container height — without this the row sizes to the panel's
       intrinsic content and images render at less than full height. */
    grid-template-columns: minmax(420px, 38%) 1fr;
    grid-template-rows: 1fr;
    color: #fff;
}

/* Image deck ----------------------------------------------------------- */
.hero-stage {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
}
.hero-stage-slide {
    position: absolute; inset: 0;
    margin: 0; padding: 0;
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1);
    will-change: clip-path;
}
.hero-stage-slide.is-active {
    clip-path: inset(0 0 0 0);
    z-index: 2;
}
.hero-stage-slide img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    /* Override the global `img { height: auto }` safety rule lower in this
       file — the stage image must always fill its figure for the cover crop
       and Ken-Burns transform to work. */
    max-width: none;
    transform: scale(1.08);
    transition: transform 8s ease-out;
}
.hero-stage-slide.is-active img { transform: scale(1); }

/* Soft left-edge bleed so the image dissolves into the panel */
.hero-stage-veil {
    position: absolute; inset: 0; z-index: 5;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--brand-navy) 0%, rgba(12, 6, 53, .35) 14%, transparent 28%),
        linear-gradient(180deg, transparent 60%, rgba(12, 6, 53, .55) 100%);
}

/* Typography panel ----------------------------------------------------- */
.hero-panel {
    grid-column: 1;
    position: relative; z-index: 3;
    display: flex; flex-direction: column;
    gap: 2rem;
    padding: 6.5rem 3rem 2.5rem;
    background: linear-gradient(180deg, rgba(12, 6, 53, .96) 0%, rgba(12, 6, 53, .9) 100%);
}

.hero-panel-top {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.hero-index { display: inline-flex; align-items: baseline; gap: .35rem; font-variant-numeric: tabular-nums; }
.hero-index-cur   { font-size: 1.75rem; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.hero-index-sep   { color: rgba(255, 255, 255, .3); font-size: 1.2rem; }
.hero-index-total { color: rgba(255, 255, 255, .55); font-size: .95rem; font-weight: 500; }
.hero-eyebrow {
    margin: 0;
    font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
    text-align: right;
}

/* Stacked copy slides — only one is visible at a time */
.hero-panel-middle {
    position: relative; flex: 1;
    display: flex; align-items: center;
    min-height: 22rem;
}
.hero-copy {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0; pointer-events: none;
    transform: translateY(8px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hero-copy.is-active {
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
    transition-delay: .3s;
}
.hero-copy-kicker {
    margin: 0 0 1.1rem;
    font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
    color: var(--brand-red);
    font-weight: 600;
}
.hero-copy-title {
    margin: 0 0 1.4rem;
    font-size: clamp(2.4rem, 4.4vw, 4rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}
/* Word-by-word reveal: outer wrapper masks, inner span slides up */
.hero-word {
    display: inline-block;
    overflow: hidden; vertical-align: top;
    margin-right: .25em;
    padding-bottom: .08em;  /* keep descenders from being clipped */
}
.hero-word > span {
    display: inline-block;
    transform: translateY(110%);
    transition: transform .8s cubic-bezier(.65, 0, .18, 1);
}
.hero-copy.is-active .hero-word > span { transform: translateY(0); }
.hero-copy.is-active .hero-word:nth-child(1) > span { transition-delay: .40s; }
.hero-copy.is-active .hero-word:nth-child(2) > span { transition-delay: .47s; }
.hero-copy.is-active .hero-word:nth-child(3) > span { transition-delay: .54s; }
.hero-copy.is-active .hero-word:nth-child(4) > span { transition-delay: .61s; }
.hero-copy.is-active .hero-word:nth-child(5) > span { transition-delay: .68s; }
.hero-copy.is-active .hero-word:nth-child(6) > span { transition-delay: .75s; }
.hero-copy.is-active .hero-word:nth-child(7) > span { transition-delay: .82s; }
.hero-copy.is-active .hero-word:nth-child(n+8) > span { transition-delay: .89s; }

.hero-copy-lede {
    margin: 0 0 2rem;
    font-size: 1.02rem; line-height: 1.6;
    color: rgba(255, 255, 255, .78);
    max-width: 30rem;
}

.hero-copy-cta { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.hero-btn-primary {
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .85rem 1.5rem .85rem 1.7rem;
    background: var(--brand-red); color: #fff;
    border-radius: var(--r-pill);
    font-weight: 600; letter-spacing: .01em;
    text-decoration: none;
    transition: transform .25s var(--ease), background .25s var(--ease), gap .25s var(--ease);
}
.hero-btn-primary:hover {
    background: var(--red-700);
    transform: translateY(-2px);
    gap: .9rem;
    color: #fff;
}
.hero-btn-primary i { font-size: .85em; transition: transform .25s var(--ease); }
.hero-btn-primary:hover i { transform: translateX(2px); }

.hero-btn-link {
    display: inline-flex; align-items: center; gap: .5rem;
    color: #fff; text-decoration: none;
    font-weight: 500; letter-spacing: .01em;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding: .15rem 0;
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.hero-btn-link:hover { border-color: var(--brand-red); color: #fff; }

/* Vertical slide nav (also acts as autoplay progress) */
.hero-panel-nav {
    display: flex; flex-direction: column;
    gap: .8rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero-nav-item {
    background: none; border: 0; padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: rgba(255, 255, 255, .5);
    display: grid;
    grid-template-columns: 2.4rem 1fr 3rem;
    align-items: center;
    gap: 1rem;
    transition: color .3s var(--ease);
}
.hero-nav-item-num   { font-size: .72rem; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.hero-nav-item-label { font-size: .98rem; font-weight: 500; }
.hero-nav-item-bar   {
    position: relative; display: block;
    height: 1px; background: rgba(255, 255, 255, .18);
    overflow: hidden;
}
.hero-nav-item-bar-fill {
    position: absolute; inset: 0 auto 0 0;
    width: 0; background: var(--brand-red);
    transition: width .25s var(--ease);
}
.hero-nav-item:hover                            { color: rgba(255, 255, 255, .9); }
.hero-nav-item:hover .hero-nav-item-bar-fill    { width: 35%; }
.hero-nav-item.is-active                        { color: #fff; }
.hero-nav-item.is-active .hero-nav-item-bar-fill {
    width: 100%;
    transition: width 6s linear;  /* mirror autoplay delay */
}

/* Bottom-right utility cluster ---------------------------------------- */
.hero-meta {
    position: absolute; right: 2.5rem; bottom: 2rem;
    z-index: 4;
    display: flex; align-items: center; gap: 1.4rem;
    color: #fff;
}
.hero-service-pill {
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .5rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: .82rem;
}
.hero-service-pill-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, .18);
    animation: heroPillPulse 2s ease-in-out infinite;
}
@keyframes heroPillPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(74, 222, 128, .18); }
    50%      { box-shadow: 0 0 0 8px rgba(74, 222, 128, .04); }
}
.hero-service-pill-label { color: rgba(255, 255, 255, .65); }
.hero-service-pill-time  { font-weight: 600; }

/* Tablet ↓ ------------------------------------------------------------- */
@media (max-width: 1199px) {
    .hero-cinematic { grid-template-columns: minmax(380px, 44%) 1fr; }
    .hero-panel { padding: 6rem 2rem 2rem; }
    .hero-meta  { right: 1.75rem; }
}

/* Mobile ↓: stack image above panel ----------------------------------- */
@media (max-width: 991px) {
    .hero-cinematic {
        grid-template-columns: 1fr;
        grid-template-rows: 50vh auto;
        height: auto;
        min-height: auto;
        overflow: visible;
    }
    .hero-stage  { grid-column: 1; grid-row: 1; }
    .hero-panel  { grid-column: 1; grid-row: 2; padding: 2.5rem 1.5rem 5.5rem; gap: 1.75rem; }
    .hero-stage-veil {
        background: linear-gradient(180deg, transparent 55%, rgba(12, 6, 53, .85) 95%, var(--brand-navy) 100%);
    }
    .hero-panel-middle    { min-height: auto; }
    .hero-copy            { position: relative; }
    .hero-copy:not(.is-active) { display: none; }
    .hero-copy-title      { font-size: clamp(2rem, 7vw, 2.8rem); }
    .hero-copy-lede       { font-size: .98rem; }
    .hero-meta            { right: 1.25rem; bottom: 1.25rem; gap: 1rem; }
    .hero-service-pill-label { display: none; }
}

/* Honor reduced-motion preference ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero-stage-slide,
    .hero-stage-slide img,
    .hero-copy,
    .hero-word > span,
    .hero-nav-item-bar-fill { transition-duration: .01ms !important; }
    .hero-stage-slide img   { transform: none !important; }
    .hero-service-pill-dot  { animation: none !important; }
}

/* ── Cards (raised, brand-tinted lift) ─────────────────────────────────── */
.card-rccg,
.worship-item, .highlighted-worship-item,
.sermon-item, .ministry-item, .blog-item, .event-item, .post-item {
    background: var(--surface-card);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition:
        transform var(--dur-2) var(--ease),
        box-shadow var(--dur-2) var(--ease),
        border-color var(--dur-2) var(--ease);
}
.card-rccg:hover,
.worship-item:hover, .highlighted-worship-item:hover,
.sermon-item:hover, .ministry-item:hover, .blog-item:hover, .event-item:hover, .post-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--navy-200);
}

/* ── Footer - deep navy, green accent (logo's text-ring colour) ────────── */
.main-footer {
    background:
        radial-gradient(circle at 18% 0%, rgba(60, 43, 173, .35), transparent 55%),
        linear-gradient(180deg, var(--navy-950) 0%, var(--brand-navy) 100%);
    color: rgba(255, 255, 255, .82);
    position: relative;
}
.main-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
}
.main-footer h3 {
    color: #fff;
    font-size: .95rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-left: 3px solid var(--brand-green);
    padding-left: .65rem;
}
.main-footer a       { color: rgba(255, 255, 255, .78); transition: color var(--dur-1) var(--ease); }
.main-footer a:hover,
.main-footer a:focus-visible { color: #fff; text-decoration: underline; text-decoration-color: var(--brand-red); text-underline-offset: 4px; }

.footer-social-links a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
    color: #fff;
    transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.footer-social-links a:hover,
.footer-social-links a:focus-visible {
    background: var(--brand-red);
    transform: translateY(-3px);
    text-decoration: none;
}

/* ── CTA strips ─────────────────────────────────────────────────────────── */
.donate-now,
.subscribe-newsletter {
    background: linear-gradient(135deg, var(--navy-950) 0%, var(--brand-navy) 60%, var(--brand-red) 140%);
    color: #fff;
    border-radius: var(--r-lg);
}
.donate-now h2, .subscribe-newsletter h2 { color: #fff; }
.donate-now h3, .subscribe-newsletter h3 {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .25);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline-strong);
    padding: .85rem 1rem;
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
    color: var(--ink-primary);
    background: #fff;
}
.form-control::placeholder { color: var(--ink-muted); }
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-navy);
    box-shadow: var(--ring-focus);
    outline: none;
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--brand-red);
    background-image: none;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: var(--ring-focus-danger); }
.invalid-feedback { color: var(--danger-fg); }
.invalid-feedback::before { content: "\26A0  "; }   /* warning glyph - never colour-only */

/* ── Status alerts - pair colour with icon (color-blind safe) ──────────── */
.alert { border-radius: var(--r-md); border: 0; padding: 1rem 1.15rem; }
.alert.brand-bg-soft { background: var(--info-bg); color: var(--info-fg); }
.alert-success { background: var(--success-bg) !important; color: var(--success-fg) !important; }
.alert-danger  { background: var(--danger-bg)  !important; color: var(--danger-fg)  !important; }
.alert-warning { background: var(--warning-bg) !important; color: var(--warning-fg) !important; }

/* Enforce icon-leading on alerts so meaning never depends on hue alone */
.alert > i:first-child,
.alert > svg:first-child { margin-right: .5rem; }

/* ── Pagination (Laravel paginator markup) ─────────────────────────────── */
.pagination { gap: 6px; }
.pagination .page-item .page-link {
    color: var(--brand-navy);
    border: 1px solid var(--hairline-strong);
    border-radius: 12px;
    padding: .55rem .9rem;
    font-weight: 600;
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--dur-1) var(--ease);
}
.pagination .page-item.active .page-link {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.pagination .page-item .page-link:hover { transform: translateY(-1px); border-color: var(--brand-navy); }
.pagination .page-item.disabled .page-link { color: var(--ink-muted); }

/* ── Scrolling tickers - unified logo palette ──────────────────────────────
   Outer section + inner box both navy (logo's central field).
   White text (logo's dove + ring background).
   Icon glyphs tinted red (logo's outer rings).
   Thin red top + bottom hairlines tie it to the logo's red ring stack. */
.our-scrolling-ticker,
.service-ticker {
    background: var(--brand-navy);
    border-top: 2px solid var(--brand-red);
    border-bottom: 2px solid var(--brand-red);
    padding: 26px 0;
}
.scrolling-ticker-box { background: transparent; color: #fff; }
.scrolling-ticker-box span { color: #fff; letter-spacing: .02em; }

/* SVG glyphs in the ticker - filter approximates RCCG red (#d61812).
   Computed from #fff -> #d61812 via the standard hue-rotate matrix dance. */
.scrolling-ticker-box img,
.our-scrolling-ticker .scrolling-content span img,
.service-ticker .scrolling-content span img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(4844%) hue-rotate(355deg) brightness(94%) contrast(96%);
}

/* ── Preloader - white card, RCCG logo, red rotating ring ──────────────── */
.preloader {
    background-color: #fff !important;
}
.preloader .loading-container,
.preloader .loading {
    height: 140px; width: 140px;
}
.preloader .loading {
    border: 3px solid transparent;
    border-color: var(--brand-red) transparent var(--brand-red) transparent;
    animation: rccgPreloaderSpin 1.4s linear infinite;
}
.preloader #loading-icon { max-width: 90px; }
.preloader #loading-icon img {
    width: 100%; height: auto;
    animation: rccgPreloaderPulse 2.2s ease-in-out infinite;
}
@keyframes rccgPreloaderSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes rccgPreloaderPulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%      { transform: scale(0.96); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
    .preloader .loading,
    .preloader #loading-icon img { animation: none !important; }
}

/* ── Service-times row ("Worship with us" / "Join us at …") ────────────
   The base theme clamps `.join-worship .section-title` to max-width: 450px,
   which crops longer church names ("RCCG Bethel Assembly") into uneven
   wraps that visually drift left of the eyebrow above. Restore the standard
   720px clamp used elsewhere so both lines centre on the same axis. */
.join-worship .section-title {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* The eyebrow h3 carries `padding-left: 25px` for its leaf-icon ::before,
   which shifts its visible text ~12px right of the box centre. Without an
   equal right-pad the h2 below sits at true centre and reads as drifting
   left. Balance the eyebrow so both lines share the same optical axis. */
.join-worship .section-title h3 { padding-right: 25px; }

/* ── Page header (inner-page hero) ─────────────────────────────────────── */
.page-header {
    background:
        radial-gradient(circle at 20% 25%, rgba(60, 43, 173, .35), transparent 55%),
        linear-gradient(135deg, var(--navy-950) 0%, var(--brand-navy) 70%);
    color: #fff;
    padding: 96px 0 64px;
    position: relative;
}
.page-header h1 { color: #fff; }
.page-header .breadcrumb {
    --bs-breadcrumb-divider-color:  rgba(255, 255, 255, .55);
    --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .9);
    background: transparent; padding: 0; margin: .75rem 0 0;
}
.page-header .breadcrumb a { color: rgba(255, 255, 255, .85); }
.page-header .breadcrumb a:hover { color: #fff; }

/* ── Long-form prose (Page CMS, sermon descriptions) ───────────────────── */
.card-rccg p, .card-rccg li { color: var(--ink-secondary); }
.card-rccg h2, .card-rccg h3, .card-rccg h4 { color: var(--brand-navy); }
.card-rccg a { color: var(--brand-red); text-decoration: underline; text-underline-offset: 3px; }
.card-rccg a:hover { color: var(--red-700); }

/* Hyphenate long titles to prevent overflow on mobile */
h1, h2 { overflow-wrap: anywhere; hyphens: auto; }

/* ── Edge cases ─────────────────────────────────────────────────────────── */

/* 1. Reduced motion: disable transitions, animations, parallax cursor */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .down-arrow a { animation: none !important; }
    .text-anime-style-2 { opacity: 1 !important; }
    .wow { visibility: visible !important; }
}

/* 2. Forced colours (Windows high-contrast) - keep focus + structure visible */
@media (forced-colors: active) {
    .btn-default,
    .btn-default.btn-outline,
    .btn-default.btn-highlighted {
        forced-color-adjust: none;
        border: 2px solid CanvasText;
        background: ButtonFace;
        color: ButtonText;
    }
    .card-rccg { border: 1px solid CanvasText; }
    :focus-visible { outline: 3px solid Highlight; }
}

/* 3. Higher contrast preference - bump weights and contrast */
@media (prefers-contrast: more) {
    body { color: #000; }
    .text-muted, .ink-muted { color: #2a2a2a !important; }
    .card-rccg { border-color: var(--brand-navy); }
    .btn-default { box-shadow: 0 0 0 1px #000, var(--shadow-sm); }
}

/* 4. Dark mode - keep cards crisp white (brand reads better) but darken bg */
@media (prefers-color-scheme: dark) {
    body { background: #0f0a26; color: #ece9f8; }
    .surface-page, .bg-page { background: #0f0a26; }
    .card-rccg { background: #1a1240; border-color: #2a1f5e; color: #ece9f8; }
    .card-rccg p, .card-rccg li { color: #c8c2dc; }
    .card-rccg h2, .card-rccg h3, .card-rccg h4 { color: #fff; }
    .form-control, .form-select { background: #1a1240; color: #ece9f8; border-color: #2a1f5e; }
    .form-control::placeholder { color: #8a82a8; }
    .pagination .page-item .page-link { background: #1a1240; color: #ece9f8; border-color: #2a1f5e; }
    .pagination .page-item.active .page-link { background: var(--brand-red); border-color: var(--brand-red); }
    .main-header { background: rgba(15, 10, 38, .82); border-bottom-color: #2a1f5e; }
    .main-header .nav-link { color: #ece9f8; }
}

/* 5. Print - flatten chrome, preserve content + logo */
@media print {
    .main-header,
    .main-footer,
    .scrolling-ticker-box,
    .down-arrow,
    .donate-now,
    .subscribe-newsletter,
    .preloader,
    .btn-default { display: none !important; }
    body { background: #fff; color: #000; }
    .hero, .page-header {
        background: #fff !important; color: #000;
        padding: 12pt 0; min-height: auto;
    }
    .hero-content h1, .page-header h1 { color: #000; text-shadow: none; }
    .card-rccg { border-color: #999; box-shadow: none; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }
}

/* 6. iOS tap highlight - kill the default grey flash */
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }

/* 7. Image safety - no dragging branded marks, no broken-img blowout */
img { max-width: 100%; height: auto; }
.main-header .navbar-brand img,
.footer-logo img { user-drag: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }