/**
 * Components: buttons, cards, badges, ratings, search, pagination, forms.
 */

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.2rem;
	border: 1px solid transparent;
	border-radius: var(--aio-radius-sm);
	background: linear-gradient(140deg, var(--aio-brand-500), var(--aio-brand-600));
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(30, 42, 82, 0.12), 0 6px 16px rgba(64, 90, 166, 0.22);
	transition: filter var(--aio-transition), transform var(--aio-transition), box-shadow var(--aio-transition);
}

.btn:hover,
.btn:focus-visible {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.07);
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(30, 42, 82, 0.14), 0 10px 24px rgba(64, 90, 166, 0.28);
}

.btn:active {
	transform: translateY(0);
}

.btn[disabled],
.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	filter: none;
	transform: none;
	box-shadow: none;
}

/* Frosted outline button — sits on glass without fighting it. */
.btn--ghost {
	background: var(--aio-glass-bg);
	border-color: var(--aio-glass-border);
	color: var(--aio-ink);
	box-shadow: none;
}

@supports (backdrop-filter: blur(1px)) {
	.btn--ghost {
		-webkit-backdrop-filter: blur(10px) saturate(160%);
		backdrop-filter: blur(10px) saturate(160%);
	}
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	border-color: var(--aio-primary);
	color: var(--aio-primary);
	filter: none;
	box-shadow: 0 4px 14px rgba(64, 90, 166, 0.14);
}

.btn--subtle {
	background: var(--aio-surface-2);
	color: var(--aio-ink);
}

.btn--subtle:hover {
	background: var(--aio-line);
	color: var(--aio-ink);
}

.btn--sm {
	padding: 0.45rem 0.85rem;
	font-size: 0.8125rem;
}

.btn--lg {
	padding: 0.9rem 1.6rem;
	font-size: 0.9375rem;
}

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

/* Icon-only control */

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius-sm);
	background: transparent;
	color: var(--aio-ink);
	transition: background-color var(--aio-transition), border-color var(--aio-transition);
}

.icon-btn:hover,
.icon-btn:focus-visible {
	background: var(--aio-surface-2);
	border-color: var(--aio-line-strong);
}

.icon-btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Dark-mode toggle icon swap */

[data-scheme="light"] .icon-moon { display: block; }
[data-scheme="light"] .icon-sun { display: none; }
[data-scheme="dark"] .icon-moon { display: none; }
[data-scheme="dark"] .icon-sun { display: block; }

/* ---------- Badges & chips ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.6rem;
	border-radius: var(--aio-radius-pill);
	background: var(--aio-surface-2);
	color: var(--aio-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.badge--primary { background: var(--aio-primary-tint); color: var(--aio-primary); }
.badge--accent { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.badge--success { background: rgba(22, 163, 74, 0.12); color: var(--aio-success); }
.badge--sponsored { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.badge--verified { background: rgba(22, 163, 74, 0.12); color: var(--aio-success); }
.badge--free { background: rgba(79, 70, 229, 0.1); color: var(--aio-primary); }

[data-scheme="dark"] .badge--accent,
[data-scheme="dark"] .badge--sponsored { color: #fbbf24; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius-pill);
	background: var(--aio-card);
	color: var(--aio-text);
	font-size: 0.8125rem;
	font-weight: 500;
	transition: border-color var(--aio-transition), color var(--aio-transition), background-color var(--aio-transition);
}

.chip:hover,
.chip:focus-visible {
	border-color: var(--aio-primary);
	color: var(--aio-primary);
	text-decoration: none;
}

.chip--active {
	border-color: var(--aio-primary);
	background: var(--aio-primary-tint);
	color: var(--aio-primary);
}

.chip__count {
	color: var(--aio-muted);
	font-size: 0.75rem;
}

.eyebrow {
	display: inline-block;
	margin-bottom: 0.5rem;
	color: var(--aio-primary);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

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

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius);
	background: var(--aio-card);
	transition: transform var(--aio-transition), box-shadow var(--aio-transition), border-color var(--aio-transition), background-color var(--aio-transition);
}

/* Cards lift into frosted glass on hover rather than being permanently
   translucent — keeps the card text crisp while reading. */
.card:hover {
	transform: translateY(-3px);
	border-color: var(--aio-glass-border);
	background: var(--aio-glass-bg-strong);
	box-shadow: var(--aio-glass-shadow);
}

@supports (backdrop-filter: blur(1px)) {
	.card:hover {
		-webkit-backdrop-filter: blur(var(--aio-glass-blur)) saturate(180%);
		backdrop-filter: blur(var(--aio-glass-blur)) saturate(180%);
	}
}

