/*
 * Article type (template "single", every post; Mode A, D55-D62). Values are live's article 206 as rendered by
 * Elementor + kit 175 + Hello's reset (measured 2026-11-05 at 1440/390, PLAYBOOK R3): spacing between blocks =
 * the container gap plus each block's own top margin; every paragraph keeps Hello's 0.9rem bottom margin.
 * Tokens where live uses a token; live-only values are marked "accidental" (AGENT-BRIEF §5, D21).
 * Breakpoints as live: tablet <= 1024px, phone <= 767px.
 */

/* ---------- Base ---------- */

.bpb-article {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6em;
	color: var(--wp--preset--color--body-text);
}

/* Core's flow layout adds a block gap between siblings; here spacing is set per element below. */
.bpb-article > *,
.bpb-article .bpb-a-hero *,
.bpb-article .bpb-a-body * {
	margin-block: 0;
}

.bpb-article .bpb-a-hero p,
.bpb-article .bpb-a-body p {
	margin-bottom: 0.9rem;
}

.bpb-article a {
	color: var(--wp--preset--color--action);
	text-decoration: none;
}

.bpb-article a:hover {
	color: var(--wp--custom--legacy--color--action-hover);
}

/* Links inside running text are underlined, so they do not rely on colour alone (axe link-in-text-block,
   Lighthouse 96 -> 100 on the article, 2026-11-10). Buttons, cards and arrow links have classes and keep their look. */
.bpb-article .bpb-a-body :is(p, li) > a:not([class]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.bpb-article :is(h1, h2, h3) {
	font-weight: 700;
	color: var(--wp--preset--color--heading);
}

/* ---------- Hero (built by the template: breadcrumb, title, excerpt, byline) ---------- */

.bpb-article .bpb-a-hero {
	padding: 48px max(20px, (100% - 1200px) / 2);
}

.bpb-article .bpb-a-hero-text {
	display: flex;
	flex-direction: column;
	width: 58%;
}

.bpb-article .bpb-a-hero .bpb-breadcrumb p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.bpb-article .bpb-a-hero .bpb-breadcrumb a {
	color: var(--wp--preset--color--action);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.bpb-article .bpb-a-hero .bpb-crumb-sep {
	margin: 0;
}

.bpb-article .bpb-a-title {
	margin-top: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--page-title);
	line-height: 1.08em;
}

.bpb-article .bpb-a-hero .bpb-lede {
	margin-top: 14px;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6em; /* em lengths, as live: Chrome rounds them differently from unitless values (1/64 px) */
}

.bpb-article .bpb-a-hero .bpb-byline {
	margin-top: 14px;
}

/* ---------- Sections ---------- */

.bpb-article .bpb-a-sec {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 56px max(20px, (100% - 1200px) / 2) 0;
}

.bpb-article .bpb-a-sec:first-child {
	padding-top: 40px;
}

.bpb-article .bpb-a-sec:last-child {
	padding-top: 40px;
	padding-bottom: 64px;
}

.bpb-article .bpb-a-sec > h2,
.bpb-article .bpb-split-main > h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--section-title);
	line-height: 1.15em;
}

.bpb-article .bpb-a-body h3 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25em;
}

.bpb-article .bpb-a-sec > h3 {
	margin-top: 8px;
}

.bpb-article .bpb-a-sec > .wp-block-table + h3 {
	margin-top: 18px;
}

.bpb-article .bpb-a-sec > .wp-block-table + p {
	margin-top: 12px;
}

.bpb-article .bpb-a-body ul {
	padding-left: 40px;
}

/* ---------- Tables (Hello's reset values; accidental, Mode A only) ---------- */

.bpb-article .bpb-table {
	overflow-x: visible;
}

.bpb-article .bpb-table table {
	width: 100%;
	margin-bottom: 15px;
	border-collapse: collapse;
	font-size: 0.9em;
}

.bpb-article .bpb-table thead {
	border-bottom: 0;
}

.bpb-article .bpb-table :is(th, td) {
	padding: 15px;
	border: 1px solid hsla(0, 0%, 50%, 0.502);
	line-height: 1.5;
	vertical-align: top;
}

.bpb-article .bpb-table th {
	font-weight: 700;
	text-align: center;
}

.bpb-article .bpb-table tbody > tr:nth-child(odd) > td {
	background-color: hsla(0, 0%, 50%, 0.071);
}

/* ---------- Cards ---------- */

.bpb-article .bpb-fact-card {
	display: flex;
	flex-direction: column;
	padding: 24px 28px 16px;
	border-radius: var(--wp--custom--radius--card);
}

.bpb-article .bpb-fact-card > h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25em;
}

.bpb-article .bpb-fact-card > ul {
	margin-top: 8px;
}

.bpb-article .bpb-fact-card > ul > li:last-child {
	margin-bottom: 0;
}

/* Stats: number + label. */
.bpb-article .bpb-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.bpb-article .bpb-stat {
	display: flex;
	flex-direction: column;
	width: 23.5%;
	padding: 20px;
	border-radius: var(--wp--custom--radius--card);
}

.bpb-article .bpb-stat > .bpb-stat-num {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--section-title);
	font-weight: 700;
	line-height: 1.15em;
	color: var(--wp--preset--color--action);
}

.bpb-article .bpb-stat > .bpb-stat-num + p {
	margin-top: 4px;
}

/* Feature cards: icon, title, text, optional link. */
.bpb-article .bpb-features {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.bpb-article .bpb-features > .bpb-fact-card {
	width: 31.5%;
	padding: 22px;
}

.bpb-article .bpb-features > .bpb-fact-card > h3 {
	margin-top: 10px;
}

.bpb-article .bpb-features > .bpb-fact-card > h3 + p {
	margin-top: 6px;
}

.bpb-article .bpb-features > .bpb-fact-card > .is-style-bpb-arrow {
	margin-top: 8px;
}

/* Icon (bpb/icon): same boxes as live's .bp-ico (26px box, 20px glyph; 18px box in link cards). */
.bpb-article .bpb-icon-box {
	display: inline-flex;
	width: 26px;
	height: 26px;
	line-height: 0;
	color: var(--wp--preset--color--action);
}

.bpb-article .bpb-icon-box svg {
	display: block;
	width: 20px;
	height: 20px;
}

.bpb-article .bpb-card-link .bpb-icon-box {
	width: 18px;
	height: 18px;
}

/* Text link with an arrow (paragraph style "Arrow link"): live's text buttons. */
.bpb-article p.is-style-bpb-arrow {
	margin-bottom: 0;
}

.bpb-article .is-style-bpb-arrow a {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 4px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1em;
	text-align: center; /* as live's button text when the link wraps */
}

.bpb-article .is-style-bpb-arrow a::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-solid.svg") center / contain no-repeat;
	mask: url("../icons/arrow-solid.svg") center / contain no-repeat;
}

/* Text + link on one line. */
.bpb-article .bpb-inline-cta {
	display: flex;
	gap: 14px;
	align-items: center;
}

/* ---------- FAQ + related guides ---------- */

.bpb-article .bpb-split {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}

.bpb-article .bpb-split-main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 58%;
}

.bpb-article .bpb-split-side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 38%;
}

.bpb-article .bpb-split-side > h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25em;
}

/* FAQ (core/details, class bpb-faq-item): live's accordion. The question sits in span.bpb-faq-q (added when the
   block is printed) so the title keeps live's line box: a 28px strut around 18px text. */
.bpb-article .bpb-a-faq .bpb-faq-item {
	margin: 0;
	border: 1px solid var(--wp--preset--color--border);
}

.bpb-article .bpb-a-faq .bpb-faq-item + .bpb-faq-item {
	border-top: 0;
}

.bpb-article .bpb-a-faq .bpb-faq-item > summary {
	display: block;
	position: static;
	padding: 15px 20px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	list-style: none;
	cursor: pointer;
}

.bpb-article .bpb-a-faq .bpb-faq-item > summary::-webkit-details-marker {
	display: none;
}

.bpb-article .bpb-a-faq .bpb-faq-item > summary::after {
	content: none;
}

.bpb-article .bpb-a-faq .bpb-faq-item > summary::before {
	content: "";
	float: right;
	width: 28px;
	height: 28px;
	margin-left: 14px;
	background-color: var(--wp--preset--color--action);
	-webkit-mask: url("../icons/plus-solid.svg") center / contain no-repeat;
	mask: url("../icons/plus-solid.svg") center / contain no-repeat;
}

.bpb-article .bpb-a-faq .bpb-faq-item[open] > summary::before {
	-webkit-mask-image: url("../icons/minus-solid.svg");
	mask-image: url("../icons/minus-solid.svg");
}

.bpb-article .bpb-a-faq .bpb-faq-q {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.35em;
	color: var(--wp--preset--color--heading);
}

.bpb-article .bpb-a-faq .bpb-faq-item[open] .bpb-faq-q {
	color: var(--wp--preset--color--action);
}

.bpb-article .bpb-a-faq .bpb-faq-item > summary:hover {
	color: inherit;
}

.bpb-article .bpb-a-faq .bpb-faq-item > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: -2px;
}

.bpb-article .bpb-a-faq .bpb-faq-item > :not(summary) {
	margin: 0;
	padding: 0 20px 0.9rem;
}

