/**
 * Simple Cookie Consent — banner and preferences panel.
 *
 * Every visually meaningful value is a CSS custom property, so the whole UI can
 * be restyled from Breakdance (Global CSS, or a Code block) without editing PHP.
 * Override any variable below; nothing here needs to be copied to do that.
 *
 *   :root { --scc-btn-primary-bg: #b91c1c; --scc-radius: 0; }
 *
 * The --bde-* references are Breakdance's own global variables, verified against
 * Breakdance 2.8.2, which emits them in a :root block in global-settings.css.
 * Where one is present the banner adopts the site theme automatically; where
 * Breakdance is absent, the fallback in each var() is used instead.
 *
 * A few rules below are scoped `.scc-root .scc-x` rather than plain `.scc-x`.
 * That is deliberate. Page builders reset bare tags from inside their wrapper —
 * Breakdance ships `.breakdance h1,...,h6 { color; font-family }`,
 * `.bde-h2, .breakdance h2 { font-size }` and `.breakdance a { color }` — and
 * those selectors score (0,1,1), which beats a single class. Our banner renders
 * inside that wrapper, so without the extra scope the builder would win and
 * --scc-heading-* and --scc-link would do nothing on the very platform this
 * plugin targets. Only the tags a builder actually resets carry the extra
 * scope; everything else stays a single class so your own overrides win easily.
 *
 * Overriding one of the scoped rules? Match the scope:
 *
 *   .scc-root .scc-banner__heading { font-size: 30px; }
 */

