/**
 * AdProMax — layout layer.
 * Site shell, header, navigation, language switcher, footer, buttons, cards,
 * pagination and breadcrumbs.
 */

/* ---- Shell ----------------------------------------------------------- */

.apm-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	max-width: 100%;
}

.apm-site-main {
	flex: 1 0 auto;
}

.apm-wrap {
	max-width: var(--apm-wide-width);
	margin-inline: auto;
	padding-inline: var(--apm-pad-inline);
}

.apm-wrap--narrow {
	max-width: var(--apm-narrow-width);
}

.apm-wrap--content {
	max-width: var(--apm-content-width);
}

.apm-section {
	padding-block: var(--apm-section-block);
}

.apm-section--sm {
	padding-block: var(--apm-section-block-sm);
}

.apm-section--light {
	background: var(--apm-white);
	border-block-end: 1px solid var(--apm-border);
}

.apm-section--tint {
	background: var(--apm-bg-section);
	border-block-end: 1px solid var(--apm-border);
}

.apm-section--dark {
	background: var(--apm-dark);
	color: var(--apm-dark-text-body);
	border-block-end: 1px solid var(--apm-dark-border);
}

.apm-dark,
.apm-section--dark {
	--apm-text: var(--apm-dark-text);
	--apm-text-strong: var(--apm-white);
	--apm-text-muted: var(--apm-dark-text-muted);
	--apm-text-subtle: var(--apm-dark-text-dim);
}

.apm-section--dark h1,
.apm-section--dark h2,
.apm-section--dark h3,
.apm-section--dark h4 {
	color: var(--apm-white);
}

.apm-eyebrow {
	font-size: var(--apm-size-eyebrow);
	font-weight: 700;
	letter-spacing: var(--apm-ls-wide);
	text-transform: uppercase;
	color: var(--apm-brand);
	margin-block: 0 var(--apm-space-sm);
}

.apm-section--dark .apm-eyebrow {
	color: var(--apm-brand-light);
}

.apm-lead {
	font-size: var(--apm-size-lead);
	line-height: var(--apm-lh-relaxed);
	color: var(--apm-text-muted);
	max-width: var(--apm-measure);
}

/* ---- Buttons --------------------------------------------------------- */

.apm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--apm-space-xs);
	min-height: var(--apm-control-h);
	min-width: var(--apm-tap);
	padding-inline: 26px;
	border: 1px solid transparent;
	border-radius: var(--apm-radius);
	font-family: inherit;
	font-size: var(--apm-size-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background var(--apm-dur-fast) var(--apm-ease),
		border-color var(--apm-dur-fast) var(--apm-ease),
		color var(--apm-dur-fast) var(--apm-ease);
}

.apm-btn--primary {
	background: var(--apm-brand);
	color: var(--apm-white);
	box-shadow: var(--apm-shadow-cta);
}

.apm-btn--primary:hover,
.apm-btn--primary:focus {
	background: var(--apm-brand-hover);
	color: var(--apm-white);
}

.apm-btn--secondary {
	background: var(--apm-white);
	color: var(--apm-text);
	border-color: var(--apm-border-strong);
	box-shadow: none;
}

.apm-btn--secondary:hover,
.apm-btn--secondary:focus {
	border-color: var(--apm-brand);
	color: var(--apm-text);
}

.apm-btn--ghost-dark {
	background: transparent;
	color: var(--apm-white);
	border-color: var(--apm-dark-border-outline);
	box-shadow: none;
}

.apm-btn--ghost-dark:hover,
.apm-btn--ghost-dark:focus {
	border-color: var(--apm-pink-soft);
	color: var(--apm-white);
}

.apm-btn--pink {
	background: var(--apm-pink-deep);
	color: var(--apm-white);
}

.apm-btn--pink:hover,
.apm-btn--pink:focus {
	background: var(--apm-pink-deeper);
	color: var(--apm-white);
}

