/**
 * DocuPOW — Legal pages shared styles (page-templates/privacy-policy.php +
 * page-templates/terms-and-conditions.php).
 *
 * RESTORED PREVIOUS DESIGN (owner decision 2026-07-02) over the
 * editor-driven content architecture: the hairlined header band (h1, mono
 * "Last updated" line, lead), the two-column reading layout — sticky 256px
 * TOC rail (hidden <768) beside the reading column — and the hairlined,
 * centered back-to-top row, with exact values carried over from the retired
 * per-page sheets (privacy-policy.css / terms-and-conditions.css).
 *
 * Scope: everything lives under .page-legal (BEM); the templates add
 * .page-legal--privacy / .page-legal--terms for the old exports' deliberate
 * differences:
 *  - --privacy: 800px centered column; rail right hairline; active rail
 *    link = techblue + 600 weight (no indicator bar); muted lead capped at
 *    768px.
 *  - --terms: 760px column; rail-nav LEFT hairline with each link's 2px
 *    left-border indicator overlaying it (active = techblue + 600 + bar);
 *    header band capped at 800px; ink lead.
 *
 * Light-canvas contrast contract (tokens only — zero raw hexes, zero
 * derived values in this file):
 *  - h1 and the content h2s are var(--indigo) — 10.71:1 on white (AA).
 *  - Rail hover/active, prose links and the back-to-top button are
 *    var(--techblue) — 4.54:1 on white (AA). The ACTIVE rail state is never
 *    colour-alone: it always adds the 600 weight (and on terms the 2px
 *    indicator bar) as a second signal.
 *  - Body copy (p/li) is var(--ink) — 16.68:1 on white (AA); both legal
 *    pages read in --ink at 16/1.7 (the unification kept from the editor
 *    conversion). The mono "Last updated" line, rail caption, rail links
 *    and the empty-content placeholder are var(--text-muted) — 9.34:1 on
 *    white (AA).
 *
 * Motion contract — MINIMAL tier (legal pages): the ONLY entrance is
 * main.js's plain [data-dp-reveal] fade-up on the header band; main.css
 * owns its base state, transition AND reduced-motion override. The one
 * page-authored transition (rail-link colour/border) sits inside
 * @media (prefers-reduced-motion: no-preference); the active/hover STATES
 * are unconditional (the scroll-spy is FUNCTIONAL under reduce). Anchor
 * jumps are CSS-only: main.css sets html scroll-behavior: smooth with the
 * reduce auto override, and the content headings carry scroll-margin-top
 * so jumps land below the sticky header. Back-to-top's smooth/auto split
 * lives in assets/js/pages/legal.js.
 */

/* =========================================================================
   Page scope
   ========================================================================= */
.page-legal {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* =========================================================================
   S1 — Header band (h1, mono date line, lead, container-width bottom
   hairline on both pages)
   ========================================================================= */
.page-legal__header {
  padding-block: var(--space-7) 0;
}

.page-legal__header-inner {
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}

/* Terms — the old export caps its left-aligned band at 800px. */
.page-legal--terms .page-legal__header-inner {
  max-width: 800px;
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Royal Indigo, carried
   over from the old sheets. tabindex="-1" programmatic focus target for
   back-to-top; no visible ring on programmatic focus (:focus-visible only,
   global). */
.page-legal__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--indigo);
  margin-bottom: var(--space-2);
}

