/**
 * Expat Money brand theming for the Complianz cookie-consent banner.
 *
 * Scoped strictly to Complianz's own classes/IDs (.cmplz-*, #cmplz-*).
 * Redefines Complianz's own documented custom properties (see
 * wp-content/plugins/complianz-gdpr/cookiebanner/css/defaults/banner-optin.css)
 * rather than fighting its selectors, so this stays forward-compatible
 * with plugin updates. Never edit files inside the plugin directory.
 *
 * Loaded from wp_footer (see inc/complianz-styling.php), which prints
 * after Complianz's own inline :root block in wp_head, so plain cascade
 * order (same-specificity, later source wins) is enough almost
 * everywhere without !important. The one exception is noted inline.
 */

.cmplz-cookiebanner {
	/* Panel */
	--cmplz_banner_width: 480px;
	--cmplz_banner_background_color: #FFFFFF;
	--cmplz_banner_border_color: #F1F3F4;
	--cmplz_banner_border_width: 1px 1px 1px 1px;
	--cmplz_banner_border_radius: 18px;
	--cmplz_banner_margin: 12px;

	/* Type */
	--cmplz_title_font_size: 1.0625rem;
	--cmplz_text_font_size: 0.875rem;
	--cmplz_link_font_size: 0.875rem;
	--cmplz_category_body_font_size: 0.875rem;
	--cmplz_category_header_title_font_size: 0.875rem;
	--cmplz_text_color: #1A1A1A;
	--cmplz_hyperlink_color: #0A66C2;

	/* Accept: primary action, matches the site's brand-green buttons */
	--cmplz_button_accept_background_color: #0A66C2;
	--cmplz_button_accept_border_color: #0A66C2;
	--cmplz_button_accept_text_color: #FFFFFF;

	/* Deny: a real, equally-sized secondary button, not a de-emphasised link */
	--cmplz_button_deny_background_color: #FFFFFF;
	--cmplz_button_deny_border_color: #1A1A1A;
	--cmplz_button_deny_text_color: #1A1A1A;

	/*
	 * View/save preferences: neutral, distinct from both Accept and Deny.
	 * The border was originally #F1F3F4 against a #FFFFFF banner, a ~1.05:1
	 * contrast ratio, below WCAG 1.4.11's 3:1 minimum for UI component
	 * boundaries. At that ratio the button read as flat/disabled rather
	 * than a real secondary action, since text contrast alone (#1A1A1A on
	 * #FAFAF8, very high) didn't make up for having no visible edge.
	 * Reusing the site's own muted-text token as the border gives it a
	 * real, WCAG-compliant boundary while keeping the fill light so it
	 * still reads as secondary, not competing with Accept's solid green.
	 */
	--cmplz_button_settings_background_color: #FFFFFF;
	--cmplz_button_settings_border_color: #52605C;
	--cmplz_button_settings_text_color: #1A1A1A;

	--cmplz_button_border_radius: 8px;
	--cmplz_button_font_size: 0.875rem;

	--cmplz_slider_active_color: #0A66C2;
	--cmplz_slider_inactive_color: #52605C;
	--cmplz_slider_bullet_color: #FFFFFF;

	font-family: "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
}

/*
 * Complianz's own base rule for this element (unconditioned, no media
 * query at all, see cookiebanner/css/defaults/banner-optin.css) is
 * display:grid with children set to grid-column:span 3 but no
 * grid-template-columns defined anywhere below the 1024px position
 * breakpoint. An implicit grid with no defined columns lets content
 * size to its own natural width instead of wrapping to the container,
 * which overflowed the viewport at mobile widths before this rule was
 * added. Resetting to a simple flex column applies at every width, not
 * just desktop, and is the only reliable way to neutralise that base
 * rule without chasing grid-column/row values across every breakpoint
 * Complianz defines them at (fragile against plugin updates).
 *
 * Scoped to the .cmplz-show state class (present from first paint,
 * swapped for .cmplz-dismissed on close/accept/deny, confirmed by
 * reading complianz.js) rather than the bare .cmplz-cookiebanner:
 * matching Complianz's own dismissed-state selector specificity this
 * way means plain cascade wins without !important, and, critically,
 * doesn't fight the .cmplz-cookiebanner.cmplz-dismissed { display:none }
 * rule that's supposed to hide the banner after a choice is made. An
 * earlier version of this rule used the bare selector with !important,
 * which did win the grid fight but also permanently defeated the
 * dismissed-state rule, leaving the banner stuck visible after Accept.
 */
