/* ============================================================================
 * lumen-sanctuary-everywhere.css — make every page feel like /sanctuary/.
 *
 * Yousef (2026-06-15 21:04): "I want to lay out all the pages and the
 * coloring of all the pages similar to this page" (referring to Sanctuary).
 *
 * Strategy: take the Sanctuary's defining visual signatures — the multi-tone
 * sunset sky in the hero, the sun glow, the radiating light rays, the soft
 * mountain silhouette, the contemplative typographic rhythm — and apply
 * them globally to every cinematic-hero and page-hero. Also calm the body
 * sections so they read like sanctuary stanzas.
 *
 * This file LOADS LAST so it wins specificity battles with older themes
 * without needing too many !important markers.
 * ========================================================================== */

/* ─── 1. Every hero gets the sanctuary sunset sky ────────────────────────── */
.cinematic-hero,
.page-hero,
.store-hero,
.rp-hero,
.sanctuary-hero {
    position: relative;
    min-height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    background: linear-gradient(180deg,
        #FFE5C8 0%,
        #FFD4B8 28%,
        #F8BDC3 58%,
        #DEEAF6 100%) !important;
}

/* The radiant sun */
.cinematic-hero::after,
.page-hero::after,
.store-hero::after,
.rp-hero::after {
    content: '';
    position: absolute;
    top: 22%;
    left: 50%;
    width: 240px; height: 240px;
    background: radial-gradient(circle at center,
        rgba(255, 246, 220, 1.0) 0%,
        rgba(244, 215, 122, 0.85) 30%,
        rgba(244, 167, 139, 0.45) 60%,
        rgba(244, 167, 139, 0) 100%);
    border-radius: 50%;
    transform: translateX(-50%);
    filter: blur(2px);
    pointer-events: none;
    z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
    .cinematic-hero::after,
    .page-hero::after,
    .store-hero::after,
    .rp-hero::after {
        animation: sanctuary-everywhere-sun 8s ease-in-out infinite;
    }
}
@keyframes sanctuary-everywhere-sun {
    0%, 100% { transform: translateX(-50%) scale(1);    opacity: 0.85; }
    50%      { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

/* Soft mountain silhouette + still water at the bottom of each hero. */
.cinematic-hero,
.page-hero,
.store-hero,
.rp-hero { position: relative; }
.cinematic-hero > .lumen-hero-scenery,
.page-hero > .lumen-hero-scenery,
.store-hero > .lumen-hero-scenery,
.rp-hero > .lumen-hero-scenery {
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 0;
}
/* JS injects .lumen-hero-scenery as a sibling on load (see lumen-sanctuary.js). */
.lumen-hero-scenery { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lumen-hero-scenery__rays {
    position: absolute; top: 0; left: 50%; width: 80vw; height: 100%;
    transform: translateX(-50%);
    background: conic-gradient(from -90deg at 50% 30%,
        transparent 0deg,
        rgba(255, 246, 220, 0.25) 12deg,
        transparent 24deg,
        transparent 36deg,
        rgba(255, 246, 220, 0.22) 48deg,
        transparent 60deg,
        transparent 72deg,
        rgba(255, 246, 220, 0.25) 84deg,
        transparent 96deg);
    mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
    .lumen-hero-scenery__rays { animation: sanctuary-everywhere-rays 60s linear infinite; }
}
@keyframes sanctuary-everywhere-rays {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(15deg); }
}
.lumen-hero-scenery__mountains {
    position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(178, 153, 110, 0.40) 100%),
        repeating-linear-gradient(135deg,
            transparent 0px,
            rgba(178, 153, 110, 0.15) 30px,
            transparent 60px);
    clip-path: polygon(0 60%, 12% 40%, 25% 55%, 38% 30%, 50% 50%, 62% 35%, 75% 50%, 88% 40%, 100% 55%, 100% 100%, 0 100%);
}
.lumen-hero-scenery__water {
    position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
    background: linear-gradient(180deg,
        rgba(189, 217, 242, 0.40) 0%,
        rgba(146, 191, 230, 0.55) 100%);
    filter: blur(1px);
}
html[data-theme="dark"] .lumen-hero-scenery__rays {
    background: conic-gradient(from -90deg at 50% 30%,
        transparent 0deg,
        rgba(244, 215, 122, 0.18) 12deg,
        transparent 24deg,
        transparent 36deg,
        rgba(244, 215, 122, 0.14) 48deg,
        transparent 60deg,
        transparent 72deg,
        rgba(244, 215, 122, 0.16) 84deg,
        transparent 96deg);
}
html[data-theme="dark"] .lumen-hero-scenery__mountains {
    background:
        linear-gradient(180deg, transparent 0%, rgba(20, 30, 55, 0.55) 100%),
        repeating-linear-gradient(135deg,
            transparent 0px,
            rgba(40, 50, 75, 0.30) 30px,
            transparent 60px);
}
html[data-theme="dark"] .lumen-hero-scenery__water {
    background: linear-gradient(180deg,
        rgba(20, 50, 90, 0.40) 0%,
        rgba(15, 35, 70, 0.65) 100%);
}

/* Suppress the grid pattern from Section 21 of luminous.css inside heroes —
 * the sanctuary background is warmer without it. */
.cinematic-hero::before,
.page-hero::before,
.store-hero::before,
.rp-hero::before {
    background-image: none !important;
    background: transparent !important;
}

/* ─── 2. Hero inner — centered contemplative column ────────────────────── */
.cinematic-hero__inner,
.page-hero__inner,
.store-hero__inner,
.rp-hero__inner {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: 38rem;
    padding: clamp(1.5rem, 4vw, 3rem) 1.25rem;
    margin: 0 auto;
}
.cinematic-hero__h1,
.page-hero__title,
.store-hero__h1,
.rp-hero__h1 {
    font-family: var(--serif, 'Cormorant Garamond', serif) !important;
    font-weight: 500 !important;
    font-size: clamp(2.4rem, 6vw, 4.4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.012em !important;
    color: #2a3441 !important;
    margin-bottom: 0.7em !important;
    text-shadow: 0 1px 2px rgba(255, 246, 220, 0.55);
}
.cinematic-hero__lede,
.page-hero__lede,
.store-hero__lede,
.rp-hero__lede {
    font-family: var(--serif, 'Cormorant Garamond', serif) !important;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
    line-height: 1.55 !important;
    color: #3a4757 !important;
    font-style: italic;
    max-width: 32em;
    margin-left: auto;
    margin-right: auto;
}
.cinematic-hero__kicker,
.page-hero__kicker,
.store-hero__kicker,
.rp-hero__kicker {
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: #B7565E !important;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

/* ─── 3. Section blocks — Sanctuary's calm cadence applied to every page ── */
main > section,
main > .section {
    padding: clamp(3rem, 7vw, 6rem) 1.25rem;
}
main > section[data-reveal] > *,
main > .section[data-reveal] > * {
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Section kicker pattern */
.lumen-section__kicker,
section h2 + p.kicker,
.section h2 + p.kicker {
    font-family: var(--sans);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    font-weight: 700;
    margin-bottom: 0.6rem;
    text-align: center;
}

/* H2 styling everywhere — match Sanctuary's quiet authority */
main h2 {
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-weight: 500;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.15;
    color: #2a3441;
    text-align: center;
    margin: 0 auto 0.7em;
    max-width: 26ch;
}

/* Verse / quote blocks — italic serif on cream */
main blockquote,
main .lumen-quote,
main p.verse,
main .sanctuary-prayer__line span {
    font-family: var(--serif, 'Cormorant Garamond', serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.55;
    color: #2a3441;
}

/* ─── 4. Calmer card surfaces (no harsh borders) ────────────────────────── */
.media-card,
.foundations__card,
.episode-card,
.hymn-card {
    background: var(--jp-cream-100, #FFFEFB);
    border: 1px solid rgba(178, 153, 110, 0.18);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 26px -14px rgba(178, 153, 110, 0.25);
}

/* ─── 5. Section dividers as gentle sunrise glows ──────────────────────── */
main > section + section,
main > .section + .section {
    border-top: 1px solid rgba(244, 215, 122, 0.22);
}

/* ─── 6. Page-bottom cross signature (like sanctuary-close) ────────────── */
.lumen-page-signoff {
    text-align: center;
    padding: 4rem 1.25rem 5rem;
    background: linear-gradient(180deg, transparent, rgba(255, 229, 200, 0.28) 60%, rgba(255, 229, 200, 0));
}
.lumen-page-signoff__cross {
    width: 56px; height: 56px;
    color: var(--gold-deep, #D4A843);
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 4px 12px rgba(212, 168, 67, 0.4));
}
.lumen-page-signoff__line {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.55;
    color: #2a3441;
    max-width: 36rem;
    margin: 0 auto 0.4em;
}
.lumen-page-signoff__ref {
    font-family: var(--sans);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep, #b9892f);
    font-weight: 700;
}

/* ─── 7. Dark-mode counterpart — DISABLED 2026-06-15 21:11 (Yousef) ─────── */
html.__dm_disabled[data-theme="dark"] .cinematic-hero,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .store-hero,
html[data-theme="dark"] .rp-hero,
html[data-theme="dark"] .sanctuary-hero {
    background: linear-gradient(180deg,
        #2A1830 0%,
        #2D2645 25%,
        #1B2845 65%,
        #0E1A26 100%) !important;
}
html[data-theme="dark"] .cinematic-hero::after,
html[data-theme="dark"] .page-hero::after,
html[data-theme="dark"] .store-hero::after,
html[data-theme="dark"] .rp-hero::after {
    background: radial-gradient(circle at center,
        rgba(244, 215, 122, 0.95) 0%,
        rgba(212, 168, 67, 0.6) 30%,
        rgba(212, 168, 67, 0) 100%);
}
html[data-theme="dark"] .cinematic-hero__h1,
html[data-theme="dark"] .page-hero__title,
html[data-theme="dark"] .store-hero__h1,
html[data-theme="dark"] .rp-hero__h1 { color: #F4D77A !important; text-shadow: none; }
html[data-theme="dark"] .cinematic-hero__lede,
html[data-theme="dark"] .page-hero__lede,
html[data-theme="dark"] .store-hero__lede,
html[data-theme="dark"] .rp-hero__lede { color: #F2E9C9 !important; }
html[data-theme="dark"] main h2,
html[data-theme="dark"] main blockquote,
html[data-theme="dark"] main p.verse { color: #F2E9C9; }

/* ─── 8. Mobile — gentle reductions ─────────────────────────────────────── */
@media (max-width: 720px) {
    .cinematic-hero,
    .page-hero,
    .store-hero,
    .rp-hero { min-height: 56vh; }
    .cinematic-hero::after,
    .page-hero::after,
    .store-hero::after,
    .rp-hero::after { width: 160px; height: 160px; top: 18%; }
}

/* Disable existing per-page hero photos that would conflict with the sky. */
.cinematic-hero__media,
.cinematic-hero__media img { display: none !important; }
.page-hero[style*="background-image"] { background-image: none !important; }