:root {
	/* Typography */
	--scc-font: var(--bde-body-font-family, inherit);
	--scc-font-size: var(--bde-body-font-size, 15px);
	--scc-line-height: 1.55;
	--scc-heading-font: var(--bde-heading-font-family, var(--scc-font));
	--scc-heading-size: 18px;
	--scc-heading-weight: 600;
	--scc-heading-color: var(--bde-headings-color, var(--scc-text));

	/* Surface */
	--scc-bg: var(--bde-background-color, #ffffff);
	--scc-text: var(--bde-body-text-color, #1f2933);
	--scc-muted-text: #52606d;
	--scc-border: #dfe3e8;
	--scc-link: var(--bde-brand-primary-color, #2563eb);
	--scc-link-hover: var(--bde-brand-primary-color-hover, #1d4ed8);

	/* Geometry */
	--scc-radius: 10px;
	--scc-radius-sm: 6px;
	--scc-max-width: var(--bde-section-width, 1100px);
	--scc-padding: 20px;
	--scc-gap: 16px;
	--scc-shadow: 0 -2px 24px rgba(15, 23, 42, 0.14);
	--scc-z-index: 99999;

	/* Overlay behind the preferences panel */
	--scc-overlay: rgba(15, 23, 42, 0.55);

	/*
	 * Buttons. Accept All and Reject All share every geometric variable below:
	 * equal prominence is a compliance requirement, not a style choice.
	 *
	 * --scc-btn-padding is a padding shorthand rather than separate axes, because
	 * Breakdance's --bde-button-padding-base is itself a shorthand ("14px 24px").
	 */
	--scc-btn-font-size: var(--scc-font-size);
	--scc-btn-font-weight: var(--bde-button-font-weight, 600);
	--scc-btn-padding: var(--bde-button-padding-base, 11px 22px);
	--scc-btn-radius: var(--bde-button-border-radius, var(--scc-radius-sm));
	--scc-btn-min-width: 132px;
	--scc-btn-border-width: var(--bde-button-border-width, 2px);

	--scc-btn-primary-bg: var(--bde-brand-primary-color, #2563eb);
	--scc-btn-primary-text: var(--bde-button-primary-text-color, #ffffff);
	--scc-btn-primary-border: var(--scc-btn-primary-bg);
	--scc-btn-primary-hover-bg: var(--bde-brand-primary-color-hover, #1d4ed8);

	--scc-btn-secondary-bg: var(--bde-button-secondary-background-color, transparent);
	--scc-btn-secondary-text: var(--scc-text);
	--scc-btn-secondary-border: var(--scc-border);
	--scc-btn-secondary-hover-bg: rgba(15, 23, 42, 0.05);

	/* Preferences panel */
	--scc-panel-bg: var(--scc-bg);
	--scc-panel-text: var(--scc-text);
	--scc-panel-max-width: 560px;
	--scc-panel-radius: var(--scc-radius);
	--scc-panel-shadow: 0 12px 48px rgba(15, 23, 42, 0.28);
	--scc-panel-padding: 24px;

	/* Category toggles */
	--scc-toggle-width: 46px;
	--scc-toggle-height: 26px;
	--scc-toggle-off-bg: #cbd2d9;
	--scc-toggle-on-bg: var(--scc-btn-primary-bg);
	--scc-toggle-thumb: #ffffff;

	/* Focus ring */
	--scc-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.45);

	/*
	 * Split duration from easing: Breakdance's --bde-transition-duration is a bare
	 * duration ("300ms"), so it cannot carry a timing function.
	 */
	--scc-transition-duration: var(--bde-transition-duration, 160ms);
	--scc-transition-easing: ease;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

.scc-root [hidden] {
	display: none !important;
}

.scc-root *,
.scc-root *::before,
.scc-root *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Banner
 * ---------------------------------------------------------------------- */

.scc-banner {
	position: fixed;
	inset: auto 0 0 0;
	z-index: var(--scc-z-index);
	background: var(--scc-bg);
	color: var(--scc-text);
	font-family: var(--scc-font);
	font-size: var(--scc-font-size);
	line-height: var(--scc-line-height);
	border-top: 1px solid var(--scc-border);
	box-shadow: var(--scc-shadow);
}

.scc-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--scc-gap);
	max-width: var(--scc-max-width);
	margin: 0 auto;
	padding: var(--scc-padding);
}

.scc-banner__content {
	flex: 1 1 320px;
	min-width: 0;
}

.scc-root .scc-banner__heading {
	margin: 0 0 6px;
	font-family: var(--scc-heading-font);
	font-size: var(--scc-heading-size);
	font-weight: var(--scc-heading-weight);
	line-height: 1.3;
	color: var(--scc-heading-color);
}

.scc-banner__body {
	margin: 0;
	color: var(--scc-muted-text);
}

.scc-banner__body p {
	margin: 0 0 6px;
}

.scc-banner__body p:last-child {
	margin-bottom: 0;
}

.scc-banner__links {
	margin: 8px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.scc-root .scc-link {
	color: var(--scc-link);
	text-decoration: underline;
}

.scc-root .scc-link:hover,
.scc-root .scc-link:focus {
	color: var(--scc-link-hover);
}

.scc-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	flex: 0 1 auto;
}

/* -------------------------------------------------------------------------
 * Notice variant (opt-out mode)
 *
 * Same bar, different job: analytics is already running when this is seen, so
 * it informs rather than gates. It inherits every colour and geometry token
 * from .scc-banner — the only additions are the dismiss control and the room
 * it needs.
 * ---------------------------------------------------------------------- */

.scc-banner__dismiss {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	color: var(--scc-muted-text);
	background: transparent;
	border: 0;
	border-radius: var(--scc-radius-sm);
	cursor: pointer;
}

.scc-banner__dismiss:hover {
	background: var(--scc-btn-secondary-hover-bg);
	color: var(--scc-text);
}

.scc-banner__dismiss:focus-visible {
	outline: none;
	box-shadow: var(--scc-focus-ring);
}

/*
 * A fixed reserve rather than calc() on --scc-padding: that token is a single
 * length today, but it is one of the Breakdance-facing custom properties and a
 * site overriding it with a shorthand would break the arithmetic silently.
 */
.scc-banner--notice .scc-banner__content {
	padding-right: 40px;
}

/* -------------------------------------------------------------------------
 * Buttons
 *
 * .scc-btn carries all the geometry, so every action is the same size and
 * weight. The --primary and --secondary modifiers change colour only.
 * ---------------------------------------------------------------------- */

.scc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--scc-btn-min-width);
	margin: 0;
	padding: var(--scc-btn-padding);
	font-family: var(--scc-font);
	font-size: var(--scc-btn-font-size);
	font-weight: var(--scc-btn-font-weight);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: var(--scc-btn-border-width) solid transparent;
	border-radius: var(--scc-btn-radius);
	cursor: pointer;
	transition: background-color var(--scc-transition-duration) var(--scc-transition-easing), border-color var(--scc-transition-duration) var(--scc-transition-easing), color var(--scc-transition-duration) var(--scc-transition-easing);
}

.scc-btn:focus-visible {
	outline: none;
	box-shadow: var(--scc-focus-ring);
}

.scc-btn--primary {
	background: var(--scc-btn-primary-bg);
	color: var(--scc-btn-primary-text);
	border-color: var(--scc-btn-primary-border);
}

.scc-btn--primary:hover {
	background: var(--scc-btn-primary-hover-bg);
	border-color: var(--scc-btn-primary-hover-bg);
}

.scc-btn--secondary {
	background: var(--scc-btn-secondary-bg);
	color: var(--scc-btn-secondary-text);
	border-color: var(--scc-btn-secondary-border);
}

.scc-btn--secondary:hover {
	background: var(--scc-btn-secondary-hover-bg);
}

/* -------------------------------------------------------------------------
 * Overlay + preferences panel
 * ---------------------------------------------------------------------- */

.scc-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--scc-z-index) + 1);
	background: var(--scc-overlay);
}

