/* Policy and support pages (QA-27) — one look for the page.policy template and
   for Shopline's own /policies/* pages. The prose and table rules are ported
   from the prototype's .sup__policy / .sup__table (css/pages/support.css),
   which never made it into the theme: headings had no air above them and the
   table fell back to browser defaults. Tokens only. */

.policy {
  padding-block: clamp(3rem, 8vw, 6rem) var(--sp-10);
}

.policy__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--measure);
  margin-bottom: var(--sp-8);
}

.policy__head > * {
  margin: 0;
}

.policy__grid {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}

/* A page with fewer than two sections gets no contents list, and the body
   takes the full width. */
.policy__grid:has(> .policy__toc[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

/* ---- table of contents ----------------------------------------------------
   Built by js/korjin/policy-toc.js from the page's own h2s. A <details>, so it
   collapses to one line on a phone; the script keeps it open on desktop. */

.policy__toc {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
}

.policy__toc > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  list-style: none;
  cursor: pointer;
}

.policy__toc > summary::-webkit-details-marker {
  display: none;
}

.policy__toc-list {
  list-style: none;
  counter-reset: policy-toc;
  margin: var(--sp-4) 0 var(--sp-5);
  padding: 0;
  border-left: 1px solid var(--rule);
}

.policy__toc-list li {
  counter-increment: policy-toc;
}

/* Link colours go through .policy__toc on purpose: Shopline's base sheet
   colours `a:not(.button)` (and its :hover) at 0,2,1. */
.policy__toc .policy__toc-list a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-left: -1px;
  padding: var(--sp-2) var(--sp-4);
  border-left: 1px solid transparent;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.policy__toc .policy__toc-list a::before {
  content: counter(policy-toc, decimal-leading-zero);
  min-width: 1.6em;
  font-family: var(--font-display);
  color: var(--gold-text);
}

.policy__toc .policy__toc-list a:hover,
.policy__toc .policy__toc-list a[aria-current] {
  color: var(--ink);
  border-left-color: var(--gold-line);
}

.policy__contact {
  align-self: flex-start;
}

/* ---- the policy text -------------------------------------------------------- */

/* Pasted typography, neutralised (Justin, 16 Sep 15:38: "For the Terms of
   Service, could you ensure the font is consistent with the other three
   Policies? That page looks a little off.").

   The four policies are entered as page content in the admin. Three were pasted
   as clean HTML; the Terms of Service came out of a word processor, which
   carries font-family, size, colour and line-height inline on every <span> and
   <p>. An inline style beats any selector we write, so the theme's own type had
   no say on that one page — hence one policy in a different face.

   Fixing it in the admin would fix it once, until the next paste. This makes
   the page's typography the theme's regardless of how the text arrived. Only
   the type properties are overridden: alignment, lists, emphasis and anything
   else an author set deliberately still apply. */
.policy__body [style] {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  background-color: transparent !important;
}

/* Headings keep their own face — `inherit` above would otherwise hand them the
   body font when the paste put a style attribute on the heading itself. */
.policy__body h2[style],
.policy__body h3[style] {
  font-family: var(--font-display) !important;
}

.policy__body h2[style] { font-size: var(--step-3) !important; }
.policy__body h3[style] { font-size: var(--step-1) !important; }

/* `color: inherit` above would take a styled paragraph up to .policy__body's
   ink, while the unstyled ones below sit at ink-muted — trading one visible
   difference between the four pages for another. Restated here so both arrive
   at the same grey; spans inside then inherit it correctly. */
.policy__body p[style],
.policy__body li[style] {
  color: var(--ink-muted) !important;
}

.policy__body > * + *,
.policy__body .sup__policy > * + * {
  margin-top: var(--sp-4);
}

.policy__body h2 {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.2;
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}

.policy__body h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.policy__body h3 {
  margin-top: var(--sp-6);
  font-size: var(--step-1);
}

.policy__body p,
.policy__body li {
  max-width: 66ch;
  color: var(--ink-muted);
}

.policy__body ul,
.policy__body ol {
  padding-left: 1.2em;
}

.policy__body strong {
  color: var(--ink);
  font-weight: 500;
}

.policy .policy__body a {
  color: var(--ink);
  border-bottom: 1px solid var(--gold-line);
}

.policy .policy__body a:hover {
  color: var(--gold-text);
}

/* Wide tables scroll inside their own box; the page body never scrolls
   sideways. The script wraps any table that has no scroll box yet. */
.policy__scroll,
.policy__body .sup__scroll {
  overflow-x: auto;
}

.policy__body table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  border: 1px solid var(--rule-strong);
  font-size: var(--step--1);
}

.policy__body th,
.policy__body td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.policy__body thead th {
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.policy__body tbody th {
  color: var(--ink);
  font-weight: 500;
}

/* ---- legacy page bodies -----------------------------------------------------
   The migrated Shipping page body carries the prototype's whole layout: its
   own hero (a second <h1>), the two-column wrapper and the "On this page"
   aside. The template supplies all of that now, so inside the body those
   parts are neutralised. Cleaning the page content in admin makes this moot. */

.policy__body .sup,
.policy__body .container {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* After the reset on purpose: the legacy hero is `.pagehero.container`, and an
   equal-specificity `.container { display: block }` later in the file would
   un-hide it (and its second <h1>). */
.policy__body .pagehero,
.policy__body .sup__aside {
  display: none;
}

/* ---- narrow ----------------------------------------------------------------- */

@media (max-width: 860px) {
  .policy__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }

  .policy__toc {
    position: static;
    padding: var(--sp-4) var(--sp-5);
    background: var(--ground-sunken);
    border: 1px solid var(--rule);
  }

  .policy__toc > summary::after {
    content: "+";
    color: var(--gold-text);
  }

  .policy__toc[open] > summary::after {
    content: "−";
  }
}

@media (prefers-reduced-motion: reduce) {
  .policy__toc .policy__toc-list a {
    transition: none;
  }
}