/* ============================================================================
 * lumen-rainbow-stripe.css — surgical restore of the 🌈 rainbow stripe ONLY.
 *
 * Yousef 2026-06-16 00:53 UTC — "بدنا نرجعوا بنفس الاماكن اللي كان فيها".
 *
 * This brings back ONLY the rainbow ribbon at page bottom + the footer cross
 * rainbow stroke + the hr.lumen rainbow divider — NOT the rainbow sunset
 * hero sky or section-h2 gradients (those were intentionally removed in the
 * white-reset and would re-clutter the clean look).
 *
 * Paired with lumen-25.js which injects the .lumen-signature-ribbon element
 * and the <defs id="lumen-footer-cross-grad"> at body end.
 * ========================================================================== */

/* ─── 1. Bottom-of-page signature ribbon (25-color flowing gradient) ───── */
.lumen-signature-ribbon {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: 10px;
    background: linear-gradient(90deg,
        #FFEDDD, /* peach-100 */
        #FFD4B8, /* peach-200 */
        #FFBA92, /* peach-300 */
        #F4A78B, /* coral */
        #FBE5E7, /* rose-100 */
        #F8BDC3, /* rose-200 */
        #F09BA1, /* rose-300 */
        #DB7A82, /* rose-400 */
        #EFEAF7, /* lav-100 */
        #D4C9E8, /* lav-200 */
        #B6A4D6, /* lav-300 */
        #EEF5FB, /* sky-100 */
        #DEEAF6, /* sky-200 */
        #BDD9F2, /* sky-300 */
        #92BFE6, /* sky-400 */
        #EAF1DD, /* sage-100 */
        #C8DCB0, /* sage-200 */
        #A8C385, /* sage-300 */
        #87A862, /* sage-400 */
        #DFF5E8, /* mint-100 */
        #B5E4CA, /* mint-200 */
        #FFF6DC, /* gold-100 */
        #F4D77A, /* gold-200 */
        #E8C067, /* gold-300 */
        #D4A843  /* gold-400 */);
    background-size: 200% 100%;
    opacity: 0.92;
    border: none;
}
@media (prefers-reduced-motion: no-preference) {
    .lumen-signature-ribbon { animation: lumen-rainbow-flow 32s linear infinite; }
    @keyframes lumen-rainbow-flow {
        from { background-position:    0% 0; }
        to   { background-position: -200% 0; }
    }
}

/* ─── 2. Footer cross — rainbow stroke (uses SVG defs from lumen-25.js) ── */
.footer-mark__icon svg g line,
.footer-mark__icon svg line {
    stroke: url(#lumen-footer-cross-grad);
}

/* ─── 3. <hr> dividers — soft 6-color rainbow band ─────────────────────── */
hr,
hr.lumen {
    border: none;
    height: 3px;
    background: linear-gradient(90deg,
        var(--jp-coral,    #F4A78B),
        var(--jp-rose-300, #F09BA1),
        var(--jp-lav-300,  #B6A4D6),
        var(--jp-sky-400,  #92BFE6),
        var(--jp-sage-400, #87A862),
        var(--jp-gold-400, #D4A843));
    background-size: 200% 100%;
    border-radius: 3px;
    margin: 3rem auto;
    max-width: 24rem;
    opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) {
    hr,
    hr.lumen { animation: lumen-rainbow-flow 18s linear infinite; }
}

/* ─── 4. Dark-mode safety — keep the ribbon vivid against dark bg ──────── */
html[data-theme="dark"] .lumen-signature-ribbon { opacity: 1; }
html[data-theme="dark"] hr,
html[data-theme="dark"] hr.lumen { opacity: 0.95; }