/*
 * Cookiebanner (inc/consent.php, assets/js/consent.js), 9 oktober 2026. Op elke pagina geladen (inc/enqueue.php).
 * Lichte kaart linksonder (op telefoons over de volle breedte onderaan), in de SWO-stijl: tekst 18px, knoppen 48px hoog.
 * Contrast: tekst #353535 op #FCF8F3 11,6:1, titel #2B2B2B 13,4:1, links #A34700 5,7:1, #111 op oranje #E97C1A 6,6:1,
 * rand van de tweede knop #767676 4,3:1.
 */
.kami-consent { position: fixed; z-index: 1100; bottom: 20px; left: 20px; width: min(500px, calc(100% - 40px)); max-height: calc(100vh - 40px); overflow-y: auto; padding: 24px 26px 24px; color: var(--swo-color-text); background: var(--swo-color-card); border: 2px solid #DDCBB8; border-top: 6px solid var(--swo-color-primary); border-radius: 14px; box-shadow: 0 18px 50px rgba(43, 43, 43, .22); font-family: var(--swo-font-primary); opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.kami-consent[hidden] { display: none; }
.kami-consent.is-visible { opacity: 1; transform: none; }
.kami-consent__title { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--swo-color-heading); font-size: 22px; font-weight: 700; line-height: 1.3; }
.kami-consent__title svg { flex: none; width: 28px; height: 28px; color: #A34700; }
.kami-consent p.kami-consent__text { margin: 0; color: var(--swo-color-text); font-size: 18px; line-height: 1.6; }
.kami-consent p.kami-consent__links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 8px 0 0; font-size: 18px; line-height: 1.4; }
.kami-consent__links a { display: inline-flex; align-items: center; min-height: 44px; color: #A34700; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.kami-consent__links a:hover { color: var(--swo-color-heading); text-decoration: underline; }
.kami-consent__settings { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 2px solid #E4DBD0; }
.kami-consent__settings[hidden] { display: none; }
.kami-consent__option { display: flex; gap: 14px; align-items: flex-start; color: var(--swo-color-text); font-size: 18px; line-height: 1.5; cursor: pointer; }
.kami-consent__option strong { color: var(--swo-color-heading); }
.kami-consent__option input { flex: 0 0 24px; width: 24px; height: 24px; margin: 2px 0 0; accent-color: #A34700; }
.kami-consent__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.kami-consent__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 24px; color: #111111; background: var(--swo-color-white); border: 2px solid #767676; border-radius: 10px; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.25; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.kami-consent__button[hidden] { display: none; }
.kami-consent__button:hover { background: #FCE8D3; border-color: #A34700; }
.kami-consent__button--primary { background: var(--swo-color-primary); border-color: var(--swo-color-primary); }
.kami-consent__button--primary:hover { background: var(--swo-color-primary-hover); border-color: var(--swo-color-primary-hover); }
.kami-consent__button--link { padding: 10px 12px; background: transparent; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.kami-consent__button--link:hover { background: transparent; border-color: transparent; color: #A34700; }
.kami-consent a:focus-visible,
.kami-consent__button:focus-visible,
.kami-consent__option input:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }

/* "Cookie-instellingen" in de onderste balk van de footer: oogt als de links ernaast. */
.footer-bottom__consent { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--swo-color-heading); background: none; border: 0; font: inherit; font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer-bottom__consent:hover { color: #A34700; }
.footer-bottom__consent:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }

@media (max-width: 600px) {
	.kami-consent { right: 10px; bottom: 10px; left: 10px; width: auto; max-height: calc(100vh - 20px); padding: 18px 18px 18px; }
	.kami-consent__title { font-size: 20px; }
	.kami-consent__buttons .kami-consent__button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.kami-consent { transition: none; }
}
@media (forced-colors: active) {
	.kami-consent { border-color: CanvasText; }
	.kami-consent__button { border-color: ButtonText; }
}

/* Links in de onderste balk (privacyverklaring, cookiebeleid, klachten): klikvlak minstens 44px hoog (eis SWO). */
.footer-bottom__legal { align-items: center; }
.footer-bottom__legal a { display: inline-flex; align-items: center; min-height: 44px; }
