/**
 * Alleen voor de site (niet in de editor): paginaskelet, sticky header,
 * menu's, footer en klikgedrag.
 */

html {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Footer altijd onderaan, ook op korte pagina's. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body.admin-bar .wp-site-blocks {
	min-height: calc(100vh - 32px);
}
@media (max-width: 782px) {
	body.admin-bar .wp-site-blocks {
		min-height: calc(100vh - 46px);
	}
}
.kc-main {
	flex: 1 0 auto;
}

/* ---------- Header: sticky, weg bij omlaag scrollen, terug bij omhoog ---------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
	will-change: transform;
}
header.wp-block-template-part.is-hidden {
	transform: translateY(-100%);
}
/* Onder de WordPress-beheerbalk blijven als je bent ingelogd. */
body.admin-bar header.wp-block-template-part {
	top: 32px;
}
body.admin-bar header.wp-block-template-part.is-hidden {
	transform: translateY(calc(-100% - 32px));
}
@media (max-width: 782px) {
	body.admin-bar header.wp-block-template-part {
		top: 46px;
	}
	body.admin-bar header.wp-block-template-part.is-hidden {
		transform: translateY(calc(-100% - 46px));
	}
}
@media (max-width: 600px) {
	/* Hier scrollt de beheerbalk zelf mee weg. */
	body.admin-bar header.wp-block-template-part {
		top: 0;
	}
}

.kc-header {
	position: relative;
	padding: 22px clamp(20px, 4vw, 64px);
	border-bottom: 1px solid var(--kc-zand);
	background: #fff;
}
.kc-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.kc-header .wp-block-site-logo {
	margin: 0;
	line-height: 0;
}
.kc-header .wp-block-site-logo img {
	display: block;
	width: auto;
	height: clamp(44px, 3.8vw, 54px);
}
.kc-header .wp-block-site-title {
	margin: 0;
	font-family: var(--kc-serif);
	font-size: 26px;
	line-height: 1;
}
.kc-header .wp-block-site-title a {
	color: var(--kc-bordeaux);
	text-decoration: none;
}
/* Sitetitel alleen als terugval wanneer er geen logo is ingesteld. */
.kc-header .wp-block-site-logo + .wp-block-site-title {
	display: none;
}

/* Menu-uitvoer van wp_nav_menu() (Weergave > Menu's) */
.kc-primary-nav-list,
.kc-primary-nav-list ul,
.kc-footer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kc-primary-nav-list a {
	color: var(--kc-bordeaux);
	text-decoration: none;
	transition: color 0.2s;
}
.kc-primary-nav-list a:hover {
	color: var(--kc-rood);
}

.kc-menu-toggle {
	display: none;
	height: 44px;
	padding: 0 20px;
	border: 1.5px solid var(--kc-bordeaux);
	border-radius: 999px;
	background: transparent;
	color: var(--kc-bordeaux);
	font: 600 13px 'Open Sans', sans-serif;
	letter-spacing: 0.14em;
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s;
}
.is-menu-open .kc-menu-toggle {
	background: var(--kc-bordeaux);
	color: #fff;
}

@media (min-width: 1181px) {
	.kc-primary-nav-list {
		display: flex;
		align-items: center;
		gap: clamp(14px, 1.6vw, 28px);
	}
	.kc-primary-nav-list > li {
		position: relative;
	}
	.kc-primary-nav-list a {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.kc-primary-nav-list > .current-menu-item > a,
	.kc-primary-nav-list > .current-menu-ancestor > a,
	.kc-primary-nav-list > .current-page-ancestor > a {
		color: var(--kc-rood);
		font-weight: 700;
	}
	.kc-primary-nav-list > .current-menu-item > a::before,
	.kc-primary-nav-list > .current-menu-ancestor > a::before,
	.kc-primary-nav-list > .current-page-ancestor > a::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 999px;
		background: var(--kc-rood);
	}
	.kc-primary-nav-list .sub-menu {
		position: absolute;
		top: 100%;
		left: -20px;
		z-index: 10;
		min-width: 220px;
		padding: 14px 20px;
		border-radius: 0 0 20px 20px;
		background: #fff;
		border: 1px solid var(--kc-zand);
		border-top: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
	}
	.kc-primary-nav-list .sub-menu a {
		padding: 7px 0;
	}
	.kc-primary-nav-list li:hover > .sub-menu,
	.kc-primary-nav-list li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
}

