/*
 * Run Fit Well V2 — legal pages
 * ---------------------------------------------------------------------------
 * Privacy Policy, Terms & Conditions, and any other long-form legal document.
 *
 * ADDITIVE AND LEGAL-ONLY. This file is loaded on one kind of route and cannot
 * be reached from any other, by three gates:
 *
 *   1. inc/enqueue.php loads it only when rfw_current_system() is 'legal',
 *      which is true only for pages assigned template-legal.php.
 *   2. Every component class below is NEW (.rfw-legal-*). The single shared
 *      component reused is .rfw-prose, and the one rule touching it is fenced
 *      under the body class below.
 *   3. Every selector is prefixed `body.rfw-system-legal`.
 *
 * THE PREFIX IS A THEME CLASS, NOT A CORE CONDITIONAL ONE, AND THAT MATTERS.
 * `rfw-system-legal` is emitted by rfw_body_class() in inc/setup.php from
 * rfw_current_system() — the SAME source the enqueue gate reads. Scoping to
 * something core supplies instead (`.page-privacy-policy`, `.page-id-3`) would
 * let the gate that loads this file and the selector that applies it drift
 * apart. That exact mismatch shipped once — home.css was scoped to `body.home`,
 * a class core adds only on the front page, while its gate read the template —
 * and the stylesheet silently went inert on a live install. Not again.
 *
 * WHAT THIS DESIGN IS, AND IS NOT. The client supplied a reference screenshot
 * of a dark page with neon headings over a photograph, and asked for its LAYOUT
 * with Run Fit Well's OWN colours and no imagery. So the structure is the
 * reference's — centred header band, then a single measured column of numbered
 * clauses — while every colour, token and type scale is the site's existing
 * light palette. Nothing new is introduced: no hex value appears below that is
 * not already a token in tokens.css.
 *
 * CONTENTS
 *   1. Page header band
 *   2. The document
 *   3. Responsive
 */

/* ================================================================== *
 * 1. PAGE HEADER BAND
 *
 * The same paper-and-glow treatment .rfw-hero uses on every other page,
 * centred rather than split, because there is no second column here.
 * ================================================================== */
body.rfw-system-legal .rfw-legal-hero {
  padding: 68px 0 56px;
  background:
    radial-gradient(circle at 18% 16%, var(--rfw-hero-glow-1), transparent 30%),
    radial-gradient(circle at 84% 14%, var(--rfw-hero-glow-2), transparent 31%),
    var(--rfw-paper);
  border-bottom: 1px solid var(--rfw-line-3);
}

/*
 * A flex column, not text-align alone: .rfw-eyebrow is an inline-flex with a
 * gradient rule before it, so text-align cannot centre it — align-items can,
 * and it keeps the rule and the word together as one centred unit. The same
 * reason the homepage's closing CTA centres this way.
 */
body.rfw-system-legal .rfw-legal-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.rfw-system-legal .rfw-legal-hero-inner .rfw-eyebrow {
  margin-bottom: 14px;
}

body.rfw-system-legal .rfw-legal-title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.055em;
  text-wrap: balance;
}

/*
 * Narrower than the document below it. A centred intro set to the same
 * measure as left-aligned body copy reads as a slab; holding it tighter keeps
 * the band a header rather than a first paragraph.
 */
body.rfw-system-legal .rfw-legal-intro {
  max-width: 34rem;
  margin: 18px 0 0;
  color: var(--rfw-muted);
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  line-height: 1.6;
}

body.rfw-system-legal .rfw-legal-updated {
  margin: 20px 0 0;
  padding: 7px 16px;
  border: 1px solid var(--rfw-line-cta);
  border-radius: 999px;
  background: var(--rfw-white);
  color: var(--rfw-text-note);
  font-size: .82rem;
  letter-spacing: .01em;
}

/* ================================================================== *
 * 2. THE DOCUMENT
 * ================================================================== */
body.rfw-system-legal .rfw-legal-body {
  padding: 60px 0 88px;
}

/*
 * 44rem, against .rfw-prose's usual 38rem.
 *
 * sections.css caps prose at 38rem (~75 characters), measured as the top of
 * the comfortable range for flowing editorial copy. A legal document is not
 * that: it is numbered clauses read in fragments rather than start to finish,
 * and its lists and defined terms sit better with more room. 44rem is ~704px,
 * the figure the client asked for. Fenced under the body class, so the blog,
 * About and sub-category pages keep 38rem exactly.
 */
body.rfw-system-legal .rfw-legal-prose {
  max-width: 44rem;
  margin-inline: auto;
}

/*
 * Clause headings get a hairline and some air, so a long document scans as
 * discrete sections instead of one wall. :first-child is exempt — a rule
 * immediately under the header band would read as a second border.
 *
 * MEASURED, NOT GUESSED. This first shipped at 2.6em + 1.1em, which at the
 * h2's 2rem put 118px above every heading — with short clauses that left
 * ~140px of dead white between one clause's last line and the next clause's
 * rule, and the page read as mostly gap. 1.7em + .8em is ~80px: still an
 * unmistakable break, roughly a third less air.
 */
body.rfw-system-legal .rfw-legal-prose h2 {
  margin-top: 1.7em;
  padding-top: .8em;
  border-top: 1px solid var(--rfw-line-3);
}

body.rfw-system-legal .rfw-legal-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/*
 * Lists carry the weight in a policy — the categories collected, the rights
 * held — so they get a little more room than prose defaults give them.
 */
body.rfw-system-legal .rfw-legal-prose ul,
body.rfw-system-legal .rfw-legal-prose ol {
  padding-left: 1.5em;
}

body.rfw-system-legal .rfw-legal-prose li {
  margin-bottom: .6em;
}

/*
 * Contact blocks at the foot of these documents are usually a short list of
 * bolded labels. Giving strong the heading ink separates label from value
 * without the editor needing to reach for markup.
 */
body.rfw-system-legal .rfw-legal-prose strong {
  color: var(--rfw-text-strong);
}

/* ================================================================== *
 * 3. RESPONSIVE
 *
 * The theme's own two breakpoints, 1020px and 650px. No third one is
 * introduced: these pages collapse where every other page collapses.
 * ================================================================== */
@media (max-width: 1020px) {
  body.rfw-system-legal .rfw-legal-hero {
    padding: 56px 0 46px;
  }

  body.rfw-system-legal .rfw-legal-body {
    padding: 52px 0 72px;
  }
}

@media (max-width: 650px) {
  body.rfw-system-legal .rfw-legal-hero {
    padding: 44px 0 38px;
  }

  body.rfw-system-legal .rfw-legal-body {
    padding: 44px 0 60px;
  }

  /*
   * The balanced 20ch cap is a desktop idea; at phone width it can leave a
   * single orphaned word on its own line.
   */
  body.rfw-system-legal .rfw-legal-title {
    max-width: none;
  }

  /*
   * Bullets keep their indent but stop stealing width from the text, which
   * at this measure is what causes the ragged two-word lines.
   */
  body.rfw-system-legal .rfw-legal-prose ul,
  body.rfw-system-legal .rfw-legal-prose ol {
    padding-left: 1.2em;
  }
}