/**
 * uWeed skin for WPConsent -- light DOM layer.
 *
 * Reaches the shadow host and the nodes WPConsent Pro 1.1.8 exposes via
 * ::part(). Everything unexposed lives in uweed-wpconsent-shadow.css.
 *
 * Cascade note: for ::part() targets, normal declarations from this (outer)
 * tree override normal declarations inside the shadow tree, so no !important is
 * needed here. The plugin's `.wpconsent-button-disabled{display:none!important}`
 * still wins, which is deliberate -- a button the plugin hides stays hidden.
 *
 * Fonts are the theme's locally hosted Poppins / DM Sans faces. @font-face rules
 * registered in the document are visible to shadow trees, so no webfont request
 * is added and no pre-consent third-party dependency is introduced.
 */

/* Design tokens (--uw-consent-*) are declared once, on :host, in
   uweed-wpconsent-shadow.css. That sheet is inlined into the shadow root, so the
   tokens are present at first paint and inherit down to every node the rules
   below target through ::part(). :root is deliberately never redefined, so the
   rest of the shop is untouched.

   The card, body, actions and banner buttons are additionally styled from
   inside the shadow root by that same sheet. The duplication is deliberate:
   ::part() is WPConsent's documented override surface and belongs here, while
   the inlined copy is the one guaranteed to apply before first paint even if WP
   Rocket defers this file. Keep the two in step when changing values. */

/* ---------------------------------------------------------------- card ---- */

#wpconsent-container::part(wpconsent-banner) {
	box-sizing: border-box;
	/* Floating bottom-right placement, as originally configured. */
	position: fixed;
	top: auto;
	left: auto;
	right: var(--uw-consent-gutter);
	bottom: var(--uw-consent-gutter);
	display: block; /* replaces the plugin's grid so spacing is margin-driven */
	width: min(var(--uw-consent-card-width), calc(100% - 32px));
	min-width: 0;
	max-width: calc(100% - 32px);
	height: auto;
	max-height: calc(100vh - 32px); /* fallback for browsers without dvh */
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--uw-consent-pad) var(--uw-consent-pad) var(--uw-consent-pad-bottom);
	border: 0;
	border-radius: var(--uw-consent-radius);
	background: var(--uw-consent-surface);
	color: var(--uw-consent-ink);
	box-shadow: var(--uw-consent-shadow);
	text-align: left;
}

/* ---------------------------------------------------------------- body ---- */

#wpconsent-container::part(wpconsent-banner-body) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	max-height: none; /* plugin caps this at 55vh; the card scrolls instead */
	overflow: visible;
	margin: 0;
	padding: 0;
	font-family: var(--uw-consent-ff-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--uw-consent-ink);
	text-align: left;
}

/* ------------------------------------------------------------- actions ---- */

#wpconsent-container::part(wpconsent-banner-footer) {
	box-sizing: border-box;
	display: flex;
	/* The plugin forces column for the floating layout; the actions row is
	   horizontal until the mobile breakpoint. */
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--uw-consent-gap-buttons);
	width: 100%;
	/* Body-to-actions rhythm is 24px in total, carried entirely here. */
	margin: var(--uw-consent-gap-actions) 0 0;
	padding: 0;
}

/* ------------------------------------------------------------- buttons ---- */

#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences),
#wpconsent-container::part(wpconsent-preferences-save-button),
#wpconsent-container::part(wpconsent-preferences-accept-button),
#wpconsent-container::part(wpconsent-preferences-cancel-button) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--uw-consent-ff-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	min-height: 44px;
	height: auto; /* long German labels expand instead of clipping */
	min-width: 160px;
	/* The plugin sets width:100% on every banner button; on desktop the actions
	   row is content-sized and right-aligned instead. Mobile restores 100%. */
	width: auto;
	max-width: 100%;
	padding: 10px 24px;
	border: 2px solid var(--uw-consent-navy);
	border-radius: var(--uw-consent-btn-radius);
	cursor: pointer;
	white-space: normal;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#wpconsent-container::part(wpconsent-button-accept),
#wpconsent-container::part(wpconsent-preferences-save-button) {
	background: var(--uw-consent-navy);
	color: var(--uw-consent-surface);
}

