/*
Theme Name:        AFC Scholarship Fund
Theme URI:         https://afcscholarshipfund.org
Author:            AFC Scholarship Fund
Description:       AFC Scholarship Fund block theme — applies the AFC SF brand system (palette, typography, ad-style patterns).
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.1
Version:           0.7.1
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       afc
Tags:              block-theme, full-site-editing, one-column, featured-images, threaded-comments
*/

:where(.wp-block-group.has-background) {
	padding: 1.6em 2.375em;
}

/* Override WP's :where(.wp-site-blocks) > * block-gap margin.
 * Dropping :where() raises specificity from (0,0,1) to (0,1,1), which wins. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Site chrome only. Tokens + element/block defaults live in theme.json;
 * reusable block variants are registered in inc/block-styles.php;
 * per-block CSS ships from each block's own folder in mu-plugins/afc-core. */

/* Base .screen-reader-text rule ships with WP core (block-library).
 * Only override :focus styling for AFC brand colors. */
.screen-reader-text:focus {
	background-color: var(--wp--preset--color--paper);
	clip-path: none;
	color: var(--wp--preset--color--ink);
	display: block;
	font-size: 1rem;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

/* Skip link — visible only when focused. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-link:focus {
	position: fixed;
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	z-index: 100000;
	padding: 0.5rem 0.75rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	border-radius: 2px;
}

/* ==== Header ==== */
.afc-site-logo {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.afc-site-logo img {
	width: clamp(220px, 22vw, 314px);
	height: auto;
	display: block;
	transition: width 0.35s ease;
}

@media (min-width: 980px) {

	.afc-header.is-scrolled .afc-site-logo img {
		width: clamp(176px, 17.6vw, 251px); /* 80% of default — shrinks by 20% on scroll */
	}
}

/* Hero (or first content block) sits flush against the 120px header.
 * Three things conspire to add a 24px gap by default:
 *   1. wp-site-blocks block-gap puts 24px above <main>;
 *   2. main is .is-layout-flow, so its block-gap puts 24px above its
 *      post-content child — which on pages with no featured image is
 *      effectively the first visible content;
 *   3. without a BFC on main, that inner margin can collapse upward.
 * Zero (1) and (2), and use flow-root to contain descendant margins. */
:where(.wp-site-blocks) > main {
	margin-block-start: 0;
	display: flow-root;
}

:where(.wp-site-blocks) > main > .wp-block-post-content {
	margin-block-start: 0;
}

/* Sticky header: applied to the .wp-block-template-part wrapper because that
 * is the containing block for the <header> inside it. Applying sticky to the
 * <header> directly has no effect — sticky only works within its containing
 * block, and the wrapper is only as tall as the header itself. */
.wp-block-template-part:has(.afc-header) {
	position: sticky;
	/* Offset below the WP admin bar for logged-in users. The variable is set by
	 * WP (32px desktop / 46px ≤782px) only when the admin bar is present, so it
	 * falls back to 0 for logged-out visitors — same as before. */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* ≤600px WP makes the admin bar position:absolute so it scrolls away; pinning
 * the header below it would leave a gap, so stick to the very top instead. */
@media screen and (max-width: 600px) {
	.wp-block-template-part:has( .afc-header ) {
		top: 0;
	}
}

/* Disable scroll anchoring on the page scroller. When .is-scrolled shrinks the
 * header (~21px), the document gets shorter; scroll anchoring "helpfully"
 * compensates by yanking scrollY down by that same amount, which drags the
 * scroll position back across the shrink threshold and flips .is-scrolled on and
 * off forever — the header wobbles and never settles. Opting out keeps scrollY
 * fixed when the header resizes, so it shrinks once and stays put. */
html,
body {
	overflow-anchor: none;
}

.afc-header {
	position: relative;
	transition: padding 0.35s ease;
}

/* Scroll-shrink effects: desktop only — retained at full size on mobile. */
@media (min-width: 980px) {

	/* !important needed to override the inline padding set by the block editor.
	 * padding-top stays 0 (see header.html) — the utility nav sits directly
	 * above with its own 12px padding-bottom providing the only gap between
	 * the two rows; keeping the header's own top padding at 0 here too avoids
	 * that gap growing once scrolled. */
	.afc-header.is-scrolled {
		padding: 1em 2.375em !important;
		padding-top: 0 !important;
	}

	.afc-header.is-scrolled .afc-nav-cta {
		transform: scale(0.8);
	}
}

/* Honor reduced-motion: snap the scroll-shrink instead of animating it. */
@media (prefers-reduced-motion: reduce) {
	.afc-header,
	.afc-header .afc-site-logo img,
	.afc-header .wp-block-navigation,
	.afc-header .wp-block-navigation .wp-block-navigation-item__content,
	.afc-nav-cta {
		transition: none;
	}
}

/* CTA button in the header nav row */
.afc-nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	border: 2px solid var(--wp--preset--color--structure);
	border-radius: 10px;
	color: var(--wp--preset--color--structure);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transform-origin: right center;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.35s ease;
}

.afc-nav-cta:hover,
.afc-nav-cta:focus-visible {
	background-color: var(--wp--preset--color--structure);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.afc-nav-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 3px;
}

.afc-site-logo:focus-visible,
.wp-block-navigation a:focus-visible,
.afc-utility-nav__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Utility nav (AFC-81) — "For Parents" / "For Schools & SGOs", above the
 * primary header row. Lives in the same template-part/sticky wrapper as
 * .afc-header (see header.html) but is a separate <nav> landmark, distinct
 * from the primary wp:navigation block. */
.afc-utility-nav {
	display: flex;
	padding-bottom: 12px;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 15px;
}

.afc-utility-nav__link {
	color: var(--wp--preset--color--structure);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 500;
	line-height: 1; /* 100% */
	font-feature-settings: "liga" off, "clig" off;
	leading-trim: both;
	text-edge: cap;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.afc-utility-nav__link:hover {
	color: var(--wp--preset--color--action);
}

.afc-utility-nav__divider {
	width: 1px;
	height: 15px;
	background: #000;
	flex-shrink: 0;
}

/* Below 980px (the header's mobile breakpoint) the utility row is hidden;
 * header-scroll.js clones it into the hamburger overlay instead. */
@media (max-width: 980px) {

	.afc-utility-nav {
		display: none;
	}
}

/* Cloned copy inside the mobile nav overlay — hidden until the overlay opens,
 * then shown left-aligned above the primary nav items (mirrors the
 * .afc-nav-cta--mobile pattern below). */
.afc-utility-nav--mobile {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .afc-utility-nav--mobile {
	display: flex;
	justify-content: flex-start;
	padding-bottom: 10px;
}

/* Cloned site logo at the top of the mobile overlay — the overlay only
 * contains the primary nav's own items by default, so without this the menu
 * had no logo at all (see header-scroll.js). Hidden until the overlay opens,
 * matching the .afc-utility-nav--mobile / .afc-nav-cta--mobile pattern. */
.afc-site-logo--mobile {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .afc-site-logo--mobile {
	display: inline-flex;
	margin-bottom: 1.5rem;
}

/* ==== Footer ==== */

/* Direct children of the footer stack must fill the alignwide column.
 * Core's vertical flex layout sets align-items: flex-start, which would
 * otherwise leave each child only as wide as its content. */
.afc-footer-stack > * {
	align-self: stretch;
}

.afc-footer-logo {
	display: inline-flex;
	line-height: 0;
}

.afc-footer-logo img {
	display: block;
	width: clamp(8rem, 14vw, 15.75rem);
	height: auto;
}

/* Footer nav anchors live on the dark gradient — override the global
 * link color (action blue) so they read as white. */
.wp-block-navigation.afc-footer-nav a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper);
	text-decoration: none;
}

.wp-block-navigation.afc-footer-nav a.wp-block-navigation-item__content:hover,
.wp-block-navigation.afc-footer-nav a.wp-block-navigation-item__content:active,
.wp-block-navigation.afc-footer-nav a.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--paper);
}

.wp-block-navigation.afc-footer-nav :is(.current-menu-item, .current_page_item, .current-menu-ancestor) > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--paper);
}

