/**
 * ListoWP typography - the single source of truth for text size on listowp.com.
 *
 * Hierarchy is carried by SIZE, not weight. Headings stay thin (300/400), so the
 * steps sit ~1.26x apart, which is about the narrowest gap that still reads as a
 * level change at that weight. Bolding is deliberately not part of the system.
 *
 * THE RULES THAT KEEP THIS FROM FRAGMENTING AGAIN:
 *
 *   1. Nothing else in this codebase declares a font-size on text. Not a block's
 *      content.html, not a render.php, not site.css, not an inline style. If a
 *      thing needs a size, it uses a class below - or a token is added here.
 *
 *   2. No has-*-font-size classes and no fontSize keys in wp: block comments.
 *      Those route through Site Editor presets, which is the second source of
 *      truth this file exists to eliminate.
 *
 *   3. Heading sizes are NOT set in global styles (post 2847). WP emits those as
 *      `:root :where(h1)`, which outranks a plain `h1` selector - leaving them in
 *      place would force !important here and restart the whole mess. They were
 *      removed so this file owns headings outright, at boring specificity.
 *
 *   4. h6 is not used. It is aliased to h5 so stray markup still degrades sanely.
 *
 * Fluid sizes, stated as one rule: EVERY heading scales, nothing below body does.
 * The first draft of this file scaled only h1-h3 and left h4/h5 fixed, on the
 * reasoning that 30px and 24px already fit a phone. That silently inverted the
 * hierarchy: at 360px a fluid h3 bottoms out at 27px while a fixed h4 stays at
 * 30px, so h4 rendered LARGER than h3, and h5 did the same to h4. If one heading
 * is fluid they all have to be, or the order only holds at the wide end.
 *
 * THE RAMP IS A 1.25 MODULAR SCALE built up from 16px body:
 *
 *     body 16 -> h5 20 -> h4 25 -> h3 31 -> h2 39 -> h1 48      (desktop)
 *     body 16 -> h5 18 -> h4 20 -> h3 23 -> h2 27 -> h1 32      (360px)
 *
 * Every step is the same ~1.25 ratio, so no level sits closer to its neighbour
 * than any other - which matters more than usual here, because the headings are
 * thin and size is the ONLY signal of rank.
 *
 * --t-display (74px) is deliberately OUTSIDE that scale. It is the landing-page
 * hero only - "To do, doing, Listo!" and "Are You Listo?" - and jumping the ramp
 * is the point: it should not look like the next heading up, it should look like
 * a different kind of thing. Every other h1 on the site is a page title and uses
 * --t-page (48px), which is the conventional range for one.
 *
 * The floors keep the ramp strictly descending at 360px and clear of 16px body.
 *
 * Body text is deliberately NOT fluid. Viewport-scaled body copy overrides the
 * size the reader chose in their own browser settings, which is the one place
 * that preference should always win.
 *
 * @package listo-blocks
 */

