/*
Theme Name: Kessens
Theme URI: https://www.kessensamsterdam.nl/
Author: H1
Description: Schoon thema voor Kessens Amsterdam. Reproduceert de header van Miami — gesplitst menu met gecentreerd logo en sticky gedrag — zonder ThemePunch Tools of GSAP. WPBakery-content blijft werken via de tpvcaddons-plugin.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kessens
*/

/* ==========================================================================
   Webfonts — meegekopieerd uit miami_child, lokaal gehost
   ==========================================================================
   knockout48 draagt het menu en de koppen. knockout47 is de tweede
   displayface; die werd in Miami alleen door RevSlider-content gebruikt
   (#sliderkoptekst, #sliderbutton) en is nu dus nergens toegepast. Hij
   staat hier klaar zodat je hem kunt inzetten zonder opnieuw te zoeken. */

@font-face {
	font-family: 'knockout48-featherweight';
	src: url('assets/fonts/knockout-48-featherweight-webfont.woff2') format('woff2'),
	     url('assets/fonts/knockout-48-featherweight-webfont.woff') format('woff'),
	     url('assets/fonts/knockout-48-featherweight-webfont.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'knockout47-bantamweight';
	src: url('assets/fonts/knockout-47-bantamweight-webfont.woff2') format('woff2'),
	     url('assets/fonts/knockout-47-bantamweight-webfont.woff') format('woff'),
	     url('assets/fonts/knockout-47-bantamweight-webfont.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	/* Hoog genoeg voor de halve logo-cirkel boven de menuregel: het zegel
	   is 150px en staat gecentreerd op die regel, dus er moet minstens
	   75px boven zitten. 216px zet de menuregel op 108 en de cirkel op
	   33..183 — precies de waarden van Miami.
	   Vastgezet: logo 100px, dus minstens 50px boven de regel. */
	--kes-header-height: 216px;
	/* 100px staat in miami_custom_css (miami_theme_layout_options):
	   .pagescrolled .stuck #header_inner_wrapper... { height: 100px } */
	--kes-header-height-stuck: 100px;
	/* Verticale binnenruimte van de vastgezette balk. De 100px hierboven
	   is Miami's waarde; met deze padding groeit de balk mee zodra
	   inhoud + ruimte daarboven uitkomt. */
	--kes-header-pad-stuck: 20px;
	/* Transparant in rust: de header ligt óver de content, zoals bij
	   Miami. Daar bewees .sticky-wrapper-header { height:0 !important }
	   (style.css:442) dat de header nul ruimte in de flow innam. */
	--kes-header-bg: transparent;
	--kes-header-bg-open: #ffffff;
	--kes-header-fg: #141437;
	--kes-header-fg-hover: rgba(20, 20, 55, 0.55);

	/* Tweede staat. miami_child:188/194 zette de vastgezette header op
	   #141437 met het witte logo; de tekst gaat dan mee naar wit. */
	--kes-header-bg-stuck: #141437;
	--kes-header-fg-stuck: #ffffff;
	--kes-header-fg-stuck-hover: rgba(255, 255, 255, 0.66);
	--kes-header-rule: rgba(20, 20, 56, 0.1);
	--kes-header-shadow: 0 1px 3px rgba(20, 20, 56, 0.08), 0 6px 24px rgba(20, 20, 56, 0.06);
	--kes-submenu-bg: #141437;
	--kes-submenu-fg: #ffffff;
	--kes-nav-gap: 34px;
	--kes-z-header: 10000;
	--kes-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Typografie. Knockout is de displayface van het merk; de body-tekst
	   staat bewust op de systeem-sans — Miami vroeg om Source Sans Pro,
	   maar dat font werd nooit geladen, dus zo heeft de site er altijd
	   uitgezien. Zelf hosten zou het uiterlijk juist veranderen. */
	--kes-font-display: 'knockout48-featherweight', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif;
	--kes-font-display-alt: 'knockout47-bantamweight', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif;
	--kes-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--kes-ink: #141437;
	--kes-ink-soft: #666666;
	/* Miami's content-CSS had hier #33bfd8 — de demo-cyaan van het thema,
	   die niet in dit palet past. */
	--kes-link: #141437;

	/* Body: 19px met de 24px regelhoogte van Miami. Absoluut, niet
	   unitless — zo erven kindelementen met een eigen font-size dezelfde
	   24px regelbox, precies zoals in Miami (.postlink op 13px kreeg daar
	   ook een regelbox van 24px). */
	--kes-font-size-body: 19px;
	--kes-line-height-body: 24px;
}

/* ==========================================================================
   Header shell
   ========================================================================== */

/* Overlay, geen sticky. Sticky staat in de flow, dus het krimpen van
   190px naar 110px duwde alle content 80px omhoog zodra je begon te
   scrollen. Fixed neemt geen ruimte in, dus die sprong is weg — en het
   is tegelijk hoe Miami het deed. */
.kes-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--kes-z-header);
	background-color: var(--kes-header-bg);
	border-bottom: 1px solid transparent;
	transition:
		background-color 0.32s var(--kes-ease),
		border-color 0.32s var(--kes-ease),
		box-shadow 0.32s var(--kes-ease);
}

