/**
 * The cookie banner and its preferences dialog (SureCookie), in the standard's
 * type, buttons and focus ring.
 *
 * Loaded by `Storefront\BrandChrome` after SureCookie's own stylesheet, and only
 * where that loads. The colours are SureCookie's "astra" preset, which reads the
 * theme palette and so the tokens (`bin/content/50-design.php`); the buttons
 * below name the tokens directly, so they cannot drift if the preset changes.
 * Behaviour and words are SureCookie's and are not touched.
 *
 * SureCookie resets its root with `all: initial` and sets its own font on every
 * element with `!important`, so the few rules that must win carry it too; the
 * `body` in each selector outranks the vendor's.
 */

/* The theme's typeface, as the rest of the page has it. */
body #surecookie-public-root,
body #surecookie-public-root * {
	font-family: inherit !important;
}

body #surecookie-public-root .surecookie-banner-heading {
	color: var( --pod-ink );
	font-size: 1rem;
	font-weight: 700;
}

body #surecookie-public-root .surecookie-banner-description {
	color: var( --pod-ink );
	font-size: 0.875rem;
	line-height: 1.5;
}

body #surecookie-public-root .surecookie-banner-description a {
	color: var( --pod-accent );
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

body #surecookie-public-root .surecookie-banner-description a:hover {
	color: var( --pod-accent-deep );
}

/* --- Buttons ---------------------------------------------------------------- */

/*
 * Compact (40px) pills: the banner is a dense row of up to four. Accept all is
 * the one primary; the rest are secondary.
 */
body #surecookie-public-root .surecookie-btn-base,
body #surecookie-public-root .surecookie-preferences-modal :is( .surecookie-btn-primary, .surecookie-btn-outline, .surecookie-btn-outline-secondary ) {
	align-items: center;
	border: 1px solid var( --pod-field-border );
	border-radius: var( --pod-radius-pill );
	box-sizing: border-box;
	display: inline-flex;
	filter: none;
	font-size: var( --pod-btn-compact-size );
	font-weight: 700;
	height: auto;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: var( --pod-btn-compact-h );
	opacity: 1;
	padding: 0 var( --pod-near );
	text-transform: none;
	transition:
		background-color var( --pod-fast ) var( --pod-ease ),
		border-color var( --pod-fast ) var( --pod-ease ),
		color var( --pod-fast ) var( --pod-ease );
}

/*
 * Secondary: Only essential (SureCookie's `accept` button), Decline,
 * Preferences, and the dialog's outlined buttons.
 */
body #surecookie-public-root :is( .surecookie-accept-btn, .surecookie-decline-btn, .surecookie-preferences-btn ),
body #surecookie-public-root .surecookie-preferences-modal :is( .surecookie-btn-outline, .surecookie-btn-outline-secondary ) {
	background: var( --pod-surface );
	border-color: var( --pod-field-border );
	color: var( --pod-ink );
}

body #surecookie-public-root :is( .surecookie-accept-btn, .surecookie-decline-btn, .surecookie-preferences-btn ):hover,
body #surecookie-public-root .surecookie-preferences-modal :is( .surecookie-btn-outline, .surecookie-btn-outline-secondary ):hover {
	background: var( --pod-surface-2 );
	border-color: var( --pod-ink );
	color: var( --pod-ink );
	filter: none;
	opacity: 1;
}

/*
 * SureCookie marks its banner `data-dark-mode` and then paints Preferences'
 * border in the primary colour from there, at (1,3,0), which outranks the
 * rules above. Matched on the attribute alone, so the edge is the same grey
 * whichever mode it reports.
 */
body #surecookie-public-root .surecookie-banner[data-dark-mode] .surecookie-preferences-btn {
	border-color: var( --pod-field-border );
}

body #surecookie-public-root .surecookie-banner[data-dark-mode] .surecookie-preferences-btn:hover {
	border-color: var( --pod-ink );
}

/* Primary, the one per view: Accept all, and the dialog's save. */
body #surecookie-public-root .surecookie-accept-all-btn,
body #surecookie-public-root .surecookie-preferences-modal .surecookie-btn-primary {
	background: var( --pod-accent );
	border-color: var( --pod-accent );
	color: var( --pod-on-ink );
}

body #surecookie-public-root .surecookie-accept-all-btn:hover,
body #surecookie-public-root .surecookie-preferences-modal .surecookie-btn-primary:hover {
	background: var( --pod-accent-deep );
	border-color: var( --pod-accent-deep );
	color: var( --pod-on-ink );
}

/* The dialog's close: an icon button, 40px and round. */
body #surecookie-public-root .surecookie-preferences-modal .surecookie-modal-close-btn {
	border-radius: var( --pod-radius-pill );
	color: var( --pod-ink-soft );
	min-height: var( --pod-btn-compact-h );
	min-width: var( --pod-btn-compact-h );
	opacity: 1;
}

body #surecookie-public-root .surecookie-preferences-modal .surecookie-modal-close-btn:hover {
	background: var( --pod-surface-2 );
	color: var( --pod-ink );
}

/* --- Focus ------------------------------------------------------------------ */

body #surecookie-public-root :is( button, a, [tabindex='0'] ):focus-visible {
	box-shadow: none;
	outline: var( --pod-focus-width ) solid var( --pod-accent ) !important;
	outline-offset: var( --pod-focus-offset );
}

/* SureCookie turns a focused link its own green. */
body #surecookie-public-root a:focus-visible {
	color: var( --pod-accent-deep );
}

/* --- Motion ----------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	body #surecookie-public-root .surecookie-btn-base,
	body #surecookie-public-root .surecookie-preferences-modal :is( .surecookie-btn-primary, .surecookie-btn-outline, .surecookie-btn-outline-secondary ) {
		transition: none;
	}
}