/* ==========================================================================
   Legal pages (privacy, terms, cookies, sub-processors, gdpr)
   Only what pages.css's .prose does not already cover: the breadcrumb,
   the desktop sticky contents list, the sub-processors table scroller and
   footnote. Readability first, so nothing here decorates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breadcrumb (kept from aczen.in's legal pages)
   -------------------------------------------------------------------------- */

/* Breadcrumb list laid out in one line */
.legal-crumbs ol {
  display: flex; /* items sit side by side like a path */
  flex-wrap: wrap; /* long page names wrap instead of forcing horizontal scroll */
  gap: 8px; /* space around the separators */
  margin: 0 0 20px; /* resets list margin and separates the crumb from the h1 */
  padding: 0; /* removes the default list indent */
  list-style: none; /* no bullets in a breadcrumb */
  font-size: 0.875rem; /* small print, secondary to the title */
  color: var(--ink-soft); /* secondary text colour, 7.6:1 on white */
}

/* Slash separator before every crumb except the first */
.legal-crumbs li + li::before {
  content: "/"; /* same separator aczen.in uses */
  margin-right: 8px; /* matches the flex gap so spacing is even on both sides */
  color: var(--rule); /* quieter than the text so the names lead */
}

/* Crumb links stay quiet until hovered */
.legal-crumbs a {
  color: var(--ink-soft); /* secondary, so the current page reads as the destination */
  text-decoration: none; /* a breadcrumb is recognisable as navigation without underlines */
}

/* Hover feedback for crumb links */
.legal-crumbs a:hover {
  color: var(--ink); /* darkens as feedback */
  text-decoration: underline; /* non-colour cue on hover */
}

/* The current page name */
.legal-crumbs [aria-current="page"] {
  color: var(--ink); /* full ink, as aczen.in's gray-900 crumb */
}

/* --------------------------------------------------------------------------
   2. Contents list beside the article (desktop only)
   -------------------------------------------------------------------------- */

/* Anchored headings land below the sticky header instead of under it */
.prose h2[id] {
  scroll-margin-top: 96px; /* 69px header plus breathing room */
}

/* Hidden on phones and tablets, where the documents are short enough to scroll */
.legal-toc {
  display: none; /* the single-column article is the whole layout below 1100px */
}

/* Desktop: contents list in a 240px column, article beside it */
@media (min-width: 1100px) {
  /* Two-column grid; minmax(0, 1fr) stops long words forcing overflow */
  .legal-layout {
    display: grid; /* places the nav and the article side by side */
    grid-template-columns: 240px minmax(0, 1fr); /* fixed contents column, flexible article */
    gap: 56px; /* clear gutter so the list never crowds the text */
    align-items: start; /* lets the nav be shorter than the article, which sticky needs */
  }

  /* The contents list follows the reader down the page */
  .legal-toc {
    display: block; /* revealed at this width */
    position: sticky; /* stays in view while the article scrolls */
    top: 100px; /* clears the 69px sticky header */
    max-height: calc(100vh - 120px); /* never taller than the viewport */
    overflow-y: auto; /* long lists (Terms has 11) scroll inside themselves */
  }

  /* Pull the first heading up level with the contents list */
  .legal-layout .prose > :first-child {
    margin-top: 0; /* removes stray top margin so both columns start on one line */
  }
}

/* Visible name for the contents list */
.legal-toc-title {
  margin: 0 0 12px; /* separates the label from the links */
  font-size: 0.875rem; /* small, same size as the links */
  font-weight: 600; /* semibold so it reads as a heading for the list */
  color: var(--ink); /* full ink */
}

/* The list of section links */
.legal-toc ol,
.legal-toc ul {
  margin: 0; /* resets default list margin */
  padding: 0; /* resets default indent */
  list-style: none; /* the left rule marks items, not bullets or numbers */
  border-left: 1px solid var(--rule); /* a single track the current marker slides along */
}

/* Each section link */
.legal-toc a {
  display: block; /* the whole row is clickable */
  margin-left: -1px; /* sits the item's border on top of the track */
  padding: 6px 0 6px 14px; /* vertical room for a comfortable target, indent off the track */
  border-left: 2px solid transparent; /* reserved so the current marker doesn't shift text */
  font-size: 0.875rem; /* small links, the article is the focus */
  line-height: 1.4; /* two-line labels stay compact */
  color: var(--ink-soft); /* quiet until current or hovered */
  text-decoration: none; /* a contents list reads as navigation without underlines */
}

/* Hover feedback */
.legal-toc a:hover {
  color: var(--ink); /* darkens as feedback */
  border-left-color: var(--rule); /* faint marker previews where the click goes */
}

/* The section currently in view, set by js/legal.js */
.legal-toc a[aria-current="true"] {
  color: var(--brand); /* brand blue, not orange: orange on this site means "due" */
  border-left-color: var(--brand); /* non-colour-only cue: a visible bar */
  font-weight: 600; /* weight change also marks it without relying on colour */
}

/* --------------------------------------------------------------------------
   3. Sub-processors table and footnote
   -------------------------------------------------------------------------- */

/* The sub-processors page has no contents list, so give the table a little more width */
.prose.legal-wide {
  max-width: 880px; /* aczen.in uses a wider column (max-w-5xl) on this page */
}

/* Horizontal scroller so the three columns never squash on phones */
.legal-table-scroll {
  margin: 1.5em 0; /* takes over the table's own vertical margin */
  overflow-x: auto; /* the table scrolls inside, the page never does */
  border: 1px solid var(--rule); /* frames the scroll area */
  border-radius: var(--radius-md); /* middle radius tier, same as other panels */
}

/* Keyboard focus ring for the focusable scroller */
.legal-table-scroll:focus-visible {
  outline-offset: 4px; /* keeps the ring clear of the rounded border */
}

/* The table inside the scroller */
.legal-table-scroll table {
  margin: 0; /* the scroller now owns the spacing */
  min-width: 560px; /* below this the columns get too narrow to read */
}

/* Remove the outer cell borders so they don't double up with the scroller's frame */
.legal-table-scroll th,
.legal-table-scroll td {
  border-width: 1px 0 0; /* keep only horizontal row lines */
  padding: 14px 18px; /* roomier cells, closer to aczen.in's table */
}

/* The header row has no line above it */
.legal-table-scroll thead th {
  border-top: 0; /* the scroller border already sits there */
}

/* Sub-processor names lead each row, bold as on aczen.in */
.legal-cell-name {
  font-weight: 600; /* semibold like the source's font-medium name cell */
  color: var(--ink); /* full ink so the name stands out from purpose and location */
}

/* Small-print footnote under the table */
.prose .legal-note {
  margin-top: 1.5em; /* space after the table */
  font-size: 0.875rem; /* smaller, as aczen.in's text-sm footnote */
}