@charset "UTF-8";

:root {
	--pico-font-family-sans-serif: system-ui, -apple-system, "Segoe UI",
		"Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
		"Noto Color Emoji";
	--pico-font-size: 100%;
	--pico-line-height: 1.5;
	--pico-font-weight: 400;
	--pico-border-radius: 0.5rem;
	--pico-border-width: 1px;
	--pico-outline-width: 3px;
	--pico-transition: background-color 0.15s ease-in-out, border-color
		0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s
		ease-in-out;
	--pico-typography-spacing: 2rem;
	--pico-block-spacing-vertical: calc(var(--pico-typography-spacing)* 2);
	--pico-block-spacing-horizontal: 2rem;
	--pico-grid-spacing-vertical: var(--pico-typography-spacing);
	--pico-grid-spacing-horizontal: 2rem;
	--pico-form-element-spacing-vertical: 0.75rem;
	--pico-form-element-spacing-horizontal: 1rem;
	--pico-nav-element-spacing-vertical: 1rem;
	--pico-nav-element-spacing-horizontal: 0.5rem;
	--pico-nav-link-spacing-vertical: 0.5rem;
	--pico-nav-link-spacing-horizontal: 0.5rem;
	--pico-border-box: border-box
}

html {
	background-color: var(--pico-background-color);
	color: var(--pico-color);
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	box-sizing: var(--pico-border-box);
	font-family: var(--pico-font-family-sans-serif);
	font-size: var(--pico-font-size);
	font-weight: var(--pico-font-weight);
	line-height: var(--pico-line-height);
	text-rendering: optimizeLegibility
}

*, :after, :before {
	box-sizing: inherit;
	background-repeat: no-repeat
}

main {
	display: block
}

.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--pico-block-spacing-horizontal);
	padding-left: var(--pico-block-spacing-horizontal)
}

@media ( min-width :576px) {
	.container {
		max-width: 540px
	}
	
	nav ul li a.secondary {
		font-weight: 400;
		font-size: 15px;
	}
}

@media ( min-width :768px) {
	.container {
		max-width: 720px
	}
	
	nav ul li a.secondary {
		font-weight: 600;
		font-size: 15px;
	}
}

@media ( min-width :992px) {
	.container {
		max-width: 960px
	}
}

@media ( min-width :1200px) {
	.container {
		max-width: 1140px
	}
}

.grid {
	grid-column-gap: var(--pico-grid-spacing-horizontal);
	grid-row-gap: var(--pico-grid-spacing-vertical);
	display: grid;
	grid-template-columns: 1fr;
	margin: 0
}

@media ( min-width :768px) {
	.grid {
		grid-template-columns: repeat(auto-fit, minmax(0%, 1fr))
	}
}

header, main, footer, section, article, nav {
	display: block;
	margin: 0;
	padding: 0
}

nav, nav ul {
	display: flex
}

nav {
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 3.5rem
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center
}

nav ul:first-child {
	justify-content: flex-start
}

nav ul:last-child {
	justify-content: flex-end
}

nav ul li {
	padding: var(--pico-nav-element-spacing-vertical)
		var(--pico-nav-element-spacing-horizontal)
}

nav a {
	display: inline-block;
	margin: 0;
	padding: var(--pico-nav-link-spacing-vertical)
		var(--pico-nav-link-spacing-horizontal);
	text-decoration: none;
	border-radius: var(--pico-border-radius)
}

article {
	padding: var(--pico-block-spacing-vertical)
		var(--pico-block-spacing-horizontal);
	border-radius: var(--pico-border-radius);
	background: var(--pico-card-background-color);
	box-shadow: var(--pico-card-box-shadow)
}

h1, h2, h3, h5 {
	margin-top: 0;
	margin-bottom: var(--pico-typography-spacing);
	color: #2C3B4E;
	font-weight: 500
}

h1 {
	font-size: 2rem
}

h2 {
	font-size: 1.75rem
}

h3 {
	font-size: 1.5rem
}

