/*
 * Klaro! Cookie Consent – theme overrides for Leben mit Krebs / Vivre avec le cancer
 *
 * klaro.js ships its own base CSS which reads the CSS variables below.
 * Selectors are prefixed with "html body .klaro.klaro" so they win over the injected base styles
 * regardless of load order.
 */

.klaro {
	--font-family: BRNebula-Regular, sans-serif;
	--title-font-family: BRNebula-Bold, sans-serif;
	--font-size: 14px;
	--border-radius: 0;
	--border-width: 1px;
	--border-style: solid;

	/* Backgrounds / text (modal + notice) */
	--dark1: #FFFFFF;      /* background */
	--light1: #31312B;     /* text */
	--dark2: #D9D8D7;      /* borders, separators */
	--dark3: #747471;      /* descriptions */
	--light2: #D9D8D7;
	--light3: #747471;     /* caret / secondary text */
	--white2: #D9D8D7;     /* switch off */
	--white3: #FFFFFF;     /* switch knob */

	/* Accent colors */
	--green1: #31312B;     /* links, primary button, switch on */
	--green2: #747471;
	--green3: #F2A2A2;     /* required switch */
	--blue1: #31312B;
	--blue2: #747471;
	--button-text-color: #FFFFFF;
	--box-shadow-color: rgba(49, 49, 43, 0.15);

	/* Notice position (desktop) */
	--notice-right: 24px;
	--notice-bottom: 24px;
	--notice-max-width: 440px;
}

/* ---------- General ---------- */

html body .klaro.klaro .cookie-notice,
html body .klaro.klaro .cookie-modal .cm-modal.cm-klaro,
html body .klaro.klaro .cookie-modal-notice {
	color: #31312B;
	box-shadow: 0 8px 32px rgba(49, 49, 43, 0.18);
}

html body .klaro.klaro .cookie-notice:not(.cookie-modal-notice) {
	border: 1px solid #D9D8D7;
}

html body .klaro.klaro .cookie-modal .cm-bg {
	background: rgba(49, 49, 43, 0.6);
}

html body .klaro.klaro .cookie-modal h1,
html body .klaro.klaro .cookie-modal .cm-header .title,
html body .klaro.klaro .cookie-notice .cn-title {
	font-family: BRNebula-Bold, sans-serif;
	font-size: 1.25rem;
	line-height: 1.3;
	color: #31312B;
}

html body .klaro.klaro .cookie-modal a,
html body .klaro.klaro .cookie-notice a,
html body .klaro.klaro .context-notice a {
	color: #31312B;
	text-decoration: underline;
}

html body .klaro.klaro .cookie-modal a:hover,
html body .klaro.klaro .cookie-notice a:hover,
html body .klaro.klaro .context-notice a:hover {
	opacity: 0.8;
}

/* Theme has a global ".hide { display: none }" which would hide Klaro's close button */
html body .klaro.klaro .cookie-modal .cm-modal .cm-header button.hide {
	display: block;
	position: absolute;
	/* Keep the icon 18px from the edges while retaining a larger click target. */
	top: 12px;
	right: 12px;
	padding: 6px;
}

html body .klaro.klaro .cookie-modal .cm-modal .cm-header button.hide:focus,
html body .klaro.klaro .cookie-modal .cm-modal .cm-header button.hide:focus-visible {
	outline: none;
	box-shadow: none;
}

html body .klaro.klaro .cookie-modal .cm-modal .cm-header .hide svg {
	display: block;
	stroke: #31312B;
}

/* ---------- Buttons (same look as .btn in theme) ---------- */

html body .klaro.klaro .cm-btn {
	font-family: BRNebula-Bold, sans-serif;
	font-size: 0.75rem;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 12px 20px;
	border-radius: 24px;
	border: 2px solid #31312B;
	background-color: #31312B;
	color: #FFFFFF;
	transition: all 0.17s;
}

html body .klaro.klaro .cm-btn:hover {
	opacity: 0.8;
}

html body .klaro.klaro .cm-btn:focus {
	outline: 0;
	box-shadow: 0 0 0 3px #F7D2D2;
}

