/**
 * Consent banner and blocked embeds.
 *
 * The banner is a strip, not an overlay. It does not dim the page, does not
 * trap focus and does not cover the content — because browsing must not be
 * conditional on answering it.
 */

.ae-consent {
	position: fixed;
	z-index: 9999;
	inset-inline: 0;
	color: var(--wp--preset--color--base, #f2f0ea);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.55;
}

.ae-consent[hidden] {
	display: none;
}

.ae-consent--bottom {
	inset-block-end: 0;
}

.ae-consent--center {
	inset-block: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.ae-consent--center .ae-consent__panel {
	pointer-events: auto;
	max-width: 40rem;
	border: 1px solid var(--wp--preset--color--accent, #c4271a);
}

.ae-consent__panel {
	max-width: 90rem;
	margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 2rem) var(--wp--custom--gutter, 1.5rem);
	background-color: var(--wp--preset--color--contrast, #0f0f0e);
	border-top: 2px solid var(--wp--preset--color--accent, #c4271a);
}

.ae-consent__title {
	display: flex;
	align-items: baseline;
	gap: 0.9em;
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: var(--wp--preset--font-size--cartela, 0.75rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: inherit;
}

/* The same red square that marks a section, so the strip belongs to the page. */
.ae-consent__title::before {
	content: "";
	flex: none;
	width: 0.55em;
	height: 0.55em;
	background-color: var(--wp--preset--color--accent, #c4271a);
}

.ae-consent__intro {
	margin: 0 0 1.25rem;
	max-width: 68ch;
	color: inherit;
	opacity: 0.88;
}

.ae-consent__intro a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.ae-consent__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/*
 * Accept and reject are the same element with the same styling. Making the
 * refusal quieter than the acceptance is the dark pattern regulators name
 * explicitly, and it is trivially avoided by not doing it.
 */
.ae-consent__button {
	appearance: none;
	min-height: 44px;
	padding: 0.6em 1.4em;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: var(--wp--preset--font-size--cartela, 0.75rem);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #0f0f0e);
	background-color: var(--wp--preset--color--base, #f2f0ea);
	border: 1px solid var(--wp--preset--color--base, #f2f0ea);
	border-radius: 0;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.ae-consent__button:hover {
	color: #fff;
	background-color: var(--wp--preset--color--accent, #c4271a);
	border-color: var(--wp--preset--color--accent, #c4271a);
}

.ae-consent__button:focus-visible,
.ae-consent__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ae-consent__link {
	appearance: none;
	min-height: 44px;
	padding: 0.6em 0.4em;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: var(--wp--preset--font-size--cartela, 0.75rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
	background: none;
	border: 0;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.ae-consent__details {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid currentColor;
}

.ae-consent__details[hidden] {
	display: none;
}

.ae-consent__categories {
	display: grid;
	gap: 1rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {
	.ae-consent__categories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ae-consent__label {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-weight: 500;
	cursor: pointer;
}

.ae-consent__label input[disabled] {
	cursor: default;
}

.ae-consent__required {
	margin-inline-start: 0.35em;
	font-size: 0.75rem;
	font-weight: 400;
	opacity: 0.6;
}

.ae-consent__category-description {
	margin: 0.35rem 0 0 1.6rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: inherit;
	opacity: 0.72;
}

/* ------------------------------------------------------------------ *
 * Blocked embeds
 * ------------------------------------------------------------------ */

.ae-embed-block {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 12rem;
	aspect-ratio: var(--ae-video-ratio, 16 / 9);
	overflow: hidden;
	background-color: var(--wp--preset--color--contrast, #0f0f0e);
	color: var(--wp--preset--color--base, #f2f0ea);
	text-align: center;
}

.ae-embed-block__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Dimmed so the notice on top stays legible over any image. */
	opacity: 0.35;
}

.ae-embed-block__notice {
	position: relative;
	max-width: 44ch;
	padding: clamp(1rem, 4vw, 2rem);
}

.ae-embed-block__title {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 600;
}

.ae-embed-block__text {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: inherit;
	opacity: 0.85;
}

.ae-embed-block__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.ae-embed-block__button {
	appearance: none;
	min-height: 44px;
	padding: 0.55em 1.2em;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, Menlo, monospace);
	font-size: var(--wp--preset--font-size--cartela, 0.75rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast, #0f0f0e);
	background-color: var(--wp--preset--color--base, #f2f0ea);
	border: 1px solid var(--wp--preset--color--base, #f2f0ea);
	border-radius: 0;
	cursor: pointer;
}

.ae-embed-block__button--secondary {
	color: var(--wp--preset--color--base, #f2f0ea);
	background-color: transparent;
}

.ae-embed-block__button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.ae-embed-block__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 1rem 0 0;
	font-size: 0.8125rem;
}

.ae-embed-block__links a {
	color: inherit;
	opacity: 0.8;
	text-underline-offset: 0.2em;
}

.ae-embed-block iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}