/*
 * cookie-banner.css — the consent banner in front of Google Analytics.
 *
 * Sibling of css/header.css and css/footer.css: theme chrome with no
 * block.json to hang a stylesheet on. inc/analytics.php enqueues it only while
 * analytics is on for the request.
 *
 * Written mobile-first. Below 768px the banner is a bar across the bottom of
 * the viewport; from 768px it is a card in the bottom-left corner, clear of the
 * back-to-top button docked on the right edge.
 */

/* Scoped border-box, as in the header and the footer. */
.sws-cookie-banner,
.sws-cookie-banner *,
.sws-cookie-banner *::before,
.sws-cookie-banner *::after {
	box-sizing: border-box;
}

/*
 * The display below outranks the browser's own [hidden] rule, so the banner
 * would never go away without this one.
 */
.sws-cookie-banner[hidden] {
	display: none;
}

/*
 * Above the back-to-top button (z-index 90): while the banner is up, the
 * decision comes first.
 */
.sws-cookie-banner {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem var(--sws-gutter, 0.75rem);
	border-top: 1px solid var(--wp--preset--color--line, #dbeefd);
	background-color: var(--wp--preset--color--surface, #ffffff);
	box-shadow: var(--sws-shadow-panel);
	color: var(--wp--preset--color--text, #4a6f8a);
	font-size: 0.875rem;
	line-height: 1.6;
}

.sws-cookie-banner__text {
	margin: 0;
}

.sws-cookie-banner__link {
	color: var(--wp--preset--color--heading, #0e314c);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--sws-transition);
}

.sws-cookie-banner__link:hover,
.sws-cookie-banner__link:focus-visible {
	color: var(--wp--preset--color--accent, #44ce6f);
}

.sws-cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/*
 * Both answers look the same on purpose: declining must be as easy to find and
 * to hit as accepting. The palette pair is chosen for contrast rather than
 * taken from the header button — white on the brand purple stays below AA.
 */
.sws-cookie-banner__button {
	flex: 1 1 8rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0.625rem 1.25rem;
	border: 0;
	border-radius: var(--sws-radius, 4px);
	background-color: var(--wp--preset--color--heading, #0e314c);
	color: var(--wp--preset--color--surface, #ffffff);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--sws-transition),
		color var(--sws-transition);
}

.sws-cookie-banner__button:hover,
.sws-cookie-banner__button:focus-visible {
	background-color: var(--wp--preset--color--accent, #44ce6f);
	color: var(--wp--preset--color--heading, #0e314c);
}

/*--------------------------------------------------------------
# Breakpoints
--------------------------------------------------------------*/

@media screen and (min-width: 768px) {

	.sws-cookie-banner {
		right: auto;
		bottom: 1.25rem;
		left: 1.25rem;
		width: min(26.25rem, 100% - 2.5rem);
		padding: 1.5rem;
		border: 1px solid var(--wp--preset--color--line, #dbeefd);
		border-radius: var(--sws-radius-lg, 5px);
	}
}

@media print {

	.sws-cookie-banner {
		display: none;
	}
}