/* StretchLAB cookie consent banner — pill collapses to card on click.
 * Two-tier consent: Necessary (always on) + Optional (Accept / Reject).
 * Public JS API at window.slConsent (see assets/js/cookie-consent.js).
 */

/* ── Pill (default first-visit state) ────────────── */

.sl-cc-pill {
	position: fixed;
	bottom: clamp(14px, 2vw, 20px);
	left: clamp(14px, 2vw, 20px);
	z-index: 9000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ink);
	color: var(--bone);
	border: 1px solid var(--ink);
	border-radius: 100px;
	padding: 8px 14px 8px 12px;
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 10px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 200ms ease-out, transform 200ms ease-out;
	pointer-events: none;
}

.sl-cc-pill.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.sl-cc-pill:hover { opacity: 0.85; }

.sl-cc-pill:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 4px;
}

.sl-cc-pill__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yellow);
	display: inline-block;
	flex: 0 0 auto;
}

/* ── Card (expanded state) ──────────────────────── */

.sl-cc {
	position: fixed;
	bottom: clamp(14px, 2vw, 20px);
	left: clamp(14px, 2vw, 20px);
	z-index: 9000;
	width: min(280px, calc(100vw - 28px));
	background: rgba(241, 237, 228, 0.78); /* bone @ 78% */
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	color: var(--ink);
	border: 1px solid rgba(14, 14, 12, 0.12);
	border-radius: 14px;
	padding: 14px 16px;
	font-family: var(--sans);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease-out, transform 220ms ease-out;
	pointer-events: none;
}

/* Browsers without backdrop-filter (older Firefox, some embedded webviews):
   fall back to a slightly more opaque bone so the body copy stays legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.sl-cc {
		background: rgba(241, 237, 228, 0.95);
	}
}

.sl-cc.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.sl-cc__label {
	display: block;
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 10px;
	color: var(--muted);
	margin-bottom: 6px;
}

.sl-cc__title {
	font-family: var(--serif);
	font-size: 20px;
	line-height: 1.05;
	font-weight: 400;
	margin: 0 0 6px 0;
	color: var(--ink);
}

.sl-cc__body {
	font-family: var(--sans);
	font-size: 12px;
	line-height: 1.45;
	margin: 0 0 12px 0;
	color: var(--ink);
}

.sl-cc__body a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sl-cc__body a:hover {
	opacity: 0.7;
}

.sl-cc__actions {
	display: flex;
	flex-direction: row;
	gap: 6px;
}

.sl-cc__btn {
	font-family: var(--mono);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 10px;
	padding: 9px 10px;
	border-radius: 100px;
	cursor: pointer;
	border: 1px solid var(--ink);
	transition: opacity 150ms ease-out;
	flex: 1 1 0;
	white-space: nowrap;
}

.sl-cc__btn:hover {
	opacity: 0.85;
}

.sl-cc__btn:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 4px;
}

.sl-cc__btn--primary {
	background: var(--ink);
	color: var(--bone);
}

.sl-cc__btn--secondary {
	background: transparent;
	color: var(--ink);
}

.sl-cc__close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: none;
	padding: 6px;
	margin: 0;
	cursor: pointer;
	color: var(--ink);
	opacity: 0.55;
	font-size: 18px;
	line-height: 1;
}

.sl-cc__close:hover { opacity: 1; }

.sl-cc__close:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 2px;
}

/* On mobile the hero's "Book Intro" CTA sits at bottom-left and overlaps
   the pill. Swap pill + card to bottom-right so they sit clear of the CTA.
   Desktop stays bottom-left (chosen by the user up-thread). */
@media (max-width: 768px) {
	.sl-cc-pill,
	.sl-cc {
		left: auto;
		right: clamp(14px, 3vw, 20px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sl-cc,
	.sl-cc-pill {
		transition: opacity 0ms;
		transform: none;
	}
}

/* Footer "Cookie preferences" trigger — styled to match the existing
   footer link list so it sits naturally in the Legal column. */
.site-footer__cookie-prefs {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.site-footer__cookie-prefs:hover {
	text-decoration: underline;
}

.site-footer__cookie-prefs:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 2px;
}