p {
	margin-top: 0;
	margin-bottom: var(--pico-typography-spacing)
}

a {
	color: var(--pico-primary);
	text-decoration: underline;
	transition: color var(--pico-transition)
}

a:hover {
	color: var(--pico-primary-hover)
}

button, input, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button, input, select, textarea {
	overflow: visible
}

button, select {
	text-transform: none
}

button, input[type=submit] {
	-webkit-appearance: button;
	border: 1px solid transparent;
	cursor: pointer
}

input, select, textarea {
	width: 100%;
	margin-bottom: var(--pico-typography-spacing);
	padding: var(--pico-form-element-spacing-vertical)
		var(--pico-form-element-spacing-horizontal);
	border: var(--pico-border-width) solid
		var(--pico-form-element-border-color);
	border-radius: var(--pico-border-radius);
	background-color: var(--pico-form-element-background-color);
	color: var(--pico-form-element-color);
	box-shadow: var(--pico-form-element-box-shadow);
	transition: background-color var(--pico-transition), border-color
		var(--pico-transition), color var(--pico-transition), box-shadow
		var(--pico-transition)
}

button, input[type=submit] {
	padding: var(--pico-form-element-spacing-vertical)
		var(--pico-form-element-spacing-horizontal);
	border-radius: var(--pico-border-radius);
	background-color: #A35139;
	color: var(--pico-primary-inverse);
	font-weight: 500;
	text-align: center;
	transition: background-color var(--pico-transition), border-color
		var(--pico-transition), box-shadow var(--pico-transition)
}

button:hover, input[type=submit]:hover {
	background-color: var(--pico-primary-hover)
}

textarea {
	overflow: auto;
	resize: vertical
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
	border: none;
	border-top: var(--pico-border-width) solid var(--pico-border-color);
	margin: calc(var(--pico-typography-spacing)* 2) 0
}

nav {
	padding: 1rem 0;
	margin-bottom: 1rem;
}

nav ul li a.secondary {
	color: #A35139;
	font-weight: 500;
	position: relative;
	font-size: 20px;
	text-decoration: none;
	transition: color 0.3s ease;
}

nav ul li a.secondary:hover {
	color: #2C3B4E;
	background: transparent;
}

nav ul li a.secondary::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: -4px;
	left: 50%;
	background-color: #2C3B4E;
	transition: all 0.3s ease;
	transform: translateX(-50%);
}

nav ul li a.secondary:hover::after {
	width: 100%;
	color: #2C3B4E;
	font-size: 20px;
}

nav ul li a.contrast {
	background-color: #A35139;
	color: #ffffff;
	border: none;
	border-radius: 50px;
	padding: 0.6rem 1.5rem;
	font-weight: 700;
	/*             box-shadow: 0 4px 15px -3px rgba(14, 165, 233, 0.4); */
	transition: all 0.3s ease;
	text-decoration: none;
}

nav ul li a.contrast:hover {
	background-color: #1C2632;
	transform: translateY(-2px);
	/*             box-shadow: 0 8px 25px -5px rgba(14, 165, 233, 0.6); */
}

.hero-banner {
	background: #C9C2B2;
	padding: 1.5rem 1.5rem;
	text-align: center;
	border-radius: 35px;
	margin-bottom: 3rem;
	box-shadow: 0 15px 30px -10px #a35139ab;
	border: 1px solid #A35139;
}

.hero-banner h1 {
	color: #2E3839;
	font-size: 2rem;
	font-weight: 900;
	margin-bottom: 0.5rem;
}

.hero-banner p {
	color: #2E3839;
	font-size: 1.1rem;
	max-width: 600px;
	margin: 0 auto;
}

.premium-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
}

.premium-grid article {
	background: #C9C2B2;
	border: 1px solid #A35139;
	border-radius: 35px;
	padding: 1.5rem 1.2rem 1.2rem;
	text-align: center;
	box-shadow: 0 15px 30px -10px #a35139ab;
	position: relative;
}

