/*
 * Cookie consent banner and preferences dialog (module "cookie-consent"; markup in
 * template-parts/components/cookie-consent.php). The banner shows only while html.cookie-consent-pending, which
 * the head bootstrap sets before first paint when no choice is stored: without JavaScript it never shows (and held
 * scripts never run). Default layout: a sheet at the bottom of a phone, a card at the bottom corner from 640px;
 * "Accept all" in the theme's button look (forms.css), "Preferences" and "Reject all" as text buttons under it.
 * With the class cookie-consent--equal on the banner the three choices share the button look and size.
 */

.cookie-consent {
	display: none;
	gap: var(--myco-space-sm);
	position: fixed;
	inset-inline: 0;
	bottom: var(--myco-cookie-consent-gap, 0px);
	z-index: var(--myco-z-consent);
	padding: var(--myco-space-lg) var(--myco-space-md) calc(var(--myco-space-md) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--myco-color-border);
	border-radius: var(--myco-radius-xl) var(--myco-radius-xl) 0 0;
	background: var(--myco-color-bg);
	box-shadow: var(--myco-shadow-card);
}

/* Screens only: a printed page carries no banner. */
@media screen {
	.cookie-consent-pending .cookie-consent {
		display: grid;
	}
}

/* WCAG 2.4.11: a focused element is never hidden under the banner, and the end of the page can scroll above it.
   cookie-consent.js keeps the banner's height in --myco-cookie-consent-height; the gap is its distance from the bottom. */
html.cookie-consent-pending {
	--myco-cookie-consent-gap: 0px;
	scroll-padding-bottom: calc(var(--myco-cookie-consent-height, 0px) + var(--myco-cookie-consent-gap));
}

.cookie-consent-pending body {
	padding-bottom: calc(var(--myco-cookie-consent-height, 0px) + var(--myco-cookie-consent-gap));
}

.cookie-consent__title,
.cookie-consent-dialog__title {
	margin: 0;
	font-size: var(--myco-font-size-lg);
}

.cookie-consent__text {
	margin: 0;
}

.cookie-consent__actions,
.cookie-consent-dialog__actions {
	display: grid;
	gap: var(--myco-space-xs);
}

.cookie-consent__button {
	width: 100%;
}

.cookie-consent__more {
	display: flex;
	flex-wrap: wrap;
	gap: var(--myco-space-xs);
	justify-content: space-between;
}

/* Default: "Preferences" and "Reject all" as text buttons (44px tall, WCAG 2.5.8 asks 24px). */
.cookie-consent:not(.cookie-consent--equal) .cookie-consent__button--text {
	width: auto;
	min-height: 2.75rem;
	padding: 0 var(--myco-space-xs);
	background: transparent;
	color: var(--myco-color-text);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cookie-consent:not(.cookie-consent--equal) .cookie-consent__button--text:hover {
	color: var(--myco-color-accent);
}

/* cookie-consent--equal: the three choices in one column, one look and size. */
.cookie-consent--equal .cookie-consent__more {
	display: contents;
}

.cookie-consent-dialog {
	width: min(100% - 2 * var(--myco-space-md), 36rem);
	max-height: calc(100% - 2 * var(--myco-space-md));
	padding: var(--myco-space-lg);
	border: 1px solid var(--myco-color-border);
	border-radius: var(--myco-radius-lg);
	background: var(--myco-color-bg);
	color: var(--myco-color-text);
}

/* A literal: ::backdrop does not inherit custom properties in older browsers. */
.cookie-consent-dialog::backdrop {
	background: rgba(31, 35, 40, 0.55);
}

.cookie-consent-dialog__head {
	display: flex;
	gap: var(--myco-space-md);
	align-items: center;
	justify-content: space-between;
}

.cookie-consent-dialog__close {
	flex: none;
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border-color: var(--myco-color-border);
	background: transparent;
	color: var(--myco-color-text);
	font-size: 1.5rem;
	line-height: 1;
}

.cookie-consent-dialog__list {
	display: grid;
	gap: var(--myco-space-md);
	margin: var(--myco-space-lg) 0;
	padding: 0;
	list-style: none;
}

.cookie-consent-dialog__list label {
	display: flex;
	gap: var(--myco-space-xs);
	align-items: center;
	margin: 0;
}

.cookie-consent-dialog__list input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--myco-color-accent);
}

.cookie-consent-dialog__list p {
	margin: var(--myco-space-2xs) 0 0;
	color: var(--myco-color-muted);
	font-size: var(--myco-font-size-sm);
}

@media (min-width: 640px) {
	html.cookie-consent-pending {
		--myco-cookie-consent-gap: var(--myco-space-lg);
	}

	.cookie-consent {
		inset-inline: var(--myco-cookie-consent-gap) auto;
		width: min(100% - 2 * var(--myco-cookie-consent-gap), 29rem);
		padding: var(--myco-space-lg);
		border: 1px solid var(--myco-color-border);
		border-radius: var(--myco-radius-xl);
	}

	.cookie-consent-dialog__actions {
		grid-template-columns: repeat(3, minmax(0, 12rem));
	}
}