/* Dynamic date line — mono 13 muted (label-mono), as the old sheets. */
.page-legal__updated {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Lead — body-lg (18/1.6). Privacy: muted, capped at the export's 768px;
   terms: ink (that export's text-ink), capped by its 800px band. */
.page-legal__lead {
  font-size: 18px;
  line-height: 1.6;
}

.page-legal--privacy .page-legal__lead {
  color: var(--text-muted);
  max-width: 768px;
}

.page-legal--terms .page-legal__lead {
  color: var(--ink);
}

/* =========================================================================
   S2 — Two-column layout: sticky TOC rail (256px) + reading column
   ========================================================================= */
.page-legal__main {
  padding-block: var(--space-5) var(--space-7);
}

.page-legal__layout {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr); /* export w-64 + fluid column */
  gap: var(--space-5);
  align-items: start;
}

/* Fewer than 3 h2s — no rail, single column (the template omits the rail
   and adds this modifier). */
.page-legal__layout--single {
  grid-template-columns: 1fr;
}

/* <768 — single column; the rail disappears entirely per the old exports
   (the content h2 headings carry the structure). */
@media (max-width: 767.98px) {
  .page-legal__layout {
    grid-template-columns: 1fr;
  }

  .page-legal__rail {
    display: none;
  }
}

.page-legal__rail {
  min-width: 0;
}

/* Sticky wrapper — 104px clears the 72px header plus breathing room (the
   house offset; matches the headings' scroll-margin-top and legal.js's
   observer rootMargin). The max-height + internal scroll keep every link
   reachable on short viewports. */
.page-legal__rail-sticky {
  position: sticky;
  top: 104px;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
}

/* Privacy — that export draws the rail's RIGHT hairline. */
.page-legal--privacy .page-legal__rail-sticky {
  padding-right: var(--space-3);
  border-right: 1px solid var(--border);
}

/* Rail caption — mono 13 uppercase tracked muted (label-mono). */
.page-legal__rail-title {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.page-legal__rail-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Terms — that export's LEFT hairline on the nav (border-l + pl-4); each
   link's 2px indicator border below overlays it via the negative margin. */
.page-legal--terms .page-legal__rail-nav {
  gap: 4px; /* export gap-xs */
  border-left: 1px solid var(--border);
  padding-left: 16px; /* export pl-4 */
}

/* Rail links — muted 14; hover = techblue; active = techblue + 600 weight
   (never colour-alone — the weight is the AA second signal on both pages;
   terms adds the indicator bar). The colour/border transition is
   motion-gated at the end of this file; the states are not. */
.page-legal__rail-link {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}

.page-legal__rail-link:hover,
.page-legal__rail-link:focus-visible {
  color: var(--techblue);
}

.page-legal__rail-link.is-active {
  color: var(--techblue);
  font-weight: 600;
}

/* Terms — transparent 2px left border pulled back over the nav hairline
   (export border-l-2 border-transparent -ml-[18px] pl-4 py-1); the active
   link lights it techblue. */
.page-legal--terms .page-legal__rail-link {
  border-left: 2px solid transparent;
  margin-left: -18px; /* the 2px border overlays the 1px hairline */
  padding-left: 16px;
  padding-block: 4px;
}

.page-legal--terms .page-legal__rail-link.is-active {
  border-left-color: var(--techblue);
}

/* =========================================================================
   Reading column — the old exports' widths via the page modifiers
   ========================================================================= */
.page-legal__body {
  width: 100%;
  min-width: 0;
}

.page-legal--privacy .page-legal__body {
  max-width: 800px; /* privacy export column */
  margin-inline: auto; /* export mx-auto inside the remaining column */
}

.page-legal--terms .page-legal__body {
  max-width: 760px; /* terms export max-w-[760px] */
}

/* =========================================================================
   Empty-content fallback — calm single line, never a blank page (no rail,
   no back-to-top)
   ========================================================================= */
.page-legal__placeholder {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 70ch;
}

/* =========================================================================
   Content typography — standard editor HTML inside the_content()
   (kept from the editor conversion: unified 16/1.7 --ink body, indigo h2s,
   hairline-per-section via h2 ~ h2)
   ========================================================================= */

/* Body copy — 16/1.7 ink. */
.page-legal__content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* h2 — 24/600 Royal Indigo with generous top spacing; every h2 after the
   FIRST h2 carries the export rhythm's 1px top rule (border-top +
   padding-top, the cleanest hairline-per-section without extra markup).
   `h2 ~ h2`, not `h2:not(:first-child)`: the drafts open with intro
   paragraphs, so the first h2 is rarely the container's :first-child —
   the sibling combinator targets exactly "h2s after the first h2" in the
   editor's flat content. scroll-margin clears the 72px sticky header so
   anchor jumps land below the chrome (matches the rail-sticky offset and
   legal.js's observer rootMargin). */
.page-legal__content h2 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--indigo);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  scroll-margin-top: 104px;
}

