/**
 * SureCookie — CDK house style
 *
 * NOT part of the Tailwind bundle. Enqueued by inc/cookie-consent.php with
 * `surecookie-public` as a dependency, and only when SureCookie is active —
 * load order matters, these rules have to land after the plugin's own.
 *
 * Colours for the plugin's own variables come from the palette filter in
 * inc/cookie-consent.php. This file turns the banner and the preferences modal
 * into the site's own components: Host Grotesk, the 2px radius, hairline
 * borders, uppercase button labels with the bottom-to-top fill of `.btn`
 * (assets/css/buttons.css) and the "/ Eyebrow" heading device.
 *
 * Specificity: SureCookie scopes its rules as
 * `:is(#surecookie-public-root, #surecookie-preferences-root) .x` (1,1,0) and
 * forces its own font with `.surecookie-styles * { font-family: … !important }`.
 * Every rule here starts with one of the two root ids, so it wins on equal
 * specificity by loading later; the font needs !important as well.
 *
 * Theme z-index stack for reference:
 *   header 40 · footer-short 30 · banner 90 · mobile menu + sign-up panel 100
 * The open mobile menu covers the banner instead of the banner floating on
 * top. The preferences modal is user-initiated, so it goes above everything.
 */

/* ── Tokens + stack ───────────────────────────────────────────────────── */

/* The plugin redefines its z-index variables on its own wrapper, so setting
   them on :root never reached the banner (it sat at 2147483646, above the
   open mobile menu). Set them on the wrapper itself. */
#surecookie-public-root .surecookie-styles,
#surecookie-preferences-root .surecookie-styles {
	--surecookie-z-banner: 90;
	--surecookie-z-overlay: 9998;
	--surecookie-z-modal: 9999;
	--surecookie-banner-overlay-color: rgba(30, 30, 30, 0.5);

	--cdk-dark: #1e1e1e;
	--cdk-text-soft: rgba(30, 30, 30, 0.75); /* ≈ #565656 on white, 7.4:1 */
	--cdk-border: rgba(30, 30, 30, 0.1);
	--cdk-ease: cubic-bezier(0.76, 0, 0.24, 1);
	--cdk-gutter: 20px; /* matches the theme container padding */
}

@media (min-width: 640px) {
	#surecookie-public-root .surecookie-styles {
		--cdk-gutter: 32px;
	}
}

@media (min-width: 1024px) {
	#surecookie-public-root .surecookie-styles {
		--cdk-gutter: 42px;
	}
}

/* ── Typeface ─────────────────────────────────────────────────────────── */

#surecookie-public-root .surecookie-styles,
#surecookie-public-root .surecookie-styles *,
#surecookie-preferences-root .surecookie-styles,
#surecookie-preferences-root .surecookie-styles * {
	font-family: 'Host Grotesk', system-ui, sans-serif !important;
}

/* ── Banner ───────────────────────────────────────────────────────────── */

#surecookie-public-root .surecookie-public-banner {
	right: var(--cdk-gutter);
	bottom: var(--cdk-gutter);
	left: auto;
	width: min(560px, calc(100vw - 2 * var(--cdk-gutter)));
	padding: 24px;
	border: 1px solid var(--cdk-border);
	border-radius: 2px;
	background: #fff;
	box-shadow: 0 24px 48px -24px rgba(30, 30, 30, 0.35);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

#surecookie-public-root .surecookie-banner-inner {
	max-width: none !important; /* the plugin sets max-width inline */
}

/* Eyebrow, the site's "/ Training" device. The empty alternative text keeps
   screen readers on the heading itself; browsers without the alt syntax drop
   the second declaration and keep the first. */
#surecookie-public-root .surecookie-banner-heading::before,
#surecookie-preferences-root .surecookie-modal-title::before {
	content: '/ Cookies';
	content: '/ Cookies' / '';
	display: block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cdk-text-soft);
}

#surecookie-public-root .surecookie-banner-heading {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--cdk-dark);
}

#surecookie-public-root .surecookie-banner-description {
	font-size: 14px;
	line-height: 1.55;
	color: var(--cdk-text-soft);
}

#surecookie-public-root .surecookie-banner-buttons {
	gap: 8px;
	margin-top: 20px;
	align-items: center;
}

/* ── Buttons (banner + modal) ─────────────────────────────────────────────
   Same metrics as `.btn` in the header and the sign-up panel. The hover fill
   is a solid-colour background layer anchored to the bottom edge that grows
   from 0 to the full height, so the new colour rises from the bottom like
   `.btn::before` without a pseudo-element the plugin's markup has no room
   for. (A two-colour gradient at 200% height leaks a 1px line at the edge.) */

#surecookie-public-root .surecookie-btn-base,
#surecookie-preferences-root .surecookie-modal-footer button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--cdk-border);
	border-radius: 2px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	color: var(--cdk-dark) !important;
	background-color: #fff;
	background-image: linear-gradient(var(--cdk-dark), var(--cdk-dark));
	background-size: 100% 0;
	background-position: 50% 100%;
	background-repeat: no-repeat;
	filter: none;
	opacity: 1;
	cursor: pointer;
}

/* Primary: Accept all (banner) and Confirm (modal). */
#surecookie-public-root .surecookie-accept-all-btn,
#surecookie-preferences-root .surecookie-modal-footer .surecookie-btn-primary {
	border-color: var(--cdk-dark);
	color: #fff !important;
	background-color: var(--cdk-dark);
	background-image: linear-gradient(#fff, #fff);
}

