/*
 * Cookie box, Brotguide bar and footer legal links (inc/jo-cookie-footer.php, front end only).
 *
 * 1. Borlabs Cookie 2.3, layout "Box Plus": the text area scrolls, the heading, the buttons and the
 *    links (Cookie-Details, Datenschutzerklärung, Impressum) always stay in view, also on a 390x844 phone.
 *    "Alle akzeptieren" and "Nur essenzielle Cookies akzeptieren" look exactly the same (equal prominence,
 *    side by side from 576px, stacked on phones); "Speichern" and "Individuelle Datenschutzeinstellungen"
 *    are outlined. Texts, links and order of the settings stay as Borlabs renders them; nothing is hidden.
 *    Only the first view (.cookie-box) is changed, the "Individuelle Datenschutzeinstellungen" view stays.
 * 2. The Brotguide bar (and the centre newsletter popup) wait while the cookie box is open.
 * 3. Footer legal links: contrast 6.0:1 on the footer grey (was 2.3:1), same size and layout.
 */

/* ---------- 1. Borlabs cookie box ---------- */

#BorlabsCookieBox ._brlbs-box._brlbs-box-plus {
	display: flex;
	flex-direction: column;
	max-height: 85vh; /* Borlabs' value, for browsers without dvh */
	max-height: calc(100dvh - 16px);
	padding: 14px 0;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	min-height: 0;
}

/* overflow stays auto (Borlabs): if a browser cannot shrink the text area, the box scrolls as before */
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box > .container {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
	min-height: 0;
}

/* coming back from "Individuelle Datenschutzeinstellungen", Borlabs sets a fixed pixel height measured
   while the view was collapsed; the visible view keeps its natural height (the text area still scrolls) */
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box:not([aria-hidden="true"]) > .container {
	height: auto !important;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box > .container > * {
	flex: 0 0 auto;
}

/* text + group checkboxes: the only part that scrolls; shadows at the edges show there is more */
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box > .container > ._brlbs-flex-center + .row {
	flex: 0 1 auto;
	min-height: 4.5em;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background:
		linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) center top / 100% 28px no-repeat local,
		linear-gradient(rgba(255, 255, 255, 0), #fff 70%) center bottom / 100% 28px no-repeat local,
		radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) center top / 100% 12px no-repeat scroll,
		radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) center bottom / 100% 12px no-repeat scroll,
		#fff;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box #CookieBoxTextDescription {
	margin-top: 4px;
}

/* buttons: 1 Alle akzeptieren, 2 Nur essenzielle (same look), 3 Speichern, 4 Individuelle (outlined) */
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	margin: 0;
	padding: 12px 0 0;
	border-top: 1px solid #e3dfda;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area > div {
	display: flex;
	max-width: none;
	padding: 0;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area > div:nth-child(1) { order: 1; } /* Alle akzeptieren */
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area > div:nth-child(3) { order: 2; } /* Nur essenzielle */
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area > div:nth-child(2) { order: 3; } /* Speichern */
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area > div:nth-child(4) { order: 4; } /* Individuelle */

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area p,
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area p:last-child {
	display: flex;
	flex: 1 1 auto;
	margin: 0;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area ._brlbs-btn {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 14px;
	border: 2px solid #191919;
	border-radius: 4px;
	background: #191919;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area ._brlbs-btn:hover {
	border-color: #3d3d3d;
	background: #3d3d3d;
	color: #fff;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area #CookieBoxSaveButton,
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area ._brlbs-manage-btn ._brlbs-btn {
	min-height: 44px;
	background: #fff;
	color: #191919;
	font-size: 15px;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area #CookieBoxSaveButton:hover,
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area ._brlbs-manage-btn ._brlbs-btn:hover {
	border-color: #191919;
	background: #f0ede9;
	color: #191919;
}

/* Cookie-Details | Datenschutzerklärung | Impressum: always visible, readable, big enough to tap */
#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-legal {
	flex-wrap: wrap;
	margin: 0;
	padding-top: 6px;
	font-size: 13px;
	line-height: 1.3;
}

#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-legal a {
	display: inline-block;
	padding: 6px 4px;
	text-decoration: underline;
}

@media (min-width: 576px) {
	#BorlabsCookieBox ._brlbs-box-plus > .cookie-box ._brlbs-button-area {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* phones: the text area gets about 2/5 of the screen, so the box does not cover the whole page */
@media (max-width: 767px) {
	#BorlabsCookieBox ._brlbs-box-plus > .cookie-box > .container > ._brlbs-flex-center + .row {
		max-height: 38vh;
		max-height: 38dvh;
	}

	/* Borlabs breaks the heading at any letter ("Datenschutzeinstellunge|n" at 320px) */
	#BorlabsCookieBox ._brlbs-box-plus > .cookie-box #CookieBoxTextHeadline {
		font-size: 21px;
		font-size: min(21px, 6vw);
		word-break: normal;
		overflow-wrap: anywhere;
		-webkit-hyphens: auto;
		hyphens: auto;
	}
}

/* ---------- 2. Brotguide bar / newsletter popup wait for the cookie box ---------- */

body .newsletter-popup {
	transition: bottom 200ms ease-out, transform 300ms ease-out 800ms, visibility 0s linear 800ms;
}

body:has(#BorlabsCookieBox > div.show-cookie-box) .newsletter-popup {
	visibility: hidden;
	transform: translateY(110%);
	transition: none;
}

body:has(#BorlabsCookieBox > div.show-cookie-box) .newsletter-popup-center {
	visibility: hidden;
}

/* ---------- 3. Footer: legal guarantee notice and legal links ---------- */

/* no mouse-over enlargement in the footer (it covered AGB/Widerrufsbelehrung); a click still opens the
   full notice. The theme already switches the hover off in the HTML; this also covers cached pages. */
.jo-gewaehrleistung-footer .wc-gzd-popover.wc-gzd-popover-hover {
	display: none !important;
}


footer.main-footer #menu-footer-legal li a {
	color: #5f564c; /* 6.0:1 on #edebe8 (was #a59c91, 2.3:1) */
}

footer.main-footer #menu-footer-legal li a:hover,
footer.main-footer #menu-footer-legal li a:focus-visible {
	color: #191919;
	text-decoration: underline;
}