/*
Theme Name: CBT Astra Child
Template: astra
Description: CBT Test brand layer for Astra: fonts, block styles and the homepage pattern.
Version: 1.0.0
Text Domain: cbt-astra-child
*/

/* Brand tokens from the CBT Test style guide */
:root {
	--cbt-ink: #1F2A33;
	--cbt-muted: #5B6670;
	--cbt-line: #D5DBE0;
	--cbt-road: #EEF1F3;
	--cbt-surface: #FFFFFF;
	--cbt-l-red: #D71920;
	--cbt-easier: #1565C0;
	--cbt-on-ink-muted: #B9C3CB;
	--cbt-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--cbt-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
	--cbt-radius-sm: 6px;
	--cbt-radius-md: 8px;
	--cbt-radius-lg: 10px;
	--cbt-wide: 1120px;
}

/* ---------- Sections ---------- */
.cbt-section {
	font-family: var(--cbt-body);
	color: var(--cbt-ink);
	background: var(--cbt-surface);
	padding-block: 64px;
	padding-inline: max(16px, calc((100% - var(--cbt-wide)) / 2));
	box-sizing: border-box;
}
.entry-content .cbt-section.alignfull { margin-top: 0; margin-bottom: 0; }
.cbt-section > * { margin-block: 0; }
.cbt-section > * + * { margin-top: 16px; }
.cbt-section > .wp-block-columns { margin-top: 32px; }
.cbt-section > .wp-block-columns + .wp-block-columns { margin-top: 24px; }

.cbt-section h1,
.cbt-section h2,
.cbt-section h3 {
	font-family: var(--cbt-display);
	font-weight: 700;
	color: inherit;
	text-wrap: balance;
}
.cbt-section h2 { font-size: clamp(34px, 5vw, 46px); line-height: 1.05; }
.cbt-section h3 { font-size: 26px; line-height: 1.15; }
.cbt-section p { font-size: 17px; line-height: 1.55; }
:where(.cbt-section) :is(p, h1, h2, h3) { margin: 0; }
.cbt-section a { color: inherit; text-underline-offset: 3px; }
.cbt-section a:focus-visible,
.cbt-section summary:focus-visible {
	outline: 3px solid var(--cbt-easier);
	outline-offset: 2px;
	border-radius: 2px;
}
.cbt-lede { max-width: 62ch; font-size: 19px !important; }

/* Kicker: small uppercase label above a heading */
.is-style-cbt-kicker {
	font-family: var(--cbt-body);
	font-size: 13px !important;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cbt-muted);
}
.cbt-section > .is-style-cbt-kicker + h1,
.cbt-section > .is-style-cbt-kicker + h2,
.wp-block-column > .is-style-cbt-kicker + h1 { margin-top: 8px; }

/* Source note */
.is-style-cbt-source {
	font-size: 14px !important;
	line-height: 1.45 !important;
	color: var(--cbt-muted);
	max-width: 70ch;
}

/* ---------- Hero ---------- */
.cbt-hero { background: var(--cbt-road); padding-block: 56px 72px; }
.cbt-hero .wp-block-column > * { margin: 0; }
.cbt-hero .wp-block-column > * + * { margin-top: 20px; }
.cbt-hero__title {
	font-size: clamp(44px, 8vw, 76px) !important;
	line-height: 0.98 !important;
	letter-spacing: -0.01em;
	max-width: 15ch;
}
.cbt-hero__plate figure { margin: 0; }
.cbt-hero__plate img {
	display: block;
	width: min(260px, 60vw);
	height: auto;
	margin-inline: auto;
	transform: rotate(-4deg);
}
@media (max-width: 781px) {
	.cbt-hero__cols { flex-direction: column-reverse; align-items: flex-start !important; }
	.cbt-hero__plate img { width: 104px; margin-inline: 0; }
}

/* Road: the ink strip with a dashed centre line between hero and tools */
.wp-block-separator.is-style-cbt-road {
	border: 0 !important;
	height: 32px;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	opacity: 1;
	background-color: var(--cbt-ink);
	background-image: repeating-linear-gradient(90deg, var(--cbt-surface) 0 56px, transparent 56px 96px);
	background-size: 100% 4px;
	background-position: 0 center;
	background-repeat: no-repeat;
}

/* ---------- Buttons ---------- */
.cbt-section .wp-block-buttons { gap: 8px; }
body .cbt-section .wp-block-button .wp-block-button__link {
	font-family: var(--cbt-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	padding: 0 22px;
	border-radius: var(--cbt-radius-sm);
	border: 2px solid var(--cbt-ink);
	background: var(--cbt-ink);
	color: var(--cbt-surface);
	text-decoration: none;
	box-sizing: border-box;
}
body .cbt-section .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--cbt-ink);
}
body .cbt-section .wp-block-button .wp-block-button__link:hover { background: #33424E; border-color: #33424E; color: var(--cbt-surface); }
body .cbt-section .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--cbt-ink); color: var(--cbt-surface); }
body .cbt-section .wp-block-button .wp-block-button__link:focus-visible { outline: 3px solid var(--cbt-easier); outline-offset: 2px; }