.page-legal__content h2 ~ h2 {
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
}

.page-legal__content h2:first-child {
  margin-top: 0;
}

/* h3 — 18/600 Ink. */
.page-legal__content h3 {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  scroll-margin-top: 104px;
}

/* Lists — 16/1.7 ink, 8px between items. Editor lists are classless, so
   main.css's ul[class]/ol[class] reset does not strip their bullets. */
.page-legal__content ul,
.page-legal__content ol {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
}

.page-legal__content li {
  margin-bottom: var(--space-1);
}

.page-legal__content strong {
  color: var(--ink);
  font-weight: 600;
}

/* Prose links — techblue, underline on hover/focus. */
.page-legal__content a {
  color: var(--techblue);
}

.page-legal__content a:hover,
.page-legal__content a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   Sane fallbacks for richer draft content (single.css patterns at the
   legal 16px scale) — the drafts may carry tables; blockquote/code kept
   for safety
   ========================================================================= */

/* Blockquote — gray callout, 4px techblue left border. */
.page-legal__content blockquote {
  background-color: var(--gray);
  border-left: 4px solid var(--techblue);
  padding: var(--space-3);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-4) 0;
}

.page-legal__content blockquote p {
  margin-bottom: var(--space-2);
}

.page-legal__content blockquote p:last-child {
  margin-bottom: 0;
}

/* Tables — hairline collapsed grid; the table itself is the scroll box
   (display block + overflow-x auto) so wide tables never h-scroll the page. */
.page-legal__content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin-block: var(--space-4);
  font-size: 15px;
  line-height: 1.6;
}

.page-legal__content th,
.page-legal__content td {
  border: 1px solid var(--border);
  padding: 12px;
  text-align: left;
}

.page-legal__content th {
  background-color: var(--gray);
  font-weight: 600;
  color: var(--ink);
}

.page-legal__content td {
  color: var(--text-muted);
}

/* Inline code — mono 14 Ink on the gray surface. */
.page-legal__content code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  background-color: var(--gray);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Code blocks — obsidian panel, scrolls internally (never the page). */
.page-legal__content pre {
  background-color: var(--obsidian);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-block: var(--space-4);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted-dark);
  overflow-x: auto;
}

.page-legal__content pre code {
  background: none;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* =========================================================================
   Back to top — top hairline, centered (renders only with non-empty
   content)
   ========================================================================= */
.page-legal__backtop {
  margin-top: var(--space-7); /* export mt-xl */
  padding-top: var(--space-5); /* export pt-lg */
  border-top: 1px solid var(--border);
  text-align: center;
}

/* Techblue 500 text button with the 18px arrow-up glyph; underline on
   hover/focus per the exports' hover:underline. main.css's button reset
   supplies the unstyled base; the global :focus-visible ring applies. */
.page-legal__backtop-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--techblue);
}

.page-legal__backtop-btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.page-legal__backtop-btn:hover,
.page-legal__backtop-btn:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   Mobile type scale (<768) — 64->44, 24->20; spacing steps down
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-legal__header {
    padding-block: var(--space-6) 0;
  }

  .page-legal__header-inner {
    padding-bottom: var(--space-4);
  }

  .page-legal__main {
    padding-block: var(--space-4) var(--space-6);
  }

  .page-legal__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-legal__content h2 {
    font-size: 20px;
    line-height: 1.3;
  }

  .page-legal__content h2 ~ h2 {
    padding-top: var(--space-4);
  }

  .page-legal__backtop {
    margin-top: var(--space-6);
  }
}

/* =========================================================================
   Motion — MINIMAL tier: the ONLY page-authored transition (rail link
   colour + terms' indicator border). Entrances belong to main.css's
   [data-dp-reveal]; its reduce block (and the global animation/transition
   kill-switch) already keeps everything visible and still under
   prefers-reduced-motion: reduce, so this page needs no reduce overrides
   of its own. The .is-active STATE itself is unconditional — the
   scroll-spy stays FUNCTIONAL under reduce.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .page-legal__rail-link {
    transition: color .18s ease, border-color .18s ease;
  }
}