/* ==========================================================================
   WBK Academy Concept — styles.css
   Dark-default branded shell. Token system (color, type, spacing, radius,
   elevation, motion) is the load-bearing foundation — every component inherits it.
   Hand-authored, no framework. Logical properties used throughout so the whole
   shell mirrors for free in AR/RTL. CSP-clean: no inline styles anywhere; all
   visibility toggles use the [hidden] attribute or a body class.
   ========================================================================== */

/* ── Font faces: Montserrat (Latin, static weights 400/500/600/700) ───────── */
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('./fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Font faces: Vazirmatn (Arabic, 400/500/700 — NO SemiBold) ──────────────
   unicode-range scopes these to Arabic blocks so Vazirmatn never overrides
   Montserrat for Latin text. Vazirmatn ships no 600 → AR never uses weight 600
   (would render faux-bold). ────────────────────────────────────────────────── */
@font-face {
  font-family: 'Vazirmatn';
  src: url('./fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('./fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('./fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* ── Design tokens (declared once on :root) ───────────────────────────────── */
:root {
  color-scheme: dark; /* native controls, scrollbars render dark */

  /* Brand accent — LOCKED, accent-only (never body text on dark) */
  --wbk-pink: #E93F7D;
  --wbk-pink-hover: #EB5A8D;
  --wbk-pink-tint: rgba(233, 63, 125, 0.12); /* selection/active wash */
  --wbk-pink-tint-strong: rgba(233, 63, 125, 0.18);
  --wbk-pink-glow: rgba(233, 63, 125, 0.16); /* hero halo */

  /* Dark surfaces — a real 3-tier elevation scale (webook neutral) */
  --bg: #09090B;
  --surface: #131316;       /* panels: sidebar, player, chips */
  --surface-2: #1B1B20;     /* elevated: inner wells, placeholders */
  --surface-hover: #27272A;
  --surface-active: #3F3F46;

  /* Hairlines — brought up from near-invisible so structure actually reads */
  --border: #26262C;
  --border-strong: #34343B;

  /* Text */
  --text: #F4F4F5;          /* headings / primary */
  --text-soft: #C7C7CE;     /* body copy, descriptions (brighter → readable) */
  --text-muted: #A1A1AA;    /* labels, secondary chrome */
  --text-disabled: #71717A;

  /* Destructive (declared for the data-contract error banner) */
  --error: #FF4D4D;

  /* Typography */
  --font-latin: 'Montserrat', 'Vazirmatn', system-ui, sans-serif;
  --font-arabic: 'Vazirmatn', 'Montserrat', system-ui, sans-serif;

  /* Type scale — ONE ordered ladder, largest → smallest, single-sourced so the
     hierarchy stays coherent top-to-bottom. Display sizes are fluid (clamp); text
     sizes are fixed. Icon glyphs (sized in em off their parent) and the 16px search
     input (iOS zoom floor) stay local to their components — they aren't reading text. */
  --fs-hero: clamp(1.75rem, 4.2vw, 2.75rem);  /* hero H1 lockup            (28→44px) */
  --fs-headline: clamp(1.4rem, 3vw, 2rem);    /* footer sign-off headline  (22→32px) */
  --fs-lesson: clamp(1.35rem, 3vw, 1.9rem);   /* player lesson title       (22→30px) */
  --fs-title: clamp(1.25rem, 2.5vw, 1.6rem);  /* footer brand lockup       (20→26px) */
  --fs-course: clamp(1rem, 1.7vw, 1.25rem);   /* hero course subtitle      (16→20px) */
  --fs-read: 1.0625rem;                        /* 17px — descriptions / body copy */
  --fs-body: 1rem;                             /* 16px */
  --fs-label: 13px;                            /* chrome, chips, controls */
  --fs-micro: 11px;                            /* eyebrows, counts, codes */

  /* Spacing (4px base, 8px rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radius */
  --radius-xs: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Elevation — subtle, low-opacity depth layered over the border structure */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 28px 60px -18px rgba(0, 0, 0, 0.75);
  --shadow-overlay: 0 24px 48px rgba(0, 0, 0, 0.5);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;
  --dur-fast: 120ms;

  /* Layout */
  --max-content: 1600px;
  --page-inset: var(--space-4);
  --navbar-h: 72px;
  --sidebar-w: 264px;
}

@media (min-width: 768px) {
  :root {
    --page-inset: var(--space-8);
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-latin);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Global focus ring — pink, paints outside the border box (never clipped). */
:focus-visible {
  outline: 2px solid var(--wbk-pink);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Shared interactive-transition contract (color/background/border/shadow/transform
   only — never layout properties, so nothing reflows). */
.navbar__menu,
.lang-switch__trigger,
.lang-switch__option,
.sidebar__close,
.sidebar__link,
.accordion__header,
.accordion__lesson,
.sidebar__search-input,
.sidebar__search-result,
.card__action,
.card__video-play,
.player__nav-btn {
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

/* Reduced-motion killswitch — collapse every animation/transition + smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Concept-preview strip (pink announcement bar, above navbar) ──────────── */
/* Pink's canonical webook announcement-bar role (BRAND-03), non-dismissible. */
.concept-strip {
  background: linear-gradient(90deg, var(--wbk-pink), var(--wbk-pink-hover));
}

.concept-strip__inner {
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--page-inset);
  padding-block: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  color: #FFFFFF; /* pure white on pink ≈ 3.84:1 → clears 3:1 UI-component floor (WCAG 1.4.11). Documented accepted trade-off on the locked pink. */
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Inline sparkle glyph replaces the former 🚀 emoji (no emoji as UI — skill rule). */
.concept-strip__icon {
  display: inline-flex;
  flex: none;
  color: #FFFFFF;
}

.concept-strip__icon svg {
  display: block;
  width: 15px;
  height: 15px;
}

/* ── Navbar (sticky, brand + language toggle) ─────────────────────────────── */
.navbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  height: var(--navbar-h);
  background: rgba(9, 9, 11, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-block-end: 1px solid var(--border);
}

.navbar__inner {
  max-width: var(--max-content);
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--page-inset);
}

/* Mobile hamburger — opens the off-canvas drawer (<768px only). */
.navbar__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
}

.navbar__menu:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.navbar__brand img {
  display: block;
  height: 26px;
  width: auto;
}

.navbar__brand-sep {
  color: var(--border-strong); /* decorative divider */
  font-weight: 300;
}

.navbar__brand-name {
  color: var(--text);
  font-size: 15px; /* wordmark chrome — one step above --fs-label to pair with the 26px logo */
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Language dropdown. Pushed to the inline-end (auto-mirrors under RTL). The
   wrapper is the positioning context. NO overflow:hidden in this subtree — it
   would clip the global focus ring. Logical properties only. */
.lang-switch {
  position: relative;
  margin-inline-start: auto;
}

.lang-switch__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.lang-switch__trigger:hover {
  background: var(--surface-hover);
  border-color: var(--surface-active);
}

.lang-switch__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wbk-pink);
  font-size: 1em;
}

.lang-switch__name[lang="ar"] {
  font-family: var(--font-arabic);
  font-weight: 500; /* NEVER 600 (Vazirmatn faux-bold) */
}

.lang-switch__caret {
  font-size: 0.7em;
  color: var(--text-muted);
}

/* Menu: absolutely positioned under the trigger at the inline-end edge; mirrors
   under RTL via logical inset. Visibility is the [hidden] attribute (never inline
   style — CSP style-src 'self'). */
.lang-switch__menu {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-2));
  min-inline-size: 180px;
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 60;
}

.lang-switch__menu[hidden] {
  display: none;
}

/* Option row: full-width flag + name. Selected state is signalled by fill +
   weight + aria-pressed, not hue alone (WCAG 1.4.1). */
.lang-switch__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 44px;
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1;
  text-align: start;
  cursor: pointer;
}

.lang-switch__option:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.lang-switch__option[lang="ar"] {
  font-family: var(--font-arabic);
  font-weight: 500; /* inactive Medium; active Bold below — NEVER 600 */
}

/* Selected option: white-on-pink. #FFFFFF on --wbk-pink ≈ 3.84:1 (clears the 3:1
   UI-component threshold, WCAG 1.4.11). State also carried by weight 700, not hue. */
.lang-switch__option[aria-pressed="true"] {
  background: var(--wbk-pink);
  color: #FFFFFF;
  font-weight: 700;
}

.lang-switch__option[lang="ar"][aria-pressed="true"] {
  font-weight: 700;
}

/* Coming-soon teasers: the concept advertises Arabic, Portuguese, and French in
   the dropdown without shipping them (translations in progress). English is the
   only live language. The rows are disabled + muted, with an end-aligned pill. */
.lang-switch__hint {
  margin: var(--space-2) var(--space-2) var(--space-1);
  font-family: var(--font-latin);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lang-switch__option--soon,
.lang-switch__option--soon:hover {
  background: transparent;
  color: var(--text-muted);
  cursor: default;
}

.lang-switch__badge {
  margin-inline-start: auto;
  padding: 2px var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-hover);
  color: var(--text-muted);
  font-family: var(--font-latin);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* ── Header / hero ─────────────────────────────────────────────────────────────
   A textured landing moment, not a text block. Two decorative layers sit behind
   the content: a fine dot-grid (::before, reads as "systematic operations") and an
   animated pink/steel aurora (::after). overflow:hidden clips their bleed; the hero
   has no focusable children except the scroll cue (well inside the padding), so
   nothing's focus ring is clipped. */
.site-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  border-block-end: 1px solid var(--border);
}

/* Dot-grid texture, masked to concentrate near the top and fade downward/out. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 92% at 50% -8%, #000 28%, transparent 72%);
  mask-image: radial-gradient(120% 92% at 50% -8%, #000 28%, transparent 72%);
  opacity: 0.7;
}

/* Aurora glow — layered pink + a steel/purple depth tint, slowly drifting. */
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 58% at 16% -6%, rgba(233, 63, 125, 0.24), transparent 60%),
    radial-gradient(44% 62% at 84% 6%, rgba(108, 91, 143, 0.18), transparent 62%),
    radial-gradient(64% 82% at 50% -22%, rgba(233, 63, 125, 0.10), transparent 66%);
  animation: hero-aurora 18s var(--ease) infinite alternate;
}