/* Footer underline is white across all states. */
.wp-block-navigation.afc-footer-nav .wp-block-navigation-item > a.wp-block-navigation-item__content::after {
	background: var(--wp--preset--color--paper);
}

.afc-footer-logo:focus-visible,
.wp-block-navigation.afc-footer-nav a:focus-visible {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: 3px;
}

.afc-footer-tagline {
	font-weight: 600;
	line-height: 1.2;
}

/* Footer legal links (AFC-133): white, underlined row below the copyright line. */
.afc-footer-legal-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem; /* 24px column gap per Figma */
}

.afc-footer-legal-links a {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

.afc-footer-legal-links a:focus-visible {
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: 3px;
}

/* Mobile footer: match the Figma mobile mock — the nav and legal links become
 * left-aligned vertical stacks with even rhythm, instead of the desktop
 * right-justified row that wraps awkwardly (e.g. "3 items + 1") at phone widths. */
@media (max-width: 639px) {
	/* Stack the logo above the nav, both left-aligned, so the menu no longer
	 * gets pinned to the right edge by the desktop space-between row. */
	.afc-footer-top {
		flex-direction: column;
		align-items: flex-start;
	}

	.wp-block-navigation.afc-footer-nav,
	.wp-block-navigation.afc-footer-nav .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 1.25rem;
	}

	.afc-footer-legal-links {
		flex-direction: column;
	}
}

/* ==== Header responsive spacing ==== */

/* Override WordPress's default 600px mobile nav breakpoint to 980px for the header. */

/* Above 980px: always hide the hamburger button */
.afc-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: none;
}

/* Below 980px: show hamburger, hide desktop nav container, hide desktop CTA */
@media (max-width: 980px) {

	.afc-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.afc-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default):not(.always-shown) {
		display: none;
		visibility: hidden;
	}

	/* Hide the CTA button sitting next to the hamburger */
	.afc-header .wp-block-group .afc-nav-cta:not(.afc-nav-cta--mobile) {
		display: none;
	}
}

/* Mobile overlay: increase nav items and button to 150% of their mobile sizes.
 * Selector includes .afc-header to beat the 0.9rem !important rule from the
 * 1200px breakpoint, which also targets items inside the overlay. */
@media (max-width: 980px) {

	.afc-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
		font-size: 1.575rem !important; /* 105% of 1.5rem (150% × 70%) */
	}

	.afc-nav-cta--mobile {

		/* font-size set via .wp-block-navigation__responsive-container.is-menu-open rule above */
		font-size: 1.134rem;
	}
}

/* CTA button inside the mobile nav overlay — hidden until the overlay is open */
.afc-nav-cta--mobile {
	display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .afc-nav-cta--mobile {
	display: inline-flex;
	margin-top: 2rem;
	width: auto;
	font-size: 1.361rem;
}

/* No extra margin-top here — the overlay's own flex `gap` (see
 * .wp-block-navigation__responsive-container.is-menu-open
 * .wp-block-navigation__responsive-container-content) already spaces this
 * from the logo/utility-nav clones above it. */

@media (max-width: 1460px) {

	.afc-header .wp-block-navigation .wp-block-navigation__container {
		gap: 2.5rem !important;
	}

	.afc-header .wp-block-group .wp-block-group.is-layout-flex {
		gap: 2.5rem !important;
	}
}

@media (max-width: 1200px) {

	.afc-header .wp-block-navigation .wp-block-navigation__container {
		gap: 1.75rem !important;
	}

	.afc-header .wp-block-group .wp-block-group.is-layout-flex {
		gap: 1.75rem !important;
	}

	.afc-header .wp-block-navigation,
	.afc-header .wp-block-navigation .wp-block-navigation-item__content {
		font-size: 0.9rem !important;
	}

	.afc-nav-cta {
		font-size: 0.9rem;
	}
}

/* ==== Primary navigation ==== */
.afc-header .wp-block-navigation {
	font-size: 1.125rem !important; /* 18px — overrides has-nav-font-size preset */
	transition: font-size 0.35s ease;
}

.afc-header .wp-block-navigation .wp-block-navigation-item__content {
	font-size: 1.125rem;
	transition: font-size 0.35s ease;
}

@media (min-width: 980px) {

	.afc-header.is-scrolled .wp-block-navigation,
	.afc-header.is-scrolled .wp-block-navigation .wp-block-navigation-item__content {
		font-size: 1rem !important;
	}
}

.afc-header .wp-block-navigation-item__content {
	transition: color 0.25s ease;
}

.afc-header .wp-block-navigation-item:hover > a.wp-block-navigation-item__content,
.afc-header .wp-block-navigation-item > a.wp-block-navigation-item__content:active,
.afc-header .wp-block-navigation :is(.current-menu-item, .current_page_item, .current-menu-ancestor) > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--structure);
}

/* line-height tightens the nav baseline; font-family/weight/size come from
 * theme.json (Inter body font) + the header part's block attributes. */
.wp-block-navigation .wp-block-navigation-item__content {
	line-height: 1;
}

/* Suppress the global link-hover underline inside the nav — the active/hover
 * indicator is the structure-blue ::after below, not the default text-decoration. */
.wp-block-navigation a:hover {
	text-decoration: none;
}

/* Mobile hamburger + close toggles — larger tap target, clear icon.
 * Intentionally NOT setting display here: core's responsive rules hide
 * the open button at ≥600px and we must not override that. */
