/* ==========================================================================
   JWolfe — cookie / tracking consent bar
   --------------------------------------------------------------------------
   Shape follows the reference the client supplied: a dark full-width bar,
   copy on the left, a stack of pill buttons on the right. Palette and type
   are the site's own, not the reference's — ink ground (#141515), ivory
   text, teal accent, Fraunces for the heading and Mulish for the body, the
   same 999px pill radius the header buttons use.

   CONTRAST: ivory #E8E4D3 on ink #141515 is ~14:1, and teal #00AEBB on ink
   is ~6.4:1 — both clear WCAG AA for body text, and AAA for the ivory.

   The bar is a bottom sheet, not a modal: it never traps the page or blocks
   reading. Rendered hidden and revealed by JS, so a cached page can never
   show it to someone who already answered.
   ========================================================================== */

.jw-consent {
	--jwc-ink: var(--jw-text, #141515);
	--jwc-ivory: var(--jw-primary, #E8E4D3);
	--jwc-teal: var(--jw-secondary, #00AEBB);

	position: fixed;
	inset: auto 0 0 0;
	z-index: 10000;
	box-sizing: border-box;
	padding: clamp(18px, 2.4vw, 28px) clamp(16px, 4vw, 48px);
	background: var(--jwc-ink);
	border-top: 1px solid rgba(232, 228, 211, 0.16);
	box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35);
	color: var(--jwc-ivory);
	font-family: var(--e-global-typography-text-font-family, "Mulish"), system-ui, sans-serif;
	transform: translateY(100%);
	transition: transform 420ms cubic-bezier(0.12, 0.23, 0.5, 1);
}

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

.jw-consent.is-visible {
	transform: translateY(0);
}

.jw-consent__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(18px, 3vw, 48px);
	max-width: 1240px;
	margin: 0 auto;
}

.jw-consent__copy {
	flex: 1 1 420px;
	min-width: 0;
}

.jw-consent__title {
	margin: 0 0 8px;
	font-family: var(--e-global-typography-primary-font-family, "Fraunces"), Georgia, serif;
	font-size: clamp(17px, 1.5vw, 21px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--jwc-ivory);
}

.jw-consent__text {
	margin: 0;
	font-size: clamp(13px, 1.05vw, 14.5px);
	line-height: 1.6;
	color: rgba(232, 228, 211, 0.82);
}

.jw-consent__link {
	color: var(--jwc-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
	white-space: nowrap;
}

.jw-consent__link:hover,
.jw-consent__link:focus-visible {
	color: var(--jwc-ivory);
}

/* ---- buttons ---- */

.jw-consent__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 0 0 auto;
	width: clamp(220px, 24vw, 280px);
}

.jw-consent__btn {
	display: block;
	width: 100%;
	padding: 13px 22px;
	border: 1px solid rgba(232, 228, 211, 0.55);
	border-radius: 999px;
	background: transparent;
	color: var(--jwc-ivory);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	cursor: pointer;
	transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}

.jw-consent__btn:hover,
.jw-consent__btn:focus-visible {
	background: var(--jwc-ivory);
	border-color: var(--jwc-ivory);
	color: var(--jwc-ink);
}

.jw-consent__btn--primary {
	background: var(--jwc-teal);
	border-color: var(--jwc-teal);
	color: var(--jwc-ink);
}

.jw-consent__btn--primary:hover,
.jw-consent__btn--primary:focus-visible {
	background: var(--jwc-ivory);
	border-color: var(--jwc-ivory);
	color: var(--jwc-ink);
}

.jw-consent__btn:focus-visible {
	outline: 2px solid var(--jwc-teal);
	outline-offset: 3px;
}

/* ---- preferences ---- */

.jw-consent__prefs {
	flex: 1 1 100%;
	margin-top: 4px;
	padding-top: 18px;
	border-top: 1px solid rgba(232, 228, 211, 0.16);
}

.jw-consent__prefs[hidden] {
	display: none;
}

.jw-consent__list {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.jw-consent__row {
	margin: 0;
}

.jw-consent__label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(232, 228, 211, 0.82);
	cursor: pointer;
}

.jw-consent__label input {
	margin: 2px 0 0;
	width: 17px;
	height: 17px;
	accent-color: var(--jwc-teal);
	flex: 0 0 auto;
	cursor: pointer;
}

.jw-consent__label input:disabled {
	cursor: default;
	opacity: 0.75;
}

.jw-consent__label strong {
	color: var(--jwc-ivory);
	font-weight: 700;
}

.jw-consent__prefs .jw-consent__btn {
	width: auto;
	min-width: 200px;
}

/* ---- narrow screens ---- */

@media (max-width: 782px) {

	.jw-consent__inner {
		gap: 16px;
	}

	.jw-consent__actions {
		width: 100%;
	}

	.jw-consent__text {
		font-size: 13px;
	}

	.jw-consent {
		max-height: 85vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (prefers-reduced-motion: reduce) {

	.jw-consent {
		transition-duration: 0.01ms;
	}
}