/* =====================================================================
   KH NEWS FESTIVAL SKINS  [KH-NEWS-FEST v1.0]
   FILE: assets/css/kh-news-fest.css
   ---------------------------------------------------------------------
   Active only while a festival skin is on: the loader sets
   data-khfest="<skin>" on <html>. Each skin defines three values:
     --khfest-bg    : the festival gradient
     --khfest-solid : one solid festival colour
     --khfest-ink   : text colour that reads on the gradient
   The "generic" skin receives its values from the loader, taken from
   the event's own colours in assets/festival_list.php.
   This file NEVER styles the header logo — festival colours must
   not touch it. With no skin active, nothing here applies.
   ===================================================================== */

/* ---------- SKIN PALETTES ---------- */
html[data-khfest="deepavali"]    { --khfest-bg: radial-gradient(circle, #ff512f 0%, #dd2476 100%); --khfest-solid: #dd2476; --khfest-ink: #ffd700; }
html[data-khfest="rajyotsava"]   { --khfest-bg: linear-gradient(to right, #f9d616, #e52d27); --khfest-solid: #e52d27; --khfest-ink: #ffffff; }
html[data-khfest="ugadi"]        { --khfest-bg: linear-gradient(to right, #56ab2f, #a8e063); --khfest-solid: #56ab2f; --khfest-ink: #ffffff; }
html[data-khfest="newyear"]      { --khfest-bg: linear-gradient(to right, #8e2de2, #4a00e0); --khfest-solid: #6a1fd0; --khfest-ink: #ffffff; }
html[data-khfest="sankranti"]    { --khfest-bg: linear-gradient(135deg, #ff512f 0%, #f09819 100%); --khfest-solid: #f09819; --khfest-ink: #ffffff; }
html[data-khfest="holi"]         { --khfest-bg: linear-gradient(45deg, #ff9a9e 0%, #a18cd1 100%); --khfest-solid: #d6336c; --khfest-ink: #ffffff; }
html[data-khfest="ganesha"]      { --khfest-bg: linear-gradient(to right, #f12711, #f5af19); --khfest-solid: #f12711; --khfest-ink: #ffffff; }
html[data-khfest="dussehra"]     { --khfest-bg: linear-gradient(to right, #ff512f, #f09819); --khfest-solid: #e64a19; --khfest-ink: #ffffff; }
html[data-khfest="independence"] { --khfest-bg: linear-gradient(90deg, #ff9933, #ffffff 50%, #138808 100%); --khfest-solid: #138808; --khfest-ink: #000080; }
html[data-khfest="republic"]     { --khfest-bg: linear-gradient(90deg, #ff9933, #ffffff 50%, #138808 100%); --khfest-solid: #ff9933; --khfest-ink: #000080; }
html[data-khfest="gandhi"]       { --khfest-bg: linear-gradient(to right, #bdc3c7, #2c3e50); --khfest-solid: #2c3e50; --khfest-ink: #ffffff; }
html[data-khfest="christmas"]    { --khfest-bg: linear-gradient(to right, #16a085, #f4d03f); --khfest-solid: #0b6e4f; --khfest-ink: #ffffff; }
html[data-khfest="eid"]          { --khfest-bg: linear-gradient(to right, #0f766e, #d4af37); --khfest-solid: #0f766e; --khfest-ink: #ffffff; }

/* ---------- SKIN APPLIED TO THE PAGE CHROME ---------- */
html[data-khfest] .nf-top-bar { background-color: var(--khfest-solid); }
html[data-khfest] .cat-header-bar {
    background-color: var(--khfest-solid);
    background-image: var(--khfest-bg);
}
html[data-khfest] .cat-title-text { color: var(--khfest-ink); }
html[data-khfest] .nf-live { background-color: var(--khfest-solid); }
html[data-khfest] .slide-badge { background-color: var(--khfest-solid); color: var(--khfest-ink); }
html[data-khfest] .cat-count-badge { background-color: var(--khfest-solid); color: var(--khfest-ink); }
html[data-khfest] .btn-danger {
    background-color: var(--khfest-solid);
    border-color: var(--khfest-solid);
}
html[data-khfest] .footer-dark-bottom {
    background-color: var(--khfest-solid);
    background-image: var(--khfest-bg);
    color: var(--khfest-ink);
}

/* ---------- FESTIVAL FOOTER PLANES (decorative, behind footer content) ---------- */
html[data-khfest] .site-footer { position: relative; overflow: hidden; }
html[data-khfest] .site-footer::before,
html[data-khfest] .site-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--khfest-bg);
}
html[data-khfest] .site-footer::before { opacity: 0.14; transform: skewY(-2deg) scale(1.2); }
html[data-khfest] .site-footer::after  { opacity: 0.08; transform: skewY(1.5deg) scale(1.2); }
html[data-khfest] .site-footer .footer-main,
html[data-khfest] .site-footer .footer-dark-bottom { position: relative; z-index: 1; }
/* Rajyotsava: yellow band over Karnataka red */
html[data-khfest="rajyotsava"] .site-footer::before {
    background-image: linear-gradient(to bottom, #f9d616 0%, #f9d616 55%, transparent 55.5%);
    opacity: 0.20; transform: none;
}
html[data-khfest="rajyotsava"] .site-footer::after {
    background-image: linear-gradient(to bottom, transparent 55%, #e52d27 55.5%, #e52d27 100%);
    opacity: 0.16; transform: none;
}

/* ---------- FESTIVAL SHOWCASE BAND (inserted by kh-news-fest.js) ---------- */
.kh-fest-footer-band {
    display: flex;
    align-items: center;
    gap: 16px;
    background-image: var(--khfest-bg);
    color: var(--khfest-ink);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 0 0 22px;
}
.kh-fest-footer-band .kh-band-img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.18);
}
.kh-fest-footer-band .kh-band-img.round { border-radius: 50%; width: 80px; height: 80px; }
.kh-fest-footer-band .kh-band-icon {
    width: 80px; height: 80px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
.kh-fest-footer-band .kh-band-title { font-size: 20px; font-weight: 800; line-height: 1.25; }
.kh-fest-footer-band .kh-band-msg { font-size: 13.5px; opacity: 0.92; }
@media (max-width: 640px) {
    .kh-fest-footer-band { padding: 10px 12px; gap: 12px; }
    .kh-fest-footer-band .kh-band-img { width: 96px; height: 72px; }
    .kh-fest-footer-band .kh-band-img.round { width: 64px; height: 64px; }
    .kh-fest-footer-band .kh-band-icon { width: 64px; height: 64px; font-size: 26px; }
    .kh-fest-footer-band .kh-band-title { font-size: 16.5px; }
    .kh-fest-footer-band .kh-band-msg { font-size: 12.5px; }
}

/* ---------- FESTIVAL MUSIC CHIP ---------- */
.kh-fest-music-chip {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 99999;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background-image: var(--khfest-bg);
    background-color: var(--khfest-solid);
    color: var(--khfest-ink);
    border: none;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.kh-fest-music-chip .kh-chip-label { white-space: nowrap; }
@media (max-width: 640px) {
    .kh-fest-music-chip { padding: 8px 10px; }
    .kh-fest-music-chip .kh-chip-label { display: none; } /* icon only on small screens */
}

/* ---------- FALLING EFFECTS LAYER ---------- */
.khfx-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 99990;
}
.khfx-item { position: absolute; top: -70px; will-change: transform; animation: khfx-fall linear forwards; }
.khfx-motif { display: block; animation: khfx-sway ease-in-out infinite alternate; }
@keyframes khfx-fall {
    to { transform: translateY(112vh); }
}
@keyframes khfx-sway {
    from { transform: translateX(-9px); }
    to   { transform: translateX(9px); }
}
/* Petal / sparkle / snow dots */
.khfx-petal {
    width: 15px; height: 11px;
    border-radius: 90% 4px 90% 4px;
    background-color: var(--khfx-c1, #f5a623);
}
.khfx-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background-color: var(--khfx-c1, #ffffff);
    box-shadow: 0 0 7px var(--khfx-c1, #ffffff);
}
.khfx-snow {
    width: 8px; height: 8px; border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}
/* Diya: bowl + flickering flame (motif itself never rotates) */
.khfx-diya { width: 30px; height: 20px; position: relative; animation: none; }
.khfx-diya .khfx-bowl {
    position: absolute; bottom: 0; left: 0;
    width: 30px; height: 13px;
    background: radial-gradient(ellipse at 50% 0%, #b3541e 0%, #7a2d0e 75%);
    border-radius: 4px 4px 50% 50% / 4px 4px 90% 90%;
}
.khfx-diya .khfx-flame {
    position: absolute; bottom: 11px; left: 50%;
    width: 8px; height: 13px; margin-left: -4px;
    background: radial-gradient(ellipse at 50% 80%, #fff6c9 0%, #ffd23e 45%, #ff8a00 100%);
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    animation: khfx-flicker 0.32s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
}
@keyframes khfx-flicker {
    from { transform: scaleY(0.88) skewX(-2.5deg); opacity: 0.85; }
    to   { transform: scaleY(1.1) skewX(2.5deg); opacity: 1; }
}
/* Indian flag motif (inner layer waves) */
.khfx-flag { width: 34px; height: 24px; animation: khfx-wave 0.9s ease-in-out infinite alternate; transform-origin: left center; }
.khfx-flag .khfx-stripe { height: 8px; }
.khfx-flag .khfx-s1 { background-color: #ff9933; }
.khfx-flag .khfx-s2 { background-color: #ffffff; position: relative; }
.khfx-flag .khfx-s3 { background-color: #138808; }
.khfx-flag .khfx-chakra {
    position: absolute; top: 50%; left: 50%;
    width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
    border: 1.6px solid #000080; border-radius: 50%;
    background: transparent;
}
@keyframes khfx-wave {
    from { transform: skewY(-3.5deg); }
    to   { transform: skewY(3.5deg); }
}
/* Kite motif */
.khfx-kite {
    width: 20px; height: 20px;
    background-image: var(--khfest-bg);
    background-color: var(--khfx-c1, #f09819);
    transform: rotate(45deg);
    border-radius: 3px;
}
/* Photo card motif (person events with an uploaded image) */
.khfx-photo {
    width: 54px; padding: 3px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3);
}
.khfx-photo img { width: 100%; height: 62px; object-fit: cover; border-radius: 5px; display: block; }
@media (prefers-reduced-motion: reduce) {
    .khfx-layer { display: none; }
}

/* ---------- FESTIVAL STICKY HEADER STRIP (inserted by kh-news-fest.js) ---------- */
.kh-fest-top-strip {
    position: sticky;
    top: 0;
    z-index: 99995;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 18px;
    color: #ffffff;
    background-color: #232028;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.17) 1.2px, transparent 1.4px),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.20) 0 14px, rgba(0, 0, 0, 0) 14px 28px),
        linear-gradient(100deg, #232028 0%, #2c2733 40%, rgba(35, 32, 40, 0) 76%),
        var(--khfest-bg);
    background-size: 16px 16px, auto, auto, cover;
    background-position: right top, left top, left top, center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.kh-strip-badge {
    width: 44px; height: 44px; flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.kh-strip-badge img { width: 100%; height: 100%; object-fit: cover; }
.kh-strip-badge i { font-size: 20px; color: var(--khfest-ink); }
.kh-strip-name {
    font-size: 19px; font-weight: 800; letter-spacing: 0.4px;
    text-transform: uppercase; white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.kh-strip-div { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.45); flex: 0 0 auto; }
.kh-strip-text {
    display: flex; align-items: center; gap: 13px;
    flex: 1 1 auto; min-width: 0;
}
.kh-strip-msg {
    font-size: 14.5px; color: rgba(255, 255, 255, 0.94);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    flex: 1 1 auto; min-width: 0;
}
.kh-strip-msg-in { display: inline-block; white-space: nowrap; will-change: transform; }
.kh-strip-msg-t { display: inline-block; }
.kh-strip-msg-in.kh-slide-run {
    animation-name: khStripMarquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.kh-strip-msg-in.kh-slide-run .kh-strip-msg-t { padding-right: 56px; }
@keyframes khStripMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 640px) {
    .kh-fest-top-strip { padding: 8px 12px; gap: 10px; }
    .kh-strip-badge { width: 36px; height: 36px; }
    .kh-strip-badge i { font-size: 16px; }
    .kh-strip-text { flex-direction: column; align-items: flex-start; gap: 1px; }
    .kh-strip-div { display: none; }
    .kh-strip-name { font-size: 15px; }
    .kh-strip-msg { font-size: 12.5px; width: 100%; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .kh-strip-msg-in.kh-slide-run { animation: none; }
}