/*
Theme Name: ye Nhaka Chena
Theme URI: https://nhakachena.nl/
Author: MacHelp
Description: Maatwerkthema voor ye Nhaka Chena, Rhodesian Ridgeback-kennel in Kampen. Classic theme zonder buildstep: alle stijlen staan in dit bestand.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: nhakachena
*/

/* ==========================================================================
   1. Designtokens
   Alle kleuren, maten en afstanden staan hier. Wijzig je er een, dan wijzigt
   hij overal mee. Voeg nergens anders in dit bestand losse hexcodes toe.
   ========================================================================== */

:root {
	/* Kleuren - vlakken */
	--nhc-creme: #faf6ef;          /* paginaachtergrond */
	--nhc-wit: #fffdf9;            /* kaarten, formulieren, navigatiebalk */
	--nhc-zand: #ede1cc;           /* secundair vlak */
	--nhc-lijn: #dcceb4;           /* dunne scheidingslijnen op licht */

	/* Kleuren - goudbruin */
	--nhc-goud: #a9752f;           /* primair */
	--nhc-goud-donker: #8a5c1f;    /* links en hover, hoger contrast */
	--nhc-goud-licht: #e9c892;     /* accent op donkere vlakken */

	/* Kleuren - tekst */
	--nhc-espresso: #2b2016;       /* koppen en donkere vlakken */
	--nhc-tekst: #4a3d30;          /* lopende tekst op licht */
	--nhc-khaki: #6b6b4e;          /* bijschriften, subtiel natuuraccent */
	--nhc-fout: #8f3a1f;           /* validatiemeldingen, gedempt terracotta */

	/* Kleuren - op donkere achtergrond */
	--nhc-op-donker: #e8dcc8;
	--nhc-op-donker-fel: #fbf4e8;
	--nhc-op-donker-zacht: #c9bca6;
	--nhc-op-donker-dof: #a79a83;
	--nhc-lijn-donker: #453728;

	/* Typografie */
	--nhc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--nhc-sans: "Bai Jamjuree", system-ui, -apple-system, sans-serif;

	/* Maatvoering */
	--nhc-breedte: 1280px;         /* maximale contentbreedte */
	--nhc-leesbreedte: 65ch;       /* maximale leesbreedte lopende tekst */
	--nhc-gutter: clamp(24px, 4vw, 56px);
	--nhc-sectie: clamp(80px, 12vh, 130px);
	--nhc-sectie-klein: clamp(64px, 9vh, 96px);
	--nhc-kopruimte: 120px;   /* hoogte van de vaste navigatiebalk plus marge */

	/* Uitklapmenu. De uitlijning rekent met deze drie: het paneel schuift
	   zijn eigen binnenruimte naar links, zodat de tekst in de uitklap recht
	   onder het label erboven staat. */
	--nhc-uitklap-rand: 8px;     /* binnenruimte van het paneel */
	--nhc-uitklap-regel: 12px;   /* binnenruimte links in een regel */
	--nhc-uitklap-gat: 14px;     /* zichtbare afstand tot de balk */

	/* Vormtaal */
	--nhc-radius: 6px;
	--nhc-radius-groot: 12px;
	--nhc-radius-pil: 100px;
	--nhc-schaduw: 0 8px 30px rgba(43, 32, 22, 0.14);
	--nhc-schaduw-diep: 0 10px 30px rgba(43, 32, 22, 0.18);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--nhc-creme);
	color: var(--nhc-espresso);
	font-family: var(--nhc-sans);
	font-size: 18px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--nhc-serif);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--nhc-goud-donker);
	text-underline-offset: 3px;
}

a:hover {
	color: var(--nhc-espresso);
}

:focus-visible {
	outline: 2px solid var(--nhc-goud-donker);
	outline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
}

