/*
 * Festival themes — loaded only while a festival is active (see frontend/partials/festival/head).
 * Colours come from --fest-* variables set per festival in config/festival_themes.php.
 *
 * Scope is deliberately small so the PrayFullit brand stays intact:
 *   1. header top border + nav underline + footer top border take the festival gradient
 *   2. a dismissible festival banner below the header
 *   3. motif decorations inside that banner only
 * Animations run only with body.fest-fx and never under prefers-reduced-motion.
 */

/* ── 1. Accents on existing chrome ─────────────────────────────────────── */
body[data-festival] .pf-header { border-top-width: 4px; border-image: var(--fest-grad) 1; }
body[data-festival] .pf-header #navbarNav .nav-link::after { background: var(--fest-grad); }
body[data-festival] .pf-footer::before { height: 4px; background: var(--fest-grad); }

/* ── 2. Banner ─────────────────────────────────────────────────────────── */
.pf-fest-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--fest-banner-bg);
    color: var(--fest-banner-ink);
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.pf-fest-banner[hidden] { display: none; }
.pf-fest-banner__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 84px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 48px; /* room for the close button */
}
.pf-fest-banner__art { flex: 0 0 auto; width: 112px; height: 56px; display: flex; align-items: center; justify-content: center; }
.pf-fest-banner__art svg { width: 100%; height: 100%; overflow: visible; }
.pf-fest-banner__img { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 14px; object-fit: cover; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.pf-fest-banner__text { flex: 1 1 auto; min-width: 0; }
.pf-fest-banner__title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: .01em; color: inherit; }
.pf-fest-banner__greeting { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--fest-banner-muted); }
.pf-fest-banner__subtitle { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; opacity: .85; }
.pf-fest-banner__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--fest-cta-bg);
    color: var(--fest-cta-ink) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pf-fest-banner__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.pf-fest-banner__cta:focus-visible,
.pf-fest-banner__close:focus-visible { outline: 3px solid var(--fest-accent); outline-offset: 2px; }
.pf-fest-banner__close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    color: inherit;
    opacity: .75;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}
.pf-fest-banner__close:hover { opacity: 1; background: rgba(127, 127, 127, .18); }

/* Decorative layer: behind the text, never catches clicks */
.pf-fest-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pf-fest-decor span { position: absolute; display: block; }

/* Phones: one slim row (art | title + one-line greeting | CTA), close button on the right.
   The background lights/sparkles keep it festive, so the art drops out on small phones. */
@media (max-width: 767.98px) {
    .pf-fest-banner__inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "art text cta";
        align-items: center;
        gap: 10px;
        min-height: 0;
        padding-top: 12px;
        padding-bottom: 10px;
        padding-right: 40px;
    }
    .pf-fest-banner__art,
    .pf-fest-banner__img { grid-area: art; }
    .pf-fest-banner__art { width: 48px; height: 32px; }
    .pf-fest-banner__img { width: 36px; height: 36px; border-radius: 8px; }
    .pf-fest-banner__text { grid-area: text; }
    .pf-fest-banner__title,
    .pf-fest-banner__greeting { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pf-fest-banner__title { font-size: 14.5px; line-height: 1.3; }
    .pf-fest-banner__greeting { margin-top: 1px; font-size: 12px; line-height: 1.35; }
    .pf-fest-banner__subtitle { display: none; }
    .pf-fest-banner__cta { grid-area: cta; gap: 5px; padding: 6px 12px; font-size: 12px; box-shadow: 0 3px 10px rgba(0, 0, 0, .14); }
    .pf-fest-banner__cta .fa-solid { font-size: 10px; }
    .pf-fest-banner__close { right: 2px; width: 36px; height: 36px; font-size: 13px; }
    .pf-fest-banner:has(.pf-fest-decor--marigold) .pf-fest-banner__inner { padding-top: 18px; }
}
@media (max-width: 575.98px) {
    .pf-fest-banner__art,
    .pf-fest-banner__img { display: none; }
    .pf-fest-banner__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text cta"; }
}
@media (max-width: 399.98px) {
    .pf-fest-banner__inner { gap: 8px; }
    .pf-fest-banner__title { font-size: 14px; }
    .pf-fest-banner__cta { padding: 6px 10px; }
    .pf-fest-banner__cta .fa-solid { display: none; }
}

/* ── 3. Motifs ─────────────────────────────────────────────────────────── */

/* Diwali — string of lights along the top edge, twinkling sparkles, flickering diya flames */
.pf-fest-decor--diyas::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px;
    background: radial-gradient(circle at 50% 3px, #ffd970 0 2.5px, rgba(255, 217, 112, .35) 3.5px, transparent 6px) 0 0 / 28px 10px repeat-x;
}
.pf-fest-decor--diyas .pf-fest-spark { width: 4px; height: 4px; border-radius: 50%; background: #ffe7a3; box-shadow: 0 0 8px 2px rgba(255, 213, 102, .7); opacity: .55; }

/* Holi — soft colour clouds at the edges */
.pf-fest-decor--splash .pf-fest-blob { width: 180px; height: 180px; border-radius: 50%; filter: blur(28px); opacity: .45; }

/* Rakhi (spare motif) — a fine thread along the bottom edge */
.pf-fest-decor--rakhi::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
    background: repeating-linear-gradient(90deg, #be123c 0 10px, #f59e0b 10px 20px); opacity: .25;
}

/* Makar Sankranti — morning sun on the right */
.pf-fest-decor--kites::before {
    content: ''; position: absolute; right: 6%; top: -60px; width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 186, 116, .75) 0%, rgba(253, 186, 116, .25) 45%, rgba(253, 186, 116, 0) 70%);
}
.pf-fest-decor--kites .pf-fest-kite { width: 22px; height: 22px; opacity: .55; }