@keyframes hero-aurora {
  from { transform: translateY(0) scale(1); opacity: 0.85; }
  to { transform: translateY(-3%) scale(1.06); opacity: 1; }
}

.site-header__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--page-inset);
  padding-block: var(--space-6);
  min-block-size: clamp(240px, 38dvh, 420px); /* a calmer landing height, capped */
  display: grid;
  grid-template-rows: 1fr auto; /* content centred in row 1; scroll cue pinned to row 2 */
  gap: var(--space-5);
  text-align: start;
}

@media (min-width: 768px) {
  .site-header__inner {
    padding-block: var(--space-8);
  }
}

/* Content group — vertically centred within the tall hero. */
.site-header__content {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Staggered fade-up entrance so the hero feels alive on load (motion-gated; the
   global reduced-motion killswitch collapses these to the visible end state). */
@media (prefers-reduced-motion: no-preference) {
  .site-header__eyebrow { animation: hero-rise 620ms var(--ease) 40ms both; }
  .site-header__brand { animation: hero-rise 620ms var(--ease) 120ms both; }
  .site-header__course { animation: hero-rise 620ms var(--ease) 210ms both; }
  .site-header__meta { animation: hero-rise 620ms var(--ease) 300ms both; }
  .site-header__scroll { animation: hero-rise 620ms var(--ease) 440ms both; }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.site-header__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: 1px solid var(--wbk-pink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wbk-pink); /* on --bg ≈ 5.3:1 → passes; also a display-scale accent chip */
}

/* Small pulsing dot inside the eyebrow chip — a live "preview" signal. */
.site-header__eyebrow::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--wbk-pink);
  animation: pulse-dot 2.4s var(--ease) infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.site-header__brand {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 1.5em;
  block-size: 1.5em;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--wbk-pink-tint-strong), var(--wbk-pink-tint));
  border: 1px solid var(--wbk-pink-tint-strong);
  color: var(--wbk-pink);
  font-size: 0.6em; /* scale the glyph down inside its tile */
  box-shadow: 0 8px 30px -8px rgba(233, 63, 125, 0.5); /* pink lift */
}