/* Alleen voor schermlezers */
.nhc-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.nhc-sr:focus {
	position: fixed;
	top: 16px;
	left: 16px;
	z-index: 200;
	width: auto;
	height: auto;
	padding: 12px 22px;
	clip: auto;
	background: var(--nhc-wit);
	border-radius: var(--nhc-radius);
	box-shadow: var(--nhc-schaduw);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.nhc-omhullend {
	max-width: var(--nhc-breedte);
	margin: 0 auto;
	padding-right: var(--nhc-gutter);
	padding-left: var(--nhc-gutter);
}

.nhc-sectie {
	padding-top: var(--nhc-sectie);
}

.nhc-sectie--eind {
	padding-bottom: var(--nhc-sectie);
}

/* Springt de bezoeker naar een anker, dan houdt de vaste balk ruimte vrij
   zodat de kop niet onder de navigatie verdwijnt. */
section[id],
[id].nhc-sectie {
	scroll-margin-top: 90px;
}

/* Tweekolomsopzet tekst naast beeld. De verhouding is instelbaar per blok. */
.nhc-duo {
	display: grid;
	grid-template-columns: minmax(0, var(--nhc-duo-links, 58fr)) minmax(0, var(--nhc-duo-rechts, 42fr));
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

/* Valt terug op een kolom als de tweede kolom leeg blijft, bijvoorbeeld
   wanneer er nog geen portretfoto is aangeleverd. */
.nhc-duo--enkel {
	grid-template-columns: minmax(0, 1fr);
}

.nhc-duo--midden {
	align-items: center;
}

@media (max-width: 860px) {
	.nhc-duo {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* ==========================================================================
   4. Typografie in blokken
   ========================================================================== */

.nhc-label {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nhc-goud);
}

.nhc-label--licht {
	color: var(--nhc-goud-licht);
}

.nhc-titel-xl {
	font-size: clamp(34px, 4.4vw, 60px);
	max-width: 18ch;
}

.nhc-titel-l {
	font-size: clamp(36px, 4.6vw, 62px);
}

.nhc-titel-m {
	font-size: clamp(32px, 3.6vw, 46px);
}

.nhc-intro {
	font-size: 22px;
	line-height: 1.6;
	color: var(--nhc-tekst);
}

/* Lopende tekst uit de WP-editor. Alles wat Arlinde typt valt hieronder. */
.nhc-tekst {
	display: flex;
	flex-direction: column;
	gap: 26px;
	max-width: var(--nhc-leesbreedte);
	font-size: 19px;
	color: var(--nhc-tekst);
}

.nhc-tekst > * {
	margin: 0;
}

.nhc-tekst h2 {
	margin-top: 16px;
	font-size: clamp(28px, 3vw, 38px);
	color: var(--nhc-espresso);
}

.nhc-tekst h3 {
	margin-top: 8px;
	font-size: clamp(23px, 2.2vw, 28px);
	color: var(--nhc-espresso);
}

.nhc-tekst strong {
	color: var(--nhc-espresso);
}

.nhc-tekst ul,
.nhc-tekst ol {
	margin: 0;
	padding-left: 1.3em;
}

.nhc-tekst blockquote {
	margin: 0;
	padding-left: 24px;
	border-left: 2px solid var(--nhc-goud);
	font-family: var(--nhc-serif);
	font-size: 23px;
	font-style: italic;
	line-height: 1.5;
	color: var(--nhc-goud-donker);
}

/* Initiaal aan het begin van een lang tekstblok. */
.nhc-tekst--initiaal > p:first-of-type::first-letter {
	float: left;
	padding: 10px 12px 0 0;
	font-family: var(--nhc-serif);
	font-size: 64px;
	line-height: 0.8;
	color: var(--nhc-goud);
}

.nhc-citaat {
	font-family: var(--nhc-serif);
	font-size: 23px;
	font-style: italic;
	line-height: 1.5;
	color: var(--nhc-goud-donker);
}

/* ==========================================================================
   5. Knoppen
   ========================================================================== */

.nhc-knop {
	display: inline-block;
	padding: 17px 36px;
	border: none;
	border-radius: var(--nhc-radius);
	background: var(--nhc-goud);
	color: var(--nhc-wit);
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.nhc-knop:hover,
.nhc-knop:focus-visible {
	background: var(--nhc-goud-donker);
	color: var(--nhc-wit);
}

.nhc-knop--pil {
	border-radius: var(--nhc-radius-pil);
	padding: 12px 26px;
	font-size: 18px;
}

/* Brede knop met losse pijlkop, zoals op de hondenkaarten. */
.nhc-balkknop {
	display: flex;
	align-items: stretch;
	gap: 8px;
	max-width: 400px;
	text-decoration: none;
}

.nhc-balkknop:hover,
.nhc-balkknop:focus-visible {
	opacity: 0.85;
}

.nhc-balkknop__tekst {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 15px 28px;
	border-radius: var(--nhc-radius-pil);
	background: var(--nhc-zand);
	color: var(--nhc-espresso);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nhc-balkknop--primair .nhc-balkknop__tekst {
	background: var(--nhc-goud);
	color: var(--nhc-wit);
}

.nhc-balkknop__pijl {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	border-radius: 18px;
	background: var(--nhc-espresso);
	color: var(--nhc-op-donker-fel);
	font-size: 20px;
}

/* ==========================================================================
   6. Header en navigatie
   ========================================================================== */

/* De balk staat vast bovenin en blijft bij het scrollen in beeld. */
.nhc-header {
	position: fixed;
	top: 26px;
	right: 0;
	left: 0;

	/* Boven het mobiele paneel, zodat de hamburger zichtbaar blijft en naar
	   een kruis kan morphen: dezelfde knop opent en sluit het menu. */
	z-index: 110;
	display: flex;
	justify-content: center;
	padding: 0 var(--nhc-gutter);
}

/* Pagina's die met een beeldkop beginnen laten de balk over dat beeld zweven.
   Alle andere pagina's houden ruimte vrij, anders valt de titel eronder. */
main {
	padding-top: var(--nhc-kopruimte);
}

body.nhc-beeldkop main {
	padding-top: 0;
}

.nhc-header__balk {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 1180px;
	padding: 10px 14px 10px 30px;
	border-radius: var(--nhc-radius-pil);
	background: var(--nhc-wit);
	box-shadow: var(--nhc-schaduw);
}

.nhc-header__logo {
	display: flex;
	align-items: center;
	justify-self: start;
}

.nhc-header__logo img {
	display: block;
	width: auto;
	height: 48px;
	mix-blend-mode: multiply;
}

.nhc-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	font-size: 18px;
	font-weight: 600;
}

/* Alleen het bovenste niveau ligt naast elkaar. Zonder de directe-kindselector
   krijgt de uitklap ook align-items: center en krimpen de rijen tot de breedte
   van hun tekst. */
.nhc-nav > ul {
	display: flex;
	align-items: center;
	gap: 30px;
}

.nhc-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nhc-nav li {
	position: relative;
}

.nhc-nav > ul > li {
	display: flex;
	align-items: center;
}

.nhc-nav a {
	position: relative;
	color: var(--nhc-espresso);
	text-decoration: none;
}

.nhc-nav a:hover {
	color: var(--nhc-goud-donker);
}

/* Nestplanning opent alleen de uitklap en gaat zelf nergens heen. */
.nhc-nav__kop {
	color: var(--nhc-espresso);
	cursor: default;
}

.nhc-nav li:hover > .nhc-nav__kop,
.nhc-nav__kop:focus-visible {
	color: var(--nhc-goud-donker);
}

.nhc-mobielmenu .nhc-nav__kop {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--nhc-lijn);
	font-family: var(--nhc-serif);
	font-size: 28px;
	color: var(--nhc-espresso);
}

.nhc-nav > ul > li > a::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--nhc-goud);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s ease;
}

.nhc-nav > ul > li > a:hover::after,
.nhc-nav > ul > li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* ---- Uitklapmenu ---- */
.nhc-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: calc(-1 * (var(--nhc-uitklap-rand) + var(--nhc-uitklap-regel)));
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: max-content;
	min-width: 180px;
	max-width: 340px;
	margin-top: var(--nhc-uitklap-gat);
	padding: var(--nhc-uitklap-rand);
	border: 1px solid var(--nhc-lijn);
	border-radius: var(--nhc-radius-groot);
	background: var(--nhc-wit);
	box-shadow: var(--nhc-schaduw-diep);

	/* Verbergen met visibility in plaats van display, zodat het paneel kan
	   invloeien en niet abrupt verschijnt. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nhc-nav li:hover > .sub-menu,
.nhc-nav li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
}

/* Onzichtbare brug over het gat tussen de balk en het paneel. Zonder deze
   strook valt de muis onderweg naar beneden buiten het menu en klapt het
   weer dicht. */
.nhc-nav > ul > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	right: -12px;
	left: -12px;
	height: var(--nhc-uitklap-gat);
}

