/*
Theme Name: Nordix
Description: Huisstijl van Nordix (kleuren en Inter uit het klantportaal) bovenop Twenty Twenty-Five. Kleuren en lettertypen staan in theme.json; beeld is de zeekaart (tools/zeekaart.py).
Template: twentytwentyfive
Version: 6.30.0
Requires at least: 6.7
Requires PHP: 8.2
License: GNU General Public License v2 or later
Text Domain: nordix
*/

:root {
	--nx-ink-soft: #3d4660;           /* lopende tekst in kaarten: rustiger dan contrast, beter leesbaar dan muted */
	--nx-mark-soft: #e9e6dc;          /* zelfde als --mark-soft in het portal */
	--nx-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
	--nx-radius: 14px;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
::selection { background: var(--wp--preset--color--navy); color: #fff; }

/* ---- Header ------------------------------------------------------------ */
/* One-page: header blijft staan, ankers schuiven soepel en landen onder de header. */
.wp-site-blocks > header { position: sticky; top: 0; z-index: 20; }
.admin-bar .wp-site-blocks > header { top: 32px; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Vlak en blur op een pseudo-element: backdrop-filter op de header zelf maakt hem het containing block
   van het mobiele menu (position: fixed), dat dan niet groter wordt dan de header. */
.nx-header { position: relative; }
.nx-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: rgb(250 249 245 / .88);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
/* Boven een hero is de header bovenaan doorzichtig: de zeekaart loopt eronder door (.nx-hero::before
   begint boven de hero). Pas na ~80 px scrollen komen vlak, blur en lijn erbij. Browsers zonder
   scroll-timeline houden gewoon het vlak. */
@supports (animation-timeline: scroll()) {
	.wp-site-blocks:has(.nx-hero) .nx-header::before {
		animation: nx-header-solid linear both;
		animation-timeline: scroll(root);
		animation-range: 0 80px;
	}
}
@keyframes nx-header-solid {
	from {
		background-color: rgb(240 238 231 / 0);
		border-bottom-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}
/* Tagline naast het logo, gescheiden door de blauwe stip uit het logo. */
.nx-brand { gap: 0.85rem; }
.nx-tagline {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	padding-top: 0.2rem;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}
.nx-tagline::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
@media (max-width: 960px) { .nx-tagline { display: none; } }
.nx-header .wp-block-navigation { font-size: 0.975rem; }
.nx-header .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); }
.nx-header .wp-block-navigation-item:not(.nx-nav-portal) .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-color: var(--wp--preset--color--accent);
}
/* Klantportaal als kleine navy knop, apart gezet van de ankers met een dunne lijn. */
.nx-nav-portal { margin-left: 0.25rem; padding-left: 2rem; border-left: 1px solid rgb(16 47 73 / .16); }
.nx-header .nx-nav-portal .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
	border-radius: 9px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-weight: 600;
	transition: background-color .15s;
}
.nx-header .nx-nav-portal .wp-block-navigation-item__content:hover { background: #0b2236; }
.nx-header .wp-block-navigation-item__content:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 4px; }
.nx-header .nx-nav-portal .wp-block-navigation-item__content:focus-visible { border-radius: 9px; }
/* Na een tik op het hamburgermenu krijgt "Diensten" focus; zonder toetsenbord geen kader (WP zet het op :focus). */
.nx-header .wp-block-navigation-item__content:focus:not(:focus-visible) { outline: none; }
/* Mobiel menu: grote, rustige lijst. Hamburger en sluitknop met een raakvlak van 44 px. */
.nx-header :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) { padding: 10px; margin: -10px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { font-size: 1.35rem; font-weight: 600; }
.wp-block-navigation__responsive-container.is-menu-open .nx-nav-portal { margin: 0.75rem 0 0; padding-left: 0; border-left: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nx-nav-portal .wp-block-navigation-item__content { padding: 0.6rem 1.1rem; }

/* ---- Algemeen ---------------------------------------------------------- */
/* Navy vlak met de zeekaart (assets/img/zeekaart.svg, gemaakt met tools/zeekaart.py). */
.nx-chart {
	background-color: var(--wp--preset--color--navy);
	background-image: url("assets/img/zeekaart.svg");
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--navy-ink);
}
.nx-chart :where(h1, h2, h3) { color: #ffffff; }
.nx-chart a:where(:not(.wp-element-button)) { color: #ffffff; text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 4px; }

:where(h1, h2, h3) a { color: inherit; text-decoration: none; }
:where(h1, h2, h3) a:hover { color: var(--wp--preset--color--accent-text); text-decoration: underline; }

/* Volle-breedte secties en de footer sluiten direct op elkaar aan. */
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
.wp-site-blocks > footer { margin-block-start: 0; }

/* Kaart: zelfde rand als in het portal. */
.is-style-nordix-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--nx-radius);
}

.wp-block-site-logo img { height: auto; }

/* Omlijnde knop: dunne navy rand in plaats van de zware standaardrand. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid rgb(16 47 73 / .35);
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--base); /* dicht: de zeekaart loopt er op smalle schermen achter langs */
	padding: calc(0.75rem - 1px) calc(1.25rem - 1px);
	transition: border-color .15s, background-color .15s;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
}
.wp-element-button { transition: background-color .15s; }

