/* ============================================================
   LEXNOMIK — Festive theme (Diwali)
   assets/css/festive.css   — loaded by public/features/festive-theme.php
   Everything is switched on per-feature by classes that festive.js puts on <body>:
     lx-fest-garland · lx-fest-logo · lx-fest-footer   (embers + ribbon are plain elements)
   Adding another festival later = a new theme block below + a new option in the admin page.
   ============================================================ */

/* ---------- greeting ribbon (above the header) ---------- */
.lx-fest-ribbon {
  position: relative; text-align: center; padding: 9px 44px;
  background: linear-gradient(90deg, #5b1631 0%, #8a2a1c 50%, #a8550f 100%);
  border-bottom: 1px solid rgba(232, 201, 122, .55);
  color: #fff7e0; font: 600 13.5px/1.35 var(--font-ui, 'DM Sans', system-ui, sans-serif);
  letter-spacing: .01em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.lx-fest-ribbon[hidden] { display: none; }
.lx-fest-ribbon-x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff7e0; cursor: pointer; font-size: 13px; line-height: 1;
}
.lx-fest-ribbon-x:hover { background: rgba(255, 255, 255, .26); }
.lx-fest-ribbon-x:focus-visible { outline: 2px solid #ffc23a; outline-offset: 2px; }

/* ---------- garland hanging under the sticky header ---------- */
body.lx-fest-garland .site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cpath d='M0 3Q48 30 96 3' fill='none' stroke='%23c8a84b' stroke-width='1.5'/%3E%3Ccircle cx='6.0' cy='9.4' r='5' fill='%23ff9d1c'/%3E%3Ccircle cx='6.0' cy='9.4' r='3' fill='%23ff8a00' opacity='.75'/%3E%3Ccircle cx='6.0' cy='9.4' r='1.3' fill='%23fff3b0'/%3E%3Ccircle cx='18.0' cy='14.4' r='5' fill='%23ffb52e'/%3E%3Ccircle cx='18.0' cy='14.4' r='3' fill='%23ff8a00' opacity='.75'/%3E%3Ccircle cx='18.0' cy='14.4' r='1.3' fill='%23fff3b0'/%3E%3Ccircle cx='30.0' cy='17.8' r='5' fill='%23ff9d1c'/%3E%3Ccircle cx='30.0' cy='17.8' r='3' fill='%23ff8a00' opacity='.75'/%3E%3Ccircle cx='30.0' cy='17.8' r='1.3' fill='%23fff3b0'/%3E%3Ccircle cx='42.0' cy='19.5' r='5' fill='%23ffb52e'/%3E%3Ccircle cx='42.0' cy='19.5' r='3' fill='%23ff8a00' opacity='.75'/%3E%3Ccircle cx='42.0' cy='19.5' r='1.3' fill='%23fff3b0'/%3E%3Ccircle cx='54.0' cy='19.5' r='5' fill='%23ff9d1c'/%3E%3Ccircle cx='54.0' cy='19.5' r='3' fill='%23ff8a00' opacity='.75'/%3E%3Ccircle cx='54.0' cy='19.5' r='1.3' fill='%23fff3b0'/%3E%3Ccircle cx='66.0' cy='17.8' r='5' fill='%23ffb52e'/%3E%3Ccircle cx='66.0' cy='17.8' r='3' fill='%23ff8a00' opacity='.75'/%3E%3Ccircle cx='66.0' cy='17.8' r='1.3' fill='%23fff3b0'/%3E%3Ccircle cx='78.0' cy='14.4' r='5' fill='%23ff9d1c'/%3E%3Ccircle cx='78.0' cy='14.4' r='3' fill='%23ff8a00' opacity='.75'/%3E%3Ccircle cx='78.0' cy='14.4' r='1.3' fill='%23fff3b0'/%3E%3Ccircle cx='90.0' cy='9.4' r='5' fill='%23ffb52e'/%3E%3Ccircle cx='90.0' cy='9.4' r='3' fill='%23ff8a00' opacity='.75'/%3E%3Ccircle cx='90.0' cy='9.4' r='1.3' fill='%23fff3b0'/%3E%3Cpath d='M48 16.5V24' stroke='%23c8a84b' stroke-width='1.2'/%3E%3Cpolygon points='48,23 55.5,31.5 48,42 40.5,31.5' fill='%23ff9d1c' stroke='%23e8c97a' stroke-width='1.2'/%3E%3Cpolygon points='48,27.5 52,31.5 48,37 44,31.5' fill='%23fff3b0'/%3E%3Cpath d='M48 42v4' stroke='%23e8c97a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x top center / 96px 48px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .28));
}

/* ---------- diya next to the Lexnomik name ---------- */
body.lx-fest-logo .site-logo .logo-name::after {
  content: ""; display: inline-block; width: 22px; height: 22px; margin-left: 7px; vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ff8a00'/%3E%3Cstop offset='.6' stop-color='%23ffc23a'/%3E%3Cstop offset='1' stop-color='%23fff2a8'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8c97a'/%3E%3Cstop offset='1' stop-color='%23b5651d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 6c5 8 9 13 9 20a9 9 0 0 1-18 0c0-7 4-12 9-20z' fill='url(%23f)'/%3E%3Cpath d='M32 18c2.6 4 4.4 6.6 4.4 10a4.4 4.4 0 0 1-8.8 0c0-3.4 1.8-6 4.4-10z' fill='%23fff6c9'/%3E%3Crect x='30.6' y='33' width='2.8' height='6' rx='1.2' fill='%235b3a1a'/%3E%3Cpath d='M4 38c6 3 14 4 28 4s22-1 28-4c-1 13-12 21-28 21S5 51 4 38z' fill='url(%23b)'/%3E%3Cpath d='M4 38c6 3 14 4 28 4s22-1 28-4' fill='none' stroke='%23fff3b0' stroke-width='1.6' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: lxFestLogo 2.2s ease-in-out infinite;
}

/* ---------- row of diyas along the top of the footer ---------- */
body.lx-fest-footer .site-footer { position: relative; }
body.lx-fest-footer .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='34' viewBox='0 0 64 34'%3E%3Cg transform='translate(18 4.5) scale(.5)'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ff8a00'/%3E%3Cstop offset='.6' stop-color='%23ffc23a'/%3E%3Cstop offset='1' stop-color='%23fff2a8'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8c97a'/%3E%3Cstop offset='1' stop-color='%23b5651d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M32 6c5 8 9 13 9 20a9 9 0 0 1-18 0c0-7 4-12 9-20z' fill='url(%23f)'/%3E%3Cpath d='M32 18c2.6 4 4.4 6.6 4.4 10a4.4 4.4 0 0 1-8.8 0c0-3.4 1.8-6 4.4-10z' fill='%23fff6c9'/%3E%3Crect x='30.6' y='33' width='2.8' height='6' rx='1.2' fill='%235b3a1a'/%3E%3Cpath d='M4 38c6 3 14 4 28 4s22-1 28-4c-1 13-12 21-28 21S5 51 4 38z' fill='url(%23b)'/%3E%3Cpath d='M4 38c6 3 14 4 28 4s22-1 28-4' fill='none' stroke='%23fff3b0' stroke-width='1.6' stroke-linecap='round' opacity='.8'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom center / 64px 34px;
}

