/* ==========================================================================
   Cookiebanner (Complianz) in JVS-huisstijl
   - "Accepteren" en "Weigeren" zijn bewust identiek (AP: weigeren even makkelijk als accepteren).
   - Contrast en focus volgens WCAG 2.2 AA.
   De inhoud/teksten van de banner beheer je in Complianz; het uiterlijk staat hier.
   ========================================================================== */

html body .cmplz-cookiebanner {
	--cmplz_banner_width: 560px;
	--cmplz_banner_background_color: var(--jvs-offwhite, #F4F0EE);
	--cmplz_banner_border_color: var(--jvs-nude, #D8BDB5);
	--cmplz_banner_border_width: 1px;
	--cmplz_banner_border_radius: 20px;
	--cmplz_banner_margin: 16px;
	--cmplz_title_font_size: 1.375rem;
	--cmplz_text_color: var(--jvs-brown, #514541);
	--cmplz_text_font_size: 0.9375rem;
	--cmplz_text_line_height: 1.55;
	--cmplz_hyperlink_color: var(--jvs-plum, #682C45);
	--cmplz_link_font_size: 0.9375rem;
	--cmplz_category_body_font_size: 0.9375rem;
	--cmplz_category_header_title_font_size: 1rem;
	--cmplz_category_header_active_font_size: 0.875rem;
	--cmplz_category_header_always_active_color: var(--jvs-plum, #682C45);
	--cmplz_button_font_size: 1rem;
	--cmplz_button_border_radius: 999px;
	--cmplz_button_accept_background_color: var(--jvs-plum, #682C45);
	--cmplz_button_accept_border_color: var(--jvs-plum, #682C45);
	--cmplz_button_accept_text_color: var(--jvs-offwhite, #F4F0EE);
	--cmplz_button_deny_background_color: var(--jvs-plum, #682C45);
	--cmplz_button_deny_border_color: var(--jvs-plum, #682C45);
	--cmplz_button_deny_text_color: var(--jvs-offwhite, #F4F0EE);
	--cmplz_button_settings_background_color: transparent;
	--cmplz_button_settings_border_color: var(--jvs-plum, #682C45);
	--cmplz_button_settings_text_color: var(--jvs-plum, #682C45);
	--cmplz_slider_active_color: var(--jvs-plum, #682C45);
	--cmplz_slider_inactive_color: #7A6E6A; /* 4.3:1 op licht beige: duidelijk zichtbaar uit-schakelaar */
	--cmplz_slider_bullet_color: var(--jvs-white, #FFFFFF);

	font-family: var(--jvs-font-body, "Hanken Grotesk", system-ui, sans-serif);
	color: var(--jvs-brown, #514541);
	box-shadow: 0 16px 48px rgb(81 69 65 / 0.18);
}

html body .cmplz-cookiebanner .cmplz-title {
	font-family: var(--jvs-font-heading, "Libre Caslon Display", Georgia, serif);
	font-weight: 400;
	color: var(--jvs-plum, #682C45);
}

html body .cmplz-cookiebanner .cmplz-category-title {
	font-family: var(--jvs-font-body, "Hanken Grotesk", system-ui, sans-serif);
	font-weight: 600;
	color: var(--jvs-plum, #682C45);
}

html body .cmplz-cookiebanner .cmplz-category {
	background: var(--jvs-warm, #EDE3D8);
	border-radius: 12px;
}

/* Knoppen: zelfde lettertype als de site, 44px hoog */
html body .cmplz-cookiebanner .cmplz-btn {
	min-height: 44px;
	padding-inline: 1.25rem;
	font-family: var(--jvs-font-body, "Hanken Grotesk", system-ui, sans-serif);
	font-weight: 600;
	border-width: 2px;
	border-style: solid;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

html body .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover,
html body .cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
	background-color: var(--jvs-black, #222121);
	border-color: var(--jvs-black, #222121);
	color: var(--jvs-offwhite, #F4F0EE);
}

html body .cmplz-cookiebanner .cmplz-btn:is(.cmplz-view-preferences, .cmplz-save-preferences, .cmplz-manage-options):hover {
	background-color: var(--jvs-plum, #682C45);
	color: var(--jvs-offwhite, #F4F0EE);
}

/* Links in de banner onderstreept (niet alleen kleur) */
html body .cmplz-cookiebanner .cmplz-link {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Duidelijke focus op alles in de banner, ook het sluitkruisje */
html body .cmplz-cookiebanner :is(.cmplz-btn, .cmplz-link, .cmplz-close, .cmplz-category-toggle, input):focus-visible,
html body .cmplz-manage-consent:focus-visible {
	outline: 3px solid var(--jvs-plum, #682C45);
	outline-offset: 3px;
}

html body .cmplz-cookiebanner .cmplz-close {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	color: var(--jvs-plum, #682C45);
	border-radius: 50%;
}

/* "Beheer toestemming"-tab rechtsonder verbergen. De knop blijft in de pagina staan:
   de footerlink "Cookie-instellingen" (klasse cmplz-show-banner, zie consent.js) gebruikt hem
   om de banner te heropenen. Daarmee blijft intrekken van toestemming op elke pagina mogelijk. */
html body #cmplz-manage-consent .cmplz-manage-consent {
	display: none !important;
}

/* Opmaak voor het geval de knop elders wél getoond wordt (bijv. via shortcode) */
html body .cmplz-manage-consent {
	font-family: var(--jvs-font-body, "Hanken Grotesk", system-ui, sans-serif);
	font-weight: 600;
	background-color: var(--jvs-plum, #682C45);
	color: var(--jvs-offwhite, #F4F0EE);
	border-color: var(--jvs-plum, #682C45);
}

/* Geblokkeerde embeds (YouTube, Instagram) tot er toestemming is */
html body .cmplz-blocked-content-notice {
	font-family: var(--jvs-font-body, "Hanken Grotesk", system-ui, sans-serif);
	background-color: var(--jvs-plum, #682C45);
	color: var(--jvs-offwhite, #F4F0EE);
	border-radius: 999px;
	padding: 0.75rem 1.25rem;
	min-height: 44px;
}

html body .cmplz-blocked-content-notice:hover {
	background-color: var(--jvs-black, #222121);
}

html body .cmplz-placeholder-element {
	border-radius: var(--jvs-radius, 20px);
	overflow: hidden;
}

/* Telefoon: banner over de volle breedte onderaan */
@media (max-width: 600px) {
	html body .cmplz-cookiebanner {
		--cmplz_banner_margin: 8px;
		--cmplz_banner_border_radius: 16px;
	}
}