.apm-btn--lg {
	min-height: var(--apm-control-h-lg);
	font-size: var(--apm-size-body);
	padding-inline: var(--apm-space-xl);
}

.apm-btn--block {
	width: 100%;
}

/* Directional glyphs mirror in RTL; brand icons never do. */
.apm-arrow {
	display: inline-block;
}

[dir="rtl"] .apm-arrow {
	transform: scaleX(-1);
}

/* ---- Header ---------------------------------------------------------- */

.apm-site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-block-end: 1px solid var(--apm-border);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.apm-site-header {
		background: var(--apm-white);
	}
}

.apm-site-header--dark {
	background: rgba(5, 7, 15, 0.82);
	border-block-end-color: var(--apm-dark-border);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.apm-site-header--dark {
		background: var(--apm-dark-deep);
	}
}

.apm-header-inner {
	max-width: var(--apm-wide-width);
	margin-inline: auto;
	padding: var(--apm-space-sm) var(--apm-pad-inline);
	display: flex;
	align-items: center;
	gap: 20px;
}

.apm-branding {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	/* The link is the tap target; the artwork sits inside it. */
	min-height: var(--apm-tap);
}

/* One height drives every horizontal lockup, so the header and footer marks are
   visually identical and the sticky header never resizes the logo.
   44px keeps the wordmark legible while leaving the tagline readable; the compact
   lockup is 2.667:1, so 44px tall = 117px wide — it fits inside the 320px header
   alongside the menu button, which is why no compact/symbol switch is needed. */
.apm-branding img,
.apm-branding .custom-logo {
	height: var(--apm-logo-height);
	width: auto;
	max-width: 100%;
	display: block;
	/* Never distort: the intrinsic ratio always wins. */
	object-fit: contain;
}

.apm-branding--footer img,
.apm-branding--footer .custom-logo {
	height: var(--apm-logo-height-footer);
}

/* Text-only last resort when the packaged artwork is unavailable. */
.apm-branding--text {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: var(--apm-ls-snug);
	color: var(--apm-text-strong);
}

.apm-site-header--dark .apm-branding--text {
	color: var(--apm-white);
}

.apm-site-footer .apm-branding--text {
	color: var(--apm-white);
}

.apm-nav {
	display: flex;
	gap: 6px;
	flex: 1;
	min-width: 0;
	font-size: 14.5px;
	font-weight: 600;
}

.apm-nav ul {
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.apm-nav a {
	color: var(--apm-text-body);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--apm-tap);
	/* Short labels ("FAQ") would otherwise be narrower than the 44px target. */
	min-width: var(--apm-tap);
	padding-inline: var(--apm-space-xs);
}

.apm-site-header--dark .apm-nav a {
	color: var(--apm-dark-text-muted);
}

.apm-nav .current-menu-item > a,
.apm-nav .current_page_item > a,
.apm-nav .current-menu-ancestor > a,
.apm-nav a[aria-current] {
	color: var(--apm-text-strong);
	font-weight: 700;
}

.apm-site-header--dark .apm-nav .current-menu-item > a,
.apm-site-header--dark .apm-nav a[aria-current] {
	color: var(--apm-white);
}

/* Sub-menus stay keyboard reachable and never depend on hover alone. */
.apm-nav .sub-menu {
	position: absolute;
	min-width: 220px;
	background: var(--apm-white);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-md);
	padding: var(--apm-space-2xs);
	box-shadow: var(--apm-shadow-card);
	display: none;
	flex-direction: column;
	z-index: 60;
}

.apm-nav li {
	position: relative;
}

.apm-nav li:hover > .sub-menu,
.apm-nav li:focus-within > .sub-menu {
	display: flex;
}

