/**
 * Cookies Plugin by WCAGhub — Frontend stylesheet (WCAG 2.2 AA compliant)
 *
 * Colors via --wchc-* CSS variables (injected by plugin from admin settings).
 * Fully customizable through the admin Appearance panel.
 *
 * Accessibility notes:
 *  - All interactive elements meet 24×24 px minimum target size (WCAG 2.5.8).
 *    Most are 44×44 to also satisfy AAA (2.5.5).
 *  - Focus indicators are 2px solid + 2px offset, visible on every focusable
 *    element via :focus-visible (WCAG 2.4.7, 2.4.11, 2.4.13).
 *  - Reduced motion: all transitions collapse to ~0ms when the user has
 *    requested reduced motion (WCAG 2.3.3, AAA).
 *  - Inactive banner/modal use both `visibility:hidden` AND `aria-hidden`
 *    in markup, so AT and keyboard users skip them entirely.
 */

/* ── Visually-hidden utility (sr-only) ──
   For text that must be available to screen readers but not visible.
   Preserves announcement while hiding the element from sighted users. */
.wchc-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ── Overlay ── */
.wchc-cookie-overlay {
	/* position: fixed moved to .wchc-active — WCAG 2.4.11: inactive elements
	   must not be fixed/sticky so scanners don't flag them as obscuring. */
	inset: 0;
	background: hsl(0 0% 0% / 0.45); /* darker → better contrast for text behind it being unreadable signals "modal is on top" */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 999998;
	opacity: 0;
	visibility: hidden;
	display: none; /* WCAG 2.4.11: remove from layout tree when inactive */
	transition: opacity 0.35s ease, visibility 0.35s ease;
}
.wchc-cookie-overlay.wchc-active {
	position: fixed;
	display: block;
	opacity: 1;
	visibility: visible;
}

