/* v1.4.4 festival: the festival banner and the theme layer (includes/festival-themes.php festival_banner_html(), festival_theme_head()).
   Loaded on public pages and the Sangat portal shell while any theme can show. The banner is in the server's HTML with a 56 px
   minimum height (patch 39: a long sentence wraps instead of being clipped), its own dark ground computed for WCAG AAA (Parchment text ≥ 7.5:1, accent ≥ 7:1), and is
   hidden before first paint when dismissed for the session (html[data-fest-banner=off]) or when the visitor switched festive
   styling off (html[data-fest-optout] / [data-festive=off]). The motif is a decorative ornament only. */
.ft-banner {
  position: relative; z-index: 2; min-height: 56px; overflow: hidden; box-sizing: border-box;
  color: var(--ft-ink, #FCFBF7); background: linear-gradient(100deg, var(--ft-bg, #3A0815), var(--ft-bg2, #160308));
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
.ft-banner::before { /* the motif as an ornament, far right behind the close button */
  content: ""; position: absolute; top: 50%; right: 18px; width: 150px; height: 150px; transform: translateY(-50%);
  background: var(--ft-motif) center / contain no-repeat; opacity: 0.14; pointer-events: none;
}
.ft-banner::after { /* a hairline of the accent along the foot */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--ft-line, #D97706) 20%, var(--ft-line, #D97706) 80%, transparent); opacity: 0.8;
}
/* Schema patch 39: one centred row (motif · sentence · actions). The sentence keeps its separators as real text
   ("Jai Mata Di · Auspicious Navratri Mahaparv · 9 Days … · October 10–20, 2026"), the pill and × are their own group, so
   nothing overlaps the words and nothing is clipped at the viewport's edge. From 768 px the row never wraps: a long sentence
   wraps inside its own box, so the pill and × stay at the trailing edge. */
.ft-banner__in {
  position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem; min-height: 56px;
  max-width: 1280px; margin: 0 auto; box-sizing: border-box;
  padding: 6px max(10px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left));
}
.ft-banner__motif { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.ft-banner__text {
  flex: 0 1 auto; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  column-gap: 0; row-gap: 2px; text-align: center; line-height: 1.3; font-size: 0.86rem; color: var(--ft-ink, #FCFBF7);
}
.ft-banner__h { font: 600 1.08rem/1.25 "Cormorant Garamond", Georgia, serif; letter-spacing: 0.01em; color: var(--ft-ink, #FCFBF7); }
.ft-banner__sep { white-space: pre; padding-inline: 0.35em; color: var(--ft-accent-ink, #FCD34D); }
.ft-banner__sub, .ft-banner__when { color: var(--ft-ink, #FCFBF7); }
.ft-banner__when { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ft-banner__acts { flex: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.ft-banner__go {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--ft-accent-ink, #FCD34D); border-radius: 999px; color: var(--ft-accent-ink, #FCD34D);
  font-size: 0.88rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; background: rgba(13, 11, 9, 0.35);
}
.ft-banner__go:hover { background: rgba(13, 11, 9, 0.6); text-decoration: underline; text-underline-offset: 3px; }
.ft-banner__x {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--ft-ink, #FCFBF7); font: 400 1.6rem/1 system-ui, sans-serif; cursor: pointer;
}
.ft-banner__x:hover { background: rgba(255, 255, 255, 0.08); }
.ft-banner a:focus-visible, .ft-banner button:focus-visible { outline: 2px solid var(--ft-accent-ink, #FCD34D); outline-offset: 2px; }
.ft-banner .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* tablets: the headline and the dates on one line (the middle part returns from 1024 px) */
@media (max-width: 1023.98px) { .ft-banner__sub, .ft-banner__sep--sub { display: none; } }
/* tablets and up: one row; a long sentence wraps inside its own box so the pill and × stay at the trailing edge */
@media (min-width: 768px) { .ft-banner__in { flex-wrap: nowrap; } }
/* phones: the headline over the dates */
@media (max-width: 767px) {
  .ft-banner__in { gap: 0.5rem; padding-block: 6px; justify-content: space-between; flex-wrap: nowrap; }
  .ft-banner__motif { width: 34px; height: 34px; }
  .ft-banner__text { flex: 1 1 auto; justify-content: flex-start; text-align: left; }
  .ft-banner__h { font-size: 1rem; line-height: 1.2; }
  .ft-banner__sub, .ft-banner__sep { display: none; }
  .ft-banner__when { flex-basis: 100%; font-size: 0.8rem; opacity: 0.92; }   /* the dates on their own line under the headline */
  .ft-banner__acts { gap: 2px; }
  .ft-banner__go { width: 44px; padding: 0; justify-content: center; font-size: 1.1rem; }
  .ft-banner__go-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ft-banner::before { right: -20px; width: 110px; height: 110px; }
}
html[data-fest-banner="off"] .ft-banner, html[data-fest-optout] .ft-banner, html[data-festive="off"] .ft-banner { display: none; }
@media print { .ft-banner { display: none; } }
@media (forced-colors: active) { .ft-banner { border-bottom: 1px solid CanvasText; } .ft-banner::before { display: none; } }

/* The homepage emblem beside the swaroop becomes the live festival's own motif (the season still decides whether it shows). */
html[data-festival="navratri"] .season-emblem { background-image: url("../img/festival/navratri.svg"); }
html[data-festival="diwali"] .season-emblem { background-image: url("../img/festival/diwali.svg"); }
html[data-festival="gurupurnima"] .season-emblem { background-image: url("../img/festival/gurupurnima.svg"); }
html[data-festival="lohri"] .season-emblem { background-image: url("../img/festival/lohri.svg"); }
html[data-festival="holi"] .season-emblem { background-image: url("../img/festival/holi.svg"); }
html[data-festival="janmashtami"] .season-emblem { background-image: url("../img/festival/janmashtami.svg"); }
html[data-festival="dussehra"] .season-emblem { background-image: url("../img/festival/dussehra.svg"); }
html[data-festival="ganeshchaturthi"] .season-emblem { background-image: url("../img/festival/ganeshchaturthi.svg"); }
html[data-festival="rakhi"] .season-emblem { background-image: url("../img/festival/rakhi.svg"); }
html[data-festival="bhaidooj"] .season-emblem { background-image: url("../img/festival/bhaidooj.svg"); }
html[data-festival="shivratri"] .season-emblem { background-image: url("../img/festival/shivratri.svg"); }
html[data-festival="hanumanjayanti"] .season-emblem { background-image: url("../img/festival/hanumanjayanti.svg"); }
html[data-festival="kumbhmela"] .season-emblem { background-image: url("../img/festival/kumbhmela.svg"); }
html[data-festival="newyear"] .season-emblem { background-image: url("../img/festival/newyear.svg"); }