.card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--aio-surface-2);
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--aio-ease);
}

.card:hover .card__media img {
	transform: scale(1.04);
}

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.7rem;
	padding: 1.35rem 1.4rem 1.5rem;
}

.card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
	/* Two-line clamp keeps card heights even across the grid. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__title a {
	color: var(--aio-ink);
}

.card__title a:hover {
	color: var(--aio-primary);
	text-decoration: none;
}

.card__excerpt {
	margin: 0;
	color: var(--aio-muted);
	font-size: 0.875rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Branded placeholder for posts without a featured image. */

.card__media--ph {
	display: grid;
	place-items: center;
	background:
		radial-gradient(18rem 12rem at 85% 10%, rgba(255, 255, 255, 0.16), transparent 60%),
		linear-gradient(140deg, var(--aio-brand-500), var(--aio-brand-700));
}

.card__media-initial {
	color: rgba(255, 255, 255, 0.85);
	font-size: 2.75rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--aio-line);
}

/* Bare cards have no chrome, so no divider either. */
.card--bare .card__footer,
.card--row .card__footer {
	padding-top: 0.35rem;
	border-top: 0;
}

/* Full-card click target without nesting interactive elements */

.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.card__body a:not(.card__link),
.card__footer a {
	position: relative;
	z-index: 2;
}

/* Horizontal list card */

.card--row {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem;
}

.card--row .card__media {
	flex: 0 0 108px;
	aspect-ratio: 3 / 2;
	border-radius: var(--aio-radius-sm);
}

.card--row .card__body {
	padding: 0;
	gap: 0.35rem;
}

.card--row .card__title {
	font-size: 0.9375rem;
}

/* Bare card (no border) */

.card--bare {
	border: 0;
	background: none;
}

.card--bare:hover {
	transform: none;
	box-shadow: none;
}

.card--bare .card__body {
	padding: 0.9rem 0 0;
}

/* ---------- Avatars ---------- */

.aiolms-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	color: #fff;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	user-select: none;
}

/* ---------- Meta line ---------- */

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	color: var(--aio-muted);
	font-size: 0.8125rem;
}

.entry-meta > * {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.entry-meta a {
	color: var(--aio-muted);
	font-weight: 500;
}

.entry-meta a:hover {
	color: var(--aio-primary);
}

.entry-meta__sep::before {
	content: "·";
	color: var(--aio-line-strong);
}

.byline__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
}

/* ---------- Product card ---------- */

.product-card__head {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}

.product-card__logo {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius-sm);
	background: var(--aio-bg);
	object-fit: contain;
	padding: 4px;
}

.product-card__logo--placeholder {
	display: grid;
	place-items: center;
	color: var(--aio-muted);
	font-size: 1.1rem;
	font-weight: 800;
}

.product-card__price {
	color: var(--aio-ink);
	font-size: 0.875rem;
	font-weight: 600;
}

.product-card__price span {
	color: var(--aio-muted);
	font-weight: 400;
}

/* ---------- Rating ---------- */

.rating {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	white-space: nowrap;
}

.rating__stars {
	position: relative;
	display: inline-block;
	color: var(--aio-line-strong);
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
}

.rating__stars::before {
	content: "★★★★★";
}

.rating__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--aio-accent);
	white-space: nowrap;
}

.rating__fill::before {
	content: "★★★★★";
}

.rating__value {
	color: var(--aio-ink);
	font-weight: 700;
}

.rating__count {
	color: var(--aio-muted);
}

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

.search-wrap {
	position: relative;
	width: 100%;
}

.search-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.4rem 0.3rem 0.85rem;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius-pill);
	background: var(--aio-surface);
	transition: border-color var(--aio-transition), box-shadow var(--aio-transition);
}

.search-form:focus-within {
	border-color: var(--aio-primary);
	box-shadow: 0 0 0 3px rgba(82, 113, 255, 0.16);
}

/* Inside the header dropdown the panel already provides the chrome. */
.header-search__panel .search-form {
	background: var(--aio-surface);
}

.header-search__panel .search-results {
	position: static;
	margin-top: 0.5rem;
	border: 0;
	background: none;
	box-shadow: none;
	max-height: min(60vh, 400px);
}

.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-size: 0.875rem;
	outline: none;
}

.search-form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--aio-primary);
	color: #fff;
}

.search-form__submit svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* Live results dropdown */

.search-results {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	right: 0;
	z-index: 120;
	max-height: min(70vh, 480px);
	overflow-y: auto;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius);
	background: var(--aio-card);
	box-shadow: var(--aio-shadow);
}

.search-results[hidden] {
	display: none;
}

.search-results__group-title {
	position: sticky;
	top: 0;
	margin: 0;
	padding: 0.6rem 1rem 0.4rem;
	background: var(--aio-card);
	color: var(--aio-muted);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.search-results__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 1rem;
	border-top: 1px solid var(--aio-line);
	color: var(--aio-text);
}

.search-results__item:hover,
.search-results__item:focus-visible {
	background: var(--aio-surface-2);
	text-decoration: none;
}

.search-results__item img {
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	object-fit: cover;
}

.search-results__title {
	color: var(--aio-ink);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
}

.search-results__sub {
	color: var(--aio-muted);
	font-size: 0.75rem;
}

.search-results__empty,
.search-results__status {
	padding: 1rem;
	color: var(--aio-muted);
	font-size: 0.875rem;
	text-align: center;
}

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

.pagination {
	margin-top: 3rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius-sm);
	color: var(--aio-text);
	font-size: 0.875rem;
	font-weight: 600;
}

.pagination .page-numbers:hover {
	border-color: var(--aio-primary);
	color: var(--aio-primary);
	text-decoration: none;
}

.pagination .page-numbers.current {
	border-color: var(--aio-primary);
	background: var(--aio-primary);
	color: #fff;
}

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

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius-sm);
	background: var(--aio-bg);
	color: var(--aio-text);
	font-size: 0.9375rem;
	transition: border-color var(--aio-transition), box-shadow var(--aio-transition);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--aio-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
	outline: none;
}

label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--aio-ink);
	font-size: 0.875rem;
	font-weight: 600;
}

/* ---------- Newsletter ---------- */

.newsletter {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: var(--aio-radius-lg);
	background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
	color: #fff;
	text-align: center;
}

.newsletter h2 {
	margin: 0;
	color: #fff;
}

.newsletter p {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
}

.newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 460px;
	margin-inline: auto;
}

.newsletter__form input[type="email"] {
	flex: 1 1 200px;
	border-color: transparent;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.newsletter__form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.newsletter__form input[type="email"]:focus {
	background: rgba(255, 255, 255, 0.24);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.newsletter__form .btn {
	background: #fff;
	color: var(--aio-primary-dark);
}

.newsletter__form .btn:hover {
	background: rgba(255, 255, 255, 0.9);
	color: var(--aio-primary-dark);
}

.newsletter__note {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- Widgets ---------- */

.widget {
	padding: 1.25rem;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius);
	background: var(--aio-card);
}

/* Block widgets put their own <h2> inside the content instead of using
   before_title — style both the classic and block heading identically. */
.widget__title,
.widget > h2,
.widget .wp-block-heading {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aio-ink);
}

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.65rem;
	font-size: 0.875rem;
}

.widget ul a {
	color: var(--aio-text);
	font-weight: 500;
}

.widget ul a:hover {
	color: var(--aio-primary);
}

.widget .wp-block-latest-posts__post-date,
.widget .wp-block-latest-comments__comment-date {
	display: block;
	color: var(--aio-muted);
	font-size: 0.75rem;
}

/* Search block */

.widget .wp-block-search__inside-wrapper {
	display: flex;
	gap: 0.5rem;
}

.widget .wp-block-search__label {
	display: none;
}

.widget .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius-sm);
	background: var(--aio-surface);
	font-size: 0.875rem;
}

.widget .wp-block-search__button {
	padding: 0.55rem 1rem;
	border: 0;
	border-radius: var(--aio-radius-sm);
	background: linear-gradient(140deg, var(--aio-brand-500), var(--aio-brand-600));
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

/* Tag cloud + categories blocks */

.widget .wp-block-tag-cloud a {
	display: inline-block;
	margin: 0 0.3rem 0.4rem 0;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--aio-line);
	border-radius: var(--aio-radius-pill);
	color: var(--aio-text);
	font-size: 0.8125rem !important;
}

.widget .wp-block-tag-cloud a:hover {
	border-color: var(--aio-primary);
	color: var(--aio-primary);
	text-decoration: none;
}

/* ---------- Notices ---------- */

.notice-box {
	display: flex;
	gap: 0.75rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--aio-line);
	border-left: 3px solid var(--aio-accent);
	border-radius: var(--aio-radius-sm);
	background: var(--aio-surface);
	color: var(--aio-muted);
	font-size: 0.875rem;
}

