/*! Cakery Header. Instelbare waarden komen als custom properties binnen op
 *  .chdr, zodat dit bestand statisch blijft. Laadt bewust geen fonts. */

.chdr,
.chdr *,
.ckmm,
.ckmm * { box-sizing: border-box; }

.chdr a,
.ckmm a { color: inherit; text-decoration: none; }

/* ---------- De balk ---------- */

.chdr {
	--chdr-bg1: #241C13;
	--chdr-bg2: #1A130B;
	--chdr-cream: #F4EEE2;
	--chdr-gold: #C9BE9E;
	--chdr-line: rgba(216, 204, 166, .28);
	--chdr-cut: 7px;
	--chdr-pad: 18px;
	--chdr-pad-stuck: 10px;
	--chdr-side: 42px;
	--chdr-logo: 72px;
	--chdr-logo-stuck: 50px;
	--chdr-stuck-bg: rgba(26, 19, 11, .92);
	--chdr-blur: 10px;
	--chdr-rule: rgba(201, 190, 158, .18);
	--chdr-ease: cubic-bezier(.2, .7, .3, 1);
	position: relative;
	z-index: 9000;
	width: 100%;
	padding: var(--chdr-pad) 0;
	background: transparent;
	color: var(--chdr-cream);
	font-weight: 300;
	transition: background .45s ease, box-shadow .45s ease, padding .45s ease;
}

/* De admin-balk staat er bovenop; zonder deze offset schuift de header eronder. */
.chdr--sticky {
	position: sticky;
	top: 0;
}

/* Vastgezet, voor een header die los in een pagina staat. De opvuller hieronder
   neemt zijn plek in de flow over. */
.chdr--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.chdr-space {
	--chdr-pad: 18px;
	--chdr-logo: 72px;
	height: calc(var(--chdr-logo) + 2 * var(--chdr-pad));
}

/* Staat de header in een header-template, dan gaat het vastzetten een niveau
   omhoog, naar de omhulling van dat template. Twee redenen. Sticky kan niet op
   de balk zelf: die blijft binnen zijn eigen container en die is daar precies zo
   hoog als de header. En zou de balk zichzelf vastzetten, dan schoof hij over
   een topbar die erboven staat. Nu reist alles samen mee.

   Welke omhulling het wordt hangt af van het thema: Elementor zet er zelf een
   omheen, Rey nog een. De buitenste van de twee wint vanzelf, want de binnenste
   zit dan binnen een ouder die niet meer meescrolt. */
.elementor-location-header:has(.chdr--fixed),
.rey-siteHeader:has(.chdr--fixed) {
	position: sticky;
	top: 0;
	z-index: 9000;
}

/* Met de banner eronderdoor mag er geen ruimte gereserveerd worden; dan moet het
   vast in plaats van plakkend, want alleen dan staat het uit de flow. */
.elementor-location-header:has(.chdr--fixed.chdr--overlap),
.rey-siteHeader:has(.chdr--fixed.chdr--overlap) {
	position: fixed;
	left: 0;
	right: 0;
}

/* De omhulling reist in zijn geheel mee, dus zou een topbar die erboven staat
   ook blijven staan. Die vouwt daarom weg zodra er gescrold wordt: alleen de
   balk zelf blijft over. JS zet enkel het merkje en de klasse; hier gebeurt de
   rest, zodat er niets opgemeten hoeft te worden. */
[data-chdr-above] {
	overflow: hidden;
	max-height: 12rem;
	transition: max-height .5s cubic-bezier(.2, .7, .3, 1), opacity .3s ease;
}

.chdr-wrap-stuck [data-chdr-above] {
	max-height: 0;
	opacity: 0;
}

/* Binnen zo'n omhulling positioneert de balk zichzelf niet meer, en is de
   opvuller overbodig: plakkend blijft in de flow staan en houdt zijn plek al. */
.elementor-location-header .chdr--fixed,
.rey-siteHeader .chdr--fixed {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
}

.elementor-location-header .chdr-space,
.rey-siteHeader .chdr-space {
	display: none;
}

/* De admin-balk staat er bovenop; zonder deze offset schuift alles eronder.
   De :has()-varianten staan apart: in een browser die :has() niet kent maakt
   een ongeldige selector de hele lijst ongeldig, en dan zouden de gewone
   gevallen hun offset ook kwijt zijn. */
