/*
 * Meristem — responsive & polish layer.
 * Enqueued AFTER build/index.css (see functions.php). Token-driven only:
 * every value comes from a wp-preset / wp-custom variable defined in theme.json.
 * Scope = mobile-first responsiveness + premium-register polish. No brand hexes.
 */

/* ===========================================================================
 * 1. DISPLAY FONT-SIZE BRIDGE  (critical correctness fix)
 * ---------------------------------------------------------------------------
 * The hand-authored patterns/templates emit `has-2xl|3xl|4xl-font-size`
 * (no hyphen). WordPress, however, kebab-cases digit-led preset slugs, so the
 * generated utility rule is `.has-2-xl|3-xl|4-xl-font-size`. The two never
 * matched, so EVERY display heading fell back to the user-agent default
 * (h1 = 2em/32px, h2 = 1.5em/24px) instead of the intended scale.
 *
 * Bridge the emitted class names to the real preset variables (which are now
 * fluid — see theme.json). This restores the whole type hierarchy in one place
 * without touching pattern markup. The core `.has-*-xl-font-size` rule uses the
 * same vars, so post-title blocks and pattern headings now render identically.
 * ======================================================================== */
.has-4xl-font-size { font-size: var(--wp--preset--font-size--4-xl); }
.has-3xl-font-size { font-size: var(--wp--preset--font-size--3-xl); }
.has-2xl-font-size { font-size: var(--wp--preset--font-size--2-xl); }

/* Display headings tighten their leading as they grow (brand §5.2). */
.has-4xl-font-size,
.has-3xl-font-size {
	line-height: var(--wp--custom--line-height--tight);
	/* Prevent an over-long word from ever forcing a sideways scroll on 320px. */
	overflow-wrap: break-word;
}

/* ===========================================================================
 * 2. HORIZONTAL-OVERFLOW SAFETY NET
 * `clip` (not `hidden`) so it never creates a scroll container that would
 * break the fixed sticky-CTA or sticky nav. Belt-and-suspenders against
 * sub-pixel rounding on narrow phones.
 * ======================================================================== */
html {
	overflow-x: clip;
}

/* Media never pushes the layout wider than its column. */
img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* ===========================================================================
 * 2b. ELIGIBILITY NOTICE  (education page, ?eligibility=required)
 * Shown when a logged-out visitor is redirected from a gated product to its
 * education page. Reads as a calm callout, not an error, above the article.
 * ======================================================================== */
.pwp-eligibility-notice {
	margin: 0 0 var(--wp--preset--spacing--6, 1.5rem);
	padding: var(--wp--preset--spacing--4, 1rem) var(--wp--preset--spacing--6, 1.5rem);
	border: 1px solid var(--wp--preset--color--neutral-300, #d8ccba);
	border-left-width: 4px;
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--surface-sage, #e9ede2);
}

.pwp-eligibility-notice > :first-child {
	margin-top: 0;
}

.pwp-eligibility-notice > :last-child {
	margin-bottom: 0;
}

/* ===========================================================================
 * 2c. PLAN PREVIEW  (/plan/ — customer-selected tailored plan, pending review)
 * ======================================================================== */
.pwp-plan {
	margin: var(--wp--preset--spacing--6, 1.5rem) 0;
	padding: var(--wp--preset--spacing--6, 1.5rem);
	border: 1px solid var(--wp--preset--color--neutral-300, #d8ccba);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--neutral-100, #f4eee4);
}

.pwp-plan__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: var(--wp--preset--spacing--4, 1rem);
}

.pwp-plan__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl, 1.375rem);
}

.pwp-plan__status {
	padding: 0.15rem 0.6rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	font-weight: 600;
	white-space: nowrap;
}

.pwp-plan__price {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
}

.pwp-plan__includes {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
}

.pwp-plan__today {
	font-weight: 600;
}

