/* Altijd geladen: de sticky hoofdbalk en de topbalk. De rest staat per blok. */
.nnks-hoofdbalk {
	position: sticky;
	top: 0;
	z-index: 20;
}
.nnks-topbalk a {
	color: var(--wp--preset--color--wit);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.nnks-topbalk a:hover { color: var(--wp--preset--color--accent); }
.nnks-logo-groot img { max-height: 90px; width: auto; }
/* Eén logo in de header (22-09-2026, eigenaar): het grote, op een telefoon kleiner. */
@media (max-width: 600px) {
	.nnks-logo-groot img { max-height: 56px; }
}
/* De hamburger zat strak in de hoek; wat lucht eromheen en een klikvlak van 44px. */
.nnks-hoofdbalk .wp-block-navigation__responsive-container-open {
	padding: 0.5rem;
	margin-right: 0.25rem;
}
/* De open overlay: sluitknop en items niet tegen de rand aan. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	padding: 1.5rem 1.5rem 2rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.25rem;
	right: 1.25rem;
	padding: 0.5rem;
}
/* Geen gat tussen de sticky hoofdbalk en de hero: <main> erft de blockGap van
   de template-layout (1.25rem). De hero plakt tegen de balk (eigenaar, 22-09-2026). */
main.wp-block-group { margin-top: 0; }
/* Footer naar het voorbeeld van de oude site (eigenaar, 22-09-2026): foto met
   donkerblauwe overlay, koppen met een dun wit lijntje eronder. */
.nnks-footer__kop::after {
	content: "";
	display: block;
	width: 25%;
	height: 1px;
	margin-top: 0.6rem;
	background: var(--wp--preset--color--wit);
}
.nnks-footer__kop--midden::after { width: 50%; margin-left: auto; margin-right: auto; }
.nnks-footer .wp-block-social-links .wp-social-link svg { width: 30px; height: 30px; }
.nnks-footer .wp-block-button__link { font-size: 1.15rem; padding: 0.6em 2.5em; }
/* Footerfoto per schermbreedte (eigenaar, 22-09-2026): op een telefoon de
   staande portretfoto uit het Cover-blok (IMG_0079), op desktop de liggende
   groepsfoto IMG_2049. Het Cover-blok kan maar één foto dragen; de tweede komt
   hier als achtergrond op de cover zelf, en de <img> van het blok gaat dan uit.
   Wie in de site-editor een andere foto kiest, verandert daarmee de mobiele;
   de desktopfoto staat in dit bestand. */
@media (min-width: 600px) {
	.nnks-footer.wp-block-cover {
		background-image: url("/wp-content/uploads/2022/05/IMG_2049-scaled.jpg");
		background-size: cover;
		background-position: center 30%;
	}
	.nnks-footer.wp-block-cover > img.wp-block-cover__image-background {
		display: none;
	}
}
/* Footer (nieuw), 30-09-2026: drie kolommen NNKS / MEEDOEN / INFORMATIE, de
   sitemap die de klant vroeg. De links staan in een core/list zonder bolletjes.
   Ze moeten wit: theme.json zet `elements.link` op de accentkleur, en die is op
   de donkerblauwe overlay te donker. Een klasseselector wint van die regel
   (WordPress schrijft hem als `:root :where(a…)`, specificiteit 0,1,0), dus
   hier is géén inline kleur of !important nodig - anders dan bij het
   mailto-adres in de eerste kolom, dat die inline stijl uit de oude footer houdt. */
.nnks-footer__links {
	list-style: none;
	padding-left: 0;
	margin-top: 1.25rem;
}
.nnks-footer__links li { margin-bottom: 0.55em; }
.nnks-footer__links a,
.nnks-footer__onderbalk,
.nnks-footer__onderbalk a {
	color: var(--wp--preset--color--wit);
	text-decoration: none;
}
.nnks-footer__links a:hover,
.nnks-footer__links a:focus-visible,
.nnks-footer__onderbalk a:hover,
.nnks-footer__onderbalk a:focus-visible {
	color: var(--wp--preset--color--wit);
	text-decoration: underline;
}
/* Teaserkaartjes en de plaatshouderquote op de nieuwe homepage. De vier
   kaarten even hoog, met de knop onderaan: `height: 100%` op de kaart deed
   niets, want een kolom in core/columns krijgt zijn hoogte uit
   `align-items: stretch` en daar rekent een percentage niet tegenaan. De
   kolom wordt daarom zelf een flex-kolom en de kaart vult hem. */
.wp-block-column:has(> .nnks-teaser) { display: flex; flex-direction: column; }
.nnks-teaser { flex: 1 1 auto; display: flex; flex-direction: column; }
.nnks-teaser > .wp-block-buttons { margin-top: auto; }
.nnks-quote {
	border-left: 4px solid var(--wp--preset--color--accent);
	font-style: italic;
}
/* Profielkaart: een ronde zwart-witfoto die over de linkerbovenhoek van een
   teal blok valt, met daaronder in het blok de naam en een korte tekst. Eén
   vorm voor twee pagina's - de juryleden en de categorieën - zodat de klant een
   kaart in de editor kan dupliceren en alleen de foto, de kop en de tekst hoeft
   te vervangen.

   Alle maatvoering staat hier en niet in de blokattributen: de cirkel moet
   precies zover boven en links uit het blok steken als de binnenruimte van dat
   blok breed is, en dat is één som die op één plek hoort. Kleur en hoekradius
   staan wél als blokattribuut, zodat de editor ze toont en de klant ze kan
   wijzigen. thema.css gaat via add_editor_style() mee het canvas in, dus de
   editor laat dezelfde kaart zien als de site.

   De foto is een gewone core/image. `object-fit: cover` op een vierkant maakt
   er een cirkel van, ook als de klant er later een liggende foto in zet, en
   `filter: grayscale(1)` haalt de kleur eruit - de plaatshouders uit de
   jury-PDF zijn al zwart-wit, een vervanger hoeft dat niet te zijn. */
.nnks-profiel,
.nnks-profielen {
	--nnks-profiel-foto: 132px;
	--nnks-profiel-uit: 52px;      /* hoeveel de cirkel bóven het blok uitsteekt */
	--nnks-profiel-pad: 1.75rem;
}
/* De rij kaarten houdt bovenaan ruimte vrij voor de cirkels die eruit steken.
   Zonder dit loopt de eerste rij over de kop erboven heen, en de tweede rij
   over de kaarten van de eerste. */
.wp-block-columns.nnks-profielen { margin-top: calc(var(--nnks-profiel-uit) + 1.25rem); }
.nnks-profiel {
	position: relative;
	margin-top: var(--nnks-profiel-uit);
	padding: var(--nnks-profiel-pad);
	border-radius: 16px;
}
/* Even hoge kaarten naast elkaar, met dezelfde truc als bij .nnks-teaser:
   `height: 100%` doet in een core/column niets, dus de kolom wordt zelf een
   flex-kolom en de kaart vult hem. */
.wp-block-column:has(> .nnks-profiel) { display: flex; flex-direction: column; }
.nnks-profiel { flex: 1 1 auto; display: flex; flex-direction: column; }
.nnks-profiel > .wp-block-buttons { margin-top: auto; padding-top: 0.6rem; }

/* De foto hangt met negatieve marges uit de linkerbovenhoek. Bewust in de
   normale stroom en niet absoluut: zo begint de tekst vanzelf ónder de cirkel,
   ook als de klant de kaart smaller maakt of er een regel bij typt.

   LET OP: de kaartgroep gebruikt de layout `default` (flow) en niet
   `constrained`. WordPress zet op elk kind van een `is-layout-constrained`-blok
   `margin-left: auto !important; margin-right: auto !important`, en dat doet in
   deze flex-kolom twee dingen tegelijk: het duwt de cirkel naar het midden in
   plaats van naar de linkerhoek, en het laat de kop naar zijn tekstbreedte
   krimpen en centreren. Zet de layout van zo'n kaart dus nooit op constrained. */
.nnks-profiel .nnks-profiel__foto { line-height: 0; }
/* boven: de binnenruimte terug plus de overhang; links: de binnenruimte terug
   plus 12 px, zodat de cirkel écht over de hoek valt en niet alleen erboven
   hangt. Die 12 px blijft binnen de paginamarge, ook op 390 px.

   De selector is met opzet `> .nnks-profiel__foto.wp-block-image`, dus
   specificiteit (0,3,0). Twee regels van WordPress zelf zetten hier
   `margin-block-start: 0` met (0,2,0) - `.wp-block-columns :where(.wp-block)`
   en `:root :where(.is-layout-flow) > :first-child` - en in het editorcanvas
   laden die ná de themastijl. Met een gelijke specificiteit stak de cirkel op
   de site wél en in de editor níét boven de kaart uit. */
.nnks-profiel > .nnks-profiel__foto.wp-block-image {
	margin: calc(-1 * (var(--nnks-profiel-uit) + var(--nnks-profiel-pad))) 0 0.9rem calc(-1 * (var(--nnks-profiel-pad) + 12px));
}
.nnks-profiel .nnks-profiel__foto img {
	display: block;
	width: var(--nnks-profiel-foto);
	height: var(--nnks-profiel-foto);
	max-width: none;
	object-fit: cover;
	border-radius: 50%;
	border: 5px solid var(--wp--preset--color--wit, #fff);
	background-color: var(--wp--preset--color--wit, #fff);
	filter: grayscale(1);
	box-shadow: 0 4px 16px rgba(4, 44, 52, 0.28);
}
.nnks-profiel :where(h2, h3, h4) { margin: 0 0 0.4rem; }
.nnks-profiel p { margin: 0 0 0.7rem; }
.nnks-profiel p:last-of-type { margin-bottom: 0; }
/* Links binnen de kaart staan op een donkere achtergrond; de accentkleur uit
   theme.json leest daar te zwak. */
.nnks-profiel a:not(.wp-element-button) {
	color: var(--wp--preset--color--wit, #fff);
	text-decoration: underline;
}
@media (max-width: 781px) {
	/* Op een telefoon vult het blok de breedte en wordt de cirkel kleiner, zodat
	   hij niet de halve kaart opeet. */
	.nnks-profiel {
		--nnks-profiel-foto: 104px;
		--nnks-profiel-uit: 40px;
		--nnks-profiel-pad: 1.35rem;
	}
	.wp-block-columns.nnks-profielen > .wp-block-column + .wp-block-column { margin-top: 1.5rem; }
}

/* Blokstijl "Niet kopiëren" (core/group): een rem op selecteren en kopiëren,
   geen slot - de bron en de reader-modus van een browser blijven werken. Zo
   staat het ook in de uitleg voor de klant. niet-kopieren.js blokkeert
   copy/cut/contextmenu binnen dit blok; dit is de helft die zonder JS werkt. */
.is-style-niet-kopieren,
.is-style-niet-kopieren * {
	-webkit-user-select: none;
	user-select: none;
}
/* Wat je wél moet kunnen aanklikken en kopiëren blijft gewoon werken. */
.is-style-niet-kopieren a,
.is-style-niet-kopieren input,
.is-style-niet-kopieren textarea {
	-webkit-user-select: auto;
	user-select: auto;
}
/* Secties over de volle breedte sluiten op elkaar aan (eigenaar, 22-09-2026).
   WordPress zet de blockGap uit theme.json (1.25rem) als margin-top tussen
   alle blokken op het hoogste niveau; tussen twee alignfull-secties met een
   eigen achtergrond geeft dat een witte streep. Ook de footer-template-part
   krijgt die marge. Blokken die niet alignfull zijn (gewone tekst op een
   pagina zonder secties) houden hun ruimte. */
.wp-block-post-content > .alignfull { margin-top: 0; }
footer.wp-block-template-part { margin-top: 0; }
/* De reCAPTCHA-badge (Contact Form 7 → Integratie) alleen tonen op de
   contactpagina; elders verborgen (eigenaar, 22-09-2026). Het script laadt
   wél op elke pagina, dat is hoe CF7 het doet; alleen de badge gaat weg.
   1651 is het id van de contactpagina, lokaal en op productie gelijk. */
body:not(.page-id-1651) .grecaptcha-badge { visibility: hidden; }
/* Locaties: een foto van de zaal bovenin elke kaart, altijd 3:2 en over de
   volle breedte - ook als de klant er een staande of smalle foto in zet. */
.nnks-locatie__foto { margin: 0 0 1rem; }
.nnks-locatie__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }