/* ============================================================
   COMPONENT: Legal Document Page
   FILE: assets/css/legal-page.css
   Phase: Stage 11.1 (Final Master Blueprint Roadmap — Final Legal
   Pages: Privacy Policy, Terms & Conditions, Cookie Policy).
   Depends on: tokens.css, base.css, surfaces.css.

   Owns only .legal-page-* selectors. This file does not introduce
   a new design language — it reuses the existing type scale, color
   tokens, spacing scale and .surface--solid card treatment already
   established by about.css / status-page.css, arranged into a
   single-column readable document layout (no new card system, no
   new color palette).

   Bilingual/RTL: logical properties only (margin-inline,
   padding-inline, text-align: start) so this mirrors correctly
   under dir="rtl" with no override needed here.
   ============================================================ */

/* ----------------------------------------------------------
   WRAPPER
---------------------------------------------------------- */
.legal-page {
  padding-block: var(--space-10);
}

.legal-page__inner {
  max-width: 860px;
}

/* ----------------------------------------------------------
   META BAR — effective date / last updated
---------------------------------------------------------- */
.legal-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-5);
  border-block-end: var(--border-hairline);
}

.legal-page__meta-item {
  font-size: var(--text-small);
  color: var(--color-dark-gray);
}

.legal-page__meta-label {
  font-weight: 600;
  color: var(--color-navy);
  margin-inline-end: var(--space-1);
}

/* ----------------------------------------------------------
   INTRO
---------------------------------------------------------- */
.legal-page__intro {
  color: var(--color-dark-gray);
  margin-block-end: var(--space-6);
}

.legal-page__intro:last-child {
  margin-block-end: 0;
}

/* ----------------------------------------------------------
   TABLE OF CONTENTS
---------------------------------------------------------- */
.legal-page__toc {
  padding: var(--space-4);
  margin-block-end: var(--space-8);
}

.legal-page__toc-heading {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-navy);
  margin-block-end: var(--space-2);
}

.legal-page__toc-list {
  list-style: none;
  columns: 2;
  column-gap: var(--space-4);
}

@media (max-width: 640px) {
  .legal-page__toc-list {
    columns: 1;
  }
}

.legal-page__toc-list li {
  break-inside: avoid;
  margin-block-end: var(--space-1);
}

.legal-page__toc-link {
  font-size: var(--text-small);
  color: var(--color-dark-gray);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(var(--color-navy-rgb), 0.35);
}

.legal-page__toc-link:hover,
.legal-page__toc-link:focus-visible {
  color: var(--color-navy);
  text-decoration-color: var(--color-gold);
}

/* ----------------------------------------------------------
   SECTIONS
---------------------------------------------------------- */
.legal-page__section {
  margin-block-end: var(--space-8);
  scroll-margin-block-start: var(--space-8);
}

.legal-page__section:last-of-type {
  margin-block-end: 0;
}

.legal-page__section-heading {
  font-size: var(--text-h3);
  color: var(--color-navy);
  margin-block-end: var(--space-3);
}

.legal-page__subheading {
  font-size: 1.05rem;
  color: var(--color-navy);
  margin-block: var(--space-3) var(--space-2);
}

.legal-page__text {
  color: var(--color-dark-gray);
  margin-block-end: var(--space-3);
}

.legal-page__text:last-child {
  margin-block-end: 0;
}

.legal-page__list {
  color: var(--color-dark-gray);
  margin-block-end: var(--space-3);
  padding-inline-start: var(--space-4);
}

.legal-page__list:last-child {
  margin-block-end: 0;
}

.legal-page__list li {
  margin-block-end: var(--space-1);
}

.legal-page__list li:last-child {
  margin-block-end: 0;
}

.legal-page__text strong,
.legal-page__list strong {
  color: var(--color-navy);
  font-weight: 600;
}

/* ----------------------------------------------------------
   CONTACT BLOCK (shared markup — see includes/legal-contact-info.html)
---------------------------------------------------------- */
.legal-page__contact {
  padding: var(--space-4);
  margin-block-start: var(--space-3);
}

.legal-page__contact-name {
  font-weight: 600;
  color: var(--color-navy);
  margin-block-end: var(--space-1);
}

.legal-page__contact-line {
  color: var(--color-dark-gray);
  font-style: normal;
  margin-block-end: var(--space-1);
}

.legal-page__contact-line:last-child {
  margin-block-end: 0;
}

.legal-page__contact-line a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page__contact-line a:hover,
.legal-page__contact-line a:focus-visible {
  color: var(--color-gold);
}