/* ============================================================
   خصمك — اليوم الوطني السعودي ٩٦
   ------------------------------------------------------------
   DRAFT, awaiting the owner's approval. Kept out of style.css so
   the live site is untouched until he says yes.

   Two pieces:
     1. .nd-banner   — the Saudi National Day strip under the header
     2. .hero-carousel — replaces the single fixed brand card in the
        hero, which only ever showed AlHome, with all nine rotating

   Every colour comes from the token set already in style.css.
   The gradients and the frond motif are CSS. Two small SVGs carry
   the rest: the flag and the skyline, ~30KB together. The site
   loads in 0.2s and that head start is worth protecting.

   THE FLAG is the official artwork as an SVG file, NOT the 🇸🇦
   emoji: Windows has no flag emoji at all and renders it as the
   bare letters "SA", and roughly a quarter of our impressions are
   desktop. Using real artwork also means the shahada is correctly
   formed rather than approximated — which a CSS shape could not do
   respectfully, and which Saudi law restricts.
   ============================================================ */

/* ---------- 1. the campaign banner ---------- */

.nd-banner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 90% 0%, #14806d 0%, transparent 60%),
    linear-gradient(105deg, #06463c 0%, #0e6b5c 55%, #12805f 100%);
  color: #fff;
  border-block: 1px solid rgba(255, 255, 255, .12);
}

/* Faint vertical fronds — a nod to the palm in both the brand name
   and the National Day identity's nature theme. Must never compete
   with the text. */
.nd-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -68deg,
    rgba(255, 255, 255, .05) 0 2px,
    transparent 2px 24px
  );
  pointer-events: none;
}

/* The Riyadh skyline, anchored to the bottom edge and faded well back.
   Deliberately low contrast: this is the room the text lives in, not a
   picture in its own right. `contain` at the bottom keeps the towers
   standing on the banner's floor at every width instead of being
   cropped through the middle. */
.nd-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/riyadh-skyline.svg") bottom center / auto 78% no-repeat;
  opacity: .13;
  pointer-events: none;
}

/* Text must sit above both decorative layers. */
.nd-banner .container > * { position: relative; z-index: 1; }

.nd-banner .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  flex-wrap: wrap;
  padding-block: 18px;
  text-align: center;
}

.nd-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

/* The khasmak wordmark, restated inside the banner beside the flag —
   this is the pairing the owner asked for. */
.nd-mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 2.05rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -.5px;
}

.nd-mark .dot { color: var(--saffron); }

/* The real flag, as an SVG file — NOT the 🇸🇦 emoji, which Windows does not
   support at all and renders as the bare letters "SA". Roughly a quarter of
   our impressions are desktop, so the emoji would have shipped visibly broken
   for them. This is the official artwork (public domain), so the shahada is
   correctly formed rather than approximated in CSS. */
.nd-flag {
  display: block;
  width: 42px;
  height: 28px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 1px 4px rgba(0, 0, 0, .25);
  flex-shrink: 0;
}

.nd-divider {
  width: 1px;
  align-self: stretch;
  min-height: 34px;
  background: rgba(255, 255, 255, .28);
}

.nd-copy { display: flex; flex-direction: column; gap: 3px; }

.nd-banner h2 {
  font-family: var(--display);
  font-size: clamp(1.02rem, 2.9vw, 1.4rem);
  font-weight: 800;
  line-height: 1.4;
  text-wrap: balance;
}

.nd-banner h2 em { font-style: normal; color: var(--saffron); }

.nd-when {
  font-size: .85rem;
  color: rgba(255, 255, 255, .8);
}

.nd-cta {
  flex: 0 0 auto;
  background: var(--saffron);
  color: #22303a;
  font-family: var(--display);
  font-weight: 800;
  font-size: .93rem;
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, .08);
  transition: transform .15s ease, background .15s ease;
  white-space: nowrap;
}

.nd-cta:hover { background: #f0ae52; transform: translateY(-1px); }
.nd-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 720px) {
  .nd-banner .container { padding-block: 15px; gap: 11px; flex-direction: column; }
  .nd-divider { display: none; }
  .nd-cta { width: 100%; text-align: center; }
}

/* ---------- 2. the rotating hero card ---------- */

.hero-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* A grid/flex item defaults to min-width:auto, i.e. "never shrink below my
     content". The track's content is nine cards wide, so without this the
     hero column resolved to 460px inside a 335px grid and pushed the whole
     PAGE into horizontal scroll. This is the fix, not the max-width below. */
  min-width: 0;
  max-width: 100%;
}

/* The track scrolls horizontally and snaps. Scroll-snap means the
   thing still works perfectly by swipe if the script never loads —
   the auto-advance is an enhancement, not the mechanism. */
.carousel-track {
  display: flex;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: 4px;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track > .ticket {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}

.carousel-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.carousel-dots { display: flex; gap: 7px; align-items: center; }

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--line);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}

.carousel-dot[aria-current="true"] {
  background: var(--palm);
  width: 22px;
  border-radius: 999px;
}

.carousel-dot:focus-visible { outline: 2px solid var(--palm); outline-offset: 3px; }

/* Pause control. An auto-rotating carousel that cannot be stopped is
   an accessibility failure — people who read slowly lose the card
   mid-sentence. */
.carousel-pause {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-size: .72rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.carousel-pause:hover { border-color: var(--palm); color: var(--palm); }
.carousel-pause:focus-visible { outline: 2px solid var(--palm); outline-offset: 2px; }

/* ---------- 3. the /national-day page ---------- */

.nd-hero {
  background:
    radial-gradient(110% 130% at 85% 0%, #14806d 0%, transparent 60%),
    linear-gradient(105deg, #06463c 0%, #0e6b5c 55%, #12805f 100%);
  color: #fff;
  padding-block: 46px 42px;
  position: relative;
  overflow: hidden;
}

.nd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -68deg,
    rgba(255, 255, 255, .05) 0 2px,
    transparent 2px 24px
  );
}

.nd-hero .container { position: relative; display: flex; flex-direction: column; gap: 16px; }

.nd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
}

.nd-hero h1 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 5.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.22;
  text-wrap: balance;
  max-width: 20ch;
}

.nd-hero h1 em { font-style: normal; color: var(--saffron); }

.nd-hero .lead {
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .88);
  max-width: 56ch;
  line-height: 1.75;
}

.nd-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.nd-fact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .86rem;
  font-weight: 600;
}

.nd-honest {
  background: var(--saffron-tint);
  border: 1px solid #f0dcb4;
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .93rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-block: 26px;
}

.nd-honest strong { color: var(--ink); }
.nd-honest .ico { font-size: 1.1rem; line-height: 1.4; flex-shrink: 0; }

.nd-section-head { display: flex; flex-direction: column; gap: 6px; margin-block: 34px 18px; }

.nd-section-head h2 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  font-weight: 800;
}

.nd-section-head p { color: var(--ink-soft); font-size: .96rem; max-width: 62ch; }