/* ============================================================
   OberBuilt Analysis Engine — Legal Pages
   ------------------------------------------------------------
   Long-form readability styling for the Privacy Policy and Terms
   of Use pages (UI-SPEC Surface 4, PRV-06). Token-only — every
   value below resolves to an existing --oae-* token from
   tokens.css: no hardcoded hex colors, no dynamic color-blend
   functions, no new spacing or type-scale values. Breakpoints
   match the marketing pages: 360 / 768 / 1280.
   ============================================================ */

/* ------------------------------------------------------------
   THE DARK CANVAS — why this rule exists at all.
   ------------------------------------------------------------
   Every colour in this file is a DARK-palette token: --oae-fg-1
   (#EAF1F8) for body copy, --oae-fg-2 (#B8C5D2) for paragraphs,
   --oae-border for the rules between sections. All of it was
   written for the instrument-cluster background — and none of it
   ever painted that background.

   `.oae-legal` is dropped into a bare Divi page template. It is
   NOT inside `.oae-shell` (unlike /oae-dashboard/, /oae-upload/
   etc., which do paint --oae-color-bg). So it inherited the
   theme's white page, and the measured result was:

     .oae-legal__editable-body  #EAF1F8 on #FFFFFF  =  1.14:1
     .oae-consent-disclosure    #B8C5D2 on #FFFFFF  =  1.76:1

   1.14:1 is not "low contrast", it is invisible — the Terms of
   Use and Privacy Policy bodies could not be read at all. These
   are the two pages the product is legally obliged to be able to
   show someone. Same failure shape as the phantom-token bug: a
   surface that LOOKS like it is on the design system because
   every declaration names a token, while the one declaration
   that makes those tokens correct was missing.

   FULL-BLEED, without touching markup. `.oae-legal` is a
   max-width column, so simply setting a background would paint a
   dark slab with white gutters either side — which is what the
   marketing pages did and it read as an unstyled embed rather
   than part of the page. The box-shadow + clip-path pair paints
   the canvas edge-to-edge horizontally while clipping it to the
   element's own box vertically, so no wrapper div is required.
   -100vmax is deliberately larger than any viewport; clip-path
   is what stops it bleeding above/below.

   Do not remove the vertical padding: clip-path clips at the
   border box, so a focus ring on the first/last child would be
   shaved off without it.
   ------------------------------------------------------------ */
.oae-legal {
  max-width: var(--oae-editor-max-width);
  margin: 0 auto;
  /* B6c (theme alignment): vertical padding only. The theme's .v-prose
     container supplies the page gutter and aligns every plugin block to its
     content edge; our own 16/24px side inset pushed the h1 off that edge
     (x=156 vs 132 at 1440). Cards inside (TOC, contact) keep their padding. */
  padding: var(--oae-spacing-2xl) 0;
  background: var(--oae-color-bg);
  box-shadow: 0 0 0 100vmax var(--oae-color-bg);
  clip-path: inset(0 -100vmax);
  color: var(--oae-fg-1);
  font-family: var(--oae-font-body);
  font-size: var(--oae-text-body);
  line-height: var(--oae-line-height-body);
}

.oae-legal h1 {
  font-family: var(--oae-font-heading);
  font-size: var(--oae-text-display);
  line-height: var(--oae-line-height-tight);
  margin: 0 0 var(--oae-spacing-lg);
}

.oae-legal h2 {
  font-family: var(--oae-font-heading);
  font-size: var(--oae-text-heading);
  line-height: var(--oae-line-height-tight);
  margin: var(--oae-spacing-2xl) 0 var(--oae-spacing-md);
  padding-top: var(--oae-spacing-lg);
  border-top: 1px solid var(--oae-border);
}

.oae-legal h2:first-of-type {
  border-top: none;
  padding-top: 0;
}

.oae-legal h3 {
  font-family: var(--oae-font-heading);
  font-size: var(--oae-text-body);
  line-height: var(--oae-line-height-tight);
  margin: var(--oae-spacing-lg) 0 var(--oae-spacing-sm);
}