.site-header__mark svg {
  display: block;
  width: 1em;
  height: 1em;
}

.site-header__wordmark {
  color: var(--text);
}

/* Pink permitted here — display-size brand glyphs (≥28px clears 3:1). Soft halo. */
.site-header__wbk {
  color: var(--wbk-pink);
  text-shadow: 0 0 34px rgba(233, 63, 125, 0.35);
}

/* Course line — a prominent subtitle with a short pink accent lead. */
.site-header__course {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-course);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-soft); /* never pink (Pitfall 4) */
}

.site-header__course::before {
  content: "";
  flex: none;
  inline-size: 28px;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--wbk-pink), rgba(233, 63, 125, 0));
}

/* Course meta chips — give the hero substance ("what am I getting"). Pink icon
   accents (UI glyphs, 3:1 floor); text stays --text-muted (passes body 4.5:1). */
.site-header__meta {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.site-header__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  white-space: nowrap;
}

.site-header__stat-icon {
  display: inline-flex;
  align-items: center;
  color: var(--wbk-pink);
}

.site-header__stat-icon svg {
  width: 16px;
  height: 16px;
}

/* Bilingual chip carries an inline AR run — scope Vazirmatn to it. */
.site-header__stat [lang="ar"] {
  font-family: var(--font-arabic);
  font-weight: 500;
}

