/* ===========================================================================
   WE MANAGE — long-form legal pages (Terms of Service, Privacy Policy).

   Shared by terms.php and privacy.php. These two pages have to look like the
   same document; keeping one copy of the layout is what makes that true even
   after one of them is edited.

   Loaded after style.css from the page body, which is where the per-page
   <style> block used to sit, so cascade order is unchanged.
   =========================================================================== */

.legal { padding: clamp(90px, 12vh, 132px) 0 72px; }
.legal { padding: clamp(90px, 12svh, 132px) 0 72px; }

.legal-head { max-width: 780px; }
.legal-head h1 { font-family: "Playfair Display", serif; font-size: clamp(34px, 5vw, 58px); line-height: 1.03; margin: 12px 0 16px; color: #fff; }
.legal-head > p { color: rgba(230,240,250,.68); font-size: 16px; line-height: 1.7; margin: 0; }

.legal-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; }
.legal-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: rgba(230,240,250,.55); }
.legal-meta span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f2c86b; }

.legal-note { display: flex; gap: 12px; margin-top: 26px; padding: 15px 18px; border: 1px solid rgba(242,200,107,.3); border-radius: 14px; background: rgba(242,200,107,.05); color: rgba(230,240,250,.75); font-size: 13.5px; line-height: 1.6; }
.legal-note svg { width: 20px; height: 20px; flex: 0 0 auto; color: #f2c86b; margin-top: 1px; }

.legal-grid { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); margin-top: 48px; align-items: start; }
.legal-grid > * { min-width: 0; }