/* ---------- Tool cards ---------- */
.cbt-cards { gap: 24px !important; }
.cbt-cards > .wp-block-column { display: flex; }
.is-style-cbt-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: var(--cbt-surface);
	border: 1px solid var(--cbt-line);
	border-radius: var(--cbt-radius-md);
	box-sizing: border-box;
}
.is-style-cbt-card > * { margin: 0 !important; }
.is-style-cbt-card p { color: var(--cbt-muted); }
.is-style-cbt-card .cbt-card__link { margin-top: auto !important; padding-top: 8px; }
.is-style-cbt-card .cbt-card__link a { color: var(--cbt-ink); font-weight: 600; }
.is-style-cbt-card .cbt-card__link a::after { content: " \2192"; }
.is-style-cbt-card:has(.cbt-chip--live) { border: 2px solid var(--cbt-ink); }

.is-style-cbt-chip {
	align-self: flex-start;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1 !important;
	padding: 6px 8px;
	border-radius: 4px;
	background: var(--cbt-road);
	color: var(--cbt-muted) !important;
}
.is-style-cbt-chip.cbt-chip--live { background: var(--cbt-ink); color: var(--cbt-surface) !important; }

/* ---------- Tinted panel ---------- */
.is-style-cbt-panel { background: var(--cbt-road); }

/* Licence steps: each number sits on a small plate */
ol.is-style-cbt-steps {
	list-style: none;
	counter-reset: cbt-step;
	padding: 0;
	margin-top: 28px !important;
	display: grid;
	gap: 16px;
	max-width: 760px;
}
ol.is-style-cbt-steps > li {
	counter-increment: cbt-step;
	position: relative;
	padding: 18px 20px 18px 84px;
	min-height: 52px;
	background: var(--cbt-surface);
	border-radius: var(--cbt-radius-lg);
	font-size: 17px;
	line-height: 1.5;
	margin: 0;
}
ol.is-style-cbt-steps > li::before {
	content: counter(cbt-step);
	position: absolute;
	left: 18px;
	top: 16px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 4px solid var(--cbt-ink);
	border-radius: var(--cbt-radius-sm);
	background: var(--cbt-surface);
	font-family: var(--cbt-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1;
	box-sizing: border-box;
}
ol.is-style-cbt-steps strong { display: block; font-family: var(--cbt-display); font-size: 22px; line-height: 1.2; margin-bottom: 2px; }
.is-style-cbt-panel > ol.is-style-cbt-steps + .is-style-cbt-source { margin-top: 24px; }

/* ---------- Dark band ---------- */
.is-style-cbt-dark { background: var(--cbt-ink); color: var(--cbt-surface); }
.is-style-cbt-dark p { max-width: 62ch; }
.is-style-cbt-dark .is-style-cbt-kicker { color: var(--cbt-on-ink-muted); }
.is-style-cbt-dark .wp-block-buttons { margin-top: 28px; }
body .cbt-section.is-style-cbt-dark .wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--cbt-surface); color: var(--cbt-surface); }
body .cbt-section.is-style-cbt-dark .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--cbt-surface); color: var(--cbt-ink); }
.is-style-cbt-dark a:focus-visible { outline-color: #90CAF9 !important; }

/* ---------- FAQ ---------- */
.cbt-section > .is-style-cbt-faq:first-of-type { margin-top: 28px; }
.cbt-section > .is-style-cbt-faq + .is-style-cbt-faq { margin-top: 0; }
.is-style-cbt-faq { border-top: 1px solid var(--cbt-line); max-width: 760px; }
.is-style-cbt-faq:last-of-type { border-bottom: 1px solid var(--cbt-line); }
.is-style-cbt-faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	font-family: var(--cbt-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
}
.is-style-cbt-faq summary::-webkit-details-marker { display: none; }
.is-style-cbt-faq summary::after { content: "+"; font-size: 28px; line-height: 1; flex: none; }
.is-style-cbt-faq[open] summary::after { content: "\2212"; }
.is-style-cbt-faq > p { padding-bottom: 18px; max-width: 64ch; margin: 0; }

/* ---------- Credit line ---------- */
.cbt-credit { padding-block: 24px; border-top: 1px solid var(--cbt-line); }

@media (max-width: 781px) {
	.cbt-section { padding-block: 48px; }
	.cbt-hero { padding-block: 32px 48px; }
	ol.is-style-cbt-steps > li { padding-left: 76px; }
	ol.is-style-cbt-steps > li::before { left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.cbt-section * { transition: none !important; }
}