/* Navratri — bandhani-style border top and bottom */
.pf-fest-decor--navratri::before,
.pf-fest-decor--navratri::after {
    content: ''; position: absolute; left: 0; right: 0; height: 8px;
    background:
        radial-gradient(circle at 6px 4px, #fde047 0 1.6px, transparent 2px) 0 0 / 12px 8px repeat-x,
        linear-gradient(135deg, transparent 0 49%, rgba(253, 224, 71, .35) 50%, transparent 51%) 0 0 / 8px 8px repeat-x;
}
.pf-fest-decor--navratri::before { top: 0; }
.pf-fest-decor--navratri::after { bottom: 0; }

/* Durga Puja — lal paar (red border) with a gold dotted line */
.pf-fest-decor--alpana::before,
.pf-fest-decor--alpana::after {
    content: ''; position: absolute; left: 0; right: 0; height: 7px;
    background: radial-gradient(circle, #d4a017 0 1.5px, transparent 2px) 0 50% / 10px 7px repeat-x, #b91c1c;
}
.pf-fest-decor--alpana::before { top: 0; }
.pf-fest-decor--alpana::after { bottom: 0; }

/* Dussehra — royal gold edging */
.pf-fest-decor--royal::before {
    content: ''; position: absolute; inset: 5px; border: 1px solid rgba(251, 191, 36, .35); border-radius: 4px;
}
.pf-fest-decor--royal .pf-fest-spark { width: 3px; height: 3px; border-radius: 50%; background: #fde68a; opacity: .6; }

/* Janmashtami — faint peacock-feather eyes */
.pf-fest-decor--peacock .pf-fest-eye {
    width: 46px; height: 64px; border-radius: 50%; opacity: .2;
    background: radial-gradient(ellipse at 50% 55%, #1e3a8a 0 18%, #14b8a6 19% 34%, #facc15 35% 44%, transparent 46%);
}

/* Ganesh Chaturthi — marigold toran across the top */
.pf-fest-decor--marigold::before {
    content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 16px;
    background:
        radial-gradient(circle at 9px 8px, #f59e0b 0 6px, transparent 6.5px) 0 0 / 36px 16px repeat-x,
        radial-gradient(circle at 27px 8px, #ea580c 0 6px, transparent 6.5px) 0 0 / 36px 16px repeat-x;
    opacity: .9;
}
.pf-fest-banner:has(.pf-fest-decor--marigold) .pf-fest-banner__inner { padding-top: 22px; }

/* Stars (spare motif) / New Year confetti */
.pf-fest-decor--stars .pf-fest-spark { width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: .5; }
.pf-fest-decor--confetti .pf-fest-bit { width: 6px; height: 10px; border-radius: 1px; opacity: .4; }

/* Motif art colours that must follow the banner (light vs dark banners) */
.pf-fest-art-stroke { stroke: currentColor; }

/* ── Animations (opt-in, reduced-motion safe) ──────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    body.fest-fx .pf-fest-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: pf-fest-flicker 2.4s ease-in-out infinite; }
    body.fest-fx .pf-fest-flame:nth-of-type(2n) { animation-delay: -.8s; animation-duration: 2.9s; }
    body.fest-fx .pf-fest-spark { animation: pf-fest-twinkle 3.2s ease-in-out infinite; }
    body.fest-fx .pf-fest-kite { animation: pf-fest-bob 6s ease-in-out infinite; }
    body.fest-fx .pf-fest-blob { animation: pf-fest-drift 14s ease-in-out infinite alternate; }
    body.fest-fx .pf-fest-bit { animation: pf-fest-fall 9s linear infinite; }
}
@keyframes pf-fest-flicker {
    0%, 100% { transform: scale(1, 1); opacity: 1; }
    30% { transform: scale(.92, 1.08); opacity: .9; }
    60% { transform: scale(1.05, .95); opacity: 1; }
}
@keyframes pf-fest-twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .85; transform: scale(1.1); } }
@keyframes pf-fest-bob { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(6px, -6px) rotate(6deg); } }
@keyframes pf-fest-drift { from { transform: translate(0, 0); } to { transform: translate(24px, -12px); } }
@keyframes pf-fest-fall { from { transform: translateY(-20px) rotate(0); } to { transform: translateY(120px) rotate(360deg); } }

/* ── Admin preview pill ────────────────────────────────────────────────── */
.pf-fest-preview {
    position: fixed; left: 16px; bottom: 16px; z-index: 1080;
    display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
    padding: 8px 8px 8px 14px; border-radius: 999px;
    background: #1c1414; color: #fff; font: 500 13px/1.3 Inter, system-ui, sans-serif;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}
.pf-fest-preview a { color: #1c1414; background: #fff; border-radius: 999px; padding: 5px 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }