/**
 * Bonza. Article detail template styling (ClickUp 86eyt9pb9).
 *
 * Config investigated: no site-wide 8-slot Customizer palette or global
 * heading/body font family yet (same gap health-hub.css/footer.css hit),
 * so colours and fonts are local `var(--ad-*, <hex>)` custom properties,
 * matching this repo's established pattern for that gap.
 *
 * Figma: cY9QX6IwGVaaGI4r7J2RRF, desktop 1512 node 34958:50546, tablet
 * 744 node 34958:69529, mobile 428 node 34958:87785. All three viewport
 * screenshots downloaded and read visually before writing this file.
 * Colours/fonts extracted from the node data (Kobe1.1 body/links,
 * Nominee Heavy Extended 900 headings, #F8EDE3 cream / #2E2A2A ink /
 * #247B4E green, same token set as homepage.css's --bhp-* custom
 * properties).
 *
 * Responsive behaviour confirmed from the screenshots: desktop shows a
 * true two-column layout (312px TOC sidebar + reading column). Both
 * tablet and mobile collapse to a single stacked column, TOC first
 * (both show the TOC's numbered list expanded in Figma, not collapsed;
 * the collapse toggle is a runtime interaction affordance, not a
 * mobile-only design difference).
 *
 * Scope note: this file styles the reusable TEMPLATE CHROME (breadcrumb,
 * H1, byline bar, hero image, two-column layout, TOC sidebar, and the
 * seven recurring content-block styles: At A Glance / Key Insight / Key
 * Takeaways / Inline CTA / Primary Product CTA / Email Capture / Author
 * Bio). The example article's bespoke one-off graphics (the recovery-
 * timeline table, the microflora bar chart, the gut-organ donut diagram,
 * the FAQ accordion, the related-resources cards) are demo CONTENT for
 * that specific article, built with native WordPress blocks (table,
 * columns, image, etc.) by whoever writes the article, not template
 * code -- consistent with the task's own requirement that body content
 * stay editable via the normal block editor. Flagged explicitly, not
 * silently dropped: see the ClickUp comment on this task for the full
 * reasoning.
 */

.bnz-ad {
	--ad-cream: var(--wp--preset--color--bhp-cream, #F8EDE3);
	--ad-green: var(--wp--preset--color--bhp-green, #247B4E);
	--ad-ink: var(--wp--preset--color--bhp-ink, #2E2A2A); /* 12.30:1 on cream / 14.18:1 on white (WCAG AA/AAA) */
	--ad-white: var(--wp--preset--color--bhp-white, #FFFFFF);
	--ad-amber-bg: rgba(243, 171, 71, 0.13);
	--ad-amber-border: #FFA825;
	--ad-purple-bg: rgba(107, 94, 129, 0.07);
	--ad-purple-border: #6B5E81;
	--ad-purple-border-alt: #6E5D84;
	--ad-green-bg: rgba(63, 121, 81, 0.07);
	--ad-hairline: rgba(46, 42, 42, 0.11); /* 86eyv0k44 GL-05: decimal-rgb ink hairline, was rgba(73,69,69,.11) for the old #494545 */
	--ad-inline-cta-bg: var(--wp--preset--color--bhp-cream-alt, #F6EDE3);

	--ad-heading-font: var(--wp--preset--font-family--bhp-heading, "Nominee", var(--theme-headings-font-family, var(--theme-font-family, sans-serif)));
	--ad-body-font: var(--wp--preset--font-family--bhp-body, "Kobe1.1", var(--theme-font-family, sans-serif));

	background: var(--ad-cream);
}

/* ---- Content Sheet wrapper ---------------------------------------- */

.bnz-ad__sheet {
	padding: 64px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	background: var(--ad-cream);
}

.bnz-ad__header-block {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ---- Breadcrumb ----------------------------------------------------- */

.bnz-ad__breadcrumb,
.bnz-ad__breadcrumb p {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	align-items: center;
	gap: 4px;
	font-family: var(--ad-body-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 16px;
	color: var(--ad-ink);
	margin: 0;
}

.bnz-ad__breadcrumb a {
	color: var(--ad-ink);
	text-decoration: none;
	white-space: nowrap;
}

.bnz-ad__breadcrumb a:hover,
.bnz-ad__breadcrumb a:focus-visible {
	text-decoration: underline;
}

.bnz-ad__breadcrumb .breadcrumb_last {
	color: var(--ad-green);
	white-space: nowrap;
}

/* ---- H1 --------------------------------------------------------------- */

.bnz-ad__title {
	font-family: var(--ad-heading-font);
	font-weight: 900;
	font-size: 48px;
	line-height: 48px;
	text-transform: uppercase;
	color: var(--ad-ink);
	margin: 0;
}

/* ---- Byline bar --------------------------------------------------------- */

.bnz-ad__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 0;
	border-top: 1px solid var(--ad-hairline);
	border-bottom: 1px solid var(--ad-hairline);
}

.bnz-ad__byline-item {
	font-family: var(--ad-body-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--ad-ink);
	margin: 0;
}

.bnz-ad__byline-item--reviewed {
	color: var(--ad-green);
}

/* ---- Hero image -------------------------------------------------------- */

.bnz-ad__hero {
	width: 100%;
	height: 480px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--ad-hairline);
	display: block;
}

/* ---- Main columns -------------------------------------------------------- */

.bnz-ad__columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 64px;
}

/* ---- TOC sidebar ("contents blog" component) ---------------------------- */

.bnz-ad-toc {
	width: 312px;
	flex: 0 0 312px;
	align-self: flex-start;
	background: var(--ad-white);
	border-radius: 12px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 24px;
}

.bnz-ad-toc__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--ad-heading-font);
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ad-ink);
}

.bnz-ad-toc__toggle svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.bnz-ad-toc[data-open="false"] .bnz-ad-toc__toggle svg {
	transform: rotate(180deg);
}

.bnz-ad-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bnz-ad-toc[data-open="false"] .bnz-ad-toc__list {
	display: none;
}

.bnz-ad-toc__item {
	border-left: 2px solid transparent;
}

.bnz-ad-toc__item a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0 4px 8px;
	text-decoration: none;
	font-family: var(--ad-body-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--ad-ink);
}

