/* =============================================================
   SkiAllDay — legal documents (/privacy, /privacy/v1, /imprint)
   Loaded after resort.css. A policy is a numbered document that
   somebody has to be able to read end to end, so it gets one
   measure, generous leading and nothing else.
   ============================================================= */

.legal-updated {
  margin: 18px 0 0; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}

.legal { max-width: var(--measure); padding-bottom: 20px; }
.legal > p:first-child { font-size: 1.125rem; line-height: 1.6; }

/* The headings carry their own numbers ("1. Summary"), which are referenced by
   number in the text and in the App Store listing, so this document does not
   use the counter that numbers a resort guide's sections. */
.legal section {
  padding: clamp(28px, 4vw, 40px) 0 0;
  border-top: 1px solid var(--rule);
  margin-top: clamp(28px, 4vw, 40px);
}
.legal section:first-of-type { border-top: 0; margin-top: 22px; padding-top: 0; }

.legal h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 16px;
}
.legal h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.0625rem;
  margin: 28px 0 10px;
}
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 18px; padding-left: 20px; }
.legal li { margin-bottom: 9px; }
.legal li::marker { color: var(--ink-soft); }
.legal strong { font-weight: 600; }
.legal address { font-style: normal; }

/* Which app versions a policy covers, and the link to the other one. Several
   app versions are installed at once, so a reader has to be able to tell which
   policy is theirs without reading either. */
.legal-version {
  margin: 10px 0 0; font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft);
}
.legal-version a { color: var(--ink); text-underline-offset: 3px; }

/* Purpose / data / legal basis, and provider / role / data. Three columns fit
   the measure on a wide screen; below that each row becomes a small block with
   its column names inline, so the page never scrolls sideways. */
.legal-table {
  width: 100%; border-collapse: collapse; margin: 4px 0 22px;
  font-size: 0.9375rem; line-height: 1.5;
}
.legal-table th, .legal-table td {
  padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule);
  text-align: left; vertical-align: top;
}
.legal-table th:last-child, .legal-table td:last-child { padding-right: 0; }
.legal-table thead th {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  padding-top: 0;
}
.legal-table td:first-child { font-weight: 600; width: 34%; }

@media (max-width: 620px) {
  .legal-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: auto; }
  .legal-table tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .legal-table tr:first-child { border-top: 1px solid var(--rule); }
  .legal-table td, .legal-table td:first-child { border: 0; padding: 0; width: auto; }
  .legal-table td + td { margin-top: 8px; }
  .legal-table td + td::before {
    content: attr(data-label); display: block; margin-bottom: 1px;
    font-family: var(--sans); font-size: 0.6875rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  }
}