/* Homepage stylesheet (assets/css/home.css).
   Loaded only by index.php. Every class is prefixed hn- ("homepage") —
   the prefix dates from the home-new.php mockup this design was
   reviewed as, and is kept so the selectors stay stable.
   Reuses style.css tokens (--navy, --teal, --orange, --site-bg-surface…)
   and the shared .hero / .hero-carousel* / .btn / .card rules, so the
   sitewide light/dark theme applies here with no extra work: in dark
   mode style.css redefines --navy to near-white and --site-bg-surface
   to a dark surface, which is why token-based rules below need no dark
   counterpart. Only HARDCODED light values need the overrides at the
   bottom of this file. */

/* ---------- Hero: copy | carousel | five-layer rail ---------- */
.hn-hero { padding-bottom: 40px; }
.hn-hero-inner {
  max-width: 1600px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 222px;
  gap: 28px; align-items: center;
}
.hn-copy h1 { max-width: 470px; margin-bottom: 10px; font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.08; }
.hn-copy > p { max-width: 460px; margin-bottom: 4px; font-size: 1.08rem; }
.hn-hl {
  background: linear-gradient(120deg, var(--teal-dark), var(--teal) 55%, var(--orange-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hn-copy .btn-row { align-items: center; margin-top: 18px; }
.hn-link { font-weight: 800; color: var(--teal-dark); }
.hn-trust { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; font-weight: 700; color: var(--muted); }
.hn-trust span { color: var(--teal-dark); margin-right: 4px; }

.hn-rail { display: grid; gap: 8px; align-self: center; }
.hn-rail-title { margin: 0 0 2px 4px; font-size: .85rem; font-weight: 800; color: var(--muted); letter-spacing: .02em; }
.hn-rail-title strong { color: var(--navy); }
.hn-layer {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--site-bg-surface); border-radius: 16px; border-left: 5px solid var(--teal);
  box-shadow: var(--soft-shadow); color: var(--navy); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hn-layer:hover { transform: translateX(4px); box-shadow: var(--shadow); color: var(--navy); }
.hn-layer-ic { font-size: 1.35rem; width: 34px; height: 34px; display: grid; place-items: center; background: var(--sky); border-radius: 10px; flex-shrink: 0; }
.hn-layer strong { display: block; font-size: .95rem; line-height: 1.1; }
.hn-layer small { display: block; font-size: .74rem; font-weight: 700; color: var(--muted); line-height: 1.2; margin-top: 2px; }
.hn-layer--arabic { border-left-color: var(--orange); }
.hn-layer--words  { border-left-color: #4C8BF5; }
.hn-layer--roots  { border-left-color: #4CAF50; }
.hn-layer--meaning{ border-left-color: var(--teal); }
.hn-layer--reflect{ border-left-color: var(--pink); }

/* ---------- Carousel frame: deliberately dark ----------
   The shared .hero-carousel-viewport in style.css uses a pale sky
   gradient, which on this page is nearly the same value as the hero
   background — the frame disappeared and the screenshots had no edge.
   Overridden here to the brand teal (--teal -> --teal-dark). Navy was
   tried first and read as too heavy against the pastel hero; teal is a
   MID-tone — clearly darker than the page, but not a slab — and it
   contrasts in HUE with the warm sand/cream wallpaper inside every
   screenshot, which is what actually makes them pop.
   Scoped to .hn-hero so the shared .hero-carousel rules in style.css
   stay available unchanged to any other page that adopts the carousel.
   The caption pill and the inactive dots are inverted to stay legible
   against the dark frame; the arrows were already white circles and
   need no change. The frame is deliberately dark in BOTH themes — it
   is a product screen, not a page surface. */
.hn-hero .hero-carousel-viewport {
  /* Two layers: a soft top-left highlight over a wide-range teal ramp.
     The first attempt kept all three stops within ~10% lightness of
     each other, so it rendered as flat teal — this spans bright aqua
     to a deep teal-navy, which is what actually reads as a gradient. */
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(145deg, #32C5CF 0%, var(--teal) 34%, #0A7382 66%, #0B4C63 100%);
  box-shadow: 0 20px 46px rgba(8, 100, 120, .32);
}
.hn-hero .hero-carousel-slide img {
  border: 1px solid rgba(255, 255, 255, .30);
  box-shadow: 0 14px 30px rgba(6, 60, 68, .30);
}
.hn-hero .hero-carousel-slide figcaption {
  background: rgba(255, 255, 255, .95);
  /* Literal navy, NOT var(--navy): the frame behind this pill is dark
     in BOTH themes, but --navy flips to near-white under
     [data-theme="dark"] — which rendered white-on-white text. Anything
     sitting on the white pills/circles inside this frame must use a
     fixed colour for the same reason. */
  color: #123A66;
  box-shadow: 0 6px 16px rgba(6, 60, 68, .24);
}
.hn-hero .hero-carousel-dot { background: rgba(255, 255, 255, .42); }
.hn-hero .hero-carousel-dot.is-active { background: #fff; }

/* ---------- Ticker ribbon (theme orange) ---------- */
.hn-ticker { overflow: hidden; background: linear-gradient(90deg, var(--orange-dark), var(--orange)); color: #fff; font-weight: 900; font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif; padding: 9px 0; }
.hn-ticker-track { display: flex; gap: 0; width: max-content; animation: hn-marquee 34s linear infinite; }
.hn-ticker:hover .hn-ticker-track { animation-play-state: paused; }
.hn-ticker-track span { padding: 0 18px; white-space: nowrap; font-size: .95rem; letter-spacing: .02em; }
.hn-ticker-track span::after { content: '✦'; margin-left: 36px; color: var(--navy); }
@keyframes hn-marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.hn-section { max-width: 1240px; margin: 0 auto; padding: 42px clamp(20px, 3vw, 32px) 8px; }
.hn-head { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.hn-head h2 { margin-bottom: 8px; }
.hn-head p { margin: 0; color: var(--muted); font-size: 1.08rem; font-weight: 600; }
.hn-head--left { text-align: left; margin: 0 0 14px; }
.hn-kicker { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 8px; }
.hn-kicker::before { content: '✦'; color: var(--orange); }

/* ---------- Activities ---------- */
.hn-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hn-act {
  display: block; background: var(--site-bg-surface); border-radius: 22px; overflow: hidden;
  box-shadow: var(--soft-shadow); color: var(--text); text-decoration: none; border-top: 6px solid var(--teal);
  transition: transform .18s ease, box-shadow .18s ease;
}
.hn-act:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--text); }
.hn-act-media { aspect-ratio: 16 / 8; overflow: hidden; background: linear-gradient(180deg, #E6FAFF, var(--sky-2)); }
.hn-act-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.hn-act-media--roots, .hn-act-media--more { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 2.6rem; }
.hn-act-media--roots { background: linear-gradient(180deg, #F0F9EA, #D9EFCF); }
.hn-act-media--roots span { font-family: 'Amiri Quran', 'Scheherazade New', serif; font-size: 3rem; color: var(--navy); }
.hn-act-media--more { background: linear-gradient(180deg, #F3EEFF, #E2D6FF); }
.hn-badge { display: inline-block; margin: 14px 18px 0; padding: 4px 11px; border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; background: var(--sky); color: var(--teal-dark); }
.hn-act h3 { margin: 8px 18px 4px; font-size: 1.15rem; color: var(--navy); }
.hn-act p { margin: 0 18px 18px; font-size: .95rem; color: var(--muted); font-weight: 600; }
.hn-act--blue   { border-top-color: #4C8BF5; }
.hn-act--orange { border-top-color: var(--orange); }
.hn-act--pink   { border-top-color: var(--pink); }
.hn-act--green  { border-top-color: #4CAF50; }
.hn-act--purple { border-top-color: #8A63D2; }

/* ---------- Progress stack + rewards ---------- */
.hn-grow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; }
.hn-stack { display: grid; gap: 12px; align-content: start; }
.hn-prog {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
  background: var(--site-bg-surface); border-radius: 18px; box-shadow: var(--soft-shadow); border-left: 6px solid var(--teal);
}
.hn-prog-ic { font-size: 1.4rem; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--sky); flex-shrink: 0; }
.hn-prog strong { display: block; color: var(--navy); font-size: 1.02rem; }
.hn-prog p { margin: 2px 0 0; color: var(--muted); font-weight: 600; font-size: .93rem; }
.hn-bar { display: block; height: 8px; border-radius: 999px; background: rgba(18,58,102,.10); margin-top: 8px; overflow: hidden; max-width: 260px; }
.hn-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--orange)); }
.hn-prog--blue   { border-left-color: #4C8BF5; }
.hn-prog--purple { border-left-color: #8A63D2; }
.hn-prog--orange { border-left-color: var(--orange); }

.hn-rewards {
  position: relative; overflow: hidden; border-radius: 28px; padding: 30px 30px 26px;
  background: linear-gradient(160deg, #FFF6E4 0%, #FFE3C7 60%, #FFD9B3 100%); box-shadow: var(--shadow); color: var(--text);
}
.hn-rewards h2, .hn-rewards p { color: var(--navy); }
.hn-rewards h2 { padding-right: 120px; }
.hn-rewards-lead { font-weight: 700; margin: 4px 0 16px; }
.hn-coin { position: absolute; right: -24px; top: -28px; width: 150px; opacity: .9; transform: rotate(-14deg); filter: drop-shadow(0 12px 18px rgba(242,138,34,.35)); animation: hn-float 6s ease-in-out infinite; }
@keyframes hn-float { 50% { transform: rotate(-8deg) translateY(8px); } }
.hn-reward-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hn-reward-list li { display: flex; gap: 12px; align-items: center; background: rgba(255,255,255,.72); border-radius: 16px; padding: 10px 12px; font-weight: 600; color: var(--text); }
.hn-reward-list img { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.hn-reward-list strong { color: var(--navy); }
.hn-gem-row { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 900; color: var(--navy); flex-wrap: wrap; }
.hn-gem-row img { width: 46px; height: 46px; }
.hn-gem-note { font-size: .82rem; font-weight: 700; color: var(--muted); margin-left: 6px; }

/* ---------- Their own space ---------- */
.hn-space {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: center;
  background: linear-gradient(180deg, #E6FAFF, #CFF3FB); border-radius: 28px; padding: 30px 34px; box-shadow: var(--soft-shadow);
}
.hn-space h2 { margin-bottom: 8px; }
.hn-space p { color: var(--navy); font-weight: 600; }
.hn-avatars { display: flex; gap: 10px; margin-top: 14px; }
.hn-avatars img { width: 66px; height: 66px; border-radius: 50%; background: #fff; object-fit: cover; box-shadow: var(--soft-shadow); border: 3px solid #fff; transition: transform .18s ease; }
.hn-avatars img:hover { transform: translateY(-4px) rotate(-4deg); }
.hn-fan { position: relative; height: 230px; }
.hn-fan img { position: absolute; width: 46%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); border: 4px solid #fff; transition: transform .2s ease; }
.hn-fan img:nth-child(1) { left: 0;   top: 30px; transform: rotate(-9deg); }
.hn-fan img:nth-child(2) { left: 22%; top: 4px;  transform: rotate(-3deg); }
.hn-fan img:nth-child(3) { left: 44%; top: 0;    transform: rotate(3deg); z-index: 2; }
.hn-fan img:nth-child(4) { left: 14%; top: 110px; transform: rotate(5deg); }
.hn-fan img:nth-child(5) { left: 50%; top: 100px; transform: rotate(-6deg); z-index: 3; }
.hn-fan:hover img { transform: rotate(0) scale(1.03); }

/* ---------- Parents & teachers ---------- */
/* auto-fit, not a fixed count: this section held FOUR cards until the
   Printable resources one was removed with downloads.php (2026-09-26),
   which left a hard-coded 4th column empty. auto-fit collapses tracks
   that have no item, so the row stays full whatever the card count —
   adding a card back needs no CSS change. */
.hn-adults { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.hn-adult { text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.hn-adult h3 { margin: 4px 0 0; color: var(--navy); font-size: 1.1rem; }
.hn-adult p { margin: 0; color: var(--muted); font-weight: 600; font-size: .95rem; }
.hn-adult-ic { font-size: 1.7rem; }
.hn-more { margin-top: auto; padding-top: 10px; font-weight: 800; color: var(--teal-dark); }

/* ---------- Story + final CTA ---------- */
.hn-story { padding-bottom: 40px; }
.hn-story-card {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; align-items: end; gap: 18px;
  background: linear-gradient(180deg, #F0F9EA, #D9EFCF); border-radius: 28px; padding: 28px 30px 0; box-shadow: var(--soft-shadow); text-align: center;
}
.hn-story-card > div { padding-bottom: 28px; }
.hn-story-card h2 { margin-bottom: 8px; }
.hn-story-card p { color: var(--navy); font-weight: 600; max-width: 640px; margin: 0 auto 16px; }
.hn-mascot { width: 120px; height: auto; filter: drop-shadow(0 10px 16px rgba(18,58,102,.16)); }
.hn-final { text-align: center; margin-top: 18px; background: linear-gradient(180deg, #feeffd, #f9d1f7); border-radius: 28px; padding: 26px 24px; box-shadow: var(--soft-shadow); }
.hn-final h2 { margin-bottom: 4px; }
.hn-final p { color: var(--navy); font-weight: 700; margin-bottom: 14px; }

/* ---------- Dark mode ----------
   Only the HARDCODED light values need overriding — every rule using
   --navy / --muted / --site-bg-surface / --teal-dark already inverts,
   because style.css redefines those tokens under [data-theme="dark"].
   The tinted section bands keep their peach/sky/sage/pink identity
   rather than all collapsing to one grey: the values below are the
   same dark tints style.css uses for .card.peach/.sky/.sage/.pink, so
   the page's colour rhythm survives the theme switch.
   Written as a :where() list so a single [data-theme="dark"] wrapper
   is unnecessary per selector; the accompanying
   prefers-color-scheme block covers visitors who have never touched
   the toggle (no data-theme attribute present). */
[data-theme="dark"] .hn-rewards { background: linear-gradient(160deg, #332619 0%, #241A10 60%, #1B1209 100%); }
[data-theme="dark"] .hn-space { background: linear-gradient(180deg, #123038, #0B1F27); }
[data-theme="dark"] .hn-story-card { background: linear-gradient(180deg, #1E2B1A, #131F11); }
[data-theme="dark"] .hn-final { background: linear-gradient(180deg, #2E1E2C, #21131F); }
[data-theme="dark"] .hn-act-media { background: linear-gradient(180deg, #123038, #0B1F27); }
[data-theme="dark"] .hn-act-media--roots { background: linear-gradient(180deg, #1E2B1A, #131F11); }
[data-theme="dark"] .hn-act-media--more { background: linear-gradient(180deg, #241B33, #170F21); }
[data-theme="dark"] .hn-reward-list li { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .hn-layer-ic,
[data-theme="dark"] .hn-prog-ic,
[data-theme="dark"] .hn-badge { background: rgba(255, 255, 255, .10); }
[data-theme="dark"] .hn-bar { background: rgba(233, 241, 248, .16); }
[data-theme="dark"] .hn-avatars img,
[data-theme="dark"] .hn-fan img { border-color: var(--site-bg-surface); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hn-rewards { background: linear-gradient(160deg, #332619 0%, #241A10 60%, #1B1209 100%); }
  :root:not([data-theme="light"]) .hn-space { background: linear-gradient(180deg, #123038, #0B1F27); }
  :root:not([data-theme="light"]) .hn-story-card { background: linear-gradient(180deg, #1E2B1A, #131F11); }
  :root:not([data-theme="light"]) .hn-final { background: linear-gradient(180deg, #2E1E2C, #21131F); }
  :root:not([data-theme="light"]) .hn-act-media { background: linear-gradient(180deg, #123038, #0B1F27); }
  :root:not([data-theme="light"]) .hn-act-media--roots { background: linear-gradient(180deg, #1E2B1A, #131F11); }
  :root:not([data-theme="light"]) .hn-act-media--more { background: linear-gradient(180deg, #241B33, #170F21); }
  :root:not([data-theme="light"]) .hn-reward-list li { background: rgba(255, 255, 255, .08); }
  :root:not([data-theme="light"]) .hn-layer-ic,
  :root:not([data-theme="light"]) .hn-prog-ic,
  :root:not([data-theme="light"]) .hn-badge { background: rgba(255, 255, 255, .10); }
  :root:not([data-theme="light"]) .hn-bar { background: rgba(233, 241, 248, .16); }
  :root:not([data-theme="light"]) .hn-avatars img,
  :root:not([data-theme="light"]) .hn-fan img { border-color: var(--site-bg-surface); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .hn-hero-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .hn-rail { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .hn-rail-title { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hn-hero-inner { grid-template-columns: 1fr; }
  .hn-rail { display: flex; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .hn-rail-title { flex: 0 0 100%; }
  .hn-layer { flex: 0 0 200px; scroll-snap-align: start; }
  .hn-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hn-grow-grid, .hn-space { grid-template-columns: 1fr; }
  .hn-fan { height: 200px; }
  .hn-story-card { grid-template-columns: 1fr; padding-bottom: 24px; }
  .hn-story-card > div { padding-bottom: 0; }
  .hn-mascot { width: 90px; margin: 0 auto; }
  .hn-mascot--r { display: none; }
}
@media (max-width: 560px) {
  .hn-section { padding-top: 32px; }
  .hn-acts, .hn-adults { grid-template-columns: 1fr; }
  .hn-coin { width: 110px; right: -18px; top: -18px; }
  .hn-space { padding: 22px 18px; }
  .hn-fan { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .hn-ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .hn-coin { animation: none; }
  .hn-layer, .hn-act, .hn-avatars img, .hn-fan img { transition: none; }
}