/*
 * DGA National Day 95 template.
 *
 * Creative theming for the "National Day Template (DGA)" page template
 * (national-day-template-dga.blade.php) -- a separate, new template that
 * does NOT touch or replace the client's existing "National Day template"
 * (national-day-template.blade.php), 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 .nd95 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)
 */

.nd95 {
  overflow: hidden;
}

/* ---------- shared section rhythm ---------- */
.nd95-section {
  padding-block: var(--spacing-9xl, 96px);
  padding-inline: var(--spacing-4, 16px);
}
.nd95-container {
  max-width: var(--container-max-width-desktop, 1280px);
  margin-inline: auto;
}
.nd95-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);
}
.nd95-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 9999px);
  background: var(--colors-secondary-gold-600-primary, #dba102);
  flex: none;
}
.nd95-heading {
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-display, #1f2a37);
  margin: 0;
}
.nd95-lede {
  color: var(--text-primary-paragraph, #384250);
  font-size: 16px;
  line-height: 1.6;
  max-width: 720px;
  margin-top: var(--spacing-3xl, 24px);
}
.nd95-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) ---------- */
.nd95-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;
}
.nd95-btn:hover { transform: translateY(-1px); }
.nd95-btn--primary {
  background: var(--button-background-primary-default, #1b8354);
  color: var(--colors-base-white, #fff);
}
.nd95-btn--primary:hover { background: var(--button-background-primary-hovered, #166a45); }
.nd95-btn--onColor {
  background: var(--colors-base-white, #fff);
  color: var(--colors-primary-sa-flag-800, #14573a);
}
.nd95-btn--onColor:hover { background: var(--alpha-white-80, #ffffffcc); }
.nd95-btn--outline {
  background: transparent;
  color: var(--colors-primary-sa-flag-700, #166a45);
  border-color: var(--border-neutral-primary, #d2d6db);
}
.nd95-btn--outline:hover {
  border-color: var(--colors-primary-sa-flag-600-primary, #1b8354);
  color: var(--colors-primary-sa-flag-800, #14573a);
}
.nd95-btn svg { width: 16px; height: 16px; flex: none; }
[dir="rtl"] .nd95-btn svg { transform: scaleX(-1); }

/* ---------- ornamental divider (Option 1: traditional pattern dividers) ---------- */
.nd95-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);
}
.nd95-divider::before,
.nd95-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  max-width: 220px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.nd95-divider::after { background: linear-gradient(90deg, currentColor, transparent); }
.nd95-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. */
.nd95-divider-img {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--spacing-4xl, 32px);
}

/* ---------- hero ---------- */
.nd95-hero {
  position: relative;
  color: var(--colors-base-white, #fff);
  background:
    radial-gradient(circle at 15% 20%, var(--colors-alpha-alpha-white-10, #ffffff19), transparent 40%),
    linear-gradient(135deg, var(--colors-primary-sa-flag-900, #104631) 0%, var(--colors-primary-sa-flag-700, #166a45) 55%, var(--colors-primary-sa-flag-600-primary, #1b8354) 100%);
  padding-block: var(--spacing-11xl, 160px) 170px;
  padding-inline: var(--spacing-4, 16px);
  isolation: isolate;
}
.nd95-hero::before {
  /* Sadu-inspired repeating diamond motif, drawn purely in CSS so it never
     depends on a missing illustration asset. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .12;
  background-image:
    linear-gradient(45deg, var(--colors-base-white, #fff) 25%, transparent 25%, transparent 75%, var(--colors-base-white, #fff) 75%),
    linear-gradient(45deg, var(--colors-base-white, #fff) 25%, transparent 25%, transparent 75%, var(--colors-base-white, #fff) 75%);
  background-size: 48px 48px;
  background-position: 0 0, 24px 24px;
  animation: nd95-drift 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nd95-hero::before { animation: none; }
}
@keyframes nd95-drift {
  from { background-position: 0 0, 24px 24px; }
  to   { background-position: 480px 480px, 504px 504px; }
}
.nd95-hero__inner {
  max-width: var(--container-max-width-desktop, 1280px);
  margin-inline: auto;
  position: relative;
}

/* Leaders Portrait Hero: text column + leadership portrait column */
.nd95-hero__inner--split {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--spacing-8xl, 80px);
  align-items: center;
}
@media (max-width: 960px) {
  .nd95-hero__inner--split { grid-template-columns: 1fr; gap: var(--spacing-6xl, 48px); }
}
.nd95-hero__portrait {
  /* kings3.png ships with its own decorative Sadu-pattern border baked in,
     so this container just frames it with a shadow -- no radius/crop, or
     the corner motifs of the artwork's own border get clipped. */
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  aspect-ratio: 1317 / 1194;
  max-width: 420px;
  margin-inline: auto;
}
.nd95-hero__portrait img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Compact "96" lockup -- a small badge above the headline rather than a
   large block, so the leadership portrait stays the dominant visual. */
.nd95-hero__badge {
  display: inline-flex;
  background: var(--colors-base-white, #fff);
  padding: var(--spacing-md, 8px) var(--spacing-xl, 16px);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--spacing-3xl, 24px);
}
.nd95-hero__badge-logo {
  display: block;
  width: min(180px, 45vw);
  height: auto;
}
.nd95-hero h1 {
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}
.nd95-hero__accent { color: var(--colors-secondary-gold-400, #f7d54d); }
.nd95-hero p {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--text-oncolor-secondary, rgba(255,255,255,.8));
  max-width: 560px;
  margin-block: var(--spacing-4xl, 32px);
}
.nd95-hero__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-3xl, 24px); }
.nd95-hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  line-height: 0;
}
.nd95-hero__wave svg { width: 100%; height: auto; display: block; }

/* ---------- about / stats ---------- */
.nd95-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) { .nd95-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nd95-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;
}
.nd95-stat:hover { border-color: var(--border-primary-light, #b8eacb); box-shadow: var(--shadow-md); }
.nd95-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;
}
.nd95-stat__icon svg { width: 26px; height: 26px; }
.nd95-stat__value {
  font-size: 32px;
  font-weight: 800;
  color: var(--colors-primary-sa-flag-800, #14573a);
  line-height: 1.2;
}
.nd95-stat__label {
  margin-top: var(--spacing-md, 8px);
  color: var(--text-secondary-paragraph, #6c727e);
  font-size: 14px;
}

/* ---------- spotlight (His Excellency message) ---------- */
.nd95-spotlight {
  background: var(--background-primary-25, #f7fdf9);
  position: relative;
  overflow: hidden;
}
.nd95-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) { .nd95-spotlight__grid { grid-template-columns: 1fr; gap: var(--spacing-6xl, 48px); } }
.nd95-spotlight__photo {
  position: relative;
  border-radius: var(--radius-3xl, 20px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--colors-primary-sa-flag-100, #dff6e7);
}
.nd95-spotlight__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nd95-spotlight__label {
  color: var(--colors-primary-sa-flag-700, #166a45);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nd95-spotlight blockquote {
  margin: var(--spacing-3xl, 24px) 0 var(--spacing-5xl, 40px);
  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;
}
.nd95-spotlight__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2xl, 20px); }

/* ---------- services carousel ---------- */
.nd95-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;
}
.nd95-track::-webkit-scrollbar { display: none; }
.nd95-track__nav {
  display: flex;
  gap: var(--spacing-2xl, 20px);
  justify-content: flex-end;
  margin-bottom: var(--spacing-3xl, 24px);
}
.nd95-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);
}
.nd95-track__btn:hover { background: var(--background-primary-50, #f3fcf6); border-color: var(--border-primary-light, #b8eacb); }
.nd95-track__btn svg { width: 18px; height: 18px; }
[dir="rtl"] .nd95-track__btn svg { transform: scaleX(-1); }

.nd95-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;
}
.nd95-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);
}
.nd95-service-card__icon svg { width: 24px; height: 24px; }
.nd95-service-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-display, #1f2a37);
  margin: 0 0 var(--spacing-md, 8px);
}
.nd95-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. */
.nd95-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;
}
.nd95-service-card__link:hover { background-color: var(--colors-primary-sa-flag-700, #166a45); color: #fff; }
.nd95-service-card__link svg { width: 16px; height: 16px; }
[dir="rtl"] .nd95-service-card__link svg { transform: scaleX(-1); }

/* ---------- CTA banner ---------- */
.nd95-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);
}
.nd95-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;
}
.nd95-cta > * { position: relative; z-index: 1; }
.nd95-cta h2 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  max-width: 640px;
  margin: 0;
  line-height: 1.4;
}

/* ---------- media / articles ---------- */
.nd95-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-4xl, 32px);
}
@media (max-width: 900px) { .nd95-media-grid { grid-template-columns: 1fr; } }
.nd95-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%;
}
.nd95-media-card:hover { transform: none; box-shadow: none; }
.nd95-media-card img { width: 100%; height: 190px; object-fit: cover; display: block; flex: none; }
.nd95-media-card__body {
  padding: var(--spacing-3xl, 24px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.nd95-media-card__meta {
  color: var(--text-secondary-paragraph, #6c727e);
  font-size: 13px;
  margin-bottom: var(--spacing-md, 8px);
}
.nd95-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. */
.nd95-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;
}
.nd95-media-card:hover .nd95-media-card__link { background-color: var(--colors-primary-sa-flag-700, #166a45); }

/* ---------- festive sparkle overlay ---------- */
.nd95-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.nd95-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: nd95-twinkle 3s ease-in-out infinite;
}
.nd95-sparkles--sparse { color: var(--colors-primary-sa-flag-400, #54c08a); }
.nd95-sparkles--sparse span { background: var(--colors-primary-sa-flag-400, #54c08a); filter: drop-shadow(0 0 4px rgba(84, 192, 138, .6)); }
@keyframes nd95-twinkle {
  0%, 100% { opacity: .15; transform: scale(.6); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nd95-sparkles span { animation: none; opacity: .6; }
}

/* ---------- countdown ---------- */
.nd95-countdown {
  position: relative;
  z-index: 1;
  margin: -70px 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) { .nd95-countdown { margin-inline: auto; } }
.nd95-countdown__intro { display: flex; align-items: center; gap: var(--spacing-3xl, 24px); }
.nd95-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;
}
.nd95-countdown__icon svg { width: 24px; height: 24px; }
.nd95-countdown__label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary-paragraph, #6c727e);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.nd95-countdown__title {
  font-weight: 800;
  font-size: 19px;
  color: var(--colors-primary-sa-flag-800, #14573a);
  margin-top: 2px;
}
.nd95-countdown__timer { display: flex; align-items: center; gap: var(--spacing-xl, 16px); }
.nd95-countdown__sep {
  font-size: 24px;
  font-weight: 800;
  color: var(--colors-secondary-gold-400, #f7d54d);
  margin-top: -18px;
}
.nd95-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);
}
.nd95-countdown__unit span {
  font-size: 30px;
  font-weight: 800;
  color: var(--colors-base-white, #fff);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.nd95-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) {
  .nd95-countdown__sep { display: none; }
  .nd95-countdown__timer { gap: var(--spacing-md, 8px); }
  .nd95-countdown__unit { min-width: 60px; }
}

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

/* ---------- events ---------- */
.nd95-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) { .nd95-events { grid-template-columns: 1fr; } }
.nd95-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;
}
.nd95-event-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.nd95-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);
}
.nd95-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);
}
.nd95-event-card__icon svg { width: 24px; height: 24px; }
.nd95-event-card h3 { font-size: 18px; font-weight: 700; color: var(--text-display, #1f2a37); margin: 0 0 8px; }
.nd95-event-card p { font-size: 15px; color: var(--text-primary-paragraph, #384250); line-height: 1.6; margin: 0 0 16px; }
.nd95-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);
}
.nd95-event-card__meta svg { width: 15px; height: 15px; flex: none; }

/* ---------- share / engagement ---------- */
.nd95-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);
}
.nd95-share .nd95-heading, .nd95-share p { color: var(--colors-base-white, #fff); }
.nd95-share__hashtag {
  display: inline-block;
  margin-top: var(--spacing-3xl, 24px);
  font-weight: 700;
  color: var(--colors-secondary-gold-400, #f7d54d);
  letter-spacing: .02em;
}
.nd95-share__actions { display: flex; gap: 16px; align-items: center; }
.nd95-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;
}
.nd95-share__btn svg { width: 28px; height: 28px; }
.nd95-share__btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-2px); }

/* ---------- heritage & traditions ---------- */
.nd95-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) { .nd95-heritage { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nd95-heritage-item { text-align: center; }
.nd95-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;
}
.nd95-heritage-item__icon svg { width: 28px; height: 28px; }
.nd95-heritage-item h3 { font-size: 16px; font-weight: 700; color: var(--text-display, #1f2a37); margin: 0 0 8px; }
.nd95-heritage-item p { font-size: 14px; color: var(--text-secondary-paragraph, #6c727e); line-height: 1.55; margin: 0; }

/* ---------- media gallery ---------- */
.nd95-gallery-tabs { display: flex; gap: var(--spacing-md, 8px); background: var(--background-neutral-100, #f3f4f6); padding: 4px; border-radius: var(--radius-full, 9999px); }
.nd95-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;
}
.nd95-gallery-tab.is-active { background: var(--colors-base-white, #fff); color: var(--colors-primary-sa-flag-700, #166a45); box-shadow: var(--shadow-xs); }
.nd95-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3xl, 24px);
}
@media (max-width: 900px) { .nd95-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nd95-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg, 16px);
  transition: transform .2s ease;
}
.nd95-gallery-grid img:hover { transform: scale(1.02); }
.nd95-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);
}
.nd95-gallery-videos-cta p { color: var(--text-primary-paragraph, #384250); margin-bottom: var(--spacing-3xl, 24px); }
.nd95-gallery-videos-cta .nd95-hero__actions { justify-content: center; }

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

/* ---------- header touch (subtle festive ribbon, no functional changes) ---------- */
.nd95-ribbon {
  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-template-dga footer {
  background: var(--background-success-900, #074d31) !important;
  color: var(--colors-base-white, #fff);
}
body.page-template-national-day-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-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;
}