.nhc-nav .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px var(--nhc-uitklap-regel);
	border-radius: 8px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.45;
	white-space: nowrap;
}

.nhc-nav .sub-menu a:hover,
.nhc-nav .sub-menu a:focus-visible {
	background: var(--nhc-zand);
	color: var(--nhc-goud-donker);
}

/* Derde niveau klapt naar rechts uit. Het paneel begint exact op de rechterrand
   van de regel erboven, zodat er geen gat ontstaat waar de hover in wegvalt. */
.nhc-nav .sub-menu .sub-menu {
	top: calc(-1 * var(--nhc-uitklap-rand));
	left: 100%;
	margin-top: 0;
	transform: translateX(-6px);
}

.nhc-nav .sub-menu li:hover > .sub-menu,
.nhc-nav .sub-menu li:focus-within > .sub-menu {
	transform: none;
}

/* Pijltje bij een regel die zelf nog een uitklap heeft. */
.nhc-nav .sub-menu .menu-item-has-children > a::after {
	content: "\203A";
	font-size: 20px;
	line-height: 1;
	color: var(--nhc-goud);
}

.nhc-header__actie {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-self: end;
}

/* Taalkeuze: de huidige taal met vlag, de andere taal in een uitklap die
   eruitziet als die van het menu. Opent bij hover en focus, en op een
   aanraakscherm met een tik via data-open. */
.nhc-taal {
	position: relative;
}

.nhc-taal__knop {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--nhc-lijn);
	border-radius: var(--nhc-radius-pil);
	background: none;
	color: var(--nhc-espresso);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.12em;
	cursor: pointer;
}

.nhc-taal__knop:hover,
.nhc-taal__knop:focus-visible,
.nhc-taal[data-open="waar"] .nhc-taal__knop {
	border-color: var(--nhc-goud);
	color: var(--nhc-goud-donker);
}

.nhc-taal__pijl {
	transition: transform 0.18s ease;
}

.nhc-taal:hover .nhc-taal__pijl,
.nhc-taal[data-open="waar"] .nhc-taal__pijl {
	transform: rotate(180deg);
}

.nhc-vlag {
	flex-shrink: 0;
	width: 20px;
	height: 14px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(43, 32, 22, 0.12);
}

.nhc-taal__lijst {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10;
	min-width: 170px;
	margin: var(--nhc-uitklap-gat) 0 0;
	padding: var(--nhc-uitklap-rand);
	border: 1px solid var(--nhc-lijn);
	border-radius: var(--nhc-radius-groot);
	background: var(--nhc-wit);
	box-shadow: var(--nhc-schaduw-diep);
	list-style: none;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

/* Brug over het gat tussen knop en uitklap, net als bij het menu. */
.nhc-taal::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	height: var(--nhc-uitklap-gat);
}