.legal-toc { position: sticky; top: 104px; }
.legal-toc h4 { margin: 0 0 12px; color: rgba(255,255,255,.5); font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; max-height: calc(100vh - 160px); overflow-y: auto; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; max-height: calc(100svh - 160px); overflow-y: auto; }
.legal-toc a { counter-increment: toc; display: flex; gap: 9px; padding: 6px 0 6px 13px; border-inline-start: 2px solid rgba(255,255,255,.1); color: rgba(230,240,250,.55); font-size: 13px; line-height: 1.4; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero); color: rgba(242,200,107,.7); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 11px; }
.legal-toc a:hover { color: #fff; }
.legal-toc a.is-current { color: #f3d27d; border-inline-start-color: #f2c86b; }

.legal-body { max-width: 780px; }
.legal-sec { padding: 30px 0; border-top: 1px solid rgba(255,255,255,.08); scroll-margin-top: 100px; }
.legal-sec:first-child { border-top: 0; padding-top: 0; }
.legal-sec h2 { display: flex; align-items: baseline; gap: 12px; font-family: "Playfair Display", serif; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.15; margin: 0 0 14px; color: #fff; }
.legal-sec h2 .n { flex: 0 0 auto; font-family: Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 800; color: #f2c86b; }
.legal-sec p { margin: 0 0 13px; color: rgba(224,236,248,.78); font-size: 15.5px; line-height: 1.75; }
.legal-sec p:last-child { margin-bottom: 0; }
.legal-sec a { color: #f3d27d; text-decoration: none; border-bottom: 1px solid rgba(242,200,107,.35); }
.legal-sec a:hover { border-bottom-color: #f3d27d; }
.legal-sec ul { margin: 0 0 13px; padding: 0; list-style: none; }
.legal-sec li { position: relative; padding-inline-start: 22px; margin-bottom: 9px; color: rgba(224,236,248,.78); font-size: 15px; line-height: 1.6; }
.legal-sec li::before { content: ""; position: absolute; inset-inline-start: 3px; top: 9px; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, #d8ad57, #f3d27d); }
.legal-sec b { color: #fff; }

/* A definition-style table for the cookie and retention listings. Scrolls
   inside its own box so a narrow phone never scrolls the page sideways. */
.legal-table-wrap { margin: 0 0 13px; overflow-x: auto; }
.legal-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14px; }
.legal-table th,
.legal-table td { padding: 10px 12px; text-align: start; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: top; color: rgba(224,236,248,.78); line-height: 1.55; }
.legal-table th { color: rgba(255,255,255,.55); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
.legal-table td:first-child { color: #fff; font-weight: 600; white-space: nowrap; }

.legal-back { display: inline-flex; align-items: center; gap: 7px; margin-top: 34px; color: rgba(230,240,250,.6); font-size: 13px; font-weight: 700; text-decoration: none; }
.legal-back:hover { color: #f2c86b; }

@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; gap: 30px; }
  .legal-toc { position: static; }
  .legal-toc ol { max-height: none; }
}

/* Tables become labelled cards on a phone.
   ---------------------------------------------------------------------------
   A five-column cookie table inside a 354px container left 130px of itself
   unreadable off to the right, and squeezed Purpose into a column so narrow
   the text ran as a vertical ribbon. Sideways scrolling to find out how long
   a cookie lasts is not a table anyone reads.

   Each row becomes its own card instead: the first cell is the card's title,
   and every other cell prints its column name from data-label beside the
   value. Nothing is hidden and nothing needs scrolling.

   display:block strips a table's implicit semantics in several screen
   readers, which is why wm_legal_table() writes explicit role attributes —
   the roles survive the display change and keep it a table to assistive tech.
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .legal-table-wrap { overflow-x: visible; }

  .legal-table { display: block; min-width: 0; }

  /* Visually hidden rather than display:none — the header text stays
     available to assistive technology that still walks the table. */
  .legal-table thead {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .legal-table tbody { display: block; }

  .legal-table tr {
    display: block;
    padding: 15px 16px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.022);
  }

  .legal-table tr + tr { margin-top: 10px; }

  .legal-table td {
    display: block;
    padding: 0;
    border: 0;
    white-space: normal;
  }

  /* First cell is the card's title: the cookie name, or what is being kept. */
  .legal-table td:first-child {
    margin-bottom: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #f3d27d;
    font-size: 14.5px;
    font-weight: 700;
    white-space: normal;
  }

  /* Every other cell: its column name, then its value. */
  .legal-table td:not(:first-child) {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 4px 0;
  }

  .legal-table td:not(:first-child)::before {
    content: attr(data-label);
    color: rgba(255,255,255,.45);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    line-height: 1.7;
  }

  /* A two-column table is a title and one value. Its label was printing on
     every card — eight repetitions of "KEPT FOR" under a heading that already
     says "How long we keep it". The label is dropped and the value simply
     follows the title, which removed roughly 220px of pure repetition from
     the retention table. */
  .legal-table.is-pairs td:not(:first-child) {
    display: block;
    padding: 0;
  }
  .legal-table.is-pairs td:not(:first-child)::before { content: none; }
  .legal-table.is-pairs td:first-child { margin-bottom: 9px; padding-bottom: 9px; }

  /* A short categorical column — Essential / Analytics — reads better as a
     pill on the title row than as another label-and-value row. It is the
     first thing worth knowing about a cookie, and this makes the card
     scannable at a glance instead of read line by line. */
  .legal-table.has-badge tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
  }
  /* The title's own divider would stop short of the pill, since it only
     spans column one. Move the rule onto the first full-width cell below,
     where it runs the whole card. */
  .legal-table.has-badge td:first-child {
    grid-column: 1;
    margin-bottom: 0;
    padding-bottom: 11px;
    border-bottom: 0;
  }
  .legal-table.has-badge td:nth-child(2):not([data-badge]) {
    padding-top: 11px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .legal-table.has-badge td[data-badge] {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-bottom: 11px;
    padding: 4px 11px;
    border: 1px solid rgba(242,200,107,.32);
    border-radius: 999px;
    background: rgba(242,200,107,.10);
    color: #f3d27d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .legal-table.has-badge td[data-badge]::before { content: none; }
  /* Everything after the title row spans the full card width. */
  .legal-table.has-badge td:not(:first-child):not([data-badge]) { grid-column: 1 / -1; }
}