/* Sectiekop met korte toelichting rechts. */
.nx-section-head { margin-bottom: var(--wp--preset--spacing--50); column-gap: 2rem; row-gap: 0.5rem; }
.nx-section-head > * { margin: 0; }
.nx-section-head p { max-width: 34ch; }

/* ---- Homepage --------------------------------------------------------- */
/* Zelfde taal als de hero: grote koppen, veel ruimte, geen kaders. De zeekaart komt terug in de
   hero, de band en contact, steeds rechts en weglopend naar de tekst. */
.nx-map { position: relative; overflow: hidden; isolation: isolate; }
.nx-map::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: url("assets/img/zeekaart-licht.svg") center / cover no-repeat;
	opacity: .7;
	-webkit-mask-image: linear-gradient(to right, transparent 30%, #000 85%);
	mask-image: linear-gradient(to right, transparent 30%, #000 85%);
}
.nx-map.has-navy-background-color::before { background-image: url("assets/img/zeekaart.svg"); opacity: 1; }
.nx-contact::before { transform: scaleY(-1); }
/* Brede schermen: cover blies de kaart op tot 2× (lijnen, cijfers en kruisjes werden grof). Boven 2000 px
   blijft hij 2000 px breed, rechts uitgelijnd; links valt hij toch weg in het masker. */
@media (min-width: 1800px) {
	.nx-map::before, .nx-hero::after, .nx-band::after { background-size: min(100%, 2000px) auto, auto; background-position: right center, 0 0; }
}

/* Hero: dezelfde kaart in accentblauw, alleen zichtbaar in een cirkel rond de muis (assets/js/hero.js). */
.nx-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		url("assets/img/zeekaart-licht-accent.svg") center / cover no-repeat,
		radial-gradient(circle var(--nx-r) at var(--nx-x, 75%) calc(var(--nx-y, 50%) + var(--nx-lift, 0px)), rgb(26 140 204 / .08), transparent 75%);
	opacity: 0; transition: opacity .5s ease;
	-webkit-mask-image: radial-gradient(circle var(--nx-r) at var(--nx-x, 75%) calc(var(--nx-y, 50%) + var(--nx-lift, 0px)), #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%), linear-gradient(to right, transparent 22%, #000 60%);
	mask-image: radial-gradient(circle var(--nx-r) at var(--nx-x, 75%) calc(var(--nx-y, 50%) + var(--nx-lift, 0px)), #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%), linear-gradient(to right, transparent 22%, #000 60%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.nx-hero.is-lit::after { opacity: 1; }
/* Zonder muis staat de lamp klein en zachter op de blauwe punt achter "werk"; bij het binnenkomen
   groeit hij mee naar de cursor. */
@property --nx-r { syntax: "<length>"; inherits: true; initial-value: 260px; }
:is(.nx-hero, .nx-band) { --nx-r: 260px; transition: --nx-r .6s ease; }
:is(.nx-hero, .nx-band).is-rest { --nx-r: 130px; }
:is(.nx-hero, .nx-band).is-rest::after { opacity: .4; }
:is(.nx-hero, .nx-band).is-lit { --nx-r: 260px; }
:is(.nx-hero, .nx-band).is-lit::after { opacity: 1; }

/* Navy band: dezelfde lamp op de navy kaart; rust op de punt achter "beveiliging". */
.nx-band::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		url("assets/img/zeekaart-accent.svg") center / cover no-repeat,
		radial-gradient(circle var(--nx-r) at var(--nx-x, 75%) var(--nx-y, 50%), rgb(26 140 204 / .12), transparent 75%);
	opacity: 0; transition: opacity .5s ease;
	-webkit-mask-image: radial-gradient(circle var(--nx-r) at var(--nx-x, 75%) var(--nx-y, 50%), #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%), linear-gradient(to right, transparent 15%, #000 50%);
	mask-image: radial-gradient(circle var(--nx-r) at var(--nx-x, 75%) var(--nx-y, 50%), #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%), linear-gradient(to right, transparent 15%, #000 50%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* Hero: de kaart is hier voller en loopt een stukje door onder #diensten, waar hij wegvloeit vóór de
   tekst begint (meer ruimte boven #diensten). #diensten ligt erboven (z-index). */
.nx-hero { overflow: visible; }
.nx-hero + .nx-section { position: relative; z-index: 1; padding-top: 10rem !important; }
/* Beide kaarten beginnen 6rem hoger (onder de doorzichtige header door) en moeten exact even groot
   blijven, anders vallen de blauwe lijnen niet over de grijze. De lamp schuift daarom 6rem mee. */
.nx-hero { --nx-lift: 6rem; }
.nx-hero::before, .nx-hero::after { top: calc(-1 * var(--nx-lift)); bottom: -160px; }
.nx-hero::before {
	background-image: url("assets/img/zeekaart-licht-sterk.svg");
	opacity: 1;
	/* Bovenaan (onder de header) iets zachter, zodat het menu leesbaar blijft. De overgang links hangt aan de
	   1140px-kolom (tot 1440 px gelijk aan 24%/66%), zodat de kaart op brede schermen niet achter de kop loopt. */
	-webkit-mask-image: linear-gradient(to right, transparent max(24%, 50% - 374px), #000 min(66%, 50% + 230px)), linear-gradient(to bottom, rgb(0 0 0 / .35), #000 10rem, #000 45%, transparent 100%);
	mask-image: linear-gradient(to right, transparent max(24%, 50% - 374px), #000 min(66%, 50% + 230px)), linear-gradient(to bottom, rgb(0 0 0 / .35), #000 10rem, #000 45%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.nx-hero::after {
	-webkit-mask-image: radial-gradient(circle var(--nx-r) at var(--nx-x, 75%) calc(var(--nx-y, 50%) + var(--nx-lift, 0px)), #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%), linear-gradient(to right, transparent max(15%, 50% - 504px), #000 50%), linear-gradient(to bottom, #000 45%, transparent 100%);
	mask-image: radial-gradient(circle var(--nx-r) at var(--nx-x, 75%) calc(var(--nx-y, 50%) + var(--nx-lift, 0px)), #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%), linear-gradient(to right, transparent max(15%, 50% - 504px), #000 50%), linear-gradient(to bottom, #000 45%, transparent 100%);
}

/* 404: dezelfde hero, maar de kaart stopt aan de onderrand (er komt geen #diensten onder) en het vlak
   vult het scherm tot de footer. */
.nx-hero.nx-404 { min-height: calc(100svh - 22rem); align-content: center; }
.nx-hero.nx-404::before, .nx-hero.nx-404::after { bottom: 0; }
.nx-hero.nx-404 h1 { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.5rem); }

/* De punt achter "werk" in het blauw van de stip in het logo. */
.nx-dot { color: var(--wp--preset--color--accent); }

.nx-hero h1 { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: 750; }
.nx-display { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.75rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 750; margin: 0; }
.nx-lead { max-width: 32ch; color: var(--nx-ink-soft); line-height: 1.5; }
.nx-display + .nx-lead { margin-top: 1.25rem; }
.nx-hero .nx-lead { margin-top: 1.5rem; }
.wp-block-column > .nx-lead { max-width: 40ch; }
/* Smalle alinea's in een constrained 1140px-kolom links houden in plaats van centreren. */
:where(.nx-hero, .nx-section, .nx-contact) > :is(.nx-lead, .nx-display, .nx-body) { margin-left: max(0px, calc((100% - 1140px) / 2)) !important; }

/* Wat we doen: kop en lead (waarom) links, rechts de diensten in twee groepen (Netwerk,
   Cybersecurity) naast elkaar: naam en één regel, met haarlijnen ertussen. */
.nx-body { max-width: 58ch; font-size: 1.125rem; color: var(--nx-ink-soft); line-height: 1.7; }
.nx-body + .nx-body { margin-top: 1.4em; }
.nx-body:last-child { margin-bottom: 0; }
/* Subgrid: kop en de drie regels van beide groepen op dezelfde hoogte, zodat de haarlijnen doorlopen. */
.nx-service-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: 2.5rem; margin-top: 0.6rem; }
.nx-service-groups > *, .nx-service-group > * { margin: 0 !important; }
.nx-service-group { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.nx-services { display: contents; padding: 0; }
.nx-service-head {
	display: flex; align-items: center; gap: 0.65rem;
	padding: 1rem 0 0.6rem; border-top: 2px solid var(--wp--preset--color--navy);
	font-size: 1.375rem; font-weight: 750; letter-spacing: -0.025em; color: var(--wp--preset--color--navy);
}
.nx-service-head::before {
	content: ""; flex: none; width: 1.5rem; height: 1.5rem; background: var(--wp--preset--color--navy);
	-webkit-mask: var(--nx-icon) center / contain no-repeat; mask: var(--nx-icon) center / contain no-repeat;
}
.nx-service-head--netwerk { --nx-icon: url("assets/img/icons/netwerk.svg"); }
.nx-service-head--cybersecurity { --nx-icon: url("assets/img/icons/cybersecurity.svg"); }
.nx-services li { list-style: none; padding: 1rem 0; border-bottom: 1px solid var(--wp--preset--color--line); font-size: 1.0625rem; line-height: 1.55; color: var(--nx-ink-soft); text-wrap: pretty; }
.nx-services li:last-child { border-bottom: 0; }
.nx-services strong { display: block; margin-bottom: 0.2rem; font-size: 1.0625rem; font-weight: 650; color: var(--wp--preset--color--navy); }

/* Partners: kopje en vier vlakken met het logo in navy (masker over het logo, dus één kleur), met de
   rand van de portal-kaart. --nx-logo-h corrigeert optisch: brede woordmerken lager, compacte merken
   hoger; --nx-logo-w = hoogte × beeldverhouding van het bestand. */
.nx-partners { margin-top: var(--wp--preset--spacing--80) !important; }
.nx-partners-head { margin: 0 0 var(--wp--preset--spacing--50); text-align: center; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 750; letter-spacing: -0.035em; color: var(--wp--preset--color--navy); }
.nx-partners-head:has(+ .nx-partners-lead) { margin-bottom: 0.75rem; }
.nx-partners-lead { margin: 0 auto var(--wp--preset--spacing--50) !important; max-width: 40ch; text-align: center; font-size: 1.1875rem; line-height: 1.5; color: var(--nx-ink-soft); text-wrap: balance; }
.nx-partner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 !important; }
.nx-logo {
	position: relative; height: 128px; margin: 0; overflow: hidden; white-space: nowrap; text-indent: 110%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--nx-radius);
}
.nx-logo::before {
	content: ""; position: absolute; inset: 0; margin: auto;
	width: var(--nx-logo-w); height: var(--nx-logo-h); max-width: 76%;
	background: var(--wp--preset--color--navy);
	-webkit-mask: var(--nx-logo) center / contain no-repeat;
	mask: var(--nx-logo) center / contain no-repeat;
}
.nx-logo--fortinet { --nx-logo: url("assets/img/partners/fortinet.svg"); --nx-logo-h: 20px; --nx-logo-w: 166px; }
.nx-logo--ruckus { --nx-logo: url("assets/img/partners/ruckus.svg"); --nx-logo-h: 68px; --nx-logo-w: 128px; }
.nx-logo--cisco { --nx-logo: url("assets/img/partners/cisco.svg"); --nx-logo-h: 46px; --nx-logo-w: 88px; }
.nx-logo--holm-security { --nx-logo: url("assets/img/partners/holm-security.png"); --nx-logo-h: 32px; --nx-logo-w: 142px; }

/* Blauwe band: de kernzin groot, de navy zeekaart rechts. */
.nx-band .nx-band-text {
	max-width: 22ch; margin: 0 !important; color: #fff;
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.08;
}
.nx-band > .nx-band-text { margin-left: max(0px, calc((100% - 1140px) / 2)) !important; }
/* "1 vast aanspreekpunt": de 1 iets groter (Ole, 2026-10-27); line-height 0 zodat de regel niet hoger wordt. */
.nx-band-num { font-size: 1.45em; line-height: 0; letter-spacing: -0.02em; margin-right: .1em; }
.nx-band-text a { color: inherit; text-decoration-color: var(--wp--preset--color--accent); text-decoration-thickness: .07em; text-underline-offset: .14em; white-space: nowrap; }

/* Over ons */
.nx-checks { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--wp--preset--color--line); }
.nx-checks li { position: relative; padding: 0.9rem 0 0.9rem 2.1rem; border-bottom: 1px solid var(--wp--preset--color--line); }
.nx-checks li::before {
	content: ""; position: absolute; left: 0; top: 1.15rem; width: 1.15rem; height: 1.15rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2394ab25' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Contact: open, net als de hero. */
.nx-contact-grid { display: grid; gap: 1.25rem; margin-top: var(--wp--preset--spacing--60) !important; max-width: 26rem; }
.nx-contact-item { border-top: 1px solid rgb(16 47 73 / .22); padding-top: 1rem; }
.nx-contact-item > * { margin: 0; }
.nx-contact-label { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.nx-contact-value { margin-top: 0.3rem !important; color: var(--wp--preset--color--navy); font-weight: 600; font-size: var(--wp--preset--font-size--large); }
.nx-contact-value a { color: inherit; text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 4px; }

/* Positie onder het adres, als een plaatsbepaling op de zeekaart: ring met de blauwe stip. */
.nx-position { margin-top: .6rem !important; }
.nx-position a {
	display: inline-flex; align-items: center; gap: .6rem;
	color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums; white-space: pre; text-decoration: none;
}
.nx-position a::before {
	content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--navy);
	background: radial-gradient(circle, var(--wp--preset--color--accent) 0 3px, transparent 3.5px);
}
.nx-position a:hover { color: var(--wp--preset--color--navy); text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 3px; }

/* Contactformulier (inc/contact.php): velden in twee kolommen, zelfde labels als de contactgegevens. */
/* Rechts naast de contactgegevens, als kaart zoals in het portal. */
.nx-form {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line); border-radius: var(--nx-radius);
	box-shadow: var(--nx-shadow);
}
.nx-form > p { margin: 0; }
.nx-form .nx-form-head, .nx-form-wide, .nx-form-status, .nx-form-foot { grid-column: 1 / -1; }
.nx-form .nx-form-head { margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: 700; color: var(--wp--preset--color--navy); }
.nx-form label { display: block; margin-bottom: .4rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.nx-form :is(input, textarea) {
	width: 100%; box-sizing: border-box; padding: .75rem .9rem;
	font: inherit; font-size: 1rem; color: var(--wp--preset--color--contrast); /* < 16 px: iOS zoomt in bij focus */
	background: #fff;
	border: 1px solid rgb(16 47 73 / .22); border-radius: 9px;
	transition: border-color .15s, box-shadow .15s;
}
.nx-form textarea { min-height: 8rem; resize: vertical; }
.nx-form :is(input, textarea):focus { outline: none; border-color: var(--wp--preset--color--navy); box-shadow: 0 0 0 3px rgb(26 140 204 / .2); }
.nx-form-hp { position: absolute; left: -9999px; }
.nx-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.nx-form-note { margin: 0; max-width: 46ch; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.nx-form-note a, .nx-form-status a { color: inherit; text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 3px; }
.nx-form button { cursor: pointer; border: 0; }
.nx-form-status {
	padding: .9rem 1.1rem; border-radius: 9px; font-weight: 600; color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
}
.nx-form-status.is-fout { border-left-color: #b3261e; }

/* ---- Footer ------------------------------------------------------------ */
/* Navy met de zeekaart rechts, net als de band: sluit de pagina af. */
.nx-footer a { color: #fff; text-decoration: none; }
.nx-footer a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 4px; }
.nx-footer ul { list-style: none; padding-left: 0; margin: 0; line-height: 1.5; }
.nx-footer li + li { margin-top: 0.6rem; }
/* Kaart zachter en verder naar rechts dan in de band: de footer is klein en vol tekst. */
.nx-footer.nx-map::before { opacity: .55; -webkit-mask-image: linear-gradient(to right, transparent 45%, #000 95%); mask-image: linear-gradient(to right, transparent 45%, #000 95%); }
.nx-footer .nx-footer-head { font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: 0; color: var(--wp--preset--color--navy-muted); margin: 0 0 1rem; }
.nx-footer .custom-logo { filter: brightness(0) invert(1); }
.nx-footer .nx-tagline { display: flex; margin-top: 1.1rem; padding: 0; color: var(--wp--preset--color--navy-muted); }
.nx-footer-bottom { margin-top: var(--wp--preset--spacing--70) !important; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .14); color: var(--wp--preset--color--navy-muted); }
.nx-footer-bottom > p { margin: 0; }
.nx-footer-bottom a { color: inherit; }
.nx-footer-bottom a:hover { color: #fff; }

/* Tablet staand / kleine laptop: naast de lead is te weinig ruimte voor twee dienstengroepen
   ("Cybersecurity" brak midden in het woord; op een iPad Pro staand, 1024 px, drie smalle kolommen van
   vier regels). Lead boven, de groepen eronder over de volle breedte. */
@media (min-width: 782px) and (max-width: 1099px) {
	#diensten > .wp-block-columns { flex-wrap: wrap !important; }
	#diensten > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
}

@media (max-width: 781px) {
	/* WP maakt 'large' vloeiend en dus klein op mobiel; de lead moet groter blijven dan .nx-body. */
	.nx-lead.has-large-font-size { font-size: 1.1875rem !important; }
	.nx-body { font-size: 1rem; }
	.nx-map::before { -webkit-mask-image: linear-gradient(to bottom, transparent 35%, #000 100%); mask-image: linear-gradient(to bottom, transparent 35%, #000 100%); }
	/* Contact is gespiegeld (scaleY(-1)), het masker dus ook: omdraaien, anders staat de kaart bovenin
	   achter kop en contactgegevens. */
	.nx-contact::before { -webkit-mask-image: linear-gradient(to top, transparent 35%, #000 100%); mask-image: linear-gradient(to top, transparent 35%, #000 100%); }
	.nx-hero::before, .nx-hero::after { bottom: -120px; }
	.nx-hero + .nx-section { padding-top: var(--wp--preset--spacing--80) !important; }
	/* Hero: kaart alleen rond de knoppen en daaronder, niet achter kop en zin. Gemeten vanaf de onderrand
	   (die ligt 120 px onder de hero), want de hoogte van kop en zin wisselt met de breedte. */
	.nx-hero::before { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 120px, #000 240px, transparent 300px); mask-image: linear-gradient(to top, transparent 0, #000 120px, #000 240px, transparent 300px); }
	.nx-hero.nx-404::before { -webkit-mask-image: linear-gradient(to top, #000 0, #000 120px, transparent 280px); mask-image: linear-gradient(to top, #000 0, #000 120px, transparent 280px); }
}

/* Tablet staand (600–781): genoeg breedte voor naast elkaar, WP stapelt kolommen hier al wel. */
@media (min-width: 600px) and (max-width: 781px) {
	/* Flow-layout geeft elk item na het eerste een marge erboven; in twee kolommen zakt dan de rechter. */
	.nx-contact-grid { grid-template-columns: 1fr 1fr; column-gap: 2rem; row-gap: calc(1.25rem + var(--wp--style--block-gap, 1.5rem)); max-width: none; }
	.nx-contact-grid > * { margin-block-start: 0 !important; }
	.nx-footer .wp-block-columns > .wp-block-column:not(:first-child) { flex-basis: calc(50% - var(--wp--preset--spacing--60) / 2) !important; }
}

/* Telefoon (tablets staand houden twee groepen naast elkaar en het formulier in twee kolommen). */
@media (max-width: 599px) {
	.nx-form { grid-template-columns: 1fr; }
	.nx-service-groups { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--60); }
	.nx-service-group, .nx-services { display: block; }
	.nx-services li { font-size: 1rem; }
	.nx-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nx-logo { height: 104px; }
	/* Knoppen onder elkaar even breed in plaats van twee ongelijke blokken. */
	.nx-hero .wp-block-button { flex: 1 1 100%; }
	.nx-hero .wp-block-button__link { width: 100%; box-sizing: border-box; }
	/* Knoppen staan hier onder elkaar (hoger blok): kaart iets hoger laten doorlopen. */
	.nx-hero::before { -webkit-mask-image: linear-gradient(to top, transparent 0, #000 120px, #000 280px, transparent 350px); mask-image: linear-gradient(to top, transparent 0, #000 120px, #000 280px, transparent 350px); }
	.nx-hero.nx-404::before { -webkit-mask-image: linear-gradient(to top, #000 0, #000 150px, transparent 230px); mask-image: linear-gradient(to top, #000 0, #000 150px, transparent 230px); }
}