/* =========================================================
   DEVOTIONAL ANNOUNCEMENT MARQUEE
   Sits directly above #about. Bilingual content is supplied by the
   existing js/i18n.js engine (data-i18n keys under "devotional.*" in
   data/i18n/ta.json / en.json) - this file only styles the section.
   Palette reuses the site's --vv-* devotional tokens (style-original.css).
   ========================================================= */

.devotional-marquee-section {
  --devotional-duration: 40s;
  position: relative;
  padding: 56px 0;
  overflow: hidden;
  background: var(--vv-maroon-dark, #4B1711) !important;
  background-image: none !important;
  color: var(--vv-ivory, #FFFBF3);
}

.devotional-marquee-inner { position: relative; z-index: 1; }
.devotional-marquee-heading { margin-bottom: 26px; text-align: center; }
.devotional-marquee-title {
  display: inline-block;
  font-family: var(--font-tamil, "Noto Sans Tamil", sans-serif);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--vv-gold, #E9B63F);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}
.devotional-marquee-lamp-mirror { display: inline-block; transform: scaleX(-1); }
.devotional-marquee {
  position: relative;
  padding: 22px 0;
  border-top: 1px solid rgba(233, 182, 63, .35);
  border-bottom: 1px solid rgba(233, 182, 63, .35);
}
.devotional-marquee-viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.devotional-marquee-track {
  display: flex;
  align-items: baseline;
  width: max-content;
  transform: translateX(0);
  /* The scroll is declared here rather than behind a JS-applied class so
     the marquee still moves if js/devotional-marquee.js fails to load or
     run. That script now only restarts the animation after a language
     switch (by toggling an inline animation:none), which no longer
     controls whether it animates at all. Reduced motion is honoured by
     the media query at the end of this file, not by the script. */
  animation: devotional-marquee-scroll var(--devotional-duration) linear infinite;
}
.devotional-marquee:hover .devotional-marquee-track,
.devotional-marquee:focus-within .devotional-marquee-track {
  animation-play-state: paused;
}
@keyframes devotional-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.devotional-set {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: clamp(14px, 2.4vw, 28px);
  padding-inline: clamp(14px, 2.4vw, 28px);
  white-space: nowrap;
}
.devotional-verse,
.devotional-meaning,
.devotional-mantra {
  font-family: var(--font-tamil, "Noto Sans Tamil", sans-serif);
  white-space: nowrap;
  line-height: 1.6;
}
.devotional-verse {
  font-size: clamp(.95rem, 1.7vw, 1.15rem);
  font-weight: 500;
  color: var(--vv-ivory, #FFFBF3);
}
.devotional-meaning-label {
  margin-right: 4px;
  color: var(--vv-saffron, #D8891C);
  font-weight: 800;
}
.devotional-meaning-text {
  font-size: clamp(.88rem, 1.5vw, 1.02rem);
  color: rgba(255, 251, 243, .88);
  white-space: nowrap;
}
.devotional-mantra {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 800;
  color: var(--vv-gold, #E9B63F);
}
.devotional-sep { color: var(--vv-gold, #E9B63F); font-size: 1rem; opacity: .85; }
.devotional-sep-loop { padding-inline: clamp(10px, 2vw, 20px); }

@media (max-width: 760px) {
  .devotional-marquee-section {
    padding: 32px 0;
    --devotional-duration: 52s;
  }
  .devotional-marquee { padding: 14px 0; }
  .devotional-set { gap: 12px; padding-inline: 12px; }
  .devotional-verse { font-size: .78rem; }
  .devotional-meaning-text { font-size: .72rem; }
  .devotional-mantra { font-size: .82rem; }
}

/* Very narrow phones: reduce text slightly so the first Tamil phrase does
   not visually overflow the viewport while preserving whole words. */
@media (max-width: 380px) {
  .devotional-marquee-section { padding: 28px 0; }
  .devotional-marquee-title { font-size: .95rem; }
  .devotional-set { gap: 10px; padding-inline: 10px; }
  .devotional-verse { font-size: .72rem; }
  .devotional-meaning-text { font-size: .66rem; }
  .devotional-mantra { font-size: .76rem; }
}

/* Reduced motion: no scroll, so the line has to wrap instead — otherwise
   it is a single nowrap line inside an overflow:hidden viewport, i.e.
   permanently cut off at the right edge with no way to read the rest.
   Every white-space declaration below has to be !important and carry the
   .devotional-marquee ancestor: css/site-fixes.css pins this text to
   `white-space: nowrap !important` ("the marquee is intentionally a
   single scrolling line"), which is right while it scrolls and wrong the
   moment it stops. That rule outranked the plain declarations this block
   used to have, so the fallback never actually applied. */
@media (prefers-reduced-motion: reduce) {
  .devotional-marquee-track {
    flex-wrap: wrap !important;
    width: 100% !important;
    justify-content: center;
    animation: none !important;
    transform: none !important;
  }
  .devotional-marquee-viewport {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .devotional-marquee .devotional-set {
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: center;
    align-items: flex-start;
    row-gap: clamp(16px, 2.2vw, 26px);
  }
  .devotional-set[aria-hidden="true"] { display: none !important; }
  .devotional-marquee .devotional-verse,
  .devotional-marquee .devotional-meaning,
  .devotional-marquee .devotional-meaning-text,
  .devotional-marquee .devotional-mantra {
    white-space: pre-line !important;
    text-align: center;
  }

  /* Stacked, the row reads as two centred columns (verse and meaning)
     with the mantra closing it underneath, rather than all three strung
     out in a line with the mantra stranded off to one side. A full-width
     basis is what breaks the flex row before it. */
  .devotional-marquee .devotional-mantra {
    flex: 0 0 100%;
    width: 100%;
  }

  /* The separators exist to space items out along one continuous
     scrolling line. Once it wraps, the divider between the two columns
     still earns its place, but the one before the mantra and the loop
     marker that rejoins the end of the line to its start would both
     dangle at the end of the first row. :has() is what identifies the
     former; where it is unsupported that lamp simply stays put, which
     is untidy rather than broken. */
  .devotional-marquee .devotional-sep-loop,
  .devotional-marquee .devotional-sep:has(+ .devotional-mantra) {
    display: none !important;
  }
}