.bnz-ad-toc__item .bnz-ad-toc__num {
	color: var(--ad-ink);
}

.bnz-ad-toc__item.is-active {
	border-left-color: var(--ad-green);
}

.bnz-ad-toc__item.is-active a,
.bnz-ad-toc__item.is-active .bnz-ad-toc__num {
	color: var(--ad-green);
}

/* ---- Reading column ------------------------------------------------------ */

.bnz-ad-reading {
	/* Normal block flow, NOT flex: the Figma 64px gap in the "Reading
	   Column" frame sits between top-level SECTIONS (each starting with
	   an H2), not between every consecutive block a real author writes
	   (e.g. two paragraphs in a row). A flex column with a uniform gap
	   put 64px between every single child regardless of type, which
	   both broke normal paragraph spacing and made floated images
	   (alignleft/alignright, ignored by flex children) stop wrapping
	   text. Block flow + margin on the elements that actually start a
	   new section (H2, the seven recurring content-block styles) gives
	   the same visual rhythm without breaking ordinary body content. */
	flex: 1 1 480px;
	min-width: 0;
}

.bnz-ad-reading h2 {
	font-family: var(--ad-heading-font);
	font-weight: 900;
	text-transform: uppercase;
	color: var(--ad-ink);
	margin-top: 64px;
	margin-bottom: 24px;
}

/* In-content H3 (86eyt9pb9): Figma health-hub article frame 34958:50546
   sets sub-headings at 30px / 36px line-height, Nominee 900, uppercase.
   Without this rule they fell to the theme default (30px / 45px, 700,
   no case change). */
.bnz-ad-reading h3 {
	font-family: var(--ad-heading-font);
	font-size: 30px;
	line-height: 36px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--ad-ink);
}

.bnz-ad-reading .is-style-bnz-at-a-glance,
.bnz-ad-reading .is-style-bnz-key-insight,
.bnz-ad-reading .is-style-bnz-key-takeaways,
.bnz-ad-reading .is-style-bnz-inline-cta,
.bnz-ad-reading .is-style-bnz-primary-product-cta,
.bnz-ad-reading .is-style-bnz-email-capture,
.bnz-ad-reading .is-style-bnz-author-bio {
	margin-top: 32px;
	margin-bottom: 32px;
}

/* Same (0,2,0) specificity as the style-block rule above, so this MUST
   stay below it in source order: an article whose very first block is
   one of the seven recurring styles still needs a 0 top margin, not
   the style's own 32px. */
.bnz-ad-reading > *:first-child,
.bnz-ad-reading h2:first-child {
	margin-top: 0;
}

/* Anchor targets sit slightly above the heading so a fixed admin bar /
   sticky header (if one is ever added) never covers the heading text
   after a TOC jump. */