.wp-block-navigation .wp-block-navigation__responsive-container-open,
.wp-block-navigation .wp-block-navigation__responsive-container-close {
	padding: 0.5rem;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

/* Position the close button fixed over the hamburger's location.
 * --wp-admin--admin-bar--height is set by WP: 32px logged in, 0px logged out. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 2px);
	right: 8px;
	padding: 1.75rem clamp(1.25rem, 5vw, 5rem);
	z-index: 10001;
}

.wp-block-navigation .wp-block-navigation__responsive-container-open svg,
.wp-block-navigation .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Mobile overlay menu — left-aligned, structure-blue, reasonable spacing.
 * Core nav sets --navigation-layout-justification-setting on the inner
 * .wp-block-navigation.items-justified-* element itself, so a container-level
 * override loses to it. We re-declare the var on those same matched elements
 * inside the open overlay so left alignment wins. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation.items-justified-right,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation.items-justified-center,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation.items-justified-space-between {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open {
	gap: 1.5rem;
}

/* Padding goes on the content wrapper — the outer container is position:fixed
 * and the content wrapper is absolutely positioned inside it, so outer padding
 * is ignored by nested elements. */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	padding-top: clamp(1.2rem, 4.8vw, 2.4rem) !important;
	padding-bottom: clamp(1.2rem, 4.8vw, 2.4rem) !important;
	padding-left: clamp(2.5rem, 8vw, 5rem) !important;
	padding-right: clamp(2.5rem, 8vw, 5rem) !important;
	box-sizing: border-box;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
	color: var(--wp--preset--color--structure);
	font-size: 1.5rem;
	font-weight: 600;
	padding: 0;
}

/* Underline indicator: lives on every top-level nav link, scaled to 0 by
 * default, grows from the left on hover. Current/active items skip the
 * transition so there is no page-load replay. */
.wp-block-navigation .wp-block-navigation-item > a.wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation .wp-block-navigation-item > a.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.5rem;
	height: 2px;
	background: var(--wp--preset--color--action);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 350ms ease-out;
}

.wp-block-navigation :is(.wp-block-navigation-item:hover, .current-menu-item, .current_page_item, .current-menu-ancestor) > a.wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.wp-block-navigation :is(.current-menu-item, .current_page_item, .current-menu-ancestor) > a.wp-block-navigation-item__content::after {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {

	.wp-block-navigation .wp-block-navigation-item > a.wp-block-navigation-item__content::after {
		transition: none;
	}
}



/* ──────────────────────────────────────────────────────────────────────────
 * Editorial CPT components (Story / Article / Author Profile)
 *
 * These are content components shared across the CPT templates and the
 * afc-core dynamic blocks (byline, related-content, author-content-list,
 * eftc-hub, author-bio). They live here (not per-block) because they're
 * cross-template editorial styles; style.css is also registered as an editor
 * style, so ServerSideRender previews pick them up too.
 * ──────────────────────────────────────────────────────────────────────── */

/* Responsive card grid used by related content, the author content list,
 * the EFTC hub, and the Story archive query loop. */
.afc-content-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Single content card. */
.afc-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.afc-card__link {
	text-decoration: none;
	color: inherit;
}
/* Keyboard focus ring for the whole-card link (AFC-26/47/57 a11y — none existed
   before, so this is purely additive for every card consumer). */
.afc-card__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 3px;
	border-radius: 0.5rem;
}
.afc-card__image,
.afc-card .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	object-fit: cover;
}
.afc-card__title,
.afc-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--h-5, 1.25rem);
	margin: 0.25rem 0 0;
}
.afc-card__link:hover .afc-card__title,
.afc-card__link:focus-visible .afc-card__title {
	color: var(--wp--preset--color--link-hover, #006a98);
}
.afc-card__summary,
.afc-card .wp-block-post-excerpt {
	margin: 0;
	color: var(--wp--preset--color--ink);
	/* Centralised ~3-line truncation for every card variant (AFC-52).
	   text-wrap: pretty discourages orphan words where supported. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-wrap: pretty;
}

/* ============================================================================
 * Card System Foundation (AFC-52) — shared shell for content & promo cards.
 * Built from existing theme.json presets only (no new tokens). Consumed by the
 * card-grid, promo-grid and promo-card blocks; the three ServerSideRender
 * callers keep using the bare .afc-card / .afc-content-grid base above.
 * ========================================================================== */

/* Fixed-column grid variants layered over the auto-fill base .afc-content-grid:
   --2 (promo audience/tools), --3 (promo 3-up), --4 (editorial card grid). */
.afc-content-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}
.afc-content-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
.afc-content-grid--4 {
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 2vw, 1.75rem);
}
@media (max-width: 1023px) {
	.afc-content-grid--3,
	.afc-content-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 639px) {
	.afc-content-grid--2,
	.afc-content-grid--3,
	.afc-content-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* Section chrome: constrained inner, gradient heading + intro, optional CTA.
   Horizontal padding uses the site's canonical root-padding gutter so the
   card-grid / story-listing content lines up with the hero, faq, and the
   header/footer (AFC-85). Vertical uses the fluid Section preset — 100px at
   the desktop max (AFC-170). */
.afc-section__inner {
	max-width: var(--wp--style--global--wide-size, 1312px);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--85, clamp(3.5rem, 7vw, 6.25rem))
		var(--wp--style--root--padding-right, clamp(1.25rem, 5vw, 5rem));
}
/* Full-bleed bands sit flush: vertical rhythm comes from each band's own
   padding, so cancel WordPress's constrained-layout block-gap top margin
   (`:root :where(.is-layout-constrained) > *`, spec 0,1,0) — the two-class
   selectors (0,2,0) win. Same pattern afc/content-block uses block-locally. */
.afc-section.alignfull,
.wp-block-afc-cta-promo.alignfull,
.wp-block-afc-promo-grid.alignfull {
	margin-block-start: 0;
}
@media (max-width: 767px) {
	.afc-section__inner {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}
.afc-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	/* 44px intro→grid gap per the comps (no spacing preset equals 44px). */
	margin-bottom: 2.75rem;
}
@media (max-width: 639px) {
	.afc-section__header {
		flex-direction: column;
	}
}
.afc-section__header-left {
	flex: 1;
	min-width: 0;
}
.afc-section__header-right {
	flex-shrink: 0;
	display: flex;
	align-items: flex-end;
}
@media (max-width: 639px) {
	.afc-section__header-right {
		padding-top: 0;
	}
}
.afc-section__heading {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
	/* Gradient highlight heading — reuses the existing text-gradient preset
	   (#315889 → #0099CE); no new token introduced. */
	background: var(--wp--preset--gradient--text-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.afc-section__heading strong {
	font-weight: 700;
}
.afc-section__intro {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink);
	line-height: 1.55;
	margin: 0.75rem 0 0;
	max-width: 52rem;
}
.afc-section__cta {
	display: inline-block;
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--button);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	padding: 0.875rem 1.75rem;
	border-radius: 10px;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.afc-section__cta:hover,
.afc-section__cta:focus-visible {
	background-color: var(--wp--preset--color--link-hover);
	color: var(--wp--preset--color--paper);
	text-decoration: none;
	outline-offset: 2px;
}

/* Section background modifiers — mapped to existing palette presets. */
.afc-section--ink {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.afc-section--structure {
	background-color: var(--wp--preset--color--structure);
	color: var(--wp--preset--color--paper);
}
.afc-section--cream {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}
/* Split white→cream band (home audience routing, Figma 18352-15064). Same
   hard-stop-seam idea as Resource Center Tools (see end of file): the seam is
   measured straight down from the section top into the card images, so it lands
   the same fraction into the photos regardless of the (empty) header height. The
   full-bleed section paints the band; the opaque paper cards sit on top, so the
   seam only shows in the gutters and outer margins, exactly like the comp. The
   offset = inner top padding (--spacing--60) + the header's 2.75rem bottom margin
   + ~3/4 of the card image. */
.afc-section--split {
	--afc-split-seam: calc(
		var(--wp--preset--spacing--60) + 2.75rem + clamp(150px, 13vw, 230px)
	);
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--paper) 0,
		var(--wp--preset--color--paper) var(--afc-split-seam),
		var(--wp--preset--color--cream) var(--afc-split-seam),
		var(--wp--preset--color--cream) 100%
	);
	color: var(--wp--preset--color--ink);
}
/* The band bleeds full-width, but the cards stay centred in a narrower container
   than the site's wide-size — the comp frames them at ~1210px with generous
   side margins, so they don't run to the page edges. */