/* Voorbij de drempel: compacter en donker, met het witte logo */
.kes-header.is-stuck {
	background-color: var(--kes-header-bg-stuck);
	border-bottom-color: transparent;
	box-shadow: var(--kes-header-shadow);
	animation: kes-slide-in 0.5s var(--kes-ease) 0.3s both;
}

.kes-header.is-stuck .kes-nav a,
.kes-header.is-stuck .kes-logo,
.kes-header.is-stuck .kes-lang a,
.kes-header.is-stuck .kes-burger {
	color: var(--kes-header-fg-stuck);
}

.kes-header.is-stuck .kes-nav a:hover,
.kes-header.is-stuck .kes-nav a:focus-visible,
.kes-header.is-stuck .kes-nav .current-menu-item > a {
	color: var(--kes-header-fg-stuck-hover);
}

/* Miami schoof de balk één keer in bij het kruisen van de drempel:
   display:none, dan fromTo(y:-60 → 0) over 0.5s met 0.3s vertraging
   (screen.js:1507-1516). Daarna bleef hij staan. Dat is hier een
   animatie op .is-stuck; 'both' houdt de begintoestand aan tijdens de
   vertraging, zodat de balk die 0.3s onzichtbaar en verschoven is —
   het equivalent van Miami's display:none. */
@keyframes kes-slide-in {
	from {
		transform: translate3d(0, -60px, 0);
		opacity: 0;
	}
	to {
		transform: translate3d(0, 0, 0);
		opacity: 1;
	}
}

.kes-header__inner {
	position: relative;
	max-width: var(--kes-content-width, 1180px);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: var(--kes-nav-gap);
	min-height: var(--kes-header-height);
	transition: min-height 0.32s var(--kes-ease);
}

/* min-height:0 zodat de padding de hoogte bepaalt in plaats van ermee te
   vechten: met een vaste min-height van 100px groeit de balk pas voorbij
   12px padding en schiet hij daarna door. Nu is de hoogte simpelweg
   hoogste element (het logo, 76px) + tweemaal de padding. */
.kes-header.is-stuck .kes-header__inner {
	min-height: 0;
	padding-block: var(--kes-header-pad-stuck);
}

/* ==========================================================================
   Logo — twee varianten, net als Miami's mainlogo / scrolledlogo
   ========================================================================== */

.kes-logo {
	grid-column: 2;
	justify-self: center;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--kes-header-fg);
}

/* miami_child:109-112 — #logo { width:150px; top:-50px }. Het merk is een
   rond zegel dat over de hero heen valt terwijl de header laag blijft.

   De negatieve marge moet SYMMETRISCH: alleen margin-bottom maakt de
   layoutbox wel kleiner, maar zet de zichtbare cirkel onderaan die box.
   Flex centreert dan de box en komt de cirkel ~37px onder de menuregel
   uit. Met gelijke marges boven en onder blijft het zichtbare midden op
   het midden van de box, en valt het samen met de menutekst — zoals bij
   Miami, waar de cirkel 75px boven én onder de menuregel uitsteekt. */
.kes-logo img {
	display: block;
	width: 150px;
	height: auto;
	max-width: none;
	margin-block: -37px;
	transition: width 0.32s var(--kes-ease), margin-block 0.32s var(--kes-ease);
}