.nhc-taal:hover .nhc-taal__lijst,
.nhc-taal:focus-within .nhc-taal__lijst,
.nhc-taal[data-open="waar"] .nhc-taal__lijst {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.nhc-taal__lijst a {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 9px var(--nhc-uitklap-regel);
	border-radius: 8px;
	color: var(--nhc-espresso);
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.nhc-taal__lijst a:hover,
.nhc-taal__lijst a:focus-visible {
	background: var(--nhc-zand);
	color: var(--nhc-goud-donker);
}

/* Hamburger. Alleen zichtbaar onder 1024px. */
.nhc-hamburger {
	display: none;
	justify-self: end;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: var(--nhc-radius-pil);
	background: var(--nhc-goud);
	color: var(--nhc-wit);
	cursor: pointer;
}

.nhc-hamburger__icoon {
	display: block;
	overflow: visible;
}

.nhc-hamburger__streep {
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	transform-box: view-box;
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.nhc-hamburger__streep--boven {
	transform-origin: 13px 8px;
}

.nhc-hamburger__streep--midden {
	transform-origin: 13px 13px;
}

.nhc-hamburger__streep--onder {
	transform-origin: 13px 18px;
}

/* Open menu: de bovenste en onderste streep schuiven naar het midden en
   kruisen elkaar, de middelste vervaagt. */
.nhc-hamburger[aria-expanded="true"] .nhc-hamburger__streep--boven {
	transform: translateY(5px) rotate(45deg);
}

.nhc-hamburger[aria-expanded="true"] .nhc-hamburger__streep--midden {
	opacity: 0;
	transform: scaleX(0.3);
}

.nhc-hamburger[aria-expanded="true"] .nhc-hamburger__streep--onder {
	transform: translateY(-5px) rotate(-45deg);
}

/* Mobiel menu: een paneel dat van rechts inschuift over een verdonkerde
   achtergrond. De vertraging op visibility laat het paneel eerst uitschuiven
   voordat het echt verdwijnt. */
.nhc-mobielmenu {
	position: fixed;
	inset: 0;
	z-index: 100;
	visibility: hidden;
	transition: visibility 0s linear 0.4s;
}

.nhc-mobielmenu[data-open="waar"] {
	visibility: visible;
	transition-delay: 0s;
}

.nhc-mobielmenu__waas {
	position: absolute;
	inset: 0;
	background: rgba(43, 32, 22, 0.45);
	opacity: 0;
	transition: opacity 0.35s ease;
}

.nhc-mobielmenu[data-open="waar"] .nhc-mobielmenu__waas {
	opacity: 1;
}

.nhc-mobielmenu__paneel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(86vw, 380px);
	padding: 104px var(--nhc-gutter) 40px;
	background: var(--nhc-creme);
	box-shadow: -20px 0 60px rgba(43, 32, 22, 0.28);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.nhc-mobielmenu[data-open="waar"] .nhc-mobielmenu__paneel {
	transform: none;
}

/* De links komen een tel na het paneel op, dat leest rustiger. */
.nhc-mobielmenu__paneel > ul {
	opacity: 0;
	transform: translateX(16px);
	transition: opacity 0.3s ease 0.12s, transform 0.3s ease 0.12s;
}

.nhc-mobielmenu[data-open="waar"] .nhc-mobielmenu__paneel > ul {
	opacity: 1;
	transform: none;
}

.nhc-mobielmenu__actie {
	margin-top: 32px;
	font-family: var(--nhc-sans);
	font-size: 17px;
	text-align: center;
}

.nhc-mobielmenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nhc-mobielmenu > ul {
	margin-top: 32px;
}

.nhc-mobielmenu a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--nhc-lijn);
	font-family: var(--nhc-serif);
	font-size: 28px;
	color: var(--nhc-espresso);
	text-decoration: none;
}

.nhc-mobielmenu .sub-menu a {
	padding-left: 20px;
	font-size: 20px;
	color: var(--nhc-tekst);
}

.nhc-mobielmenu .sub-menu .sub-menu a {
	padding-left: 40px;
	font-size: 18px;
}

@media (max-width: 1024px) {
	.nhc-nav,
	.nhc-header__actie .nhc-knop {
		display: none;
	}

	/* Logo, taalknop en hamburger. */
	.nhc-header__balk {
		grid-template-columns: 1fr auto auto;
		gap: 12px;
		padding-left: 20px;
	}

	.nhc-hamburger {
		display: flex;
	}
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.nhc-hero {
	position: relative;
	height: 100vh;
	min-height: 640px;
}

.nhc-hero__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nhc-hero__waas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(200deg, rgba(43, 32, 22, 0) 45%, rgba(43, 32, 22, 0.62) 100%);
}

.nhc-hero__inhoud {
	position: absolute;
	right: var(--nhc-gutter);
	bottom: clamp(40px, 7vh, 72px);
	left: var(--nhc-gutter);
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: flex-end;
	justify-content: space-between;
	animation: nhc-opkomst 1s ease-out both;
}

.nhc-hero__woordmerk {
	display: flex;
	flex-direction: column;
	gap: 18px;
	color: var(--nhc-op-donker-fel);
}

.nhc-woordmerk {
	font-family: var(--nhc-serif);
	line-height: 0.98;
}

.nhc-woordmerk__voorvoegsel {
	font-size: clamp(24px, 2.6vw, 38px);
	font-style: italic;
	color: var(--nhc-goud-licht);
}

.nhc-woordmerk__naam {
	font-size: clamp(52px, 7.5vw, 108px);
}

.nhc-hero__slogan {
	max-width: 34ch;
	font-family: var(--nhc-serif);
	font-size: clamp(19px, 1.8vw, 25px);
	font-style: italic;
	line-height: 1.5;
	color: #f3e7d3;
}

@keyframes nhc-opkomst {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Kleine hero voor binnenpagina's. */
/* Alleen padding-top zetten: de shorthand zou de zijmarge van
   .nhc-omhullend wissen en de titel tegen de schermrand plakken. */
.nhc-paginakop {
	padding-top: clamp(40px, 8vh, 80px);
}

.nhc-paginakop__titel {
	font-size: clamp(38px, 5.4vw, 72px);
}

.nhc-paginakop__stamboomnaam {
	margin-top: 10px;
	font-family: var(--nhc-serif);
	font-size: clamp(19px, 2vw, 25px);
	font-style: italic;
	color: var(--nhc-khaki);
}

/* Uitgelichte afbeelding van een gewone pagina, zoals een nestaankondiging.
   Nooit bijgesneden en nooit hoger dan het scherm onder de balk. */
.nhc-paginabeeld {
	display: block;
	width: auto;
	max-height: calc(100svh - var(--nhc-kopruimte) - 40px);
	margin: 0 auto clamp(32px, 5vh, 56px);
	border-radius: var(--nhc-radius-groot);
}

/* ==========================================================================
   8. Beeldbanden en vlakken
   ========================================================================== */

.nhc-band {
	position: relative;
	height: min(88vh, 760px);
}

.nhc-band__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nhc-band__waas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(43, 32, 22, 0.55) 0%, rgba(43, 32, 22, 0) 55%);
}

