/*!
 * Big Wall Article TOC: article design.
 * Loaded on posts the article template applies to (body.bwd-article). Ported
 * from the approved article prototype, are-seo-writing-and-content-writing-the-
 * same.html: its white "paper" body band (section.band-paper) and `.prose`
 * rules, same values, scoped to the post body GeneratePress prints
 * (.entry-content), and extended to the core blocks the live posts are written
 * in (image, quote, table, details, separator). Gold stays a fill or a line on
 * the white band, never text (~1.8:1).
 *
 * The hero, author band, related cards and call to action are GeneratePress
 * Block Elements with their own GenerateBlocks styles; nothing here styles them.
 *
 * Big Wall gold is #fcba04. Never #facc15.
 */

.bwd-article {
	--bwd-a-navy: #1c1b4d;
	--bwd-a-paper: #ffffff;
	--bwd-a-card: #f4f4ff;
	--bwd-a-gold: #fcba04;
	--bwd-a-ink: #14133b;
	--bwd-a-link: #1c1b4d;
	--bwd-a-text: rgba(20, 19, 59, 0.8);
	--bwd-a-list: rgba(20, 19, 59, 0.78);
	--bwd-a-cell: rgba(20, 19, 59, 0.76);
	--bwd-a-muted: rgba(20, 19, 59, 0.7);
	--bwd-a-hairline: rgba(20, 19, 59, 0.12);
	--bwd-a-rule: rgba(20, 19, 59, 0.14);
	--bwd-a-gutter: clamp(18px, 3.5vw, 48px);
	--bwd-a-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
	--bwd-a-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bwd-a-mono: ui-monospace, Menlo, Consolas, monospace;
	--bwd-a-ease: cubic-bezier(0.22, 0.9, 0.26, 1);
}

/* ── The page around the body ─────────────────────────────────────────────
   The hero and the bands after the body are navy; only the body band is
   white. GeneratePress's own white #page and article backgrounds go. */
body.bwd-article {
	background-color: var(--bwd-a-navy);
}

.bwd-article .site.container,
.bwd-article .site-content,
.bwd-article .inside-article {
	background: transparent;
}

.bwd-article .inside-article {
	padding: 0;
}

/* GeneratePress spaces everything in <main> 20px apart; the bands after the
   body run straight into the site footer. */
.bwd-article .site-main > article {
	margin-bottom: 0;
}

/* The site's Additional CSS gives single posts an inset article
   (`body.wp-singular.post-template-default .inside-article`, 7rem/5rem) for
   the old post design; articles run edge to edge. One element more than that
   selector, so it wins wherever it loads. */
body.bwd-article .site-main > article > .inside-article {
	margin: 0;
	padding: 0;
}

/* The Additional CSS also sets `body, html { overflow-x: hidden !important }`.
   Hidden on <body> makes the body a scroll box of its own that never scrolls,
   so the sticky route card has nothing to stick to. `clip` still stops
   sideways scrolling without creating that box. */
html body.bwd-article {
	overflow-x: clip !important;
}

/* The site header and the admin bar are fixed at z-index 99999; the reading
   progress bar runs along the very top of the window above them, as in the
   prototype, instead of disappearing behind the header. */
.bwd-article .bwd-toc-progress {
	z-index: 100000;
}

.bwd-article .bwd-prose ::selection {
	background: var(--bwd-a-gold);
	color: #14133b;
}

/* ── The body band (the prototype's section.band-paper > .wrap.post) ───── */
.bwd-article .entry-content {
	margin: 0;
	padding: clamp(48px, 6vw, 78px) var(--bwd-a-gutter) clamp(40px, 5vw, 64px);
	background: var(--bwd-a-paper);
	border-top: 1px solid rgba(252, 186, 4, 0.45);
	color: var(--bwd-a-ink);
	font-family: var(--bwd-a-body);
	font-size: 16px;
	line-height: normal;
	-webkit-font-smoothing: antialiased;
}

/* The route card and the body sit in the prototype's 1180px wrap; the body
   (.bwd-prose, the card's right column) is 72ch. Without a card (fewer than
   three headings, or hidden for this post) the body is one centred column. */
.bwd-article .entry-content > .bwd-toc-layout {
	max-width: calc(1180px - 2 * var(--bwd-a-gutter));
	margin: 0 auto;
}

.bwd-article .bwd-prose {
	max-width: 72ch;
}

.bwd-article .entry-content > .bwd-prose {
	margin: 0 auto;
}

