/* --------------------------------------------------
	 FONTS
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600&family=Playfair+Display:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* Lato helper classes (optioneel, maar behouden) */
.lato-thin          { font-family: "Lato", sans-serif; font-weight: 100; font-style: normal; }
.lato-light         { font-family: "Lato", sans-serif; font-weight: 300; font-style: normal; }
.lato-regular       { font-family: "Lato", sans-serif; font-weight: 400; font-style: normal; }
.lato-bold          { font-family: "Lato", sans-serif; font-weight: 700; font-style: normal; }
.lato-black         { font-family: "Lato", sans-serif; font-weight: 900; font-style: normal; }
.lato-thin-italic   { font-family: "Lato", sans-serif; font-weight: 100; font-style: italic; }
.lato-light-italic  { font-family: "Lato", sans-serif; font-weight: 300; font-style: italic; }
.lato-regular-italic{ font-family: "Lato", sans-serif; font-weight: 400; font-style: italic; }
.lato-bold-italic   { font-family: "Lato", sans-serif; font-weight: 700; font-style: italic; }
.lato-black-italic  { font-family: "Lato", sans-serif; font-weight: 900; font-style: italic; }


/* --------------------------------------------------
	 ROOT VARIABELEN
-------------------------------------------------- */
:root {
	--background: #fbf9f7;
	--accent: #3badc6;
	--text: #333;
	--muted: #666;
	--nav-bg: rgba(255,255,255,0.92);
}


/* --------------------------------------------------
	 ALGEMENE TYPOGRAFIE
-------------------------------------------------- */
body {
	font-family: "Lato", sans-serif;
	color: var(--text);
	background: var(--background);
}

/* Basis headings */
h1,
h2,
h3,
h4,
.section-title {
	font-family: "Lato", sans-serif;
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 1px;
}

/* H2 in script-stijl (specifiek) */
h2 {
	font-family: 'Dancing Script', cursive;
	font-size: 2.4rem;
	margin-bottom: 1rem;
}

/* H3 standaard */
h3 {
	font-size: 1.8rem;
	color: var(--text);
	margin-bottom: 0.8rem;
}

p.lead {
	font-family: "Lato", sans-serif;
}

/* Specifieke kleuren / varianten */
#about h2 {
	font-family: "Lato", sans-serif;
	font-style: italic;
	color: var(--text);
}

/* Kleuren utilities */
.color-gold          { color: #cc9966; }
.background-gold     { background-color: #cc9966; }

.color-pink          { color: #f384a2; }
.background-pink     { background-color: #f384a2; }

.color-blue          { color: #3ea8c7; }
.background-blue     { background-color: #ceffff; }

.color-light-purle   { color: #fdcbfc; }
.background-light-purle { background-color: #fdcbfc; }

/* Sectie-titel lijn */
.section-title-line {
	display: inline-block;
	width: 60px;
	height: 3px;
	background: var(--accent);
	border-radius: 3px;
	margin-top: 0.4rem;
	margin-bottom: 2rem;
}

/* Sectie-subtekst */
.section-subtext {
	font-family: "Lato", sans-serif;
	font-weight: 400;
	color: #666;
	font-size: 1.05rem;
	max-width: 700px;
	margin: 0 auto 2.5rem;
}


/* --------------------------------------------------
	 SECTIES: ABOUT / MENU / CONTACT / ALGEMEEN
-------------------------------------------------- */
section {
	padding-top: 110px;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 40px;
}

.section-light {
	background: #fff;
}

.section-neutral {
	/* bewust leeg, achtergrond via parent of utility */
}

.section-beige {
	background: #cd9966;
}
.section-beige h2,
.section-beige p,
.section-beige .section-subtext,
.section-beige .section-title-line {
	color: #fff;
}
.section-beige .section-title-line {
	background: #fff;
}

/* About */
#about {
	color: #cc9966;
}
#about a {
	color: #3ea8c7;
}
#about h3 {
	margin-top: 40px;
}

/* Menu */
#menu {
	text-align: center;
}
#menu h2 {
	text-align: center;
}
#menu h3 {
	text-align: left;
}
#menu p.lead {
	text-align: left;
}

/* Contact */
.contact {
	background: #fff;
}
.contact h2 {
	color: #cd9966;
}
.contact .section-title-line {
	background-color: #cd9966;
}

/* Formulieren */
.form-control {
	border-radius: 10px;
	border: 1px solid #ddd;
	padding: 12px;
}


/* --------------------------------------------------
	 OVERLAY (INTRO)
-------------------------------------------------- */
#intro-overlay {
	position: fixed;
	inset: 0;
	background: var(--background);
	z-index: 2000;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: fadeIn 0.2s ease;
}

