/* ==========================================================================
   ANewLog — Legal pages (Privacy Policy / Terms of Service, Phase D4)
   Ported from REFERENCE/APPROVED-PROTOTYPE/privacy.html's and terms.html's
   inline <style> block (byte-identical between the two prototype pages).
   Enqueued only on the Privacy/Terms pages (functions.php:
   is_page(array('privacy','terms')) gate). Depends on design-tokens.css/
   global.css/chrome.css already being enqueued (.page-hero, .eyebrow,
   .lede, .body-text, .mono-label are already ported there from Phase B/C).
   ========================================================================== */

/* ------------------------------- Hero -------------------------------------- */
/* Matches the prototype's inline style="padding-bottom: var(--sp-4)" on the
   hero section -- moved to CSS for the same reason as Contact's
   #contact-heading rule: a hand-written inline style not declared as a
   block attribute trips Gutenberg's block-validation diff (confirmed live
   in Phase D3, same fix applied here). */
.legal-hero{ padding-bottom: var(--sp-4); }
#privacy-heading{ max-width: 16ch; }
#terms-heading{ max-width: 18ch; }

/* ------------------------------- Layout ------------------------------------ */
.legal-layout{ display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 940px){ .legal-layout{ grid-template-columns: 240px 1fr; gap: var(--sp-7); } }

/* --------------------------- Placeholder highlight -------------------------- */
/* Amber-tinted <mark>, ported as-is (Blueprint 4) so unresolved legal
   values (dates, contact email, business address, jurisdiction) stay
   visually obvious pending legal sign-off -- not relying on color alone:
   also italicized, so the placeholder reads as distinct in a screen-reader
   context and in grayscale/high-contrast viewing. */
.legal-todo{
  background: rgba(206,165,21,0.16);
  color: var(--anl-dark-grey);
  padding: 0.05em 0.4em;
  border-radius: 3px;
  font-style: italic;
}
.section--dark .legal-todo{ color: var(--anl-charcoal); }

/* --------------------------- Table of Contents ------------------------------ */
/* uagb/table-of-contents (Spectra Legacy, installed 2.20.0) is a dynamic
   block with no sticky-position attribute (confirmed by reading its full
   attribute registration) -- Blueprint 4's documented fallback applies:
   the prototype's own .legal-toc{ position:sticky; top:96px; } is ported
   here verbatim. top:96px clears the .site-header's own sticky 76px height
   (chrome.css) plus a ~20px gap, same value the prototype already used.
   Hidden below 940px, same breakpoint as .legal-layout -- the prototype
   ships no mobile TOC at all; on small screens the sections are simply
   read in order. */
.legal-toc{
  position: sticky;
  top: 96px;
  display: none;
}
@media (min-width: 940px){ .legal-toc{ display: block; } }

/* Overrides the block's own boxed-card defaults (grey background, 1px
   border, boxed padding) to reproduce the prototype's plain sidebar-nav
   look. Targets the block's actual rendered class names directly
   (confirmed via the block's own render_callback in
   blocks-config/table-of-content/class-uagb-table-of-content.php) rather
   than guessing at block-attribute values that would need to round-trip
   through the block editor's own validation. */
.legal-toc.wp-block-uagb-table-of-contents{
  background: transparent;
  border: none;
  padding: 0;
}
.legal-toc .uagb-toc__wrap{ padding: 0; }
.legal-toc .uagb-toc__title{
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.legal-toc .uagb-toc__separator{ display: none; }
.legal-toc .uagb-toc__list{
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.legal-toc .uagb-toc-link__trigger{
  font-size: 0.875rem;
  color: var(--anl-dark-grey);
  text-decoration: none;
}
.legal-toc .uagb-toc-link__trigger:hover{ color: var(--anl-link); }
/* No dedicated :focus-visible rule needed here -- the sitewide
   `a:focus-visible` rule (global.css) already covers these plain <a>
   elements; confirmed live it applies unchanged. */

/* --------------------------- Legal body copy -------------------------------- */
/* Flat H2/H3/Paragraph sequence (Blueprint 4: "Core Heading (H2) +
   Paragraph blocks, one pair per section, in a single long-form column"),
   rather than the prototype's per-section <article> wrappers -- the
   per-section divider rhythm the prototype gets from
   `.legal-content article{border-bottom:1px solid var(--line)}` is
   reproduced here with a border-top on each H2 instead (skipping the
   first), which is a smaller, Blueprint-aligned structural adaptation
   that leaves the visual result unchanged: H3 subsections (Privacy
   Section 2) are untouched by this rule, matching the prototype's own
   behavior of only dividing between numbered top-level sections. */
.legal-content h2{
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 1.375rem;
}
.legal-content h2:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.legal-content h3{ font-size: 1.0625rem; }
.legal-footnote{ color: var(--muted); }