/* ══════════════════════════════════════════════════════════════════
   Content Pages polish — Cycle 6 (P1 #5 WC-C)
   Storefront content pages (terms, privacy, about, contact, etc.).
   Prose typography rules + active-state chips for the "Other pages"
   navigation strip + last-updated metadata.
   ══════════════════════════════════════════════════════════════════ */

/* ── Prose typography for legal / long-form content ─────────────
   Sets a comfortable reading width (65ch ≈ 75 chars/line on most
   fonts) and rhythm rules so terms / privacy / about read like
   prose instead of cramped UI text. Scoped to .wasla-page-prose
   so the content body doesn't bleed styles into the surrounding
   storefront chrome.
   ────────────────────────────────────────────────────────────────── */

.wasla-page-prose {
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body, #212529);
}

/* Cycle 20 Lane D: page title + prose headings re-toned to the navy
   ink token per v2 §3 ("headings = navy on light surfaces"). The
   storefront body text is near-black zinc, so legal/long-form headings
   read flat. `--wasla-ink` is token-flip driven (navy in light,
   off-white in dark) — no dark override needed. Neutral chrome. */
.wasla-page-title {
  color: var(--wasla-ink, #1D3A5E);
}

.wasla-page-prose h1,
.wasla-page-prose h2,
.wasla-page-prose h3,
.wasla-page-prose h4 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wasla-ink, #1D3A5E);
}

.wasla-page-prose h1 { font-size: 1.75rem; margin-top: 0; }
.wasla-page-prose h2 { font-size: 1.375rem; }
.wasla-page-prose h3 { font-size: 1.125rem; }
.wasla-page-prose h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #6c757d); }

.wasla-page-prose p {
  margin-bottom: 1rem;
}

.wasla-page-prose ul,
.wasla-page-prose ol {
  margin-bottom: 1rem;
  padding-inline-start: 1.5rem;
}

.wasla-page-prose li {
  margin-bottom: 0.375rem;
}

.wasla-page-prose blockquote {
  margin: 1.25rem 0;
  padding: 0.5rem 1rem;
  /* Cycle 20 Lane D: --brand-primary fallback + matching bg tint
     re-toned to v2 navy #1D3A5E (rgb 29,58,94) — was #1F4FD8. */
  border-inline-start: 3px solid var(--brand-primary, #1D3A5E);
  background: rgba(29, 58, 94, 0.04);
  color: var(--text-muted, #6c757d);
  font-style: italic;
}

.wasla-page-prose code {
  font-size: 0.9375em;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  /* Same bidi isolation as the help-drawer inline code so technical
     strings render LTR even on Arabic pages. */
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

.wasla-page-prose a {
  /* Cycle 20 Lane D: --brand-primary fallback re-toned to v2 navy
     #1D3A5E (was legacy #1F4FD8). */
  color: var(--brand-primary, #1D3A5E);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wasla-page-prose hr {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .wasla-page-prose blockquote {
  background: rgba(147, 197, 253, 0.06);
  color: rgba(255, 255, 255, 0.7);
}

[data-bs-theme="dark"] .wasla-page-prose code {
  background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .wasla-page-prose hr {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* Cycle 22: prose body color uses --text-body with a near-black #212529
   fallback; the token is never defined upstream so dark mode renders the
   hardcoded fallback (unreadable on the deep-navy canvas). Override to
   the dark off-white so legal/long-form text reads on dark. */
[data-bs-theme="dark"] .wasla-page-prose {
  color: #e5e7eb;
}

/* Cycle 23 Lane A: h4 prose headings use --text-muted with a #6c757d
   fallback; the token is undefined upstream so dark renders the hardcoded
   value (too dark against the dark canvas). Lift to the dark muted tone
   so uppercase sub-headings stay readable. */
[data-bs-theme="dark"] .wasla-page-prose h4 { color: #9ca3af; }

/* ── "Other pages" chip strip with active state (WC-C) ──────────
   Active page gets the same brand-blue tint as the home category
   tile selection — visual consistency across navigation states.
   ────────────────────────────────────────────────────────────────── */

.wasla-page-chip--active {
  /* Cycle 20 Lane D: --brand-primary fallback re-toned to v2 navy
     #1D3A5E (was legacy #1F4FD8). */
  background-color: var(--brand-primary, #1D3A5E) !important;
  border-color: var(--brand-primary, #1D3A5E) !important;
  color: #fff !important;
}