/*
 * CMC Funded site skin: the retail legal pages.
 *
 * Pages 3 (Privacy Policy), 4966 (General Terms and Conditions), 5408 (Cookie Policy), 5412 (Refund
 * Policy) and 12141 (the Legal index at /legal/). Each is the theme's own page template
 * (hello-elementor template-parts/single.php): main#content > .page-header > h1.entry-title, then
 * .page-content > .cmcf-legal-page with the page's paragraphs. The body carries cmc-skin-legal, so
 * nothing here reaches another skinned page.
 *
 * Written for long text as well as today's short pages: a reading column of about 70 characters,
 * headings, ordered and unordered lists, tables that scroll inside their own box on a phone rather
 * than widening the page, and anchors that land below the fixed header. The link to the signed PDF
 * is the page's one action and is drawn exactly as the header's "Choose your challenge" button,
 * never full width.
 *
 * Colours, type and spacing come only from tokens.css.
 */

body.cmc-skin-legal main#content.site-main {
  box-sizing: border-box;
  width: var(--skin-shell);
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--skin-space-8) 0 var(--skin-space-9);
}
@media (max-width: 700px) {
  body.cmc-skin-legal main#content.site-main { padding-top: var(--skin-space-6); padding-bottom: var(--skin-space-8); }
}

body.cmc-skin-legal .page-header { margin: 0 0 var(--skin-space-6); padding: 0; }
body.cmc-skin-legal .page-header .entry-title {
  margin: 0;
  color: var(--skin-text);
  font-family: var(--skin-serif);
  font-size: var(--skin-type-display);
  font-weight: 400;
  line-height: var(--skin-leading-display);
  letter-spacing: var(--skin-tracking-display);
  overflow-wrap: break-word;
  hyphens: manual;
}

/* The Cookie Policy page carries an inline rule that pushed its text below the old fixed header
   (padding-top 159px from 768px). The skin's body padding already clears the new header. */
body.cmc-skin-legal .cmcf-legal-page { padding-top: 0; }

body.cmc-skin-legal .page-content {
  color: var(--skin-text-soft);
  font-family: var(--skin-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}
body.cmc-skin-legal .page-content :is(p, ul, ol, table, blockquote) { margin: 0 0 1.1em; }
body.cmc-skin-legal .page-content strong { color: var(--skin-text); font-weight: var(--skin-weight-strong); }

body.cmc-skin-legal .page-content :is(h2, h3, h4) {
  margin: 2em 0 .6em;
  color: var(--skin-text);
  line-height: var(--skin-leading-title);
}
body.cmc-skin-legal .page-content h2 { font-size: var(--skin-type-title); }
body.cmc-skin-legal .page-content h3 { font-size: var(--skin-type-heading); }
body.cmc-skin-legal .page-content h4 { font-family: var(--skin-sans); font-size: 1.0625rem; font-weight: var(--skin-weight-strong); }

/* An anchor (#section, or a heading with an id) lands below the fixed header, not under it. */
body.cmc-skin-legal .page-content :is([id], a[name]) { scroll-margin-top: calc(var(--skin-header-offset) + var(--skin-space-4)); }

body.cmc-skin-legal .page-content a {
  color: var(--skin-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
body.cmc-skin-legal .page-content a:is(:hover, :focus) { color: var(--skin-text); }

body.cmc-skin-legal .page-content :is(ul, ol) { padding-left: 1.4em; }
body.cmc-skin-legal .page-content li { margin: 0 0 .6em; padding-left: .2em; }
body.cmc-skin-legal .page-content li::marker { color: var(--skin-text-muted); }

/* Tables: a box of their own that scrolls sideways on a narrow screen. */
body.cmc-skin-legal .page-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--skin-type-small);
  line-height: 1.5;
}
body.cmc-skin-legal .page-content :is(th, td) {
  min-width: 8rem;
  padding: .7em .9em;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--skin-line);
}
body.cmc-skin-legal .page-content th { color: var(--skin-text); font-weight: var(--skin-weight-strong); background: var(--skin-raised); }
/* A table that scrolls takes keyboard focus (chrome.js), so it shows the same ring as a link. */
body.cmc-skin-legal .page-content table:focus-visible { outline: 3px solid var(--skin-focus); outline-offset: 3px; }

body.cmc-skin-legal .page-content hr { margin: 2.2em 0; border: 0; border-top: 1px solid var(--skin-line); }

/* The link to the signed PDF: the page's one action, drawn exactly as the header's "Choose your
   challenge" button (the main site's .nl-button.nl-button--small in chrome.css): a 42px azure pill
   with an azure edge, 18px sides, body type, the same shadow, and the same lift on hover. Max asked
   for this on 30 September 2026, after the old page's light-blue "Start Challenge" gradient. It sits
   on its own line in a paragraph of its own, so the paragraph is the row and the link is the pill.
   A long label wraps inside the pill on a phone rather than widening the page, which is why the
   pill has a little padding above and below and a line height above 1. */
body.cmc-skin-legal .cmcf-legal-page > p > a[href$=".pdf"]:only-child {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: var(--skin-button-height-small);
  padding: var(--skin-space-2) 18px;
  color: var(--skin-button-text);
  font-size: var(--skin-type-body);
  font-weight: var(--skin-weight-strong);
  line-height: 1.2;
  text-decoration: none;
  background: var(--skin-button-bg);
  border: 1px solid var(--skin-button-bg);
  border-radius: var(--skin-radius-pill);
  box-shadow: var(--skin-button-shadow);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
body.cmc-skin-legal .cmcf-legal-page > p > a[href$=".pdf"]:only-child:is(:hover, :focus) {
  background: var(--skin-button-bg-hover);
  border-color: var(--skin-button-bg-hover);
  box-shadow: var(--skin-button-shadow-hover);
  transform: translateY(-2px);
}
body.cmc-skin-legal .cmcf-legal-page > p > a[href$=".pdf"]:only-child:active { transform: scale(.98); }
body.cmc-skin-legal .cmcf-legal-page > p:has(> a[href$=".pdf"]:only-child) { margin: var(--skin-space-6) 0; }

/* "Back to all legal documents": a quiet way back to the index, set apart from the text. */
body.cmc-skin-legal .cmcf-legal-page > p:last-child > a[href="/legal/"]:only-child {
  color: var(--skin-text-muted);
  font-size: var(--skin-type-small);
}
/* 24px tap targets (WCAG 2.5.8) for the contents list and the way back: an inline link's vertical
   padding never moves its line. */
body.cmc-skin-legal .cmcf-legal-page nav a,
body.cmc-skin-legal .cmcf-legal-page > p:last-child > a[href="/legal/"]:only-child { padding-block: 4px; }
body.cmc-skin-legal .cmcf-legal-page > p:last-child:has(> a[href="/legal/"]:only-child) {
  margin-top: var(--skin-space-7);
  padding-top: var(--skin-space-5);
  border-top: 1px solid var(--skin-line);
}

/* The index (/legal/): each document is a row with its own rule, not a bullet. */
body.cmc-skin-legal .cmcf-legal-page > ul { padding: 0; list-style: none; border-top: 1px solid var(--skin-line); }
body.cmc-skin-legal .cmcf-legal-page > ul > li { margin: 0; padding: var(--skin-space-4) 0; border-bottom: 1px solid var(--skin-line); }
body.cmc-skin-legal .cmcf-legal-page > ul > li > a:first-child:not([href$=".pdf"]) { color: var(--skin-text); font-weight: var(--skin-weight-strong); }