.admin-bar .chdr--sticky,
.admin-bar .chdr--fixed { top: var(--wp-admin-bar-height, 32px); }

.admin-bar .elementor-location-header:has(.chdr--fixed),
.admin-bar .rey-siteHeader:has(.chdr--fixed) { top: var(--wp-admin-bar-height, 32px); }

@media screen and (max-width: 782px) {

	.admin-bar .chdr--sticky,
	.admin-bar .chdr--fixed { top: var(--wp-admin-bar-height, 46px); }

	.admin-bar .elementor-location-header:has(.chdr--fixed),
	.admin-bar .rey-siteHeader:has(.chdr--fixed) { top: var(--wp-admin-bar-height, 46px); }
}

.chdr.is-stuck {
	padding: var(--chdr-pad-stuck) 0;
	background: var(--chdr-stuck-bg);
	backdrop-filter: blur(var(--chdr-blur));
	-webkit-backdrop-filter: blur(var(--chdr-blur));
	box-shadow: 0 1px 0 var(--chdr-rule);
}

/* De banner onder de header laten doorlopen. De hoogte volgt uit de eigen
   variabelen, zodat dit klopt zonder dat JS iets hoeft op te meten. */
.chdr--overlap:not(.chdr--fixed) {
	margin-bottom: calc(-1 * (var(--chdr-logo) + 2 * var(--chdr-pad)));
}

/* Altijd donker: voor pagina's zonder banner eronder. */
.chdr--solid {
	padding: var(--chdr-pad-stuck) 0;
	background: linear-gradient(180deg, var(--chdr-bg1), var(--chdr-bg2));
	box-shadow: 0 1px 0 var(--chdr-rule);
}

/* Drie kolommen, niet flexbox met space-between: alleen zo staat het logo
   altijd exact in het midden, hoeveel menu-items er ook links of rechts staan. */
.chdr__in {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding: 0 var(--chdr-side);
}

.chdr--boxed .chdr__in {
	max-width: var(--chdr-max, 1440px);
	margin: 0 auto;
}