.bnz-ad-reading h2[id],
.bnz-ad-reading h3[id] {
	scroll-margin-top: 24px;
}

/* ---- Recurring content-block styles (block-editor group/color classes) -- */

.bnz-ad-reading .is-style-bnz-at-a-glance,
.bnz-ad-reading .is-style-bnz-key-insight,
.bnz-ad-reading .is-style-bnz-key-takeaways {
	padding: 24px;
	border-radius: 6px;
	border-top: 3px solid transparent;
}

.bnz-ad-reading .is-style-bnz-at-a-glance {
	background: var(--ad-amber-bg);
	border-top-color: var(--ad-amber-border);
}

.bnz-ad-reading .is-style-bnz-key-insight {
	background: var(--ad-purple-bg);
	border-top-color: var(--ad-purple-border);
}

.bnz-ad-reading .is-style-bnz-key-takeaways {
	background: var(--ad-green-bg);
	border-top-color: var(--ad-green);
}

.bnz-ad-reading .is-style-bnz-inline-cta {
	padding: 32px;
	border-radius: 8px;
	background: var(--ad-inline-cta-bg);
	border: 1px solid var(--ad-hairline);
}

.bnz-ad-reading .is-style-bnz-primary-product-cta {
	padding: 40px;
	border-radius: 12px;
	background: var(--ad-green);
	color: var(--ad-white);
}

.bnz-ad-reading .is-style-bnz-primary-product-cta * {
	color: inherit;
}

.bnz-ad-reading .is-style-bnz-email-capture {
	padding: 32px;
	border-radius: 8px;
	background: var(--ad-purple-bg);
	border-top: 3px solid var(--ad-purple-border-alt);
}

.bnz-ad-reading .is-style-bnz-author-bio {
	padding: 24px;
	border-radius: 8px;
	background: var(--ad-green-bg);
	border-top: 3px solid var(--ad-green);
	display: flex;
	align-items: center;
	gap: 20px;
}

.bnz-ad-reading .is-style-bnz-author-bio img {
	border-radius: 50%;
	flex-shrink: 0;
}

/* ---- Responsive ----------------------------------------------------------
   Tablet (744) and mobile (428) Figma frames both collapse the two-column
   layout to a single stack, TOC first, reading column below. */

@media (max-width: 1024px) {
	.bnz-ad__sheet {
		padding: 40px 24px;
	}

	.bnz-ad__title {
		font-size: 36px;
		line-height: 38px;
	}

	.bnz-ad__hero {
		height: 320px;
	}

	.bnz-ad__columns {
		flex-direction: column;
		gap: 32px;
	}

	.bnz-ad-toc {
		width: 100%;
		flex: 1 1 100%;
		position: static;
	}
}

