/* ===========================================================================
 * SKDR-Tech — Festival theme styles (Dhanteras / Diwali)
 * ---------------------------------------------------------------------------
 * Loaded on every page but only takes effect once festival.js sets
 * body.festival-active (i.e. when today's IST date is inside the window
 * declared in festivalConfig.js). Outside the window, nothing paints.
 * ========================================================================= */

/* ---- TOP STRIP: toran + greeting, fixed below the navbar ----------------
 * The strip is pinned directly under the navbar so navbar + strip move as a
 * single fixed header while the rest of the page scrolls underneath. Both
 * offsets come from JS-measured CSS vars:
 *   --skdr-nav-h    the real navbar height (used as the strip's `top`)
 *   --skdr-header-h navbar + strip height (used for body padding + anchors)
 * Fallbacks of 64 px / 0 px keep the page sane before JS runs or when the
 * festival is off.
 * ------------------------------------------------------------------------ */
.skdr-topstrip{
  position: fixed;
  top: var(--skdr-nav-h, 64px);
  left: 0;
  right: 0;
  z-index: 99;                     /* nav is 100; strip sits just under it */
  background: var(--white);        /* solid white, same look as the navbar bg */
}

/* Push the whole page below the fixed header so content is never hidden. */
body.festival-active{
  padding-top: var(--skdr-header-h, 0px);
}

/* Anchor targets (#contact, #wms, …) land below the header, not behind it.
   When the festival is off, --skdr-header-h is unset → 0 px → original
   behaviour preserved. */
[id]{ scroll-margin-top: var(--skdr-header-h, 0px); }

/* ---- MARIGOLD TORAN (in-flow inside the strip) --------------------------- */
.skdr-toran{
  position: relative;
  height: 30px;                  /* ~30 px desktop, 22 px mobile */
  overflow: hidden;              /* keeps the sway inside the strip */
  pointer-events: none;
  color: var(--blue);            /* SKD logo blue — fed to the string via currentColor */
  background: var(--white);
}
.skdr-toran-svg{
  display: block;
  position: relative;
  left: -12px;
  width: calc(100% + 24px);      /* 12 px slack per side so the sway never exposes a gap */
  height: 100%;
  animation: skdr-toran-sway 7s ease-in-out infinite;
  will-change: transform;
}
@media (max-width: 600px){
  .skdr-toran{ height: 22px; }
}
@keyframes skdr-toran-sway{
  0%, 100% { transform: translateX(-3px); }
  50%      { transform: translateX(3px); }
}

/* ---- GREETING LINE (centred, under the toran, on white) ------------------
 * Flex row: [diya | text | diya]. Diyas have flex: 0 0 auto so they never
 * collapse or wrap onto their own line; the text span has flex: 0 1 auto
 * with min-width: 0 so it is the only thing that shrinks and wraps on 360 px.
 * ------------------------------------------------------------------------ */
.skdr-greeting{
  margin: 0;
  padding: 10px 20px 14px;
  background: var(--white);
  color: var(--navy);            /* on white: AA ~17:1 */
  font-size: 15px;
  font-weight: 500;              /* medium */
  letter-spacing: 0.3px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;            /* applies to the wrapped lines inside the text span */
}
.skdr-greeting-text{
  flex: 0 1 auto;
  min-width: 0;                  /* allow shrink below natural width so wrapping works */
}
/* Shrink the diya SVGs when used inside the greeting. The base .skdr-diya
   rule (40 × 36) still drives the bottom row. */
.skdr-greeting .skdr-diya{
  width: auto;
  height: 24px;                  /* ~24 px desktop, ~18 px mobile */
  flex: 0 0 auto;                /* never shrink, never drop onto its own line */
}
@media (max-width: 600px){
  .skdr-greeting{ font-size: 13px; padding: 7px 14px 10px; gap: 10px; }
  .skdr-greeting .skdr-diya{ height: 16px; }
  /* Cap the greeting to 2 lines on narrow screens; longer text truncates. */
  .skdr-greeting-text{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---- Neutralise redundant nav-clearance below the strip ------------------
 * Elements that previously reserved 64 px of space under the fixed navbar now
 * sit under the strip instead — the strip already provides that clearance.
 * Without this, the launch banner / privacy section would stack a second
 * 64 px gap below the greeting.
 * ------------------------------------------------------------------------ */
body.festival-active .launch-banner{ margin-top: 0; }

/* ---- DIYA ROW (above footer, every page) ---- */
.skdr-diya-row{
  background: var(--white);
  padding: 22px 24px 26px;
  border-top: 1px solid var(--border2);
  text-align: center;
}
.skdr-diya-row-inner{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  margin: 0 0 12px;
}
.skdr-diya{
  width: 40px;
  height: 36px;
  color: var(--navy);                       /* diya lamp inherits via currentColor */
  flex: 0 0 auto;
}
.skdr-diya-lamp{ fill: currentColor; }
.skdr-diya-flame{
  fill: #FF9800;                            /* only new colour: flame */
  transform-origin: 20px 18px;
  animation: skdr-diya-flicker 1.4s ease-in-out infinite;
}
.skdr-diya:nth-child(1) .skdr-diya-flame{ animation-delay: 0s;   }
.skdr-diya:nth-child(2) .skdr-diya-flame{ animation-delay: 0.3s; }
.skdr-diya:nth-child(3) .skdr-diya-flame{ animation-delay: 0.6s; }
.skdr-diya:nth-child(4) .skdr-diya-flame{ animation-delay: 0.9s; }
.skdr-diya:nth-child(5) .skdr-diya-flame{ animation-delay: 1.2s; }
@keyframes skdr-diya-flicker{
  0%, 100% { opacity: 1;     transform: scaleY(1);    }
  50%      { opacity: 0.86;  transform: scaleY(0.94); }
}
.skdr-diya-msg{
  margin: 0 auto;
  max-width: 820px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  line-height: 1.55;
  color: var(--navy);                       /* on white: AA ~17:1 */
}

/* Hide 1st and 5th diya on mobile, leaving the middle 3 centred. */
@media (max-width: 600px){
  .skdr-diya-row-inner{ gap: 22px; }
  .skdr-diya-row-inner .skdr-diya:nth-child(1),
  .skdr-diya-row-inner .skdr-diya:nth-child(5){ display: none; }
}

/* ---- Accessibility: honour reduced-motion ---- */
@media (prefers-reduced-motion: reduce){
  .skdr-toran-svg{ animation: none; transform: none; }
  .skdr-diya-flame{ animation: none; }
}