/*
Theme Name: SEO Base
Theme URI: https://github.com/eliott/seo-internal-tool
Author: Eliott
Author URI: https://examarena.com
Description: Shared base theme for SEO niche sites. Editorial identity (Lora + Mulish, cream "paper" layer, gold accent, category red). Per-site brand palette/fonts via theme-overrides.json (merged by seo-manager-connector plugin).
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.5.49
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seobase
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, translation-ready, wide-blocks, block-styles
*/

/* ────────────────────────────────────────────────────────────
   Design tokens — default (Police palette + shared paper layer).
   Brand tokens (primary, accent, cat, headline) are overridden per-site
   by seo-manager-connector → <style id="smc-theme-vars">. The paper layer
   (paper/card/border/text/muted) + radii are shared across all sites.
   ──────────────────────────────────────────────────────────── */

:root {
	/* Brand (per site) */
	--primary:        #1B3C72;
	--primary-dark:   #142F5C;
	--primary-light:  #2A5191;
	--accent:         #EAB13C;
	--cat:            #B23A2F;
	--headline:       #1B3C72;

	/* Paper layer (shared) */
	--paper:          #F1EFEA;
	--paper-2:        #EAE7DF;
	--card:           #FFFFFF;
	--border:         #E4E0D6;

	/* Text */
	--text:           #3A3A38;
	--muted:          #7C7A72;
	--muted-on-dark:  #A9B6CC;

	/* Radii (shared) */
	--r-card:         8px;
	--r-btn:          6px;
	--r-field:        8px;

	/* Safe fallback before interactions.js measures the complete sticky header. */
	--smc-article-heading-offset: 158px;
}

/* ────────────────────────────────────────────────────────────
   WP core adjustments
   ──────────────────────────────────────────────────────────── */

html.has-article-heading-anchors {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html.has-article-heading-anchors {
		scroll-behavior: auto;
	}
}

/* Full-width sections butt together without the body background bleeding
   through (WP adds blockGap between sibling top-level blocks by default). */
main > .alignfull,
.wp-site-blocks > main > .wp-block-group.alignfull,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .wp-block-group.alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > header {
	margin-block-start: 0;
	margin-block-end: 0;
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: .15em;
}

:where(.wp-site-blocks *:focus-visible) {
	outline-width: 2px;
	outline-style: solid;
	outline-color: var(--primary);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

.more-link { display: block; }
:where(pre) { overflow-x: auto; }

/* Rounded media (editorial identity — no more sharp edges) */
.wp-block-image img,
.wp-block-cover,
.wp-block-post-featured-image img {
	border-radius: var(--r-card);
}

/* ────────────────────────────────────────────────────────────
   Typography base (Lora headings, Mulish body — no uppercase)
   ──────────────────────────────────────────────────────────── */

body {
	-webkit-font-smoothing: antialiased;
}

/* No page ever scrolls sideways — a stray wide child (table, sticky offset,
   negative margin) must clip, not push the layout. `clip` deliberately does
   not create a scroll container, so it preserves sticky sidebars. */
html,
body {
	overflow-x: clip;
	overflow-y: visible;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Lora", Georgia, "Times New Roman", serif;
	color: var(--headline);
	line-height: 1.15;
}

/* ────────────────────────────────────────────────────────────
   Buttons — gold CTA (accent bg, dark text, subtle lift on hover)
   theme.json sets colours/radius/weight; here we add the interaction.
   ──────────────────────────────────────────────────────────── */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
	white-space: nowrap;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* Standalone <button>/<a> that opt into the gold CTA look outside a
   core/button (e.g. header newsletter trigger, inline pattern CTAs). */
.is-cta-gold {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 0.9375rem;
	color: var(--primary-dark);
	background: var(--accent);
	border: 0;
	border-radius: var(--r-btn);
	padding: 0.8125rem 1.375rem;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	text-decoration: none;
	transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
	white-space: nowrap;
}

.is-cta-gold:hover,
.is-cta-gold:focus-visible {
	transform: translateY(-1px);
	filter: brightness(1.04);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
	color: var(--primary-dark);
	outline: none;
}

/* ────────────────────────────────────────────────────────────
   Meta chips — reading time (tinted pill) + date, on every card
   and in the article header. Rendered by [smc_reading_meta].
   ──────────────────────────────────────────────────────────── */

.is-reading-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.78rem;
	color: var(--muted);
	text-transform: none;
	letter-spacing: 0;
}

.is-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 8%, #fff);
	border-radius: 999px;
	padding: 5px 11px;
}

.is-meta-chip .is-ic {
	width: 14px;
	height: 14px;
	flex: none;
}

.is-meta-date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
}

.is-meta-date .is-ic {
	width: 13px;
	height: 13px;
	flex: none;
}

/* "Lire →" affordance on cards — an outline button that fills on hover.
   Hidden on narrow screens: the whole card is tappable there anyway. */
.is-card-read {
	margin-left: auto;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--primary);
	background: transparent;
	border: 1.5px solid var(--border);
	border-radius: var(--r-btn);
	padding: 6px 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	text-decoration: none;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.is-card-read:hover {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

/* ════════════════════════════════════════════════════════════
   HEADER — white bar + shield logo, over a tinted nav bar
   ════════════════════════════════════════════════════════════ */

.is-site-header {
	background: #fff;
	border-bottom: 1px solid var(--border);
}

.is-site-header-row {
	min-height: 80px;
	gap: 28px;
}

/* WordPress wraps the header bar and nav in one template-part parent. That
   parent—not either inner bar—must be sticky; a sticky child cannot remain
   pinned once its short parent scrolls away. Keep this global so every public
   template (articles, archives, pages and legal pages) behaves consistently. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
}

/* Do not let an inner header row create a second sticky context. */
.wp-site-blocks > header.wp-block-template-part .is-site-header,
.wp-site-blocks > header.wp-block-template-part .is-site-nav {
	position: static;
}

/* Logged-in editors keep the WordPress admin bar reachable too. */
body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }
}

/* Site favicon + name in headline, TLD (".fr") in category red. Driven by
   the render_block filter on core/site-title in functions.php. */
.is-site-logo-duo,
.is-site-logo-duo a {
	font-family: "Lora", Georgia, serif;
	font-weight: 700;
	color: var(--headline);
	text-decoration: none !important;
	line-height: 1;
	white-space: nowrap;
}

.is-site-header .is-site-logo-duo a {
	display: inline-flex;
	align-items: center;
	gap: 11px;
}

.is-logo-mark {
	width: 32px;
	height: 32px;
	flex: none;
	display: inline-flex;
}

.is-logo-mark svg,
.is-logo-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.is-site-logo-duo .is-logo-tld {
	color: var(--cat);
	font-style: normal;
}

/* Keep the header-right cluster from shrinking the CTA. */
.is-site-header .wp-block-buttons,
.is-site-header .wp-block-button {
	flex-shrink: 0;
}

/* ─── Narrow-screen header: compact CTA + burger ─── */
.is-header-start,
.is-header-burger {
	display: none;
}

.is-header-start {
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 8px;
	background: var(--accent);
	color: var(--primary-dark);
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	margin-right: 10px;
}

.is-header-burger {
	width: 44px;
	height: 44px;
	flex: none;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--headline);
	cursor: pointer;
}

.is-header-burger svg { width: 22px; height: 22px; }

/* Burger-driven mobile menu: the nav bar flips from a horizontal strip to a
   stacked panel under the header. */
.is-site-nav.is-open { display: block; }