.nhc-band__inhoud {
	position: absolute;
	bottom: clamp(40px, 8vh, 80px);
	left: var(--nhc-gutter);
	max-width: 620px;
}

.nhc-band__titel {
	font-family: var(--nhc-serif);
	font-size: clamp(34px, 4.4vw, 60px);
	line-height: 1.12;
	color: var(--nhc-op-donker-fel);
}

.nhc-vlak-zand {
	background: var(--nhc-zand);
}

.nhc-vlak-donker {
	position: relative;
	overflow: hidden;
	background: var(--nhc-espresso);
	color: var(--nhc-op-donker);
}

.nhc-vlak-donker__beeld {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	opacity: 0.16;
	filter: sepia(0.5) saturate(0.5);
}

.nhc-vlak-donker__waas {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(43, 32, 22, 0.85) 0%, rgba(43, 32, 22, 0.35) 100%);
}

.nhc-vlak-donker__inhoud {
	position: relative;
	z-index: 2;
}

.nhc-vlak-donker h2 {
	color: var(--nhc-op-donker-fel);
}

.nhc-vlak-donker .nhc-tekst {
	color: var(--nhc-op-donker);
	max-width: none;
}

.nhc-vlak-donker .nhc-tekst strong {
	color: var(--nhc-op-donker-fel);
}

.nhc-vlak-donker a {
	color: var(--nhc-goud-licht);
}

/* Foto met bijschrift ernaast of eronder. */
.nhc-beeld {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nhc-beeld img {
	display: block;
	width: 100%;
	height: var(--nhc-beeld-hoogte, clamp(480px, 66vh, 640px));
	border-radius: var(--nhc-radius);
	object-fit: cover;
}

.nhc-beeld__bijschrift {
	font-size: 15px;
	color: var(--nhc-khaki);
}

.nhc-beeld--plakt {
	position: sticky;
	top: 60px;
}

/* Niet bijsnijden: de hele hond moet in beeld blijven. Maximaal een scherm
   hoog, anders valt de onderkant van dit plakkende beeld buiten beeld. */
.nhc-beeld.nhc-beeld--heel img {
	align-self: flex-start;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 160px);
}

@media (max-width: 860px) {
	.nhc-beeld--plakt {
		position: static;
	}

	.nhc-beeld img {
		height: clamp(320px, 50vh, 460px);
	}
}

/* ==========================================================================
   9. Naamverhaal (de drie Shona-woorden)
   ========================================================================== */

.nhc-woordenlijst {
	display: flex;
	flex-direction: column;
}

.nhc-woordenlijst__item {
	padding: 28px 0;
	border-bottom: 1px solid #4a3a28;
}

.nhc-woordenlijst__item:last-child {
	border-bottom: none;
}

.nhc-woordenlijst__woord {
	font-family: var(--nhc-serif);
	font-size: clamp(34px, 3.4vw, 48px);
	font-style: italic;
	color: var(--nhc-goud-licht);
}

.nhc-woordenlijst__betekenis {
	margin-top: 6px;
	font-size: 17px;
	color: var(--nhc-op-donker-zacht);
}

/* ==========================================================================
   10. Uitroepblok en slotcitaat
   ========================================================================== */

.nhc-uitroep {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(28px, 4vw, 52px);
	align-items: center;
	padding: clamp(36px, 5vw, 56px);
	border-radius: var(--nhc-radius-groot);
	background: var(--nhc-goud-donker);
}

.nhc-uitroep__teken {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(90px, 10vw, 130px);
	height: clamp(90px, 10vw, 130px);
	border-radius: var(--nhc-radius-pil);
	background: var(--nhc-goud);
	color: var(--nhc-op-donker-fel);
	font-family: var(--nhc-serif);
	font-size: clamp(48px, 5.6vw, 72px);
}