:root {
	/* Headings. The middle term is `rem + vw`, never bare vw: a pure-vw size is
	   locked to the viewport and stops responding to the reader's own font-size
	   setting, which fails WCAG 1.4.4 (resize text). The rem part keeps user zoom
	   working; the vw part does the fluid scaling. Values are the straight line
	   through the two clamp endpoints across a 360px - 1400px viewport. */
	--t-display: clamp(2.75rem,    2.10rem + 2.89vw, 4.625rem);  /* 44 -> 74px  hero h1 ONLY  */
	--t-page:    clamp(2rem,       1.65rem + 1.54vw, 3rem);      /* 32 -> 48px  h1 page title */
	--t-title:   clamp(1.6875rem,  1.43rem + 1.15vw, 2.4375rem); /* 27 -> 39px  h2            */
	--t-section: clamp(1.4375rem,  1.26rem + 0.77vw, 1.9375rem); /* 23 -> 31px  h3            */
	--t-sub:     clamp(1.25rem,    1.14rem + 0.48vw, 1.5625rem); /* 20 -> 25px  h4            */
	--t-minor:   clamp(1.125rem,   1.08rem + 0.19vw, 1.25rem);   /* 18 -> 20px  h5            */

	/* Body and below - all fixed, see the note on user font-size preference.
	   Body is 1rem, the conventional baseline. It was 1.2rem until 2026-07-21,
	   which was never a design decision: it was inherited from a misconfigured
	   preset ramp where body sat on the SMALLEST rung, and it made "small" (16px)
	   the size most sites use as body. Everything below body moved down with it. */
	--t-lead:    1.125rem;                      /*        18px  LARGE body       */
	--t-body:    1rem;                          /*        16px  default          */
	--t-small:   0.875rem;                      /*        14px  secondary        */
	--t-meta:    0.8125rem;                     /*        13px  fine print       */

	/* Hero tier. The landing heroes sit outside the normal ramp - --t-display is
	   74px where a page h1 is 48 - and their supporting copy is lifted to match,
	   otherwise a 16px byline under a 74px headline reads as an afterthought.
	   byline1 is the promise, byline2 is the credit line under it. */
	--t-hero-lead: clamp(1.125rem, 1.04rem + 0.38vw, 1.375rem); /* 18 -> 22px  byline1 */
	--t-hero-sub:  1rem;                                        /*        16px  byline2 */

	/* Text inputs. iOS Safari auto-zooms the page when you focus a field whose
	   computed size is under 16px, and it does not zoom back out afterwards -
	   the visitor is left stranded at 1.4x with the layout overflowing. The
	   threshold is 16 CSS px flat, so max() is load-bearing: it honours a larger
	   root font-size but can never resolve below 16px, whatever --t-small is
	   later changed to. */
	--t-input:   max(1rem, 16px);               /*    >= 16px  never less      */

	/* Display sizes need tighter leading or the lines stop looking related. */
	--t-leading-tight: 1.15;
	--t-leading-snug:  1.25;
	--t-leading-body:  1.55;
}

/* :root body, not bare body. Global styles emits `body{font-size:var(--wp--preset
   --font-size--medium)}` at specificity (0,0,1) - identical to a bare `body` rule,
   so the winner is decided by stylesheet order, which we do not control. That rule
   silently outranked this one from the day this file was written; it went unnoticed
   only because --t-body and the medium preset were both 1.2rem, so the two agreed
   by coincidence. The moment they disagreed, the preset won. (0,1,1) settles it. */
:root body {
	font-size: var(--t-body);
	line-height: var(--t-leading-body);
}

/* The :root prefix is mandatory, not stylistic. Heading sizes were removed from
   user global styles (post 2847), but the THEME's own theme.json still declares
   them, and WordPress emits those as `:root :where(h1){...}` - specificity
   (0,1,0). A bare `h1{...}` is (0,0,1) and would lose every time, silently. The
   theme file is third-party, so we cannot delete its declarations; we outrank
   them at (0,1,1) instead, which is still low enough to be overridden by a
   single class further down this file. */
:root h1 { font-size: var(--t-display); line-height: var(--t-leading-tight); }
:root h2 { font-size: var(--t-title);   line-height: var(--t-leading-tight); }
:root h3 { font-size: var(--t-section); line-height: var(--t-leading-snug); }
:root h4 { font-size: var(--t-sub);     line-height: var(--t-leading-snug); }

/* h5 and .t-lead share a size on purpose - they never meet in the same context,
   and prising them apart would push h5 down into body text. */
:root h5,
:root h6 { font-size: var(--t-minor); line-height: var(--t-leading-snug); }

/* ---------------------------------------------------------------------------
   The three classes. Deliberately three: every additional one is a chance for
   the system to drift back into per-component sizing.
   --------------------------------------------------------------------------- */

/* These carry :root for the same arithmetic reason the headings do, one rung up.
   A bare `.t-title` is (0,1,0) and would LOSE to `:root h1` at (0,1,1) - so
   putting .t-title on an h1 would do nothing at all, which is exactly the silent
   failure this system exists to avoid. `:root .t-title` is (0,2,0) and wins
   outright, without depending on source order. */

/* Page titles stay semantic h1 - one per page, as SEO and screen readers expect -
   and opt out of the hero size. Hero h1s keep --t-display by default.

   This has its OWN rung (--t-page), not --t-title. The first version reused the h2
   size, which looked reasonable in the abstract and was wrong in practice: on
   /policies the page title "Policies" and the section heading "Privacy Policy"
   both landed on 48px, leaving the page title with no visual rank at all. A page
   title has to outrank the sections beneath it. */
