/*
 Theme Name:   Whichapp
 Theme URI:    https://whichapp.site
 Description:  GeneratePress child theme for Whichapp — Claude-style content layout with sticky sidebar TOC.
 Author:       Whichapp
 Author URI:   https://whichapp.site
 Template:     generatepress
 Version:      1.3.4
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  Whichapp
*/

/* ============================================================
 * v1.3.4 (2026-06-07) — stop double-enqueuing stylesheets
 *
 * functions.php manually enqueued style.css (handle Whichapp-child)
 * and the parent main.min.css (handle generatepress-parent) on top of
 * GeneratePress's own generate-child / generate-main enqueues, so each
 * render-blocking stylesheet was fetched twice on every page. The manual
 * enqueues are removed; wp-typography now depends on generate-child.
 * No CSS rules changed in this file — version bump only, to bust the
 * style.css?ver= cache so the live theme picks up the functions.php fix.
 * ============================================================ */

/* ============================================================
 * v1.3.3 (2026-06-01) — centre the reading prose under tool pages
 *
 * .wpt-tool-prose was pinned to the tool's left edge (margin-left:0),
 * which left it visibly off-centre under the wide (1040px) tool shell.
 * It is now centred (margin auto) so the prose sits balanced beneath
 * both the 780px and the wide shells. Standard for every tool page.
 *
 * ------------------------------------------------------------
 * v1.3.0 (2026-05-30) — tokenised typography
 *
 * All body / UI / chrome sizes now consume the design tokens
 * defined in css/tokens.css. The previous TYPE LADDER v1 and
 * v2 :root block was dead code (never referenced via var(--*))
 * and has been removed.
 *
 * EDITORIAL EXEMPTIONS — kept as literals on purpose:
 *   - Article body prose: 20px desktop / 19px tablet (641-768px) /
 *     18px phone (<=640px, from the wpnav.css readability block).
 *     This is the reading size. Widget/box UI text is intentionally
 *     smaller and denser (13-16px) and is not unified with it. The
 *     responsive steps are optical, not tokens (17px would thin
 *     readability).
 *   - Footer wordmark 32 / 18 (brand artwork, not type).
 *   - Homepage display sizes (.hp-hero__title 44 etc).
 *
 * Article headings (h1/h2/h3) are TOKENISED on the 32/26/22 ladder
 * (desktop), stepping down responsively; H1 stays above H2 at every
 * width. See the "Typography - article body" section below and the
 * wp-measure-fix block in functions.php (H1).
 *
 * LOCKED COMPONENTS — do not edit:
 *   - .wpcs-* CTA template
 *
 * UN-LOCKED + tokenised: .wp-tpcb__* top picks block (all variants).
 * Off-scale literals snapped to the nearest tokens and now consume
 * var(--fs-*) in css/wpnav.css:
 *   - --list variant (best-of pages): button 14->15, disclaimer
 *     12->11 (desktop + mobile). Title/name/hook/review/chip were
 *     already on-scale; pointed at tokens for consistency.
 *   - base/table + --cta variants: column labels + badge 10->11,
 *     button 12->13, CTA fine print 12->11, mobile title 16->15.
 * The sibling .wp-scpb-* block still carries the same off-scale
 * literals (10/12) -- not in this change's scope; a candidate
 * follow-up.
 * ============================================================ */


/* ============================================================
 * Content layout
 * ============================================================ */

/* Article intro — locked three-part structure.
   1. Breadcrumbs  → 88px desktop / 56px tablet / 36px mobile
   2. Title + meta (compact block)
   3. Body content → 80px desktop / 52px tablet / 32px mobile
   All top margins zeroed. */

.wp-singular:not(.home) .site-content {
  padding-top: 16px !important;
}

/* --- Part 1: Breadcrumbs --- */
.wp-singular:not(.home) .wpnav-breadcrumb {
  max-width: 1052px !important;
  padding: 0 !important;
  margin: 0 auto 88px !important;
}

