/* NN Projects — aanvullingen op de gegenereerde theme.css.
 *
 * theme.css komt letterlijk uit de Claude Design-export en wordt gegenereerd; hier staat
 * alles wat daar niet in hoort omdat het van WordPress komt (de adminbalk) of omdat de
 * export het niet had (echte radio's in plaats van klikbare divs, en een leesbare
 * verborgen tekst voor schermlezers).
 *
 * Wordt na theme.css ingeladen, zodat deze regels erover heen gaan.
 */

/* WordPress tekent witte kaders om onze knoppen en navigatie. Waarom:
 *
 *   html :where([style*="border-color"]) { border-style: solid }
 *
 * staat in de block-library en kijkt of de TEKST "border-color" ergens in het
 * style-attribuut voorkomt. Bij ons staat die tekst er alleen in als animatie-instructie
 * (`transition:color .15s,border-color .15s`). WordPress zet er dan aan alle vier de kanten
 * border-style:solid op, en zonder opgegeven dikte is dat `medium` = 3px in de tekstkleur:
 * een wit kader om elke navigatielink en om elke knop die geen eigen rand heeft.
 *
 * Hieronder zetten we dat terug. Elementen die wél een echte rand hebben, hebben die in hun
 * eigen style-attribuut staan (`border:1px solid ...`) en dat wint van deze regel — hun rand
 * blijft dus gewoon staan, net als de onderrand van de navigatie. Blokinhoud op de
 * prozapagina's blijft buiten schot, want daar mag WordPress zijn eigen gang gaan.
 *
 * De selector heeft specificiteit (0,2,0) en verslaat daarmee de :where()-regel van
 * WordPress, die er nul heeft.
 */
[style*="border-color"]:not(.nnp-proza *) {
	border-style: none;
}

/* De sticky header moet onder de WordPress-adminbalk blijven hangen, niet erachter. */
body.admin-bar header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar header { top: 46px; }
}

/* Tekst die alleen een schermlezer hoeft te horen (bijvoorbeeld "Lees meer over Meterkast"). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Keuzekaarten van het offerteformulier.
 *
 * In de export zijn dit <div>'s die met JavaScript van kleur wisselen: niet bedienbaar met
 * het toetsenbord en de keuze komt nergens terecht. Hier zit er een echte radio in de label
 * (visueel verborgen) en tekent :has() de aangevinkte staat — zelfde beeld, wel werkend.
 */
