/* ============================================================================
 * lumen-palette.css — bring the FULL 25-color brand palette into the site.
 *
 * Previously the page leaned mostly on cream + gold + navy. This file
 * threads sage, sky, peach, rose, lavender, coral, cream-deep, gold-deep
 * throughout — as accent borders on cards, as section divider strips, as
 * background fades between sections, and as per-section "feel" tints.
 *
 * Added 2026-06-15 20:30 per Yousef.
 * Always applies as a layer on top; does NOT replace component colors.
 * ========================================================================== */

/* ─── A. Brand-rainbow gradient band — sits between major sections ─────────
 * Use as `<div class="lumen-palette-band"></div>` or auto-injected by
 * lumen-palette.js. Reads as a quiet ribbon of all the brand colors. */
.lumen-palette-band {
    width: 100vw;
    height: 8px;
    margin-left: calc(50% - 50vw);
    background: linear-gradient(90deg,
        var(--jp-cream-300, #FBF6E9),
        var(--jp-gold-300, #E8C067),
        var(--jp-peach-300, #FFBA92),
        var(--jp-coral, #F4A78B),
        var(--jp-rose-300, #F09BA1),
        #B7A6E0,
        var(--jp-sky-300, #BDD9F2),
        var(--jp-sage-300, #A8C385),
        var(--jp-gold-400, #D4A843),
        var(--jp-cream-300, #FBF6E9));
    background-size: 200% 100%;
    border-top: 1px solid rgba(13, 17, 23, 0.04);
    border-bottom: 1px solid rgba(13, 17, 23, 0.04);
    opacity: 0.88;
}
@media (prefers-reduced-motion: no-preference) {
    .lumen-palette-band { animation: lumen-rainbow-band-flow 22s linear infinite; }
    @keyframes lumen-rainbow-band-flow {
        from { background-position:    0% 0; }
        to   { background-position: -200% 0; }
    }
}
.lumen-palette-band--thin { height: 4px; }
.lumen-palette-band--fade { height: 56px; opacity: 0.35; }

/* ─── B. Per-section "feel" tints — wash big sections in a brand color ───── */
.section[data-tint="sage"]    { background: linear-gradient(180deg, var(--jp-cream-200, #FDFBF5), color-mix(in srgb, var(--jp-sage-100, #EAF1DD) 50%, var(--jp-cream-200, #FDFBF5))); }
.section[data-tint="sky"]     { background: linear-gradient(180deg, var(--jp-cream-200, #FDFBF5), color-mix(in srgb, var(--jp-sky-100, #EEF5FB) 50%, var(--jp-cream-200, #FDFBF5))); }
.section[data-tint="peach"]   { background: linear-gradient(180deg, var(--jp-cream-200, #FDFBF5), color-mix(in srgb, var(--jp-peach-100, #FFEDDD) 50%, var(--jp-cream-200, #FDFBF5))); }
.section[data-tint="rose"]    { background: linear-gradient(180deg, var(--jp-cream-200, #FDFBF5), color-mix(in srgb, var(--jp-rose-100, #FBE5E7) 50%, var(--jp-cream-200, #FDFBF5))); }
.section[data-tint="lav"]     { background: linear-gradient(180deg, var(--jp-cream-200, #FDFBF5), color-mix(in srgb, var(--jp-lav-100, #EFEAF7) 50%, var(--jp-cream-200, #FDFBF5))); }
.section[data-tint="gold"]    { background: linear-gradient(180deg, var(--jp-cream-200, #FDFBF5), color-mix(in srgb, var(--jp-gold-100, #FFF6DC) 60%, var(--jp-cream-200, #FDFBF5))); }
.section[data-tint="cream"]   { background: linear-gradient(180deg, var(--jp-cream-100, #FFFEFB), var(--jp-cream-400, #F7EFD6)); }

/* ─── C. Episode/hymn cards — cycle through brand colors as accent ──────── */
.media-card,
.foundations__card,
.episode-card,
.hymn-card {
    position: relative;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 280ms ease;
}
.media-card::before,
.foundations__card::before,
.episode-card::before,
.hymn-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 4px 4px 0 0;
    background: var(--card-accent, var(--gold-deep, #b9892f));
}
.media-card:nth-child(8n+1) { --card-accent: var(--jp-gold-400, #D4A843); }
.media-card:nth-child(8n+2) { --card-accent: var(--jp-sage-400, #87A862); }
.media-card:nth-child(8n+3) { --card-accent: var(--jp-sky-400, #92BFE6); }
.media-card:nth-child(8n+4) { --card-accent: var(--jp-peach-300, #FFBA92); }
.media-card:nth-child(8n+5) { --card-accent: var(--jp-rose-400, #DB7A82); }
.media-card:nth-child(8n+6) { --card-accent: #8E7AC8; }
.media-card:nth-child(8n+7) { --card-accent: var(--jp-coral, #F4A78B); }
.media-card:nth-child(8n+8) { --card-accent: var(--jp-gold-300, #E8C067); }

/* Hover lift */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .media-card:hover,
    .foundations__card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 38px -14px var(--card-accent, rgba(212, 168, 67, 0.45));
    }
}

/* ─── D. Color-cycle the verse marquee dingbat ──────────────────────────── */
.lumen-marquee-band--top .lumen-marquee-band__track > span:nth-child(8n+1)::before { color: var(--jp-gold-400, #D4A843) !important; }
.lumen-marquee-band--top .lumen-marquee-band__track > span:nth-child(8n+2)::before { color: var(--jp-sage-300, #A8C385) !important; }
.lumen-marquee-band--top .lumen-marquee-band__track > span:nth-child(8n+3)::before { color: var(--jp-sky-300, #BDD9F2) !important; }
.lumen-marquee-band--top .lumen-marquee-band__track > span:nth-child(8n+4)::before { color: var(--jp-peach-300, #FFBA92) !important; }
.lumen-marquee-band--top .lumen-marquee-band__track > span:nth-child(8n+5)::before { color: var(--jp-rose-300, #F09BA1) !important; }
.lumen-marquee-band--top .lumen-marquee-band__track > span:nth-child(8n+6)::before { color: #B7A6E0 !important; }
.lumen-marquee-band--top .lumen-marquee-band__track > span:nth-child(8n+7)::before { color: var(--jp-coral, #F4A78B) !important; }
.lumen-marquee-band--top .lumen-marquee-band__track > span:nth-child(8n+8)::before { color: var(--jp-cream-400, #F7EFD6) !important; }

/* ─── E. Footer column titles — each a different brand color ────────────── */
.footer-col:nth-child(1) h4 { color: var(--jp-gold-400, #D4A843); }
.footer-col:nth-child(2) h4 { color: var(--jp-sage-400, #87A862); }
.footer-col:nth-child(3) h4 { color: var(--jp-sky-400, #92BFE6); }
.footer-col:nth-child(4) h4 { color: var(--jp-rose-400, #DB7A82); }

/* 2026-06-15 20:51 — fix invisible-text issue Yousef flagged: footer
 * paragraph (the "A learning home for Christian families…" copy) was
 * cream-on-cream because joy-bright.css repainted the footer in peach
 * but the paragraph color stayed light. Force ink black for legibility. */
.site-footer .footer-col p,
.site-footer p,
.site-footer .footer-mark__name { color: #0E1A26 !important; }
.site-footer a { color: #0E1A26 !important; text-decoration-color: var(--jp-gold-400, #D4A843); }
.site-footer a:hover { color: var(--gold-deep, #b9892f) !important; }
.disclaimer-strip p { color: var(--jp-rose-400, #DB7A82) !important; font-weight: 600; }
.disclaimer-strip { background: var(--jp-cream-200, #FDFBF5) !important; }

/* ─── F. Section dividers — cycle accent colors as a strip ──────────────── */
.section-divider__rule,
hr.lumen {
    height: 2px;
    border: none;
    background: linear-gradient(90deg,
        var(--jp-cream-300, #FBF6E9) 0%,
        var(--jp-gold-400, #D4A843) 16%,
        var(--jp-sage-300, #A8C385) 32%,
        var(--jp-sky-300, #BDD9F2) 48%,
        var(--jp-peach-300, #FFBA92) 64%,
        var(--jp-rose-300, #F09BA1) 80%,
        #B7A6E0 100%);
    border-radius: 2px;
    margin: 3rem 0;
    opacity: 0.7;
}

/* ─── G. Brand chip — small color-coded labels (Hymn / Episode / Devotional) */
.lumen-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.lumen-chip--hymn      { background: rgba(212, 168, 67, 0.18); color: var(--gold-deep, #b9892f); }
.lumen-chip--episode   { background: rgba(135, 168, 98, 0.18); color: #6F8C50; }
.lumen-chip--devotional{ background: rgba(146, 191, 230, 0.22); color: #4477A0; }
.lumen-chip--prayer    { background: rgba(219, 122, 130, 0.18); color: #B7565E; }
.lumen-chip--reading   { background: rgba(255, 186, 146, 0.22); color: #B8703F; }
.lumen-chip--store     { background: rgba(142, 122, 200, 0.22); color: #5F4B9E; }

/* ─── H. Per-page accent variable — switch theme color by page ──────────── */
body[data-section="learn"]      { --page-accent: var(--jp-sky-400, #92BFE6); }
body[data-section="devotionals"]{ --page-accent: var(--jp-sage-400, #87A862); }
body[data-section="sanctuary"]  { --page-accent: var(--jp-lav-100, #EFEAF7); }
body[data-section="store"]      { --page-accent: var(--jp-peach-300, #FFBA92); }
body[data-section="safety"]     { --page-accent: var(--jp-rose-400, #DB7A82); }
body[data-section="year"]       { --page-accent: var(--jp-gold-400, #D4A843); }
body[data-section="path"]       { --page-accent: var(--jp-coral, #F4A78B); }
.use-page-accent { color: var(--page-accent, var(--gold-deep, #b9892f)) !important; }
.use-page-accent-bg { background: var(--page-accent, var(--gold-deep, #b9892f)) !important; }