.afc-section--split .afc-section__inner {
	max-width: 1260px;
}
/* Match the comp's ~2:1 image crop (and the source photo aspect) so the subjects
   aren't clipped — the default promo-card image is 3:2, which is too tall-cropped
   here. Both cards stay equal-height because the grid columns are equal-width, so
   the seam still crosses both photos at the same fraction. */
.afc-section--split .afc-promo-card__image {
	aspect-ratio: 2 / 1;
}
/* Roomier inner padding on the audience cards to match the comp (~32px); the base
   promo-card uses 16px, which crowds the copy against the card edges here. */
.afc-section--split .afc-promo-card__eyebrow,
.afc-section--split .afc-promo-card__title,
.afc-section--split .afc-promo-card__body {
	padding-inline: 2rem;
}
/* Vertical rhythm to match the comp: ~32px from the image to the heading, 24px
   between the text rows, and 32px at the card foot. The base promo-card stacks
   these at a tight 12px gap / 16px foot, which reads cramped beside the 32px side
   padding. The body fills remaining height and the CTA bottom-aligns so the two
   cards' buttons sit on one line regardless of copy length. */
.afc-section--split .afc-promo-card {
	gap: 1.5rem;
	padding-bottom: 2rem;
}
.afc-section--split .afc-promo-card__title {
	/* Comp sets the audience card title at 48px; the base promo-card uses h-3
	   (max 36px), which reads small here. h-2 lands ~47px at this width and matches
	   the sibling resource-center card titles. (The gradient lives on the base.) */
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--h-2);
}
.afc-section--split .afc-promo-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1.5rem;
	padding-bottom: 0;
}
.afc-section--split .afc-promo-card__body > * {
	margin-block: 0;
}
.afc-section--split .afc-promo-card__body .wp-block-buttons {
	margin-top: auto;
}
/* Light band (Schools & SGOs two-card, Figma 18859-7807): plain paper section
   with flat cream cards — the inverse of the base paper-card-with-shadow. Same
   audience-card rhythm as --split (roomier padding, equal-height bodies with
   bottom-aligned CTAs), but the band paints nothing so the cream card shells
   carry the section's shape. */
.afc-section--light {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.afc-section--light .afc-promo-card {
	gap: 1.5rem;
	padding-bottom: 3rem;
	background-color: var(--wp--preset--color--cream);
	border-radius: 0.5rem;
	box-shadow: none;
}
/* Match the comp's wide ~2.4:1 crop (698x293) — the base 3:2 crops too tall. */
.afc-section--light .afc-promo-card__image {
	aspect-ratio: 12 / 5;
}
.afc-section--light .afc-promo-card__eyebrow,
.afc-section--light .afc-promo-card__title,
.afc-section--light .afc-promo-card__body {
	padding-inline: 2rem;
}
/* Comp eyebrow is ink, not the base action blue. */
.afc-section--light .afc-promo-card__eyebrow {
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
}
.afc-section--light .afc-promo-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1.5rem;
	padding-bottom: 0;
}
.afc-section--light .afc-promo-card__body > * {
	margin-block: 0;
}
.afc-section--light .afc-promo-card__body .wp-block-buttons {
	margin-top: auto;
}
/* Cream feature cards (About "Why choose the network", AFC-87): the comp sets
   32px side padding, a 48px card title, a 24px stack gap, and a 48px card foot —
   the same upsizing the split audience cards got (above), applied to the cream
   theme. (The title gradient lives on the base.) */
.afc-section--cream .afc-promo-card__eyebrow,
.afc-section--cream .afc-promo-card__title,
.afc-section--cream .afc-promo-card__body {
	padding-inline: 2rem;
}
.afc-section--cream .afc-promo-card {
	gap: 1.5rem;
	padding-bottom: 1rem;
}
/* The --3 descendant selector outranks the editorial-grid title rule below,
   same trick as the dark-theme title rules. */
.afc-section--cream .afc-promo-card__title,
.afc-section--cream .afc-content-grid--3 .afc-promo-card__title {
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1;
}
.afc-section--cream .afc-promo-card__body {
	padding-bottom: 2rem;
}
/* Keep copy legible on dark section backgrounds. */
.afc-section--ink .afc-section__intro,
.afc-section--ink .afc-card__summary,
.afc-section--structure .afc-section__intro,
.afc-section--structure .afc-card__summary {
	color: var(--wp--preset--color--paper);
}
/* The structure→action gradient heading has no contrast on the dark themes, so
   render it as solid paper there instead. */
.afc-section--ink .afc-section__heading,
.afc-section--structure .afc-section__heading {
	background: none;
	-webkit-text-fill-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--paper);
}
/* On dark sections the action-blue card title is too low-contrast (#0099CE on
   #315889 ≈ 2.2:1), so flip titles to accent (#BEE0ED on structure = 5.22:1,
   on ink = 9.07:1 — both pass AA). The --4/--3 descendant selectors are needed
   to outrank the editorial-grid title rule below (equal-or-higher specificity).
   AFC-26 Featured (3-up dark) is the only consumer today. */
.afc-section--ink .afc-card__title,
.afc-section--ink .afc-content-grid--3 .afc-card__title,
.afc-section--ink .afc-content-grid--4 .afc-card__title,
.afc-section--structure .afc-card__title,
.afc-section--structure .afc-content-grid--3 .afc-card__title,
.afc-section--structure .afc-content-grid--4 .afc-card__title {
	color: var(--wp--preset--color--accent);
}
/* Action-blue focus ring has poor contrast on dark themes — use paper. */
.afc-section--ink .afc-card__link:focus-visible,
.afc-section--structure .afc-card__link:focus-visible {
	outline-color: var(--wp--preset--color--paper);
}
/* The global link-hover blue (#006A98) used by .afc-card__link:hover is too
   low-contrast on the structure background, so flip the title to white on
   hover/focus instead. Needs 4 selector classes to outrank that base rule
   (.afc-card__link:hover .afc-card__title = 3 classes). */