.apm-header-actions {
	display: flex;
	align-items: center;
	gap: var(--apm-space-xs);
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.apm-header-cta {
	display: inline-flex;
	align-items: center;
	min-height: var(--apm-tap);
	font-size: 14px;
	font-weight: 700;
	color: var(--apm-white);
	background: var(--apm-brand);
	padding-inline: 18px;
	border-radius: var(--apm-radius);
	white-space: nowrap;
}

.apm-header-cta:hover,
.apm-header-cta:focus {
	background: var(--apm-brand-hover);
	color: var(--apm-white);
}

/* ---- Language switcher ---------------------------------------------- */

.apm-lang {
	display: flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--apm-border-strong);
	border-radius: var(--apm-radius-pill);
	background: var(--apm-bg-muted);
	margin: 0;
	list-style: none;
}

.apm-site-header--dark .apm-lang {
	border-color: var(--apm-dark-border-mid);
	background: rgba(12, 17, 32, 0.8);
}

.apm-lang a,
.apm-lang span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--apm-size-tiny);
	font-weight: 700;
	min-height: var(--apm-tap);
	min-width: var(--apm-tap);
	padding-inline: 10px;
	border-radius: var(--apm-radius-pill);
	color: var(--apm-text-body);
	text-transform: uppercase;
}

.apm-site-header--dark .apm-lang a,
.apm-site-header--dark .apm-lang span {
	color: var(--apm-dark-text-muted);
}

.apm-lang .apm-lang--current > * {
	background: var(--apm-brand);
	color: var(--apm-white);
}

.apm-lang [lang="ar"] {
	font-family: var(--apm-font-arabic);
}

/* ---- Mobile navigation ---------------------------------------------- */

.apm-burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--apm-space-2xs);
	width: var(--apm-tap);
	height: var(--apm-tap);
	border: 1px solid var(--apm-border-strong);
	border-radius: var(--apm-radius);
	background: var(--apm-white);
	cursor: pointer;
}

.apm-site-header--dark .apm-burger {
	border-color: var(--apm-dark-border-mid);
	background: transparent;
}

.apm-burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: var(--apm-text-strong);
	border-radius: 2px;
}

.apm-site-header--dark .apm-burger span {
	background: var(--apm-dark-text);
}

.apm-mobile-nav {
	border-block-start: 1px solid var(--apm-border);
	background: var(--apm-white);
	padding: var(--apm-space-xs) var(--apm-space-md) var(--apm-space-md);
	display: grid;
	gap: 2px;
}

.apm-site-header--dark .apm-mobile-nav {
	background: var(--apm-dark-deep);
	border-block-start-color: var(--apm-dark-border);
}

.apm-mobile-nav[hidden] {
	display: none;
}

.apm-mobile-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.apm-mobile-nav a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-inline: var(--apm-space-xs);
	font-size: var(--apm-size-body);
	font-weight: 700;
	color: var(--apm-text-strong);
	border-block-end: 1px solid var(--apm-border-softer);
}

.apm-site-header--dark .apm-mobile-nav a {
	color: var(--apm-dark-text);
	border-block-end-color: var(--apm-dark-border);
}

.apm-mobile-nav .apm-mobile-cta {
	justify-content: center;
	min-height: var(--apm-control-h);
	margin-block-start: 10px;
	color: var(--apm-white);
	background: var(--apm-brand);
	border-radius: var(--apm-radius);
	border-block-end: 0;
}

.apm-mobile-nav .apm-lang {
	margin-block-start: var(--apm-space-sm);
	gap: 6px;
	border: 0;
	padding: 0;
	background: none;
}

.apm-mobile-nav .apm-lang li {
	flex: 1;
}

.apm-mobile-nav .apm-lang a,
.apm-mobile-nav .apm-lang span {
	width: 100%;
	border: 1px solid var(--apm-border-strong);
	min-height: 48px;
	border-radius: var(--apm-radius);
	font-size: 14px;
}

@media (max-width: 1024px) {
	.apm-nav--desktop {
		display: none;
	}

	.apm-burger {
		display: inline-flex;
	}
}

@media (max-width: 640px) {
	:root {
		--apm-pad-inline: 20px;
		--apm-section-block: 56px;
		--apm-section-block-sm: 44px;
	}

	.apm-header-cta,
	.apm-header-actions .apm-lang {
		display: none;
	}
}

