/**
 * Legal document styling — ported from
 * src/components/sections/legal/LegalDocument.astro (article layout/typography)
 * and src/components/common/HeroText.astro (title treatment).
 *
 * Scope: the legal pages (imprint / privacy / terms / app-privacy), which
 * render through the generic `templates/page.html` (`wp:post-title` +
 * `wp:post-content`, seeded by wordpress/seed/seed-wp.sh as flat
 * `<h2|h3 class="wp-block-heading">` + `<p>` pairs — there is no wrapping
 * `.legal`/`.legal-head`/`.legal-body` markup to hook, so this file recreates
 * the same visual rhythm against that flat structure). Enqueued only on
 * those pages (see functions.php), and further scoped here via the
 * `legal-page` body class added by the same enqueue callback, so it never
 * touches other `page.html` content.
 *
 * The reference nests each block's heading/paragraph in its own
 * `.legal-block { gap: 24px }` flex column, all stacked inside
 * `.legal-body { gap: 32px / 120px }`. Ported flat: `.entry-content` itself
 * is the flex column with the 24px (intra-block) gap, and every heading
 * that isn't the first child gets its own margin-top bumped by the extra
 * amount needed to reach the 32px/120px inter-block gap (i.e. bonus =
 * desired-gap minus the 24px already contributed by the container gap),
 * layered on top of the heading's own base rhythm margin (ported from
 * base.css's h4/h5 rules, since the source component downgrades block
 * headings to <h4>/<h5> — the seed script instead emits real <h2>/<h3>, so
 * those tags are restyled here to match the intended sub-heading scale
 * rather than the page's hero-title scale).
 */

body.legal-page main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-inline: 16px;
}

body.legal-page .wp-block-post-title {
  font-family: var(--font-bold);
  font-size: var(--text-headline-lg);
  line-height: var(--linehight-headline-lg);
  /* HeroText's 28px top padding minus its own -8px title margin. */
  margin: 20px 0 -10px 0;
  /* A6/T3 parity fix: `main` is a flex column (this file, above), and WP
     core's own constrained-layout CSS (global-styles-inline-css) sets
     `margin-left/right: auto !important` on every non-aligned direct
     child of `.is-layout-constrained`. Auto margins on a flex item's
     cross axis win over `align-items: stretch`, shrinking the title to
     fit-content width and centering it -- `.entry-content` escapes this
     because block-library gives it its own `width: 100%`; the title gets
     no such rule. Filling the cross axis here removes the spare space
     those auto margins would otherwise center into, restoring the
     reference's left-aligned, full-width title.
   */
  width: 100%;
}

body.legal-page .entry-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.legal-page .entry-content h2.wp-block-heading {
  font-family: var(--font-bold);
  font-size: var(--text-headline-md);
  line-height: var(--linehight-headline-md);
  margin: -7px 0 -8px 0;
}

body.legal-page .entry-content h3.wp-block-heading {
  font-family: var(--font-bold);
  font-size: var(--text-headline-sm);
  line-height: var(--linehight-headline-sm);
  margin: -4px 0 -6px 0;
  white-space: pre-line;
}

/* Bonus margin-top so a heading starting a new block reaches the 32px
   inter-block gap instead of just the container's 24px item gap:
   own base margin-top (-7 / -4) + (32 - 24) = 1 / 4. */
body.legal-page .entry-content h2.wp-block-heading:not(:first-child) {
  margin-top: 1px;
}

body.legal-page .entry-content h3.wp-block-heading:not(:first-child) {
  margin-top: 4px;
}

body.legal-page .entry-content p.wp-block-paragraph {
  font-size: var(--text-copy-md);
  line-height: var(--linehight-copy-md);
  margin: -4px 0 -5px 0;
}

/*
 * Legal download button (FIX 5) -- Button.astro's tertiary/xsmall/
 * desktop-medium chrome (LegalDocument.astro:36-46), inserted via
 * functions.php's render_block filter right after the intro paragraph on
 * a legal page with a PDF attached only (imprint has no DOCUMENTS entry,
 * so never gets one). Button "chrome" (background/border/radius) IS ported here,
 * unlike the blog card CTA above -- this one really is rendered as a
 * `<Button>` on the reference, not a bare text+icon affordance.
 *
 * The wrapper is `:where(body.legal-page)` rather than a plain
 * `body.legal-page` descendant combinator specifically so this selector's
 * specificity stays at (0,1,0) -- a bare `.legal-download`, since `:where()`
 * always contributes zero. This one rule is the only place that matters:
 * aos.css's `[data-aos^="fade"][data-aos^="fade"]` rule (the repeated
 * attribute selector is AOS's own specificity-boosting trick) sits at
 * (0,2,0) and needs to keep winning the cascade for `transition-property`
 * against this rule's `transition` shorthand, exactly like it does on the
 * reference (Button.astro's own scoped `.button{transition:...}` there is
 * also a two-selector-equivalent match against AOS and *also* loses,
 * confirmed live: the reference's own `.legal-download` computes
 * `transition-property: opacity, transform` / `transition-duration: 0.6s`
 * at every reveal, never its own declared `background-color 0.2s ease,
 * transform 0.15s ease`). Before this fix, `body.legal-page .legal-download`
 * sat at (0,2,1) -- the bonus `body` element bumped it just past AOS's
 * (0,2,0), so *this* rule won instead: `transition-property` came out as
 * `background-color, transform` (no `opacity` at all, so the button popped
 * to full opacity with zero fade) and `transform`'s duration came out as
 * 0.15s instead of AOS's 0.6s (so the fade-up slide finished 4x faster than
 * the surrounding title/body text) -- which is exactly the bug the user
 * reported ("the download button's reveal lands first, then the rest of
 * the text lands"). `:where()` drops the specificity below AOS's without
 * changing which elements the rule matches or any of its declared values.
 */