/* Course accent lead points inward (its gradient flips under RTL). */
:dir(rtl) .site-header__course::before {
  background: linear-gradient(to left, var(--wbk-pink), rgba(233, 63, 125, 0));
}

/* ── Scroll cue — invites the reader down into the course ──────────────────── */
.site-header__scroll {
  align-self: start; /* bottom row, inline-start (mirrors under RTL) */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-header__scroll:hover {
  color: var(--text);
}

.site-header__scroll-icon {
  display: inline-flex;
  color: var(--wbk-pink);
  font-size: 18px;
  animation: scroll-bounce 1.8s var(--ease) infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* ── App-shell: chapter rail + focused player ─────────────────────────────── */
.app-shell {
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--page-inset);
  padding-block: var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .app-shell {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    padding-block: var(--space-10);
  }
}

/* Anchor jumps clear the sticky navbar. Smooth-scroll gated behind reduced-motion. */
html {
  scroll-padding-block-start: calc(var(--navbar-h) + var(--space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ── Chapter sidebar — desktop rail (≥768px) / mobile drawer ───────────────── */
/* Same DOM node in both modes. Desktop: a sticky surface panel in the first grid
   track; the grid places it on the RIGHT under dir=rtl for free. */
.sidebar {
  position: sticky;
  inset-block-start: calc(var(--navbar-h) + var(--space-4));
  align-self: start;
  max-block-size: calc(100dvh - var(--navbar-h) - var(--space-8));
  overflow-y: auto;
  overscroll-behavior: contain; /* scroll the rail without chaining to the page */
  scrollbar-gutter: stable;     /* reserve the scrollbar track → no content shift */
  scrollbar-width: thin;
  scrollbar-color: var(--surface-active) transparent;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* Thin, on-theme scrollbar (WebKit). */
.sidebar::-webkit-scrollbar {
  width: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--surface-active);
  border: 3px solid var(--surface); /* inset the thumb from the track edges */
  border-radius: var(--radius-pill);
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--text-disabled);
}

/* Eyebrow aligns to the same inline start as the chapter labels below it. */
.sidebar__eyebrow {
  margin: 0 0 var(--space-3);
  padding-inline: var(--space-3);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Drawer close-X — visible only in drawer mode (hidden at ≥768px below). */
.sidebar__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-inline-start: auto;
  margin-block-end: var(--space-2);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: 24px;
  cursor: pointer;
}

.sidebar__close:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* Mobile: the same .sidebar becomes an off-canvas drawer. */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(84vw, 340px);
    z-index: 100;
    max-block-size: none;
    border-radius: 0;
    border-inline-end: 1px solid var(--border-strong);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
  }

  /* The ONE physical translateX needing a :dir() sign flip — RTL drawer slides
     in from the right. */
  :dir(rtl) .sidebar {
    transform: translateX(100%);
  }

  .drawer-open .sidebar {
    transform: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .sidebar {
      transition: transform 220ms var(--ease);
    }

    .drawer-backdrop {
      transition: opacity 220ms var(--ease);
    }
  }
}

/* Desktop: no hamburger / close-X (rail is always visible). */
@media (min-width: 768px) {
  .navbar__menu,
  .sidebar__close {
    display: none;
  }
}

/* Dimming scrim behind the open drawer. */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 6, 8, 0.68);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.drawer-open .drawer-backdrop {
  display: block;
}

body.drawer-open {
  overflow: hidden;
}

/* ── Main / player mount ──────────────────────────────────────────────────── */
#course-root {
  min-width: 0; /* lets inner content reflow inside the grid cell */
}

/* ── Single-language display (generic — player, accordion, search) ─────────── */
/* JS only flips <html data-lang>; display:none removes the inactive language
   from the a11y tree + tab order. */
[data-lang="en"] .lang-ar {
  display: none;
}

[data-lang="ar"] .lang-en {
  display: none;
}

/* ── Focused lesson player (weighted surface panel) ───────────────────────────
   The former "floating island" is now a real elevated lesson panel: a bordered
   surface with padding + shadow, so the surrounding grid space reads as
   intentional margin. One lesson at a time. Logical properties only. */
#player.player {
  max-inline-size: min(960px, 100%);
  margin-inline: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  #player.player {
    padding: var(--space-8);
  }
}