/* ─── Nav bar (below the top bar) ─── */
.is-site-nav {
	background: color-mix(in srgb, var(--primary) 6%, #fff);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.is-site-nav-row {
	min-height: 62px;
}

/* ─── Priority-plus navigation (JS in assets/js/priority-nav.js) ─── */
.is-header-actions {
	min-width: 0 !important;
	flex-shrink: 1 !important;
}

.is-priority-nav {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	justify-content: flex-start;
}

.is-priority-nav-list {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
	align-items: center;
	min-width: 0;
	overflow: hidden;
}

.is-priority-nav-list .is-priority-nav-item {
	flex-shrink: 0;
}

.is-priority-nav a {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: #494844;
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 6px;
	position: relative;
	transition: color .16s ease, background .16s ease;
}

.is-priority-nav a:hover,
.is-priority-nav a:focus-visible {
	color: var(--primary-dark);
	background: color-mix(in srgb, var(--primary) 8%, #fff);
}

.is-priority-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: 0.5rem;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 5px;
	color: var(--headline);
	cursor: pointer;
	flex-shrink: 0;
}

.is-priority-nav-toggle[hidden],
.is-priority-nav-overflow[hidden] {
	display: none;
}

.is-priority-nav-toggle:hover,
.is-priority-nav-toggle[aria-expanded="true"] {
	border-color: var(--border);
}

.is-priority-nav-toggle:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.is-priority-nav-overflow {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	min-width: 220px;
	max-width: 320px;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	box-shadow: 0 12px 26px rgba(40, 40, 40, .12);
	z-index: 1000;
}

.is-priority-nav-overflow li a {
	display: block;
	padding: 0.625rem 1.25rem;
	color: #494844;
}

.is-priority-nav-overflow li a:hover,
.is-priority-nav-overflow li a:focus-visible {
	background: var(--paper);
	color: var(--headline);
}

/* Container query: collapse the nav row into a burger when it runs out of
   room, independent of viewport (depends on wideSize / label lengths). */
.is-site-nav-row {
	container-type: inline-size;
	container-name: sitenav;
}

/* ─── Newsletter modal (header newsletter variant) ─── */
html.has-newsletter-modal { overflow: hidden; }
.is-newsletter-modal[hidden] { display: none; }
.is-newsletter-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.is-newsletter-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}
.is-newsletter-modal-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 440px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: 2.25rem 1.75rem 1.75rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.is-newsletter-modal-close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: transparent;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}
.is-newsletter-modal-close:hover { color: var(--headline); }
.is-newsletter-modal-title {
	font-family: "Lora", Georgia, serif;
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--headline);
	margin: 0 0 0.5rem;
}
.is-newsletter-modal-subtitle {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--text);
	margin: 0 0 1rem;
}

/* ════════════════════════════════════════════════════════════
   FOOTER — palette-aware surface, brand + link columns + legal row
   ════════════════════════════════════════════════════════════ */

.is-site-footer {
	/* The footer belongs to each site's palette, rather than a fixed blue-grey. */
	background: color-mix(in srgb, var(--primary) 6%, #fff);
	color: color-mix(in srgb, var(--primary-dark) 76%, #fff);
	border-top: 1px solid color-mix(in srgb, var(--primary) 16%, #fff);
}

.is-footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 34px;
	padding-bottom: 28px;
	border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, #fff);
}

.is-site-footer .is-site-logo-duo,
.is-site-footer .is-footer-brand {
	font-family: "Lora", Georgia, serif;
	font-weight: 700;
	font-size: 1.625rem;
	color: var(--primary-dark);
	line-height: 1;
}

.is-site-footer .is-logo-tld { color: var(--cat); }

.is-footer-desc {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.875rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--primary-dark) 72%, #fff);
	margin: 0.75rem 0 0;
	max-width: 34ch;
}

.is-footer-col .is-footer-heading {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.75rem;
	color: var(--primary-dark);
	margin: 0.375rem 0 0.875rem;
}

.is-footer-col a {
	display: block;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--primary-dark) 72%, #fff);
	text-decoration: none;
	padding: 5px 0;
	transition: color .15s ease;
}

.is-footer-col a:hover {
	color: var(--primary-dark);
}