.afc-section--structure .afc-card__link:hover .afc-card__title,
.afc-section--structure .afc-card__link:focus-visible .afc-card__title {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}
/* On the structure-blue band, invert the section CTA to a white pill with
   dark-blue text (the action-blue fill has poor contrast here), then swap to
   the outline-hover treatment used by the listing CTA / about-people CTA on
   hover instead of the link-hover fill. Default (paper) sections keep the
   base .afc-section__cta rule untouched. */
.afc-section--structure .afc-section__cta {
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--structure);
}
.afc-section--structure .afc-section__cta:hover,
.afc-section--structure .afc-section__cta:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--paper);
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: -2px;
}

/* Editorial card treatment, scoped to the 4-col grid context so the shared
   .afc-card base (and the related-content / hub / author-content callers) is
   never restyled. The action-blue title is AFC-26's proposed "article = blue"
   hierarchy — not finalised — so it lives here, not on the base. */
.afc-content-grid--3 .afc-card,
.afc-content-grid--4 .afc-card {
	gap: 0.75rem;
}
.afc-content-grid--3 .afc-card__image,
.afc-content-grid--4 .afc-card__image {
	aspect-ratio: 3 / 2;
}
/* Editorial card title per the comps: IBM Plex Sans SemiBold, ~24px (clamps to
   ~20px on small screens), action blue. At 24px/600 the blue clears AA as large
   text (3.26:1). Shared by the 3-up (AFC-26 Featured) and 4-up (AFC-26/50, the
   refined related-content, and story-listing) editorial grids only — the bare
   .afc-content-grid callers (article-hub, author-content-list) keep the base
   IBM Plex 1.25rem title and are untouched. */
.afc-content-grid--3 .afc-card__title,
.afc-content-grid--4 .afc-card__title {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: clamp(1.25rem, 1rem + 1.05vw, 1.5rem);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--action);
}

/* ----------------------------------------------------------------------------
 * Promo Card / Promo Grid (AFC-53) — editorial promo primitive on the shell.
 * Static-save blocks, so all visual styling lives here (not block-local).
 * -------------------------------------------------------------------------- */

/* Empty RichText tags left by the static saves should not take up space. */
.afc-section__heading:empty,
.afc-section__intro:empty,
.afc-promo-card__eyebrow:empty,
.afc-promo-card__title:empty {
	display: none;
}

/* Cards are carded (paper background) so the two-tone title + body stay legible
   on any section theme — and to match the Tools / audience comps where cards
   sit on white with a soft shadow. The image is full-bleed to the rounded card
   top; the text below is padded. */
.afc-promo-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	overflow: hidden;
	padding-top: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--paper);
	border-radius: 0.75rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.afc-promo-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	/* Bleed to the card's top + side edges, cancelling the card's top padding.
	   With no image the padding stays, so text isn't flush to the card top. */
	margin-top: calc(-1 * var(--wp--preset--spacing--40));
}
/* Text children are padded; the image stays flush to the card edges. */
.afc-promo-card__eyebrow,
.afc-promo-card__title,
.afc-promo-card__body {
	padding-inline: var(--wp--preset--spacing--40);
}
.afc-promo-card__body {
	padding-bottom: var(--wp--preset--spacing--40);
}
/* Editor-only empty state for the image slot (front end emits no <img>). */
.afc-promo-card__image--placeholder {
	background-color: color-mix(in srgb, var(--wp--preset--color--structure) 10%, transparent);
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--structure) 35%, transparent);
}
.afc-promo-card__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--action);
}
/* Card title rendered as the brand text-gradient (structure→action), matching the
   comps; the highlighted <strong> differs by weight only and inherits the gradient.
   Dark section themes fall back to solid accent below (the gradient has too little
   contrast on ink/structure). */
.afc-promo-card__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	background: var(--wp--preset--gradient--text-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.afc-promo-card__title strong {
	font-weight: 700;
}
/* Dark themes: reset the gradient fill to solid accent so the title stays legible
   (matches the dark-theme treatment of the other card titles). */
.afc-section--ink .afc-promo-card__title,
.afc-section--ink .afc-promo-card__title strong,
.afc-section--structure .afc-promo-card__title,
.afc-section--structure .afc-promo-card__title strong {
	background: none;
	-webkit-text-fill-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.afc-promo-card__body {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	color: var(--wp--preset--color--ink);
}
.afc-promo-card__body > :first-child {
	margin-top: 0;
}
.afc-promo-card__body > :last-child {
	margin-bottom: 0;
}
/* theme.json's button element can't emit a transition property, so the core
   button used for this card's CTA snaps color/background instantly on hover —
   add the same eased transition the other CTA buttons use (afc-section__cta,
   cta-promo). */
.afc-promo-card__body .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Checklist: a core/list in the body renders with brand check markers
   (the Tools / Calculator promo). Marker SVG uses the action/paper brand
   colours inline (a marker graphic, not a theme token). */
.afc-promo-card__body ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.afc-promo-card__body ul li {
	position: relative;
	margin: 0.5rem 0;
	padding-left: 1.85rem;
}
.afc-promo-card__body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.25rem;
	height: 1.25rem;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%230099CE'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 10.5l2.5 2.5L14 7'/%3E%3C/svg%3E");
}

/* Section headings for author-content / hub groups. (Related content now uses
   the shared .afc-section__heading.) */
.afc-author-content__heading,
.afc-hub__heading {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}

.afc-hub__group + .afc-hub__group {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Byline: author headshot + name/role, with optional publication date. */
.afc-byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1rem 0;
}
.afc-byline__headshot {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}
.afc-byline__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.afc-byline__name {
	font-weight: 600;
}
.afc-byline__role,
.afc-byline__date {
	font-size: var(--wp--preset--font-size--caption, 0.875rem);
	color: var(--wp--preset--color--structure);
}
.afc-byline__date {
	margin-left: auto;
}

/* ----------------------------------------------------------------------------
 * Author Bio — "About the Author" card (AFC-56, Figma node 18352-16471).
 * Full card (headshot + eyebrow + linked name + role + bio + social) on Story /
 * Article singles; on the Author Profile single the page header already shows the
 * name + featured image, so the block renders only role + bio + social there.
 * -------------------------------------------------------------------------- */
.afc-author-bio {
	/* border-box so the constrained max-width (content size) includes the card's
	   padding — keeps the cream panel aligned with the content column above it
	   rather than bleeding past it (the theme's global box-sizing is content-box). */
	box-sizing: border-box;
	padding: 1.75rem 2rem;
	border-radius: 8px;
	background-color: var(--wp--preset--color--cream); /* #F7F3EC */
}
/* With a headshot (Story/Article), lay out on a grid: headshot in the left column,
   header/bio/social stacked in the right column. Without a headshot (trimmed
   author-profile view, or an author with no featured image) the card stays plain
   block flow and everything spans the full width. */
.afc-author-bio--media {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1.5rem;
	align-items: start;
}
.afc-author-bio--media .afc-author-bio__media {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: start;
}
.afc-author-bio--media .afc-author-bio__header,
.afc-author-bio--media .afc-author-bio__bio,
.afc-author-bio--media .afc-author-bio__social {
	grid-column: 2;
}
.afc-author-bio__headshot {
	display: block;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	object-fit: cover;
}
.afc-author-bio__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--caption, 0.875rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #696969;
}
.afc-author-bio__name-wrap {
	margin: 0.25rem 0 0;
}
.afc-author-bio__name {
	font-size: 1.25rem; /* 20px */
	font-weight: 800;
	line-height: 1.5;
	color: var(--wp--preset--color--structure); /* #315889 */
	text-decoration: underline;
}
.afc-author-bio__name:hover,
.afc-author-bio__name:focus-visible {
	color: var(--wp--preset--color--link-hover);
}
.afc-author-bio__role {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--ink);
}
.afc-author-bio__bio {
	margin: 1rem 0 0;
	max-width: 60ch;
	color: var(--wp--preset--color--ink);
}
.afc-author-bio__social {
	list-style: none;
	margin: 1.25rem 0 0 -0.625rem; /* negative left aligns the first glyph with the text */
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.afc-author-bio__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.625rem; /* 24px glyph + padding ≈ 44px tap target */
	border-radius: 9999px;
	color: var(--wp--preset--color--structure);
	transition: background-color 150ms ease;
}
.afc-author-bio__social a:hover,
.afc-author-bio__social a:focus-visible {
	background-color: rgba(49, 88, 137, 0.12); /* structure tint */
}
.afc-author-bio__social svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* Narrow viewports: headshot + header share the top row; bio and social each span
   the full card width beneath them. */
