/* The three legal pages (legal-refunds.html, legal-terms.html, legal-privacy.html; /reembolsos, /terminos and
   /privacidad in the build). Jeanette's landing look on tokens.css beside this file (her values): landing.css gives the
   base, her byline and her footer, unchanged; this file adds only the long-text layout. Her package has no legal page
   design, so it is composed from her landing's parts: the byline header, Fraunces headings, Inter text, Poppins labels,
   her aqua for links and list marks, the aqua-50 footer. */

/* The column: one readable measure for the header, the text and the back link (better-typography: 60 to 75
   characters per line). 66ch of 17 px Inter is about 70 characters. */
.legal-wrap { max-width: calc(66ch + 2 * var(--margin)); }
.legal-top { padding: var(--sp-18) 0 0; }
.legal-top .byline { margin-bottom: var(--sp-8); }
.legal-main { padding: var(--sp-8) var(--margin) var(--sp-56); }

/* Back to the landing: a real link with her aqua and a chevron, 44 px tall so a thumb finds it */
.back { display: inline-flex; align-items: center; gap: var(--sp-6); min-height: 44px; color: var(--aqua-700); font: 600 var(--fs-15)/1.2 var(--font-label); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.back svg { flex: none; width: 18px; height: 18px; margin-inline-start: calc(-1 * var(--sp-4)); }   /* optical: the chevron's empty side */
@media (hover: hover) { .back:hover { color: var(--aqua-800); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: from-font; } }
.legal-end { margin-top: var(--sp-40); padding-top: var(--sp-12); border-top: 1px solid var(--line); }

/* The text */
.legal { color: var(--ink); }
.legal h1 { margin-top: var(--sp-14); font-size: var(--fs-34); line-height: 1.15; }
.updated { margin-top: var(--sp-10) !important; color: var(--ink-faint); font-size: var(--fs-14); }
.legal .intro { margin-top: var(--sp-24); }
/* Section headings: Fraunces like hers, one step under the h1, 2x the paragraph gap above them (grouping by space) */
.legal h2 { margin: var(--sp-40) 0 var(--sp-12); font-size: var(--fs-22); line-height: 1.25; letter-spacing: 0; text-wrap: balance; scroll-margin-block-start: var(--sp-24); }
.legal h3 { margin: var(--sp-24) 0 var(--sp-8); font: 600 var(--fs-16)/1.3 var(--font-label); color: var(--ink); }
.legal h2 + h3 { margin-top: var(--sp-12); }
.legal p + p { margin-top: var(--sp-12); }
.legal ul, .legal ol { margin: var(--sp-12) 0 0; padding-inline-start: var(--sp-22); }
.legal li { padding-inline-start: var(--sp-4); }
.legal li + li { margin-top: var(--sp-8); }
.legal li::marker { color: var(--aqua-700); }
.legal ol li::marker { font: 600 var(--fs-15)/1 var(--font-label); }
.legal ul + p, .legal ol + p, .legal table + p { margin-top: var(--sp-16); }
.legal strong { font-weight: 600; }
.legal a { color: var(--aqua-700); text-underline-offset: 0.2em; text-decoration-thickness: from-font; overflow-wrap: anywhere; }
@media (hover: hover) { .legal a:hover { color: var(--aqua-800); } }
/* Cookie names: her text face, a soft aqua tint so they read as names, no third font */
.legal code { padding: 0 var(--sp-4); border-radius: var(--r-5); background: var(--aqua-50); font-family: var(--font-text); font-size: inherit; font-weight: 600; white-space: nowrap; }
/* In the cookie table a long name (hp_consent_at) is wider than its column at 320 px: there it wraps instead of
   spilling into the next column, each line keeping its tint (better-layout: plan for clipping) */
.legal td code { white-space: normal; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* The cookie list in the privacy notice: a real table, three columns, text wraps inside the cells; it fits 320 px */
.legal table { width: 100%; margin-top: var(--sp-16); border-collapse: collapse; table-layout: fixed; font-size: var(--fs-15); line-height: 1.45; }
.legal th, .legal td { padding: var(--sp-12) var(--sp-10) var(--sp-12) 0; text-align: start; vertical-align: top; overflow-wrap: break-word; }
.legal th:last-child, .legal td:last-child { padding-inline-end: 0; }
.legal thead th { padding-top: 0; border-bottom: 2px solid var(--aqua-100); font: 600 var(--fs-14)/1.3 var(--font-label); color: var(--ink); }
.legal tbody td { border-bottom: 1px solid var(--line); }
.legal col.c-what { width: 36%; }
.legal col.c-who { width: 24%; }
.legal td small { display: block; margin-top: var(--sp-2); color: var(--ink-soft); font-size: var(--fs-14); }

/* Footer: hers (landing.css); the page you are on reads as current, not as a link to itself */
.footer nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

@media (min-width: 960px) {
  .legal-top { padding-top: var(--sp-40); }
  .legal-main { padding-bottom: var(--sp-96); }
  .legal h1 { font-size: var(--fs-44); }
  .legal h2 { margin-top: var(--sp-48); font-size: var(--fs-24); }
  .legal table { font-size: var(--fs-16); }
}
@media (forced-colors: active) { .legal code { border: 1px solid CanvasText; } }