.nhc-uitroep__tekst {
	max-width: 68ch;
	font-size: clamp(19px, 1.7vw, 23px);
	line-height: 1.65;
	color: var(--nhc-op-donker-fel);
}

@media (max-width: 640px) {
	.nhc-uitroep {
		grid-template-columns: minmax(0, 1fr);
	}
}

.nhc-slotcitaat {
	padding: clamp(64px, 10vh, 100px) 0;
	text-align: center;
}

.nhc-slotcitaat__streep {
	width: 64px;
	height: 2px;
	margin: 0 auto 40px;
	background: var(--nhc-goud);
}

.nhc-slotcitaat__tekst {
	max-width: 30ch;
	margin: 0 auto;
	font-family: var(--nhc-serif);
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.3;
	color: var(--nhc-goud-donker);
}

/* ==========================================================================
   11. Hondenkaarten
   ========================================================================== */

.nhc-hondkaart {
	display: grid;
	grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
	margin-bottom: clamp(56px, 8vh, 88px);
}

.nhc-hondkaart:last-child {
	margin-bottom: 0;
}

/* Om en om: bij de tweede kaart staat het beeld rechts. */
.nhc-hondkaart--gespiegeld {
	grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
}

.nhc-hondkaart--gespiegeld .nhc-hondkaart__beeld {
	order: 2;
}

.nhc-hondkaart--gespiegeld .nhc-hondkaart__info {
	order: 1;
}

.nhc-hondkaart__beeld img {
	display: block;
	width: 100%;
	height: clamp(400px, 66vh, 660px);
	border-radius: var(--nhc-radius);
	object-fit: cover;
}

.nhc-hondkaart__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nhc-hondkaart__stamboomnaam {
	font-family: var(--nhc-serif);
	font-size: 19px;
	font-style: italic;
	color: var(--nhc-khaki);
}

.nhc-hondkaart__karakter {
	max-width: 48ch;
	margin-top: 10px;
	color: var(--nhc-tekst);
}

.nhc-hondkaart__knoppen {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 22px;
}

@media (max-width: 860px) {
	.nhc-hondkaart,
	.nhc-hondkaart--gespiegeld {
		grid-template-columns: minmax(0, 1fr);
	}

	.nhc-hondkaart--gespiegeld .nhc-hondkaart__beeld {
		order: 0;
	}

	.nhc-hondkaart--gespiegeld .nhc-hondkaart__info {
		order: 0;
	}

	.nhc-hondkaart__beeld img {
		height: clamp(320px, 50vh, 460px);
	}
}

/* ==========================================================================
   12. Gegevenstabel
   ========================================================================== */

.nhc-gegevens {
	margin: 0;
	padding: 0;
}

.nhc-gegevens__rij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--nhc-lijn);
}

.nhc-gegevens__rij:last-child {
	border-bottom: none;
}

.nhc-gegevens dt {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nhc-khaki);
}

.nhc-gegevens dd {
	margin: 0;
	color: var(--nhc-espresso);
}

/* ==========================================================================
   13. Documentenlijst
   Verticaal, over de volle breedte, nooit in kolommen.
   ========================================================================== */

.nhc-documenten {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--nhc-lijn);
}

.nhc-document {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 20px 8px;
	border-bottom: 1px solid var(--nhc-lijn);
	color: var(--nhc-espresso);
	text-decoration: none;
}

.nhc-document:hover,
.nhc-document:focus-visible {
	background: var(--nhc-zand);
	color: var(--nhc-espresso);
}

.nhc-document__icoon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--nhc-radius);
	background: var(--nhc-zand);
	color: var(--nhc-goud-donker);
}

.nhc-document:hover .nhc-document__icoon {
	background: var(--nhc-wit);
}

.nhc-document__label {
	font-size: 18px;
	font-weight: 600;
}

.nhc-document__toelichting {
	font-size: 16px;
	color: var(--nhc-khaki);
}

.nhc-document__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nhc-khaki);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.nhc-document {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.nhc-document__meta {
		grid-column: 2;
		align-items: flex-start;
	}
}

/* ==========================================================================
   14. Galerij
   ========================================================================== */

.nhc-galerij {
	position: relative;
	height: clamp(420px, 62vh, 620px);
	margin: clamp(40px, 7vh, 72px) 0;
}

.nhc-galerij__spoor {
	position: relative;
	height: 100%;
}

.nhc-galerij__dia {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(52vw, 620px);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	transition: transform 0.45s ease, opacity 0.45s ease;
}

/* De foto past zich in het vak in zijn eigen verhouding: liggende en staande
   foto's worden nooit bijgesneden. Hoek en schaduw volgen de foto zelf. */
.nhc-galerij__dia img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	border-radius: var(--nhc-radius);
	box-shadow: var(--nhc-schaduw-diep);
}

.nhc-galerij__knop {
	position: absolute;
	top: 50%;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: none;
	border-radius: var(--nhc-radius-pil);
	background: var(--nhc-wit);
	color: var(--nhc-espresso);
	font-size: 22px;
	cursor: pointer;
	box-shadow: var(--nhc-schaduw);
	transform: translateY(-50%);
}

.nhc-galerij__knop:hover {
	background: var(--nhc-goud);
	color: var(--nhc-wit);
}

