/* Cookie Consent Banner */

#swe-cookie-consent-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999998;
	background: #fff;
	box-shadow: 0 -4px 20px rgba( 0, 0, 0, 0.18 );
	padding: 1rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Persistent Manage Preferences entry point (US2) now lives as pasted
   markup inside a Blocksy footer block, not code-rendered output — see
   _decisions.md ("Persistent entry point moved into Blocksy footer
   block"). Styling is owned by that block; only the [hidden] rule below
   still needs to live here. A block/container CSS rule can beat the
   browser's default [hidden] { display: none } UA rule — this exact class
   of bug already hit the Manage Preferences panel itself (_decisions.md,
   "Two real GPC panel bugs") — so this is defensive insurance against the
   same failure mode recurring inside whatever wrapper Blocksy renders
   around the link. script.js keeps this element mutually exclusive with
   the banner (exactly one of the two visible at a time) regardless of
   where it lives in the DOM. */
#swe-cc-manage-persistent[hidden] {
	display: none;
}

#swe-cookie-consent-banner p {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.333;
	color: #333;
	flex: 1 1 320px;
/*	max-width: 640px; */
}

/* Underlined so the link isn't distinguished by color alone (WCAG 1.4.1). */
#swe-cookie-consent-banner p a {
	text-decoration: underline;
}

.swe-cc-buttons {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	flex-wrap: wrap;
}

/* .swe-cc-buttons button {
	padding: 0.6rem 1.1rem;
	font-size: 0.9rem;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
} */

div.swe-cc-buttons button.button {
	line-height: 1.25;
	min-height: 36px;
	padding: 4px 14px;
	font-size: .85rem;
	background-color: var(--theme-palette-color-3);
	color: #fff;
}
div.swe-cc-buttons button.button:hover,
div.swe-cc-buttons button.button:active {
	background-color: var(--theme-palette-color-1);
	color: #fff;
}

div.swe-cc-buttons button.button-secondary {
	background-color: var(--theme-palette-color-6);
	color: var(--theme-palette-color-4);
}

/* Manage Preferences dialog */

#swe-cookie-consent-manage {
	max-width: 480px;
	width: calc( 100% - 2rem );
	border: none;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.35 );
}

#swe-cookie-consent-manage::backdrop {
	background: rgba( 55, 55, 55, 0.5 );
}

#swe-cc-manage-title {
	font-size: 1.2rem;
	margin: 0 0 0.75rem;
}

#swe-cc-manage-desc {
	font-size: 0.85rem;
	line-height: 1.5;
	color: #555;
	margin: 0 0 1.25rem;
}

.swe-cc-category {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid #eee;
	font-size: 0.9rem;
}

/* Without this, the class's own display:flex above beats the browser's
   default [hidden] { display: none } rule (author CSS always wins over the
   UA stylesheet at equal specificity) — the row stays visibly rendered
   even though script.js correctly set .hidden = true on it. Found via
   Stage B G10 manual testing: a GPC-active visitor saw both the interactive
   checkbox row and the "Off — Global Privacy Control" label row stacked
   together. See _decisions.md. */
.swe-cc-category[hidden] {
	display: none;
}

/* #666 on the dialog's white = 5.74:1. #777 was 4.48:1 — just under the
   4.5:1 WCAG 2.1 AA minimum for this 0.8rem text. */
.swe-cc-always-on {
	color: #666;
	font-size: 0.8rem;
}

.swe-cc-gpc-label {
	color: #a15c00;
	font-size: 0.8rem;
}

.swe-cc-gpc-override {
	margin: 1rem 0;
	padding: 0.85rem 1rem;
	background: #fdf6ec;
	border: 1px solid #eddcb8;
	border-radius: 6px;
	font-size: 0.8rem;
	line-height: 1.45;
}

.swe-cc-gpc-override label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}

.swe-cc-gpc-override input[type="checkbox"] {
	margin-top: 0.15rem;
	flex-shrink: 0;
}

.swe-cc-manage-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.swe-cc-manage-buttons button {
	padding: 0.6rem 1.1rem;
	font-size: 0.9rem;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
}

#swe-cc-save-preferences {
	background-color: var(--theme-palette-color-2);
	color: #fff;
}

#swe-cc-save-preferences:hover {
	background-color: var(--theme-palette-color-1);
}

#swe-cc-manage-close {
	background: #f2f2f2;
	color: #333;
}

@media ( max-width: 560px ) {
	#swe-cookie-consent-banner {
		flex-direction: column;
		align-items: stretch;
	}
	#swe-cookie-consent-banner p {
		flex-basis: auto;
	}
	.swe-cc-buttons {
		justify-content: stretch;
	}
	.swe-cc-buttons button {
		flex: 1;
	}
}

/* Focus rings — must not be suppressed (WCAG 2.1 AA) */
#swe-cookie-consent-banner button:focus-visible,
#swe-cc-manage-persistent:focus-visible,
#swe-cookie-consent-manage button:focus-visible,
#swe-cookie-consent-manage input[type="checkbox"]:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
}

/* The persistent link sits in the Blocksy footer block, not on the white
   banner/dialog — #005fcc on the dark footer (#2f2d2d) is only 2.29:1,
   under the 3:1 non-text contrast minimum (WCAG 1.4.11). currentColor
   follows the link's own text color, which already has to contrast with
   whatever background the footer block gives it (11.07:1 today), so the
   ring stays visible if the footer is ever restyled. */
#swe-cc-manage-persistent:focus-visible {
	outline-color: currentColor;
}