/* ============================================================================
 * Cookie consent banner (inc/cookie-consent.php)
 * Bottom bar, house style: tokens, 2px radius everywhere, no rounded corners.
 * Hidden by default ([hidden]); JS reveals it only when no choice is stored,
 * so already-consented visitors never see a flash.
 * ========================================================================== */

.cc-banner[hidden] { display: none; }

.cc-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: var(--white, #fff);
	border-top: 1px solid var(--gray-400, #cfd4d9);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, .12);
	padding: var(--space-md, 20px);
}

.cc-banner__inner {
	max-width: var(--container-max, 1200px);
	margin: 0 auto;
}

.cc-banner__view {
	display: flex;
	align-items: center;
	gap: var(--space-lg, 32px);
	flex-wrap: wrap;
}

.cc-banner__view[hidden] { display: none; }

.cc-banner__text { flex: 1 1 320px; min-width: 0; }

.cc-banner__title {
	font-size: var(--fs-subheading, 20px);
	margin: 0 0 var(--space-xs, 8px);
	color: var(--color-black, #0e1116);
}

.cc-banner__text p {
	margin: 0;
	color: var(--color-black, #0e1116);
	font-size: var(--fs-body, 16px);
	line-height: 1.55;
}

.cc-banner__text a {
	color: var(--red, #e2231a);
	text-decoration: underline;
}

.cc-banner__actions {
	display: flex;
	gap: var(--space-sm, 12px);
	flex-wrap: wrap;
	flex-shrink: 0;
	align-items: center;
}

/* On the narrow (main) view keep actions from stretching full-width oddly */
.cc-banner__actions .btn { white-space: nowrap; }

/* --- Preferences view --------------------------------------------------- */

#ccPrefs { flex-direction: column; align-items: stretch; }

.cc-cats {
	width: 100%;
	display: grid;
	gap: var(--space-md, 20px);
	margin: var(--space-sm, 12px) 0 var(--space-md, 20px);
}

@media (min-width: 720px) {
	.cc-cats { grid-template-columns: repeat(3, 1fr); }
}

.cc-cat {
	border: 1px solid var(--gray-400, #cfd4d9);
	border-radius: var(--radius, 2px);
	padding: var(--space-sm, 12px) var(--space-md, 16px);
	background: var(--ultra-light-blue, #f5fcff);
}

.cc-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm, 12px);
	margin-bottom: var(--space-xs, 8px);
}

.cc-cat__name {
	font-weight: 600;
	color: var(--color-black, #0e1116);
}

.cc-cat__always {
	font-size: var(--fs-caption, 13px);
	color: var(--red, #e2231a);
	font-weight: 600;
}

.cc-cat__desc {
	margin: 0;
	font-size: var(--fs-caption, 13px);
	line-height: 1.5;
	color: var(--color-black, #0e1116);
}

/* --- Toggle switch ------------------------------------------------------ */

.cc-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	flex-shrink: 0;
}

.cc-toggle input {
	position: absolute;
	opacity: 0;
	width: 40px;
	height: 22px;
	margin: 0;
	cursor: pointer;
}

.cc-toggle__track {
	width: 40px;
	height: 22px;
	background: var(--gray-400, #cfd4d9);
	border-radius: var(--radius, 2px);
	position: relative;
	transition: background .2s ease;
}

.cc-toggle__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: var(--white, #fff);
	border-radius: var(--radius, 2px);
	transition: transform .2s ease;
}

.cc-toggle input:checked + .cc-toggle__track { background: var(--red, #e2231a); }
.cc-toggle input:checked + .cc-toggle__track::after { transform: translateX(18px); }
.cc-toggle input:focus-visible + .cc-toggle__track { outline: 2px solid var(--red, #e2231a); outline-offset: 2px; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 640px) {
	.cc-banner { padding: var(--space-sm, 12px); max-height: 85vh; overflow-y: auto; }
	.cc-banner__actions { width: 100%; }
	.cc-banner__actions .btn { flex: 1 1 auto; }
}

/* Footer "Cookie Settings" re-consent link — inherits the footer bottom's colour
   (works whether that bar is dark or light). */
.site-footer__cookie-link {
	color: inherit;
	text-decoration: underline;
	opacity: .85;
	font-size: var(--fs-caption, 13px);
}
.site-footer__cookie-link:hover { opacity: 1; }