.scc-panel {
	position: fixed;
	inset: 0;
	z-index: calc(var(--scc-z-index) + 2);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	font-family: var(--scc-font);
	font-size: var(--scc-font-size);
	line-height: var(--scc-line-height);
	pointer-events: none;
}

.scc-panel__inner {
	width: 100%;
	max-width: var(--scc-panel-max-width);
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	background: var(--scc-panel-bg);
	color: var(--scc-panel-text);
	border-radius: var(--scc-panel-radius);
	box-shadow: var(--scc-panel-shadow);
	pointer-events: auto;
}

.scc-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: var(--scc-panel-padding);
	border-bottom: 1px solid var(--scc-border);
}

.scc-root .scc-panel__heading {
	margin: 0;
	font-family: var(--scc-heading-font);
	font-size: var(--scc-heading-size);
	font-weight: var(--scc-heading-weight);
	line-height: 1.3;
	color: var(--scc-heading-color);
}

.scc-panel__close {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
	color: var(--scc-muted-text);
	background: transparent;
	border: 0;
	border-radius: var(--scc-radius-sm);
	cursor: pointer;
}

.scc-panel__close:hover {
	background: var(--scc-btn-secondary-hover-bg);
	color: var(--scc-text);
}

.scc-panel__close:focus-visible {
	outline: none;
	box-shadow: var(--scc-focus-ring);
}

.scc-panel__body {
	padding: var(--scc-panel-padding);
	overflow-y: auto;
}

.scc-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: var(--scc-panel-padding);
	border-top: 1px solid var(--scc-border);
}

/* -------------------------------------------------------------------------
 * Categories
 * ---------------------------------------------------------------------- */

.scc-categories {
	margin: 0;
	padding: 0;
	list-style: none;
}

.scc-category + .scc-category {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--scc-border);
}

.scc-category__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.scc-category__label {
	font-weight: 600;
}

.scc-category__always {
	font-size: 13px;
	color: var(--scc-muted-text);
}

.scc-category__description {
	margin: 6px 0 0;
	color: var(--scc-muted-text);
	font-size: 14px;
}

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

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

.scc-toggle__input {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.scc-toggle__track {
	display: block;
	width: var(--scc-toggle-width);
	height: var(--scc-toggle-height);
	padding: 3px;
	background: var(--scc-toggle-off-bg);
	border-radius: 999px;
	transition: background-color var(--scc-transition-duration) var(--scc-transition-easing);
}

.scc-toggle__thumb {
	display: block;
	width: calc(var(--scc-toggle-height) - 6px);
	height: calc(var(--scc-toggle-height) - 6px);
	background: var(--scc-toggle-thumb);
	border-radius: 50%;
	transition: transform var(--scc-transition-duration) var(--scc-transition-easing);
}

.scc-toggle__input:checked + .scc-toggle__track {
	background: var(--scc-toggle-on-bg);
}

.scc-toggle__input:checked + .scc-toggle__track .scc-toggle__thumb {
	transform: translateX(calc(var(--scc-toggle-width) - var(--scc-toggle-height)));
}

.scc-toggle__input:focus-visible + .scc-toggle__track {
	box-shadow: var(--scc-focus-ring);
}

/* -------------------------------------------------------------------------
 * Shortcode trigger
 * ---------------------------------------------------------------------- */

.scc-preferences-trigger {
	color: var(--scc-link);
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.scc-preferences-trigger:hover {
	color: var(--scc-link-hover);
}

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

@media (max-width: 782px) {
	.scc-banner__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.scc-banner__actions {
		width: 100%;
	}

	/* Still equal: each action takes the same share of the row. */
	.scc-banner__actions .scc-btn {
		flex: 1 1 auto;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scc-root * {
		transition-duration: 0.01ms !important;
	}
}