.is-footer-bottom {
	padding-top: 20px;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--primary-dark) 68%, #fff);
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.is-footer-bottom a {
	color: color-mix(in srgb, var(--primary-dark) 68%, #fff);
	text-decoration: none;
}

.is-footer-bottom a:hover { color: var(--primary-dark); }
.is-footer-bottom .is-footer-sep {
	color: color-mix(in srgb, var(--primary-dark) 35%, #fff);
}

/* ────────────────────────────────────────────────────────────
   Breadcrumb helper (used across templates)
   ──────────────────────────────────────────────────────────── */

.is-breadcrumb {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.84rem;
	color: var(--muted);
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.is-breadcrumb a { color: var(--muted); text-decoration: none; }
.is-breadcrumb a:hover { color: var(--primary); }
.is-breadcrumb .is-breadcrumb-sep { color: var(--border); }
.is-breadcrumb .is-breadcrumb-current { color: var(--headline); font-weight: 600; }

/* ────────────────────────────────────────────────────────────
   Responsive — header / footer
   ──────────────────────────────────────────────────────────── */

@container sitenav (max-width: 720px) {
	.is-priority-nav-list { gap: 0; }
}

@media (max-width: 900px) {
	.is-footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
	:root {
		--smc-article-heading-offset: 96px;
	}

	.is-site-nav { display: none; }
	.is-footer-top { grid-template-columns: 1fr; gap: 26px; }
}

/* ════════════════════════════════════════════════════════════
   HOME (Phase 2) — hero, stats, categories, publications, FAQ, CTA band
   ════════════════════════════════════════════════════════════ */

/* ─── Shared section header (kicker + serif title + rule) ─── */
.is-section-label {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	color: var(--cat);
	margin: 0 0 0.5rem;
}

.is-section-title {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.75rem, 3vw, 2.125rem);
	line-height: 1.1;
	color: var(--headline);
	margin: 0;
}

.is-section-rule {
	height: 1px;
	background: var(--border);
	margin: 20px 0 0;
	border: 0;
}

/* ─── Hero (2-col: text + media) ───
   The handoff keeps the hero on white; the paper layer begins with the
   categories, publications and FAQ sections below. */
/* Soldat's home uses a continuous white canvas. Keep the shared paper token
   for the rest of the theme, but override only its baked home sections. */
body.home { background: #fff; }
body.home .has-paper-background-color { background-color: #fff !important; }
.is-home-hero { background: var(--card); }

.is-home-hero .is-home-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	padding-top: 62px;
	padding-bottom: 66px;
}

.is-hero-kicker {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-size: 12px;
	color: var(--cat);
	margin: 0 0 14px;
}

.is-home-hero h1 {
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -.3px;
	max-width: 17ch;
	margin: 0;
}

.is-home-hero h1 .is-hero-accent {
	color: var(--cat);
	font-style: normal;
}

.is-hero-lede {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 1.1875rem;
	line-height: 1.6;
	color: #56544d;
	margin: 18px 0 0;
	max-width: 44ch;
}

.is-hero-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	margin-top: 32px;
	flex-wrap: nowrap;
}

.is-hero-actions .is-btn-navy,
.is-hero-actions .is-btn-link {
	flex: none;
	white-space: nowrap;
}

/* Hero primary = navy button (distinct from the default gold CTA) */
.is-btn-navy .wp-block-button__link,
a.is-btn-navy {
	background: var(--primary);
	color: #fff;
	border-radius: var(--r-btn);
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 15px;
}
.is-btn-navy .wp-block-button__link:hover,
a.is-btn-navy:hover {
	background: var(--primary-light);
	filter: none;
}

/* Hero secondary = quiet beige button (sits next to the navy primary) */
.is-btn-link a,
a.is-btn-link,
.is-btn-link .wp-block-button__link {
	background: #EDEBE6;
	color: var(--primary-dark);
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	border: 1.5px solid #D9D5CB;
	border-radius: var(--r-btn);
	padding: 12px 22px;
	transition: background .16s ease, border-color .16s ease;
}
.is-btn-link a:hover,
a.is-btn-link:hover,
.is-btn-link .wp-block-button__link:hover {
	background: #E2DED4;
	border-color: #C9C4B8;
	color: var(--primary-dark);
	box-shadow: none;
	transform: none;
	filter: none;
}

.is-hero-media { position: relative; }
/* The handoff supplies no real hero asset: display its intentional placeholder
   until this slot is wired to a site-specific image. */
.is-hero-media .is-hero-ph {
	position: relative;
	overflow: hidden;
	height: 440px;
	border-radius: var(--r-card);
	background: #e6e2d7;
	background-image: repeating-linear-gradient(135deg, #ddd8ca 0 11px, #ece7da 11px 22px);
}

.is-hero-media .is-hero-ph::after {
	content: attr(data-label);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}
.is-hero-media .is-hero-image {
	display: block;
	height: 440px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-card);
	background: #e6e2d7;
}
.is-hero-media .is-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.is-hero-cap {
	position: absolute;
	left: 18px;
	bottom: 18px;
	background: rgba(20, 28, 46, .86);
	color: #fff;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 6px;
}

/* ─── Stats band (navy, 4 numbers) ─── */
.is-stats-bar { background: var(--primary); color: #fff; }
.is-stats-bar .wp-block-columns { gap: 0; }
.is-stat-number {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: clamp(2.25rem, 4vw, 2.875rem);
	line-height: 1;
	color: #fff;
	margin: 0 0 0.5rem;
}
.is-stat-number .is-stat-accent { color: var(--accent); }
.is-stat-label {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 15px;
	color: var(--muted-on-dark);
	margin: 0;
}

/* ─── Categories (horizontal rows) ─── */
.is-cat-list {
	margin-top: 34px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.is-cat-list > * { margin-block: 0; }

.is-cat-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 26px;
	align-items: center;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: 26px 30px;
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.is-cat-row:hover {
	transform: translateX(4px);
	border-color: var(--primary-light);
	box-shadow: 0 8px 22px rgba(27, 60, 114, .10);
}
.is-cat-ic {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--primary) 9%, #fff);
	display: grid;
	place-items: center;
	font-size: 24px;
	line-height: 1;
	color: var(--primary);
}
.is-cat-row .is-cat-body h3 {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.3125rem;
	color: var(--headline);
	margin: 0;
}
.is-cat-row .is-cat-body p {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: #5b5950;
	margin: 5px 0 0;
	max-width: 64ch;
}
.is-cat-arrow {
	font-family: "Lora", Georgia, serif;
	font-size: 24px;
	color: var(--primary);
}

/* Practice CTA that closes the categories list — a tinted card, not a row, so
   it reads as an offer rather than one more category. */
.is-cat-qcm {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 16px;
	min-height: 128px;
	box-sizing: border-box;
	background: color-mix(in srgb, var(--primary) 8%, var(--card));
	border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
	border-radius: var(--r-card);
	padding: 26px 30px;
	text-decoration: none;
	transition: border-color .16s ease;
}
.is-cat-qcm:hover {
	border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
}
.is-cat-qcm-ic {
	width: 46px;
	height: 46px;
	border-radius: 9px;
	background: #fff;
	color: var(--primary);
	display: grid;
	place-items: center;
	flex: none;
}
.is-cat-qcm-ic svg { width: 24px; height: 24px; }
.is-cat-qcm-body { flex: 1; min-width: 0; }
.is-cat-qcm-body h3 {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--headline);
	margin: 0;
}
.is-cat-qcm-body p {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--muted);
	margin: 4px 0 0;
}
.is-cat-qcm .is-cta-gold { flex: none; }

/* One-line practice nudge under a section title (categories, FAQ). */
.is-section-line {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.9375rem;
	color: var(--muted);
	margin: 14px 0 30px;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}
.is-section-line a {
	color: var(--primary);
	font-weight: 800;
	text-decoration: none;
	border-bottom: 1.5px solid var(--accent);
	padding-bottom: 1px;
}
.is-section-line a:hover { color: var(--cat); }

/* ─── Publications (featured + card grid) — reused on pillar pages ─── */
.is-pillar-featured {
	position: relative;
	display: grid;
	grid-template-columns: 1.18fr 1fr;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	overflow: hidden;
	margin-top: 34px;
}
.is-pillar-featured-image img {
	width: 100%;
	height: 100%;
	min-height: 360px;
	object-fit: cover;
	border-radius: 0;
}
.is-pillar-featured-body {
	padding: 44px 46px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.is-pillar-featured-cat,
.is-pillar-featured-cat a {
	display: block;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-size: 12px;
	color: var(--cat);
	text-decoration: none;
}
.is-pillar-featured-title,
.is-pillar-featured-title a {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1.18;
	color: var(--headline);
	margin: 14px 0 0;
	text-decoration: none;
}
.is-pillar-featured-excerpt {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	color: #5b5950;
	margin: 16px 0 0;
	max-width: 46ch;
}
.is-pillar-featured-date { margin: 18px 0 0; }

/* core/read-more renders the class straight onto the <a>, so this styles the
   anchor itself — no wrapper to double-box. */
.is-pillar-featured-more {
	align-self: flex-start;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--primary);
	background: transparent;
	border: 1.5px solid var(--border);
	border-radius: var(--r-btn);
	padding: 11px 20px;
	margin-top: 22px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.is-pillar-featured-more:hover {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.is-pillar-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 28px;
}
/* WordPress's post-template stylesheet resets `ul` margins with a more
   specific selector. Restore the handoff's 28px gutter after the featured
   article without changing generic .is-pillar-grid shortcode instances. */
ul.is-pillar-grid { margin-top: 28px !important; }
.is-pillar-card {
	position: relative;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 14px rgba(27, 60, 114, .08);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.is-pillar-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(27, 60, 114, .16);
	border-color: #d6d1c4;
}
.is-pillar-card-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 0;
}
/* Flex column so the meta row can be pinned to the bottom — card titles vary
   in length, and a ragged meta line across a grid reads as broken. */
.is-pillar-card-body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.is-pillar-card-cat,
.is-pillar-card-cat a {
	display: block;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-size: 11.5px;
	color: var(--cat);
	text-decoration: none;
}
.is-pillar-card-title,
.is-pillar-card-title a {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.3125rem;
	line-height: 1.25;
	color: var(--headline);
	margin: 9px 0;
	text-decoration: none;
}

/* A card has one semantic destination: its existing article-title link.
   Its pseudo-element expands that link over the full card, so image, excerpt
   and metadata are all tappable without introducing duplicate tab stops. */
.is-pillar-featured-title a::after,
.is-pillar-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.is-pillar-featured-title a:focus-visible,
.is-pillar-card-title a:focus-visible {
	outline: none;
}
.is-pillar-featured-title a:focus-visible::after,
.is-pillar-card-title a:focus-visible::after {
	box-shadow: inset 0 0 0 3px var(--accent);
	border-radius: var(--r-card);
}
.is-pillar-card-excerpt {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: #5b5950;
	margin: 0;
}
/* Meta row: chips styling comes from .is-reading-meta; here we only pin it to
   the bottom of the card body. */
.is-pillar-card-date {
	margin-top: auto;
	padding-top: 14px;
}

/* The reference keeps the reading meta and the small “Lire” affordance on
   one bottom row. The wrapper, rather than the meta itself, owns the flex
   spacer so cards with titles of different lengths still align. */
.is-pillar-card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	min-width: 0;
}
.is-pillar-card-meta .is-pillar-card-date {
	margin-top: 0;
	padding-top: 0;
	min-width: 0;
}

/* WordPress's generated flex-layout reset clears ordinary child margins.
   Keep the compact card CTA at the far edge of its metadata row. */
.is-pillar-card-meta > .is-card-read {
	margin-left: auto !important;
	align-self: center;
}

/* The article cards are already linked through their image and title. Keep the
   scan-friendly metadata row, without a second, redundant "Lire" control. */
.is-pillar-card .is-card-read,
.is-pillar-featured .is-pillar-featured-more {
	display: none;
}

/* ─── FAQ (accordion) — full width; the old right sidebar is gone, its QCM
   box now lives as the .is-cat-qcm card under the categories list ─── */
.is-faq-layout {
	margin-top: 34px;
}
.is-faq-list > * { margin-block: 0; }
.is-faq-item {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	margin-bottom: 16px;
	overflow: hidden;
}
.is-faq-question {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.1875rem;
	color: var(--headline);
	margin: 0;
	padding: 22px 26px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.is-faq-question::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--primary);
	border-bottom: 2px solid var(--primary);
	transform: rotate(45deg);
	transition: transform .22s ease;
	margin-top: -4px;
}
.is-faq-item.is-open .is-faq-question::after { transform: rotate(-135deg); margin-top: 4px; }
.is-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .28s ease;
}
.is-faq-item.is-open .is-faq-answer { max-height: 600px; }
.is-faq-answer {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 15.5px;
	line-height: 1.72;
	color: #5b5950;
}
.is-faq-answer p { margin: 0; padding: 0 26px 24px; }