.icon-bubble {
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	width: 50px;
	height: 50px;
	background: #a35139ab;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	box-shadow: 0 10px 15px -5px #a35139ab;
	border: 3px solid #1e293b;
}

.premium-grid h3 {
	color: #2C3B4E;
	margin-top: 0.5rem;
	font-size: 1.25rem;
	font-weight: 800;
}

.premium-grid p {
	font-size: 0.95rem;
	margin-bottom: 0;
}

/* --- FOTOGALERIJ MET LINKS/RECHTS FADES --- */
.gallery-section {
	position: relative;
	margin-bottom: 2rem;
	margin-top: 2rem;
}

.swipe-gallery {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 20px;
	padding-bottom: 15px;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.swipe-gallery::-webkit-scrollbar {
	display: none;
}

.swipe-gallery img {
	flex: 0 0 75%;
	max-height: 400px;
	object-fit: cover;
	scroll-snap-align: center;
	border-radius: 16px;
	border: 1px solid #A35139;
}

@media ( min-width : 768px) {
	.swipe-gallery img {
		flex: 0 0 40%;
	}
}

/* De rechter fade overlay */
.gallery-fade-right {
	position: absolute;
	top: 0;
	right: 0;
	height: calc(100% - 15px);
	width: 80px;
	background: linear-gradient(to right, rgba(15, 23, 42, 0), #ede9de);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 15px;
	transition: opacity 0.3s ease;
}
/* De linker fade overlay */
.gallery-fade-left {
	position: absolute;
	top: 0;
	left: 0;
	height: calc(100% - 15px);
	width: 80px;
	background: linear-gradient(to left, rgba(15, 23, 42, 0), #ede9de);
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 15px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fade-arrow {
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.5rem;
	animation: pulseRight 2s infinite;
}

.fade-arrow-left {
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.5rem;
	animation: pulseLeft 2s infinite;
}

@keyframes pulseRight { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(8px); opacity: 0.8; } }
@keyframes pulseLeft { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(-8px); opacity: 0.8; } }
        
.responsieve-afbeelding {
	min-width: 100px;
	max-width: 100%;
	height: auto;
}

.contact-card {
	background: #C9C2B2;
	border: 1px solid #A35139;
	border-radius: 35px;
	padding: 2.5rem;
	box-shadow: 0 15px 30px -10px #a35139ab;
}

.location-card {
	display: inline-block;
	background: #C9C2B2;
	border: 1px solid #A35139;
	border-radius: 35px;
	padding: 1.5rem 3rem;
	text-align: center;
}

button[type="submit"] {
	border-radius: 50px;
	font-weight: 700;
	margin-top: 1rem;
	box-shadow: 0 4px 15px -3px #a35139ab;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

button[type="submit"]:hover {
	transform: translateY(-2px);
}

.map-wrapper {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #334155;
	height: 200px;
	box-shadow: 0 10px 20px -5px #a35139ab;
}

.map-wrapper iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* THEMA COLOR CODES FOR PREMIUM SLATE DARK */
:root, html[data-theme=dark] {
	--pico-background-color: #EDE9DE;
	--pico-color: #2C3B4E;
	--pico-text-selection-color: rgba(14, 165, 233, 0.25);
	--pico-heading-color: #f8fafc;
	--pico-text-muted: #94a3b8;
	--pico-border-color: #A35139;
	--pico-primary: #0ea5e9;
	--pico-primary-hover: #2C3B4E;
	--pico-primary-focus: rgba(14, 165, 233, 0.25);
	--pico-primary-inverse: #ffffff;
	/* Zorgt dat tekst op knoppen wit is */
	--pico-form-element-background-color: #2C3B4E;
	/* Inputs iets donkerder laten wegzinken */
	--pico-form-element-border-color: #A35139;
	--pico-form-element-color: #f8fafc;
	--pico-card-background-color: #1e293b;
	--pico-border-radius: 12px; /* Basis radius */
	--pico-contrast: #f8fafc;
}