/* ============================================================================
   Legal pages — Privacy Policy, Terms and Conditions, Cookie Policy
   Generated content from content-team docx files.
   ========================================================================== */

/* NOTE: selector includes .legal-body so it out-specifies `.page--legal
   .legal-body p` (0,3,0 > 0,2,1) — otherwise this <p> rendered as 16px dark
   body text instead of the small grey meta line the Figma shows. */
.page--legal .legal-body .legal-last-modified {
    font-family: inherit;               /* locale font: Noto Sans (LTR) / Noto Naskh Arabic (RTL) */
    font-weight: 400;                   /* Regular */
    font-size: var(--font-size-lg);     /* ~18px — small meta line per Figma */
    line-height: 1;                     /* 100% per Figma */
    letter-spacing: 0;                  /* 0% per Figma */
    color: #818181;                     /* grey, per Figma */
    margin-top: 0;
    margin-bottom: var(--space-10);     /* ~64px — generous gap before the body, per Figma (was 32px) */
}

.page--legal .legal-body {
    padding-top: var(--space-10);   /* ~64px banner→content, per Figma (section--tight gives 50) */
}

.page--legal .legal-body__container {
    /* Figma: legal body fills the standard 1200px content container (not the
       narrow 880px reading column it used before). The element also carries
       `.container`, so match its cap rather than removing it (none → full
       viewport width). */
    max-width: var(--container-max);
    margin-inline: auto;
}

.page--legal .legal-body p {
    color: var(--color-body-strong);
    /* Figma legal body: Noto Sans 18px, line-height ~140% (≈25px), 20px gap
       between paragraphs. Measured from the 3× Privacy export: 18px ink height,
       25px line pitch, 45px paragraph pitch (= 25 + 20). */
    font-size: var(--font-size-lg);
    line-height: 25px;              /* Figma: 18/25px body */
    margin-bottom: var(--space-5);
}

/* Bulleted lists — override the global `ul,ol { list-style: none }` reset. */
.page--legal .legal-body ul {
    list-style: disc;
    padding-inline-start: 1.5em;
    margin-bottom: var(--space-4);
}
.page--legal .legal-body li {
    color: var(--color-body-strong);
    font-size: var(--font-size-lg);
    line-height: 25px;              /* Figma: 18/25px list items */
    margin-bottom: var(--space-2);
    padding-inline-start: var(--space-2);
}
/* Bullet markers are brand pink (#E5197F) per Figma — text stays dark. */
.page--legal .legal-body li::marker {
    color: var(--color-pink);
}

.page--legal .legal-body a {
    color: var(--color-pink);
    /* Exception to the global "links never wrap" rule: legal copy contains
       raw URLs (50+ chars) that MUST be allowed to break, or they overflow on
       mobile. */
    white-space: normal;
    word-break: break-word;
}

.page--legal .legal-body a:hover {
    text-decoration: underline;
}

/* Phone number: keep it on one line and LTR (see base.css a[href^="tel:"]). The
   legal body sets links to white-space: normal for long URLs, so re-pin nowrap. */
.page--legal .legal-body a[href^="tel:"] {
    white-space: nowrap;
    word-break: normal;
}

.page--legal .legal-h2 {
    /* H2 per Figma node 344:1738: fontSize 24, weight 400 (REGULAR), lineHeightPx
       ≈33. NOTE: Figma shows "line-height 100%", which is the font's NATURAL line
       height (Noto Sans ≈136% → 24×1.36 ≈ 33px), NOT line-height = font-size — so
       the glyphs are 24px, not 33px. Do NOT "fix" this to a 33px font (QA misread
       the 33px line box as the font size, 2026-06-09). Was 20px/700 originally. */
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-body-strong);
    margin-top: var(--space-10);    /* ~64px before each heading, per Figma (was 40px) */
    margin-bottom: var(--space-5);  /* ~20px after heading (was 16px) */
    line-height: 33px;              /* Figma: 24/33px H2 */
}

/* First H2 doesn't need the big top margin */
.page--legal .legal-body :where(h2):first-child {
    margin-top: 0;
}