/* Geen overhang in de vastgezette staat: die zou de padding opeten en de
   cirkel weer tegen de rand van de balk duwen. Miami's balk was 100px met
   een logo van 100px, dus daar zat vrijwel geen lucht; met 64px logo en
   20px padding wordt de balk ~104px én is de ruimte echt zichtbaar. */
.kes-header.is-stuck .kes-logo img {
	width: 64px;
	margin-block: 0;
}

/* Let op de specificiteit: .kes-logo img is (0,1,1), dus een losse
   .kes-logo__scrolled (0,1,0) verliest en beide logo's blijven staan.
   Daarom hier img meenemen in de selector. */
.kes-logo img.kes-logo__scrolled {
	display: none;
}

.kes-header.is-stuck .kes-logo img.kes-logo__main {
	display: none;
}

.kes-header.is-stuck .kes-logo img.kes-logo__scrolled {
	display: block;
}

/* Tekstueel alternatief zolang er geen logo is ingesteld */
.kes-logo__text {
	font-family: var(--kes-font-display);
	font-size: 32px;
	font-weight: 400;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* ==========================================================================
   Navigatie — links en rechts van het logo
   ========================================================================== */

.kes-nav {
	display: flex;
	align-items: center;
	min-width: 0;
}

.kes-nav--left {
	grid-column: 1;
	justify-content: flex-end;
}

.kes-nav--right {
	grid-column: 3;
	justify-content: flex-start;
	/* ankerpunt voor de taalkiezer erboven */
	position: relative;
}

.kes-nav ul {
	display: flex;
	align-items: center;
	gap: var(--kes-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kes-nav li {
	position: relative;
}

/* Miami had dit als #navigation { font-family } + #navigation a { 22px } */
.kes-nav {
	font-family: var(--kes-font-display);
}

.kes-nav a {
	display: block;
	padding: 8px 0;
	color: var(--kes-header-fg);
	font-size: 22px;
	font-weight: 400;
	/* miami/style.css:643 zette uppercase op #navigation a — op alle
	   niveaus. miami_child liet dat staan en zette alleen 22px,
	   weight normal en letter-spacing 0. */
	text-transform: uppercase;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.18s var(--kes-ease);
}

.kes-nav a:hover,
.kes-nav a:focus-visible {
	color: var(--kes-header-fg-hover);
}

.kes-nav .current-menu-item > a,
.kes-nav .current_page_item > a,
.kes-nav .current-menu-ancestor > a {
	color: var(--kes-header-fg-hover);
}

/* Onderstreping die meegroeit */
.kes-nav > ul > li > a::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: 4px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s var(--kes-ease);
}

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

/* ==========================================================================
   Submenu
   ========================================================================== */

.kes-nav ul ul {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	display: block;
	min-width: 210px;
	padding: 10px 0;
	background: var(--kes-submenu-bg);
	gap: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity 0.2s var(--kes-ease),
		transform 0.2s var(--kes-ease),
		visibility 0.2s;
}

.kes-nav li:hover > ul,
.kes-nav li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

.kes-nav ul ul li {
	width: 100%;
}

.kes-nav ul ul a {
	padding: 9px 22px;
	color: var(--kes-submenu-fg);
	/* De Customizer-CSS (post 1640) overschreef de 12px uit
	   miami/style.css met 22px, weight normal — gelijk aan het
	   hoofdniveau. Mijn eerdere 16px was daarmee onjuist. */
	font-size: 22px;
	font-weight: 400;
	white-space: normal;
}

.kes-nav ul ul a:hover,
.kes-nav ul ul a:focus-visible {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
}

.kes-nav ul ul a::after {
	display: none;
}

/* Derde niveau klapt naar rechts uit */
.kes-nav ul ul ul {
	top: 0;
	left: 100%;
	transform: translateX(6px);
}

.kes-nav ul ul li:hover > ul,
.kes-nav ul ul li:focus-within > ul {
	transform: translateX(0);
}

/* ==========================================================================
   Taalkiezer (WPML)
   ========================================================================== */

/* miami_child:203 zette #lang_sel_list rechtsboven met margin-top:-40px,
   dus bóven de menubalk in plaats van ernaast. Hier met een absolute
   plaatsing, zodat het niet van negatieve marges afhangt. */
.kes-lang {
	/* In de flow direct na het menu, opgetild — zoals miami_child het met
	   float:right + margin-top:-40px deed. Zo blijft hij bij het menu
	   hangen in plaats van tegen de paginarand te plakken. */
	display: flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin: -14px 0 0 20px;
}

/* Met #lang_sel_list erbij is dit (1,1,1): dat verslaat zowel mijn eigen
   .kes-nav ul (0,1,1) — die op mobiel flex-direction:column zet en de
   vlaggen daardoor stapelde — als WPML's language-selector.css (1,0,2). */
.kes-lang #lang_sel_list ul {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kes-lang #lang_sel_list ul li {
	float: none;
	margin: 0;
	padding: 0;
	background: none;
}

.kes-lang a {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.8125rem;
	text-decoration: none;
	color: var(--kes-header-fg);
	opacity: 0.72;
	transition: opacity 0.18s var(--kes-ease);
}

.kes-lang a:hover,
.kes-lang a:focus-visible {
	opacity: 1;
}

.kes-lang img {
	display: block;
	width: 18px;
	height: auto;
	border: 0;
}

/* WPML levert zijn eigen omlijsting mee, in twee generaties:
     style.min.css      .wpml-ls-legacy-list-horizontal { border:1px solid transparent; padding:7px }
     inline in <head>   .wpml-ls-statics-shortcode_actions { border-color:#cdcdcd }
                        .wpml-ls-statics-shortcode_actions a { background-color:#fff }
   Dat gaf het grijze kadertje om de vlaggen en een wit vlak erachter. De
   oudere WPML gebruikt in plaats daarvan #lang_sel_list. Beide hier uit.

   Met .kes-lang ervoor is dit (0,2,0) resp. (0,2,1) en verslaat het WPML's
   eigen (0,1,0) en (0,1,1) — ongeacht dat hun inline CSS later staat. */
.kes-lang .wpml-ls,
.kes-lang .wpml-ls-legacy-list-horizontal,
.kes-lang .wpml-ls-statics-shortcode_actions,
.kes-lang #lang_sel_list {
	border: 0;
	padding: 0;
	margin: 0;
	background: none;
}