/* ── Prose ───────────────────────────────────────────────────────────────
   Body copy steps up from the system's 15px/1.65 to 16.5px/1.78, sized for a
   ten-minute read rather than a card. Colours and fonts are set on every
   element, so no theme heading, link or list style shows through. */
.bwd-article .bwd-prose p {
	margin: 0 0 22px;
	font-size: 16.5px;
	line-height: 1.78;
	color: var(--bwd-a-text);
}

.bwd-article .bwd-prose p.intro {
	font-size: 18.5px;
	line-height: 1.7;
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose h2 {
	margin: 58px 0 18px;
	font-family: var(--bwd-a-display);
	font-size: clamp(24px, 2.7vw, 34px);
	font-weight: 700;
	font-style: normal;
	letter-spacing: -0.02em;
	line-height: 1.12;
	text-transform: none;
	color: var(--bwd-a-ink);
	scroll-margin-top: 26px;
}

.bwd-article .bwd-prose h3 {
	margin: 34px 0 10px;
	font-family: var(--bwd-a-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.3;
	text-transform: none;
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose h4,
.bwd-article .bwd-prose h5,
.bwd-article .bwd-prose h6 {
	margin: 28px 0 8px;
	font-family: var(--bwd-a-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
	color: var(--bwd-a-ink);
}

/* The first thing in the body never opens with a heading's top margin. */
.bwd-article .bwd-prose > :first-child {
	margin-top: 0;
}

/* Numbered pitch: the mono eyebrow sits outside the heading. */
.bwd-article .bwd-prose .pitch {
	margin: 58px 0 18px;
	scroll-margin-top: 26px;
}

.bwd-article .bwd-prose .pitch h2 {
	margin: 0;
}

.bwd-article .bwd-prose .pitch-no {
	display: inline-block;
	margin: 0 0 12px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--bwd-a-gold);
	font: 600 10.5px/1 var(--bwd-a-mono);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose a {
	color: var(--bwd-a-link);
	text-decoration: none;
	border-bottom: 1px solid var(--bwd-a-gold);
	transition: background-color 0.25s, border-color 0.25s;
}

.bwd-article .bwd-prose a:hover,
.bwd-article .bwd-prose a:focus,
.bwd-article .bwd-prose a:active {
	color: var(--bwd-a-link);
	background: rgba(252, 186, 4, 0.18);
	border-bottom-color: var(--bwd-a-gold);
}

.bwd-article .bwd-prose strong,
.bwd-article .bwd-prose b {
	font-weight: 600;
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose em,
.bwd-article .bwd-prose i {
	font-style: italic;
}

.bwd-article .bwd-prose ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.bwd-article .bwd-prose ul li {
	position: relative;
	margin: 0 0 11px;
	padding-left: 26px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--bwd-a-list);
}

.bwd-article .bwd-prose ul li::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 0.66em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bwd-a-gold);
}

.bwd-article .bwd-prose ol {
	margin: 0 0 24px;
	padding: 0 0 0 26px;
	list-style: decimal;
}

.bwd-article .bwd-prose ol li {
	margin: 0 0 11px;
	padding-left: 4px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--bwd-a-list);
}

.bwd-article .bwd-prose ol li::marker {
	font: 600 12px/1 var(--bwd-a-mono);
	color: #2a2973;
}

.bwd-article .bwd-prose li > ul,
.bwd-article .bwd-prose li > ol {
	margin: 11px 0 0;
}

.bwd-article .bwd-prose hr,
.bwd-article .bwd-prose .wp-block-separator {
	height: 0;
	margin: 52px 0;
	border: 0;
	border-top: 1px solid var(--bwd-a-hairline);
	background: none;
	opacity: 1;
}

.bwd-article .bwd-prose code,
.bwd-article .bwd-prose kbd {
	padding: 2px 6px;
	border-radius: 6px;
	background: rgba(252, 186, 4, 0.18);
	font: 500 0.88em/1.4 var(--bwd-a-mono);
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose pre {
	margin: 0 0 24px;
	padding: 18px 20px;
	overflow-x: auto;
	border: 1px solid var(--bwd-a-hairline);
	border-radius: 14px;
	background: var(--bwd-a-card);
	font: 500 14px/1.6 var(--bwd-a-mono);
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose pre code {
	padding: 0;
	background: none;
	font: inherit;
}

/* ── Key takeaways, the belay check before the pitch ─────────────────────── */
.bwd-article .bwd-prose .takeaways {
	margin: 0 0 44px;
	padding: clamp(22px, 2.4vw, 30px);
	border: 1px solid rgba(252, 186, 4, 0.55);
	border-radius: 18px;
	background: var(--bwd-a-card);
}

.bwd-article .bwd-prose .takeaways h2 {
	display: inline-block;
	margin: 0 0 16px;
	padding: 7px 15px;
	border-radius: 999px;
	background: var(--bwd-a-gold);
	font: 600 10.5px/1 var(--bwd-a-mono);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose .takeaways ul {
	margin: 0;
}

.bwd-article .bwd-prose .takeaways > :last-child,
.bwd-article .bwd-prose .takeaways ul li:last-child {
	margin-bottom: 0;
}

/* ── Quotes ──────────────────────────────────────────────────────────────
   The prototype's pullquote, and core Quote and Pull Quote drawn the same. */
.bwd-article .bwd-prose .pullquote,
.bwd-article .bwd-prose blockquote,
.bwd-article .bwd-prose .wp-block-pullquote {
	position: static;
	margin: 40px 0;
	padding: 4px 0 4px 28px;
	border: 0;
	border-left: 3px solid var(--bwd-a-gold);
	background: none;
	font-family: var(--bwd-a-display);
	font-size: clamp(18px, 2vw, 25px);
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
}

.bwd-article .bwd-prose blockquote p,
.bwd-article .bwd-prose .wp-block-pullquote p {
	margin: 0 0 12px;
	font: inherit;
	color: inherit;
}

.bwd-article .bwd-prose blockquote > :last-child,
.bwd-article .bwd-prose .wp-block-pullquote p:last-of-type {
	margin-bottom: 0;
}

.bwd-article .bwd-prose blockquote cite,
.bwd-article .bwd-prose .wp-block-pullquote cite {
	display: block;
	margin-top: 12px;
	font: 600 10.5px/1.4 var(--bwd-a-mono);
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bwd-a-muted);
}

/* ── Images ─────────────────────────────────────────────────────────────── */
.bwd-article .bwd-prose figure,
.bwd-article .bwd-prose .wp-block-image {
	margin: 34px 0;
}

.bwd-article .bwd-prose img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

/* Outranks the Additional CSS's
   `body.wp-singular.post-template-default .wp-block-image img` (2rem margin,
   1rem radius) from the old post design. */
html body.bwd-article .bwd-prose .wp-block-image img {
	margin: 0;
	border-radius: 14px;
}

.bwd-article .bwd-prose .wp-block-image.aligncenter img,
.bwd-article .bwd-prose .aligncenter > img {
	margin-inline: auto;
}

.bwd-article .bwd-prose figcaption {
	margin-top: 12px;
	font: 600 10.5px/1.5 var(--bwd-a-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: left;
	color: var(--bwd-a-muted);
}

/* ── Comparison table, and core Table drawn the same ───────────────────────
   The wrapper scrolls on its own so the page body never does. The
   prototype's `.cmp th.cmp td` was missing a comma, so its cell padding and
   row rules never applied; these are the intended values. */
.bwd-article .bwd-prose .table-scroll,
.bwd-article .bwd-prose .wp-block-table {
	margin: 6px 0 30px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bwd-article .bwd-prose table {
	width: 100%;
	min-width: 540px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.bwd-article .bwd-prose table caption,
.bwd-article .bwd-prose .wp-block-table figcaption {
	padding-bottom: 14px;
	font: 600 10.5px/1.5 var(--bwd-a-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	color: var(--bwd-a-muted);
}

.bwd-article .bwd-prose th,
.bwd-article .bwd-prose td {
	padding: 15px 18px;
	border: 0;
	border-bottom: 1px solid var(--bwd-a-hairline);
	font-size: 14.5px;
	line-height: 1.62;
	text-align: left;
	vertical-align: top;
	color: var(--bwd-a-cell);
}

.bwd-article .bwd-prose thead th {
	border-bottom-color: rgba(252, 186, 4, 0.6);
	font: 600 10.5px/1 var(--bwd-a-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose tbody th {
	width: 24%;
	font-family: var(--bwd-a-display);
	font-weight: 600;
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-prose tbody tr:last-child th,
.bwd-article .bwd-prose tbody tr:last-child td {
	border-bottom: 0;
}

/* ── Types grid (nine holds on the same pitch) ──────────────────────────── */
.bwd-article .bwd-prose .types {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 8px 0 30px;
}

.bwd-article .bwd-prose .type {
	padding: 18px;
	border: 1px solid var(--bwd-a-hairline);
	border-radius: 14px;
	background: var(--bwd-a-card);
	transition: transform 0.3s var(--bwd-a-ease), border-color 0.3s var(--bwd-a-ease);
}

.bwd-article .bwd-prose .type:hover {
	transform: translateY(-4px);
	border-color: rgba(252, 186, 4, 0.75);
}

.bwd-article .bwd-prose .type h3 {
	margin: 0 0 7px;
	font-size: 16px;
	line-height: 1.25;
}

.bwd-article .bwd-prose .type p {
	margin: 0;
	font-size: 13px;
	line-height: 1.58;
	color: var(--bwd-a-muted);
}

@media (max-width: 820px) {
	.bwd-article .bwd-prose .types {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 520px) {
	.bwd-article .bwd-prose .types {
		grid-template-columns: 1fr;
	}
}

/* ── FAQ: plain <details>, the prototype's .faq and core Details ─────────── */
.bwd-article .bwd-prose .faq {
	border-top: 1px solid var(--bwd-a-rule);
}

.bwd-article .bwd-prose details {
	margin: 0;
	border-bottom: 1px solid var(--bwd-a-rule);
}

.bwd-article .bwd-prose :not(details) + details.wp-block-details,
.bwd-article .bwd-prose details.wp-block-details:first-child {
	border-top: 1px solid var(--bwd-a-rule);
}

.bwd-article .bwd-prose summary {
	position: relative;
	padding: 20px 40px 20px 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--bwd-a-display);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--bwd-a-ink);
	transition: color 0.25s;
}

.bwd-article .bwd-prose summary::-webkit-details-marker {
	display: none;
}

.bwd-article .bwd-prose summary:hover {
	color: #2a2973;
}

.bwd-article .bwd-prose summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font: 400 22px/1 var(--bwd-a-body);
	color: var(--bwd-a-gold);
	transition: transform 0.25s;
}

.bwd-article .bwd-prose details[open] > summary::after {
	content: "\2212";
}

.bwd-article .bwd-prose details p {
	max-width: 66ch;
	margin: 0 0 20px;
	font-size: 15.5px;
	line-height: 1.72;
	color: var(--bwd-a-cell);
}

/* ── Buttons written in the body (core Buttons) ─────────────────────────── */
.bwd-article .bwd-prose .wp-block-buttons {
	margin: 0 0 24px;
}

.bwd-article .bwd-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border: 1px solid var(--bwd-a-gold);
	border-radius: 999px;
	background: var(--bwd-a-gold);
	font: 600 14px/1 var(--bwd-a-body);
	color: #14133b;
	transition: background 0.25s, border-color 0.25s, transform 0.2s;
}

.bwd-article .bwd-prose .wp-block-button__link:hover,
.bwd-article .bwd-prose .wp-block-button__link:focus {
	border-color: #ffcf3d;
	background: #ffcf3d;
	color: #14133b;
	transform: translateY(-2px);
}

/* ── Route card on the white band (the prototype's .band-paper .toc rules) ─ */
.bwd-article .bwd-toc {
	--bwd-toc-text: #14133b;
	--bwd-toc-muted: rgba(20, 19, 59, 0.66);
	--bwd-toc-muted-soft: rgba(20, 19, 59, 0.52);
	--bwd-toc-gold-number: rgba(20, 19, 59, 0.42);
	--bwd-toc-gold-hairline: rgba(20, 19, 59, 0.14);
	--bwd-toc-gold-hairline-soft: rgba(20, 19, 59, 0.08);
}

.bwd-article .bwd-toc .bwd-toc__title {
	display: inline-block;
	margin: 0 0 16px;
	padding: 7px 15px;
	border-radius: 999px;
	background: var(--bwd-a-gold);
	color: var(--bwd-a-ink);
}

.bwd-article .bwd-toc a.bwd-toc__link.is-active {
	color: var(--bwd-a-ink);
	border-left-color: var(--bwd-a-gold);
}

.bwd-article .bwd-toc .bwd-toc__summary,
.bwd-article .bwd-toc .bwd-toc__summary::after {
	color: var(--bwd-a-ink);
}

/* ── Belt and braces: theme parts the plugin already switches off ────────── */
.bwd-article .bwd-prose #ez-toc-container,
.bwd-article .bwd-prose .ez-toc-v2_0_88 {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.bwd-article .bwd-prose *,
	.bwd-article .bwd-prose *::before,
	.bwd-article .bwd-prose *::after {
		transition: none !important;
		animation: none !important;
	}
}