/* Sidebar CTA (dark box) — pillar sidebar + single sidebar.
   `smc_pillar_cta` uses .is-pillar-sidebar-cta; keep the legacy selector so
   manually inserted classic CTAs stay visually identical. */
.is-sidebar-cta,
.is-pillar-sidebar-cta {
	background: var(--primary-dark);
	color: #fff;
	border-radius: var(--r-card);
	padding: 26px 24px;
	text-align: center;
}
/* Newsletter CTAs in the article rail need a denser rhythm than the
   full-width legacy CTA: this keeps the summary visible alongside prose. */
.is-pillar-sidebar-cta { padding: 18px 24px 20px; }
.is-sidebar-cta h4,
.is-pillar-sidebar-cta .is-pillar-cta-title {
	font-family: "Lora", Georgia, serif;
	font-weight: 700;
	font-size: 1.3125rem;
	color: #fff;
	margin: 0;
}
.is-sidebar-cta p,
.is-pillar-sidebar-cta .is-pillar-cta-subtitle {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #cdd6e6;
	margin: 10px 0 16px;
}
.is-pillar-sidebar-cta .is-pillar-cta-subtitle { margin: 8px 0 12px; }
.is-sidebar-cta .wp-block-button__link,
.is-sidebar-cta .is-cta-gold,
.is-pillar-sidebar-cta .is-pillar-cta-button {
	width: 100%;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.is-pillar-sidebar-cta .is-pillar-cta-button-wrap {
	margin: 0;
}
/* Classic sidebar CTAs are rendered by the connector as a plain <a>, rather
   than a core/button. Give that link the same explicit, palette-aware button
   treatment so global WordPress link colours can never make it disappear on
   the dark rail. */
.is-pillar-sidebar-cta .is-pillar-cta-button {
	box-sizing: border-box;
	padding: 0 18px;
	border: 0;
	border-radius: var(--r-btn);
	background: var(--accent);
	color: var(--primary-dark) !important;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.is-pillar-sidebar-cta .is-pillar-cta-button:hover,
.is-pillar-sidebar-cta .is-pillar-cta-button:focus-visible {
	color: var(--primary-dark) !important;
	filter: brightness(1.04);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

/* The same sidebar slot becomes a newsletter form when no internal
   preparation is configured. Keep the field compact, accessible and free of
   the visible label/legal copy that would make the narrow card feel cramped. */
.is-pillar-sidebar-cta .is-pillar-cta-form { margin: 12px 0 0; }
.is-pillar-sidebar-cta .is-pillar-cta-form-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.is-pillar-sidebar-cta .is-pillar-cta-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.is-pillar-sidebar-cta .is-pillar-cta-input,
.is-pillar-sidebar-cta .is-pillar-cta-submit {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	border-radius: var(--r-btn);
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
}
.is-pillar-sidebar-cta .is-pillar-cta-input {
	border: 1px solid rgba(255, 255, 255, .32);
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font-size: 15px;
	padding: 0 14px;
}
.is-pillar-sidebar-cta .is-pillar-cta-input::placeholder { color: rgba(255, 255, 255, .70); }
.is-pillar-sidebar-cta .is-pillar-cta-input:focus { outline: none; border-color: var(--accent); }
.is-pillar-sidebar-cta .is-pillar-cta-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--accent);
	color: var(--primary-dark);
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
/* Shortcodes rendered by WordPress can bring harmless empty paragraphs and
   line breaks with them. They must not create visual gaps in the compact card. */
.is-pillar-sidebar-cta > p:not(.is-pillar-cta-title):not(.is-pillar-cta-subtitle),
.is-pillar-sidebar-cta .is-pillar-cta-form > br,
.is-pillar-sidebar-cta .is-pillar-cta-form > p:not(.is-pillar-cta-status):not(.is-pillar-cta-legal) { display: none; }
/* wpautop can also insert <br> nodes inside the flex row (and before the
   button label). Hide them: otherwise they become flex items and create a
   large artificial gap between the field and submit action. */
.is-pillar-sidebar-cta .is-pillar-cta-form-row br,
.is-article-banner-newsletter .is-pillar-cta-form-row br { display: none; }
.is-pillar-sidebar-cta .is-pillar-cta-legal { display: none; }
.is-pillar-sidebar-cta .is-pillar-cta-status {
	display: none;
	margin: 10px 0 0;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: #fff;
}
.is-pillar-sidebar-cta .is-pillar-cta-status.is-error { display: block; }

/* Sidebar / list box — rendered by [smc_pillar_categories] and
   [smc_pillar_popular] (both wrap in .is-pillar-sidebar-box). */
.is-pillar-sidebar-box {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: 0 22px 12px;
	overflow: hidden;
}
/* Negative margins pull the header out to the box edges so it reads as a
   titled panel rather than a heading floating inside a card. */
.is-pillar-sidebar-title {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 12px;
	color: var(--headline);
	background: color-mix(in srgb, var(--primary) 12%, #fff);
	border-bottom: 1px solid var(--border);
	border-radius: var(--r-card) var(--r-card) 0 0;
	margin: 0 -22px 4px;
	padding: 13px 22px;
}

/* Category rows (label + count pill) */
.is-pillar-cat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid var(--border);
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.9rem;
	color: var(--text);
	text-decoration: none;
	transition: color .15s ease;
}
.is-pillar-cat-row:last-child { border-bottom: 0; }
.is-pillar-cat-row:hover,
.is-pillar-cat-row.is-current { color: var(--primary); font-weight: 700; }
.is-pillar-cat-count {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	color: var(--muted);
	background: var(--paper-2);
	border-radius: 999px;
	padding: 2px 10px;
}
.is-pillar-cat-count.is-current {
	background: color-mix(in srgb, var(--primary) 12%, #fff);
	color: var(--primary);
}

/* "Also worth reading" list — thumbnail + title + reading time */
.is-pillar-popular-item {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 13px;
	align-items: center;
	padding: 13px 0;
	border-bottom: 1px solid var(--border);
	text-decoration: none;
}
.is-pillar-popular-item:last-child { border-bottom: 0; }
.is-pillar-popular-thumb {
	width: 62px;
	height: 54px;
	border-radius: 6px;
	object-fit: cover;
	display: block;
	flex: none;
}
.is-pillar-popular-thumb-empty {
	background: color-mix(in srgb, var(--primary) 8%, var(--paper-2));
}
.is-pillar-popular-body { min-width: 0; }
.is-pillar-popular-title {
	display: block;
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.28;
	color: var(--headline);
	margin-bottom: 5px;
	transition: color .15s ease;
}
.is-pillar-popular-item:hover .is-pillar-popular-title { color: var(--primary-light); }
.is-pillar-popular-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.69rem;
	color: var(--muted);
}
.is-pillar-popular-time .is-ic { width: 13px; height: 13px; flex: none; }

/* ─── CTA band (navy, email capture) — reused on pillar ─── */
.is-cta-band-dark { background: var(--primary); color: #fff; text-align: center; }
/* Collapse the band when its CTA is suppressed (e.g. a self-referential href on
   its own category pillar): the smc_pillar_cta shortcode returns nothing, but
   the band wrapper is baked into the pillar template. The shortcode always
   emits .is-pillar-cta-band (button OR capture form) when it has content, so
   this hides only the genuinely empty bands. */
.is-cta-band-dark:not(:has(.is-pillar-cta-band)) { display: none; }
.is-cta-band-dark .is-pillar-cta-title {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: clamp(1.75rem, 3.5vw, 2.125rem);
	line-height: 1.18;
	color: #fff;
	max-width: 22ch;
	margin: 0 auto;
	text-align: center;
}
.is-cta-band-dark .is-pillar-cta-subtitle {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 16.5px;
	color: #cdd6e6;
	margin: 16px auto 0;
	max-width: 54ch;
	line-height: 1.6;
	text-align: center;
}
/* With an internal preparation, smc_pillar_cta renders a plain anchor rather
   than the email form below. It needs the same explicit button treatment as
   the sidebar CTA: WordPress's global link colours otherwise make it blend
   into the dark band. */
.is-cta-band-dark .is-pillar-cta-button-wrap {
	margin: 28px auto 0;
	text-align: center;
}
.is-cta-band-dark .is-pillar-cta-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--r-btn);
	background: var(--accent);
	color: var(--primary-dark) !important;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.is-cta-band-dark .is-pillar-cta-button:hover,
.is-cta-band-dark .is-pillar-cta-button:focus-visible {
	color: var(--primary-dark) !important;
	filter: brightness(1.04);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.is-cta-band-dark .is-pillar-cta-form {
	display: flex;
	max-width: 460px;
	margin: 28px auto 0;
	gap: 10px;
}
.is-cta-band-dark .is-pillar-cta-form-row { display: flex; gap: 10px; width: 100%; }
.is-cta-band-dark .is-pillar-cta-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.is-cta-band-dark .is-pillar-cta-legal,
.is-cta-band-dark .is-pillar-cta-status:empty { display: none; }
.is-cta-band-dark .is-pillar-cta-input {
	flex: 1;
	height: 50px;
	border-radius: var(--r-field);
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	padding: 0 16px;
}
.is-cta-band-dark .is-pillar-cta-input::placeholder { color: rgba(255, 255, 255, .6); }
.is-cta-band-dark .is-pillar-cta-input:focus { outline: none; border-color: var(--accent); }
.is-cta-band-dark .is-pillar-cta-submit {
	height: 50px;
	border: 0;
	border-radius: var(--r-btn);
	background: var(--accent);
	color: var(--primary-dark);
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 15px;
	padding: 0 22px;
	cursor: pointer;
}

/* ─── Home responsive ─── */
@media (max-width: 1000px) {
	.is-home-hero .is-home-hero-grid { grid-template-columns: 1fr; gap: 38px; padding-top: 48px; padding-bottom: 52px; }
	.is-hero-media .is-hero-ph { height: 320px; }
	.is-hero-media .is-hero-image { height: 320px; }
	.is-faq-layout { grid-template-columns: 1fr; }
	.is-pillar-featured { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	/* The design handoff turns the four desktop stats into a calm 2 × 2 grid:
	   spacing belongs to the grid, not to every individual column. */
	.is-stats-bar .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 0 !important;
		padding-top: 54px !important;
		padding-bottom: 54px !important;
	}
	.is-stats-bar .wp-block-column {
		width: auto !important;
		flex-basis: auto !important;
		min-width: 0;
		padding: 0 !important;
	}
	.is-stats-bar .is-stat-number {
		font-size: 46px;
		margin-bottom: 10px !important;
	}
	.is-stats-bar .is-stat-label { margin: 0 !important; }
	.is-cat-row { grid-template-columns: auto 1fr; }
	.is-cat-arrow { display: none; }
	.is-pillar-grid { grid-template-columns: 1fr; }
	.is-pillar-featured-image img { min-height: 240px; }
	.is-home-hero h1 { max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   PILLAR / CATEGORY PAGE (Phase 3)
   ════════════════════════════════════════════════════════════ */

/* Breadcrumb bar (light, under the header) */
.is-breadcrumb-bar {
	background: var(--card);
	border-bottom: 1px solid var(--border);
}
/* A breadcrumb is navigation within the same editorial grid as the page
   below it. WordPress otherwise constrains the direct paragraph to the
   narrower prose measure (720px), which made it appear detached/centred. */
.is-breadcrumb-bar > .is-breadcrumb {
	width: 100%;
	max-width: var(--wp--style--global--wide-size) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: left !important;
}

/* Category intro — the handoff keeps this editorial entry area white; the
   separator and cards provide all the structure it needs without a cream
   panel competing with the content. */
.is-pillar-intro { background: #fff; }
.is-pillar-intro h1 {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: .2px;
	margin: 0;
}
.is-pillar-intro-desc {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	color: #56544d;
	margin: 16px 0 0;
	max-width: 64ch;
}
/* Category pages deliberately go straight from lede to the divider (as in the
   handoff). The kicker and count are therefore not part of the visible page
   chrome; this also avoids an awkward "1 articles" state. */
.is-pillar-intro > .alignwide > .is-section-label,
.is-pillar-intro > .alignwide > .is-pillar-hero-count {
	display: none;
}
.is-pillar-intro .is-section-rule {
	margin-top: 30px;
}
/* Article count meta ("16 articles"), rendered by [smc_pillar_article_count]. */
.is-pillar-hero-count {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	color: var(--muted);
	margin: 18px 0 0;
}

/* Category body: article list + sticky sidebar */
.is-pillar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 40px;
	align-items: start;
}
.is-pillar-side {
	display: flex;
	flex-direction: column;
	gap: 22px;
	position: sticky;
	top: 24px;
}

/* Section head above the list: kicker + title on the left, "see all" right */
.is-list-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}
.is-list-head .is-section-label { margin: 0; }
.is-list-head h2 {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.625rem;
	color: var(--headline);
	margin: 7px 0 0;
}
.is-list-head-all {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.84rem;
	color: var(--primary);
	white-space: nowrap;
	text-decoration: none;
}
.is-list-head-all:hover { color: var(--primary-light); }

/* Article grid — 2 columns beside the sidebar, 3 when full-width (blog index) */
.is-article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.is-article-grid > * { margin-block: 0; }

.is-pillar-layout .is-article-grid {
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

/* core/post-template wraps every card in an <li>, so the grid item is the <li>,
   not the card. The card has to fill it — otherwise it keeps its content height
   and the bottom-pinned meta row (margin-top:auto) has no slack to push against,
   leaving the meta lines ragged across a row. */
.is-article-grid > li,
.is-pillar-grid > li {
	display: flex;
	min-width: 0;
}
.is-article-grid > li > .is-pillar-card,
.is-pillar-grid > li > .is-pillar-card {
	flex: 1;
	min-width: 0;
}

/* First card of a category runs full width, image beside the text — the lead
   article deserves more room than a tile. The 2-col split goes on the card
   itself; the <li> only carries the column span. */
.is-pillar-layout .is-article-grid > li:first-child {
	grid-column: 1 / -1;
}
.is-pillar-layout .is-article-grid > li:first-child > .is-pillar-card {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	padding: 0;
}
.is-pillar-layout .is-article-grid > li:first-child .is-pillar-card-image img {
	height: 100%;
	min-height: 250px;
}
.is-pillar-layout .is-article-grid > li:first-child .is-pillar-card-body {
	padding: 30px 32px;
	justify-content: center;
}
.is-pillar-layout .is-article-grid > li:first-child .is-pillar-card-title {
	font-size: 1.5625rem;
	line-height: 1.2;
}
.is-pillar-layout .is-article-grid > li:first-child .is-pillar-card-excerpt {
	font-size: 0.9375rem;
}
.is-pillar-layout .is-article-grid > li:first-child .is-pillar-card-date {
	margin-top: 16px;
	padding-top: 0;
}

/* Pagination */
.is-pillar-pagination { gap: 10px; align-items: center; }
.is-pillar-pagination .wp-block-query-pagination-previous,
.is-pillar-pagination .wp-block-query-pagination-next,
.is-pillar-pagination .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r-btn);
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--text);
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.is-pillar-pagination .page-numbers.current,
.is-pillar-pagination .page-numbers:hover,
.is-pillar-pagination .wp-block-query-pagination-previous:hover,
.is-pillar-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--primary);
	background: var(--primary);
	color: #fff;
}

/* Pagination ellipsis between page-number runs */
.is-pillar-pagination .page-numbers.dots {
	min-width: 24px;
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--muted);
}
.is-pillar-pagination .page-numbers.dots:hover {
	background: transparent;
	color: var(--muted);
}