@media (max-width: 599px) {
	.afc-author-bio {
		padding: 1.5rem;
	}
	.afc-author-bio--media .afc-author-bio__media {
		grid-column: 1;
		grid-row: 1;
	}
	.afc-author-bio--media .afc-author-bio__header {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}
	.afc-author-bio--media .afc-author-bio__bio {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.afc-author-bio--media .afc-author-bio__social {
		grid-column: 1 / -1;
		grid-row: 3;
	}
}

/* ----------------------------------------------------------------------------
 * Story Listing (AFC-47) — fielded CTA tile + AJAX page-number pagination.
 * The grid + content cards reuse .afc-content-grid--4 / .afc-card; only the dark
 * photo-overlay CTA tile and the pagination control are new (Figma node 18352-16351).
 * -------------------------------------------------------------------------- */

/* Fielded CTA card — occupies one cell in the 4-up grid. Reuses .afc-card for
   grid participation; overrides its flex/gap with an overlay layout. */
.afc-listing-cta {
	position: relative;
	overflow: hidden;
	min-height: 100%;
	border-radius: 0.5rem; /* 8px, matching .afc-card__image */
	background-color: var(--wp--preset--color--structure); /* #315889 */
	background-image: var(--afc-listing-cta-bg, none);
	background-size: cover;
	background-position: center;
	display: flex;
}
/* Structure-blue scrim over the background so the white headline stays legible.
   Kept light (45%) so the brand chevron texture reads through like the comp; the
   large bold headline still clears AA-large contrast over the structure-blue art. */
.afc-listing-cta__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--structure) 45%, transparent);
}
.afc-listing-cta__content {
	position: relative; /* above the scrim */
	z-index: 1;
	flex: 1; /* fill the tile height so justify-content centers within it */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
	padding: 4rem 2rem; /* py64 px32 per comp */
}
.afc-listing-cta__headline {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); /* up to 32px */
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
}
.afc-listing-cta__button {
	align-self: flex-start;
	display: inline-block;
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--link-hover, #006a98);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	padding: 0.875rem 1.75rem;
	border-radius: 10px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.afc-listing-cta__button:hover,
.afc-listing-cta__button:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--paper);
	outline: 2px solid var(--wp--preset--color--paper);
	outline-offset: -2px;
}