.kes-lang .wpml-ls-link,
.kes-lang .wpml-ls-item,
.kes-lang #lang_sel_list a,
.kes-lang #lang_sel_list a:visited {
	border: 0;
	padding: 0;
	background: none;
	background-color: transparent;
}

/* ==========================================================================
   Mobiele navigatie
   ========================================================================== */

.kes-burger {
	display: none;
	grid-column: 3;
	justify-self: end;
	appearance: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kes-header-fg);
	cursor: pointer;
}

.kes-burger__bar,
.kes-burger__bar::before,
.kes-burger__bar::after {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto;
	background: currentColor;
	transition: transform 0.24s var(--kes-ease), opacity 0.18s var(--kes-ease);
}

.kes-burger__bar::before,
.kes-burger__bar::after {
	content: "";
	position: relative;
}

.kes-burger__bar::before { top: -7px; }
.kes-burger__bar::after  { top: 5px; }

.kes-burger[aria-expanded="true"] .kes-burger__bar {
	transform: rotate(45deg);
}

.kes-burger[aria-expanded="true"] .kes-burger__bar::before {
	opacity: 0;
}

.kes-burger[aria-expanded="true"] .kes-burger__bar::after {
	top: -2px;
	transform: rotate(-90deg);
}

@media (max-width: 900px) {
	.kes-header__inner {
		/* Twee kolommen, en expliciete rijen. Zonder die rijen plaatst de
		   browser de items op DOM-volgorde (nav-links, logo, nav-rechts,
		   burger) en staat het menu bóven het logo. */
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto auto;
		column-gap: 16px;
		row-gap: 0;
		/* Geen min-height: die zette de rijen bovenin en liet het logo
		   scheef staan ten opzichte van de hamburger. De padding bepaalt
		   nu de hoogte, en align-content centreert het rijenblok. */
		min-height: 0;
		padding-block: 16px;
		align-content: center;
	}

	.kes-header.is-stuck .kes-header__inner {
		min-height: 0;
		/* Op mobiel minder lucht dan op desktop — daar is de balk smaller
		   en telt elke pixel hoogte zwaarder. */
		padding-block: 14px;
	}

	.kes-logo {
		grid-row: 1;
		grid-column: 1;
		justify-self: start;
	}

	/* Kleiner en zonder overhang op mobiel: 100px met een negatieve marge
	   verstoorde de verticale uitlijning met de hamburger (44px), en was
	   uit proportie op een smal scherm. 68px staat in verhouding en
	   centreert zuiver in dezelfde gridrij. */
	.kes-logo img {
		width: 68px;
		margin-block: 0;
	}

	/* Vastgezet: net als op desktop geen overhang, zodat de padding
	   zichtbaar blijft. 56px + 2×14px geeft een balk van ~84px. */
	.kes-header.is-stuck .kes-logo img {
		width: 56px;
		margin-block: 0;
	}

	.kes-lang {
		position: static;
		top: auto;
		right: auto;
	}

	.kes-burger {
		display: block;
		grid-row: 1;
		grid-column: 2;
		justify-self: end;
	}

	/* Beide menu's onder elkaar in het paneel, op eigen rijen */
	.kes-nav {
		display: none;
		grid-column: 1 / -1;
		border-top: 1px solid var(--kes-header-rule);
	}

	.kes-nav--left {
		grid-row: 2;
	}

	.kes-nav--right {
		grid-row: 3;
	}

	.kes-header.is-open {
		background-color: var(--kes-header-bg-open);
		/* Geen max-height/overflow: dat maakte het paneel een
		   scrollcontainer en sneed het laatste item (de tweede vlag) af.
		   Op mobiel is 100vh bovendien groter dan de zichtbare hoogte,
		   omdat de adresbalk meetelt. Het paneel neemt nu zijn eigen
		   hoogte; groeit het menu ooit voorbij het scherm, dan is dit de
		   plek om 100dvh met overflow terug te zetten. */
	}

	.kes-header.is-open .kes-nav {
		display: block;
	}

	/* De overhang van het logo zou over het open menu vallen */
	.kes-header.is-open .kes-logo img,
	.kes-header.is-open.is-stuck .kes-logo img {
		margin-block: 0;
	}

	/* Open paneel is wit, ook als de header vastgezet is. Zonder deze
	   override blijven tekst en logo wit uit de vastgezette staat —
	   dus wit op wit, en dan lijkt het menu verdwenen. De selectoren
	   hebben .is-open én .is-stuck, dus (0,4,1): dat verslaat de
	   vastgezette regels (0,3,1). */
	.kes-header.is-open.is-stuck .kes-nav a,
	.kes-header.is-open.is-stuck .kes-logo,
	.kes-header.is-open.is-stuck .kes-lang a,
	.kes-header.is-open.is-stuck .kes-burger {
		color: var(--kes-header-fg);
	}

	.kes-header.is-open.is-stuck .kes-nav a:hover,
	.kes-header.is-open.is-stuck .kes-nav a:focus-visible,
	.kes-header.is-open.is-stuck .kes-nav .current-menu-item > a {
		color: var(--kes-header-fg-hover);
	}

	/* En het donkere logo terug in plaats van het witte */
	.kes-header.is-open.is-stuck .kes-logo img.kes-logo__main {
		display: block;
		width: 68px;
	}

	.kes-header.is-open.is-stuck .kes-logo img.kes-logo__scrolled {
		display: none;
	}

	/* De scheidingslijn is een border-top op .kes-nav, en row-gap staat op
	   0 — zonder marge plakt die lijn direct tegen de logo-rij. margin-top
	   maakt ruimte bóven de lijn, padding-top eronder. */
	.kes-header.is-open .kes-nav--left {
		margin-top: 20px;
		padding-top: 12px;
	}

	.kes-header.is-open .kes-nav--right {
		border-top: 0;
		padding-bottom: 12px;
	}

	.kes-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.kes-nav a {
		padding: 13px 0;
	}

	.kes-nav > ul > li > a::after {
		display: none;
	}

	/* Submenu's altijd open uitgeklapt op mobiel — geen hover beschikbaar */
	.kes-nav ul ul {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		min-width: 0;
		padding: 0 0 6px 18px;
		background: none;
	}

	.kes-nav ul ul a {
		padding: 9px 0;
		color: var(--kes-header-fg);
		opacity: 0.75;
	}

	.kes-nav ul ul a:hover,
	.kes-nav ul ul a:focus-visible {
		background: none;
		color: var(--kes-header-fg-hover);
		opacity: 1;
	}

	.kes-lang {
		margin: 0;
		padding: 12px 0;
		border-top: 1px solid var(--kes-header-rule);
	}

}

