/**
 * Tese — Cookie Consent Banner
 *
 * Modern pill-shaped banner that sits centred at the bottom of the
 * viewport. Colours are driven entirely by CSS custom properties set
 * inline by the PHP renderer, so the user's palette choices in the Site
 * Guide apply without invalidating this stylesheet (which can stay
 * cached aggressively).
 *
 * @package SuedeX\Tese
 */

.tese-cookie-banner {
	position: fixed;
	left: 50%;
	bottom: max( 24px, env( safe-area-inset-bottom, 0px ) );
	transform: translateX( -50% ) translateY( calc( 100% + 32px ) );
	display: inline-flex;
	align-items: center;
	gap: 16px;
	max-width: min( 720px, calc( 100vw - 48px ) );
	padding: 12px 12px 12px 24px;
	background: var( --tese-cookie-bg, #ffffff );
	color: var( --tese-cookie-text, #1e1e1e );
	border-radius: 999px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.14 ), 0 2px 6px rgba( 0, 0, 0, 0.08 );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	z-index: 999999;
	opacity: 0;
	pointer-events: none;
	transition: transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ), opacity 0.3s ease;
}

.tese-cookie-banner.is-shown {
	transform: translateX( -50% ) translateY( 0 );
	opacity: 1;
	pointer-events: auto;
}

/* `hidden` is the HTML attribute the renderer sets so screen readers
 * don't announce the banner before JS upgrades it. We override the
 * default `display: none` to `none !important` so user CSS that
 * targets the banner can't accidentally reveal it before consent. */
.tese-cookie-banner[ hidden ] {
	display: none !important;
}

.tese-cookie-banner__icon {
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

.tese-cookie-banner__message {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.tese-cookie-banner__link {
	color: inherit;
	text-decoration: underline;
	margin-left: 6px;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.tese-cookie-banner__link:hover,
.tese-cookie-banner__link:focus {
	opacity: 1;
}

.tese-cookie-banner__actions {
	display: inline-flex;
	gap: 8px;
	flex-shrink: 0;
}

.tese-cookie-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --tese-cookie-button-bg, #f0f0f0 );
	color: var( --tese-cookie-button-text, #1e1e1e );
	border: 0;
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.tese-cookie-banner__btn:hover,
.tese-cookie-banner__btn:focus {
	opacity: 0.85;
	transform: translateY( -1px );
}

.tese-cookie-banner__btn--reject {
	background: transparent;
	color: var( --tese-cookie-text, #1e1e1e );
	border: 1px solid color-mix( in srgb, var( --tese-cookie-text, #1e1e1e ) 25%, transparent );
}

.tese-cookie-banner__btn--reject:hover {
	background: color-mix( in srgb, var( --tese-cookie-text, #1e1e1e ) 6%, transparent );
}

/* Mobile: full-width rounded rectangle so the banner doesn't get cropped
 * when there isn't enough room for a centred pill. */
@media ( max-width: 600px ) {
	.tese-cookie-banner {
		left: 16px;
		right: 16px;
		max-width: none;
		bottom: max( 16px, env( safe-area-inset-bottom, 0px ) );
		transform: translateY( calc( 100% + 32px ) );
		flex-wrap: wrap;
		padding: 14px 18px;
		border-radius: 18px;
	}

	.tese-cookie-banner.is-shown {
		transform: translateY( 0 );
	}

	.tese-cookie-banner__message {
		flex: 1 1 100%;
		font-size: 13.5px;
	}

	.tese-cookie-banner__actions {
		width: 100%;
		justify-content: flex-end;
	}
}

/* Reduced-motion users get an instant fade with no slide. */
@media ( prefers-reduced-motion: reduce ) {
	.tese-cookie-banner {
		transition: opacity 0.2s ease;
		transform: translateX( -50% ) translateY( 0 );
	}
	.tese-cookie-banner.is-shown {
		transform: translateX( -50% ) translateY( 0 );
	}
	@media ( max-width: 600px ) {
		.tese-cookie-banner,
		.tese-cookie-banner.is-shown {
			transform: translateY( 0 );
		}
	}
}