/**
 * Puur Kunstgras Cookiemelding — huisstijl
 *
 * Alle kleuren, maten en afstanden komen uit de globale design tokens van de
 * site. De tweede waarde in elke var() is de fallback, zodat de melding er ook
 * klopt als een token (nog) niet gedefinieerd is — bijvoorbeeld in de builder
 * of op een pagina zonder thema-CSS.
 */

#cc-main {
	/* Basis */
	--cc-font-family: inherit;
	--cc-bg: var(--color-surface, #ffffff);
	--cc-primary-color: var(--color-text, #2b2f29);
	--cc-secondary-color: var(--color-light-6, #5c5a56);
	--cc-link-color: var(--color-primary, #2d7a42);
	--cc-overlay-bg: rgba(20, 79, 37, .55);

	/* Vormgeving */
	--cc-modal-border-radius: var(--border-16, 1rem);
	--cc-btn-border-radius: var(--border-rond, 100rem);
	--cc-pm-toggle-border-radius: var(--border-rond, 100rem);
	--cc-modal-margin: var(--spacing-1, 1rem);
	--cc-modal-transition-duration: var(--transitions-200ms, 200ms);

	/* Primaire knop — accepteren */
	--cc-btn-primary-bg: var(--color-primary, #2d7a42);
	--cc-btn-primary-color: var(--color-primary-foreground, #ffffff);
	--cc-btn-primary-border-color: var(--color-primary, #2d7a42);
	--cc-btn-primary-hover-bg: var(--color-primary-hover, #266838);
	--cc-btn-primary-hover-color: var(--color-primary-foreground, #ffffff);
	--cc-btn-primary-hover-border-color: var(--color-primary-hover, #266838);

	/* Secundaire knop — weigeren en instellingen, even zwaar maar rustiger */
	--cc-btn-secondary-bg: var(--color-light-3, #f4f1e9);
	--cc-btn-secondary-color: var(--color-dark, #144f25);
	--cc-btn-secondary-border-color: var(--color-light-4, #e6decc);
	--cc-btn-secondary-hover-bg: var(--color-light-4, #e6decc);
	--cc-btn-secondary-hover-color: var(--color-dark, #144f25);
	--cc-btn-secondary-hover-border-color: var(--color-light-5, #dfd6c1);

	/* Schakelaars */
	--cc-toggle-on-bg: var(--color-primary, #2d7a42);
	--cc-toggle-off-bg: var(--color-light-7, #8e8b84);
	--cc-toggle-on-knob-bg: var(--color-white, #ffffff);
	--cc-toggle-off-knob-bg: var(--color-white, #ffffff);
	--cc-toggle-enabled-icon-color: var(--color-primary, #2d7a42);
	--cc-toggle-disabled-icon-color: var(--color-light-7, #8e8b84);
	--cc-toggle-readonly-bg: var(--color-dark-2, #9eb6a5);
	--cc-toggle-readonly-knob-bg: var(--color-white, #ffffff);
	--cc-toggle-readonly-knob-icon-color: var(--color-dark-2, #9eb6a5);

	/* Categorieblokken in het voorkeurenvenster */
	--cc-cookie-category-block-bg: var(--color-light-2, #f9f7f2);
	--cc-cookie-category-block-border: var(--color-light-4, #e6decc);
	--cc-cookie-category-block-hover-bg: var(--color-light-3, #f4f1e9);
	--cc-cookie-category-block-hover-border: var(--color-light-5, #dfd6c1);
	--cc-cookie-category-expanded-block-bg: transparent;
	--cc-cookie-category-expanded-block-hover-bg: var(--color-light-3, #f4f1e9);
	--cc-section-category-border: var(--color-light-4, #e6decc);
	--cc-separator-border-color: var(--color-border-subtle, rgba(0, 0, 0, .10));

	/* Voettekst van het voorkeurenvenster */
	--cc-footer-bg: var(--color-light-1, #fdfdfb);
	--cc-footer-color: var(--color-light-6, #5c5a56);
	--cc-footer-border-color: var(--color-light-4, #e6decc);

	/* Scrollbar */
	--cc-webkit-scrollbar-bg: var(--color-light-3, #f4f1e9);
	--cc-webkit-scrollbar-hover-bg: var(--color-dark-2, #9eb6a5);

	letter-spacing: var(--letterspacing, .02rem);
}

/* --- Banner ---------------------------------------------------------- */

/* Geen padding op de banner zelf: titel, tekst en knoppen brengen hun eigen
   binnenruimte mee, anders staat alles dubbel ingesprongen. */
#cc-main .cm {
	box-shadow: 0 var(--spacing-0-25, .25rem) var(--spacing-2, 2rem) rgba(8, 30, 14, .16);
	border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, .10));
	padding: 0;
}

#cc-main .cm--bar {
	border-left: 0;
	border-right: 0;
	border-radius: 0;
}

#cc-main .cm__title {
	font-size: var(--text-size-h6, 1.25rem);
	line-height: var(--lineheight-h6, 1.45);
	color: var(--color-dark, #144f25);
	font-weight: 700;
}

#cc-main .cm__desc {
	font-size: var(--text-size-small, .9375rem);
	line-height: var(--lineheight-regular, 1.6);
	color: var(--color-text, #2b2f29);
	padding-top: var(--spacing-0-5, .5rem);
}

#cc-main .cm__btns {
	padding-top: var(--spacing-1, 1rem);
	border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, .10));
}

#cc-main .cm__footer {
	font-size: var(--text-size-tiny, .875rem);
	line-height: var(--lineheight-tiny, 1.5);
	color: var(--color-light-6, #5c5a56);
	background: transparent;
	border-top: 0;
	padding: var(--spacing-0-75, .75rem) 0;
}

/* --- Knoppen --------------------------------------------------------- */

#cc-main .cm__btn,
#cc-main .pm__btn {
	font-size: var(--text-size-small, .9375rem);
	font-weight: 600;
	line-height: var(--lineheight-regular, 1.6);
	letter-spacing: var(--letterspacing, .02rem);
	padding: var(--spacing-0-75, .75rem) var(--spacing-1-5, 1.5rem);
	transition: background-color var(--transitions-200ms, 200ms) ease,
		border-color var(--transitions-200ms, 200ms) ease,
		color var(--transitions-200ms, 200ms) ease;
}

#cc-main .cm__btn:active,
#cc-main .pm__btn:active {
	background: var(--color-primary-active, #205830);
	border-color: var(--color-primary-active, #205830);
}

#cc-main .cm__btn--secondary:active,
#cc-main .pm__btn--secondary:active {
	background: var(--color-light-5, #dfd6c1);
	border-color: var(--color-light-5, #dfd6c1);
	color: var(--color-dark, #144f25);
}

/* Zichtbare focus voor toetsenbordbediening, in de huisstijlkleur. */
#cc-main a:focus-visible,
#cc-main button:focus-visible,
#cc-main input:focus-visible,
#cc-main .pm__section--toggle:focus-visible {
	outline: 2px solid var(--color-border-focus, #2d7a42);
	outline-offset: 2px;
	border-radius: var(--border-4, .25rem);
	box-shadow: 0 0 0 4px var(--color-primary-focus, rgba(45, 122, 66, .4));
}

/* --- Links ----------------------------------------------------------- */

#cc-main a,
#cc-main .cc__link {
	color: var(--color-primary, #2d7a42);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var(--transitions-200ms, 200ms) ease;
}

#cc-main a:hover,
#cc-main .cc__link:hover {
	color: var(--color-primary-hover, #266838);
}

/* --- Voorkeurenvenster ----------------------------------------------- */

#cc-main .pm {
	box-shadow: 0 var(--spacing-0-25, .25rem) var(--spacing-2-5, 2.5rem) rgba(8, 30, 14, .22);
}

#cc-main .pm__header {
	padding: var(--spacing-1-5, 1.5rem);
	border-bottom: 1px solid var(--color-border-subtle, rgba(0, 0, 0, .10));
}

#cc-main .pm__title {
	font-size: var(--text-size-h6, 1.25rem);
	line-height: var(--lineheight-h6, 1.45);
	color: var(--color-dark, #144f25);
	font-weight: 700;
}

#cc-main .pm__body {
	padding: var(--spacing-1-25, 1.25rem) var(--spacing-1-5, 1.5rem);
}

#cc-main .pm__section-title {
	font-size: var(--text-size-regular, 1rem);
	font-weight: 600;
	color: var(--color-dark, #144f25);
	border-radius: var(--border-8, .5rem);
}

#cc-main .pm__section-desc {
	font-size: var(--text-size-tiny, .875rem);
	line-height: var(--lineheight-regular, 1.6);
	color: var(--color-light-6, #5c5a56);
}

#cc-main .pm__badge {
	background: var(--color-primary-subtle, #e4eee6);
	color: var(--color-secondary, #144f25);
	font-size: var(--text-size-tiny, .875rem);
	font-weight: 600;
	border-radius: var(--border-rond, 100rem);
	min-width: 0;
	padding: 0 var(--spacing-0-5, .5rem);
}

/* De categoriekop draagt zelf al een vlak; het omhullende blok blijft leeg. */
#cc-main .pm__section--toggle {
	background: transparent;
	border-radius: var(--border-8, .5rem);
}

/* De uitgeklapte inhoud sluit onder de kop aan: boven vierkant, onder dezelfde
   afronding als de kop. Zonder dit erft hij de ronde knop-radius. */
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
	border-radius: 0 0 var(--border-8, .5rem) var(--border-8, .5rem);
}

/* Cookietabel per categorie */
#cc-main .pm__table-caption,
#cc-main .pm__table-th {
	font-size: var(--text-size-tiny, .875rem);
	font-weight: 600;
	color: var(--color-dark, #144f25);
}

#cc-main .pm__table-td {
	font-size: var(--text-size-tiny, .875rem);
	line-height: var(--lineheight-tiny, 1.5);
	color: var(--color-light-6, #5c5a56);
}

/* Knoppenbalk onderin het voorkeurenvenster */
#cc-main .pm__footer {
	padding: var(--spacing-1, 1rem) var(--spacing-1-5, 1.5rem);
	border-top: 1px solid var(--color-border-subtle, rgba(0, 0, 0, .10));
}

/* Links onder de introductietekst */
#cc-main .pm__section:first-child .pm__section-desc a {
	font-size: var(--text-size-tiny, .875rem);
	display: inline-block;
	margin-top: var(--spacing-0-5, .5rem);
}

/* --- Link in de footer van de site ----------------------------------- */

.pk-cc-prefs-link {
	cursor: pointer;
}

/* --- Geblokkeerde YouTube-video's ----------------------------------- */

iframe[data-pk-cc-youtube]:not([src]) {
	display: none !important;
}

.pk-cc-youtube-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-1, 1rem);
	width: 100%;
	min-height: 280px;
	padding: var(--spacing-2, 2rem);
	border-radius: var(--border-12, .75rem);
	background: var(--color-light-2, #f9f7f2);
	color: var(--color-text, #202020);
	text-align: center;
}

.pk-cc-youtube-placeholder[hidden] {
	display: none !important;
}

.pk-cc-youtube-placeholder p {
	margin: 0;
}

.pk-cc-youtube-placeholder button {
	min-height: 42px;
	padding: var(--spacing-0-75, .75rem) var(--spacing-1-25, 1.25rem);
	border: 1px solid var(--color-primary, #38513a);
	border-radius: var(--border-rond, 100rem);
	background: var(--color-primary, #38513a);
	color: var(--color-primary-foreground, #fff);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

[data-pk-cc-background-video-url] {
	position: relative;
	overflow: hidden;
}

[data-pk-cc-background-video-url] > iframe[data-pk-cc-youtube-background] {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: 177.77777778vh;
	min-width: 100%;
	height: 56.25vw;
	min-height: 100%;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* --- Toegankelijkheid ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	#cc-main {
		--cc-modal-transition-duration: 0s;
	}
}