/* Pagination control: ‹ arrow · "Page" · [n] input · "of N" · arrow ›. */
.afc-listing__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	color: var(--wp--preset--color--ink); /* #333 */
}
.afc-listing__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.afc-listing__arrow:hover:not( :disabled ),
.afc-listing__arrow:focus-visible:not( :disabled ) {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	outline-offset: 2px;
}
.afc-listing__arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.afc-listing__page-input {
	width: 64px;
	height: 48px;
	padding: 0 0.5rem;
	text-align: center;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 4px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	-moz-appearance: textfield;
	appearance: textfield;
}
.afc-listing__page-input::-webkit-outer-spin-button,
.afc-listing__page-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Loading + empty states. */
.afc-listing__region.is-loading .afc-listing__grid {
	opacity: 0.55;
	transition: opacity 0.15s ease;
}
.afc-listing__grid[aria-busy="true"] {
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.afc-listing__region .afc-listing__grid,
	.afc-listing__arrow,
	.afc-listing-cta__button {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Story / Article detail — "What's Next" + "Disclaimer" core-block sections
   Baked into single-story.html / single-article.html (AFC-40).
   --------------------------------------------------------------------------- */

/* Breathing room between the full-bleed hero and the start of the body copy. */
.wp-block-afc-story-hero + .wp-block-post-content {
	margin-block-start: clamp(2.5rem, 5vw, 5rem);
}

/* "What's Next:" callout — reads as body copy inside the 720px reading column,
   separated from the email banner above by a 1px rule (per comp), matching the
   section-divider treatment used between Author Profile sections. */
.afc-whats-next {
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
	padding-block-start: var(--wp--preset--spacing--50, 2rem);
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* In-article section headings: comp "Heading-2XS" (24px, IBM Plex Sans SemiBold,
   sentence case) — not the large uppercase page-section heading treatment that
   global styles apply to every heading. Scoped to the body so page-section
   headings (Related Stories, the email banners) keep their large uppercase look.
   The inline CTA heading is an h3, so it is unaffected and stays as designed. */
.wp-block-post-content > h2 {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
}

/* In-article pull quote — large blue italic with a structure-color rule, per comp. */
.wp-block-post-content .afc-pullquote {
	border-left: 3px solid var(--wp--preset--color--structure);
	margin-block: var(--wp--preset--spacing--50, 2.5rem);
	padding-left: 1.5rem;
}
.wp-block-post-content .afc-pullquote p {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--action);
}
.wp-block-post-content .afc-pullquote cite {
	display: block;
	margin-top: 1rem;
	font-size: 1rem;
	font-style: italic;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* Equal-height stat cards — stretch each card group to fill its (already
   equal-height) column so the cream cards line up at the bottom regardless of how
   many lines each caption wraps to. */
.wp-block-post-content .wp-block-columns {
	align-items: stretch;
}
.wp-block-post-content .wp-block-columns .wp-block-column {
	display: flex;
}
.wp-block-post-content .wp-block-columns .wp-block-column > .wp-block-group {
	flex: 1;
}

/* "Disclaimer:" — full-width fine print above the closing email banner. <main> is a
   flow layout, so the alignwide class alone does not constrain width; pin it to the
   wide content column with the page gutter so it lines up under Related Stories. */
.afc-disclaimer {
	max-width: var(--wp--style--global--wide-size, 1312px);
	margin-inline: auto;
	margin-block: clamp(2.5rem, 5vw, 4rem);
	padding-inline: clamp(1.25rem, 5vw, 5rem);
}
.afc-disclaimer p {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption, 0.875rem);
	line-height: 1.6;
	color: color-mix(in srgb, var(--wp--preset--color--ink, #333333) 70%, var(--wp--preset--color--paper, #ffffff));
}

/* ----------------------------------------------------------------------------
 * Author Profile sections (AFC-61…66) — Career, Education, Expertise, Notable
 * Accomplishments, Appearances & Speaking, Publications & Op-Eds. Server-rendered
 * afc/author-* blocks on the Author Profile single (Figma frame 18771:5171), all
 * driven by ACF repeaters on group_afc_author_profile. Static-save dynamic blocks,
 * so all visual styling lives here (not block-local), matching .afc-author-bio.
 * -------------------------------------------------------------------------- */

/* Shared section chrome ---------------------------------------------------- */
/* Section blocks render full-bleed (template wrapper is alignfull) and sit FLUSH
   per Figma — vertical rhythm comes from each section's own padding, not
   inter-section margins, so the divider rules land exactly on the section seam
   (no floating gap above the hairline). Symmetric gutters centre the content:
   most sections fill the wide column (Figma ~1388/1568); Career sits in the
   narrow text column (Figma 720). */
.afc-author-section {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	padding-inline: max(clamp(1.25rem, 5vw, 5rem), calc((100% - var(--wp--style--global--wide-size, 1312px)) / 2));
}
/* Beige bands alternate with white per Figma: Career, Expertise and Appearances
   sit on the cream band (so does the Featured listing below); Education, Notable
   Accomplishments and Publications stay white. */
.afc-author-career,
.afc-author-expertise,
.afc-author-appearances {
	background-color: var(--wp--preset--color--cream); /* #F7F3EC */
	padding-block: clamp(3rem, 5vw, 5rem);
}
.afc-author-career {
	padding-inline: max(clamp(1.25rem, 5vw, 5rem), calc((100% - var(--wp--style--global--content-size, 720px)) / 2));
}
/* Full-bleed 1px hairlines at the three Figma Divider seams (18771:5307/5349/5419):
   they introduce Notable Accomplishments, Appearances and Publications. Scoped to
   those three sections so the rule can't be out-specified (a generic
   `.afc-author-section + .afc-author-section` would beat a single-class reset and
   paint a stray divider before Education/Expertise). Flush at the seam — no extra
   padding/margin offset — to match the comp. The `+` combinator still needs a
   preceding rendered section, so empty sections never leave an orphaned divider. */
.afc-author-section + .afc-author-accomplishments,
.afc-author-section + .afc-author-appearances,
.afc-author-section + .afc-author-publications {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.afc-author-section__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: var(--wp--preset--font-size--caption, 0.875rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink); /* #333 */
}
.afc-author-section__heading {
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: clamp(2rem, 1.4rem + 2vw, 3rem); /* up to 48px per Figma */
	font-weight: 600;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--wp--preset--color--structure); /* #315889 */
}
/* Card titles read as authored (title case) per Figma. The section h2s + eyebrows
   stay uppercase, but the theme-wide heading uppercase (theme.json
   styles.elements.heading) must be overridden on these h3s. */
.afc-author-section .afc-author-education__degree,
.afc-author-section .afc-author-expertise__area,
.afc-author-section .afc-author-accomplishments__title,
.afc-author-section .afc-author-appearances__title,
.afc-author-section .afc-author-publications__title {
	text-transform: none;
}

/* Career History ----------------------------------------------------------- */
.afc-author-career__list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}
/* Stacked per Figma 18771:5215 — meta block (date/role/org) on top, description
   below, in the narrow column. (Ticket AC called for two columns; comp stacks.) */
.afc-author-career__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.75rem 0;
}
.afc-author-career__item + .afc-author-career__item {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.afc-author-career__meta {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding-bottom: 1rem;
}
.afc-author-career__date {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink);
}
.afc-author-career__role {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--structure);
}
.afc-author-career__org {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption, 0.875rem);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}
.afc-author-career__body {
	margin: 0;
}
.afc-author-career__desc {
	margin: 0;
	font-size: var(--wp--preset--font-size--body, 1.0625rem);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Education ----------------------------------------------------------------- */
.afc-author-education__grid {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.afc-author-education__card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
	border-radius: 8px;
	background-color: var(--wp--preset--color--structure); /* #315889 */
	color: var(--wp--preset--color--paper);
}
.afc-author-education__degree {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--paper); /* white on the structure-blue card (theme heading colour would hide it) */
}
.afc-author-education__institution {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
}
.afc-author-education__meta {
	margin: 0.75rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.5;
}

/* Expertise ----------------------------------------------------------------- */
/* Full-bleed beige band with white cards (Figma 18771:5278); the cream band +
   padding come from the shared beige-band rule above. */
.afc-author-expertise__grid {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.5rem;
}
.afc-author-expertise__card {
	padding: 2rem 1.5rem;
	border-radius: 8px;
	background-color: var(--wp--preset--color--paper); /* white cards on beige */
}
.afc-author-expertise__area {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--structure);
}
.afc-author-expertise__desc {
	margin: 0.75rem 0 0;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Notable Accomplishments --------------------------------------------------- */
.afc-author-accomplishments__grid {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.125rem;
}
/* Each item is a bordered white card with the numeral in the accent tint (Figma). */
.afc-author-accomplishments__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 1.25rem;
	align-items: start;
	padding: 1.5rem;
	border: 1px solid #ccc; /* Figma Neutral/Lighter — no palette token */
	border-radius: 8px;
	background-color: var(--wp--preset--color--paper);
}
.afc-author-accomplishments__num {
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--accent); /* #BEE0ED */
}
.afc-author-accomplishments__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--structure);
}
.afc-author-accomplishments__desc {
	margin: 0.5rem 0 0;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Appearances & Speaking ---------------------------------------------------- */
.afc-author-appearances__grid {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}
.afc-author-appearances__item {
	position: relative; /* anchor for the stretched card link */
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.875rem;
	row-gap: 0.5rem;
	align-items: start;
	padding: 1.25rem 1.375rem;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 8px;
	background-color: var(--wp--preset--color--paper);
}
.afc-author-appearances__badge {
	grid-column: 1;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	/* Figma-sourced badge tints — no palette token matches these exact values
	   (a light structure tint + a darker structure that clears AA on it). */
	background-color: #ebf2fb;
	color: #1a5da8;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.afc-author-appearances__title,
.afc-author-appearances__detail,
.afc-author-appearances__meta {
	grid-column: 2;
}
.afc-author-appearances__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--action);
}
.afc-author-appearances__link {
	color: inherit;
	text-decoration: none;
}
.afc-author-appearances__link::after {
	content: "";
	position: absolute;
	inset: 0;
}
.afc-author-appearances__item:hover .afc-author-appearances__link,
.afc-author-appearances__link:focus-visible {
	color: var(--wp--preset--color--link-hover);
	text-decoration: underline;
}
.afc-author-appearances__item:focus-within {
	outline: 2px solid var(--wp--preset--color--action);
	outline-offset: 2px;
}
.afc-author-appearances__detail {
	margin: 0;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.afc-author-appearances__meta {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

/* Publications & Op-Eds ----------------------------------------------------- */
.afc-author-publications__list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12); /* Figma line-top above first item */
}
.afc-author-publications__item {
	padding: 1.75rem 0;
}
.afc-author-publications__item + .afc-author-publications__item {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.afc-author-publications__year {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--structure);
}
.afc-author-publications__title {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--ibm-plex-sans);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--action);
}
.afc-author-publications__link {
	color: inherit;
	text-decoration: none;
}
.afc-author-publications__link:hover,
.afc-author-publications__link:focus-visible {
	color: var(--wp--preset--color--link-hover);
	text-decoration: underline;
}
.afc-author-publications__outlet {
	margin: 0.5rem 0 0;
	font-size: 1rem;
	color: var(--wp--preset--color--structure);
}
.afc-author-publications__desc {
	margin: 0.75rem 0 0;
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
}