.nhc-galerij__knop--vorige {
	left: var(--nhc-gutter);
}

.nhc-galerij__knop--volgende {
	right: var(--nhc-gutter);
}

.nhc-galerij__bijschrift {
	margin-top: 24px;
	text-align: center;
	font-size: 16px;
	color: var(--nhc-khaki);
}

.nhc-galerij__stippen {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
}

.nhc-galerij__stip {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: var(--nhc-radius-pil);
	background: var(--nhc-lijn);
	cursor: pointer;
}

.nhc-galerij__stip[aria-current="true"] {
	background: var(--nhc-goud);
}

/* Zonder JavaScript valt de galerij terug op een net raster. */
.nhc-galerij--raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
	height: auto;
}

.nhc-galerij--raster .nhc-galerij__dia {
	position: static;
	width: 100%;
	height: 340px;
	transform: none;
	opacity: 1;
}

/* ==========================================================================
   15. Nestplanning-teaser
   ========================================================================== */

.nhc-teaser {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	padding: clamp(40px, 6vw, 72px);
	border-radius: var(--nhc-radius-groot);
	background: var(--nhc-zand);
}

.nhc-teaser__status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px;
	border-radius: var(--nhc-radius-pil);
	background: var(--nhc-goud);
	color: var(--nhc-wit);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nhc-teaser__bijgewerkt {
	margin-top: 12px;
	font-size: 15px;
	color: var(--nhc-khaki);
}

.nhc-teaser__paar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 16px;
	align-items: center;
}

.nhc-teaser__paar img {
	width: 100%;
	height: clamp(180px, 26vh, 260px);
	border-radius: var(--nhc-radius);
	object-fit: cover;
}

.nhc-teaser__kruis {
	font-family: var(--nhc-serif);
	font-size: 32px;
	color: var(--nhc-goud);
}

@media (max-width: 860px) {
	.nhc-teaser {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   16. Formulier
   ========================================================================== */

.nhc-formulier {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: clamp(28px, 3vw, 44px);
	border: 1px solid var(--nhc-lijn);
	border-radius: 8px;
	background: var(--nhc-wit);
}

.nhc-formulier__paar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 22px;
}

.nhc-formulier label {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nhc-formulier__labeltekst {
	font-size: 15px;
	font-weight: 600;
}

.nhc-formulier__optioneel {
	font-weight: 400;
	color: var(--nhc-khaki);
}

/* De verstuurknop hoort hier niet bij: die haalt zijn opmaak uit .nhc-knop.
   Zonder de uitzondering wint deze regel op specificiteit. */
.nhc-formulier input:not([type="submit"]),
.nhc-formulier select,
.nhc-formulier textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--nhc-lijn);
	border-radius: var(--nhc-radius);
	background: var(--nhc-creme);
	color: var(--nhc-espresso);
	font: inherit;
	font-size: 17px;
}

.nhc-formulier input[type="submit"] {
	width: auto;
}

.nhc-formulier textarea {
	resize: vertical;
}

/* Contact Form 7 binnen de kaart van het thema. */
.nhc-formulier .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.nhc-formulier .wpcf7-form-control-wrap {
	display: block;
}

.nhc-formulier .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 15px;
	color: var(--nhc-fout);
}

.nhc-formulier .wpcf7-response-output {
	margin: 0;
	padding: 16px 20px;
	border: none;
	border-radius: var(--nhc-radius);
	background: var(--nhc-zand);
	font-size: 17px;
	color: var(--nhc-tekst);
}

.nhc-formulier .wpcf7-form.invalid .wpcf7-response-output,
.nhc-formulier .wpcf7-form.failed .wpcf7-response-output {
	background: #f7e6df;
	color: var(--nhc-fout);
}

.nhc-formulier .wpcf7-spinner {
	margin: 0 0 0 14px;
}