/* Settings: a quiet text button, pushed to the end of the row. */
#surecookie-public-root .surecookie-preferences-btn {
	order: 10;
	margin-left: auto;
	padding: 0 4px;
	border: 0;
	background: none;
	text-decoration: underline;
	text-decoration-color: var(--cdk-border);
	text-underline-offset: 5px;
}

@media (hover: hover) and (pointer: fine) {
	#surecookie-public-root .surecookie-btn-base:hover,
	#surecookie-preferences-root .surecookie-modal-footer button:hover {
		border-color: var(--cdk-dark);
		color: #fff !important;
		background-size: 100% 100%;
		filter: none;
		opacity: 1;
	}

	#surecookie-public-root .surecookie-accept-all-btn:hover,
	#surecookie-preferences-root .surecookie-modal-footer .surecookie-btn-primary:hover {
		color: var(--cdk-dark) !important;
	}

	#surecookie-public-root .surecookie-preferences-btn:hover {
		color: var(--cdk-dark) !important;
		background: none;
		text-decoration-color: var(--cdk-dark);
	}
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	#surecookie-public-root .surecookie-btn-base,
	#surecookie-preferences-root .surecookie-modal-footer button {
		transition:
			background-size 0.55s var(--cdk-ease),
			color 0.55s var(--cdk-ease),
			border-color 0.55s var(--cdk-ease),
			text-decoration-color 0.3s ease;
	}
}

#surecookie-public-root .surecookie-btn-base:focus-visible,
#surecookie-preferences-root .surecookie-styles button:focus-visible,
#surecookie-preferences-root .surecookie-styles a:focus-visible {
	outline: 2px solid var(--cdk-dark);
	outline-offset: 2px;
}

/* Small screens: actions fill the width, Settings drops to its own line. */
@media (max-width: 639px) {
	#surecookie-public-root .surecookie-public-banner {
		padding: 20px;
	}

	#surecookie-public-root .surecookie-btn-base {
		flex: 1 1 calc(50% - 4px);
	}

	#surecookie-public-root .surecookie-preferences-btn {
		flex-basis: 100%;
		margin-left: 0;
	}
}

/* ── Preferences modal ────────────────────────────────────────────────── */

#surecookie-preferences-root .surecookie-modal-backdrop {
	background-color: rgba(30, 30, 30, 0.5);
}

#surecookie-preferences-root .surecookie-preferences-modal {
	border: 1px solid var(--cdk-border);
	border-radius: 2px;
	box-shadow: none;
	color: var(--cdk-dark);
}

#surecookie-preferences-root .surecookie-modal-header {
	padding: 28px 28px 22px;
	border-bottom: 1px solid var(--cdk-border);
}

#surecookie-preferences-root .surecookie-modal-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--cdk-dark);
}

#surecookie-preferences-root .surecookie-modal-description,
#surecookie-preferences-root .surecookie-category-details,
#surecookie-preferences-root .surecookie-category-details * {
	font-size: 14px;
	line-height: 1.55;
	color: var(--cdk-text-soft);
}

#surecookie-preferences-root .surecookie-modal-close-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: 1px solid var(--cdk-border);
	border-radius: 2px;
	background: transparent;
	color: var(--cdk-dark);
	transition: background-color 200ms ease, color 200ms ease;
}

#surecookie-preferences-root .surecookie-modal-close-btn:hover {
	background-color: var(--cdk-dark);
	color: #fff;
}

#surecookie-preferences-root .surecookie-category-item {
	border-bottom: 1px solid var(--cdk-border);
}

#surecookie-preferences-root .surecookie-category-name {
	font-size: 15px;
	font-weight: 500;
	color: var(--cdk-dark) !important; /* the plugin sets it inline */
}

#surecookie-preferences-root .surecookie-always-active {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cdk-text-soft);
}

/* Switches: dark when on, an outlined track with a grey knob when off — the
   plugin's light-grey off state is 1.5:1 against white and hard to read.
   The outline is an inset shadow so the track keeps its size. */
#surecookie-preferences-root .surecookie-toggle-btn {
	background-color: #fff !important; /* the plugin sets it inline */
	box-shadow: inset 0 0 0 1px #737373;
}

#surecookie-preferences-root .surecookie-toggle-btn .surecookie-toggle-knob {
	background-color: #737373;
	box-shadow: none;
}

#surecookie-preferences-root .surecookie-toggle-btn[aria-checked='true'] {
	background-color: var(--cdk-dark) !important;
	box-shadow: inset 0 0 0 1px var(--cdk-dark);
}

#surecookie-preferences-root .surecookie-toggle-btn[aria-checked='true'] .surecookie-toggle-knob {
	background-color: #fff;
}

#surecookie-preferences-root .surecookie-modal-footer {
	padding: 20px 28px;
	border-top: 1px solid var(--cdk-border);
	gap: 8px;
}

#surecookie-preferences-root .surecookie-modal-footer-branding {
	padding: 14px 28px;
	border-top: 1px solid var(--cdk-border);
}

#surecookie-preferences-root .surecookie-policy-link {
	font-size: 12px;
	letter-spacing: 0.025em;
	color: var(--cdk-text-soft);
	text-decoration: none;
}

#surecookie-preferences-root .surecookie-policy-link:hover {
	color: var(--cdk-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}