/* ===================================================================
   Legal pages — per-page styles (loads after css/styles.css). Namespace: .legal* only.
   Built 2026-10-17 for cookie-policy.html, privacy-policy.html and licenses.html (English only
   for now), adapted from the user's Figma exports to the site's scale: a head column (title,
   date / subtitle, the sibling links) beside a body column of hairline-separated sections.
   Tokens only — both themes follow.
   =================================================================== */

.legal { padding-block: 88px 128px; }

/* the two columns: the body column ends at the container's right gutter, under the navbar's actions */
.legal__grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 760px);
  column-gap: clamp(64px, 7vw, 120px);
  justify-content: space-between;
  align-items: start;
}

/* the head column sticks under the sticky navbar (74 px + a 1 px border) only when the viewport is tall enough
   to hold it — on short / zoomed viewports it stays static (WCAG 1.4.10 / 1.4.12) */
@media (min-height: 600px) {
  .legal__head { position: sticky; top: 112px; }
}

/* max-width 300: the ISO design's breaks «Certifications / & Compliance / at Intelica» («Certifications &» = 320.7 px would fit 340); «Privacy Policy» 292.3 and «Cookie Policy» 284 stay on one line */
.legal__title { margin: 0; max-width: 300px; font-size: 48px; line-height: 1.08; font-weight: 500; letter-spacing: -0.03em; color: var(--headline); }
.legal__sub { margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--text); }

/* the sibling legal pages: the arrows share one column (min-width + space-between) */
.legal__nav { margin-top: 40px; }
.legal__navlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.legal__navlink {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 162px;
  gap: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--headline);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .2s ease;
}
.legal__navlink .icon { color: var(--brand); flex: none; }
.legal__navlink:hover { color: var(--brand); }

/* the body column */
.legal__body { font-size: 17px; line-height: 1.65; color: var(--text); }
.legal__body p { margin: 0; }
.legal__body p + p { margin-top: 14px; }

.legal__section + .legal__section { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--border); }

.legal__h { margin: 0 0 10px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--headline); }
/* the ISO design sets «What this means…» at the section-heading size (the same cap height as the h2s) */
.legal__h3 { margin: 22px 0 8px; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--headline); }

.legal__list { margin: 10px 0 0; padding-left: 22px; }
.legal__list li + li { margin-top: 6px; }
.legal__list + p { margin-top: 14px; }

.legal__plain { list-style: none; margin: 8px 0 0; padding-left: 22px; }
.legal__plain li + li { margin-top: 4px; }

/* links in the policy text: dark text with a 2 px brand underline, orange on hover (the user's choice, AA for running text) */
.legal__body a:not(.btn) {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color .2s ease;
}
.legal__body a:not(.btn):hover { color: var(--brand); }
.legal a { scroll-margin-top: 96px; }   /* a focused link scrolled into view (Shift+Tab) stays clear of the 75-px sticky navbar — WCAG 2.4.7 */

/* the cookie tables: a tinted header row, alternating tinted rows, centred cells */
.legal__tablewrap { margin-top: 20px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.legal__table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; table-layout: fixed; }
.legal__table thead th:nth-child(1) { width: 15%; }
.legal__table thead th:nth-child(2) { width: 18%; }
.legal__table thead th:nth-child(3) { width: 31%; }
.legal__table thead th:nth-child(4) { width: 16%; }
.legal__table thead th:nth-child(5) { width: 20%; }
.legal__table th,
.legal__table td { padding: 14px 12px; text-align: center; vertical-align: middle; }
.legal__table thead th {
  background: color-mix(in srgb, var(--text-strong) 7%, var(--surface));
  color: var(--headline);
  font-weight: 600;
  font-size: 13px;
  padding-block: 18px;
}
.legal__table tbody th,
.legal__table tbody td { border-top: 1px solid var(--border); background: var(--surface); color: var(--text); }
.legal__table tbody th { font-weight: 400; color: var(--text); }   /* the design sets the cookie names like every cell; th scope=row stays for the semantics */
.legal__table tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--text-strong) 5%, var(--surface)); }

/* the ISO badge (rounded to a circle, so its light corners never show on the dark theme) */
.legal__badge { margin: 8px 0 24px; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.legal__badge img { display: block; width: 124px; height: auto; border-radius: 50%; }
.legal__badgecap { font-size: 12px; font-style: italic; color: var(--brand); }

/* the closing button (0,2,0: beats .legal__body p and p + p) */
.legal__body .legal__cta { margin-top: 28px; }