/**
 * Legacy-page compatibility overrides.
 *
 * Scoped to body.legacy-page (set by App\Providers\LegacyServiceProvider on legacy-template
 * rendered requests) so they restore old-prod presentation WITHOUT affecting native Blade pages,
 * which keep Radicle's theme.json design tokens.
 *
 * Two concerns, both stemming from Radicle's theme.json differing from the old Understrap theme:
 *   1. Core button brand — Radicle styles core/button dark + square; old-prod was thryv-orange +
 *      rounded.
 *   2. Font-size presets — legacy block content uses the old theme.json font-size slugs
 *      (has-{hxlarge,hlarge,hmed,hsmall,pxlarge,plarge,pmed,psmall}-font-size). Radicle's
 *      theme.json doesn't define those slugs, so the classes had no rule and headings/paragraphs
 *      fell back to defaults (e.g. the hero H1 rendered 40px instead of 52px). Values mirror the
 *      old theme's theme.json settings.typography.fontSizes.
 */

/* ---- 1. Core button brand (thryv-orange / rounded) ---- */

body.legacy-page .wp-block-button__link.wp-element-button {
  background-color: #ff5000;
  color: #fff;
  border: 0;
  border-radius: 30px;
  padding: 10px 35px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
}

body.legacy-page .wp-block-button__link.wp-element-button:hover,
body.legacy-page .wp-block-button__link.wp-element-button:focus {
  background-color: #e64900;
  color: #fff;
}

/* Outline variant → transparent with orange border + text, filling orange on hover. */
body.legacy-page .wp-block-button.is-style-outline > .wp-block-button__link,
body.legacy-page .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
  background-color: transparent;
  color: #ff5000;
  border: 2px solid #ff5000;
}

body.legacy-page .wp-block-button.is-style-outline > .wp-block-button__link:hover,
body.legacy-page .wp-block-button.is-style-outline > .wp-block-button__link:focus {
  background-color: #ff5000;
  color: #fff;
}

/* ---- 2. Font-size presets (old theme.json typography.fontSizes) ---- */

body.legacy-page {
  --wp--preset--font-size--psmall: 16px;
  --wp--preset--font-size--pmed: 18px;
  --wp--preset--font-size--plarge: 20px;
  --wp--preset--font-size--pxlarge: 24px;
  --wp--preset--font-size--hsmall: 36px;
  --wp--preset--font-size--hmed: 40px;
  --wp--preset--font-size--hlarge: 48px;
  --wp--preset--font-size--hxlarge: 52px;
}

/*
 * !important here is not a hack — it mirrors WordPress core exactly.
 *
 * For every theme.json font-size preset WP emits `.has-<slug>-font-size { font-size: var(…)
 * !important }` into the inline global-styles sheet. Old-prod's theme.json declares psmall…hxlarge,
 * so on prod those classes win everywhere by virtue of that core !important.
 *
 * radicle's theme.json does NOT declare these presets, so WP emits nothing and these hand-rolled
 * replacements were the only rule — unlayered, but only (0,2,1). child-theme.min.css carries
 * `.seo-content-template .sct-content .sct-content-container .sct-content-row .sct-post-content h3`
 * at 24px, which is far more specific and silently won. Symptom (2026-08-30): FAQ accordion headings
 * rendered 24px instead of 16px on /blog/*, making every question oversized and the block ~90px taller
 * than prod. Every has-*-font-size class on a legacy page had the same defect.
 *
 * Proper fix is to declare these presets in radicle's theme.json so core emits the rules itself;
 * this restores parity without a rebuild. See vault/migration docs.
 */
body.legacy-page .has-psmall-font-size {
  font-size: var(--wp--preset--font-size--psmall) !important;
}
body.legacy-page .has-pmed-font-size {
  font-size: var(--wp--preset--font-size--pmed) !important;
}
body.legacy-page .has-plarge-font-size {
  font-size: var(--wp--preset--font-size--plarge) !important;
}
body.legacy-page .has-pxlarge-font-size {
  font-size: var(--wp--preset--font-size--pxlarge) !important;
}
body.legacy-page .has-hsmall-font-size {
  font-size: var(--wp--preset--font-size--hsmall) !important;
}
body.legacy-page .has-hmed-font-size {
  font-size: var(--wp--preset--font-size--hmed) !important;
}
body.legacy-page .has-hlarge-font-size {
  font-size: var(--wp--preset--font-size--hlarge) !important;
}
body.legacy-page .has-hxlarge-font-size {
  font-size: var(--wp--preset--font-size--hxlarge) !important;
}

/* ---- 3. Color + spacing presets ----
   Sage/radicle ships no theme.json and doesn't print WP's wp-global-styles inline CSS, so the
   --wp--preset--color--* / --wp--preset--spacing--* custom properties are undefined. Legacy block
   content references them (inline `var(--wp--preset--spacing--80)`, `has-{color}-color` classes,
   216× `has-thryv-black-color` etc.). Redefine the vars (colors from the old theme.json palette;
   spacing = WP core default scale the old theme inherited) + the has-{slug}-color/-background-color
   classes so legacy content matches old-prod. */

body.legacy-page {
  --wp--preset--color--thryv-orange: #ff5000;
  --wp--preset--color--thryv-light-orange: #ffe3d7;
  --wp--preset--color--thryv-dark-blue: #29355d;
  --wp--preset--color--thryv-cornflower: #3d5199;
  --wp--preset--color--thryv-sapphire: #5378fc;
  --wp--preset--color--thryv-light-blue: #5378fc73;
  --wp--preset--color--thryv-steel: #808080;
  --wp--preset--color--thryv-night: #4d4d4d;
  --wp--preset--color--thryv-black: #121212;
  --wp--preset--color--white: #ffffff;

  --wp--preset--spacing--20: 0.44rem;
  --wp--preset--spacing--30: 0.67rem;
  --wp--preset--spacing--40: 1rem;
  --wp--preset--spacing--50: 1.5rem;
  --wp--preset--spacing--60: 2.25rem;
  --wp--preset--spacing--70: 3.38rem;
  --wp--preset--spacing--80: 5.06rem;
}