.chdr__nav {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chdr__nav--right { justify-content: flex-end; }

.chdr__nav li { position: relative; }

.chdr__nav a {
	position: relative;
	display: block;
	padding-bottom: 4px;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.chdr__nav a::after {
	content: "";
	position: absolute;
	right: 100%;
	bottom: 0;
	left: 0;
	height: var(--chdr-underline, 1px);
	background: var(--chdr-underline-color, var(--chdr-gold));
	transition: right .4s var(--chdr-ease);
}

.chdr__nav a:hover::after,
.chdr__nav a:focus-visible::after { right: 0; }

.chdr__logo {
	display: block;
	justify-self: center;
}

/* De class staat er bewust twee keer. Elementor zet .elementor img op
   height:auto, met precies dezelfde specificiteit als een enkele class; wie
   dan wint hangt af van de volgorde waarin de stylesheets binnenkomen. In
   een header-template komt de onze eerder en verloor het logo zijn maat. */
.chdr__logo.chdr__logo img {
	display: block;
	width: auto;
	height: var(--chdr-logo);
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
	transition: height .45s ease;
}

.chdr.is-stuck .chdr__logo img { height: var(--chdr-logo-stuck); }

.chdr__tools {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 8px;
}

.chdr__icn {
	--c: var(--chdr-cut);
	position: relative;
	display: grid;
	flex: none;
	width: var(--chdr-icn, 40px);
	height: var(--chdr-icn, 40px);
	place-items: center;
	padding: 0;
	background: transparent;
	color: var(--chdr-cream);
	border: none;
	box-shadow: inset 0 0 0 1px var(--chdr-line);
	cursor: pointer;
	transition: background .35s ease, box-shadow .35s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.chdr__icn:hover {
	background: var(--chdr-icn-hover, rgba(244, 238, 226, .12));
	box-shadow: inset 0 0 0 1px var(--chdr-gold);
}

.chdr__icn svg { width: 17px; height: 17px; }

/* Het gouden telvakje. Rey vervangt bij een AJAX-toevoeging alleen het binnenste
   spantje, dus de opmaak van dit vakje blijft staan. */
.chdr__n {
	--c: 4px;
	position: absolute;
	top: -5px;
	right: -5px;
	display: grid;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	place-items: center;
	background: var(--chdr-count-bg, var(--chdr-gold));
	color: var(--chdr-count-ink, #231C13);
	font-size: 10px;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.chdr__n.is-empty { display: none; }

.chdr__acc {
	margin-left: 6px;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.chdr__btn {
	--c: var(--chdr-cut);
	margin-left: 6px;
	padding: 12px 20px;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.chdr__btn--fill {
	background: linear-gradient(135deg, #D8CCA6 0%, #B8AC8A 52%, #CDBF97 100%);
	color: #1B1409;
}

.chdr__btn--line { box-shadow: inset 0 0 0 1px var(--chdr-line); }

.chdr__burger { display: none; }

.chdr :focus-visible {
	outline: 2px solid var(--chdr-gold);
	outline-offset: 2px;
}

/* ---------- Zoeken ---------- */

.chdr__search {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: 0;
	overflow: hidden;
	background: rgba(26, 19, 11, .96);
	backdrop-filter: blur(var(--chdr-blur));
	-webkit-backdrop-filter: blur(var(--chdr-blur));
	box-shadow: 0 1px 0 var(--chdr-rule);
	transition: max-height .45s var(--chdr-ease);
}

.chdr__search.is-on { max-height: 70vh; }

.chdr__searchin {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px var(--chdr-side);
}

.chdr__search input[type="search"] {
	--c: var(--chdr-cut);
	flex: 1;
	padding: 14px 18px;
	background: transparent;
	color: var(--chdr-cream);
	border: none;
	box-shadow: inset 0 0 0 1px var(--chdr-line);
	font-family: inherit;
	font-size: 14px;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.chdr__search input::placeholder { color: rgba(244, 238, 226, .35); }

.chdr__search input:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--chdr-gold);
}

.chdr__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* De resultaten, live terwijl je typt. */
.chdr__res {
	max-height: calc(70vh - 90px);
	overflow-y: auto;
	padding: 0 var(--chdr-side) 18px;
}

.chdr__res:empty { display: none; }

.chdr__hit {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid rgba(216, 204, 166, .12);
}

.chdr__hit.chdr__hit img {
	--c: 5px;
	flex: none;
	width: 48px;
	height: 48px;
	object-fit: cover;
	background: rgba(244, 238, 226, .08);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.chdr__hit b {
	display: block;
	font-size: 13.5px;
	font-weight: 400;
}

.chdr__hit span {
	display: block;
	margin-top: 2px;
	color: var(--chdr-gold);
	font-size: 11.5px;
}

.chdr__hit:hover b { color: var(--chdr-gold); }

.chdr__msg {
	padding: 14px 0 4px;
	color: rgba(244, 238, 226, .55);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.chdr__all {
	display: inline-block;
	margin-top: 12px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(201, 190, 158, .5);
	color: var(--chdr-gold);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* ---------- Mobiel menu ---------- */

.ckmm {
	--ckmm-cream: #F4EEE2;
	--ckmm-soft: rgba(244, 238, 226, .55);
	--ckmm-gold: #C9BE9E;
	--ckmm-gold-deep: #A9A083;
	--ckmm-line: rgba(216, 204, 166, .18);
	--ckmm-ease: cubic-bezier(.2, .7, .3, 1);
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	overflow-y: auto;
	padding: 20px 22px 26px;
	background: linear-gradient(180deg, #241C13, #160F08);
	color: var(--ckmm-cream);
	font-weight: 300;
	transform: translateX(100%);
	transition: transform .55s var(--ckmm-ease), visibility .55s;
}

.ckmm.is-open {
	visibility: visible;
	transform: translateX(0);
}

.ckmm__glow {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 340px;
	background: radial-gradient(600px 300px at 50% 120%, rgba(201, 190, 158, .2), rgba(201, 190, 158, 0) 70%);
	pointer-events: none;
}

.ckmm__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.ckmm__logo {
	display: block;
	width: auto;
	height: 62px;
}

.ckmm__close {
	--c: 7px;
	display: grid;
	flex: none;
	width: 44px;
	height: 44px;
	place-items: center;
	background: rgba(244, 238, 226, .08);
	color: var(--ckmm-cream);
	border: none;
	box-shadow: inset 0 0 0 1px var(--ckmm-line);
	cursor: pointer;
	transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.ckmm__close:hover {
	background: rgba(244, 238, 226, .18);
	box-shadow: inset 0 0 0 1px var(--ckmm-gold);
	transform: rotate(90deg);
}

.ckmm__close svg { width: 17px; height: 17px; }

.ckmm__nav {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.ckmm__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: .62rem 0;
	border-bottom: 1px solid rgba(216, 204, 166, .12);
	font-family: "Myorie", Georgia, serif;
	font-size: 1.85rem;
	font-weight: 400;
	line-height: 1.25;
	opacity: 0;
	transform: translateX(20px);
	transition: color .3s ease;
}

.ckmm__nav a svg {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--ckmm-gold-deep);
	transition: transform .35s var(--ckmm-ease), color .3s ease;
}

.ckmm__nav a:hover { color: var(--ckmm-gold); }

.ckmm__nav a:hover svg {
	color: var(--ckmm-gold);
	transform: translate(3px, -3px);
}

.ckmm.is-open .ckmm__nav a { animation: ckmmIn .55s var(--ckmm-ease) forwards; }

@keyframes ckmmIn { to { opacity: 1; transform: translateX(0); } }

.ckmm.is-open .ckmm__nav li:nth-child(1) a { animation-delay: .10s; }
.ckmm.is-open .ckmm__nav li:nth-child(2) a { animation-delay: .15s; }
.ckmm.is-open .ckmm__nav li:nth-child(3) a { animation-delay: .20s; }
.ckmm.is-open .ckmm__nav li:nth-child(4) a { animation-delay: .25s; }
.ckmm.is-open .ckmm__nav li:nth-child(5) a { animation-delay: .30s; }
.ckmm.is-open .ckmm__nav li:nth-child(6) a { animation-delay: .35s; }
.ckmm.is-open .ckmm__nav li:nth-child(7) a { animation-delay: .40s; }
.ckmm.is-open .ckmm__nav li:nth-child(8) a { animation-delay: .45s; }

.ckmm__foot {
	position: relative;
	margin-top: auto;
	padding-top: 28px;
}

.ckmm__cta {
	--c: 7px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
	padding: 17px 22px;
	background: linear-gradient(135deg, #D8CCA6 0%, #B8AC8A 52%, #CDBF97 100%);
	color: #1B1409;
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: transform .35s var(--ckmm-ease);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.ckmm__cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 252, 242, .6), rgba(255, 255, 255, 0));
	transform: skewX(-18deg);
	transition: left .9s cubic-bezier(.25, .8, .3, 1);
}

.ckmm__cta:hover::after { left: 120%; }
.ckmm__cta:active { transform: scale(.985); }
.ckmm__cta span,
.ckmm__cta svg { position: relative; z-index: 1; }
.ckmm__cta svg { width: 15px; height: 15px; }

.ckmm__meta {
	margin: 16px 0 0;
	color: var(--ckmm-soft);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-align: center;
	text-transform: uppercase;
}

.ckmm :focus-visible {
	outline: 2px solid var(--ckmm-gold);
	outline-offset: 2px;
}

/* Overslaan naar de inhoud, vóór de header in de DOM. */
.chdr-skip {
	position: absolute;
	left: -9999px;
	z-index: 9999;
	padding: 12px 18px;
	background: #241C13;
	color: #F4EEE2;
}

.chdr-skip:focus {
	left: 12px;
	top: 12px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {

	.chdr,
	.chdr-space {
		--chdr-side: 20px;
		--chdr-logo: 56px;
		--chdr-logo-stuck: 44px;
	}

	.chdr__nav,
	.chdr__acc,
	.chdr__btn { display: none; }

	.chdr__burger { display: grid; }

	.chdr__in { grid-template-columns: auto 1fr auto; }
}

@media (max-width: 380px) {
	.ckmm__nav a { font-size: 1.6rem; }
	.ckmm__logo { height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
	.chdr,
	.chdr *,
	.ckmm,
	.ckmm * {
		transition: none !important;
		animation: none !important;
	}

	.ckmm__nav a {
		opacity: 1;
		transform: none;
	}

	/* Het wegvouwen van de topbar staat buiten .chdr, dus dat valt niet onder de
	   regel hierboven. */
	[data-chdr-above] {
		transition: none;
	}
}