/* ---------- Mobiel menu: sierlijk van boven naar beneden uitklappen ---------- */
@media (max-width: 1180px) {
	.kc-menu-toggle {
		display: block;
	}
	.kc-primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 90;
		display: grid;
		grid-template-rows: 0fr;
		max-height: calc(100vh - 100%);
		max-height: calc(100dvh - 100%);
		background: var(--kc-zand);
		visibility: hidden;
		transition: grid-template-rows 0.65s cubic-bezier(0.22, 0.8, 0.2, 1), visibility 0s 0.65s;
	}
	.is-menu-open .kc-primary-nav {
		grid-template-rows: 1fr;
		visibility: visible;
		transition-delay: 0s;
		overflow-y: auto;
	}
	.kc-primary-nav-list {
		min-height: 0;
		overflow: hidden;
		padding: 0 clamp(20px, 4vw, 64px);
	}
	.kc-primary-nav-list::before,
	.kc-primary-nav-list::after {
		content: "";
		display: block;
		height: 24px;
	}
	.kc-primary-nav-list::after {
		height: 32px;
	}
	.kc-primary-nav-list li {
		opacity: 0;
		transform: translateY(-14px);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
	.is-menu-open .kc-primary-nav-list li {
		opacity: 1;
		transform: none;
		transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.8, 0.2, 1);
		transition-delay: calc(0.12s + var(--kc-i, 0) * 0.045s);
	}
	.kc-primary-nav-list > li:nth-child(1) { --kc-i: 0; }
	.kc-primary-nav-list > li:nth-child(2) { --kc-i: 1; }
	.kc-primary-nav-list > li:nth-child(3) { --kc-i: 2; }
	.kc-primary-nav-list > li:nth-child(4) { --kc-i: 3; }
	.kc-primary-nav-list > li:nth-child(5) { --kc-i: 4; }
	.kc-primary-nav-list > li:nth-child(6) { --kc-i: 5; }
	.kc-primary-nav-list > li:nth-child(7) { --kc-i: 6; }
	.kc-primary-nav-list > li:nth-child(8) { --kc-i: 7; }
	.kc-primary-nav-list > li:nth-child(n + 9) { --kc-i: 8; }
	.kc-primary-nav-list > li > a {
		display: block;
		padding: 6px 0;
		border-bottom: 1px solid rgba(78, 20, 20, 0.12);
		font-family: var(--kc-serif);
		font-size: 34px;
		line-height: 1.3;
		text-transform: uppercase;
	}
	.kc-primary-nav-list > .current-menu-item > a {
		color: var(--kc-rood);
	}
	.kc-primary-nav-list .sub-menu a {
		display: block;
		padding: 8px 0 8px 18px;
		border-bottom: 1px solid rgba(78, 20, 20, 0.08);
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}
}
@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part,
	.kc-primary-nav,
	.kc-primary-nav-list li {
		transition: none !important;
	}
}

/* ---------- Klikgedrag ---------- */
/* Hele rij van de genummerde lijst klikbaar via de knop. */
.kc-row .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 28px;
}
.kc-row:hover .wp-block-button__link {
	background: var(--kc-rood);
}
/* Hele aanbod-kaart klikbaar via de titel. */
.kc-card {
	position: relative;
}
.kc-card .wp-block-post-title a::after,
.kc-feature-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 28px;
}

/* ---------- Blog / overzicht ---------- */
.kc-post-list .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kc-post-list .wp-block-post-template > li {
	padding: 28px 0;
	border-top: 1px solid var(--kc-lijn);
}
.kc-post-list .wp-block-post-title {
	margin: 0 0 8px;
}
.kc-post-list .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.kc-post-list .wp-block-query-pagination {
	margin-top: 32px;
	gap: 16px;
}

/* ---------- Logo: de stier kantelt heel even, alsof hij met zijn hoorns richt ---------- */
/* Stier = linker 37% van het logobeeld; de kopie erbovenop toont alleen de stier,
   het origineel eronder alleen de tekst. Draaipunt = de achterpoten. */