/* Lesson header row: chapter · position on the start edge, code chip on the end. */
.player__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.player__chapter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 700;
}

.player__chapter-icon {
  display: inline-flex;
  color: var(--wbk-pink);
}

.player__chapter-icon svg {
  width: 16px;
  height: 16px;
}

.player__position {
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 500;
}

/* Thin divider dot between chapter and position. */
.player__position::before {
  content: "•";
  margin-inline-end: var(--space-3);
  color: var(--border-strong);
}

/* Code chip — the lesson code, isolated LTR, pushed to the inline-end edge. */
.player__code {
  margin: 0;
  margin-inline-start: auto;
  padding-block: 3px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* Media well — the video sits in its own recessed frame. */
#player .card__video {
  inline-size: 100%;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.player__lang {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: start;
}

.player__lang.lang-en {
  font-family: var(--font-latin);
}

.player__lang.lang-ar {
  font-family: var(--font-arabic);
}

.player__title {
  margin: 0;
  font-size: var(--fs-lesson);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

.player__lang.lang-ar .player__title {
  font-weight: 700; /* Vazirmatn has no 600 */
  letter-spacing: 0;
}

.player__desc {
  margin: 0;
  max-inline-size: 68ch;
  color: var(--text-soft);
  font-size: var(--fs-read);
  line-height: 1.7;
}

.player__lang.lang-ar .player__desc {
  line-height: 1.9; /* Arabic needs more leading */
}

.player__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Prev / Next lesson bar — wayfinding across the flat ordered lesson list. */
.player__nav {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border);
}

.player__nav-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-latin);
  font-size: var(--fs-label);
  text-align: start;
  cursor: pointer;
}

.player__nav-btn:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--surface-active);
}