:root .t-title {
	font-size: var(--t-page);
	line-height: var(--t-leading-tight);
}

/* Large body - a lead paragraph. One step above body, NOT a small heading.
   This was aliased to --t-minor (h5's 21-24px) and used as a card-title size,
   which made it 1.5x body and far too heavy for the section bylines it is meant
   for. It is now a genuine body tier: 16 -> 18 -> the h5 rung is a real gap. */
:root .t-lead {
	font-size: var(--t-lead);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Hero byline pair. These two carry COLOUR as well as size, unlike every other
   class here - the tier is defined by both, and splitting them would mean the
   two hero pages could drift apart on one axis while agreeing on the other,
   which is exactly what happened before: the home byline was preset white and
   the pricing byline had no colour at all, so they never matched.

   byline1 (.t-hero-lead)  the promise. Off-white, one step under pure white so
                           it sits below the headline without going grey.
   byline2 (.t-hero-sub)   the credit line. Smaller and visibly less contrasty,
                           so it reads as a footnote to byline1, not a rival.
   --------------------------------------------------------------------------- */
:root .t-hero-lead {
	font-size: var(--t-hero-lead);
	line-height: 1.5;
	color: #e4e4e7;
}

:root .t-hero-sub {
	font-size: var(--t-hero-sub);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-medium);
}

:root .t-small {
	font-size: var(--t-small);
	line-height: var(--t-leading-body);
}

:root .t-meta {
	font-size: var(--t-meta);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Buttons. No bold, same as headings - hierarchy comes from size, colour and
   the button's own fill, not from weight.

   The site-wide source of the bold was the THEME's theme.json, which ships
   `elements.button` at fontWeight 600 and emits it as
   `:root :where(.wp-element-button, .wp-block-button__link)` - specificity
   (0,1,0). That single declaration covered every CTA, "See pricing", the Demo
   button and every EDD button. We cannot edit a third-party theme file, so we
   outrank it at (0,1,1), exactly as with the headings.

   Component stylesheets (newsletter, cookie prompt) had their own 500/600
   declarations; those were removed at source so this is the only place button
   weight is decided.
   --------------------------------------------------------------------------- */
:root .wp-element-button,
:root .wp-block-button__link,
:root button,
:root input[type="submit"],
:root input[type="button"] {
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Chrome. Header and footer navigation are not content, so they do not take a
   content class - but they still need a size from somewhere.

   They used to get one from theme.json's `core/navigation` pin. That pin is
   emitted into the page source and is visible in curl output, yet it is NOT
   present in the browser's loaded stylesheets - verified after a cache-busted
   reload - so the nav was inheriting body size (19.2px) instead of the 14.4px
   the pin claims. Rather than depend on a third-party pin that demonstrably
   does not survive to the browser, we size it here. That is the whole point of
   this file: one place, no invisible upstream dependencies.
   --------------------------------------------------------------------------- */
/* Body size. The nav sat at 14px for years because it inherited a hand-typed
   0.88rem, not because 14 was chosen - and at 16 it reads as a peer of the page
   content rather than as fine print. Applies to all six nav blocks, three in the
   header and three in the footer. */
:root .wp-block-navigation {
	font-size: var(--t-body);
}

/* ---------------------------------------------------------------------------
   Form controls - the anti-zoom floor.

   Every text-entry control on the site, listed by type rather than as a
   :not() chain so the intent stays readable: buttons, checkboxes, radios and
   file pickers are excluded on purpose - they take no typed input and sizing
   them here would fight the theme's button styles.

   The :root prefix is not decoration. These are element selectors, so a single
   class from EDD checkout, PeepSo or a form plugin would outrank them and the
   floor would silently fail on exactly the forms that matter most. :root lifts
   the specificity to (0,1,1) - enough to win without reaching for !important,
   which rule 1 above exists to prevent.
   --------------------------------------------------------------------------- */
:root input:not([type]),
:root input[type="text"],
:root input[type="email"],
:root input[type="password"],
:root input[type="search"],
:root input[type="url"],
:root input[type="tel"],
:root input[type="number"],
:root input[type="date"],
:root input[type="datetime-local"],
:root input[type="month"],
:root input[type="time"],
:root input[type="week"],
:root textarea,
:root select {
	font-size: var(--t-input);
}