/* ---- Footer ---------------------------------------------------------- */

.apm-site-footer {
	background: var(--apm-dark);
	color: var(--apm-dark-text-body);
	padding-block: var(--apm-space-2xl) var(--apm-space-lg);
	margin-block-start: auto;
}

.apm-site-footer a {
	color: var(--apm-dark-text-body);
}

.apm-site-footer a:hover,
.apm-site-footer a:focus {
	color: var(--apm-white);
}

.apm-footer-grid {
	max-width: var(--apm-wide-width);
	margin-inline: auto;
	padding-inline: var(--apm-pad-inline);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--apm-space-lg);
}

@media (min-width: 768px) {
	.apm-footer-grid {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: var(--apm-space-xl);
	}
}

.apm-footer-brand p {
	font-size: var(--apm-size-small);
	line-height: var(--apm-lh-body);
	margin: 0;
	max-width: 320px;
}

.apm-footer-heading {
	font-size: var(--apm-size-micro);
	font-weight: 700;
	letter-spacing: var(--apm-ls-wide);
	text-transform: uppercase;
	color: var(--apm-dark-text-dimmer);
	margin-block: 0 var(--apm-space-xs);
}

.apm-footer-grid nav ul {
	display: grid;
	font-size: var(--apm-size-small);
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-footer-grid nav a {
	display: inline-flex;
	align-items: center;
	min-height: var(--apm-tap);
	/* Short labels ("FAQ", "About") would otherwise fall under the 44px target width. */
	min-width: var(--apm-tap);
}

.apm-footer-social {
	max-width: var(--apm-wide-width);
	margin-inline: auto;
	padding-inline: var(--apm-pad-inline);
	margin-block-start: 28px;
	padding-block-start: var(--apm-space-lg);
	border-block-start: 1px solid var(--apm-dark-border-strong);
	display: flex;
	align-items: center;
	gap: var(--apm-space-md);
	flex-wrap: wrap;
}

.apm-social-list {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-social-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--apm-tap);
	height: var(--apm-tap);
	border: 1px solid var(--apm-dark-border-strong);
	border-radius: var(--apm-radius-lg);
	color: var(--apm-dark-text-body);
	transition: border-color var(--apm-dur) var(--apm-ease), color var(--apm-dur) var(--apm-ease);
}

.apm-social-list a:hover,
.apm-social-list a:focus {
	border-color: var(--apm-pink-soft);
	color: var(--apm-white);
}

/* Brand marks are never mirrored in RTL. */
[dir="rtl"] .apm-social-list svg {
	transform: none;
}

.apm-footer-legal {
	max-width: var(--apm-wide-width);
	margin-inline: auto;
	padding-inline: var(--apm-pad-inline);
	margin-block-start: var(--apm-space-lg);
	padding-block-start: var(--apm-space-md);
	border-block-start: 1px solid var(--apm-dark-border-strong);
	display: flex;
	justify-content: space-between;
	gap: var(--apm-space-md);
	flex-wrap: wrap;
	font-size: var(--apm-size-tiny);
	color: var(--apm-dark-text-subtle);
}

.apm-footer-legal ul {
	display: flex;
	gap: var(--apm-space-md);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-footer-legal a {
	display: inline-flex;
	align-items: center;
	min-height: var(--apm-tap);
	min-width: var(--apm-tap);
}

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

.apm-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(292px, 100%), 1fr));
	gap: var(--apm-space-md);
}

.apm-card {
	display: flex;
	flex-direction: column;
	background: var(--apm-bg-subtle);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-lg);
	overflow: hidden;
	transition: border-color var(--apm-dur-fast) var(--apm-ease),
		box-shadow var(--apm-dur-fast) var(--apm-ease);
}

.apm-card:hover,
.apm-card:focus-within {
	border-color: var(--apm-brand);
	box-shadow: 0 10px 30px -18px var(--apm-brand);
}

.apm-card__media {
	margin: 0;
	background: var(--apm-bg-section);
}