@media (max-width: 980px) {
	.is-pillar-layout { grid-template-columns: 1fr; gap: 34px; }
	.is-pillar-side { position: static; }
}
@media (max-width: 900px) {
	.is-article-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
	.is-article-grid,
	.is-pillar-layout .is-article-grid { grid-template-columns: 1fr; }
	/* The lead card loses its side-by-side split on a phone. */
	.is-pillar-layout .is-article-grid > li:first-child > .is-pillar-card { grid-template-columns: 1fr; }
	.is-pillar-layout .is-article-grid > li:first-child .is-pillar-card-image img { min-height: 200px; }
}

/* ════════════════════════════════════════════════════════════
   SINGLE ARTICLE (Phase 4)
   ════════════════════════════════════════════════════════════ */

/* Reading progress bar (fixed, gold) */
.is-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--accent);
	z-index: 9999;
	transition: width .1s linear;
}

/* Article header — centred (breadcrumb bar handled by .is-breadcrumb-bar).
   The lede stays left-aligned inside its centred column: centred body copy is
   hard to read past a line or two. */
.is-article-header { background: var(--card); }
.is-article-kicker,
.is-article-kicker a {
	display: block;
	text-align: center;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2.5px;
	font-size: 12px;
	color: var(--cat);
	text-decoration: none;
	margin: 0 0 12px;
}
.is-article-title {
	text-align: center;
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: .2px;
	max-width: 24ch;
	margin: 12px auto 0;
}
.is-article-lead {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 19px;
	line-height: 1.65;
	color: #56544d;
	max-width: 66ch;
	margin: 18px auto 0;
	text-align: left;
}