/* ==========================================================================
   Toegankelijkheid
   ========================================================================== */

.kes-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--kes-submenu-bg);
	color: #ffffff;
	text-decoration: none;
}

.kes-skip:focus {
	left: 8px;
	top: 8px;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--kes-header-fg-hover);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.kes-header,
	.kes-header__inner,
	.kes-logo img,
	.kes-nav a,
	.kes-nav ul ul,
	.kes-burger__bar,
	.kes-burger__bar::before,
	.kes-burger__bar::after {
		transition: none !important;
	}

	/* Het inschuiven is bewegingsgevoelig — direct tonen */
	.kes-header.is-stuck {
		animation: none;
	}
}

/* ==========================================================================
   Content — minimaal, zodat WPBakery-rows vrij baan hebben
   ========================================================================== */

.kes-main {
	min-height: 40vh;
	/* De header ligt erover en neemt geen ruimte in, dus houden we hem
	   hier vrij. De voorpagina is de uitzondering: die begint met een
	   vc_empty_space van 110px die precies die rol vervult, en daar hoort
	   het logo juist over de hero te vallen — net als bij Miami. */
	padding-top: var(--kes-header-height);
}

body.home .kes-main {
	padding-top: 0;
}

.kes-container {
	max-width: var(--kes-content-width, 1180px);
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================================
   Losse post
   ==========================================================================
   Miami rende een losse post met een rechter zijbalk: het body-element
   kreeg de classes 'withsidebar rightside', #content_inner_wrapper werd
   een display:table en #content-container een table-cell van 100%. De
   zijbalk nam ongeveer 300px van de 960px, wat een tekstkolom van ~660px
   opleverde die links begon. Opgemeten in de oude render: x 240..898.

   Die kolombreedte reproduceren we hier, zonder de zijbalk zelf na te
   bouwen — die rende leeg. Wil je die 300px terugpakken voor de tekst,
   dan is dat de max-width hieronder weghalen. */

.kes-post {
	/* content-box, zodat de zijpadding BIJ de contentbreedte komt in
	   plaats van eraf. Miami had die padding op een wrapper van volle
	   breedte (.tp_vc_mw_rowwrapper, 0 40px / 0 20px onder 992px) met de
	   960px-box daarbinnen gecentreerd. Zo begint de tekst op 1440px
	   viewport op x=240 én houdt hij op 390px nog 20px marge. */
	box-sizing: content-box;
	max-width: var(--kes-content-width, 1180px);
	margin-inline: auto;
	padding: 68px 40px 80px;
}

@media (max-width: 992px) {
	.kes-post {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.kes-post__body {
	max-width: 660px;
}

.kes-post__body img {
	height: auto;
}

/* ==========================================================================
   Brug naar de WPBakery-content
   ==========================================================================
   tpvcaddons zet elke row in .tp_vc_mw_rowwrapper > .tp_vc_mw_rowinner >
   .content_max_width. Die laatste heeft in Miami's CSS alleen margin:auto —
   de breedte kwam van #content_inner_wrapper, dat in Miami's page.php stond.
   Dit thema heeft die wrapper niet, dus we geven de breedte hier.
   Stretch-rows breken hier gewoon uit: WPBakery meet tegen document.body. */

.content_max_width {
	max-width: var(--kes-content-width, 1180px);
	margin-inline: auto;
}

/* De carousel en losse afbeeldingen vullen hun kolom */
.vc_images_carousel,
.wpb_single_image img {
	width: 100%;
	max-width: 100%;
}

/* ==========================================================================
   Typografie voor de content
   ==========================================================================
   Overgenomen uit Miami en miami_child: body 15px/24px in #141437,
   h2 op 38px en h3 op 25px in de displayface. Miami liet h1 en h4 in de
   systeem-sans staan terwijl h2/h3 wel de displayface kregen — dat is
   eerder een gat dan een keuze, dus die zijn hier meegetrokken in
   dezelfde schaal. Wil je h1 terug in de body-face: haal hem uit de
   selectorlijst hieronder. */

html {
	color: var(--kes-ink-soft);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	color: var(--kes-ink);
	font-family: var(--kes-font-body);
	font-size: var(--kes-font-size-body);
	line-height: var(--kes-line-height-body);
	font-weight: 400;
}

h1, h2, h3, h4 {
	font-family: var(--kes-font-display);
	color: var(--kes-ink);
	font-weight: 400;
	margin-top: 0;
	text-wrap: balance;
}

h1 { font-size: 48px; line-height: 1.05; }
h2 { font-size: 38px; line-height: 1.1; }
h3 { font-size: 25px; line-height: 1.2; }
h4 { font-size: 20px; line-height: 1.3; }

h5, h6 {
	font-family: var(--kes-font-body);
	color: var(--kes-ink);
	margin-top: 0;
}

h5 { font-size: 17px; line-height: 24px; font-weight: 600; }
h6 { font-size: 15px; line-height: 22px; font-weight: 600; }

/* Op een donkere row-achtergrond zet tpvcaddons .lightondark */
.lightondark h1,
.lightondark h2,
.lightondark h3,
.lightondark h4,
.lightondark h5,
.lightondark h6 {
	color: #ffffff;
}

/* ==========================================================================
   Basis die Bootstrap leverde
   ==========================================================================
   Miami laadde assets/css/bootstrap.min.css en bouwde daarop. Dit thema
   laadt Bootstrap niet, dus de element-resets waar de content op leunt
   staan hier expliciet. Alleen wat de pagina's echt gebruiken: p, ul/ol,
   img, figure en small. Tabellen, hr, code en definitielijsten komen in
   de content niet voor en zijn dus weggelaten.

   De 10px komt uit type.less:58 — (@line-height-computed / 2), en
   @line-height-computed is 20px bij Bootstrap's basis van 14px. */

/* scaffolding.less:19 — zonder dit staat er 8px browsermarge om alles.
   Bij gecentreerde content verdwijnt dat in de auto-marges, maar op de
   pagina's met breedte 100% (Foto's, Contact) geeft het een goot van 16px. */
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: #ffffff;
}

p {
	margin: 0 0 10px;
}

/* type.less:24-28 — h1-h3 kregen margin-bottom (@line-height-computed / 2).
   Miami zette daarna margin-top:0, dus effectief 0 boven en 10 onder. */
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 10px;
}

/* type.less:78 — .small is een Bootstrap-utility en zit in de content
   (.blog_post_meta_line.small heeft geen eigen font-size). */
.small {
	font-size: 85%;
}

/* scaffolding.less — knoppen erven anders de OS-opmaak in plaats van
   de sitetypografie. Het contactformulier heeft een verzendknop. */
button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
	text-transform: none;
	-webkit-appearance: button;
	cursor: pointer;
	line-height: inherit;
}