/* Primary: accept all, contextual "yes" */
html body .klaro.klaro .cm-btn.cm-btn-success,
html body .klaro.klaro .cm-btn.cm-btn-success-var,
html body .klaro.klaro .cm-btn.cm-btn-accept-all {
	background-color: #31312B;
	color: #FFFFFF;
}

/* Secondary buttons: decline / accept selected / learn more */
html body .klaro.klaro .cm-btn.cm-btn-decline,
html body .klaro.klaro .cm-btn.cm-btn-danger,
html body .klaro.klaro .cm-btn.cm-btn-accept,
html body .klaro.klaro .cm-btn.cm-btn-info {
	background-color: transparent;
	color: #31312B;
}

html body .klaro.klaro .cm-btn.cm-btn-decline:hover,
html body .klaro.klaro .cm-btn.cm-btn-danger:hover,
html body .klaro.klaro .cm-btn.cm-btn-accept:hover,
html body .klaro.klaro .cm-btn.cm-btn-info:hover {
	opacity: 1;
	background-color: #31312B;
	color: #FFFFFF;
}

html body .klaro.klaro .cookie-notice .cn-learn-more {
	font-family: BRNebula-Bold, sans-serif;
}

/* ---------- Switches ---------- */

html body .klaro.klaro .cm-list-input:checked + .cm-list-label .slider {
	background-color: #31312B;
}

html body .klaro.klaro .cm-list-input.required:checked + .cm-list-label .slider {
	background-color: #F2A2A2;
	opacity: 1;
}

html body .klaro.klaro .cm-list-input.only-required + .cm-list-label .slider,
html body .klaro.klaro .cm-list-input.half-checked:checked + .cm-list-label .slider {
	background-color: #747471;
	opacity: 1;
}

html body .klaro.klaro .cm-list-title {
	font-family: BRNebula-Bold, sans-serif;
}

html body .klaro.klaro .cm-list-description,
html body .klaro.klaro .cm-required,
html body .klaro.klaro .cm-opt-out {
	color: #747471 !important;
}

/* ---------- Footer ---------- */

html body .klaro.klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a {
	color: #747471;
	text-decoration: none;
	font-size: 0.75rem;
}

/* ---------- Contextual consent (placeholder for YouTube / podcast) ---------- */

html body .klaro.klaro.cm-as-context-notice {
	height: 100%;
	min-height: 200px;
}

html body .klaro.klaro .context-notice {
	--dark1: #31312B;
	background-color: #F2F2F2;
	border: 0;
	padding: 24px;
	height: 100%;
	min-height: 200px;
}

html body .klaro.klaro .context-notice p {
	color: #31312B;
	font-size: 1rem;
	max-width: 420px;
}

html body .klaro.klaro .context-notice p.cm-buttons {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

html body .klaro.klaro .context-notice .cm-btn {
	margin: 0;
}

/* ---------- Stacking (above navbar 1030 and .alert-container 10000) ---------- */

html body .klaro.klaro .cookie-modal,
html body .klaro.klaro .cookie-notice:not(.cookie-modal-notice) {
	z-index: 10100;
}

html body .klaro.klaro .cookie-modal .cm-modal.cm-klaro {
	z-index: 10101;
}

/* ---------- Mobile ---------- */

@media (max-width: 1023px) {
	html body .klaro.klaro .cookie-notice:not(.cookie-modal-notice) {
		border-width: 1px 0 0 0;
	}
}

@media (max-width: 767px) {
	html body .klaro.klaro .cookie-modal .cm-modal.cm-klaro {
		left: 12px;
		right: 12px;
		width: auto;
		max-height: calc(100% - 24px);
	}

	html body .klaro.klaro .cookie-modal .cm-modal .cm-footer-buttons {
		flex-direction: column;
		gap: 8px;
	}

	html body .klaro.klaro .cookie-modal .cm-modal .cm-footer-buttons .cm-btn {
		width: 100%;
		margin: 0;
	}
}

@media (max-width: 384px) {
	html body .klaro.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
		width: 100%;
		margin-right: 0;
	}
}