.player__nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Both buttons keep their text start-aligned so the lesson name truncates with a
   trailing ellipsis (a right-aligned name can't show one). The chevron side — outer
   edge on each — is the Prev/Next direction cue. */
.player__nav-text {
  flex: 1 1 auto;
}

.player__nav-icon {
  display: inline-flex;
  flex: none;
  color: var(--text-muted);
}

.player__nav-icon svg {
  width: 20px;
  height: 20px;
}

/* RTL: chevrons flip horizontally so Previous/Next still point outward. */
:dir(rtl) .player__nav-icon svg {
  transform: scaleX(-1);
}

.player__nav-name .lang-ar {
  font-family: var(--font-arabic);
}

.player__nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.player__nav-dir {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.player__nav-name {
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  /* single-line clamp */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Accordion sidebar (chapter header → lesson list) ─────────────────────────
   Unified indent system: chapter headers and the eyebrow share the same inline
   start (--space-3); lessons hang one step in (a connector rail at that same
   start), so the hierarchy reads and every left edge relates. Every row is
   vertically centered and clears the 44px touch floor at all breakpoints. */
.accordion__chapter {
  display: flex;
  flex-direction: column;
}

.accordion__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-family: var(--font-latin);
  font-size: 14px; /* one step above lessons (13px) to strengthen hierarchy */
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.accordion__header:hover {
  background: var(--surface-hover);
}

.accordion__header:active {
  background: var(--surface-active); /* press feedback (touch) */
}

/* Label: takes the free space, stays on one line, ellipsis only as a last resort
   so a long chapter name can never wrap or push the count/chevron around. */
.accordion__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Count → a compact fixed number badge (never wraps, never shifts the row). */
.accordion__count {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 22px;
  block-size: 20px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.accordion__header[aria-expanded="true"] .accordion__count {
  background: var(--wbk-pink-tint);
  color: var(--text);
}

.accordion__chevron {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
}

.accordion__header[aria-expanded="true"] .accordion__chevron {
  transform: rotate(180deg);
  color: var(--wbk-pink);
}

@media (prefers-reduced-motion: no-preference) {
  .accordion__chevron {
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
  }
}

/* Lessons hang under the chapter on a connector rail (a hairline at the chapter's
   inline start). Each lesson's inline-start border overlaps the rail, so the active
   lesson lights that rail segment pink — the indent gains meaning. */
.accordion__lessons {
  list-style: none;
  margin: var(--space-1) 0 var(--space-2);
  margin-inline-start: calc(var(--space-3) + 7px); /* rail sits under the label's first glyph */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-inline-start: 1.5px solid var(--border-strong);
}

.accordion__lessons[hidden] {
  display: none;
}

/* Staggered fade+slide entrance each time a chapter expands (exit stays instant —
   the [hidden] toggle preserves the single-open a11y contract). Motion-gated. */
@media (prefers-reduced-motion: no-preference) {
  .accordion__lessons:not([hidden]) > li {
    animation: accordion-item-in 240ms var(--ease) both;
  }
  .accordion__lessons:not([hidden]) > li:nth-child(1) { animation-delay: 20ms; }
  .accordion__lessons:not([hidden]) > li:nth-child(2) { animation-delay: 45ms; }
  .accordion__lessons:not([hidden]) > li:nth-child(3) { animation-delay: 70ms; }
  .accordion__lessons:not([hidden]) > li:nth-child(4) { animation-delay: 95ms; }
  .accordion__lessons:not([hidden]) > li:nth-child(n+5) { animation-delay: 120ms; }
}

@keyframes accordion-item-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.accordion__lesson {
  display: flex;
  align-items: center; /* vertically centre the label in its box (single or wrapped) */
  width: 100%;
  min-height: 44px; /* touch floor */
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  margin-inline-start: -1.5px; /* pull the lesson's border onto the rail */
  border: 0;
  border-inline-start: 2px solid transparent;
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}

.accordion__lesson:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.accordion__lesson:active {
  background: var(--surface-active); /* press feedback (touch) */
}

.accordion__lesson[aria-current="true"] {
  color: var(--text);
  font-weight: 700;
  background: var(--wbk-pink-tint);
  border-inline-start-color: var(--wbk-pink); /* lights the rail segment pink */
}

.accordion__lesson .lang-ar {
  font-family: var(--font-arabic);
  font-weight: 500;
}

.accordion__lesson[aria-current="true"] .lang-ar {
  font-weight: 700; /* Vazirmatn: skip 600 */
}

/* ── Sidebar search (input + jump-to dropdown) ────────────────────────────── */
.sidebar__search {
  position: relative;
  margin-block-end: var(--space-4);
}

.sidebar__search-input {
  inline-size: 100%;
  min-height: 44px;
  padding-inline-start: var(--space-10); /* room for leading search glyph */
  padding-inline-end: var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-latin);
  /* 16px is the iOS threshold — smaller triggers focus auto-zoom on the phone. */
  font-size: 16px;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.sidebar__search-input::placeholder {
  color: var(--text-muted);
}

.sidebar__search-input:hover {
  border-color: var(--surface-active);
}

/* Focus affordance: pink ring + tint (the input's own :focus, not just :focus-visible,
   so it always reads as active while typing). */
.sidebar__search-input:focus {
  outline: none;
  border-color: var(--wbk-pink);
  box-shadow: 0 0 0 3px var(--wbk-pink-tint);
}

/* Tint the leading glyph pink while the field is focused. */
.sidebar__search:focus-within .sidebar__search-icon {
  color: var(--wbk-pink);
}

.sidebar__search-icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: 50%;
  transform: translateY(-50%); /* vertical only — direction-neutral */
  color: var(--text-muted);
  pointer-events: none;
  display: inline-flex;
}

.sidebar__search-results {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + var(--space-2));
  z-index: 60;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-block-size: 60vh;
  overflow-y: auto;
}

.sidebar__search-results[hidden] {
  display: none;
}

.sidebar__search-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  min-height: 44px;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}

.sidebar__search-result:hover {
  background: var(--surface-hover);
}

.sidebar__search-result .lang-ar {
  font-family: var(--font-arabic);
}

.sidebar__search-chapter {
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: 500;
}

.sidebar__search-empty {
  padding-block: var(--space-3);
  padding-inline: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-label);
}

/* ── Media atoms (reused by the player) ───────────────────────────────────── */
.card__media {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* YouTube facade: the WRAPPER owns the 16:9 dimensions so the facade→iframe swap
   never changes height (zero CLS). */
.card__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2); /* dark ground behind the facade / iframe */
}

.card__video > .card__video-facade,
.card__video > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Unified branded lesson thumbnail ─────────────────────────────────────────
   One coded (no-image) 16:9 card shared by the video facade AND the coming-soon
   slot, so every lesson's media area looks identical instead of relying on
   varying-quality YouTube JPGs. Dark webook-brand ground with pink accents (echoes
   the hero), wordmark top-start, chapter eyebrow + lesson title centred, course
   name as the subtitle, and a foot affordance (play or "coming soon"). Logical
   properties + text-align:start so it mirrors for free under AR/RTL. */