button[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin-top: 0;
	margin-bottom: 10px;
}

ul ul,
ul ol,
ol ul,
ol ol {
	margin-bottom: 0;
}

/* scaffolding.less:69 — normalize liet figure zonder marges */
figure {
	margin: 0;
}

/* scaffolding.less:76 */
img {
	vertical-align: middle;
}

/* type.less:78 — 12px small op 14px basis = 85% */
small {
	font-size: 85%;
}

/* Links. bootstrap3/less/scaffolding.less:48-50 zette a{text-decoration:none}
   en :hover/:focus op underline; Miami doodde die hover-underline weer met
   een !important. Bootstrap laden we niet terug, dus zonder deze regel valt
   'a' terug op de browserdefault en krijgt elke link een streep. Geen
   onderstreping in welke staat dan ook — ook niet bij :focus. */
a {
	color: var(--kes-link);
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	text-decoration: none;
}

/* Formuliervelden — Miami zette hier Source Sans Pro, dat nooit laadde */
input, select, textarea, button {
	font-family: var(--kes-font-body);
	font-size: var(--kes-font-size-body);
}

/* Utility-classes uit miami_child die met de displayface werken.
   Staan niet op de huidige pagina's, maar wel in opgeslagen
   WPBakery-templates — dus behouden zodat ze niet stilletjes breken. */
.titelknockout {
	font-family: var(--kes-font-display);
	font-size: 18px;
	color: var(--kes-ink);
}

.menutitelknockout {
	font-family: var(--kes-font-display);
	font-size: 28px;
	color: var(--kes-ink);
}