#intro-overlay.overlay-hidden {
	opacity: 0;
	pointer-events: none;
}

.overlay-tagline {
	margin-top: 1.4rem;
	margin-bottom: 1rem;
	animation: fadeUp 1.5s ease;
}

.overlay-4blocks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	max-width: 500px;
	margin: 0 auto;
	padding-left: 10px;
	padding-right: 10px;
}

.overlay-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.overlay-block img.block-image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover: lichte verkleining */
.overlay-block:hover img.block-image {
	transform: scale(0.95);
}

.block-label {
	font-family: 'Dancing Script', cursive;
	font-size: 2.2rem;
	color: #000;
	margin-bottom: 8px;
}

/* Onderste rij: label onderaan */
.block-label.bottom {
	order: 2;
	margin-top: 8px;
}

/* Bovenste rij: label bovenaan */
.block-label.top {
	order: -1;
	margin-bottom: 8px;
}

/* (Lijkt ongebruikt, maar behouden voor veiligheid) */
.overlay-label {
	font-family: 'Dancing Script', cursive;
	color: #fff;
	font-size: 1.6rem;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.6);
	margin: 0.6rem 0;
	pointer-events: none;
}

/* Logo in overlay */
.overlay-logo {
	margin-top: 1rem;
	width: 220px;
	animation: fadeUp 1.8s ease;
}
.overlay-logo img {
	width: 100%;
	height: auto;
}

/* Fade out effect overlay */
.fade-out {
	opacity: 0;
	transition: opacity 1s ease, background-color 1s ease;
	background-color: #e2eff4;
	pointer-events: none;
}