#wpconsent-container::part(wpconsent-button-cancel),
#wpconsent-container::part(wpconsent-button-preferences),
#wpconsent-container::part(wpconsent-preferences-accept-button),
#wpconsent-container::part(wpconsent-preferences-cancel-button) {
	background: var(--uw-consent-surface);
	color: var(--uw-consent-navy);
}

/* Hover only where a fine pointer exists, so nothing is hover-gated on touch. */
@media (hover: hover) and (pointer: fine) {
	#wpconsent-container::part(wpconsent-button-accept):hover,
	#wpconsent-container::part(wpconsent-button-cancel):hover,
	#wpconsent-container::part(wpconsent-button-preferences):hover,
	#wpconsent-container::part(wpconsent-preferences-save-button):hover,
	#wpconsent-container::part(wpconsent-preferences-accept-button):hover,
	#wpconsent-container::part(wpconsent-preferences-cancel-button):hover {
		background: var(--uw-consent-hover);
		color: var(--uw-consent-navy);
		border-color: var(--uw-consent-hover);
	}
}

#wpconsent-container::part(wpconsent-button-accept):focus-visible,
#wpconsent-container::part(wpconsent-button-cancel):focus-visible,
#wpconsent-container::part(wpconsent-button-preferences):focus-visible,
#wpconsent-container::part(wpconsent-preferences-save-button):focus-visible,
#wpconsent-container::part(wpconsent-preferences-accept-button):focus-visible,
#wpconsent-container::part(wpconsent-preferences-cancel-button):focus-visible,
#wpconsent-container::part(wpconsent-preferences-close):focus-visible {
	outline: 3px solid var(--uw-consent-link);
	outline-offset: 2px;
}

/* --------------------------------------------- preferences panel (P1) ----
   Fonts, colours, radius and button treatment only. Categories, service
   toggles, cookie details and the save flow are left exactly as the plugin
   renders them. */

/* The preferences panel is a real centred modal and keeps its dimmed backdrop;
   the first-layer banner floats in the corner and has none. */
#wpconsent-container::part(wpconsent-preferences-modal) {
	background: var(--uw-consent-backdrop);
}

#wpconsent-container::part(wpconsent-preferences-content) {
	box-sizing: border-box;
	border-radius: var(--uw-consent-radius);
	background: var(--uw-consent-surface);
	box-shadow: var(--uw-consent-shadow);
	font-family: var(--uw-consent-ff-body);
	color: var(--uw-consent-ink);
}

#wpconsent-container::part(wpconsent-preferences-title) {
	font-family: var(--uw-consent-ff-heading);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	color: var(--uw-consent-navy);
}

#wpconsent-container::part(wpconsent-preferences-close) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--uw-consent-close-bg);
	color: var(--uw-consent-navy);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
	#wpconsent-container::part(wpconsent-preferences-close):hover {
		background: var(--uw-consent-hover);
		color: var(--uw-consent-navy);
	}
}

#wpconsent-container::part(wpconsent-accordion-toggle) {
	font-family: var(--uw-consent-ff-body);
	color: var(--uw-consent-navy);
}

/* -------------------------------------------------------------- mobile ---- */

@media (max-width: 480px) {
	/* The 24px mobile padding is set on the card itself by the shadow sheet, so
	   the var() below resolves to it here too. */
	#wpconsent-container::part(wpconsent-banner) {
		left: var(--uw-consent-gutter);
		right: var(--uw-consent-gutter);
		width: auto;
		max-width: none;
	}

	#wpconsent-container::part(wpconsent-banner-footer) {
		/* Stacked, full width, unchanged DOM order. */
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}

	#wpconsent-container::part(wpconsent-button-accept),
	#wpconsent-container::part(wpconsent-button-cancel),
	#wpconsent-container::part(wpconsent-button-preferences) {
		width: 100%;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#wpconsent-container::part(wpconsent-button-accept),
	#wpconsent-container::part(wpconsent-button-cancel),
	#wpconsent-container::part(wpconsent-button-preferences),
	#wpconsent-container::part(wpconsent-preferences-save-button),
	#wpconsent-container::part(wpconsent-preferences-accept-button),
	#wpconsent-container::part(wpconsent-preferences-cancel-button) {
		transition: none;
	}
}