/* --- Part 2: Compact title + meta block --- */
.wp-singular:not(.home) .entry-header {
  max-width: 1052px;
  width: 100%;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

.wp-singular:not(.home) h1.entry-title {
  margin: 0 0 4px !important;
  padding: 0 !important;
}

.wp-singular:not(.home) .entry-meta {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: var(--fs-body, 15px) !important;
  line-height: 1.4 !important;
  color: var(--color-text-strong, #475467) !important;
  font-weight: var(--fw-regular, 450) !important;
  letter-spacing: 0.01em !important;
}

/* Zero out any defaults on inner meta elements */
.wp-singular:not(.home) .entry-meta .posted-on,
.wp-singular:not(.home) .entry-meta .byline,
.wp-singular:not(.home) .entry-meta time {
  margin: 0 !important;
  padding: 0 !important;
}

/* Dot separator before "by" */
.wp-singular:not(.home) .entry-meta .byline::before {
  content: " \00B7 ";
  color: var(--color-text-mute-soft, #98A2B3);
  font-weight: var(--fw-regular, 400);
}

/* Author name: slightly more prominent */
.wp-singular:not(.home) .entry-meta .author-name {
  color: var(--color-text-strong, #344054) !important;
  font-weight: var(--fw-medium, 500) !important;
}

.wp-singular:not(.home) .entry-meta .author-name a,
.wp-singular:not(.home) .entry-meta .url.fn {
  color: var(--color-text-strong, #344054) !important;
  text-decoration: none !important;
}

.wp-singular:not(.home) .entry-meta .url.fn:hover {
  color: #2563EB !important;
}

/* --- Part 3: Body content --- */
.wp-singular:not(.home) .entry-content article > div:first-child {
  margin: 0 0 80px !important;
  font-size: var(--fs-meta, 13px) !important;
  line-height: 1.45 !important;
}

/* Tablet */
@media (max-width: 1100px) {
  .wp-singular:not(.home) .wpnav-breadcrumb {
    margin-bottom: 56px !important;
  }
  .wp-singular:not(.home) .entry-content article > div:first-child {
    margin-bottom: 52px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .wp-singular:not(.home) .wpnav-breadcrumb {
    margin-bottom: 36px !important;
  }
  .wp-singular:not(.home) .entry-content article > div:first-child {
    margin-bottom: 32px !important;
  }
}

/* Widen outer container on single posts */
.wp-singular:not(.home) .site-content .grid-container,
.wp-singular:not(.home) .grid-container.container {
  max-width: 1440px !important;
}

.wp-singular:not(.home) .site-content .content-area {
  float: none;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.wp-singular:not(.home) .inside-article {
  display: block;
  max-width: min(88vw, 1440px);
  margin: 0 auto;
}

/* Readable measure cap — the upper bound for the reading column on stacked
   (mobile / no-sidebar) layouts. 700px is where Claude.com's fluid tutorial
   column tops out on wide screens; desktop article pages narrow below this via
   the fluid rule further down.
   !! REGRESSION HAZARD: this cap also matches redesigned review pages, whose
   .wpr-page-wrap wants 1180px. They are rescued ONLY by the .wp-redesigned
   exception ~30 lines below. If you add/raise ANY .entry-content width cap here
   (especially with !important or an id), you MUST scope it :not(.wp-redesigned)
   or the 20 review pages collapse to half width. Guard:
   scripts/canon/audit_redesign_widths.php. */
.wp-singular:not(.home) .entry-content {
  width: 100%;
  max-width: 700px;
}

/* Full-width templates (tool + facts pages) have no TOC sidebar: entry-content
   is a direct child of inside-article. Match the breadcrumb/entry-header width
   (1052px) and centre it so left edges align on all screen sizes.
   Scoped to those templates ONLY — previously this matched every singular page
   and out-specified the 632 reading cap, so TOC articles painted at 1052px and
   then collapsed to 632px the instant sidebar-toc.js reparented the content.
   That 420px reflow was the load-time flash. */
.wp-singular.page-template-page-tool .inside-article > .entry-content,
.wp-singular.page-template-page-facts .inside-article > .entry-content {
  max-width: 1052px;
  margin-left: auto;
  margin-right: auto;
}

/* Redesigned pages (body.wp-redesigned) carry their own full-bleed layout
   wrapper, .wpr-page-wrap (max-width: 1180px), with a self-contained two-column
   grid (verdict card + "On this page" rail). That wrapper lives INSIDE
   .entry-content, so the 700px reading cap above strangled it to 700px: both
   columns collapsed into the left half of the page and the verdict text wrapped
   one word per line. These pages do not use the wpt-has-toc sidebar mechanism,
   so the base cap was the only thing constraining them. Lift entry-content (and
   its inside-article parent, capped ~998px by the container) to the wrapper's
   own 1180px so the design renders at full width and centres. Scoped to
   .wp-redesigned so normal articles keep the readable measure. */
.wp-singular:not(.home).wp-redesigned .inside-article,
.wp-singular:not(.home).wp-redesigned .inside-article > .entry-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* TOC-eligible articles: fluid reading measure that mirrors Claude.com, which
   runs its tutorial column at ~half the container — min(44vw, 700px). Measured
   match: 563px @1280, 634px @1440, 676px @1536 vs Claude's 557/632/680.
   The column renders at this width from first paint AND reserves the sidebar
   gutter, so the JS TOC injection moves nothing. The relative offset —
   (TOC gap 152px + sidebar 220px) / 2 = 186px — places the centred column
   exactly where the post-JS .wpnav-toc-wrapper flex row lands it; that offset is
   a constant, independent of the fluid column width, so it holds at every size.
   The direct-child rule stops matching the moment JS reparents .entry-content
   under the wrapper, so it never double-applies. Verified zero shift before/after
   JS at 1280/1440/1536.
   body.wpt-has-toc is set by Whichapp_page_gets_toc() in functions.php, the
   same condition that enqueues sidebar-toc.js; the script removes the class on
   pages where it bails out (fewer than two H2s), which recentre normally. */
body.wpt-has-toc .inside-article > .entry-content {
  max-width: min(44vw, 700px);
  margin-left: auto;
  margin-right: auto;
}

/* Reserve the gutter only where the sidebar actually sits beside the content.
   Below 1025px the sidebar is hidden and .wpnav-toc-wrapper stacks (wpnav.css),
   so the fluid half-width and the offset must both lift — the column goes
   full-measure (capped 700px by the base rule) and recentres. */
@media (min-width: 1025px) {
  body.wpt-has-toc .inside-article > .entry-content,
  body.wpt-has-toc .wpnav-toc-wrapper > .entry-content {
    max-width: min(44vw, 700px);
  }
  body.wpt-has-toc .inside-article > .entry-content {
    position: relative;
    left: calc(-1 * (152px + 220px) / 2);
  }
}

/* Interactive tool widgets. Each tool runs at the width it was DESIGNED for,
   declared here in the MAIN stylesheet (not per page) so the width is
   authoritative and loaded with the rest of the theme CSS. That stops the
   "right width then it adjusts" flash: a per-page inline override would lose a
   load-order race against the 1052px article default under SiteGround's
   deferred/critical CSS.

   Two widths, picked by a class on the wrapper so the markup only declares
   WHICH width, never the pixel value:
   - default `.wpt-tool-shell`        = 780px  (simple tools, e.g. eor-break-even)
   - `.wpt-tool-shell.wpt-tool-shell--wide` = 1040px (data-dense tools, e.g.
     eor-fee-comparison; matches the design's .t9-page-wrap max-width)
   The :has() rules pull the article column itself to the matching width; the
   plain .wpt-tool-shell rules are the fallback for browsers without :has(). */
.wp-singular:not(.home) .inside-article > .entry-content:has(.wpt-tool-shell) {
  max-width: 780px;
}
.wp-singular:not(.home) .inside-article > .entry-content:has(.wpt-tool-shell--wide) {
  max-width: 1040px;
}
.wpt-tool-shell {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.wpt-tool-shell--wide {
  max-width: 1040px;
}
/* Reading prose below ANY tool narrows to a readable measure and is CENTRED
   under the tool, so it sits balanced beneath both the 780px and the wide
   1040px shells (long lines stay readable; the measure is unchanged). */
.wpt-tool-shell .wpt-tool-prose {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.wpt-tool-shell .wpt-tool-prose > p,
.wpt-tool-shell .wpt-tool-prose > ul {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Tool pages: tighten the space above the tool masthead. The breadcrumb's
   generous sitewide bottom margin and the widget's own top padding stack to
   ~110px of empty space before the tool's H1; trim both on tool pages so the
   tool starts sooner. Generic [id^="wp-tool"] so it covers every tool widget. */
body.wp-singular.page-template-page-tool .wpnav-breadcrumb {
  margin-bottom: 20px !important;
}
body.page-template-page-tool .wpt-tool-shell > [id^="wp-tool"] {
  padding-top: 28px !important;
}

/* The content+TOC flex row is .wpnav-toc-wrapper, built by sidebar-toc.js and
   styled in wpnav.css (gap 152px, the value the gutter-reserve offset above
   depends on). A legacy #wp-content-toc-wrapper block lived here but nothing
   creates that ID — removed to keep one source of truth for the TOC layout. */


/* ============================================================
 * Typography — article body
 *
 * Body prose stays at 20px (editorial reading size, exempt from the
 * tokenised ladder). Headings follow the tokenised article ladder:
 * H1 = --fs-h1 (32) > H2 = --fs-h2 (26) > H3 = --fs-h3 (22), so the
 * page title reads larger than its section breaks. Heading families
 * live in typography.css. Everything else consumes tokens.
 * ============================================================ */

.wp-singular:not(.home) .entry-content p,
.wp-singular:not(.home) .entry-content li {
  font-size: 20px;
  line-height: 1.65;
  color: #302e2c;
}

.wp-singular:not(.home) .entry-content p {
  margin-bottom: 32px;
}

.wp-singular:not(.home) .entry-content h2 {
  font-size: var(--fs-h2, 26px);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.3;
  margin-top: 64px;
  margin-bottom: 32px;
  color: #060961;
  letter-spacing: -0.01em;
}

.wp-singular:not(.home) .entry-content h3 {
  font-size: var(--fs-h3, 22px);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.35;
  margin-top: 48px;
  margin-bottom: 20px;
  color: #060961;
}

/* H4 sub-headings (e.g. "Why we picked X for startups"). No --fs-h4 token
 * exists, so this sits at 18px between H3 (22) and read (17). Without this
 * rule content H4s fell through to the GeneratePress default — washed grey
 * Source Sans that read as faint, not bold, next to the dark-ink redesign. */
.wp-singular:not(.home) .entry-content h4 {
  font-size: 18px;
  font-weight: var(--fw-semibold, 600);
  line-height: 1.4;
  margin-top: 36px;
  margin-bottom: 12px;
  color: #060961;
  letter-spacing: -0.005em;
}


/* ============================================================
 * Tables
 * ============================================================ */

.wp-singular:not(.home) .entry-content table,
.wp-singular:not(.home) .entry-content table td,
.wp-singular:not(.home) .entry-content table th {
  font-size: var(--fs-body, 15px) !important;
  line-height: 1.5;
}

.wp-singular:not(.home) .entry-content figure.wp-block-table {
  overflow-x: auto;
}


/* ============================================================
 * Sidebar TOC
 * ============================================================ */

#wp-toc-sidebar {
  flex: 0 0 260px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
}

#wp-toc-sidebar::-webkit-scrollbar {
  display: none;                   /* Chrome / Safari */
}

#wp-toc-sidebar .toc-title {
  font-size: var(--fs-micro, 11px);
  font-weight: var(--fw-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9d9b93;
  margin-bottom: 16px;
}

#wp-toc-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#wp-toc-sidebar li {
  font-size: var(--fs-meta, 13px) !important;
  line-height: 1.5;
  color: #5e5d59;
  padding: 5px 0 5px 14px;
  border-left: 1px solid #d1cfc5;
  margin-bottom: 0;
  transition: border-color 0.2s, color 0.2s;
}

#wp-toc-sidebar li.active {
  border-left-color: #b85c38;
  color: #302e2c;
  font-weight: var(--fw-bold, 700);
}

#wp-toc-sidebar li a {
  color: inherit;
  text-decoration: none;
}

#wp-toc-sidebar li a:hover {
  color: #302e2c;
}

/* Hide the original inline EZ-TOC */
.wp-singular:not(.home) #ez-toc-container {
  display: none !important;
}


/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width: 1100px) {
  #wp-content-toc-wrapper {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
  }

  #wp-toc-sidebar {
    display: none;
  }

  .wp-singular:not(.home) #ez-toc-container {
    display: block !important;
  }
}