.kc-logo {
	position: relative;
	display: inline-block;
	line-height: 0;
}
.kc-logo > img:first-child {
	clip-path: inset(0 0 0 37%);
}
.kc-logo .kc-logo-bull {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(0 63% 0 0);
	transform-origin: 12% 88%;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: kc-bull-aim 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s 1 both;
	pointer-events: none;
}
a:hover .kc-logo .kc-logo-bull,
a:focus-visible .kc-logo .kc-logo-bull,
.kc-logo:hover .kc-logo-bull {
	animation: none;
	transform: rotate(4deg);
}
@keyframes kc-bull-aim {
	0%,
	100% {
		transform: none;
	}
	35%,
	60% {
		transform: rotate(4deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.kc-logo .kc-logo-bull {
		animation: none;
		transition: none;
	}
}

/* ---------- Scroll-reveal ---------- */
/* html.kc-reveal-on wordt in de <head> gezet (inc/reveal.php); site.js voegt
   .is-revealed toe zodra een element in beeld komt. Selectorlijst = REVEAL in site.js. */
html.kc-reveal-on :is(
.kc-main .kc-section > :not(.kc-quote-band-bg):not(.kc-query):not(.wp-block-query):not(.kc-pillars):not(.kc-steps):not(.kc-facts):not(.kc-post-grid-wrap):not(.kc-grid-3),
.kc-main .kc-post-grid > li,
.kc-main .kc-cards > li,
.kc-main .kc-team-grid > li,
.kc-main .kc-retreat-list > li,
.kc-main .kc-feature-list > li,
.kc-main .kc-pillars > *,
.kc-main .kc-steps > *,
.kc-main .kc-facts > *,
.kc-main .kc-grid-3:not(.kc-section) > *,
.kc-main .kc-post-grid-wrap > .kc-grid-quote
):not(.is-revealed) {
	opacity: 0;
}
.is-revealed {
	animation: kc-reveal 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
	animation-delay: var(--kc-reveal-delay, 0s);
}
@keyframes kc-reveal {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Footer ---------- */
.kc-footer {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: clamp(48px, 6vw, 96px) var(--kc-gutter) 36px;
	background: var(--kc-bordeaux);
	color: #fff;
}
.kc-footer :where(p, figure, ul) {
	margin: 0;
}
.kc-footer a {
	color: inherit;
	text-decoration: none;
}
.kc-footer-top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	align-items: end;
	gap: 36px;
}
.wp-block-image.kc-footer-logo img {
	display: block;
	width: auto;
	height: 52px;
}
.kc-footer-tagline {
	font-family: var(--kc-serif);
	font-style: italic;
	font-size: clamp(30px, 3vw, 46px);
	line-height: 1;
}
.kc-footer-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.kc-footer-link a {
	padding-bottom: 4px;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
	transition: border-color 0.2s;
}
.kc-footer-link a:hover {
	border-color: #fff;
}
.kc-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.kc-footer-name {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.kc-footer-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
}
.kc-footer-credit {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}
.kc-footer-credit::before {
	content: "·";
	margin-right: 24px;
	color: rgba(255, 255, 255, 0.35);
}
.kc-footer .kc-footer-credit a {
	color: #fff;
	padding-bottom: 2px;
	border-bottom: 1.5px solid rgba(255, 255, 255, 0.4);
	transition: border-color 0.2s;
}
.kc-footer .kc-footer-credit a:hover {
	border-color: #fff;
}
@media (max-width: 600px) {
	.kc-footer-credit::before {
		display: none;
	}
}
.kc-footer-nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.kc-footer-nav-list a:hover {
	text-decoration: underline;
}
.wp-block-social-links.kc-socials {
	gap: 10px;
}
.wp-block-social-links.kc-socials .wp-social-link {
	width: 44px;
	height: 44px;
	margin: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	box-sizing: border-box;
	background: none !important;
	color: #fff !important;
	transition: background-color 0.2s, color 0.2s;
}
.wp-block-social-links.kc-socials .wp-social-link:hover {
	background: #fff !important;
	color: var(--kc-bordeaux) !important;
	transform: none;
}
.wp-block-social-links.kc-socials .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}
.wp-block-social-links.kc-socials .wp-social-link svg {
	width: 18px;
	height: 18px;
}