/* ==========================================================================
   COOKIE CONSENT — ARDE skin for the Complianz GDPR banner and for the
   placeholders Complianz puts over blocked embeds (YouTube on
   /investigaciones/). Loaded only while Complianz is active (functions.php,
   arde_enqueue_cookie_consent_styles).

   Colours, radii and the 14px base size are banner settings written by
   `wp arde-cookie-consent apply` (arde-custom, cookie-consent.php) into
   Complianz's --cmplz_* variables; this file only adds what those settings
   cannot express. Keep the two in step: black #0A090C card, white #FFFAF8
   text, Warm 1 #FA0B57 accept button, outlined white deny / preferences.

   Specificity, not order: WP Fastest Cache's "Combine CSS" (on in prod and
   dev) merges every stylesheet into one file and does not preserve the
   enqueue order, so a rule that merely loads after Complianz's loses.
   Every banner selector therefore starts with the #cmplz-cookiebanner-container
   id Complianz wraps the banner in (1,x,x beats any of its class rules),
   and the placeholder selectors start with `body`.
   ========================================================================== */

/* ---- Banner ---- */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	/* Complianz fades the banner in over 2s; Justas asked for twice as fast (2026-10-12). */
	animation: fadeIn 1s;
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	padding: 24px;
	--cmplz_banner_margin: 12px;
	--cmplz_text_font_size: 14px;
	--cmplz_link_font_size: 14px;
	--cmplz_category_body_font_size: 14px;
	--cmplz_title_font_size: 20px;
	--cmplz_button_font_size: 15px;
	--cmplz_category_header_title_font_size: 15px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-weight: 800;
	line-height: 1.2;
	text-transform: none;
	/* Complianz centres the title between the (empty) logo and close cells;
	   left-align it with the message like every other ARDE card heading. */
	justify-self: start;
	grid-column: 1 / span 3;
	width: 100%;
	text-align: left;
}
/* Complianz drops the title under 426px to save space; keep it — it is the
   dialog's name and the header row keeps its height anyway. */
@media (max-width: 425px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title {
		display: block;
	}
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
	display: none;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	font-weight: 400;
	line-height: 1.4;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message p:last-child {
	margin-bottom: 0;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider {
	border-color: rgba(255, 250, 248, 0.2);
}

/* Buttons — the Figma button component (buttons.css): 2px border, 16px
   radius, ExtraBold label; 48px tall here (54 on page CTAs). Hover mirrors
   the filled-primary / outlined-secondary-light states. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-weight: 800;
	line-height: 1.4;
	min-height: 48px;
	padding: 10px 16px;
	border-style: solid;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	border-width: 2px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:focus-visible {
	background-color: #e6054c;
	border-color: #e6054c;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:focus-visible {
	background-color: rgba(255, 250, 248, 0.12);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--arde-v-2-white);
	outline-offset: 2px;
}

/* Second layer: category rows */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title {
	font-weight: 700;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-always-active {
	font-size: 12px;
	--cmplz_category_header_always_active_color: var(--wp--preset--color--arde-v-2-cold-2);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle .cmplz-icon svg {
	fill: currentColor;
}

/* Policy links under the buttons */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Blocked embeds (marketing: YouTube rows on /investigaciones/) ----
   Complianz swaps the iframe for its thumbnail with a notice button in the
   middle. Give it the card radius and the filled-primary button. */
body .cmplz-blocked-content-container,
body .cmplz-wp-video {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: none;
}
body .cmplz-blocked-content-container .cmplz-blocked-content-notice,
body .cmplz-wp-video .cmplz-blocked-content-notice,
body .cmplz-blocked-content-notice {
	font-family: var(--wp--preset--font-family--arde-v-2-raleway);
	font-weight: 800;
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--arde-v-2-white);
	background-color: var(--wp--preset--color--arde-v-2-warm-1);
	border: 2px solid #de054a;
	border-radius: 16px;
	padding: 12px 20px;
	max-width: min(320px, calc(100% - 32px));
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
body .cmplz-blocked-content-notice:hover {
	background-color: #e6054c;
}
/* The whole video area acts as the button (assets/js/consent-placeholder.js
   forwards the click): pointer and button hover colour anywhere on it. */
body .cmplz-blocked-content-container:has(> .cmplz-blocked-content-notice),
body .cmplz-wp-video:has(> .cmplz-blocked-content-notice),
body:not(.cmplz-marketing) .arde-investigation-video:has(> .cmplz-blocked-content-notice:not([hidden])),
body .arde-donation-panel__consent:has(> .cmplz-blocked-content-notice) {
	cursor: pointer;
}
body .cmplz-blocked-content-container:hover > .cmplz-blocked-content-notice,
body .cmplz-wp-video:hover > .cmplz-blocked-content-notice,
body .arde-investigation-video:hover > .cmplz-blocked-content-notice,
body .arde-donation-panel__consent:hover > .cmplz-blocked-content-notice {
	background-color: #e6054c;
}