.bpb-article .bpb-a-faq .bpb-faq-item > summary + * {
	padding-top: 15px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.bpb-article .bpb-a-faq .bpb-faq-item > :last-child:not(summary) {
	padding-bottom: calc(0.9rem + 15px);
}

/* Related guide cards: the title's link covers the whole card (live's card is one link). */
.bpb-article .bpb-card-link {
	display: flex;
	position: relative;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px 10px 10px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
}

.bpb-article .bpb-card-link .bpb-thumb {
	flex: 0 0 auto;
	width: 72px;
	margin: 0;
}

.bpb-article .bpb-card-link .bpb-thumb img {
	display: block;
	width: 72px;
	height: 52px;
	border-radius: var(--wp--custom--legacy--radius--chip);
	object-fit: cover;
}

.bpb-article .bpb-card-link > .bpb-card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 700;
	line-height: 1.25em;
}

.bpb-article .bpb-card-title a {
	color: var(--wp--preset--color--heading);
}

.bpb-article .bpb-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.bpb-article .bpb-card-title a:focus-visible {
	outline: none;
}

.bpb-article .bpb-card-title a:focus-visible::after {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}

/* ---------- About this article ---------- */

.bpb-article .bpb-article-note {
	display: flex;
	flex-direction: column;
	padding: 26px 28px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
}

.bpb-article .bpb-article-note > h2 {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25em;
}

.bpb-article .bpb-article-note > p,
.bpb-article .bpb-article-note > ul {
	margin-top: 8px;
}

.bpb-article .bpb-article-note > h3 {
	margin-top: 18px;
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {

	.bpb-article .bpb-a-hero-text,
	.bpb-article .bpb-split-main,
	.bpb-article .bpb-split-side {
		width: 100%;
	}

	.bpb-article .bpb-split {
		flex-direction: column;
	}

	.bpb-article .bpb-a-sec {
		padding-right: 24px;
		padding-left: 24px;
	}

	.bpb-article .bpb-a-title {
		font-size: var(--wp--custom--font-size-step--page-title-tablet);
	}

	.bpb-article .bpb-a-sec > h2,
	.bpb-article .bpb-split-main > h2,
	.bpb-article .bpb-stat > .bpb-stat-num {
		font-size: var(--wp--custom--font-size-step--section-title-tablet);
	}

	.bpb-article .bpb-a-body h3,
	.bpb-article .bpb-fact-card > h2,
	.bpb-article .bpb-split-side > h2,
	.bpb-article .bpb-card-link > .bpb-card-title,
	.bpb-article .bpb-article-note > h2 {
		font-size: var(--wp--custom--font-size-step--card-title-tablet);
	}

	.bpb-article .bpb-a-faq .bpb-faq-q {
		font-size: var(--wp--preset--font-size--body);
	}
}

@media (min-width: 768px) and (max-width: 1024px) {

	.bpb-article .bpb-stat,
	.bpb-article .bpb-features > .bpb-fact-card {
		width: 48%;
	}
}

/* ---------- Phone ---------- */

@media (max-width: 767px) {

	.bpb-article {
		font-size: var(--wp--custom--font-size-step--body-mobile);
	}

	.bpb-article .bpb-a-hero {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.bpb-article .bpb-a-sec {
		padding-top: 40px;
		padding-right: 20px;
		padding-left: 20px;
	}

	.bpb-article .bpb-a-title {
		font-size: var(--wp--custom--font-size-step--page-title-mobile);
	}

	.bpb-article .bpb-a-hero .bpb-lede {
		font-size: var(--wp--custom--font-size-step--body-mobile);
	}

	.bpb-article .bpb-a-sec > h2,
	.bpb-article .bpb-split-main > h2,
	.bpb-article .bpb-stat > .bpb-stat-num {
		font-size: var(--wp--custom--font-size-step--section-title-mobile);
	}

	.bpb-article .bpb-a-body h3,
	.bpb-article .bpb-fact-card > h2,
	.bpb-article .bpb-split-side > h2,
	.bpb-article .bpb-card-link > .bpb-card-title,
	.bpb-article .bpb-article-note > h2 {
		font-size: var(--wp--custom--font-size-step--card-title-mobile);
	}

	.bpb-article .bpb-stat,
	.bpb-article .bpb-features > .bpb-fact-card {
		width: 100%;
	}

	.bpb-article .bpb-inline-cta {
		flex-direction: column;
		align-items: flex-start;
	}

	.bpb-article .bpb-card-link {
		flex-wrap: wrap;
	}

	.bpb-article .bpb-a-faq .bpb-faq-item > summary {
		padding: 12px 15px;
	}

	.bpb-article .bpb-a-faq .bpb-faq-item > summary::before {
		margin-left: 5.6px;
	}

	.bpb-article .bpb-a-faq .bpb-faq-q {
		font-size: var(--wp--custom--font-size-step--body-mobile);
	}

	.bpb-article .bpb-a-faq .bpb-faq-item > :not(summary) {
		padding-right: 15px;
		padding-left: 15px;
	}

	.bpb-article .bpb-a-faq .bpb-faq-item > summary + * {
		padding-top: 7px;
	}

	.bpb-article .bpb-a-faq .bpb-faq-item > :last-child:not(summary) {
		padding-bottom: calc(0.9rem + 7px);
	}
}