.lesson-thumb {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; /* middle row may shrink → title clamps, never overflows */
  gap: var(--space-2);
  padding: clamp(var(--space-3), 3.2vw, var(--space-6));
  text-align: start;
  color: #FFFFFF;
  overflow: hidden; /* safety: nothing spills past the 16:9 slot */
  /* Bold webook-pink card: brand pink deepening to berry for depth + white-text
     legibility, with a soft top-corner sheen. White-on-pink is the established brand
     pattern here (see .concept-strip). The pink logo is flipped to white below. */
  background:
    radial-gradient(100% 85% at 84% 6%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(150deg, var(--wbk-pink) 0%, #C0245F 52%, #8E1547 100%);
}

.lesson-thumb__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 0;
}

.lesson-thumb__logo {
  display: block;
  height: clamp(18px, 2.6vw, 26px);
  width: auto;
  filter: brightness(0) invert(1); /* pink brand wordmark → white, so it reads on pink */
}

.lesson-thumb__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  min-block-size: 0; /* let the title clamp instead of overflowing the row */
  overflow: hidden;
}

.lesson-thumb__chapter {
  font-size: clamp(10px, 1.4vw, 12px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88); /* light eyebrow on the pink ground */
}

.lesson-thumb__title {
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  /* cap long titles to 2 lines so the card height stays predictable even on a
     short mobile 16:9 slot (the full title always shows in the player h2 below) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lesson-thumb__title .lang-ar {
  font-family: var(--font-arabic);
  font-weight: 700; /* Vazirmatn has no 600 */
  letter-spacing: 0;
}

.lesson-thumb__subtitle {
  margin-block-start: var(--space-1);
  font-size: clamp(11px, 1.4vw, 13px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

/* Foot row: play affordance (video) pinned to the inline-end; coming-soon badge
   (below) overrides to the inline-start. */
.lesson-thumb__foot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* The facade is the interactive control (whole card taps to play); the branded
   copy inside is decorative (aria-hidden in JS). */
.card__video-facade {
  cursor: pointer;
  border: 0;
  font-family: var(--font-latin);
}

.card__video-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(44px, 6vw, 56px);
  block-size: clamp(44px, 6vw, 56px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95); /* white circle + pink glyph pops on the pink ground */
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--wbk-pink);
  font-size: 22px;
  box-shadow: var(--shadow-md);
}

.card__video-facade:hover .card__video-play,
.card__video-facade:focus-visible .card__video-play {
  background: #FFFFFF;
  color: var(--wbk-pink-hover);
  transform: scale(1.06);
}

/* Guide/Materials link-out buttons — flat/bordered webook idiom. */
.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.card__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding-inline: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
  text-decoration: none;
}

.card__action:hover {
  background: var(--surface-hover);
  border-color: var(--surface-active);
}

.card__action-icon {
  display: inline-flex;
  color: var(--wbk-pink);
}

.card__action-ext {
  display: inline-flex;
  color: var(--text-muted);
  margin-inline-start: var(--space-1);
}

.card__action-icon svg,
.card__action-ext svg {
  width: 16px;
  height: 16px;
}

/* Coming-soon lesson — the SAME branded thumbnail (.lesson-thumb) as the video
   facade, so video and non-video lessons sit in identical unified cards. It's the
   16:9 sizing element itself (the facade is absolutely filled inside .card__video),
   so it owns aspect-ratio + radius + border here. Non-interactive. */
.card__coming-soon {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Status badge replaces the play affordance; pinned to the inline-start. Clock
   icon + text so colour is not the sole signal. --text-muted ≈ 7:1 on the ground. */
.card__coming-soon .lesson-thumb__foot {
  justify-content: flex-start;
}

.card__coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14); /* frosted white pill on the pink ground */
  color: #FFFFFF;
  font-size: var(--fs-label);
  font-weight: 600;
}

.card__coming-soon-badge-icon {
  display: inline-flex;
  color: #FFFFFF;
}

.card__coming-soon-badge-icon svg {
  width: 16px;
  height: 16px;
}

/* Mobile: the 16:9 slot is short (~170px), so tighten the branded thumbnail —
   smaller title/leading and gaps — so logo + chapter + title + subtitle + affordance
   all fit without clipping. Desktop keeps the roomy poster proportions. */
@media (max-width: 767.98px) {
  .lesson-thumb {
    gap: var(--space-1);
    padding: var(--space-3);
  }

  .lesson-thumb__body {
    gap: 2px;
  }

  .lesson-thumb__title {
    font-size: 1rem;
    line-height: 1.15;
  }

  .lesson-thumb__subtitle {
    margin-block-start: 2px;
  }
}