/* ---------- floating golden sparks ---------- */
.lx-fest-embers { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.lx-fest-embers i {
  position: absolute; bottom: -14px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff4b8 0%, #ffc23a 42%, rgba(255, 138, 0, 0) 72%);
  animation: lxFestRise var(--d) linear var(--dl) infinite; will-change: transform, opacity;
}

/* small touches */
body.lx-fest-diwali ::selection { background: #ffc23a; color: #2a1030; }

@keyframes lxFestRise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: .95; }
  50%  { transform: translate3d(var(--w1), -55vh, 0); opacity: .8; }
  100% { transform: translate3d(var(--w2), -108vh, 0); opacity: 0; }
}
@keyframes lxFestLogo {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 170, 60, .5)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 8px rgba(255, 196, 80, .95)); transform: scale(1.06); }
}

@media (max-width: 640px) {
  .lx-fest-ribbon { font-size: 12.5px; padding: 8px 40px; }
  body.lx-fest-garland .site-header::after { height: 36px; background-size: 72px 36px; }
  body.lx-fest-footer .site-footer::before { height: 26px; background-size: 48px 26px; }
  body.lx-fest-logo .site-logo .logo-name::after { width: 18px; height: 18px; vertical-align: -3px; }
  .lx-fest-embers i:nth-child(n+9) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-fest-embers { display: none; }
  body.lx-fest-logo .site-logo .logo-name::after { animation: none; }
}
@media print {
  .lx-fest-ribbon, .lx-fest-embers { display: none !important; }
  body.lx-fest-garland .site-header::after, body.lx-fest-footer .site-footer::before { display: none; }
}