/*
 * DGA National Day 96 template -- clone of dga-national-day.css for the
 * "National Day 96 Template (DGA)" page template
 * (national-day-96-template-dga.blade.php), used by the "National Day 96
 * (DGA Preview)" page. Renamed .nd95 -> .nd96 throughout so this can be
 * edited (Hero first, per the Figma draft) without affecting the original
 * "National Day (DGA Preview)" page/CSS, built on the project's real DGA
 * tokens (dga-tokens.css) so it stays visually consistent with the rest of
 * the DGA-compliant site rather than being a fully bespoke one-off. Scoped
 * entirely under .nd96 so it can't leak onto other pages.
 *
 * Guideline mapping (design.dga.gov.sa "National Day 95 Template"):
 *  - Section dividers -> Option 1 (decorative traditional pattern dividers)
 *  - Hero -> Illustration Hero, blended with subtle motion (Hero w/ Animation)
 *  - Footer -> Dark Green Footer (the real sitewide footer, reskinned -- see
 *    the body.page-id-407 override at the bottom of this file)
 */

.nd96 {
  overflow: hidden;
}

/* ---------- fireworks overlay (preview) ---------- */
.nd96-fireworks-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .nd96-fireworks-canvas { display: none; }
}

/* ---------- shared section rhythm ---------- */
.nd96-section {
  padding-block: var(--spacing-9xl, 96px);
  padding-inline: var(--spacing-4, 16px);
}
.nd96-container {
  max-width: var(--container-max-width-desktop, 1280px);
  margin-inline: auto;
}
.nd96-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md, 8px);
  color: var(--colors-primary-sa-flag-700, #166a45);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-md, 8px);
}
.nd96-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 9999px);
  background: var(--colors-secondary-gold-600-primary, #dba102);
  flex: none;
}
.nd96-heading {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-display, #1f2a37);
  margin: 0;
}
.nd96-lede {
  color: var(--text-primary-paragraph, #384250);
  font-size: 16px;
  line-height: 1.6;
  max-width: 720px;
  margin-top: var(--spacing-3xl, 24px);
}
.nd96-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-4xl, 32px);
  margin-bottom: var(--spacing-3xl, 24px);
}

