/* ============================================================
   SkillDelivery festive theme — Dhanteras & Diwali 2026.
   Only decorative overlays. The toran strip and (on the home
   page) the greeting line are moved INTO the fixed <nav> so
   they ride with it on scroll. Original layout, fonts and
   brand colours are untouched outside this festive window;
   when body.fest-active is absent the stylesheet contributes
   nothing to the page's spacing.
   ============================================================ */

/* --- Fixed-header block (nav + toran + optional greeting) --- */
/* Make the nav fully opaque while festive so nothing scrolls
   through the toran/greeting. Outside the window these rules
   don't match anything so the original translucent nav remains. */
body.fest-active nav {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The fest-top wrapper is appended inside <nav> and stacks below
   .nav-inner. No positioning of its own — it inherits the fixed
   nav's position. */
.fest-top { background: #fff; }

/* Push the page's flow down by exactly the height the festive
   theme added to the header (toran + optional greeting). The
   existing per-page clearance (e.g. launch-banner margin-top:64,
   page-hero padding-top:100) still handles the nav's own 64px,
   so no per-page CSS is overridden. */
body.fest-active { padding-top: var(--fest-extra, 0px); }

/* Anchor targets land below the full header, with a small gap. */
body.fest-active [id] {
  scroll-margin-top: calc(var(--fest-header-h, 64px) + 8px);
}

/* Mobile menu opens below the whole header, not over the toran. */
body.fest-active .phone-menu {
  top: var(--fest-header-h, 64px);
}

/* --- Toran strip --- */
.fest-toran-strip {
  height: 30px;
  background-color: #fff;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 300px 30px;
  /* background-image is set from festival.js at load time */
}
@media (max-width: 640px) {
  .fest-toran-strip {
    height: 22px;
    background-size: 220px 22px;
  }
}

/* --- Greeting line (home only), flanked by two small diyas --- */
.fest-greeting-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  background: #fff;
  color: var(--text, #0D2233);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  padding: 10px 20px 14px;
}
.fest-greeting-diya {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.fest-greeting-diya .fest-diya { width: 26px; height: 24px; }
.fest-greeting-text { flex: 0 1 auto; min-width: 0; }

@media (max-width: 640px) {
  .fest-greeting-strip {
    font-size: 13px;
    padding: 8px 10px 10px;
    gap: 8px;
    line-height: 1.35;
  }
  .fest-greeting-diya .fest-diya { width: 17px; height: 16px; }
  /* Cap the greeting at two lines on 360px without affecting the
     diya placement (they are flex siblings, not inside the text). */
  .fest-greeting-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
            line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --- Diya row above the footer --- */
.fest-diyas {
  padding: 22px 20px 18px;
  text-align: center;
  background: transparent;
  color: var(--text, #0D2233);
}
.fest-diyas-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 22px;
  margin: 0 auto 8px;
  max-width: 560px;
  flex-wrap: nowrap;
}
.fest-diya { width: 38px; height: 34px; display: block; flex: 0 0 auto; }
.fest-diya .fest-lamp     { fill: var(--cyan3, #0097A7); }
.fest-diya .fest-lamp-rim { fill: var(--blue3, #0D47A1); opacity: 0.85; }
.fest-diya .fest-flame    { fill: #FFB237; }
.fest-diya .fest-flame-core { fill: #FFE082; }

.fest-diya-msg {
  margin: 0;
  color: var(--text2, #1A3A4A);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}

/* Flame flicker — subtle, CSS only */
@keyframes fest-flicker {
  0%, 100% { opacity: 1;    transform: scaleY(1); }
  40%      { opacity: 0.86; transform: scaleY(0.92); }
  70%      { opacity: 0.94; transform: scaleY(1.04); }
}
.fest-diya .fest-flame,
.fest-diya .fest-flame-core {
  transform-origin: 50% 100%;
  animation: fest-flicker 2.4s ease-in-out infinite;
}
.fest-diyas-row .fest-diya:nth-child(2) .fest-flame,
.fest-diyas-row .fest-diya:nth-child(2) .fest-flame-core { animation-delay: 0.6s; }
.fest-diyas-row .fest-diya:nth-child(3) .fest-flame,
.fest-diyas-row .fest-diya:nth-child(3) .fest-flame-core { animation-delay: 1.1s; }
.fest-diyas-row .fest-diya:nth-child(4) .fest-flame,
.fest-diyas-row .fest-diya:nth-child(4) .fest-flame-core { animation-delay: 1.6s; }
.fest-diyas-row .fest-diya:nth-child(5) .fest-flame,
.fest-diyas-row .fest-diya:nth-child(5) .fest-flame-core { animation-delay: 2.0s; }

/* Hide diyas 4 and 5 on small screens — row shows 3 */
@media (max-width: 640px) {
  .fest-diyas-row { gap: 18px; }
  .fest-diyas-row .fest-diya:nth-child(n+4) { display: none; }
  .fest-diya-msg { font-size: 12.5px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .fest-diya .fest-flame,
  .fest-diya .fest-flame-core { animation: none; }
}