/* ============================================================================
   Pro Peptide — Type Scale Safety Net
   Enforces DESIGN.md v5 typography on non-Elementor surfaces.
   Loaded late (priority 9999) by pp-type-scale.php from mu-plugins.

   DESIGN SOURCE: DESIGN.md v5 §Typography (sizes + weights are exact).
   LINE-HEIGHTS: not specified in DESIGN.md — conventional values set here.
                 Adjust if you add a line-height spec to DESIGN.md.

   WHY ELEMENT-LEVEL, NO !important: the Naturally theme styles h1–h4/body/buttons
   with element-level specificity (0,0,0,1). This file loads LATER, so at equal
   specificity it wins on cascade order — no !important needed. Elementor's own
   selectors are HIGHER specificity, so Elementor sections are untouched by design
   (they're governed by Elementor Global Fonts). That's the intended boundary.
   ============================================================================ */

:root {
	/* Desktop scale */
	--pp-h1: 40px;  --pp-h2: 32px;  --pp-h3: 24px;  --pp-h4: 20px;
	--pp-body: 17px; --pp-btn: 16px; --pp-nav: 15px;
	--pp-caption: 13px; --pp-footer: 11px;
	--pp-price-card: 17px; --pp-price-detail: 28px;

	/* Weights (DESIGN.md §Weight Assignments) */
	--pp-w-head: 600;   /* H1–H4, buttons, badges, active nav, emphasis */
	--pp-w-nav: 500;    /* default nav links, form labels, captions     */
	--pp-w-text: 500;   /* body copy — Montserrat 400 reads thin (pp-design-system §3) */
	--pp-w-body: 400;   /* fine print / footer disclaimer               */

	/* Line-heights — conventional, NOT from DESIGN.md. Tune as needed. */
	--pp-lh-head: 1.2;
	--pp-lh-body: 1.6;
	--pp-lh-button: 1.2;
	--pp-lh-tight: 1;

	--pp-font: "Montserrat", system-ui, -apple-system, sans-serif;
}

/* --- Headings ----------------------------------------------------------- */
h1 { font: var(--pp-w-head) var(--pp-h1)/var(--pp-lh-head) var(--pp-font); }
h2 { font: var(--pp-w-head) var(--pp-h2)/var(--pp-lh-head) var(--pp-font); }
h3 { font: var(--pp-w-head) var(--pp-h3)/1.3 var(--pp-font); }
h4 { font: var(--pp-w-head) var(--pp-h4)/1.3 var(--pp-font); }

/* --- Body --------------------------------------------------------------- */
body, p, li {
	font-family: var(--pp-font);
	font-size: var(--pp-body);
	font-weight: var(--pp-w-text);
	line-height: var(--pp-lh-body);
}

/* --- Buttons (incl. WooCommerce) ---------------------------------------- */
button,
.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--pp-font);
	font-size: var(--pp-btn);
	font-weight: var(--pp-w-head);
	line-height: var(--pp-lh-button);
}

/* --- WooCommerce surfaces (cart / checkout / account / shop) ------------ *
   Scoped one level deeper than bare elements so these reliably beat the
   theme's woo-general.css on the Woo pages, without resorting to !important. */
.woocommerce h1, .woocommerce-account h1 { font-size: var(--pp-h1); font-weight: var(--pp-w-head); }
.woocommerce h2, .woocommerce-account h2 { font-size: var(--pp-h2); font-weight: var(--pp-w-head); }
.woocommerce h3, .woocommerce-account h3 { font-size: var(--pp-h3); font-weight: var(--pp-w-head); }
.woocommerce table.shop_table,
.woocommerce-account .woocommerce,
.woocommerce form .form-row label,
.woocommerce .cart_totals,
.woocommerce-checkout #payment {
	font-family: var(--pp-font);
	font-size: var(--pp-body);
	font-weight: var(--pp-w-text);
	line-height: var(--pp-lh-body);
}

/* --- Prices (tabular alignment + emphasis) ------------------------------ *
   font-variant-numeric: tabular-nums so price / dose digits are equal-width and
   align in columns (pp-design-system §3, "mandatory"). Weight 600 = emphasis
   (DESIGN.md). Sizes left to existing per-surface rules (card 17px / detail 28px
   are already set in-theme) — this only touches digit metrics + weight. */
.woocommerce-Price-amount,
.pp-shop-list__price {
	font-weight: var(--pp-w-head);
	font-variant-numeric: tabular-nums;
}

/* --- Line-length caps (readability) ------------------------------------- *
   Constrain TEXT ONLY (paragraphs + list items), never the containers — so
   images / tables / embeds inside long-form aren't squeezed. Targets the 60–75ch
   readable band (pp-design-system §3, WCAG 1.4.8). Blog .entry-content has no
   desktop cap today; PDP prose is .ppx-prose. Elementor-built posts won't match
   .entry-content (higher specificity owns them) — harmless no-op there. */
.entry-content > p,
.entry-content > ul li,
.entry-content > ol li { max-width: 65ch; }
.ppx-prose p,
.ppx-prose li { max-width: 60ch; }

/* --- Mobile (DESIGN.md mobile column) ----------------------------------- */
@media (max-width: 768px) {
	:root {
		--pp-h1: 32px; --pp-h2: 24px; --pp-h3: 20px; --pp-h4: 18px;
		--pp-body: 16px; --pp-nav: 14px;
		--pp-price-card: 15px; --pp-price-detail: 24px;
	}
}

/* ----------------------------------------------------------------------------
   NOT handled here (need class hooks or live in Elementor / components):
   - Badges (9–10px), footer disclaimer (10–11px), card/detail prices,
     nav links, captions, Two-Color headings — class-based; add selectors once
     you confirm the live class names with PP_STYLE_AUDIT.js.
   - Anything inside .elementor* — set in Elementor Global Fonts (Step 1).
   - The toolbar select 54px thread — out of scope, left as-is per decision.
   ---------------------------------------------------------------------------- */