@media (max-width: 640px) {
	.nhc-formulier__paar {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.nhc-footer {
	background: var(--nhc-espresso);
	color: var(--nhc-op-donker);
}

.nhc-footer__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	max-width: var(--nhc-breedte);
	margin: 0 auto;
	padding: 72px var(--nhc-gutter) 40px;
}

.nhc-footer__merk {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.nhc-footer__merk img {
	width: 150px;
	height: auto;
	filter: brightness(1.35) saturate(0.7);
}

.nhc-footer__slogan {
	max-width: 30ch;
	font-family: var(--nhc-serif);
	font-size: 19px;
	font-style: italic;
	line-height: 1.5;
	color: #f0e6d5;
}

.nhc-footer__kop {
	margin-bottom: 6px;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nhc-op-donker-dof);
}

.nhc-footer__kolom {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nhc-footer__kolom ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nhc-footer a {
	color: var(--nhc-op-donker);
	font-size: 16px;
	text-decoration: none;
}

.nhc-footer a:hover {
	color: #ffffff;
}

.nhc-footer__keurmerken {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
}

.nhc-footer__keurmerk {
	display: flex;
	align-items: center;
	padding: 12px 14px;
	border-radius: var(--nhc-radius);
	background: var(--nhc-wit);
}

.nhc-footer__keurmerk img {
	display: block;
	width: auto;
	height: 44px;
}

.nhc-footer__adres {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 16px;
	color: var(--nhc-op-donker-zacht);
}

.nhc-footer__onderrand {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	grid-column: 1 / -1;
	padding-top: 24px;
	border-top: 1px solid var(--nhc-lijn-donker);
	font-size: 15px;
	color: var(--nhc-op-donker-dof);
}

.nhc-footer__onderrand a {
	border-bottom: 1px solid #6b5b45;
	color: var(--nhc-op-donker-dof);
	font-size: 15px;
}

@media (max-width: 860px) {
	.nhc-footer__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* ==========================================================================
   18. Terug naar boven
   ========================================================================== */

.nhc-omhoog {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 60;
	display: none;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: none;
	border-radius: var(--nhc-radius-pil);
	background: var(--nhc-goud);
	color: var(--nhc-op-donker-fel);
	font-size: 22px;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(43, 32, 22, 0.3);
}

.nhc-omhoog[data-zichtbaar="waar"] {
	display: flex;
}

.nhc-omhoog svg {
	width: 18px;
	height: 20px;
	fill: currentColor;
}

.nhc-omhoog:hover {
	background: var(--nhc-goud-donker);
}

/* ==========================================================================
   19. 404
   ========================================================================== */

.nhc-404 {
	padding: clamp(100px, 20vh, 200px) 0;
	text-align: center;
}

.nhc-404__code {
	font-family: var(--nhc-serif);
	font-size: clamp(80px, 14vw, 180px);
	line-height: 1;
	color: var(--nhc-goud);
}

.nhc-404__tekst {
	max-width: 44ch;
	margin: 24px auto 40px;
	color: var(--nhc-tekst);
}

/* ==========================================================================
   20. Hulpklassen
   Kleine, herbruikbare afstanden en varianten. Ze bestaan zodat er geen
   style-attributen in de templates hoeven te staan: alle opmaak hoort hier.
   ========================================================================== */

/* Afstanden onder koppen en bovenschriften. */
.nhc-label--blok {
	display: block;
	margin-bottom: 30px;
}

.nhc-kop-ruim--m {
	margin-bottom: 30px;
}

.nhc-kop-krap {
	margin-bottom: 24px;
}

.nhc-kop-ruim {
	margin-bottom: clamp(48px, 7vh, 72px);
}

.nhc-kop-ruim--xl {
	margin-bottom: clamp(48px, 7vh, 80px);
}

/* Varianten op de tweekolomsopzet. */
.nhc-duo--smal-links {
	--nhc-duo-links: 40fr;
	--nhc-duo-rechts: 60fr;
}

.nhc-duo--portret {
	--nhc-duo-links: 30fr;
	--nhc-duo-rechts: 70fr;
}

/* Binnenruimte binnen een gekleurd vlak. */
.nhc-vlak-binnen {
	padding-top: var(--nhc-sectie-klein);
	padding-bottom: var(--nhc-sectie-klein);
}

.nhc-vlak-binnen--onder {
	padding-bottom: var(--nhc-sectie-klein);
}

.nhc-omhullend--ruimte {
	margin-top: 32px;
}

.nhc-lijstitem {
	margin-bottom: 48px;
}

/* Verticale stapels. */
.nhc-stapel {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.nhc-zijkolom {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.nhc-zijkolom__knoppen {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nhc-contactgegevens {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
	font-size: 17px;
}

/* Tekstvarianten. */
.nhc-lead {
	max-width: 44ch;
	font-size: 19px;
	color: var(--nhc-tekst);
}

.nhc-sectie-intro {
	max-width: 58ch;
	margin-bottom: clamp(48px, 7vh, 72px);
	font-size: 19px;
	color: var(--nhc-tekst);
}

.nhc-dof {
	color: var(--nhc-khaki);
}

.nhc-dof--klein {
	font-size: 15px;
}

.nhc-titel-s {
	font-size: 28px;
}

.nhc-tekst--breed {
	max-width: none;
}

.nhc-citaat--klein {
	font-size: 19px;
}

/* Varianten op bestaande blokken. */
.nhc-band--laag {
	height: min(70vh, 620px);
}

.nhc-beeld--klein {
	--nhc-beeld-hoogte: clamp(240px, 32vh, 320px);
}

.nhc-teaser__titel {
	margin-top: 20px;
}

.nhc-teaser__tekst {
	margin-top: 16px;
	color: var(--nhc-tekst);
}

.nhc-teaser__knop {
	margin-top: 26px;
}

.nhc-formulier .nhc-knop {
	align-self: flex-start;
}

/* De galerij staat als raster in de HTML. Pas als het JavaScript de klasse
   weghaalt, wordt het de coverflow. */
.nhc-galerij--raster .nhc-galerij__spoor {
	display: contents;
}

.nhc-woordenlijst__betekenis {
	margin: 0;
}

/* Uitsnede van een brede foto: welk deel overblijft op een smal scherm. */
.nhc-uitsnede--links {
	object-position: 28% 50%;
}

.nhc-uitsnede--rechts {
	object-position: 72% 50%;
}

/* Een lage band snijdt op brede schermen juist boven en onder af. De kop
   staat meestal bovenin, dus daar de bovenkant van de foto aanhouden. */
.nhc-band--laag .nhc-uitsnede--links {
	object-position: 28% 0;
}

.nhc-band--laag .nhc-uitsnede--rechts {
	object-position: 72% 0;
}