@media (max-width: 768px) {
  /* Tablet-band (641-768px) reading body: 19px, a 1px optical step
     down from the 20px desktop size. Phones <=640px drop to 18px via
     the wpnav.css readability block (!important). Off-ladder editorial
     exemption (see header + audit allowlist); the 17px token would
     thin readability. */
  .wp-singular:not(.home) .entry-content p,
  .wp-singular:not(.home) .entry-content li {
    font-size: 19px;
    line-height: 1.6;
  }

  /* Tablet band (641-768px). H2 holds at --fs-h2 (26); H3 inherits
     the desktop --fs-h3 (22). Phones <=640px are governed by the
     readability baseline in wpnav.css (body 18 / H2 26 / H3 20,
     !important), and the mobile H1 (28, functions.php) sits above
     both so the hierarchy holds at every width. */
  .wp-singular:not(.home) .entry-content h2 {
    font-size: var(--fs-h2, 26px);
    margin-top: 40px;
  }

  #wp-content-toc-wrapper {
    max-width: 100%;
    padding: 0 20px;
  }
}


/* ============================================================
 * Worked-example / sample-output pages
 *
 * Uses the site-wide tokenised heading ladder (H2 = --fs-h2 (26),
 * H3 = --fs-h3 (22)) so worked-example pages match every other
 * article on the site.
 * ============================================================ */

