/* =============================================================
   Section: Prose / Long-form Page Content
   Maps to: page.php (any WordPress Page that holds standard
   block-editor content without a themed full-bleed section
   wrapper -- Accessibility Statement, Privacy Policy, Terms of
   Use, generic copy pages an editor creates later).

   page.php outputs `the_content()` directly inside
   <main class="site-main site-main--page">, with no inner
   container. The fixed `.site-header` (nav.css) overlays the
   first viewport, and base.css strips margins from <p>, <ul>,
   <ol>, <h*> for the editorial sections. Without this file,
   plain pages render as a margin-less wall of text hidden
   behind the header.

   2026 rebrand: the site surface is light (bone page bg, ink
   text). The earlier version of this file painted prose in
   --bone for a dark ACI layout, which made plain pages
   invisible (bone on bone). Every color here now comes from the
   light-surface tokens: --text / --text-muted for copy,
   --charcoal-2 for headings, --link (plum) for links only,
   --brand-primary-ink for list markers and accents.

   Strategy:
     1. Detect "prose-only" pages by checking whether the first
        direct child of .site-main--page is a standalone prose
        element or a non-full-bleed group. Pages whose first
        child is a themed section (.tx-about-page, .tx-services-
        page, etc. -- all `alignfull`) are unaffected; they
        manage their own header clearance and layout.
     2. On detected prose pages, apply header clearance via
        padding-top, constrain the column to a readable
        --max-w-narrow, and restore margin / line-height / link
        styling for prose children (direct, or nested one level
        inside a plain wp:group such as the a11y report form).
   ============================================================= */

/* ---------- Header clearance + column constraint ---------- */
.site-main--page:has(
  > :first-child:is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, hr, table,
                    .wp-block-paragraph, .wp-block-heading, .wp-block-list,
                    .wp-block-quote, .wp-block-table, .wp-block-separator,
                    .wp-block-group:not(.alignfull), .wp-block-shortcode)
) {
  max-width: var(--max-w-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* The 2026 header sits in normal flow (nothing is position:fixed
     except the mobile drawer), so no header clearance is needed --
     just the standard section rhythm. */
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3rem, 5.5vw, 5rem);
  color: var(--text);
}

/* ---------- Prose typography ----------
   `:where()` keeps specificity at zero so themed sections that
   nest inside a plain group can still override. The second
   selector in each pair reaches one level into a plain
   (non-alignfull) wp:group wrapper. */

:where(.site-main--page > :is(h1, h2, h3, h4, h5, h6, .wp-block-heading),
       .site-main--page > .wp-block-group:not(.alignfull) :is(h1, h2, h3, h4, h5, h6, .wp-block-heading)) {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--charcoal-2);
}

:where(.site-main--page > h1,
       .site-main--page > h1.wp-block-heading) {
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin-block: 0.5rem var(--s-5);
}

:where(.site-main--page > h2,
       .site-main--page > h2.wp-block-heading) {
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  margin-block: var(--s-8) var(--s-3);
}

:where(.site-main--page > h3,
       .site-main--page > h3.wp-block-heading,
       .site-main--page > .wp-block-group:not(.alignfull) h3) {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-block: var(--s-6) var(--s-3);
}

:where(.site-main--page > h4,
       .site-main--page > h4.wp-block-heading) {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block: var(--s-5) var(--s-2);
}

:where(.site-main--page > h5,
       .site-main--page > h6) {
  font-size: var(--fs-small);
  margin-block: var(--s-4) var(--s-2);
}

/* Eyebrow kicker above the H1 (same class the themed intros use). */
:where(.site-main--page > .tx-eyebrow) {
  margin: 0;
}

/* First heading after the header-clearance padding shouldn't
   double-up its own top margin. */
:where(.site-main--page > :is(h1, h2, h3, h4, h5, h6, .wp-block-heading):first-child) {
  margin-top: 0;
}

:where(.site-main--page > p,
       .site-main--page > .wp-block-paragraph,
       .site-main--page > .wp-block-group:not(.alignfull) p) {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  margin-block: 0 var(--s-4);
  max-width: 70ch;
}

:where(.site-main--page > p :is(strong, b)) {
  color: var(--charcoal-2);
  font-weight: 600;
}

:where(.site-main--page > p :is(em, i)) {
  color: var(--text-muted);
  font-style: italic;
}

:where(.site-main--page > ul,
       .site-main--page > ol,
       .site-main--page > .wp-block-list) {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  margin-block: 0 var(--s-5);
  padding-left: var(--s-5);
  max-width: 70ch;
}

:where(.site-main--page > ul) { list-style: disc; }
:where(.site-main--page > ol) { list-style: decimal; }

:where(.site-main--page > :is(ul, ol, .wp-block-list) li) {
  list-style: inherit;
  margin-bottom: var(--s-2);
  padding-left: var(--s-2);
}

:where(.site-main--page > :is(ul, ol, .wp-block-list) li::marker) {
  color: var(--brand-primary-ink);
}

/* Links: plum is reserved for hyperlinks site-wide; underline so
   color is never the only cue (WCAG 1.4.1). */
:where(.site-main--page > :is(p, ul, ol, .wp-block-paragraph, .wp-block-list) a,
       .site-main--page > .wp-block-group:not(.alignfull) :is(p, li) a) {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: text-decoration-thickness var(--dur-fast, 180ms) ease;
}

:where(.site-main--page > :is(p, ul, ol, .wp-block-paragraph, .wp-block-list) a:hover,
       .site-main--page > :is(p, ul, ol, .wp-block-paragraph, .wp-block-list) a:focus-visible) {
  text-decoration-thickness: 2px;
}

:where(.site-main--page > blockquote,
       .site-main--page > .wp-block-quote) {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-muted);
  border-left: 3px solid var(--brand-primary);
  padding-left: var(--s-5);
  margin-block: var(--s-6);
  max-width: 60ch;
}

:where(.site-main--page > hr,
       .site-main--page > .wp-block-separator) {
  height: 1px;
  border: 0;
  background: var(--rule-light);
  margin-block: var(--s-7);
}

/* Tables (rare in legal copy but possible). */
:where(.site-main--page > table,
       .site-main--page > .wp-block-table) {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  margin-block: var(--s-5);
}

:where(.site-main--page > :is(table, .wp-block-table) :is(th, td)) {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule-light);
  color: var(--text);
}

:where(.site-main--page > :is(table, .wp-block-table) th) {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ---------- Report-a-barrier form card (Accessibility Statement) ---------- */
.site-main--page > .tx-a11y-report {
  margin-block: var(--s-6) var(--s-7);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface-content);
  border: 1px solid var(--rule-light);
  border-top: 3px solid var(--brand-primary);
  border-radius: var(--r-md);
}

.site-main--page > .tx-a11y-report > h3:first-child {
  margin-top: 0;
}

/* ---------- Mobile tightening ---------- */
@media (max-width: 719px) {
  .site-main--page:has(
    > :first-child:is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, hr, table,
                      .wp-block-paragraph, .wp-block-heading, .wp-block-list,
                      .wp-block-quote, .wp-block-table, .wp-block-separator,
                      .wp-block-group:not(.alignfull), .wp-block-shortcode)
  ) {
    padding-top: clamp(1.5rem, 6vw, 2.5rem);
  }

  :where(.site-main--page > h2) { margin-block: var(--s-7) var(--s-3); }
  :where(.site-main--page > h3) { margin-block: var(--s-5) var(--s-3); }
}