/* ---------- buttons (reuses token colours, not the site's compiled .btn) ---------- */
.nd96-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md, 8px);
  padding: 12px 24px;
  border-radius: var(--radius-md, 8px);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
  cursor: pointer;
}
.nd96-btn:hover { transform: translateY(-1px); }
.nd96-btn--primary {
  background: var(--button-background-primary-default, #1b8354);
  color: var(--colors-base-white, #fff);
}
.nd96-btn--primary:hover { background: var(--button-background-primary-hovered, #166a45); }
.nd96-btn--onColor {
  background: var(--colors-base-white, #fff);
  color: var(--colors-primary-sa-flag-800, #14573a);
}
.nd96-btn--onColor:hover { background: var(--alpha-white-80, #ffffffcc); }
.nd96-btn--outline {
  background: transparent;
  color: var(--colors-primary-sa-flag-700, #166a45);
  border-color: var(--border-neutral-primary, #d2d6db);
}
.nd96-btn--outline:hover {
  border-color: var(--colors-primary-sa-flag-600-primary, #1b8354);
  color: var(--colors-primary-sa-flag-800, #14573a);
}
.nd96-btn svg { width: 16px; height: 16px; flex: none; }
[dir="rtl"] .nd96-btn svg { transform: scaleX(-1); }

/* ---------- ornamental divider (Option 1: traditional pattern dividers) ---------- */
.nd96-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3xl, 24px);
  padding-block: var(--spacing-2xl, 20px);
  color: var(--colors-primary-sa-flag-300, #88d8ad);
}
.nd96-divider::before,
.nd96-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  max-width: 220px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.nd96-divider::after { background: linear-gradient(90deg, currentColor, transparent); }
.nd96-divider svg { width: 28px; height: 28px; flex: none; color: var(--colors-secondary-gold-600-primary, #dba102); }

/* Decorative border-pattern dividers (frame22/39/46.svg -- the official
   reference assets), used in place of the plain diamond-flourish divider
   above wherever the real artwork is available. */
.nd96-divider-img {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--spacing-4xl, 32px);
}

/* ---------- hero slider (coverflow deck + typed title, adapted from a
   reference national-day-96 hero: D:\Sathish-personal\dga\updates\5\
   national-day-hero-slider.html -- same look/animation, but every string
   still comes from \App\dga_lang() in the blade template, and the per-slide
   background gradient / accent colours are still ours (Sathish's own
   values), just driven by CSS custom properties now instead of an inline
   background on each slide. See the blade template for the JS controller
   that sets --nd96-x / --nd96-rel / --nd96-bg-from / --nd96-bg-to. ---------- */
.nd96-hero-slider {
  position: relative;
  overflow: hidden;
  display: flex;
  /* Vertically centers the text column within this row. The row is taller
     than just the 491px deck -- see min-height below -- specifically so
     that centering still leaves a guaranteed clearance above both the
     deck and the text for the sitewide absolute header (measured at 81px
     tall, overlapping this section's own top edge by ~77px): the deck
     gets that clearance as a fixed offset (see its own rule), and the
     text column has its own padding-top floor (see
     .nd96-hero-slider__container) so align-items:center can never centre
     it up above that floor even on a slide whose description wraps to
     extra lines. Reference's own .nd96-hero uses plain align-items:center
     with no such floor, because its page header doesn't overlap its hero
     the way ours does -- this is the one place this deliberately isn't a
     verbatim copy of the reference. */
  align-items: center;
  justify-content: flex-start;
  min-height: calc(var(--spacing-8xl, 80px) + 491px);
  padding-inline: var(--spacing-4, 16px);
  color: var(--colors-base-white, #fff);
  background-color: var(--nd96-bg-to, #3f2f0e);
  background-image: linear-gradient(90deg, var(--nd96-bg-from, #7a5c2c), var(--nd96-bg-to, #3f2f0e));
  transition: background-color .6s cubic-bezier(.4,0,.2,1);
}
[dir="rtl"] .nd96-hero-slider {
  background-image: linear-gradient(270deg, var(--nd96-bg-from, #7a5c2c), var(--nd96-bg-to, #3f2f0e));
}
/* Repeating decorative pattern overlay -- same reference asset as the deck
   photography, generic National Day 96 campaign art rather than any
   particular site's brand. */
.nd96-hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../public/nationalday-images/nd96-coverflow/nd96-coverflow-pattern.svg");
  background-repeat: repeat;
  opacity: .4;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .nd96-hero-slider, .nd96-hero-slider__tile { transition: none; }
}

/* ---- coverflow deck ---- */
.nd96-hero-slider__deck {
  position: absolute;
  inset-inline-end: 0;
  /* Fixed at the same header-clearance floor as the text column's own
     padding-top (see .nd96-hero-slider__container) -- not percentage-
     centered, because the deck is a sibling of that column, not a
     descendant, so it doesn't inherit that padding and needs its own
     guaranteed clearance instead. Since the row's min-height is exactly
     this offset plus the deck's own 491px, the deck also exactly fills
     down to the row's bottom edge -- no gap below it either. */
  top: var(--spacing-8xl, 80px);
  width: 720px;
  max-width: 100%;
  height: 491px;
  overflow: hidden;
  z-index: 0;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.nd96-hero-slider__deck.is-dragging { cursor: grabbing; }
.nd96-hero-slider__tile {
  position: absolute;
  inset-inline-start: var(--nd96-x, 0);
  top: 0;
  width: 45.8px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: auto 100%;
  z-index: 2;
  transition: inset-inline-start .6s cubic-bezier(.4,0,.2,1), width .6s cubic-bezier(.4,0,.2,1), background-position .6s cubic-bezier(.4,0,.2,1);
}
[dir="rtl"] .nd96-hero-slider__tile { background-position: 100% center; }
.nd96-hero-slider__tile.is-active {
  width: 491px;
  background-position: 50% center;
  cursor: default;
  z-index: 3;
  box-shadow: var(--shadow-2xl);
}

/* ---- text side ---- */
.nd96-hero-slider__container {
  position: relative;
  z-index: 1;
  /* Sitewide header is `position: absolute` (overlays the top of the page
     rather than pushing it down) -- measured via computed layout at 81px
     tall, overlapping this section's own top edge by ~77px, so 80px clears
     it with a small margin. This lives here (on the item align-items:center
     centers) rather than as padding on the row itself -- see that rule's
     own comment for why that distinction matters. */
  padding-top: var(--spacing-8xl, 80px);
  padding-bottom: var(--spacing-3xl, 24px);
  /* Bounds the row to the same max-width/centering every other section on
     this page uses (.nd96-container), so the hero's text starts at the
     same left edge as "Media Center", "About the Occasion", etc. below it
     -- not flush against the raw viewport padding. Its *children*
     (logo/panel/controls) still end up on the correct side for the
     language even though this box itself spans the full centered width:
     a plain block child narrower than its parent naturally sits at
     whichever physical edge is that parent's inline-start under the
     current `dir`, with no extra rule needed -- verified via computed
     layout, not assumed. The one exception was .nd96-hero-slider__controls,
     which had no width of its own (see its own rule) and so stretched to
     fill this entire box instead of hugging that same edge. */
  width: 100%;
  max-width: var(--container-max-width-desktop, 1280px);
  margin-inline: auto;
  /* Sits above the deck (z-index 1 vs 0) and, being full-width again,
     does cover it -- pointer-events:none is what stops that from
     swallowing clicks meant for the peeking coverflow tiles underneath.
     Only the actual interactive part (the controls) re-enables pointer
     events. Same technique as the reference. */
  pointer-events: none;
}
.nd96-hero-slider__controls { pointer-events: auto; }
.nd96-hero-slider__logo {
  display: block;
  width: min(160px, 40vw);
  height: auto;
  margin-bottom: var(--spacing-3xl, 24px);
}
.nd96-hero-slider__panel { display: none; max-width: 640px; }
.nd96-hero-slider__panel.is-active {
  display: block;
  animation: nd96-panel-in .5s cubic-bezier(.4,0,.2,1);
}
@keyframes nd96-panel-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nd96-hero-slider__panel.is-active { animation: none; }
}
.nd96-hero-slider__title {
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 var(--spacing-3xl, 24px);
  text-align: left;
}
:is(html[dir="rtl"]) .nd96-hero-slider__title { text-align: right; }
/* Actual per-slide accent colour set inline in the blade template (from
   $nd96_slides[$i]['accent_color'], Sathish's own values: D8B67A / DED8F7 /
   07B9FF / FF383C / C9E0BB / EBFFE6). This is just the fallback if that
   inline style is ever missing. */
.nd96-hero-slider__accent { color: inherit; }
/* Blinking caret after the accent word -- always running (matches the
   reference), not just while the JS typing effect is mid-animation. */
.nd96-hero-slider__caret {
  display: inline-block;
  width: 2px;
  height: .72em;
  margin-inline-start: 2px;
  background-color: currentColor;
  vertical-align: -0.05em;
  animation: nd96-caret .9s step-end infinite;
}
@keyframes nd96-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nd96-hero-slider__caret { animation: none; }
}
@media (max-width: 1310px) {
  .nd96-hero-slider {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    /* display:contents below strips .nd96-hero-slider__container's own
       padding away entirely (a `display:contents` box generates no box of
       its own, padding included), so both the header-clearance (top) and
       the bottom breathing room have to move back here for this stacked
       layout specifically -- without the bottom one, the controls/dots
       (the last item) sat flush against the section's bottom edge. */
    padding-block: var(--spacing-8xl, 80px) var(--spacing-3xl, 24px);
    text-align: center;
    gap: var(--spacing-3xl, 24px);
  }
  /* Unwraps the container so the logo/panel/controls become direct flex
     children of .nd96-hero-slider, interleaved with the deck via `order`
     below -- same technique the reference uses for its stacked mobile
     layout. */
  .nd96-hero-slider__container { display: contents; }
  .nd96-hero-slider__logo { order: 1; margin-inline: auto; position: relative; top: 20px; }
  .nd96-hero-slider__deck {
    order: 2;
    position: relative;
    inset-inline-end: auto;
    top: auto;
    transform: none;
    width: calc(100% + var(--spacing-8xl, 32px));
    max-width: 651px;
    height: auto;
    aspect-ratio: 430 / 324;
  }
  .nd96-hero-slider__tile {
    inset-inline-start: calc(22.23% + var(--nd96-rel, 0) * 69.17%);
    top: 13.15%;
    width: 55.54%;
    height: 73.7%;
    background-size: contain;
    background-position: 50% center;
    opacity: 0;
    transition: inset-inline-start .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1), width .6s cubic-bezier(.4,0,.2,1), height .6s cubic-bezier(.4,0,.2,1), opacity .6s cubic-bezier(.4,0,.2,1);
  }
  .nd96-hero-slider__tile.is-near { opacity: 1; }
  .nd96-hero-slider__tile.is-active {
    inset-inline-start: 12.33%;
    top: 0;
    width: 75.35%;
    height: 100%;
    box-shadow: none;
  }
  /* width:100% (not just max-width) matters here: as a flex item in a
     centered (align-items:center) column, a block with no explicit width
     sizes to its own "fit-content" -- which for a paragraph of text
     commonly computes narrower than the actual available space, making it
     wrap into more/shorter lines than necessary. Explicit width:100% is
     what makes the text use the full available column width like the
     reference, instead of wrapping early. */
  .nd96-hero-slider__panel { order: 3; width: 100%; max-width: 100%; }
  .nd96-hero-slider__title,
  :is(html[dir="rtl"]) .nd96-hero-slider__title { text-align: center; font-size: clamp(28px, 7vw, 40px); }
}
/* "Tablet" range (768-1310px) -- the reference gives this its own
   distinct sizing rather than reusing the same squeeze as true mobile: a
   fixed 491px-tall deck (same active-tile size as desktop) that shows
   several neighbours spread out and centered, instead of the smaller
   percentage-based single-side peek below 768px. This is what makes the
   reference show visibly more of the side photos as the window gets
   wider within this range -- skipping this range earlier (reusing the
   <768px rules all the way up to 1310px) was the actual bug. */
@media (max-width: 1310px) and (min-width: 768px) {
  .nd96-hero-slider__deck {
    aspect-ratio: auto;
    height: 491px;
    max-width: 900px;
  }
  .nd96-hero-slider__tile {
    inset-inline-start: calc(50% - 180.9px + var(--nd96-rel, 0) * 450.65px);
    top: 64.6px;
    width: 361.8px;
    height: 361.8px;
  }
  .nd96-hero-slider__tile.is-active {
    inset-inline-start: calc(50% - 245.5px);
    top: 0;
    width: 491px;
    height: 491px;
  }
}
.nd96-hero-slide__desc {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  /* Pixel-sampled from the Figma reference JPGs -- solid white, not the
     85%-opacity muted tone used before. */
  color: #fff;
  max-width: 560px;
  margin: 0;
  text-align: left;
}
:is(html[dir="rtl"]) .nd96-hero-slide__desc { text-align: right; }
@media (max-width: 1310px) {
  /* margin-inline:auto matters as much as text-align:center here: the
     560px max-width box itself needs centering within the (often much
     wider, especially in the 768-1310 tablet range) panel, not just the
     text wrapped inside it -- otherwise the box sits flush at the panel's
     start edge with only its own short lines centered within that narrow
     box, which reads as "left-aligned" overall. */
  .nd96-hero-slide__desc { text-align: center; margin-inline: auto; }
  :is(html[dir="rtl"]) .nd96-hero-slide__desc { text-align: center; }
}
.nd96-hero-slide__desc--short { display: none; }
@media (max-width: 640px) {
  .nd96-hero-slide__desc--full { display: none; }
  .nd96-hero-slide__desc--short { display: block; }
}
.nd96-hero-slider__controls {
  /* Normal flow, right after whichever panel is active -- matches the
     reference (its own .nd96-hero__controls isn't absolutely positioned
     either), and sidesteps the old fixed-bottom-offset overlapping the
     paragraph on slides whose text wraps an extra line.

     No forced `direction: ltr` here (unlike the previous crossfade
     slider) -- that was also what made this element stretch away from
     the text column in Arabic: forcing ltr on a flex row disconnects its
     own "start" edge from the page's real (rtl) one, so `justify-content:
     flex-start` no longer agreed with where the text next to it actually
     was. Left to inherit the page's own direction, like the reference
     does, the buttons legitimately swap sides in Arabic (prev renders on
     the right, next on the left) -- the arrow icons are flipped below to
     still point the intuitively correct way when that happens.

     width:fit-content is the other half of that same fix: a flex
     container is still a block box, and width:auto on a block box means
     "fill the parent" -- without this it stretched across the entire
     (now full-width again) .nd96-hero-slider__container instead of
     hugging the same edge as the logo/title/description above it. */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  margin-top: var(--spacing-3xl, 24px);
  gap: var(--spacing-xl, 16px);
}
@media (max-width: 1310px) {
  .nd96-hero-slider__controls { order: 4; justify-content: center; }
}
/* Same reasoning as the reference's own icon-flip rules: once prev/next
   swap sides in Arabic, "previous" now sits on the right (where Arabic
   reading begins) and should point right; "next" sits on the left and
   should point left -- the mirror image of their English-mode icons. */
[dir="rtl"] .nd96-hero-slider__arrow--prev svg,
[dir="rtl"] .nd96-hero-slider__arrow--next svg {
  transform: scaleX(-1);
}
.nd96-hero-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full, 9999px);
  /* !important: Tailwind's preflight resets `button` to background-color:
     initial (same pattern already used throughout dga-buttons.css to win
     against that same reset). */
  background: var(--button-background-primary-default, #1b8354) !important;
  color: var(--colors-base-white, #fff);
  border: 0;
  cursor: pointer;
  flex: none;
}
.nd96-hero-slider__arrow:hover { background: var(--button-background-primary-hovered, #166a45) !important; }
.nd96-hero-slider__arrow svg { width: 16px; height: 16px; }
@media (max-width: 1310px) {
  /* Mobile: dots only, centered -- per the Figma mobile reference (no
     arrow buttons at all there). Placed AFTER the base .nd96-hero-slider__
     arrow rule above -- same specificity, so source order decides, and
     this needs to win. */
  .nd96-hero-slider__controls { justify-content: center; }
  .nd96-hero-slider__arrow { display: none; }
}
.nd96-hero-slider__dots { display: flex; align-items: center; gap: var(--spacing-md, 8px); }
.nd96-hero-slider__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full, 9999px);
  border: 0;
  padding: 0;
  /* Controls sit on the plain white area below the hero (not the gradient),
     so inactive dots need a visible-on-white neutral, not translucent white. */
  background: var(--border-neutral-primary, #d0d5dd) !important;
  cursor: pointer;
}
.nd96-hero-slider__dot.is-active { background: var(--colors-primary-sa-flag-400, #54c08a) !important; }

/* Shared action-row layout, reused outside the hero (Upcoming Events head
   row, His Excellency spotlight, gallery videos CTA -- see dga-national-day-
   96.css usages of .nd96-hero__actions further down this file). */
.nd96-hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3xl, 24px); }

/* ---------- about / stats ---------- */
.nd96-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-4xl, 32px);
  margin-top: var(--spacing-6xl, 48px);
}
@media (max-width: 900px) { .nd96-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nd96-stat {
  text-align: center;
  padding: var(--spacing-4xl, 32px) var(--spacing-2xl, 20px);
  border: 1px solid var(--border-neutral-secondary, #e5e7eb);
  border-radius: var(--radius-2xl, 16px);
  background: var(--background-white, #fff);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nd96-stat:hover { border-color: var(--border-primary-light, #b8eacb); box-shadow: var(--shadow-md); }
.nd96-stat__icon {
  width: 56px; height: 56px;
  margin-inline: auto;
  margin-bottom: var(--spacing-3xl, 24px);
  border-radius: var(--radius-full, 9999px);
  background: var(--background-primary-50, #f3fcf6);
  color: var(--icon-primary, #1b8354);
  display: flex; align-items: center; justify-content: center;
}
.nd96-stat__icon svg { width: 26px; height: 26px; }
.nd96-stat__value {
  font-size: 32px;
  font-weight: 800;
  color: var(--colors-primary-sa-flag-800, #14573a);
  line-height: 1.2;
}
.nd96-stat__label {
  margin-top: var(--spacing-md, 8px);
  color: var(--text-secondary-paragraph, #6c727e);
  font-size: 14px;
}

/* ---------- spotlight (His Excellency message) ---------- */
.nd96-spotlight {
  background: var(--background-primary-25, #f7fdf9);
  position: relative;
  overflow: hidden;
}
.nd96-spotlight__grid {
  max-width: var(--container-max-width-desktop, 1280px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: var(--spacing-8xl, 80px);
  align-items: center;
}
@media (max-width: 960px) { .nd96-spotlight__grid { grid-template-columns: 1fr; gap: var(--spacing-6xl, 48px); } }
.nd96-spotlight__photo {
  position: relative;
  border-radius: var(--radius-3xl, 20px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--colors-primary-sa-flag-100, #dff6e7);
}
.nd96-spotlight__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nd96-spotlight__label {
  color: var(--colors-primary-sa-flag-700, #166a45);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nd96-spotlight blockquote {
  margin: var(--spacing-3xl, 24px) 0 var(--spacing-xl, 12px);
  padding-inline-start: var(--spacing-3xl, 24px);
  border-inline-start: 3px solid var(--colors-secondary-gold-500, #f5bd02);
  color: var(--text-primary-paragraph, #384250);
  font-size: 17px;
  line-height: 1.7;
}
.nd96-spotlight__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xl, 12px); margin-top: var(--spacing-3xl, 24px); }
.nd96-spotlight__actions .nd96-btn { width: 170px; min-width: 170px; justify-content: center; text-align: center; box-sizing: border-box; }
.nd96-spotlight__actions-row { display: flex; flex-wrap: wrap; gap: var(--spacing-xl, 12px); }
.nd96-spotlight__attribution {
  font-weight: 700;
  color: var(--text-primary-heading, #1a2e1a);
  font-size: 15px;
  margin-top: var(--spacing-2xl, 20px);
  margin-bottom: 0;
}

/* ---------- services carousel ---------- */
.nd96-track {
  display: flex;
  gap: var(--spacing-4xl, 32px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--spacing-2xl, 20px);
  scrollbar-width: none;
}
.nd96-track::-webkit-scrollbar { display: none; }
.nd96-track__nav {
  display: flex;
  gap: var(--spacing-2xl, 20px);
  justify-content: flex-end;
  margin-bottom: var(--spacing-3xl, 24px);
}
.nd96-track__btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--border-neutral-primary, #d2d6db);
  background: var(--background-white, #fff);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--colors-neutral-700, #384250);
}
.nd96-track__btn:hover { background: var(--background-primary-50, #f3fcf6); border-color: var(--border-primary-light, #b8eacb); }
.nd96-track__btn svg { width: 18px; height: 18px; }
[dir="rtl"] .nd96-track__btn svg { transform: scaleX(-1); }

.nd96-service-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 32vw, 340px);
  border: 1px solid var(--border-neutral-secondary, #e5e7eb);
  border-radius: var(--radius-2xl, 16px);
  background: var(--background-white, #fff);
  padding: var(--spacing-4xl, 32px);
  display: flex;
  flex-direction: column;
}
.nd96-service-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-lg, 16px);
  background: var(--background-primary-50, #f3fcf6);
  color: var(--icon-primary, #1b8354);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--spacing-3xl, 24px);
}
.nd96-service-card__icon svg { width: 24px; height: 24px; }
.nd96-service-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-display, #1f2a37);
  margin: 0 0 var(--spacing-md, 8px);
}
.nd96-service-card p {
  font-size: 15px;
  color: var(--text-primary-paragraph, #384250);
  line-height: 1.6;
  margin: 0 0 var(--spacing-3xl, 24px);
  flex: 1;
}
/* Green pill button, matching the real sitewide .dga-media-card__link
   recipe (homepage "Read More" cards) instead of a plain text link. */
.nd96-service-card__link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md, 8px);
  padding: 10px 20px;
  background-color: var(--button-background-primary-default, #1b8354);
  color: #fff;
  border-radius: var(--radius-md, 8px);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .15s ease;
}
.nd96-service-card__link:hover { background-color: var(--colors-primary-sa-flag-700, #166a45); color: #fff; }
.nd96-service-card__link svg { width: 16px; height: 16px; }
[dir="rtl"] .nd96-service-card__link svg { transform: scaleX(-1); }

/* ---------- CTA banner ---------- */
.nd96-cta {
  border-radius: var(--radius-3xl, 20px);
  overflow: hidden;
  position: relative;
  padding: var(--spacing-6xl, 48px) var(--spacing-6xl, 48px);
  color: var(--colors-base-white, #fff);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4xl, 32px);
}
.nd96-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  /* rgba equivalents of --colors-primary-sa-flag-900 (#104631) and -700
     (#166a45) -- var() output can't take a trailing hex-alpha suffix like
     `var(--x)e6`, that's invalid CSS and silently drops the whole
     declaration, which is why this overlay wasn't rendering at all. */
  background: linear-gradient(120deg, rgba(16, 70, 49, .92), rgba(22, 106, 69, .82));
  z-index: 0;
}
.nd96-cta > * { position: relative; z-index: 1; }
.nd96-cta h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  max-width: 640px;
  margin: 0;
  line-height: 1.4;
}

/* ---------- media / articles ---------- */
.nd96-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4xl, 32px);
}
@media (max-width: 900px) { .nd96-media-grid { grid-template-columns: 1fr; } }
.nd96-media-card {
  border: 1px solid var(--border-neutral-secondary, #e5e7eb);
  border-radius: var(--radius-2xl, 16px);
  overflow: hidden;
  background: var(--background-white, #fff);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.nd96-media-card:hover { transform: none; box-shadow: none; }
.nd96-media-card img { width: 100%; height: 190px; object-fit: cover; display: block; flex: none; }
.nd96-media-card__body {
  padding: var(--spacing-3xl, 24px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nd96-media-card__meta {
  color: var(--text-secondary-paragraph, #6c727e);
  font-size: 13px;
  margin-bottom: var(--spacing-md, 8px);
}
.nd96-media-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-display, #1f2a37);
  line-height: 1.5;
  margin: 0 0 var(--spacing-md, 8px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Green pill button, matching the real sitewide .dga-media-card__link
   recipe (homepage "Read More" cards) instead of a plain text link. */
.nd96-media-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md, 8px);
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 20px;
  background-color: var(--button-background-primary-default, #1b8354);
  color: #fff;
  border-radius: var(--radius-md, 8px);
  font-weight: 600;
  font-size: 14px;
  transition: background-color .15s ease;
}
.nd96-media-card:hover .nd96-media-card__link { background-color: var(--colors-primary-sa-flag-700, #166a45); }

/* ---------- festive sparkle overlay ---------- */
.nd96-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.nd96-sparkles span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--colors-secondary-gold-400, #f7d54d);
  border-radius: 50%;
  opacity: .2;
  filter: drop-shadow(0 0 4px rgba(247, 213, 77, .8));
  animation: nd96-twinkle 3s ease-in-out infinite;
}
.nd96-sparkles--sparse { color: var(--colors-primary-sa-flag-400, #54c08a); }
.nd96-sparkles--sparse span { background: var(--colors-primary-sa-flag-400, #54c08a); filter: drop-shadow(0 0 4px rgba(84, 192, 138, .6)); }
@keyframes nd96-twinkle {
  0%, 100% { opacity: .15; transform: scale(.6); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nd96-sparkles span { animation: none; opacity: .6; }
}

/* ---------- countdown ---------- */
.nd96-countdown {
  position: relative;
  z-index: 1;
  margin: -30px auto 0;
  max-width: var(--container-max-width-desktop, 1280px);
  background: linear-gradient(180deg, var(--colors-secondary-gold-25, #fffef7), var(--colors-base-white, #fff));
  border: 1px solid var(--colors-secondary-gold-100, #fffce6);
  border-radius: var(--radius-3xl, 20px);
  box-shadow: var(--shadow-xl);
  padding: var(--spacing-4xl, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3xl, 24px);
  margin-inline: var(--spacing-4, 16px);
}
@media (min-width: 1312px) { .nd96-countdown { margin-inline: auto; } }
@media (max-width: 960px) { .nd96-countdown { margin-top: -15px; } }
.nd96-countdown__intro { display: flex; align-items: center; gap: var(--spacing-3xl, 24px); }
.nd96-countdown__icon {
  width: 52px; height: 52px;
  flex: none;
  border-radius: var(--radius-full, 9999px);
  background: var(--background-primary-50, #f3fcf6);
  color: var(--icon-primary, #1b8354);
  display: flex; align-items: center; justify-content: center;
}
.nd96-countdown__icon svg { width: 24px; height: 24px; }
.nd96-countdown__label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary-paragraph, #6c727e);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nd96-countdown__title {
  font-weight: 800;
  font-size: 19px;
  color: var(--colors-primary-sa-flag-800, #14573a);
  margin-top: 2px;
}
.nd96-countdown__timer { display: flex; align-items: center; gap: var(--spacing-xl, 16px); }
.nd96-countdown__sep {
  font-size: 24px;
  font-weight: 800;
  color: var(--colors-secondary-gold-400, #f7d54d);
  margin-top: -18px;
}
.nd96-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  background: var(--colors-primary-sa-flag-800, #14573a);
  border-radius: var(--radius-lg, 16px);
  padding: var(--spacing-lg, 12px) var(--spacing-md, 8px);
}
.nd96-countdown__unit span {
  font-size: 30px;
  font-weight: 800;
  color: var(--colors-base-white, #fff);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.nd96-countdown__unit small {
  font-size: 11px;
  color: var(--colors-secondary-gold-300, #fae996);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
}
@media (max-width: 560px) {
  .nd96-countdown__sep { display: none; }
  .nd96-countdown__timer { gap: var(--spacing-md, 8px); }
  .nd96-countdown__unit { min-width: 60px; }
}

/* ---------- countdown decoration (EXPERIMENTAL -- Sathish said "just a
   try, else we will revert"; delete this whole block to go back to the
   plain card above with zero side effects, nothing else depends on it) ---------- */
.nd96-countdown {
  overflow: hidden;
}
.nd96-countdown::before {
  /* Thin accent bar across the top, using the same 6 hero-slide theme
     colors as the fireworks overlay, tying the card back to the slider. */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, #769563, #84063f, #00a1e0, #7c5d21, #6060dd, #5aba1c);
}
.nd96-countdown::after {
  /* Faint Sadu-style diamond texture behind the content -- one subdued
     brand color, kept low-opacity so the timer digits/labels stay legible. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L38 20 L20 38 L2 20 Z' fill='none' stroke='%231b8354' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* ---------- section tint (used for Upcoming Events) ---------- */
.nd96-section--tint {
  background: var(--background-primary-25, #f7fdf9);
  position: relative;
}

/* ---------- events ---------- */
.nd96-events {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4xl, 32px);
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) { .nd96-events { grid-template-columns: 1fr; } }
.nd96-event-card {
  position: relative;
  background: var(--background-white, #fff);
  border: 1px solid var(--border-neutral-secondary, #e5e7eb);
  border-radius: var(--radius-2xl, 16px);
  padding: var(--spacing-4xl, 32px);
  transition: box-shadow .15s ease, transform .15s ease;
}
.nd96-event-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.nd96-event-card__date {
  position: absolute;
  top: var(--spacing-4xl, 32px);
  inset-inline-end: var(--spacing-4xl, 32px);
  background: var(--colors-secondary-gold-50, #fffef2);
  color: var(--colors-secondary-gold-800, #945c01);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-full, 9999px);
}
.nd96-event-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-lg, 16px);
  background: var(--background-primary-50, #f3fcf6);
  color: var(--icon-primary, #1b8354);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--spacing-3xl, 24px);
}
.nd96-event-card__icon svg { width: 24px; height: 24px; }
.nd96-event-card h3 { font-size: 18px; font-weight: 700; color: var(--text-display, #1f2a37); margin: 0 0 8px; }
.nd96-event-card p { font-size: 15px; color: var(--text-primary-paragraph, #384250); line-height: 1.6; margin: 0 0 16px; }
.nd96-event-card__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary-paragraph, #6c727e);
  margin-bottom: var(--spacing-3xl, 24px);
}
.nd96-event-card__meta svg { width: 15px; height: 15px; flex: none; }

/* ---------- share / engagement ---------- */
.nd96-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4xl, 32px);
  background: var(--colors-primary-sa-flag-800, #14573a);
  color: var(--colors-base-white, #fff);
  border-radius: var(--radius-3xl, 20px);
  padding: var(--spacing-5xl, 40px);
}
.nd96-share .nd96-heading, .nd96-share p { color: var(--colors-base-white, #fff); }
.nd96-share__hashtag {
  display: inline-block;
  margin-top: var(--spacing-3xl, 24px);
  font-weight: 700;
  color: var(--colors-secondary-gold-400, #f7d54d);
  letter-spacing: .02em;
}
.nd96-share__actions { display: flex; gap: 16px; align-items: center; }
.nd96-share__btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.nd96-share__btn svg { width: 28px; height: 28px; }
.nd96-share__btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-2px); }

/* ---------- heritage & traditions ---------- */
.nd96-heritage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-4xl, 32px);
  margin-top: var(--spacing-6xl, 48px);
}
@media (max-width: 900px) { .nd96-heritage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nd96-heritage-item { text-align: center; }
.nd96-heritage-item__icon {
  width: 64px; height: 64px;
  margin-inline: auto;
  margin-bottom: var(--spacing-3xl, 24px);
  border-radius: var(--radius-full, 9999px);
  background: var(--background-secondary-50, #fffef2);
  color: var(--colors-secondary-gold-700, #b87b02);
  display: flex; align-items: center; justify-content: center;
}
.nd96-heritage-item__icon svg { width: 28px; height: 28px; }
.nd96-heritage-item h3 { font-size: 16px; font-weight: 700; color: var(--text-display, #1f2a37); margin: 0 0 8px; }
.nd96-heritage-item p { font-size: 14px; color: var(--text-secondary-paragraph, #6c727e); line-height: 1.55; margin: 0; }

/* ---------- media gallery ---------- */
.nd96-gallery-tabs { display: flex; gap: var(--spacing-md, 8px); background: var(--background-neutral-100, #f3f4f6); padding: 4px; border-radius: var(--radius-full, 9999px); }
.nd96-gallery-tab {
  border: none;
  background: transparent;
  padding: 8px 20px;
  border-radius: var(--radius-full, 9999px);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary-paragraph, #6c727e);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.nd96-gallery-tab.is-active { background: var(--colors-base-white, #fff); color: var(--colors-primary-sa-flag-700, #166a45); box-shadow: var(--shadow-xs); }
.nd96-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3xl, 24px);
}
@media (max-width: 900px) { .nd96-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nd96-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg, 16px);
  transition: transform .2s ease;
}
.nd96-gallery-grid img:hover { transform: scale(1.02); }
.nd96-gallery-videos-cta {
  text-align: center;
  padding: var(--spacing-6xl, 48px) var(--spacing-4xl, 32px);
  background: var(--background-neutral-50, #f9fafb);
  border-radius: var(--radius-2xl, 16px);
}
.nd96-gallery-videos-cta p { color: var(--text-primary-paragraph, #384250); margin-bottom: var(--spacing-3xl, 24px); }
.nd96-gallery-videos-cta .nd96-hero__actions { justify-content: center; }

/* ---------- partners ---------- */
.nd96-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8xl, 80px);
}
.nd96-partners img { max-height: 56px; width: auto; filter: grayscale(1); opacity: .75; transition: opacity .15s ease, filter .15s ease; }
.nd96-partners img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- header touch (subtle festive ribbon, no functional changes) ---------- */
/* Client feedback: hide this ribbon entirely. */
.nd96-ribbon {
  display: none;
  height: 4px;
  background: linear-gradient(90deg, var(--colors-primary-sa-flag-600-primary, #1b8354), var(--colors-secondary-gold-500, #f5bd02), var(--colors-primary-sa-flag-600-primary, #1b8354));
}

/* ---------- footer reskin: Dark Green Footer guideline variant ----------
   Applies to the REAL sitewide footer (sections.footer), not a duplicate,
   so links/menus/widgets stay correct and maintained in one place. Scoped
   to this template's own body class only -- never touches the original
   national-day-template.blade.php or any other page. */
body.page-template-national-day-96-template-dga footer {
  background: var(--background-success-900, #074d31) !important;
  color: var(--colors-base-white, #fff);
}
body.page-template-national-day-96-template-dga footer a {
  color: var(--colors-base-white, #fff) !important;
}
/* Decorative Sadu-pattern strip anchored to the bottom edge of the footer
   (footer-backeground.png -- transparent PNG, repeats horizontally). Extra
   bottom padding on the footer reserves clear room for the band so it
   doesn't overlap the copyright row above it. */
body.page-template-national-day-96-template-dga footer {
  background-image: url('../../public/nationalday-images/footer-backeground.png') !important;
  background-repeat: repeat-x !important;
  background-position: left bottom !important;
  background-size: auto 120px !important;
  padding-bottom: 140px !important;
}