/* Featured from [Author] — cream band per Figma (alternates with the white
   "More from" listing that follows it). The afc/author-featured-articles block
   renders standard .afc-section chrome; tint its full-bleed band to match. */
.afc-author-featured {
	background-color: var(--wp--preset--color--cream); /* #F7F3EC */
}

/* Responsive: collapse multi-column grids on narrow viewports --------------- */
@media (max-width: 781px) {
	.afc-author-education__grid,
	.afc-author-expertise__grid,
	.afc-author-accomplishments__grid,
	.afc-author-appearances__grid {
		grid-template-columns: 1fr;
	}
}

/* ==== Resource Center — Tools ("Tools to help you give smarter") ==== */
/* Split-color background per Figma: white (paper) top, cream (#F7F3EC) bottom.
   The seam is a hard-stop gradient on the full-bleed cards band. Because the
   band starts at the cards' top (images are flush to it), the seam is measured
   straight down into the card images via --afc-rc-seam — so it always lands the
   same fraction into the photos regardless of headline height. The opaque white
   cards sit on top; the seam only shows in the gutters and outer margins, exactly
   like the design. No negative margins, so nothing fights WP's layout resets. */
.afc-resource-tools__head {
	padding-top: var(--wp--preset--spacing--85, clamp(3.5rem, 7vw, 6.25rem));
	padding-bottom: clamp(2rem, 3vw, 3rem); /* ~48px gap before the cards */
}
.afc-resource-tools__head .has-lead-font-size {
	margin-top: 2rem;
	max-width: 64rem;
	color: var(--wp--preset--color--ink);
}
.afc-resource-tools__band {
	/* white→cream split, measured down into the card image (~3/4 of its height) */
	--afc-rc-seam: clamp(150px, 13vw, 230px);
	padding-top: 0;
	padding-bottom: var(--wp--preset--spacing--85, clamp(3.5rem, 7vw, 6.25rem));
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--paper) 0,
		var(--wp--preset--color--paper) var(--afc-rc-seam),
		var(--wp--preset--color--cream) var(--afc-rc-seam),
		var(--wp--preset--color--cream) 100%
	);
}
.afc-resource-tools__cards {
	gap: clamp(1.5rem, 2.2vw, 2rem);
	align-items: stretch;
}

/* Cards ---------------------------------------------------------------------- */
.afc-resource-tools__cards .wp-block-column {
	display: flex;
}
.afc-resource-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* zero WP's default `:where(.wp-block-group.has-background)` padding so the
	   image sits flush to the card edges; the body supplies its own padding */
	padding: 0;
	overflow: hidden; /* clip the image to the 8px radius */
	box-shadow: 0 18px 40px -24px rgba(49, 88, 137, 0.35);
}
.afc-resource-card > * {
	margin-block: 0;
}
.afc-resource-card__image {
	margin: 0;
}
.afc-resource-card__image img {
	display: block;
	width: 100%;
	height: clamp(190px, 17vw, 290px);
	object-fit: cover;
}
.afc-resource-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1.5rem;
	padding: 2rem 2rem 3rem;
}
.afc-resource-card__body > * {
	margin-block: 0;
}
.afc-resource-card__body .wp-block-heading {
	line-height: 1.05;
}
.afc-resource-card__body p {
	color: var(--wp--preset--color--ink);
}
/* push the CTA to the bottom so buttons align across cards of unequal copy */
.afc-resource-card__body .wp-block-buttons {
	margin-top: auto;
	padding-top: 0.75rem;
}
/* Same CTA button treatment as the other buttons (afc-section__cta, cta-promo,
   promo-card): light-blue background, dark-blue on hover, eased transition —
   theme.json's button element can't emit a transition property on its own. */
.afc-resource-card__cta .wp-block-button__link {
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--paper);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.afc-resource-card__cta .wp-block-button__link:hover,
.afc-resource-card__cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--link-hover);
	color: var(--wp--preset--color--paper);
}

/* Checklist with circle-check markers (no icon font in the theme) ------------ */
.afc-resource-card__checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}
.afc-resource-card__checklist li {
	position: relative;
	margin: 0;
	padding-left: 2.375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}
.afc-resource-card__checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.05em;
	width: 1.6875rem;
	height: 1.6875rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23315889'/%3E%3Cpath d='M6.8 12.3l3.3 3.3 7.1-7.3' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==== Cookiebot CMP ======================================================
 * ======================================================================== */

/* Hide the header row — AFC logo removed from Cookiebot config and
 * Cookiebot branding not needed, so the header is empty. */
#CybotCookiebotDialog #CybotCookiebotDialogHeader {
    display: none !important;
}

/* Hide the sidebar navigation visually but keep it in the DOM so
 * Cookiebot's tab-switching JS continues to function. */
#CybotCookiebotDialog #CybotCookiebotDialogNav {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: none !important;
}

/* Widget button — replace Cookiebot icon with AFC brand. */
#CookiebotWidget {
    background-color: transparent !important;
    background-image: url("https://s3.afcscholarshipfund.org/images/AFC_2022_logo_favicon.png") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 90% auto !important;
    box-shadow: none !important;
}

#CookiebotWidget .CookiebotWidget-logo {
    background: transparent !important;
}

/* Keep SVG in DOM (visibility: hidden, not display: none) so Cookiebot's
 * widget JS can still detect its state and fire the click handler. */
#CookiebotWidget .CookiebotWidget-logo svg {
    visibility: hidden !important;
}

/* When the panel opens the container expands — remove the button background
 * so the AFC logo doesn't scale up behind the panel content. */
#CookiebotWidget.CookiebotWidget-open {
    background-image: none !important;
}

/* Hide Cookiebot/Usercentrics branding from the widget panel. */
#CookiebotWidget .CookiebotWidget-main-logo {
    display: none !important;
}