body.legacy-page .has-thryv-orange-color {
  color: var(--wp--preset--color--thryv-orange);
}
body.legacy-page .has-thryv-light-orange-color {
  color: var(--wp--preset--color--thryv-light-orange);
}
body.legacy-page .has-thryv-dark-blue-color {
  color: var(--wp--preset--color--thryv-dark-blue);
}
body.legacy-page .has-thryv-cornflower-color {
  color: var(--wp--preset--color--thryv-cornflower);
}
body.legacy-page .has-thryv-sapphire-color {
  color: var(--wp--preset--color--thryv-sapphire);
}
body.legacy-page .has-thryv-light-blue-color {
  color: var(--wp--preset--color--thryv-light-blue);
}
body.legacy-page .has-thryv-steel-color {
  color: var(--wp--preset--color--thryv-steel);
}
body.legacy-page .has-thryv-night-color {
  color: var(--wp--preset--color--thryv-night);
}
body.legacy-page .has-thryv-black-color {
  color: var(--wp--preset--color--thryv-black);
}
body.legacy-page .has-white-color {
  color: var(--wp--preset--color--white);
}

body.legacy-page .has-thryv-orange-background-color {
  background-color: var(--wp--preset--color--thryv-orange);
}
body.legacy-page .has-thryv-light-orange-background-color {
  background-color: var(--wp--preset--color--thryv-light-orange);
}
body.legacy-page .has-thryv-dark-blue-background-color {
  background-color: var(--wp--preset--color--thryv-dark-blue);
}
body.legacy-page .has-thryv-cornflower-background-color {
  background-color: var(--wp--preset--color--thryv-cornflower);
}
body.legacy-page .has-thryv-sapphire-background-color {
  background-color: var(--wp--preset--color--thryv-sapphire);
}
body.legacy-page .has-thryv-light-blue-background-color {
  background-color: var(--wp--preset--color--thryv-light-blue);
}
body.legacy-page .has-thryv-steel-background-color {
  background-color: var(--wp--preset--color--thryv-steel);
}
body.legacy-page .has-thryv-night-background-color {
  background-color: var(--wp--preset--color--thryv-night);
}
body.legacy-page .has-thryv-black-background-color {
  background-color: var(--wp--preset--color--thryv-black);
}
body.legacy-page .has-white-background-color {
  background-color: var(--wp--preset--color--white);
}

/* ---- 4. FAQ accordion (thryv-block/faqs) ----
   The block markup gives each .card-header an inline `border-color:#ffffff` (intended only as the
   top separator color). With faqs/style-index.css loaded (WP loads all block styles here since
   should_load_separate_core_block_assets() is false) + WP core's
   :where([style*="border-color"]){border-style:solid}, the left/right borders render as visible
   white boxes. Prod shows only the top separator line, so suppress the side/bottom borders. */
body.legacy-page .faqs-component .card .card-header {
  border-right-width: 0;
  border-left-width: 0;
  border-bottom-width: 0;
}

/*
 * core/accordion — ported from wp-includes/css/dist/block-library/style.min.css.
 *
 * This build serves NO wp-includes CSS on the front end, so every core block renders unstyled on
 * legacy pages. core/accordion is where it showed first: the FAQ block (thryv-block/seo-faqs) wraps
 * it, and without core's reset the toggle fell back to a raw <button> — grey #efefef background,
 * 2px outset border, appearance:button — with the chevron squeezed to a 9px box.
 *
 * I could not establish WHY the handle never prints: nothing dequeues it, radicle is not a block
 * theme, both wp_should_load_separate_core_block_assets() and wp_should_load_block_assets_on_demand()
 * are false, the handle is registered with a valid src, the file serves 200, and an explicit
 * wp_enqueue_style('wp-block-library') at wp_enqueue_scripts:20 still produced no <link>. Rather
 * than ship a workaround built on a guess, this ports only the rules the FAQ block actually needs.
 *
 * Scoped to body.legacy-page so native pages (Phoenix tokens + asset firewall) are untouched.
 *
 * FOLLOW-UP: find out what drops wp-block-library. Until then any OTHER core block on a legacy page
 * is still unstyled — this fixes the accordion, not the underlying gap.
 */
body.legacy-page .wp-block-accordion {
  box-sizing: border-box;
}
body.legacy-page .wp-block-accordion-heading__toggle {
  align-items: center;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  overflow: hidden;
  padding: var(--wp--preset--spacing--20, 1em) 0;
  text-align: inherit;
  text-decoration: inherit;
  text-transform: inherit;
  width: 100%;
  word-spacing: inherit;
}
body.legacy-page .wp-block-accordion-heading__toggle:not(:focus-visible) {
  outline: none;
}
body.legacy-page
  .wp-block-accordion-heading__toggle:hover
  .wp-block-accordion-heading__toggle-title {
  text-decoration: underline;
}
body.legacy-page .wp-block-accordion-heading__toggle-title {
  flex: 1;
}
body.legacy-page .wp-block-accordion-heading__toggle-icon {
  align-items: center;
  display: flex;
  height: 1.2em;
  justify-content: center;
  width: 1.2em;
}
body.legacy-page .wp-block-accordion-panel[hidden] {
  margin-block-start: 0;
}