.nnp-opt:has(input:checked) {
	border-color: #AB0116 !important;
	background: rgba(171, 1, 22, .04) !important;
}
.nnp-opt:has(input:checked) .nnp-opt__dot { border-color: #AB0116 !important; }
.nnp-opt:has(input:checked) .nnp-opt__dot > span { background: #AB0116 !important; }
.nnp-opt:focus-within { outline: 2px solid #AB0116; outline-offset: 2px; }

/* De koppen in de zijkolom van contact en offerte zijn hier <h2> in plaats van de <h3> uit
 * de export: na de <h1> van de pagina is dat het juiste niveau. De mobiele regels in
 * theme.css staan nog op h3, dus die herhalen we hier voor h2. Zonder dit blijft de kop
 * absoluut gepositioneerd terwijl de balk eromheen op mobiel inklapt, en verdwijnt hij
 * achter de rest van het blok. */
@media (max-width: 760px) {
	.nn-asidehead h2 {
		position: static !important;
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 26px 24px 0 !important;
	}
	.nn-asidehead h2::before {
		content: "";
		width: 24px;
		height: 3px;
		background: #AB0116;
		display: inline-block;
	}
}

/* Zichtbare focus voor toetsenbordgebruikers; de export had er geen. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid #AB0116;
	outline-offset: 2px;
}

/* Wie liever geen beweging ziet, krijgt de fotostrip stil. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Prozapagina's (privacybeleid, cookiebeleid) en de 404. */
.nnp-proza { max-width: 760px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 112px); }
.nnp-proza h1 {
	font-family: 'Bebas Neue', Oswald, 'Arial Narrow', sans-serif;
	font-weight: 400; font-size: clamp(38px, 6vw, 64px); line-height: 1;
	letter-spacing: .6px; text-transform: uppercase; color: #201F1F; margin: 0 0 32px;
}
.nnp-proza h2 {
	font-family: 'Bebas Neue', Oswald, 'Arial Narrow', sans-serif;
	font-weight: 400; font-size: 26px; letter-spacing: .4px; text-transform: uppercase;
	color: #201F1F; margin: 48px 0 16px;
}
.nnp-proza h3 { font-size: 17px; font-weight: 700; color: #201F1F; margin: 32px 0 12px; }
.nnp-proza p, .nnp-proza li { color: #444; line-height: 1.7; }
.nnp-proza ul, .nnp-proza ol { padding-left: 22px; }
.nnp-proza li { margin-bottom: 8px; }
/*
 * De cookietabel duwde op 390px de hele pagina 222px breder dan het scherm (gemeten in
 * site-verify, de enige rode regel van de set). Een tabel met vier kolommen tekst krimpt niet
 * verder dan zijn langste woord, dus `width:100%` helpt daar niets: de tabel wint altijd van
 * de viewport en dan schuift de héle pagina mee. Daarom scrollt de tabel voortaan binnen zijn
 * eigen kader in plaats van het document mee te trekken.
 *
 * `display:block` op de tabel zelf en niet een extra <div> eromheen, want de inhoud komt uit de
 * editor: er is geen plek om die wrapper te zetten zonder de HTML van de klant aan te passen.
 * De prijs is dat de tabel dan niet meer automatisch 100% breed is, vandaar `min-width` op de
 * binnenkant zodat hij op een groot scherm het kader gewoon vult.
 */
.nnp-proza table {
	display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
	max-width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px;
}
.nnp-proza table > * { min-width: 100%; }
.nnp-proza th, .nnp-proza td { border: 1px solid #E5E5E5; padding: 10px 14px; text-align: left; vertical-align: top; }
.nnp-proza th { background: #FAFAFA; color: #201F1F; }
@media (max-width: 600px) {
	/* Op een telefoon is 15px in een cel van vier kolommen onleesbaar smal; iets kleiner
	   scheelt een kolomafbreking midden in een woord. */
	.nnp-proza table { font-size: 14px; }
	.nnp-proza th, .nnp-proza td { padding: 8px 10px; }
}

/*
 * De FAQ staat op een grid in plaats van op CSS-kolommen (zie parts/faq.php: kolommen
 * herverdelen zichzelf zodra een item uitklapt). De mobiele terugval naar één kolom stond
 * in de gegenereerde theme.css als `column-count:1` en dat doet op een grid niets meer.
 */
@media (max-width: 760px) {
	.nn-faqcols { grid-template-columns: 1fr !important; }
}

/*
 * Reviewkaarten (parts/reviews.php). Staan niet in de gegenereerde theme.css omdat de
 * Claude Design-export op die plek alleen een placeholder had; zie de kop van dat bestand
 * voor waar de vormtaal vandaan komt.
 */
.nn-revgrid { align-items: stretch; }
@media (max-width: 1080px) {
	/* Drie kaarten naast elkaar wordt onder ~1080px een kolom van vier woorden breed. */
	.nn-revgrid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
	.nn-revgrid { grid-template-columns: 1fr !important; }
	.nn-rev { padding: 26px 22px !important; }
}
/* De sterren komen uit de tekstfont; sommige systemen tekenen ze anders dan de rest van de
   regel en dan springt de hoogte. Vaste line-height houdt de kop van de kaart stil. */
.nn-stars { font-family: 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif; font-variant-emoji: text; }
/* De herkomstlink is bewust grijs en zonder onderstreping (het is bijschrift, geen actie);
   bij hover en toetsenbordfocus komt hij wél naar voren. */
.nn-revsrc:hover, .nn-revsrc:focus-visible { color: #AB0116 !important; border-bottom-color: currentColor !important; }