/* Meta block: byline on one line, chips row under it, both centred */
.is-article-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 24px 0 0;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 14.5px;
	color: var(--muted);
}
.is-article-byline {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.875rem;
	color: var(--headline);
}
.is-article-byline strong { font-weight: 800; }
.is-article-meta-chips {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
/* Chips here are outlined (not filled like the card chips) so the metadata
   stays secondary to the article title on the white header. */
.is-article-meta-chips .is-meta-chip,
.is-updated-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.78rem;
	color: var(--primary);
	background: color-mix(in srgb, var(--primary) 7%, #fff);
	border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--border));
	border-radius: 999px;
	padding: 6px 13px;
}
.is-article-meta-chips .is-meta-chip .is-ic,
.is-updated-pill .is-ic { width: 15px; height: 15px; flex: none; }
/* The header renders its own chips row, so the shared meta component must not
   also lay itself out as a flex row here. */
.is-article-meta .is-reading-meta { display: contents; }

/* Hero image: a deliberate editorial crop keeps the article opening compact
   on wide screens, rather than growing with the source image ratio. */
.is-article-hero-img {
	margin: 26px 0 0;
	height: 420px;
	overflow: hidden;
	border-radius: var(--r-card);
	aspect-ratio: auto !important;
}
.is-article-hero-img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	border-radius: inherit;
	display: block;
}

/* 2-column body: prose + sticky sidebar */
.is-article-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 54px;
	align-items: start;
}
.is-article-main,
.is-article-prose { min-width: 0; }
/* Clears the sticky header (80px) + nav bar (62px) on single. */
.is-article-side {
	position: sticky;
	top: 160px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
/* Prevent the parent FSE flow layout from adding a second, invisible margin
   before the rail — particularly noticeable once the rail stacks on mobile. */
.is-article-wrap > .is-article-side { margin-block: 0; }
/* The FSE flow layout adds a second block margin to the TOC. The flex gap is
   already the source of truth for this rail, so remove that hidden extra gap. */
.is-article-side > * { margin-block: 0; }

/* ─── Prose (article body) ─── */
.is-article-prose > * { max-width: 100%; }
.is-article-prose p,
.is-article-prose li {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 17.5px;
	line-height: 1.85;
	color: var(--text);
}
.is-article-prose > p:first-of-type::first-letter {
	float: left;
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 58px;
	line-height: .82;
	color: var(--primary);
	padding: 6px 10px 0 0;
}
.is-article-prose h2 {
	font-size: clamp(1.6rem, 3vw, 1.875rem);
	font-weight: 600;
	color: var(--headline);
	border-bottom: 2px solid var(--border);
	padding-bottom: 0.4rem;
	margin: 2.5rem 0 1.1rem;
	scroll-margin-top: var(--smc-article-heading-offset);
}
.is-article-prose h3 {
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--headline);
	border-left: 3px solid var(--accent);
	padding-left: 16px;
	margin: 2rem 0 0.9rem;
	scroll-margin-top: 90px;
}
.is-article-prose a {
	color: var(--primary);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
	text-underline-offset: 3px;
}
.is-article-prose a:hover {
	background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.is-article-prose img { border-radius: var(--r-card); height: auto; }
.is-article-prose ul, .is-article-prose ol { padding-left: 1.4rem; }
.is-article-prose li { margin: 0.35rem 0; }

/* Bare markdown table */
.is-article-prose table {
	width: 100%;
	/* Separate borders keep the rounded outer frame visible on desktop as
	   well as on the block-scrolling mobile version. */
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--card);
	margin: 1.75rem 0;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 15.5px;
}
.is-article-prose thead th {
	background: var(--primary);
	color: #fff;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-size: 13px;
	padding: 14px 18px;
}
.is-article-prose tbody td { padding: 13px 18px; border-top: 1px solid var(--border); }
.is-article-prose tbody tr:nth-child(even) { background: var(--paper); }
.is-article-prose tbody td:first-child { font-weight: 700; color: var(--headline); }
.is-article-prose thead th:first-child { border-top-left-radius: calc(var(--r-card) - 1px); }
.is-article-prose thead th:last-child { border-top-right-radius: calc(var(--r-card) - 1px); }
.is-article-prose tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--r-card) - 1px); }
.is-article-prose tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--r-card) - 1px); }

/* Callout ("À retenir") + pull-quote (blockquote) — used if present in content */
.is-article-prose .is-callout,
.is-callout {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	background: color-mix(in srgb, var(--primary) 6%, #fff);
	border-left: 4px solid var(--accent);
	border-radius: 0 var(--r-card) var(--r-card) 0;
	padding: 22px 24px;
	margin: 2rem 0;
}
.is-callout > :first-child { margin-top: 0; }
.is-callout > :last-child { margin-bottom: 0; }
.is-article-prose blockquote {
	border-left: 4px solid var(--primary);
	padding: 6px 0 6px 26px;
	margin: 2rem 0;
	font-family: "Lora", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 1.4375rem;
	line-height: 1.4;
	color: var(--headline);
}

/* Inline article CTA (bordered) — used if present in content */
.is-article-cta {
	border: 2px solid var(--primary-light);
	background: color-mix(in srgb, var(--primary) 6%, #fff);
	border-radius: var(--r-card);
	padding: 30px 32px;
	margin: 2.25rem 0;
	text-align: center;
}
.is-article-cta > :first-child { margin-top: 0; }
.is-article-cta > :last-child { margin-bottom: 0; }

/* ─── Table of contents (timeline) — [smc_article_toc] ─── */
.is-article-toc {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: 20px 22px;
}
.is-article-toc-title {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 12px;
	color: var(--cat);
	margin-bottom: 14px;
}
.is-article-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.is-article-toc-list::before {
	content: "";
	position: absolute;
	/* Marker is 14px + 2px border on each side = 18px wide; centre the
	   2px timeline precisely through that 18px circle. */
	left: 8px;
	top: 6px;
	bottom: 10px;
	width: 2px;
	background: var(--border);
}
/* Gold fill over the grey track — height is driven by --toc-progress, set by
   the scroll-spy in interactions.js. */
.is-article-toc-list::after {
	content: "";
	position: absolute;
	left: 8px;
	top: 6px;
	width: 2px;
	height: var(--toc-progress, 0%);
	background: var(--accent);
	transition: height .2s ease;
}
.is-article-toc-list li { position: relative; z-index: 1; padding: 0 0 16px 24px; }
.is-article-toc-list li:last-child { padding-bottom: 0; }
.is-article-toc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--card);
	border: 2px solid var(--border);
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.is-article-toc-list li a {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #56544d;
	text-decoration: none;
	transition: color .2s ease;
}
.is-article-toc-list li.is-done::before { background: var(--accent); border-color: var(--accent); }
.is-article-toc-list li.is-done a { color: var(--text); }
.is-article-toc-list li.is-active a { color: var(--primary); font-weight: 700; }
.is-article-toc-list li.is-active::before {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* The article header owns a second, mobile-only rendering of the same TOC.
   It is deliberately separate from the desktop sticky rail so source order
   can put it straight after the featured image. */
.is-article-toc-mobile-section { display: none; }

/* ─── In-article banner CTA — [smc_article_cta] ─── */
.is-article-banner-wrap { margin: 2.25rem 0; }
.is-article-banner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px 28px;
	border-radius: var(--r-card);
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
		linear-gradient(135deg, var(--primary), var(--primary-dark));
	color: #fff;
}
@media (min-width: 640px) {
	.is-article-banner { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
.is-article-banner-title {
	display: block;
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.25rem;
	color: #fff;
}
.is-article-banner-subtitle {
	display: block;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .82);
	margin-top: 4px;
}
.is-article-banner .is-cta-gold { flex: none; }

/* Newsletter fallback inside an article: it uses the same accessible form as
   the site-wide capture, but needs the banner's horizontal composition. */
.is-article-banner-newsletter .is-article-banner-text { flex: 1 1 280px; }
.is-article-banner-newsletter .is-pillar-cta-form {
	flex: 1 1 360px;
	max-width: 460px;
	margin: 0;
}
.is-article-banner-newsletter .is-pillar-cta-form-row {
	display: flex;
	gap: 10px;
	width: 100%;
}
.is-article-banner-newsletter .is-pillar-cta-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.is-article-banner-newsletter .is-pillar-cta-input {
	box-sizing: border-box;
	flex: 1;
	min-width: 0;
	height: 50px;
	border-radius: var(--r-field);
	border: 1px solid rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	padding: 0 16px;
}
.is-article-banner-newsletter .is-pillar-cta-input::placeholder { color: rgba(255, 255, 255, .68); }
.is-article-banner-newsletter .is-pillar-cta-input:focus { outline: none; border-color: var(--accent); }
.is-article-banner-newsletter .is-pillar-cta-submit {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	height: 50px;
	border: 0;
	border-radius: var(--r-btn);
	background: var(--accent);
	color: var(--primary-dark);
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
	padding: 0 22px;
	cursor: pointer;
}
.is-article-banner-newsletter .is-pillar-cta-legal { display: none; }
.is-article-banner-newsletter .is-pillar-cta-status {
	display: none;
	margin: 10px 0 0;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	color: #fff;
}
.is-article-banner-newsletter .is-pillar-cta-status.is-error { display: block; }

/* ─── In-article CTA card — [smc_article_cta], see smc_render_exam_cta_card.
   The partner block (logo / rating / member count) only renders when the site
   actually configured one; unbranded sites get the same card, figure-free. ─── */
.is-exam-cta {
	background: linear-gradient(135deg, #fff 55%, color-mix(in srgb, var(--accent) 18%, #fff));
	border: 1px solid color-mix(in srgb, var(--accent) 40%, #fff);
	border-radius: 18px;
	box-shadow: 0 18px 44px color-mix(in srgb, var(--primary) 14%, transparent);
	padding: 24px 26px;
	margin: 2.25rem 0;
}
.is-exam-cta-head {
	display: flex;
	align-items: center;
	gap: 15px;
}
.is-exam-cta-logo {
	width: 50px;
	height: 50px;
	border-radius: 13px;
	background: color-mix(in srgb, var(--primary) 10%, #fff);
	color: var(--primary);
	display: grid;
	place-items: center;
	flex: none;
	overflow: hidden;
}
.is-exam-cta-logo svg { width: 28px; height: 28px; }
.is-exam-cta-logo img { width: 100%; height: 100%; object-fit: contain; }
.is-exam-cta-heading { display: block; }
.is-exam-cta-kicker {
	display: block;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 0.72rem;
	color: var(--cat);
}
.is-exam-cta-title {
	display: block;
	font-family: "Lora", Georgia, serif;
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.18;
	color: var(--headline);
	margin: 4px 0 0;
}
.is-exam-cta-subtitle {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--text);
	margin: 14px 0 0;
}
.is-exam-cta-foot {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 18px;
	flex-wrap: wrap;
}
.is-exam-cta .is-exam-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	justify-content: center;
	background: var(--primary-dark);
	color: #fff !important;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 0.875rem;
	padding: 12px 19px;
	border-radius: 10px;
	line-height: 1.2;
	text-decoration: none !important;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.is-exam-cta .is-exam-cta-btn:hover,
.is-exam-cta .is-exam-cta-btn:focus-visible {
	background: var(--primary);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(27, 60, 114, .28);
}
.is-exam-cta-btn .is-ic { width: 17px; height: 17px; }
.is-exam-cta-stat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.84rem;
	color: var(--headline);
	background: #fff;
	border: 1px solid #EBE3D7;
	padding: 11px 15px;
	border-radius: 999px;
}
.is-exam-cta-stat .is-ic { width: 16px; height: 16px; }
.is-exam-cta-stat .is-ic-star { color: var(--accent); }

/* ─── Share row (end of article) — [smc_article_share] ─── */
.is-article-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 42px;
	padding: 20px 26px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: var(--paper);
}
.is-article-share-label {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-size: 0.75rem;
	color: var(--muted);
}
.is-article-share-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
.is-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s ease, border-color .15s ease;
}
.is-share-btn .is-ic { width: 17px; height: 17px; }
.is-share-btn-ghost {
	color: var(--headline);
	background: #fff;
	border: 1px solid var(--border);
}
.is-share-btn-ghost:hover { border-color: #2f9e5b; }
.is-share-btn-ghost .is-ic { color: #2f9e5b; }
.is-share-btn-solid {
	color: #fff;
	background: #1b2436;
	border: 1px solid #1b2436;
}
.is-share-btn-solid:hover { background: #111827; }

.is-share-menu-wrap { position: relative; }
.is-share-menu {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(20, 30, 55, .14);
	padding: 8px;
	min-width: 210px;
	display: flex;
	flex-direction: column;
	z-index: 20;
}
.is-share-menu[hidden] { display: none; }
.is-share-menu a {
	display: flex;
	align-items: center;
	gap: 13px;
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 0.96rem;
	color: var(--headline);
	text-decoration: none;
	padding: 9px 12px;
	border-radius: 11px;
}
.is-share-menu a:hover { background: var(--paper); }

/* ─── Related posts — centred head with a gold rule under it ─── */
.is-related-posts { margin: 3rem 0 0; }
.is-related-posts-title {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 12px;
	color: var(--cat);
	text-align: center;
	margin-bottom: 0;
}
.is-related-posts-heading {
	font-family: "Lora", Georgia, serif;
	font-weight: 600;
	font-size: 1.875rem;
	color: var(--headline);
	text-align: center;
	margin: 8px 0 0;
}
.is-related-posts-rule {
	width: 64px;
	height: 3px;
	background: var(--accent);
	border: 0;
	border-radius: 2px;
	margin: 14px auto 32px;
}

/* Single tags */
.is-single-tags {
	font-family: "Mulish", ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
	color: var(--muted);
	margin-top: 2rem;
}

@media (min-width: 901px) {
	/* Keep the CTA and its table of contents available while reading. If a
	   long TOC is taller than the viewport, only this small rail scrolls. */
	.is-article-side {
		position: sticky;
		top: 160px;
		align-self: start;
		gap: 16px;
		height: fit-content;
		max-height: calc(100vh - 184px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 4px;
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--primary) 34%, transparent) transparent;
	}
}

@media (max-width: 900px) {
	.is-article-wrap { grid-template-columns: 1fr; gap: 16px; }
	/* This rail is desktop-only: it contains both the sticky CTA and the
	   desktop summary. Mobile gets its own toggle directly after the visual;
	   leaving the rail in the flow would append a duplicate CTA after the
	   article. */
	.is-article-side { display: none; }
	/* Markdown tables can be wider than a phone. Keep their own scroll area
	   instead of letting their intrinsic width push the whole page sideways. */
	.is-article-prose table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* The mobile counterpart is rendered above the prose, after the visual. */
	.is-article-toc-mobile-section {
		display: block;
		background: var(--card);
		padding: 0 2rem 2rem;
		margin-block: 0 !important;
	}
	.is-article-toc-mobile-wrap,
	.is-article-toc-mobile-wrap > * { margin-block: 0 !important; }
	.is-article-toc-mobile-wrap .is-article-toc {
		padding: 0;
		overflow: hidden;
		border-radius: 16px;
	}
	.is-article-toc-mobile-wrap .is-article-toc-toggle {
		appearance: none;
		width: 100%;
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 20px 22px;
		background: transparent;
		border: 0;
		color: var(--headline);
		font-family: "Lora", Georgia, serif;
		font-size: 1.1875rem;
		font-weight: 700;
		text-align: left;
		cursor: pointer;
	}
	.is-article-toc-mobile-wrap .is-article-toc-toggle-icon {
		display: inline-flex;
		color: var(--accent);
	}
	.is-article-toc-mobile-wrap .is-article-toc-toggle-icon svg,
	.is-article-toc-mobile-wrap .is-article-toc-toggle-chevron {
		width: 20px;
		height: 20px;
		flex: none;
	}
	.is-article-toc-mobile-wrap .is-article-toc-toggle-chevron {
		margin-left: auto;
		color: var(--muted);
		transition: transform .2s ease;
	}
	.is-article-toc-mobile-wrap .is-article-toc-toggle[aria-expanded="true"] {
		border-bottom: 1px solid var(--border);
	}
	.is-article-toc-mobile-wrap .is-article-toc-toggle[aria-expanded="true"] .is-article-toc-toggle-chevron {
		transform: rotate(180deg);
	}
	.is-article-toc-mobile-wrap .is-article-toc-list {
		padding: 16px 22px 22px;
	}
	.is-article-toc-mobile-wrap .is-article-toc-list::before,
	.is-article-toc-mobile-wrap .is-article-toc-list::after,
	.is-article-toc-mobile-wrap .is-article-toc-list li::before { display: none; }
	.is-article-toc-mobile-wrap .is-article-toc-list li { padding: 0 0 16px; }
	.is-article-toc-mobile-wrap .is-article-toc-list li a {
		color: var(--primary);
		font-size: 14px;
	}
	.is-article-share { flex-direction: column; align-items: stretch; gap: 12px; }
	.is-article-share-actions { justify-content: space-between; }
}

@media (max-width: 639px) {
	/* Desktop flex bases are widths. Once the banner stacks, retaining them
	   would turn into artificial 280/360px heights. */
	.is-article-banner-newsletter .is-article-banner-text,
	.is-article-banner-newsletter .is-pillar-cta-form {
		flex: none;
		width: 100%;
		max-width: none;
	}
	.is-article-banner-newsletter .is-pillar-cta-form-row { flex-direction: column; }
	.is-article-banner-newsletter .is-pillar-cta-input,
	.is-article-banner-newsletter .is-pillar-cta-submit {
		flex: none;
		width: 100%;
		height: 50px;
		min-height: 50px;
	}
}

/* ════════════════════════════════════════════════════════════
   NARROW SCREENS — compact header, no horizontal overflow
   ════════════════════════════════════════════════════════════ */

@media (max-width: 680px) {
	.is-article-hero-img { height: 240px; }

	/* Header: shield only, gold CTA swapped for the compact "start" button,
	   nav collapsed behind the burger. */
	.is-site-header .wp-block-buttons,
	.is-site-header .is-header-newsletter-trigger { display: none; }
	.is-logo-text { display: none; }
	.is-header-start { display: inline-flex; margin-left: auto; }
	.is-header-burger { display: inline-flex; }
	.is-site-header .is-site-header-row {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 12px;
	}
	.is-site-header .is-header-start {
		margin-left: auto !important;
		margin-right: 0 !important;
	}
	/* In newsletter/no-CTA mode there is no compact start link before the
	   burger. Let the lone burger own the spacer and stay at the far right. */
	.is-site-header .is-site-logo-duo + .is-header-burger {
		margin-left: auto;
	}

	/* Nav becomes a stacked panel, opened by the burger. */
	.is-site-nav { display: none; }
	.is-site-nav.is-open { display: block; }
	.is-site-nav.is-open .is-site-nav-row { min-height: 0; padding: 8px 0; }
	.is-site-nav.is-open .is-priority-nav,
	.is-site-nav.is-open .is-priority-nav-list {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		overflow: visible;
	}
	.is-site-nav.is-open .is-priority-nav-list a {
		display: block;
		padding: 12px 8px;
		border-bottom: 1px solid var(--border);
	}
	/* The priority-plus overflow button is meaningless once the list is
	   stacked — everything already fits. */
	.is-site-nav.is-open .is-priority-nav-toggle { display: none !important; }

	/* Cards: the whole card is tappable, so the explicit read buttons go. */
	.is-card-read,
	.is-pillar-featured-more { display: none; }

	.is-hero-actions { flex-wrap: wrap; }
	.is-hero-lede { max-width: none; }

	.is-cat-qcm { flex-wrap: wrap; }
	.is-cat-qcm .is-cta-gold {
		box-sizing: border-box;
		flex: 0 0 100%;
		width: 100%;
		max-width: 100%;
		justify-content: center;
	}

	/* Email capture stacks rather than squeezing the input. */
	.is-cta-band-dark .is-pillar-cta-form,
	.is-cta-band-dark .is-pillar-cta-form-row { flex-direction: column; }
	.is-cta-band-dark .is-pillar-cta-input,
	.is-cta-band-dark .is-pillar-cta-submit {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		height: 56px;
	}
	/* WordPress's form reset can otherwise collapse the input back to its
	   intrinsic line height while the neighbouring submit keeps its height. */
	.is-cta-band-dark .is-pillar-cta-input {
		height: 56px !important;
		min-height: 56px;
	}

	.is-exam-cta-foot .is-exam-cta-btn { width: 100%; justify-content: center; }
}

/* The connector stylesheet is intentionally loaded after the theme for
   legacy article content. Give the shared theme table treatment one extra
   class of specificity so that it remains authoritative inside this theme. */
.entry-content.is-article-prose table {
	border: 1px solid var(--border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--r-card);
	overflow: hidden;
	background: var(--card);
}
.entry-content.is-article-prose table thead th {
	background: var(--primary);
	color: #fff;
}
.entry-content.is-article-prose table tbody td {
	border-top: 1px solid var(--border);
	border-bottom: 0;
}
.entry-content.is-article-prose table tbody tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 900px) {
	/* This must match the table rule above in specificity. Otherwise its
	   overflow:hidden would win and trap wide table columns off-screen. */
	.entry-content.is-article-prose table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-x pan-y;
	}
}

/* Keep both share actions on the same visual baseline. The menu wrapper is a
   flex item too, so its trigger cannot sit a few pixels lower than the copy
   button when WordPress applies its block defaults. */
.is-article-share-actions,
.is-share-menu-wrap {
	display: flex;
	align-items: center;
}
.is-share-menu-wrap { align-self: center; }
.is-share-btn {
	min-height: 44px;
	justify-content: center;
	line-height: 1;
}
.is-share-menu a {
	min-height: 42px;
}
.is-share-network-icon {
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}
.is-share-network-facebook .is-share-network-icon { background: #1877f2; font-family: Arial, sans-serif; font-size: 18px; font-weight: 700; }
.is-share-network-x .is-share-network-icon { background: #111; font-size: 13px; }
.is-share-network-linkedin .is-share-network-icon { background: #0a66c2; border-radius: 4px; font-size: 12px; }
.is-share-network-whatsapp .is-share-network-icon { background: #25d366; font-size: 16px; }

/* On a phone the sharing controls become two equal, centred actions. Keeping
   the menu trigger in the same vertical stack makes the row easy to scan and
   gives both touch targets the generous size shown in the mobile design. */
@media (max-width: 900px) {
	.is-article-share {
		align-items: center;
		text-align: center;
		justify-content: flex-start;
		gap: 18px;
		padding: 28px 24px;
		min-height: 0;
		height: auto;
	}
	.is-article-share-actions {
		width: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		flex: 0 0 auto;
		min-height: 0;
		height: auto;
	}
	.is-article-share-actions > .is-share-btn,
	.is-article-share-actions > .is-share-menu-wrap {
		width: 100%;
		max-width: 280px;
	}
	.is-share-menu-wrap { justify-content: center; }
	.is-share-btn {
		width: 100%;
		min-height: 56px;
		font-size: 1rem;
	}
	/* A shortcode block can be auto-paragraphed by WordPress even though the
	   share markup is already block-level. Those empty paragraphs become flex
	   items and create phantom vertical gaps between the controls. */
	.is-article-share > p:empty,
	.is-article-share-actions > p:empty,
	.is-share-menu-wrap > p:empty {
		display: none !important;
		margin: 0 !important;
	}
}