/* ── Data-contract error banner (role="alert", prepended to <body>) ───────── */
.contract-error {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding-inline: var(--page-inset);
  padding-block: var(--space-4);
  background: var(--surface);
  color: var(--text);
  border-block-end: 2px solid var(--error);
}

.contract-error__heading {
  color: var(--error);
  font-weight: 700;
}

.contract-error__body {
  color: var(--text-muted);
}

/* ── Branded footer ───────────────────────────────────────────────────────────
   A designed close, not an afterthought. It bookends the hero: the same WBK
   Academy lockup + a pink "horizon" glow rising from the bottom that mirrors the
   hero's top glow, plus a glowing pink seam along the top edge. Two columns
   (brand · sign-off) over a hairline attribution bar. Logical properties so the
   grid mirrors for free under RTL. */
.site-footer {
  position: relative;
  margin-block-start: var(--space-16);
  border-block-start: 1px solid var(--border);
  background:
    radial-gradient(80% 120% at 50% 128%, rgba(233, 63, 125, 0.20), rgba(233, 63, 125, 0) 62%),
    var(--bg);
  overflow: hidden;
}

/* Glowing pink seam — a thin brand accent line fading out at both edges. */
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  block-size: 1px;
  background: linear-gradient(90deg, rgba(233, 63, 125, 0), var(--wbk-pink), rgba(233, 63, 125, 0));
  opacity: 0.7;
}

.site-footer__inner {
  position: relative;
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--page-inset);
  padding-block: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}

/* Brand column — the hero lockup, restated. */
.site-footer__lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.site-footer__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 1.7em;
  block-size: 1.7em;
  border-radius: var(--radius-lg);
  background: var(--wbk-pink-tint);
  border: 1px solid var(--wbk-pink-tint-strong);
  color: var(--wbk-pink);
  font-size: 0.62em;
}

.site-footer__mark svg {
  display: block;
  width: 1em;
  height: 1em;
}

.site-footer__wbk {
  color: var(--wbk-pink);
}

.site-footer__mission {
  margin: var(--space-4) 0 0;
  max-inline-size: 44ch;
  color: var(--text-soft);
  font-size: var(--fs-read);
  line-height: 1.7;
}

/* Sign-off column — the concept's heart. */
.site-footer__signoff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.site-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  border: 1px solid var(--wbk-pink);
  border-radius: var(--radius-pill);
  color: var(--wbk-pink); /* on --bg ≈ 5.3:1 → passes; also a display-scale accent chip */
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer__badge-icon {
  display: inline-flex;
}

.site-footer__badge-icon svg {
  width: 13px;
  height: 13px;
}

.site-footer__headline {
  margin: 0;
  max-inline-size: 22ch;
  font-size: var(--fs-headline);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text);
}

.site-footer__note {
  margin: 0;
  max-inline-size: 46ch;
  color: var(--text-muted); /* 7.76:1 on --bg → PASS. Never pink. */
  font-size: var(--fs-label);
  line-height: 1.7;
}

.site-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-block-start: var(--space-1);
  padding-inline: var(--space-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.site-footer__cta:hover {
  background: var(--surface-hover);
  border-color: var(--surface-active);
  box-shadow: var(--shadow-sm);
}

.site-footer__cta-icon {
  display: inline-flex;
  color: var(--text-muted);
}

.site-footer__cta-icon svg {
  width: 16px;
  height: 16px;
}

/* Attribution bar — webook.com mark + concept line, over a hairline. */
.site-footer__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* keep the logo on the inline-start when stacked (mobile) */
  gap: var(--space-4);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border);
}

@media (min-width: 768px) {
  .site-footer__bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
}

.site-footer__logo {
  display: block;
  height: 26px;
  width: auto;
}

.site-footer__legal {
  margin: 0;
  color: var(--text-muted); /* 7.76:1 on --bg → PASS. Never pink. */
  font-size: var(--fs-label);
  font-weight: 500;
}

/* The English-chrome footer sentences carry dir="ltr" so their punctuation renders
   correctly (no floating period/em-dash) even inside the AR-mirrored shell. Under AR
   we still right-align them so they hug their column's start edge (the right),
   matching the hero's start-aligned English chrome. Keyed off <html data-lang="ar">
   because :dir(rtl) won't match these now-LTR nodes. The legal line is left out — it
   lives in the flex bar where space-between already mirrors it to the correct edge. */
[data-lang="ar"] .site-footer__mission,
[data-lang="ar"] .site-footer__headline,
[data-lang="ar"] .site-footer__note {
  text-align: right;
}