@media (max-width: 428px) {
	.bnz-ad__sheet {
		padding: 24px 16px;
	}

	.bnz-ad__title {
		font-size: 28px;
		line-height: 30px;
	}

	.bnz-ad__hero {
		height: 200px;
	}

	.bnz-ad__byline {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* ---- Reading column, narrow-viewport containment ----------------------- */

/*
 * 86eyt9pb9 parity audit: measured live at 320px, `.bnz-ad-reading` rendered
 * 352px inside a 288px parent, and 297 of its descendants overhung the page.
 * `.bnz-ad__columns` is a wrap-enabled flex container; below 1024px it turns
 * `column`, and in that direction `flex-wrap: wrap` sizes the flex LINE from
 * its widest item rather than from the container, so a single image figure
 * carrying the 352px mobile design width inflated the line and every block in
 * the column stretched to match it. `min-width: 0` on the item does not help,
 * because the item is not the thing being over-sized, the line is.
 * Capping the column at its parent's width fixes it at the one place the
 * measurement points to. Verified by injection at 320, 375 and 425 before
 * being written here: at 320 the column goes 352 to 288 and the overhang
 * count goes 297 to 0, at 375 it goes 352 to 343, and at 425 it is already
 * correct at 393 and is unchanged.
 * Deliberately no table or image rules: the tables scroll correctly on their
 * own once the line stops being over-sized, and writing rules for a symptom
 * that is no longer observable would be guesswork.
 */
.bnz-ad-reading {
	max-width: 100%;
}

/* ---- Inline links in body copy ---------------------------------------- */

/*
 * 86eyt9pb9, Vita 3 Sep, and the same global rule on 86eypb6ny: inline links
 * inside body copy need an explicit underline, because Primary Green on Ink
 * measures 1.81:1 and WCAG 1.4.1 wants 3:1 when colour alone distinguishes a
 * link from the text around it.
 * Measured before writing this: the reading column's inline links were
 * rendering rgb(40, 114, 250), the browser's default link blue, with
 * `text-decoration: none` and no rule of their own anywhere in this file. So
 * the colour was wrong as well as the underline being absent.
 * Spec per the ticket: 1px thickness, 2px offset, colour matching the link
 * text. Values are set explicitly rather than left to browser defaults, which
 * is what the ticket asks for. Scoped to the reading column's body copy only,
 * so nav, buttons, cards and breadcrumbs keep their own treatment.
 */
.bnz-ad-reading a:not([class*="wp-block-button"]) {
	color: var(--ad-green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.bnz-ad-reading a:not([class*="wp-block-button"]):hover,
.bnz-ad-reading a:not([class*="wp-block-button"]):focus-visible {
	text-decoration-thickness: 2px;
}

/*
 * Caught by claude[bot] on PR #832, and it was a real regression in the rule
 * directly above. `.bnz-ad-reading a:not([class*="wp-block-button"])` computes
 * to (0,2,1), because the argument inside `:not()` counts toward specificity,
 * which beats `.bnz-ad-reading .is-style-bnz-primary-product-cta *` at (0,2,0).
 * That existing rule is what forces every descendant of the solid-green
 * Primary Product CTA to white. `bnz-primary-product-cta` is registered as a
 * core/group block style, so its contents are free-form editor content and an
 * author can type a plain inline link rather than using a Button block. Such a
 * link was picking up `var(--ad-green)` on a `var(--ad-green)` background:
 * invisible, and the exact opposite of the contrast fix the rule above exists
 * to make.
 * Restoring the inherited white here at (0,3,1) so it wins on specificity
 * rather than on source order, which would break the moment anything is
 * appended to this file. The underline is deliberately kept: the link still
 * needs to be distinguishable from the surrounding copy, and inside this block
 * white-on-green already carries the colour contrast.
 */
.bnz-ad-reading .is-style-bnz-primary-product-cta a:not([class*="wp-block-button"]) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* ---- Byline author (X4) ------------------------------------------------ */

.bnz-ad__byline-item--author {
	flex: 1 1 100%;
}

/* ---- Numbered section headings (X5), same numbers as the contents list ---- */

.bnz-ad-reading {
	counter-reset: bnz-h2;
}

.bnz-ad-reading h2.bnz-ad-numbered {
	counter-increment: bnz-h2;
}

.bnz-ad-reading h2.bnz-ad-numbered::before {
	content: counter(bnz-h2, decimal-leading-zero) ". ";
}


/* ---- Author card (X7) ---------------------------------------------------- */

.bnz-ad-author-card {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	margin: 48px 0 0;
	padding: 32px;
	background: var(--ad-white);
	border: 1px solid var(--ad-hairline);
	border-radius: 16px;
}

.bnz-ad-author-card__photo {
	flex: 0 0 160px;
}

.bnz-ad-author-card__photo img {
	display: block;
	width: 160px;
	height: 160px;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 12px;
}

.bnz-ad-author-card__body {
	min-width: 0;
}

.bnz-ad-author-card__name {
	margin: 0;
	font-family: var(--ad-heading-font);
	font-weight: 900;
	font-size: 24px;
	line-height: 28px;
	text-transform: uppercase;
	color: var(--ad-ink);
}

.bnz-ad-author-card__role {
	margin: 4px 0 0;
	font-family: var(--ad-body-font);
	font-weight: 700;
	font-size: 16px;
	color: var(--ad-green);
}

.bnz-ad-author-card__credential {
	margin: 4px 0 0;
	font-family: var(--ad-body-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--ad-ink);
}

.bnz-ad-author-card__bio {
	margin-top: 16px;
	font-family: var(--ad-body-font);
	font-size: 16px;
	line-height: 24px;
	color: var(--ad-ink);
}

.bnz-ad-author-card__bio p {
	margin: 0 0 12px;
}

.bnz-ad-author-card__bio p:last-child {
	margin-bottom: 0;
}

/* ---- Related Resources (X8) ------------------------------------------------- */

.bnz-ad-related {
	margin-top: 24px;
}

.bnz-ad-related__title {
	margin: 0 0 24px;
	font-family: var(--ad-heading-font);
	font-weight: 900;
	font-size: 32px;
	line-height: 36px;
	text-transform: uppercase;
	color: var(--ad-ink);
}

.bnz-ad-related__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bnz-ad-related__card {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--ad-white);
	border-radius: 16px;
	overflow: hidden;
}

.bnz-ad-related__image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.bnz-ad-related__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px 24px 24px;
}

.bnz-ad-related__card-title {
	margin: 0;
	font-family: var(--ad-heading-font);
	font-weight: 900;
	font-size: 18px;
	line-height: 22px;
	text-transform: uppercase;
}

.bnz-ad-related__card-title a {
	color: var(--ad-ink);
	text-decoration: none;
}

.bnz-ad-related__card-title a:hover,
.bnz-ad-related__card-title a:focus-visible {
	text-decoration: underline;
}

.bnz-ad-related__date {
	margin: 8px 0 0;
	font-family: var(--ad-body-font);
	font-size: 14px;
	color: rgba(46, 42, 42, 0.7);
}

.bnz-ad-related__excerpt {
	margin: 12px 0 0;
	font-family: var(--ad-body-font);
	font-size: 15px;
	line-height: 22px;
	color: var(--ad-ink);
}

.bnz-ad-related__more {
	align-self: flex-start;
	margin-top: auto;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--ad-green);
	font-family: var(--ad-heading-font);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ad-white);
	text-decoration: none;
}

