/* Legal and support pages (privacy, terms, support, delete-account) — Sportinzo.
   The pages are generated by scripts/build-legal-pages.mjs; this stylesheet is hand-written.
   Tokens are the ones the homepage takes from the Sportinzo logo (see index.html). */
:root {
  --bg: #ffffff;
  --surface: #f6f8fc;
  --line: #dce3ef;
  --ink: #0b1f4f;
  --text: #1d2a44;
  --muted: #4d5b77; /* 6.9:1 on --bg, 6.5:1 on --surface */
  --accent: #1565e0;
  --link: #0f4fb8; /* 7.5:1 on --bg */
  --link-hover: #0b1f4f;
  --focus: #1565e0;
  --warn-bg: #fff4d6;
  --warn-ink: #6b4500; /* 7.6:1 on --warn-bg */
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --logo-font: 700 20px var(--sans);
  --h1-font: 400 clamp(34px, 6vw, 52px) / 1.08 'Anton', Impact, 'Arial Narrow', sans-serif;
  --accent-strong: #0f4fb8; /* 7.5:1 under white text */
  --field-line: #7b88a3; /* 3.6:1 on --bg: a form field's edge must be visible (WCAG 1.4.11) */
  --danger: #b42318; /* 6.5:1 under white text */
  --danger-ink: #7a1710;
  --danger-bg: #fdecea;
  --ok: #15803d;
  --ok-bg: #e9f7ee;
  --h1-tracking: 0.01em;
}

/* ---------- Shared layout (identical in both brands' legal.css; only the tokens above differ) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: 88px; /* clears the sticky header when a #section link is followed */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--link);
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--link-hover);
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}
.wrap {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Off-screen until focused, so a keyboard user can jump past the header. */
.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-block-end: 1px solid var(--line);
}
.site-head-in {
  max-width: 1200px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-block: 10px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font: var(--logo-font);
}
.logo img {
  display: block;
  height: 32px;
  width: auto;
}
.logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 4px;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 12px var(--sans);
}
.site-head nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.site-head nav a {
  /* 44px tall: a comfortable touch target on a phone (WCAG 2.5.5). */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.site-head nav a:hover {
  background: var(--surface);
  color: var(--ink);
}
.site-head nav a[aria-current='page'] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.doc {
  padding-block: 40px 72px;
}
.doc h1 {
  margin: 0 0 20px;
  color: var(--ink);
  font: var(--h1-font);
  letter-spacing: var(--h1-tracking);
  overflow-wrap: anywhere;
}
.doc h2 {
  margin: 44px 0 12px;
  color: var(--ink);
  font: 700 22px/1.3 var(--sans);
}
.doc h3 {
  margin: 28px 0 8px;
  color: var(--ink);
  font: 700 18px/1.35 var(--sans);
}
.doc p,
.doc ul,
.doc ol {
  margin: 0 0 16px;
}
.doc ul,
.doc ol {
  padding-inline-start: 24px;
}
.doc li {
  margin-block-end: 6px;
}
.doc li::marker {
  color: var(--muted);
}
.doc strong {
  color: var(--ink);
}

/* A wide table scrolls inside its own box rather than pushing the page sideways on a phone. */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}
.doc th,
.doc td {
  padding: 12px 14px;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--line);
}
.doc tbody tr:last-child > * {
  border-block-end: 0;
}
.doc thead th {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}
.doc tbody th {
  color: var(--ink);
  font-weight: 600;
  min-width: 9em;
}

/* A fact the company has not confirmed yet. Visible on purpose: it must not survive to go-live. */
.to-confirm {
  background: var(--warn-bg);
  color: var(--warn-ink);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

.site-foot {
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
}
.site-foot-in {
  max-width: 1200px;
  padding-block: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
}
.site-foot p {
  margin: 0;
}
.site-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.site-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  /* The links wrap onto a second and third row on a phone. Pinned, that header covers a quarter of
     the screen and sits over the very field somebody is typing in; here it scrolls away. */
  .site-head {
    position: static;
  }
  html {
    scroll-padding-block-start: 12px;
  }
  .doc {
    padding-block: 28px 56px;
  }
}

@media print {
  .site-head,
  .site-foot,
  .skip {
    display: none;
  }
  .doc {
    padding: 0;
  }
  a {
    color: inherit;
  }
}

/* ---------- The account-deletion form (delete-account.html) ---------- */
.delete-form {
  margin: 32px 0;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.delete-form h2 {
  margin-block-start: 0;
}
.delete-form h3 {
  margin-block-start: 0;
}
.delete-form__step {
  display: grid;
  gap: 18px;
}
/* `hidden` must win over the grid above, or a step that is not the current one stays on screen. */
.delete-form [hidden] {
  display: none;
}
.delete-form__field {
  display: grid;
  gap: 6px;
}
.delete-form__field label {
  color: var(--ink);
  font-weight: 600;
}
.delete-form__field input {
  /* 48px: a comfortable target for a thumb, and tall enough that iOS does not zoom the page. */
  min-height: 48px;
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 16px; /* below 16px, iOS Safari zooms the page when the field is focused */
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--field-line);
  border-radius: 10px;
}
.delete-form__field input[aria-invalid='true'] {
  border-color: var(--danger);
}
.delete-form__hint,
.delete-form__note {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.delete-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.delete-form__button {
  min-height: 48px;
  padding: 10px 22px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--accent-strong);
  border: 1.5px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  justify-self: start;
}
.delete-form__button:hover {
  filter: brightness(0.92);
}
.delete-form__button[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.delete-form__button--danger {
  background: var(--danger);
}
.delete-form__button--quiet {
  color: var(--ink);
  background: transparent;
  border-color: var(--field-line);
}
.delete-form__done {
  padding: 16px 18px;
  background: var(--ok-bg);
  border-inline-start: 4px solid var(--ok);
  border-radius: 10px;
}
.delete-form__done p:last-child {
  margin-block-end: 0;
}
.delete-form__error {
  margin: 16px 0 0;
  padding: 12px 16px;
  color: var(--danger-ink);
  background: var(--danger-bg);
  border-inline-start: 4px solid var(--danger);
  border-radius: 10px;
  font-weight: 600;
}