/* EdgeRift — page CSS for Privacy (/privacy and /privacy/{page}). No mockup: built from the concept's
   inner-page pattern (white hero, grey list band, white help band) and its FAQ-article reading column.
   Policy pages: one 680 px column; from 1200 px an "On this page" list sticks beside it, below 1200 it
   is a collapsed disclosure above the text. The policy HTML comes from iubenda or Markdown, so its
   elements are styled by tag inside .doc__body. Tokens only (no colour values); uppercase only through
   the shared classes (.eyebrow labels). */

@layer pages {

  /* ---------- Hub ---------- */
  .privacy-hero { padding-bottom: calc(var(--section-y) * .5); }
  .policy-groups { display: grid; gap: 48px; max-width: var(--w-content); margin-inline: auto; }
  @media (min-width: 1024px) { .policy-groups { grid-template-columns: 1fr 1fr; gap: 48px; } }
  .policy-group .eyebrow { padding-bottom: 12px; }

  /* Rows: title, an optional muted line, a trailing chevron; hairline-separated (concept .qlist). */
  .doc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-hairline); }
  .doc-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: 56px; padding: 14px 0; border-bottom: 1px solid var(--c-hairline);
    color: var(--c-ink); transition: color var(--d-fast) var(--ease);
  }
  .doc-list a::after {
    content: "›"; content: "›" / ""; flex: none; font-family: var(--f-symbol);
    font-size: 24px; line-height: 1; color: var(--c-muted); transition: transform var(--d-fast) var(--ease);
  }
  .doc-list a:hover { text-decoration: none; color: var(--c-red-text); }
  .doc-list a:hover::after { transform: translateX(2px); color: var(--c-red-text); }
  .doc-list__title { display: block; font-size: clamp(17px, .19vw + 16.3px, 19px); line-height: 1.4; }
  .doc-list__note { display: block; margin-top: 2px; font-size: var(--t-small); line-height: 1.4; color: var(--c-muted); }

  /* ---------- Policy page ---------- */
  .doc { padding-top: calc(var(--section-y) * .6); padding-bottom: calc(var(--section-y) * .6); }
  .doc__layout { display: grid; gap: 28px; max-width: var(--w-copy); margin-inline: auto; }
  .doc__title {
    font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, .76vw + 29px, 40px);
    line-height: 1.1; letter-spacing: -.25px; text-wrap: balance;
  }
  .doc__head .eyebrow + .doc__title { margin-top: 12px; }
  .doc__meta { margin-top: 12px; font-size: var(--t-small); line-height: 1.45; color: var(--c-muted); }
  .doc__meta + .doc__meta { margin-top: 4px; }

  /* "On this page": a disclosure below 1200 px, a sticky list beside the text from 1200 px. */
  .doc__toc ol { margin: 0; padding: 0; list-style: none; }
  .doc__toc a {
    display: block; padding: 7px 0; font-size: 15px; line-height: 1.35; color: var(--c-link-quiet);
    transition: color var(--d-fast) var(--ease);
  }
  .doc__toc a:hover { color: var(--c-red-text); text-decoration: none; }
  .doc__toc--rail { display: none; }
  .doc__toc--fold { border-block: 1px solid var(--c-hairline); }
  .doc__toc--fold summary {
    display: flex; align-items: center; justify-content: space-between; min-height: 52px;
    list-style: none; cursor: pointer;
  }
  .doc__toc--fold summary::-webkit-details-marker { display: none; }
  .doc__toc--fold summary svg { width: 12px; height: 12px; color: var(--c-ink); transition: transform var(--d-fast) var(--ease); }
  .doc__toc--fold[open] summary svg { transform: rotate(180deg); }
  .doc__toc--fold ol { padding-bottom: 12px; }

  @media (min-width: 1200px) {
    .doc__layout {
      grid-template-columns: 240px var(--w-copy); grid-template-areas: "toc head" "toc body";
      column-gap: 72px; row-gap: 32px; max-width: var(--w-wide); justify-content: center; align-items: start;
    }
    .doc__head { grid-area: head; }
    .doc__body { grid-area: body; }
    .doc__toc--fold { display: none; }
    .doc__toc--rail {
      display: block; grid-area: toc; position: sticky; top: 24px;
      max-height: calc(100vh - 48px); overflow-y: auto; padding-top: 6px;
    }
    .doc__toc--rail .eyebrow { margin-bottom: 8px; }
    .doc__toc--rail li + li { border-top: 1px solid var(--c-hairline); }
  }

  /* The policy text (iubenda or Markdown HTML): the shared .prose column, plus the elements it uses. */
  .doc__body > div > * + *, .doc__body li > * + * { margin-top: 1em; }
  .doc__body > div > :first-child, .doc__body > :first-child { margin-top: 0; }
  .doc__body > div > br { display: none; }   /* iubenda's spacer <br>s between blocks (not the line breaks inside them) */
  .doc__body h2 { scroll-margin-top: 24px; padding-top: 1.2em; border-top: 1px solid var(--c-hairline); }
  .doc__body h3 { font-size: 21px; line-height: 1.25; }
  .doc__body h4 { font-family: var(--f-text); font-weight: 500; font-size: 1em; line-height: 1.4; margin-top: 1.4em; }
  .doc__body strong, .doc__body b { font-weight: 500; }
  .doc__body ul { padding-left: 1.25em; }
  .doc__body li + li { margin-top: .4em; }
  .doc__body a { overflow-wrap: anywhere; }
  .doc__body em:only-child { font-style: normal; color: var(--c-muted); }

  /* Help: white, so it never merges with the grey footer. After a policy it follows the white text, so the
     switch from the reading column to a centred stack marks the new section (as on FAQ articles). */
  .doc + .privacy-help { padding-top: calc(var(--section-y) * .5); }
  .doc + .privacy-help .headline { font-size: var(--t-tile); }

  @media print {
    .doc__toc, .privacy-help { display: none !important; }
    .doc__layout { display: block; max-width: none; }
    .doc__body a::after { content: " (" attr(href) ")"; font-size: .85em; color: var(--c-muted); }
    .doc__body a[href^="#"]::after { content: none; }
  }
}