/*
 * assets/css/consent.css · Out & Down theme · Phase 7.
 *
 * Section 33 cookie banner and Section 32 site notice banner.
 * Loaded on every public page; both are small, and both can appear anywhere.
 */

/* ------------------------------------------------------------------ */
/* Cookie banner — a Ground cell fixed to the foot of the viewport.    */
/* Sits over the page, never pushes layout. Both buttons on the first  */
/* surface; Decline first in the DOM.                                  */
/* ------------------------------------------------------------------ */

.oad-consent {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--24);
	padding-bottom: calc(var(--wp--preset--spacing--24) + env(safe-area-inset-bottom, 0px));
	border-top: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
}

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

@media (min-width: 1024px) {
	.oad-consent {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--32);
		padding: var(--wp--preset--spacing--24) var(--wp--preset--spacing--40);
		padding-bottom: calc(var(--wp--preset--spacing--24) + env(safe-area-inset-bottom, 0px));
	}
}

.oad-consent__msg {
	max-width: 62ch;
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
}

.oad-consent__lbl {
	display: block;
	margin-bottom: var(--wp--preset--spacing--8);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-consent__msg a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}


.oad-consent__actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--16);
}

@media (min-width: 1024px) {
	.oad-consent__actions {
		display: flex;
		flex-shrink: 0;
	}
}

/* Accept: Ink at rest, Action on hover (Rule 03). Decline: same size, same
   weight, Ground with an Ink hover. */
.oad-consent__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--24);
	border: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-consent__btn:hover {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}

.oad-consent__btn--ghost {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

.oad-consent__btn--ghost:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* A toast while the banner is up must stay readable above it. */
.oad-consent-open .oad-toast {
	z-index: 901;
}

/* ------------------------------------------------------------------ */
/* Site notice — Section 32 banner. Full width under the header, a     */
/* 4px left bar marks the kind: Ink for info, Warning for a delay.     */
/* ------------------------------------------------------------------ */

.oad-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--16);
	width: 100%;
	padding: 0 0 0 var(--wp--preset--spacing--24);
	border-bottom: 2px solid var(--wp--preset--color--ink);
	/* stylelint-disable-next-line declaration-property-value-disallowed-list -- Section 32: the 4px bar marks the kind */
	border-left: 4px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	font-family: var(--wp--preset--font-family--speak);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5;
}

.oad-notice[hidden] {
	display: none;
}

.oad-notice--warn {
	border-left-color: var(--wp--preset--color--warning);
}

.oad-notice__msg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	min-width: 0;
	margin: 0;
	padding: var(--wp--preset--spacing--8) 0;
}

.oad-notice__lbl {
	padding-right: var(--wp--preset--spacing--16);
	border-right: 2px solid var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--shout);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.oad-notice__msg a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.oad-notice__close {
	flex-shrink: 0;
	align-self: stretch;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-left: 2px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--meter);
	font-weight: 500;
	font-size: 16px;
	cursor: pointer;
	transition-property: background-color, color;
	transition-duration: 100ms;
	transition-timing-function: ease-out;
}

.oad-notice__close:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

@media (min-width: 1024px) {
	.oad-notice {
		padding-left: var(--wp--preset--spacing--40);
	}
}