.cmplz-cookiebanner.cmplz-show {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cmplz-cookiebanner .cmplz-buttons {
	flex-direction: column;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	min-width: 0;
	width: 100%;
}

.cmplz-cookiebanner .cmplz-title {
	font-weight: 700;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-weight: 600;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
	background-color: #004182;
	border-color: #004182;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
	background-color: #F1F3F4;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	background-color: #F1F3F4;
}

/* Visible keyboard focus: Complianz's own CSS never defines one. */
.cmplz-cookiebanner .cmplz-btn:focus-visible,
.cmplz-cookiebanner .cmplz-link:focus-visible,
.cmplz-cookiebanner .cmplz-close:focus-visible,
.cmplz-cookiebanner input.cmplz-consent-checkbox:focus-visible + .cmplz-label {
	outline: 2px solid #378FE9;
	outline-offset: 2px;
}

/* Same selector + specificity as Complianz's own shadow rule
   (.cmplz-cookiebanner.cmplz-show in banner-optin.css), so this wins on
   source order alone; no !important needed. */
.cmplz-cookiebanner.cmplz-show {
	box-shadow: 0 4px 8px rgba(22, 33, 31, 0.06), 0 16px 32px rgba(22, 33, 31, 0.10);
}

/* Desktop: a contained bottom sheet, not Complianz's edge-to-edge bar
   default for the "bottom" position, real margins on both sides and a
   sensible cap on width. 1024px matches the breakpoint Complianz's own
   bottom.css uses to flip .cmplz-buttons back to a row (via its
   .cmplz-categories-type-no state class, higher specificity than a
   plain override, so it wins correctly on its own) so there's no gap
   where the two rule sets disagree. */
@media (min-width: 1024px) {
	.cmplz-cookiebanner {
		left: 50%;
		right: auto;
		bottom: 24px;
		margin: 0;
		width: min(var(--cmplz_banner_width), calc(100vw - 48px));
		transform: translateX(-50%);
	}

	.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
		min-width: 0;
		flex: 1 1 0;
	}
}

/* Below 1024px (tablet + mobile): near-full-width, small consistent
   margin, safe-area aware, buttons stacked (flex-direction:column set
   unconditionally above). */
@media (max-width: 1023px) {
	.cmplz-cookiebanner {
		margin: 8px;
		width: calc(100% - 16px);
		padding-bottom: max(15px, env(safe-area-inset-bottom));
	}
}

/* Complianz always renders an <li> for every document type, even when
   unconfigured (Impressum is intentionally left unset), only hiding the
   inner link via .cmplz-hidden. No setting suppresses the empty <li>
   itself, so this is the one place a structural rule (not a variable)
   is the only available fix. */
.cmplz-links.cmplz-documents li:has(> a.cmplz-hidden) {
	display: none;
}

/* Floating "manage consent" reopen tab, themed defensively in case it's
   ever enabled; the footer's Cookie Settings button is the primary
   reopen path in this configuration. */
#cmplz-manage-consent .cmplz-manage-consent {
	background-color: #1A1A1A;
	color: #FFFFFF;
	border-radius: 10px 10px 0 0;
	font-family: "Inter", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
}

/*
 * Footer "Cookie Settings" control (parts/footer.html). It has to be a
 * real <button class="cmplz-manage-consent"> for Complianz's own
 * delegated click handler to pick it up and reopen the banner
 * (cmplz_add_event('click', 'button.cmplz-manage-consent', ...) in
 * complianz.js), which rules out a plain shortcode-rendered link.
 * Reset it to look like the plain text links beside it in the footer
 * column (see .expatmoney-footer__col ul.wp-block-list a in main.css)
 * rather than a default button.
 */
.expatmoney-cookie-settings-link {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	text-decoration: none;
}

.expatmoney-cookie-settings-link:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.expatmoney-cookie-settings-link:focus-visible {
	outline: 2px solid #378FE9;
	outline-offset: 2px;
}