.wpe-worked-example h2 {
  font-size: var(--fs-h2, 26px) !important;
  font-weight: var(--fw-semibold, 600) !important;
  margin-top: 64px !important;
  margin-bottom: 32px !important;
}

.wpe-worked-example h3 {
  font-size: var(--fs-h3, 22px) !important;
  font-weight: var(--fw-semibold, 600) !important;
  margin-top: 48px !important;
  margin-bottom: 20px !important;
}

/* Gap between the title block and the content+TOC wrapper. */
#wp-content-toc-wrapper {
  margin-top: 24px;
}


/* ============================================================
 * CLS prevention
 * ============================================================ */

/* Reserve space for editorial evidence screenshots before lazy-load fires.
   All current editorial screenshots are approximately 1:1 aspect ratio
   (range 901×934 to 1440×1386 — both within 5% of square). */
figure.wp-image-evidence {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* General defensive rule: never let an image stretch its container vertically.
   Scoped to non-homepage singular pages to avoid overriding homepage hero logo sizes. */
.wp-singular:not(.home) .entry-content img {
  height: auto;
  max-width: 100%;
}


/* ============================================================
 * Inline-styled article block overrides
 *
 * Inline-styled boxes (verdict cards, modeler boxes, methodology
 * cards) carry their visual identity in attribute selectors. The
 * rules below override the inherited 20px body prose so callout
 * text reads at the UI body size, not the reading size.
 * ============================================================ */

/* Verdict / at-a-glance card. Fingerprint: rounded 16px + #F6F8FB. */
.entry-content div[style*="border-radius: 16px"][style*="#F6F8FB"]
  > p:first-of-type {
  font-size: var(--fs-body, 15px) !important;
  line-height: 1.3;
}

/* Modeler box. Fingerprint: #F0F9FF + #BAE6FD border. */
.entry-content div[style*="#F0F9FF"][style*="#BAE6FD"] p {
  font-size: var(--fs-body, 15px) !important;
  line-height: 1.6;
}
.entry-content div[style*="#F0F9FF"][style*="#BAE6FD"] p:nth-of-type(2) {
  font-size: var(--fs-body, 15px) !important;
  line-height: 1.3;
}
/* eyebrow uppercase stays one tier smaller */
.entry-content div[style*="#F0F9FF"][style*="#BAE6FD"] p:first-of-type {
  font-size: var(--fs-meta, 13px) !important;
}

/* Tool-callout (.wptc-tool-links). */
.entry-content .wptc-tool-links p,
.entry-content .wptc-tool-links li {
  font-size: var(--fs-body, 15px) !important;
  line-height: 1.5 !important;
}
.entry-content .wptc-tool-links p:first-child,
.entry-content .wptc-tool-links p strong {
  font-size: var(--fs-body, 15px) !important;
}

/* Methodology card (WP_METH). Fingerprint: #F9FAFB + 8px radius. */
.entry-content div[style*="#F9FAFB"][style*="border-radius:8px"] li,
.entry-content div[style*="#F9FAFB"][style*="border-radius:8px"] p {
  font-size: var(--fs-meta, 13px) !important;
}
.entry-content div[style*="#F9FAFB"][style*="border-radius:8px"] h3,
.entry-content div[style*="#F9FAFB"][style*="border-radius:8px"] p:first-of-type {
  font-size: var(--fs-body, 15px) !important;
}


/* ============================================================
 * LOCKED components — wpcs- CTA + wp-tpcb top picks
 *
 * These components have their own LOCKED design contract. The
 * rules below re-assert their intended sizes against theme rules
 * that would otherwise win on specificity. Do not edit values.
 * ============================================================ */

/* wpcs- title — locked at 15/700 */
.entry-content h3.wpcs__title {
  font-size: var(--fs-body, 15px) !important;
  font-weight: var(--fw-bold, 700) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.1px !important;
  color: #101828 !important;
  margin: 0 !important;
}

/* wpcs- hook — locked at 15 */
.entry-content p.wpcs__hook {
  font-size: var(--fs-body, 15px) !important;
  line-height: 1.45 !important;
  color: #302e2c !important;
  margin: 0 !important;
}

/* wpautop pollution fix inside the wpcs- header — display:contents
   removes the wrapper from layout so the locked flex header behaves. */
.entry-content aside.wpcs > header.wpcs__head > p {
  display: contents !important;
}

/* wp-tpcb top picks block — locked. */
.entry-content .wp-tpcb__title,
.wp-tpcb__title {
  font-size: var(--fs-body, 15px) !important;
}
.entry-content .wp-tpcb__col-hd,
.wp-tpcb__col-hd,
.entry-content .wp-tpcb__banner-pill,
.wp-tpcb__banner-pill {
  font-size: var(--fs-micro, 11px) !important;
}

/* Related cards heading. */
.wpnav-related__heading {
  font-size: var(--fs-body, 15px) !important;
}


/* ============================================================
 * Document baseline
 *
 * Pin <body> to UI body size so any element without an explicit
 * size lands on the ladder by default. (GP parent's 17px default
 * leaks into containers otherwise.)
 * ============================================================ */

body {
  font-size: var(--fs-body, 15px);
}


/* ============================================================
 * Footer chrome (.wpft__*)
 *
 * Footer wordmark .wpft__wordmark-w / .wpft__wordmark-rest are
 * EXEMPT — branded artwork, handled in typography.css.
 * ============================================================ */

.wpft__mission-text     { font-size: var(--fs-body, 15px) !important; }
.wpft__tagline          { font-size: var(--fs-micro, 11px) !important; }
.wpft__badge-text       { font-size: var(--fs-micro, 11px) !important; }
.wpft__col-label        { font-size: var(--fs-micro, 11px) !important; }
.wpft__col-list a       { font-size: var(--fs-meta, 13px) !important; }
.wpft__col-cta          { font-size: var(--fs-micro, 11px) !important; }
.wpft__copyright        { font-size: var(--fs-micro, 11px) !important; }
.wpft__legal-nav a      { font-size: var(--fs-micro, 11px) !important; }
.wpft__disclaimer       { font-size: var(--fs-micro, 11px) !important; }
.wpft__back-top         { font-size: var(--fs-micro, 11px) !important; }
.wpft__back-arrow       { font-size: var(--fs-body, 15px) !important; }


/* ============================================================
 * Top navigation + mobile menu
 * ============================================================ */

.wpnav-nav__chevron     { font-size: var(--fs-micro, 11px) !important; }
.wpnav-search__input    { font-size: var(--fs-body, 15px) !important; }
.wpnav-mobile__title    { font-size: var(--fs-body, 15px) !important; }


/* ============================================================
 * FAQ +/- expand indicator (glyph)
 * ============================================================ */

.entry-content details summary::after {
  font-size: var(--fs-body, 15px) !important;
}


/* ============================================================
 * Archive pages
 *
 * Archive title sits at the page-H1 tier (--fs-h1, 32) so it acts
 * as the dominant page heading. Other archive sizes (description,
 * card title, excerpt) are already on the ladder via wpnav.css.
 * ============================================================ */

.wpnav-archive__title { font-size: var(--fs-h1, 32px) !important; }


/* ============================================================
 * Homepage (.hp-*)
 *
 * UI text collapsed onto the ladder. Display/hero/numeric sizes
 * are EXEMPT (branded marketing display):
 *   .hp-hero__title           44px
 *   .hp-pathways__title       32px (matches --fs-h1)
 *   .hp-value__heading        26px
 *   .hp-spotlight__heading    40px
 *   .hp-compare-snapshot__score 48px
 *   .hp-hero-visual__score    22px (matches --fs-h3)
 * ============================================================ */

.hp-hero__subtitle               { font-size: var(--fs-body, 15px) !important; }
.hp-logoband__label              { font-size: var(--fs-micro, 11px) !important; }
.hp-pathways__card-desc          { font-size: var(--fs-meta, 13px) !important; }
.hp-value__card-body             { font-size: var(--fs-meta, 13px) !important; }
.hp-spotlight__desc              { font-size: var(--fs-body, 15px) !important; }
.hp-compare-snapshot__attr-label { font-size: var(--fs-micro, 11px) !important; }