.notice-box--disclosure {
	border-left-color: var(--aio-accent);
}

/* ---------- Empty state ---------- */

.empty-state {
	padding: clamp(2rem, 6vw, 4rem) 1rem;
	border: 1px dashed var(--aio-line-strong);
	border-radius: var(--aio-radius);
	color: var(--aio-muted);
	text-align: center;
}

.empty-state h2 {
	margin-bottom: 0.5rem;
}

/*
 * The mobile nav used to be defined twice — once here at a 900px breakpoint
 * and once in layout.css at 920px. Because this file loads after layout.css,
 * the older copy below silently overrode the newer one, and the two disagreed
 * about where the breakpoint was. layout.css is now the single owner of
 * .primary-nav and .nav-toggle. Do not redefine them here.
 */

/* ---------------------------------------------------------------------------
   Promo slide-in
   Rendered by AIOLMS_Promos in the footer. Hidden until triggered, so it never
   affects first paint or layout shift.
   --------------------------------------------------------------------------- */

.aiolms-promo {
	position: fixed;
	bottom: 1.25rem;
	z-index: 9998;
	width: min(340px, calc(100vw - 2rem));
	border: 1px solid var(--wp--preset--color--border, rgba(0, 0, 0, 0.12));
	border-radius: var(--wp--custom--radius--lg, 16px);
	background: var(--wp--preset--color--base, #fff);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.aiolms-promo[hidden] {
	display: none;
}

.aiolms-promo.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.aiolms-promo--bottom-right { right: 1.25rem; }
.aiolms-promo--bottom-left { left: 1.25rem; }

.aiolms-promo__close {
	position: absolute;
	top: 0.4rem;
	right: 0.55rem;
	z-index: 2;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.aiolms-promo__close:hover,
.aiolms-promo__close:focus-visible {
	background: rgba(0, 0, 0, 0.7);
}

.aiolms-promo__image {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}

.aiolms-promo__body {
	padding: 1rem 1.15rem 1.15rem;
}

.aiolms-promo__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--accent, #2271b1);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.aiolms-promo__heading {
	margin: 0 0 0.4rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.aiolms-promo__text {
	margin: 0 0 0.65rem;
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.85;
}

.aiolms-promo__features {
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
}

.aiolms-promo__features li {
	position: relative;
	margin-bottom: 0.3rem;
	padding-left: 1.15rem;
}

.aiolms-promo__features li::before {
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent, #2271b1);
	font-weight: 700;
	content: "✓";
}

.aiolms-promo__cta {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: var(--wp--custom--radius--md, 10px);
	background: var(--wp--preset--color--accent, #2271b1);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.aiolms-promo__cta:hover,
.aiolms-promo__cta:focus-visible {
	filter: brightness(1.08);
	color: #fff;
}

.aiolms-promo__disclosure {
	margin: 0.6rem 0 0;
	font-size: 0.6875rem;
	line-height: 1.4;
	opacity: 0.6;
}

/* Mobile: dock to the bottom edge. A floating card on a small screen reads as
   an intrusive interstitial, which is a ranking problem as well as a UX one. */
@media (max-width: 600px) {
	.aiolms-promo {
		right: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		border-radius: var(--wp--custom--radius--lg, 16px) var(--wp--custom--radius--lg, 16px) 0 0;
	}

	.aiolms-promo__image {
		height: 100px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aiolms-promo {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Alerts
   Flash notices set by the form handlers. These live here rather than in
   dashboard.css because the newsletter form sits in the footer of every
   template, and its confirmation message has to be styled everywhere.
   --------------------------------------------------------------------------- */

.alert {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--aio-line);
	border-left-width: 3px;
	border-radius: var(--aio-radius-sm);
	background: var(--aio-surface);
	font-size: 0.9375rem;
}

.alert p {
	margin: 0.25rem 0 0;
	color: var(--aio-muted);
	font-size: 0.875rem;
}

.alert--success { border-left-color: var(--aio-success); }
.alert--error   { border-left-color: var(--aio-danger); }
.alert--warning { border-left-color: var(--aio-accent); }
.alert--info    { border-left-color: var(--aio-primary); }

/* Inside the footer CTA the alert sits on a glass panel, so it needs its own
   backdrop rather than inheriting the page surface. */
.footer-cta__text .alert {
	margin: 0.85rem 0 0;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(6px);
}

/* Anchor target must clear the sticky header. */
#newsletter {
	scroll-margin-top: 6rem;
}