.apm-card__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.apm-card__media--empty {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	background: linear-gradient(140deg, var(--apm-bg-section), var(--apm-brand-tint));
	color: var(--apm-brand-hover);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: var(--apm-ls-snug);
}

.apm-card__body {
	padding: var(--apm-space-lg);
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.apm-card__title {
	font-size: var(--apm-size-h3);
	line-height: 1.3;
	margin: 0;
}

.apm-card__title a {
	display: inline-flex;
	align-items: center;
	min-height: var(--apm-tap);
	color: var(--apm-text-strong);
}

.apm-card__title a:hover,
.apm-card__title a:focus {
	color: var(--apm-brand-hover);
}

.apm-card__excerpt {
	font-size: 14.5px;
	line-height: var(--apm-lh-relaxed);
	color: var(--apm-text-muted);
	margin: 0;
}

.apm-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--apm-space-xs);
	font-size: var(--apm-size-tiny);
	color: var(--apm-text-subtle);
	margin: 0;
}

.apm-meta > * + *::before {
	content: "·";
	margin-inline-end: var(--apm-space-xs);
	color: var(--apm-border-strong);
}

.apm-tag {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding-inline: 10px;
	border-radius: var(--apm-radius-sm);
	background: var(--apm-brand-tint);
	color: var(--apm-brand-hover);
	font-size: var(--apm-size-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.apm-term-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apm-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Term pills stay at the approved 28px height.
   A pseudo-element hit-area extension to 44px was tried and removed: on a wrapped
   list the extended areas of adjacent rows overlap, so a tap in the gap activates
   the wrong pill. 28px with 8px spacing meets WCAG 2.5.8 (AA, 24x24) and keeps the
   approved design; it does not meet 2.5.5 (AAA, 44x44). Recorded as an accepted
   deviation rather than worked around. */

/* ---- Breadcrumbs ----------------------------------------------------- */

.apm-breadcrumbs {
	font-size: var(--apm-size-tiny);
	color: var(--apm-text-subtle);
	padding-block: var(--apm-space-md);
}

.apm-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-breadcrumbs li + li::before {
	content: "/";
	margin-inline-end: 6px;
	color: var(--apm-border-strong);
}

/* Dense inline text lists take the WCAG 2.5.8 minimum (24px) rather than the 44px
   used for standalone controls: 44px here would break the approved line rhythm. */
.apm-breadcrumbs a,
.apm-breadcrumbs li > span {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--apm-text-muted);
}

/* ---- Pagination ------------------------------------------------------ */

.apm-pagination {
	margin-block-start: var(--apm-space-2xl);
}

.apm-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--apm-space-xs);
	align-items: center;
}

.apm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--apm-tap);
	min-height: var(--apm-tap);
	padding-inline: var(--apm-space-sm);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius);
	background: var(--apm-white);
	color: var(--apm-text-body);
	font-size: 14px;
	font-weight: 700;
}

.apm-pagination .page-numbers.current {
	background: var(--apm-brand);
	border-color: var(--apm-brand);
	color: var(--apm-white);
}

.apm-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