/* Overlay animaties */
@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes fadeUp {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
	from { transform: scale(0.95); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

/* Overlay responsive */
@media (max-width: 600px) {
	.overlay-square { width: 90vmin; height: 90vmin; }
	.overlay-text   { font-size: 1rem; }
}


/* --------------------------------------------------
	 TOP-BAR
-------------------------------------------------- */
.top-bar {
	height: 100px;
	width: 100%;
}



/* --------------------------------------------------
	 NAVBAR & BUTTONS
-------------------------------------------------- */
.navbar {
	position: fixed;
	top: 100px; /* exact de hoogte van .top-bar */
	left: 0;
	right: 0;
	z-index: 1000;
	background: transparent;
	transition: background-color .4s ease, box-shadow .4s ease;
}

.navbar.no-top-bar {
	top: 0;
}

.navbar.scrolled {
	top: 0; /* bij scroll komt de navbar volledig bovenaan */
	background: var(--nav-bg);
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	backdrop-filter: blur(10px);
}

.navbar a {
	font-size: 35px;
}

/* Logo varianten */
.navbar.scrolled .logo-light { opacity: 0; }
.navbar.scrolled .logo-dark  { opacity: 1; }

/* Navbar kleur op mobiel */
@media (max-width: 991px) {
	.nav-link { color: var(--text); }
}

/* Outline button */
.btn-outline {
	display: inline-block;
	padding: 10px 30px;
	border: 2px solid #fff;
	border-radius: 30px;
	text-decoration: none;
	color: #fff;
	font-weight: 500;
	transition: all .3s ease;
}
.btn-outline:hover {
	background: var(--accent);
	border-color: var(--accent);
}


/* --------------------------------------------------
	 SPECIFIEKE SECTIES / STIJLEN
-------------------------------------------------- */

/* Pastel sectie (specialiteiten) */
.section-pastel {
	background: #e2eff4;
	padding: 100px 0;
}
.section-pastel h2 {
	color: var(--accent);
}
.section-pastel h3 {
	font-weight: 600;
	font-size: 2rem;
	color: var(--text);
	margin-bottom: 1rem;
}
.section-pastel p.lead {
	color: #4a4a4a;
	font-size: 1.05rem;
}
.section-pastel img {
	border-radius: 12px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.section-pastel img:hover {
	transform: scale(1.03);
	box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Media-container achtergrond */
.media-container-wrapper {
	background-color: #cc9966;
}

/* Media sectie heading */
#media h3 {
	font-family: 'Dancing Script', cursive;
	color: white;
	padding-top: 15px;
	padding-bottom: 30px;
	font-size: 2rem;
}

/* Meet sectie accent */
#meet {
	color: #3ea8c7;
}


/* --------------------------------------------------
	 CAROUSEL (MEDIA)
-------------------------------------------------- */

#konaCarousel {
		width: 45%;        /* pas eventueel aan naar 80–90% */
		margin: 0 auto;    /* centreren */
		position: relative;
		touch-action: pan-y;
}

/* Foto’s groter (portrait) */
.kona-carousel-img {
	height: 75vh;
	object-fit: cover;
}

.carousel-item {
    pointer-events: auto !important;
    z-index: 1;
}

/* Hartjes-indicators onder de carousel */
.carousel-indicators.hearts {
	position: static;
	margin-top: 20px;
	display: flex;
	justify-content: center;
	gap: 2px;
}

/* Buttons resetten zodat FA-iconen zichtbaar zijn */
.carousel-indicators.hearts [data-bs-target] {
	box-sizing: content-box;
	flex: 0 0 auto;
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	border: 0;
	background-color: transparent;
	text-indent: 0;        /* icon zichtbaar houden */
	opacity: 1;
}



/* Hartje zelf */
.carousel-indicators.hearts [data-bs-target] i {
	font-size: 22px;
	color: white;
	transition: transform .2s ease, color .2s ease;
}

/* Actieve indicator */
.carousel-indicators.hearts .active i {
	color: white;
	transform: scale(1.25);
}

/* Pijlen positie */
.custom-arrow {
		width: 60px;
		height: 60px;
		top: 50%;
		transform: translateY(-50%);
		opacity: 1 !important;
		background: none;
		border: none;
		pointer-events: none;      /* knop zelf niet aanklikbaar */
}

.carousel-control-prev {
		left: -70px;
}

.carousel-control-next {
		right: -70px;
}

@media (max-width: 768px) {
		#konaCarousel {
				width: 95%;
		}
		.kona-carousel-img {
			height: 45vh;
			object-fit: cover;
		}

		.carousel-control-prev {
				left: -25px;
		}
		.carousel-control-next {
				right: -25px;
		}
}

/* SVG-icon basis */
.arrow-icon {
		width: 32px;
		height: 32px;
		pointer-events: auto;      /* alleen de driehoek is klikbaar */
}

/* OUTLINE: geen vulling, enkel witte lijn */
.arrow .arrow-icon polygon {
		fill: none;
		stroke: #ffffff;
		stroke-width: 2.5;
}

/* FILLED: volledig wit bij .filled */
.arrow.filled .arrow-icon polygon {
		fill: #ffffff;
		stroke: #ffffff;
}



/* Volle (filled) pijlen */
.arrow-left.filled {
			 border-color: transparent white transparent transparent;
}

.arrow-right.filled {
				border-color: transparent transparent transparent white;
}

@media (max-width: 768px) {
		#konaCarousel {
				width: 95%;
		}
		.carousel-control-prev {
				left: -60px;
		}
		.carousel-control-next {
				right: -60px;
		}
}

.carousel-caption-custom {
		margin-top: 5px;
		text-align: center;
		color: #fff;             /* Kies jouw kleur */
}

.carousel-caption-custom h5 {
		font-size: 1.2rem;
		font-weight: normal;
		margin-bottom: 5px;
		color: #fff;
}

.custom-arrow { pointer-events: none; }


/* --------------------------------------------------
	 FOOTER
-------------------------------------------------- */
footer {
	text-align: center;
	color: var(--muted);
	font-size: .9rem;
}

footer .footer-bottom {
	margin-top: 40px;
	height: 100px;
}

footer .footer-bottom p {
	margin-bottom: 0;
	color: white;
}

footer .footer-logo {
	animation: fadeUp 1.8s ease;
}