/* ── Banner ── */
.wchc-cookie-banner {
	/* position: fixed moved to .wchc-active — WCAG 2.4.11: inactive elements
	   must not be fixed/sticky so scanners don't flag them as obscuring. */
	left: 0;
	right: 0;
	z-index: 999999;
	background: var(--wchc-bg, #ffffff);
	border-color: var(--wchc-primary, #4B7A56);
	box-shadow: 0 -4px 32px hsl(0 0% 0% / 0.06), 0 -1px 0 hsl(0 0% 0% / 0.04);
	padding: 0;
	opacity: 0;
	visibility: hidden;
	display: none; /* WCAG 2.4.11: remove from layout tree when inactive */
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s ease;
	box-sizing: border-box;
}
.wchc-cookie-banner *, .wchc-cookie-banner *::before, .wchc-cookie-banner *::after,
.wchc-cookie-modal *, .wchc-cookie-modal *::before, .wchc-cookie-modal *::after {
	box-sizing: border-box;
}
.wchc-position-bottom {
	bottom: 0;
	border-top: 2px solid var(--wchc-primary, #4B7A56);
	transform: translateY(100%);
}
.wchc-position-top {
	top: 0;
	border-bottom: 2px solid var(--wchc-primary, #4B7A56);
	transform: translateY(-100%);
	box-shadow: 0 4px 32px hsl(0 0% 0% / 0.06);
}
.wchc-position-center {
	top: 50%;
	left: 50%;
	right: auto;
	width: min(520px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	transform: translate(-50%, -45%);
	border: 1px solid hsl(0 0% 0% / 0.08);
	border-top: 2px solid var(--wchc-primary, #4B7A56);
	border-radius: var(--wchc-radius, 12px);
	box-shadow: 0 24px 64px hsl(0 0% 0% / 0.1);
}
.wchc-cookie-banner.wchc-active { position: fixed; display: block; opacity: 1; visibility: visible; }
.wchc-cookie-banner.wchc-position-bottom.wchc-active { transform: translateY(0); }
.wchc-cookie-banner.wchc-position-top.wchc-active { transform: translateY(0); }
.wchc-cookie-banner.wchc-position-center.wchc-active { transform: translate(-50%, -50%); }

.wchc-cookie-banner-inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 1.25rem 1.75rem;
	display: flex;
	align-items: flex-start;
	gap: 1.75rem;
	box-sizing: border-box;
	overflow: hidden;
}
.wchc-position-center .wchc-cookie-banner-inner {
	flex-direction: column;
	padding: 1.5rem;
	gap: 1.25rem;
}
@media (max-width: 768px) {
	.wchc-cookie-banner-inner {
		flex-direction: column;
		padding: 1rem;
		gap: 0.75rem;
	}
}
@media (max-width: 400px) {
	.wchc-cookie-banner-inner {
		padding: 0.875rem;
		gap: 0.625rem;
	}
}

.wchc-cookie-text {
	flex: 1;
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
}
.wchc-cookie-banner-title {
	font-family: var(--wchc-font, 'Geist', sans-serif);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wchc-text, #0a0a0a);
	margin: 0 0 0.4rem;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
@media (max-width: 400px) {
	.wchc-cookie-banner-title { font-size: 0.95rem; }
	.wchc-cookie-text p { font-size: 0.85rem; }
}
.wchc-cookie-text p {
	font-family: var(--wchc-font, 'Geist', sans-serif);
	/* Bumped from 0.8rem to 0.875rem for readability — was borderline-small. */
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wchc-text, #0a0a0a);
	margin: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.wchc-cookie-text a {
	color: var(--wchc-primary-strong, var(--wchc-primary, #4B7A56));
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 0.15s ease;
}
.wchc-cookie-text a:hover,
.wchc-cookie-text a:focus-visible {
	text-decoration-thickness: 2px;
}
.wchc-cookie-text a:focus-visible {
	outline: 2px solid var(--wchc-primary, #4B7A56);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Buttons ── */
.wchc-cookie-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}
@media (max-width: 768px) {
	.wchc-cookie-actions { width: 100%; flex-direction: column; }
	.wchc-cookie-actions button { width: 100%; white-space: normal; }
}

.wchc-cookie-btn {
	font-family: var(--wchc-font, 'Geist', sans-serif);
	/* Bumped from 0.8rem — buttons need to be readable. */
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	border: 1px solid transparent;
	border-radius: var(--wchc-radius, 12px);
	cursor: pointer;
	padding: 0.7rem 1.25rem;
	/* WCAG 2.5.8 AA target size = 24×24 minimum. AAA = 44×44.
	   Both met here for inputs, mouse, and touch users. */
	min-height: 44px;
	min-width: 44px;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.wchc-cookie-btn:focus-visible {
	outline: 2px solid var(--wchc-primary, #4B7A56);
	outline-offset: 2px;
}
.wchc-cookie-btn:active { transform: scale(0.97); }

.wchc-cookie-btn-accept {
	background: var(--wchc-primary-strong, var(--wchc-primary, #4B7A56));
	color: var(--wchc-primary-onstrong, #ffffff);
	border-color: var(--wchc-primary-strong, var(--wchc-primary, #4B7A56));
}
.wchc-cookie-btn-accept:hover {
	box-shadow: 0 2px 8px hsl(145 22% 38% / 0.25);
	transform: translateY(-1px);
	/* Slightly darker on hover for clearer affordance */
	filter: brightness(0.95);
}

.wchc-cookie-btn-reject {
	background: var(--wchc-bg, #ffffff);
	/* Was --wchc-muted (#6b7280) which fails 4.5:1 on some backgrounds.
	   Now uses --wchc-text for AA-compliant contrast. */
	color: var(--wchc-text, #0a0a0a);
	border-color: hsl(0 0% 0% / 0.25);
}
.wchc-cookie-btn-reject:hover {
	background: hsl(0 0% 0% / 0.04);
	border-color: hsl(0 0% 0% / 0.4);
}

.wchc-cookie-btn-customize {
	background: transparent;
	color: var(--wchc-primary-strong, var(--wchc-primary, #4B7A56));
	padding: 0.7rem 0.9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	border-color: transparent;
}
.wchc-cookie-btn-customize:hover {
	text-decoration-thickness: 2px;
	background: hsl(0 0% 0% / 0.03);
}

/* ── Modal ── */
.wchc-cookie-modal {
	/* position: fixed moved to .wchc-active — WCAG 2.4.11 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.96);
	z-index: 1000000;
	background: var(--wchc-bg, #ffffff);
	border: 1px solid hsl(0 0% 0% / 0.08);
	border-top: 2px solid var(--wchc-primary, #4B7A56);
	border-radius: var(--wchc-radius, 12px);
	box-shadow: 0 24px 64px hsl(0 0% 0% / 0.1);
	width: min(560px, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	display: none; /* WCAG 2.4.11: remove from layout tree when inactive */
	flex-direction: column;
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.wchc-cookie-modal.wchc-active {
	position: fixed;
	display: flex;
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}
.wchc-cookie-modal:focus { outline: none; } /* container focus is for trap, not for visual */

.wchc-cookie-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid hsl(0 0% 0% / 0.08);
	gap: 0.75rem;
	flex-shrink: 0;
}
.wchc-cookie-modal-title {
	font-family: var(--wchc-font, 'Geist', sans-serif);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wchc-text, #0a0a0a);
	margin: 0;
}
.wchc-cookie-modal-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Was 44×44 — keep AAA. */
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--wchc-text, #0a0a0a);
	cursor: pointer;
	border-radius: var(--wchc-radius, 12px);
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wchc-cookie-modal-close:hover {
	background: hsl(0 0% 0% / 0.06);
	border-color: hsl(0 0% 0% / 0.1);
}
.wchc-cookie-modal-close:focus-visible {
	outline: 2px solid var(--wchc-primary, #4B7A56);
	outline-offset: 2px;
}

.wchc-cookie-modal-body {
	padding: 1rem 1.5rem 1.5rem;
	overflow-wrap: break-word;
	word-wrap: break-word;
	overflow-y: auto;
	flex: 1;
}
.wchc-cookie-modal-body > p {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--wchc-text, #0a0a0a);
	margin: 0 0 1.25rem;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
@media (max-width: 480px) {
	.wchc-cookie-modal-header { padding: 1rem; }
	.wchc-cookie-modal-body { padding: 0.875rem 1rem 1rem; }
	.wchc-cookie-modal-footer { padding: 0.875rem 1rem; }
}

/* ── Category ── */
.wchc-cookie-category {
	border: 1px solid hsl(0 0% 0% / 0.12);
	border-radius: var(--wchc-radius, 12px);
	margin-bottom: 0.5rem;
	overflow: hidden;
	background: var(--wchc-bg, #ffffff);
}
.wchc-cookie-category-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-right: 0.75rem;
}
.wchc-cookie-category-header {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
	padding: 0.875rem 1rem;
	background: transparent;
	cursor: pointer;
	min-height: 44px;
	border: none;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: background 0.15s ease;
}
.wchc-cookie-category-header:hover { background: hsl(0 0% 0% / 0.04); }
.wchc-cookie-category-header:focus-visible {
	outline: 2px solid var(--wchc-primary, #4B7A56);
	outline-offset: -2px;
	background: hsl(0 0% 0% / 0.03);
}
.wchc-cookie-category-info {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}
.wchc-cookie-category-name {
	font-family: var(--wchc-font, 'Geist', sans-serif);
	/* Bumped from 0.8rem for readability. */
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wchc-text, #0a0a0a);
	overflow: hidden;
	text-overflow: ellipsis;
}
.wchc-cookie-category-badge {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0;
	/* Use neutral dark text on neutral light background instead of
	   primary-on-tinted-primary. Contrast is then guaranteed regardless
	   of whatever primary the admin picked. */
	color: var(--wchc-text, #0a0a0a);
	background: hsl(0 0% 0% / 0.08);
	padding: 0.2rem 0.55rem;
	border-radius: 9999px;
	white-space: nowrap;
	flex-shrink: 0;
}
.wchc-cookie-category-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wchc-text, #0a0a0a);
	transition: transform 0.2s ease;
	flex-shrink: 0;
}
.wchc-cookie-category.wchc-expanded .wchc-cookie-category-chevron { transform: rotate(180deg); }

/* ── Toggle (switch) ──
   role="switch" — visible track is 48×28 to comfortably exceed the
   24×24 AA target, and the <label> container is the actual click area.
   Hidden checkbox handles state and keyboard. */
.wchc-cookie-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Click target — exceeds 44×44 AAA */
	width: 56px;
	height: 32px;
	flex-shrink: 0;
	cursor: pointer;
	padding: 4px;
}
.wchc-cookie-toggle-input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	/* iOS: prevents the OS's default touch styling from leaking through. */
	-webkit-appearance: none;
	appearance: none;
}
.wchc-cookie-toggle-track {
	position: relative;
	display: block;
	width: 48px;
	height: 26px;
	/* Was hsl(0 0% 82%) — 1.65:1 against white, fails 3:1 non-text contrast (WCAG 1.4.11).
	   Now darker for AA non-text contrast. */
	background: hsl(0 0% 65%);
	border-radius: 9999px;
	transition: background 0.2s ease;
	pointer-events: none;
}
.wchc-cookie-toggle-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 3px hsl(0 0% 0% / 0.25);
	transition: transform 0.2s ease;
}
.wchc-cookie-toggle-input:checked ~ .wchc-cookie-toggle-track {
	background: var(--wchc-primary, #4B7A56);
}
.wchc-cookie-toggle-input:checked ~ .wchc-cookie-toggle-track::after {
	transform: translateX(22px);
}
/* Read-only ("always on") — visually-on but reduced opacity so it's
   clearly different from a normal active toggle. NOT using `disabled`
   attribute → focus still passes through, screen readers still announce. */
.wchc-cookie-toggle-input[aria-readonly="true"] {
	cursor: not-allowed;
}
.wchc-cookie-toggle-input[aria-readonly="true"] ~ .wchc-cookie-toggle-track {
	opacity: 0.7;
	cursor: not-allowed;
}
.wchc-cookie-toggle-input:focus-visible ~ .wchc-cookie-toggle-track {
	outline: 2px solid var(--wchc-primary, #4B7A56);
	outline-offset: 2px;
}

/* ── Detail ── */
.wchc-cookie-category-detail {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}
.wchc-cookie-category.wchc-expanded .wchc-cookie-category-detail {
	max-height: 2000px;
}
.wchc-cookie-category-detail-inner {
	padding: 0 1rem 1rem;
	border-top: 1px solid hsl(0 0% 0% / 0.08);
}
@media (max-width: 480px) {
	.wchc-cookie-category-detail-inner { padding: 0 0.875rem 0.875rem; }
}
.wchc-cookie-category-desc {
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--wchc-text, #0a0a0a);
	margin: 0.875rem 0 0.625rem;
}

/* ── Cookie table ── */
.wchc-cookie-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.wchc-cookie-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.5rem;
	table-layout: fixed;
}
.wchc-cookie-table th {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wchc-text, #0a0a0a);
	text-align: left;
	padding: 0.5rem 0.5rem;
	border-bottom: 1px solid hsl(0 0% 0% / 0.12);
}
.wchc-cookie-table th[scope="row"] {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wchc-text, #0a0a0a);
}
.wchc-cookie-table td {
	font-size: 0.75rem;
	color: var(--wchc-text, #0a0a0a);
	padding: 0.45rem 0.5rem;
	border-bottom: 1px solid hsl(0 0% 0% / 0.06);
	line-height: 1.5;
	overflow-wrap: anywhere;
	word-break: break-word;
}
/* On narrow screens collapse the table into label/value cards so the
   Duration column can never get clipped on the right edge. */
@media (max-width: 600px) {
	.wchc-cookie-table-wrap { overflow-x: visible; }
	.wchc-cookie-table,
	.wchc-cookie-table thead,
	.wchc-cookie-table tbody,
	.wchc-cookie-table tr,
	.wchc-cookie-table td,
	.wchc-cookie-table th[scope="row"] {
		display: block;
		width: 100%;
	}
	.wchc-cookie-table { table-layout: auto; margin-top: 0.25rem; }
	.wchc-cookie-table thead { display: none; }
	.wchc-cookie-table tr {
		padding: 0.5rem 0;
		border-bottom: 1px solid hsl(0 0% 0% / 0.08);
	}
	.wchc-cookie-table tr:last-child { border-bottom: none; }
	.wchc-cookie-table td,
	.wchc-cookie-table th[scope="row"] {
		padding: 0.2rem 0;
		border: none;
		display: grid;
		grid-template-columns: 5.5rem 1fr;
		gap: 0.5rem;
		align-items: start;
		text-align: left;
	}
	.wchc-cookie-table td::before,
	.wchc-cookie-table th[scope="row"]::before {
		content: attr(data-label);
		font-size: 0.65rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: var(--wchc-text, #0a0a0a);
		padding-top: 0.1rem;
	}
}

/* ── Modal Footer ── */
.wchc-cookie-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid hsl(0 0% 0% / 0.08);
	flex-shrink: 0;
}
@media (max-width: 520px) {
	.wchc-cookie-modal-footer { flex-direction: column; }
	.wchc-cookie-modal-footer button { width: 100%; }
}

/* ── Manage button (cookie icon) ── */
.wchc-cookie-manage {
	/* position: fixed moved to .wchc-active — WCAG 2.4.11 */
	bottom: 24px;
	left: 24px;
	z-index: 999990;
	display: none; /* WCAG 2.4.11: remove from layout tree when inactive */
	align-items: center;
	justify-content: center;
	/* AAA target size */
	width: 48px;
	height: 48px;
	background: var(--wchc-bg, #ffffff);
	/* Was 0.08 — bumped to 0.25 for visible affordance on all backgrounds. */
	border: 1px solid hsl(0 0% 0% / 0.25);
	border-radius: var(--wchc-radius, 12px);
	box-shadow: 0 2px 12px hsl(0 0% 0% / 0.1);
	cursor: pointer;
	color: var(--wchc-primary-strong, var(--wchc-primary, #4B7A56));
	opacity: 0;
	visibility: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease, transform 0.15s ease;
}
.wchc-cookie-manage.wchc-active { position: fixed; display: inline-flex; opacity: 1; visibility: visible; }
.wchc-cookie-manage:hover {
	border-color: var(--wchc-primary, #4B7A56);
	box-shadow: 0 4px 16px hsl(145 22% 38% / 0.18);
}
.wchc-cookie-manage:focus-visible {
	outline: 2px solid var(--wchc-primary, #4B7A56);
	outline-offset: 3px;
}
.wchc-cookie-manage:active {
	transform: scale(0.95);
}

/* ── Reduced motion ──
   When the user has requested reduced motion (OS-level preference),
   collapse all transitions to ~0ms. Modal still appears/disappears
   correctly because opacity/visibility still transition, just instantly. */
@media (prefers-reduced-motion: reduce) {
	.wchc-cookie-banner,
	.wchc-cookie-modal,
	.wchc-cookie-overlay,
	.wchc-cookie-manage,
	.wchc-cookie-category-detail,
	.wchc-cookie-toggle-track,
	.wchc-cookie-toggle-track::after,
	.wchc-cookie-category-chevron,
	.wchc-cookie-btn,
	.wchc-cookie-modal-close,
	.wchc-cookie-category-header {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
	.wchc-cookie-btn:active,
	.wchc-cookie-manage:active {
		transform: none;
	}
}

/* ── Forced colors mode (Windows High Contrast) ──
   Honour user-chosen colours; ensure interactive states stay visible. */
@media (forced-colors: active) {
	.wchc-cookie-btn,
	.wchc-cookie-modal-close,
	.wchc-cookie-category-header,
	.wchc-cookie-manage {
		border: 1px solid CanvasText;
	}
	.wchc-cookie-btn:focus-visible,
	.wchc-cookie-modal-close:focus-visible,
	.wchc-cookie-category-header:focus-visible,
	.wchc-cookie-manage:focus-visible,
	.wchc-cookie-toggle-input:focus-visible ~ .wchc-cookie-toggle-track {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
	.wchc-cookie-toggle-track {
		border: 1px solid CanvasText;
	}
	.wchc-cookie-toggle-input:checked ~ .wchc-cookie-toggle-track {
		background: Highlight;
	}
}

/* ── Scrollbar styling (cosmetic, visual users only) ── */
.wchc-cookie-modal::-webkit-scrollbar { width: 6px; }
.wchc-cookie-modal::-webkit-scrollbar-track { background: transparent; }
.wchc-cookie-modal::-webkit-scrollbar-thumb {
	background: hsl(145 22% 38% / 0.3);
	border-radius: 9999px;
}

/* ── Shortcode link button ── */
.wchc-cookies-manage-link {
	background: transparent;
	border: none;
	color: var(--wchc-primary-strong, var(--wchc-primary, #4B7A56));
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	cursor: pointer;
	padding: 0;
	font: inherit;
	transition: text-decoration-thickness 0.15s ease;
}
.wchc-cookies-manage-link:hover,
.wchc-cookies-manage-link:focus-visible {
	text-decoration-thickness: 2px;
}
.wchc-cookies-manage-link:focus-visible {
	outline: 2px solid var(--wchc-primary, #4B7A56);
	outline-offset: 2px;
	border-radius: 2px;
}

/* === WCAG 2.4.11 Focus Not Obscured (Enhanced v1.2.1) ===
   Ensures focused elements are never hidden behind the cookie banner.

   Strategy:
   1. CSS :has() sets generous scroll-padding as a baseline.
   2. JS measures real banner height and sets a precise CSS custom property
      --wchc-banner-h on <html>, which overrides the static fallback.
   3. When modal is open, the page gets overflow:hidden + inert on <main>,
      so focus is physically confined inside the modal.
   4. When banner/modal close, scroll-padding and inert are removed.

   :has() is supported in Chrome 105+, Safari 15.4+, Firefox 121+.
   Older browsers rely entirely on the JS fallback (cookie-consent.js). */

/* — Fallback: static scroll-padding via :has() — */
html:has(.wchc-cookie-banner.wchc-position-bottom.wchc-active) {
	scroll-padding-bottom: var(--wchc-banner-h, 160px);
}
html:has(.wchc-cookie-banner.wchc-position-top.wchc-active) {
	scroll-padding-top: var(--wchc-banner-h, 160px);
}

/* — When banner closes, remove residual scroll-padding — */
html:not(:has(.wchc-cookie-banner.wchc-active)) {
	scroll-padding-top: 0;
	scroll-padding-bottom: 0;
}

/* — Modal open: lock scroll, signal inert state — */
html:has(.wchc-cookie-modal.wchc-active) {
	overflow: hidden;
}

/* — Manage button: ensure it never obscures focused content —
   The fixed manage button (48×48) sits in the bottom-left corner.
   Add a small scroll-padding-bottom so the last focusable element
   on the page isn't hidden behind it. */
html:has(.wchc-cookie-manage.wchc-active):not(:has(.wchc-cookie-banner.wchc-active)) {
	scroll-padding-bottom: 80px;
}