.apm-post-nav .nav-links {
	display: grid;
	gap: var(--apm-space-md);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.apm-post-nav .nav-links {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.apm-post-nav a {
	display: block;
	padding: var(--apm-space-md) var(--apm-space-lg);
	border: 1px solid var(--apm-border-card);
	border-radius: var(--apm-radius-lg);
	background: var(--apm-bg-subtle);
	color: var(--apm-text-strong);
	font-weight: 700;
}

.apm-post-nav a:hover,
.apm-post-nav a:focus {
	border-color: var(--apm-brand);
}

.apm-post-nav .nav-next {
	text-align: end;
}

/* ---- Search form ----------------------------------------------------- */

.apm-search-form {
	display: flex;
	gap: var(--apm-space-xs);
	flex-wrap: wrap;
	max-width: 520px;
}

.apm-search-form .apm-search-field {
	flex: 1 1 220px;
	min-height: var(--apm-control-h);
	min-width: 0;
	padding-inline: var(--apm-space-md);
	font-size: var(--apm-size-body);
	color: var(--apm-text);
	background: var(--apm-white);
	border: 1px solid var(--apm-border-strong);
	border-radius: var(--apm-radius);
}

.apm-search-form .apm-search-field:focus {
	outline: none;
	border-color: var(--apm-brand);
	box-shadow: 0 0 0 4px rgba(61, 80, 224, 0.18);
}

/* ---- Empty states ---------------------------------------------------- */

.apm-empty {
	border: 1px dashed var(--apm-border-strong);
	border-radius: var(--apm-radius-lg);
	background: var(--apm-bg-subtle);
	padding: var(--apm-space-xl);
	text-align: center;
}

.apm-empty h2 {
	font-size: var(--apm-size-h3);
	margin-block-end: var(--apm-space-xs);
}

.apm-empty p {
	color: var(--apm-text-muted);
	margin-inline: auto;
	max-width: 46ch;
}

/* ---- CTA band -------------------------------------------------------- */

.apm-cta-band {
	background: var(--apm-dark);
	border-radius: var(--apm-radius-xl);
	padding: clamp(28px, 3.6vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--apm-space-lg);
	flex-wrap: wrap;
	color: var(--apm-white);
}

.apm-cta-band .apm-eyebrow {
	color: var(--apm-pink-soft);
}

.apm-cta-band h2 {
	color: var(--apm-white);
	font-size: clamp(24px, 3vw, 32px);
	max-width: 440px;
	margin: 0;
}

.apm-cta-band p {
	color: var(--apm-dark-text-muted);
	max-width: 520px;
	margin-block-start: var(--apm-space-sm);
}

.apm-cta-band__actions {
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.apm-cta-band {
		flex-direction: column;
		align-items: stretch;
	}

	.apm-cta-band__actions .apm-btn {
		width: 100%;
	}
}

/* ---- Footer widgets --------------------------------------------------- */

/* Block-based widgets render their own markup and ignore before_title, so the
   dark-footer colours are applied here rather than through register_sidebar(). */
.apm-footer-widget {
	min-width: 0;
	font-size: var(--apm-size-small);
}

.apm-footer-widget :is(h1, h2, h3, h4, h5, h6),
.apm-footer-widget .wp-block-heading,
.apm-footer-widget .widget-title {
	font-size: var(--apm-size-micro);
	font-weight: 700;
	letter-spacing: var(--apm-ls-wide);
	text-transform: uppercase;
	color: var(--apm-dark-text-dimmer);
	margin-block: 0 var(--apm-space-xs);
}

.apm-footer-widget,
.apm-footer-widget p,
.apm-footer-widget li,
.apm-footer-widget label,
.apm-footer-widget td,
.apm-footer-widget th {
	color: var(--apm-dark-text-body);
}

.apm-footer-widget ul,
.apm-footer-widget ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.apm-footer-widget li {
	margin-block-end: var(--apm-space-2xs);
}

.apm-footer-widget a {
	display: inline-flex;
	align-items: center;
	min-height: var(--apm-tap);
	color: var(--apm-dark-text-body);
}

.apm-footer-widget a:hover,
.apm-footer-widget a:focus {
	color: var(--apm-white);
}

.apm-footer-widget :is(input, select, textarea) {
	width: 100%;
	min-height: var(--apm-control-h);
	padding-inline: var(--apm-space-sm);
	color: var(--apm-dark-text);
	background: var(--apm-dark-field);
	border: 1px solid var(--apm-dark-border-mid);
	border-radius: var(--apm-radius);
}

/* Slightly smaller lockup below 640px so the menu button and language switcher keep
   their room. 38px tall = 101px wide, which still clears 320px comfortably. */
@media (max-width: 640px) {
	:root {
		--apm-logo-height: 38px;
		--apm-logo-height-footer: 36px;
	}
}