.bnz-ad-related__body .bnz-ad-related__excerpt + .bnz-ad-related__more {
	margin-top: 20px;
}

@media (max-width: 1023px) {
	.bnz-ad-related__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.bnz-ad-author-card {
		flex-direction: column;
		padding: 24px;
	}

	.bnz-ad-author-card__photo,
	.bnz-ad-author-card__photo img {
		width: 100%;
		flex-basis: auto;
	}

	.bnz-ad-author-card__photo img {
		height: 240px;
	}

	.bnz-ad-related__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Product cross-promotion block (X6) ----------------------------------- */

.bnz-ad-promo {
	display: flex;
	gap: 32px;
	align-items: center;
	margin: 48px 0 0;
	padding: 32px;
	background: var(--ad-white);
	border: 1px solid var(--ad-hairline);
	border-radius: 16px;
}

.bnz-ad-promo__image {
	flex: 0 0 220px;
}

.bnz-ad-promo__image img {
	display: block;
	width: 220px;
	height: auto;
	border-radius: 12px;
}

.bnz-ad-promo__body {
	min-width: 0;
}

.bnz-ad-promo__kicker {
	margin: 0;
	font-family: var(--ad-body-font);
	font-weight: 700;
	font-size: 14px;
	color: var(--ad-green);
}

.bnz-ad-promo__name {
	margin: 4px 0 0;
	font-family: var(--ad-heading-font);
	font-weight: 900;
	font-size: 28px;
	line-height: 32px;
	text-transform: uppercase;
	color: var(--ad-ink);
}

.bnz-ad-promo__benefits {
	margin: 16px 0 0;
	padding-left: 20px;
	font-family: var(--ad-body-font);
	font-size: 16px;
	line-height: 24px;
	color: var(--ad-ink);
}

.bnz-ad-promo__price {
	margin: 16px 0 0;
	font-family: var(--ad-body-font);
	font-weight: 700;
	font-size: 20px;
	color: var(--ad-ink);
}

.bnz-ad-promo__cta.button {
	display: inline-block;
	margin-top: 16px;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--ad-green);
	font-family: var(--ad-heading-font);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ad-white);
	text-decoration: none;
}

@media (max-width: 767px) {
	.bnz-ad-promo {
		flex-direction: column;
		align-items: stretch;
		padding: 24px;
	}

	.bnz-ad-promo__image {
		flex-basis: auto;
	}

	.bnz-ad-promo__image img {
		width: 100%;
	}
}

/*
 * X6 follow-up. The reading column's body-link rule (`.bnz-ad-reading a:not(...)`,
 * 0,2,1) outranks `.bnz-ad-promo__cta.button` (0,2,0) and painted the label
 * green on the green button, so "Add to Basket" was invisible. Scoped to the
 * reading column at (0,3,0) so it wins on specificity, not source order.
 */
.bnz-ad-reading .bnz-ad-promo__cta.button,
.bnz-ad-reading .bnz-ad-promo__cta.button:hover,
.bnz-ad-reading .bnz-ad-promo__cta.button:focus-visible {
	color: var(--ad-white);
	text-decoration: none;
}