.oae-legal h4 {
  font-size: var(--oae-text-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--oae-fg-3);
  margin: var(--oae-spacing-md) 0 var(--oae-spacing-xs);
}

.oae-legal p {
  color: var(--oae-fg-2);
  margin: 0 0 var(--oae-spacing-md);
}

.oae-legal a {
  color: var(--oae-color-primary);
}

.oae-legal a:hover,
.oae-legal a:focus-visible {
  color: var(--oae-fg-1);
}

/* Logged-in acceptance status line (2026-09-05 withdrawal spec W6) —
   rendered right after the effective-date paragraph, before the TOC. */
.oae-legal__acceptance-status {
  margin: 0 0 var(--oae-spacing-md);
  padding: var(--oae-spacing-sm) var(--oae-spacing-md);
  background: var(--oae-color-surface);
  border-left: 4px solid var(--oae-color-primary);
  color: var(--oae-fg-2);
  font-size: 14px;
  line-height: 20px;
}

/* Table of contents — surface-tinted card, matches the field-row pattern
   already used elsewhere (existing --oae-color-surface / --oae-border). */
.oae-legal__toc {
  background: var(--oae-color-surface);
  border: 1px solid var(--oae-border);
  border-radius: var(--oae-radius);
  padding: var(--oae-spacing-md) var(--oae-spacing-lg);
  margin: 0 0 var(--oae-spacing-xl);
}

/* (0,2,1): out-ranks the theme's `.v-prose nav ul` reset (0,1,2) so the
   TOC's own flex layout and gaps hold whatever the theme does to nav lists. */
.oae-legal .oae-legal__toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--oae-spacing-sm);
}

.oae-legal .oae-legal__toc li {
  margin: 0;
  padding: 0;
}
.oae-legal .oae-legal__toc li::before,
.oae-legal .oae-legal__toc li::marker {
  content: none;
}

.oae-legal__toc a {
  font-size: var(--oae-text-label);
  color: var(--oae-fg-2);
}

.oae-legal__toc a:hover,
.oae-legal__toc a:focus-visible {
  color: var(--oae-color-primary);
}

/* Anchor targets get breathing room above them so a jump-link doesn't land
   flush against the top-bar chrome shared with the rest of the plugin. */
.oae-legal section {
  scroll-margin-top: var(--oae-spacing-2xl);
}

.oae-legal__editable-body {
  margin-top: var(--oae-spacing-2xl);
  padding-top: var(--oae-spacing-lg);
  border-top: 1px solid var(--oae-border);
}

/* CONSENT-EXPLAINER transclusion — a subtle surface treatment so it reads
   as a distinct, deliberately-locked block, not general prose (T-07-70/71
   mitigation made visually legible, not only structurally true). */
.oae-legal__consent-explainer {
  background: var(--oae-color-surface);
  border: 1px solid var(--oae-border);
  border-radius: var(--oae-radius);
  padding: var(--oae-spacing-lg);
  margin: var(--oae-spacing-2xl) 0;
}

.oae-legal__consent-explainer h2:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

/* ConsentCopy::renderDisclosure()'s wrapper — shared across every surface
   that transcludes a disclosure string (this page and PRIV-DELETE). */
.oae-consent-disclosure {
  color: var(--oae-fg-2);
}

/* The 360px step used to read `padding: md sm`, i.e. it made the padding
   SMALLER than the base rule as the viewport got WIDER — 8px of horizontal
   gutter on a wall of legal prose, and only 16px of vertical breathing room
   under the now-painted dark canvas. Mobile-first means each step up may add
   room, never take it away. This keeps the generous vertical rhythm and only
   relaxes the gutter to the md step. */
@media (min-width: 360px) {
  .oae-legal {
    padding: var(--oae-spacing-2xl) 0;
  }
}

@media (min-width: 768px) {
  .oae-legal {
    padding: var(--oae-spacing-2xl) 0;
  }

  .oae-legal .oae-legal__toc ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--oae-spacing-md) var(--oae-spacing-lg);
  }
}

@media (min-width: 1280px) {
  .oae-legal {
    padding-top: var(--oae-spacing-3xl);
    padding-bottom: var(--oae-spacing-3xl);
  }
}