.pwp-plan__billing {
	margin: var(--wp--preset--spacing--4, 1rem) 0;
	padding: var(--wp--preset--spacing--4, 1rem);
	border: 1px dashed var(--wp--preset--color--neutral-300, #d8ccba);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
}

.pwp-plan__billing-title {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--base, 1rem);
}

.pwp-plan__billing-options {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.pwp-plan__decision {
	margin: var(--wp--preset--spacing--4, 1rem) 0;
	padding: var(--wp--preset--spacing--4, 1rem);
	border-left: 4px solid var(--wp--preset--color--neutral-300, #d8ccba);
	background: var(--wp--preset--color--surface-card, #ffffff);
}

.pwp-plan__decision p {
	margin: 0;
}

.pwp-plan__eta {
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	opacity: 0.8;
}

.pwp-plan__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pwp-plan__list-item a {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0.25rem;
	border-bottom: 1px solid var(--wp--preset--color--neutral-200, #eae1d3);
	text-decoration: none;
	color: inherit;
}

.pwp-plan__list-item a:hover .pwp-plan__list-name,
.pwp-plan__list-item a:focus .pwp-plan__list-name {
	text-decoration: underline;
}

.pwp-plan__list-price {
	white-space: nowrap;
	font-weight: 600;
}

/* Two-column plan preview on desktop (G2). The DOM order is preserved so the
 * mobile single-column card is untouched; grid-template-areas reflow the flat
 * card into a full-width header, then summary + price + CTA on the left and the
 * monthly kit itemisation on the right. The page's content column widens so the
 * card has room, and the h1, intro and card share one left edge. */
@media (min-width: 782px) {
	.pwp-plan-page {
		--wp--style--global--content-size: 52rem;
	}

	.pwp-plan--preview {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"header   header"
			"note     note"
			"summary  kit"
			"decision kit"
			"research kit"
			"cta      kit"
			"eta      kit";
		column-gap: var(--wp--preset--spacing--8);
		align-items: start;
	}

	.pwp-plan--preview > .pwp-plan__header {
		grid-area: header;
	}

	.pwp-plan--preview > .pwp-plan__quiz-note {
		grid-area: note;
	}

	.pwp-plan--preview > .pwp-plan__math {
		grid-area: summary;
	}

	.pwp-plan--preview > .pwp-plan__billing {
		grid-area: kit;
		margin: 0;
	}

	.pwp-plan--preview > .pwp-plan__decision {
		grid-area: decision;
	}

	.pwp-plan--preview > .pwp-plan__research {
		grid-area: research;
	}

	.pwp-plan--preview > .pwp-plan__cta {
		grid-area: cta;
	}

	.pwp-plan--preview > .pwp-plan__eta {
		grid-area: eta;
	}
}

/* ===========================================================================
 * 2d. TREATMENT PLAN GUIDE  (my-account + printable kit insert)
 * ======================================================================== */
.pwp-guide {
	margin: var(--wp--preset--spacing--4, 1rem) 0;
	padding: var(--wp--preset--spacing--6, 1.5rem);
	border: 1px solid var(--wp--preset--color--neutral-300, #d8ccba);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--surface-card, #ffffff);
}

.pwp-guide__title {
	margin: 0 0 0.25rem;
}

.pwp-guide__meta {
	margin: 0 0 var(--wp--preset--spacing--4, 1rem);
	font-size: var(--wp--preset--font-size--sm, 0.9375rem);
	opacity: 0.8;
}

.pwp-guide__section {
	margin: 0 0 var(--wp--preset--spacing--4, 1rem);
}

.pwp-guide__section h4 {
	margin: 0 0 0.4rem;
}

.pwp-guide__section ul {
	margin: 0;
	padding-left: 1.25rem;
}

.pwp-guide__disclosure {
	margin-top: var(--wp--preset--spacing--4, 1rem);
	padding-top: var(--wp--preset--spacing--4, 1rem);
	border-top: 1px solid var(--wp--preset--color--neutral-200, #eae1d3);
	opacity: 0.85;
}

/* Print: the guide becomes the kit insert / plan card master. Only the guide
 * prints; site chrome, nav, and account UI disappear. */
@media print {
	body * {
		visibility: hidden;
	}

	.pwp-guide,
	.pwp-guide * {
		visibility: visible;
	}

	.pwp-guide {
		position: absolute;
		inset: 0 auto auto 0;
		width: 100%;
		border: 0;
		padding: 0;
	}

	.pwp-guide__print {
		display: none;
	}
}

/* Compact plan box appended to peptide education pages. */
.pwp-plan-box {
	margin: var(--wp--preset--spacing--6, 1.5rem) 0 0;
	padding: var(--wp--preset--spacing--4, 1rem) var(--wp--preset--spacing--6, 1.5rem);
	border: 1px solid var(--wp--preset--color--neutral-300, #d8ccba);
	border-radius: var(--wp--custom--radius--md, 0.5rem);
	background: var(--wp--preset--color--neutral-100, #f4eee4);
}

.pwp-plan-box p {
	margin: 0 0 0.35rem;
}

.pwp-plan-box p:last-child {
	margin-bottom: 0;
}

/* ===========================================================================
 * 3. STICKY QUALIFICATION CTA  (single peptide pages)
 * The bar is position:fixed full-bleed with the button flush right — exactly
 * where the plugin Support widget floats (bottom-right, ~109px). On wider
 * screens, inset the bar's right edge so the button clears the widget instead
 * of being hidden behind it. Also lift the content reservation so the taller
 * two-line mobile bar never covers the last of the disclaimer.
 * ======================================================================== */
@media (min-width: 782px) {
	.pwp-sticky-cta {
		/* Bar stays full-bleed, but its content is held to the site's wide
		   measure so the note and button never drift to the far screen edge
		   (audit G7). The right side keeps at least the 7.5rem the floating
		   Support widget needs. */
		padding-left: max(var(--wp--preset--spacing--4), calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2));
		padding-right: max(7.5rem, calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2));
	}
}

.pwp-has-sticky-cta {
	/* Mobile bar is ~140px tall (two-line note + button); reserve enough room. */
	padding-bottom: var(--wp--preset--spacing--14);
}

@media (min-width: 782px) {
	.pwp-has-sticky-cta {
		padding-bottom: var(--wp--preset--spacing--12);
	}
}

/* ===========================================================================
 * 4. TAP TARGETS  (mobile ergonomics — 44px min per WCAG 2.5.5)
 * The header CTA, nav toggle, and in-flow buttons already clear 44px via
 * padding. On phones, give the smaller "Read more →" section links a real
 * hit area too. Scoped to touch widths so desktop link rhythm is untouched.
 * ======================================================================== */
@media (max-width: 781px) {
	.pwp-link-accent a,
	.pwp-link-inverse a {
		display: inline-block;
		min-height: 44px;
		padding-block: var(--wp--preset--spacing--2);
	}
}

/* The hamburger toggle needs a comfortable hit area (mobile-only element). */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
}

/* Open mobile menu: give each link a full-width, thumb-friendly tap row. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	display: block;
	padding-block: var(--wp--preset--spacing--2);
}

/* ===========================================================================
 * 5. MOBILE HEADER — keep logo + nav toggle + CTA on a single row
 * The added root-padding gutters narrow the header; the 160px logo then forced
 * the controls to wrap onto a second row. Cap the logo at the brand-minimum
 * lockup width (120px, §3.3) on phones and tighten the nav↔CTA gap so the row
 * fits at 360–390px.
 * ======================================================================== */
@media (max-width: 781px) {
	.pwp-header .pwp-logo svg {
		width: min(7.5rem, 40vw); /* == 120px brand-minimum from ~300px up */
	}

	/* Tighten every header flex gap (logo↔controls and nav↔CTA) so the row fits. */
	.pwp-header .wp-block-group {
		gap: var(--wp--preset--spacing--3);
	}

	/* Trim the header CTA's horizontal padding so it stays compact on phones. */
	.pwp-header .wp-block-button__link {
		padding-inline: var(--wp--preset--spacing--4);
	}
}

/* ===========================================================================
 * 6. SMALL-SCREEN COMPOSITION POLISH
 * Keep columns readable when they stack, and give stacked cards real breathing
 * room so the premium register survives on a 390px phone.
 * ======================================================================== */
@media (max-width: 781px) {
	/* WP stacks columns on mobile; restore a comfortable gap between the
	   now-stacked cards / steps instead of the desktop column gutter collapsing
	   to nothing. */
	.wp-block-columns.is-layout-flex {
		gap: var(--wp--preset--spacing--6);
	}

	/* The two-up catalog (product card + waitlist) reads better as full-width
	   stacked cards with clear separation. */
	.pwp-card--waitlist {
		margin-top: var(--wp--preset--spacing--2);
	}
}

/* ===========================================================================
 * 7. LANDING PAGES — suppress the redundant page-title heading
 * Campaign landers (patterns/lp-*.php, all wrapped in .pwp-lp-campaign) are
 * self-contained and render their own hero H1. page.html additionally prints
 * the WordPress post-title, so these pages stacked two 4xl headings (and two
 * H1s — an a11y problem). Scope-hide the post-title to landers only; the
 * pattern hero then stands alone. (Longer-term: give landers a title-less
 * template — reported to the theme owner.)
 * ======================================================================== */
main:has(.pwp-lp-campaign) > .wp-block-post-title {
	display: none;
}

/* page.html wraps content in main.pwp-section, but a lander's own hero/sections
   already own their vertical rhythm — drop the outer section padding so the
   hero is not pushed deep below the fold (doubled padding, worst on mobile). */
main.pwp-section:has(.pwp-lp-campaign) {
	padding-top: 0;
	padding-bottom: 0;
}

/* ===========================================================================
 * 8. EMPTY DISCLOSURE SLOTS
 * The pharmacy-disclosure shortcode renders nothing until the pharmacy
 * agreement is executed, and the per-product disclaimer slot stays empty until
 * counsel approves additions. Hide the empty wrappers so they never render as
 * blank boxes or stray gaps.
 * ======================================================================== */
.wp-block-group.pwp-pharmacy-disclosure:not(:has(p, div, ul, ol)),
.pwp-product-disclaimer__slot:empty {
	display: none;
}


/* A four-program catalog is not a marketplace: hide store furniture the
 * WooCommerce block template ships (sorting, result counts, breadcrumbs).
 * Presentation only; gating never relies on CSS. */
.woocommerce-breadcrumb,
.woocommerce-result-count,
.woocommerce-ordering,
.wp-block-woocommerce-catalog-sorting,
.wc-block-product-results-count,
.wp-block-woocommerce-breadcrumbs {
	display: none;
}

/* ===========================================================================
 * 9a. FAQ PAGE — two-column on desktop (G7)
 * The /faq/ page is a flat list of single-paragraph Q&As. On desktop, widen the
 * reading column and flow the Q&As into two columns so the tall ribbon becomes
 * a scannable two-up; each Q&A stays intact (break-inside: avoid) and the
 * heading + intro span both columns. Mobile stays a single column, unchanged.
 * ======================================================================== */
@media (min-width: 782px) {
	.pwp-faq-page {
		--wp--style--global--content-size: 58rem;
	}

	.pwp-faq-page .wp-block-post-content {
		column-count: 2;
		column-gap: var(--wp--preset--spacing--9);
	}

	.pwp-faq-page .wp-block-post-content > * {
		break-inside: avoid;
	}

	.pwp-faq-page .wp-block-post-content > h2,
	.pwp-faq-page .wp-block-post-content > h2 + p {
		column-span: all;
	}
}

/* ===========================================================================
 * 9d. ABOUT PAGE — provider block as a bordered card on desktop (G7)
 * The named-clinician block (Dr. Avery Collins + the long licensed-states line)
 * sat as plain text in the 680 reading column, adding to the desktop monotony.
 * On desktop, lift it into a bordered card and quiet the long states line.
 * Mobile keeps the plain block, unchanged.
 * ======================================================================== */
@media (min-width: 782px) {
	.pwp-provider {
		margin-top: var(--wp--preset--spacing--6);
		padding: var(--wp--preset--spacing--8);
		border: 1px solid var(--wp--preset--color--neutral-200);
		border-radius: var(--wp--custom--radius--md);
		background: var(--wp--preset--color--surface-card);
	}

	.pwp-provider > :first-child {
		margin-top: 0;
	}

	.pwp-provider > :last-child {
		margin-bottom: 0;
	}

	.pwp-provider__credentials {
		color: var(--wp--preset--color--brand-secondary-deep);
		font-weight: 600;
	}

	.pwp-provider__states {
		font-size: var(--wp--preset--font-size--sm);
		color: var(--wp--preset--color--neutral-600);
	}
}

/* ===========================================================================
 * 9b. MULTI-ITEM GRIDS SURVIVE 600–900px
 * WordPress flex columns are all-or-nothing: multi-column above 781px, single
 * file below. Portrait tablets (768) and large phones therefore drop to a
 * sparse one-up. Re-flow the equal-width column grids inside marketing sections
 * as an auto-fit grid from 600px up, so 600–900px gets a natural two-up while
 * true phones (<600px) keep the current single-column stack, pixel-equivalent.
 * The existing blockGap carries over (gap works in flex and grid alike).
 * ======================================================================== */
@media (min-width: 600px) {
	.pwp-section .wp-block-columns.is-layout-flex {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		align-items: start;
	}
}

/* ===========================================================================
 * 9. WIDE TABLES — scroll inside their own box, never widen the page (G5)
 * The COA sample/lookup tables (5 columns, ~394px min-content) overflowed the
 * viewport at 375/390 on the peptide pages. Making the table a block scroll
 * container keeps it self-contained: the page never scrolls sideways, only the
 * table does. Scoped to the table elements so the section heading never rides
 * the scroll. The post-content guard future-proofs any editorial table.
 * ======================================================================== */
table.pwp-coa-library,
.wp-block-post-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ===========================================================================
 * 10. PEPTIDE ARTICLE — sticky qualify rail on desktop (G7)
 * The single peptide article was a lone 680 prose ribbon. On desktop the prose
 * keeps its reading measure in the left column, and a real qualify CTA + at-a-
 * glance facts sit in a sticky right rail. The rail is desktop-only: on mobile
 * the article is the single prose column and the fixed bottom bar carries the
 * CTA (no duplication). Placed after section 9b so this column-width override
 * wins over the auto-fit rule.
 * ======================================================================== */
.pwp-article-grid__rail {
	display: none;
}

@media (min-width: 782px) {
	.pwp-section .wp-block-columns.pwp-article-grid {
		grid-template-columns: minmax(0, 42rem) minmax(0, 1fr);
		align-items: start;
	}

	/* Quality-facts / COA block spans a wider measure on desktop so the sample
	   certificate table is no longer lost in a 680 column (G7). */
	.pwp-coa-library {
		--wp--style--global--content-size: 52rem;
	}

	.pwp-article-grid__rail {
		display: block;
	}

	.pwp-article-rail {
		position: sticky;
		top: var(--wp--preset--spacing--8);
	}

	.pwp-article-rail__facts {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.pwp-article-rail__facts li {
		position: relative;
		padding: 0.35rem 0 0.35rem 1.5rem;
		font-size: var(--wp--preset--font-size--sm);
		color: var(--wp--preset--color--neutral-700);
	}

	.pwp-article-rail__facts li::before {
		content: "\2713";
		position: absolute;
		left: 0;
		color: var(--wp--preset--color--brand-primary);
		font-weight: 700;
	}
}