:where(body.legal-page) .legal-download {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 2px;
  font-family: 'PPObjectSans-Medium';
  text-transform: uppercase;
  font-size: var(--text-button-sm);
  line-height: 100%;
  letter-spacing: 1.2px;
  height: 24px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius-md);
  text-wrap: nowrap;
  text-decoration: none;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
}

body.legal-page .legal-download:hover {
  background-color: var(--overlay-hover);
}

body.legal-page .legal-download:active {
  background-color: var(--overlay-pressed);
  transform: scaleY(0.97) scaleX(1.005);
  opacity: 0.95;
}

body.legal-page .legal-download-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media (min-width: 600px) {
  body.legal-page main {
    padding-inline: 24px;
  }

  body.legal-page .wp-block-post-title {
    /* HeroText's 60px top padding minus its own -11px title margin. */
    margin: 49px 0 -15px 0;
    /* HeroText's `.title` jumps to the xl scale at this same 600px
       breakpoint (font-size/line-height only bump again, 44px->64px, at
       1024px via tokens.css) -- the margin math above already assumed this
       scale (-11/-15 are the xl margin values, not --text-headline-lg's
       own -8/-10), but the font-size/line-height themselves were never
       updated to match, so the title rendered at ~73% of the intended size
       between 600 and 1024px (fix3-report's known-but-unfixed 768px gap;
       visual-devices-imprint.md). */
    font-size: var(--text-headline-xl);
    line-height: var(--linehight-headline-xl);
  }
}

@media (min-width: 1024px) {
  body.legal-page main {
    /* Content column of the design: 864px, centred inside a 64px gutter.
       `gap` here is the space between `main`'s only two children -- the
       title and `.entry-content` -- so it plays the role of HeroText's own
       `.hero-text{gap:20px}` (title-to-description spacing), NOT the
       `.legal{gap:120px}`/`.legal-body{gap:120px}` inter-section spacing
       (that's already reproduced independently by `.entry-content`'s own
       24px gap + the bonus margin-top on non-first headings below). Was
       120px (copied from the wrong reference gap), producing a ~110px
       H1-to-description gap instead of the reference's near-zero one --
       see visual-devices-imprint.md. */
    box-sizing: content-box;
    max-width: 864px;
    margin-inline: auto;
    padding-inline: 64px;
    gap: 20px;
  }

  body.legal-page .wp-block-post-title {
    /* HeroText's 76px top padding minus its own -11px title margin. */
    margin: 65px 0 -15px 0;
    /* Missing lg: block -- HeroText's `.title` font-size/line-height jump to
       the xl scale at the 600px breakpoint and stay there (the `--text-headline-xl`
       custom property itself is what bumps again, 44px->64px, at 1024px via
       tokens.css). This rule never existed here, so the title was stuck at
       `--text-headline-lg`'s desktop value (40px) instead of `--text-headline-xl`'s
       (64px) -- ~62% of the reference size (visual-devices-imprint.md). */
    font-size: var(--text-headline-xl);
    line-height: var(--linehight-headline-xl);
  }

  /* Base margin-top (-7 / -4) + (120 - 24) = 89 / 92. */
  body.legal-page .entry-content h2.wp-block-heading:not(:first-child) {
    margin-top: 89px;
  }

  body.legal-page .entry-content h3.wp-block-heading:not(:first-child) {
    margin-top: 92px;
  }

  body.legal-page .entry-content p.wp-block-paragraph {
    font-size: var(--text-copy-lg);
    line-height: var(--linehight-copy-lg);
    margin: -7px 0 -8px 0;
  }

  /* The intro/description paragraph (HeroText's `.single-description`, the
     first paragraph in the flattened `.entry-content`) sits in a narrower
     540px lede column on the reference (`.hero-text{width:540px}`), while
     the body paragraphs below it span the full 864px content column. That
     narrower max-width was never ported, so the intro paragraph stretched
     to the same width as the body text instead of wrapping into its own
     shorter lines (visual-devices-imprint.md). */
  body.legal-page .entry-content p.wp-block-paragraph:first-child {
    max-width: 540px;
  }

  /* Description-to-button gap: the reference's `.legal-head{gap:64px}`
     governs this (HeroText, then the button, as `.legal-head`'s only two
     children) -- there's no `.legal-head` box here to carry that gap
     directly, so it's reproduced as extra margin-top on top of
     `.entry-content`'s own 24px container gap. Measured live against the
     reference (getBoundingClientRect, description bottom -> button top):
     24px total below 1024px (no override needed -- the container gap alone
     already matches), 56px at >=1024px (24 + this 32px). */
  body.legal-page .legal-download {
    margin-top: 32px;
    gap: 6px;
    font-size: var(--text-button-lg);
    letter-spacing: 1.92px;
    height: 44px;
  }

  body.legal-page .legal-download-icon {
    width: 24px;
    height: 24px;
  }
}