/* ============================================================================
   static-page.css — long-form company pages (About, Terms, Privacy)
   ============================================================================
   Design-A has no long-form text page, so this is a new element sheet rather
   than a restyle of an approved one (R4). It introduces no new colour, font or
   spacing value: every declaration below resolves to a token already defined in
   css/shared/global.css.

   Written with logical properties throughout (margin-inline, padding-inline,
   border-inline-start, text-align: start) so the Arabic RTL pages need no
   direction overrides at all.
   ============================================================================ */

.static-page {
  padding-block: var(--sp-10) var(--sp-16);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.static-page__header {
  margin-block-end: var(--sp-10);
  padding-block-end: var(--sp-6);
  border-block-end: 1px solid var(--gray-200);
}

.static-page__title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--navy);
  margin-block-end: var(--sp-3);
}

.static-page__lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--gray-700);
}

.static-page__updated {
  display: block;
  margin-block-start: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--gray-600);
}

/* ── Body ───────────────────────────────────────────────────────────────── */

.static-page__section {
  margin-block-end: var(--sp-10);
}

.static-page__heading {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--navy);
  margin-block-end: var(--sp-4);
}

.static-page__subheading {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--gray-900);
  margin-block: var(--sp-6) var(--sp-3);
}

.static-page__body p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--gray-700);
  margin-block-end: var(--sp-4);
}

.static-page__body p:last-child {
  margin-block-end: 0;
}

.static-page__list {
  margin-block-end: var(--sp-4);
  padding-inline-start: var(--sp-6);
}

.static-page__list li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--gray-700);
  margin-block-end: var(--sp-2);
}

.static-page__body a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.static-page__body a:hover {
  color: var(--secondary-hover);
}

/* ── Callout — a highlighted "the important bit" panel ──────────────────── */

.static-page__callout {
  margin-block: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--primary-light);
  border-inline-start: 4px solid var(--primary);
  border-radius: var(--radius-md);
}

.static-page__callout p {
  color: var(--gray-900);
  margin-block-end: 0;
}

/* ── Pending-review notice ──────────────────────────────────────────────────
   Marks a passage whose legally-operative details are not yet supplied. It is
   deliberately loud: an unnoticed placeholder in a Terms or Privacy page is far
   more damaging than an ugly one. Remove the block once the value is filled —
   the notice is not meant to live on the site. ─────────────────────────────── */

.static-page__pending {
  margin-block: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: var(--warning-light);
  border: 1px dashed var(--warning);
  border-radius: var(--radius-md);
}

.static-page__pending-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--warning);
  margin-block-end: var(--sp-2);
}

.static-page__pending p {
  color: var(--gray-900);
  margin-block-end: 0;
}

/* ── Table of contents ──────────────────────────────────────────────────── */

.static-page__toc {
  margin-block-end: var(--sp-10);
  padding: var(--sp-5) var(--sp-6);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}

.static-page__toc-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600);
  margin-block-end: var(--sp-3);
}

.static-page__toc-list {
  display: grid;
  gap: var(--sp-2);
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .static-page__toc-list { grid-template-columns: 1fr 1fr; }
}

.static-page__toc-list a {
  font-size: var(--text-sm);
  color: var(--secondary);
  text-decoration: none;
}

.static-page__toc-list a:hover { text-decoration: underline; }

/* ── Small screens ──────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .static-page { padding-block: var(--sp-8) var(--sp-12); }
  .static-page__title { font-size: var(--text-3xl); }
  .static-page__heading { font-size: var(--text-xl); }
}