/* ============================================================
   Privacy Policy — /privacy-policy/

   Values are the Solaris Design System tokens, loaded from assets/ds/tokens/
   unedited. Every value is a var() except the sticky offsets under "The
   header clearance", which say why they are numbers.

   Everything is scoped under .sol-privacy. The element defaults the design
   system ships in base.css are NOT loaded, because they would restyle the
   site header; the few this page needs are reproduced here, scoped.

   A LEGAL PAGE IS A READING PAGE. One accent only — Flamingo, on links —
   and no grounds but white and the one light grey. The measure is capped so
   the policy sets at a readable line length however wide the window.
   ============================================================ */

/* ---- Page shell -------------------------------------------- */

.sol-privacy {
  --wrap: calc(var(--layout-max-width) + 2 * var(--layout-gutter));

  /* The header clearance. The site header is sticky and 96px tall at
     desktop, 72px below 768px (styles/nav.css); anchors and the sticky
     contents panel have to land below it, with a step of air. */
  --sol-privacy-clearance: calc(96px + var(--space-600));

  background: var(--color-surface-default);
  color: var(--color-text-secondary);
  font: var(--type-body-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sol-privacy *,
.sol-privacy *::before,
.sol-privacy *::after { box-sizing: border-box; }

/* In :where() so they weigh nothing and the component classes below win. */
.sol-privacy :where(h1, h2) { color: var(--color-text-primary); margin: 0; }
.sol-privacy :where(p) { margin: 0; }
.sol-privacy :where(a) { color: var(--color-text-link); text-decoration: none; }
.sol-privacy :where(a:hover) { color: var(--color-accent-hover); }
.sol-privacy :where(a, button):focus-visible { outline: 0; box-shadow: var(--elevation-focus); }

.sol-privacy__wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

.sol-privacy__eyebrow {
  font: var(--type-label-sm);
  letter-spacing: var(--type-label-sm-tracking);
  text-transform: uppercase;
  color: var(--color-text-brand);
  margin: 0 0 var(--space-400);
}

/* ============================================================
   1. Hero
   ============================================================ */

.sol-privacy__hero {
  padding-block: var(--layout-section-half) var(--space-800);
  border-bottom: 1px solid var(--color-border-default);
}

.sol-privacy__display {
  font: var(--type-display-xl);
  letter-spacing: var(--type-display-xl-tracking);
  color: var(--color-text-primary);
}

.sol-privacy__updated {
  font: var(--type-body-lg);
  color: var(--color-text-muted);
  margin-top: var(--space-500);
}

/* ============================================================
   2. The policy
   ============================================================ */

.sol-privacy__body {
  padding-block: var(--space-800) var(--layout-section-half);
}

/* Contents left, text right. The text column is capped at a reading measure
   and the contents panel takes what is left of a 1280px column. */
.sol-privacy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46rem);
  gap: var(--space-900);
  align-items: start;
}

/* ---- Contents panel ---------------------------------------- */

.sol-privacy__toc {
  position: sticky;
  top: var(--sol-privacy-clearance);
  background: var(--color-surface-offset);
  padding: var(--space-600);
  /* A long list in a short window scrolls inside itself rather than running
     off the bottom of a sticky box that can never be scrolled to. */
  max-height: calc(100vh - var(--sol-privacy-clearance) - var(--space-600));
  overflow-y: auto;
}

.sol-privacy__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 36px rows beside the text, where the reader has a pointer and sixteen
   44px rows would outgrow the window. Stacked on a touch screen they go back
   up to the 44px target — see "Responsive". */
.sol-privacy__toc a {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding-block: var(--space-100);
  font: var(--type-body-sm);
  color: var(--color-text-secondary);
}

.sol-privacy__toc a:hover { color: var(--color-accent-hover); }

/* ---- The text ---------------------------------------------- */

.sol-privacy__policy > section + section {
  margin-top: var(--space-700);
  padding-top: var(--space-700);
  border-top: 1px solid var(--color-border-default);
}

/* Section headings at heading/4. Sixteen of them in a row at h2's 40px would
   shout; the h2 element is right for the outline, the size is not. */
.sol-privacy__heading {
  font: var(--type-heading-4);
  letter-spacing: var(--type-heading-4-tracking);
  color: var(--color-text-primary);
  margin-bottom: var(--space-400);
  scroll-margin-top: var(--sol-privacy-clearance);
}

.sol-privacy__policy p,
.sol-privacy__policy li {
  text-wrap: pretty;
}

.sol-privacy__policy p + p,
.sol-privacy__policy p + ul,
.sol-privacy__policy p + ol,
.sol-privacy__policy ul + p,
.sol-privacy__policy ol + p {
  margin-top: var(--space-400);
}

.sol-privacy__policy ul,
.sol-privacy__policy ol {
  margin: 0;
  padding-left: var(--space-500);
}

.sol-privacy__policy ul { list-style: disc; }
.sol-privacy__policy ol { list-style: decimal; }

.sol-privacy__policy li + li { margin-top: var(--space-200); }

.sol-privacy__policy li::marker { color: var(--color-text-muted); }

.sol-privacy__policy cite { font-style: italic; }

/* Links in running text are underlined: colour alone is not enough to mark
   a link inside a paragraph. */
.sol-privacy__policy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A phone number is one word. "1300 / 363 992" split across two lines reads
   as two numbers. */
.sol-privacy__policy a[href^="tel:"] { white-space: nowrap; }

.sol-privacy__stamp {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Below 1024px there is no room for a side panel beside a readable measure,
   so the contents stack above the text and stop sticking. */
@media (max-width: 1023.98px) {
  .sol-privacy__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-700);
  }

  .sol-privacy__toc {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .sol-privacy__toc a { min-height: var(--target-min); }
}

@media (max-width: 767.98px) {
  .sol-privacy {
    --sol-privacy-clearance: calc(72px + var(--space-500));
  }

  .sol-privacy__wrap { padding: 0 var(--space-500); }

  .sol-privacy__hero { padding-block: var(--space-800) var(--space-700); }

  .sol-privacy__body { padding-block: var(--space-700) var(--space-800); }

  .sol-privacy__toc { padding: var(--space-500); }
}