/* ==========================================================================
   met Schipper — Theme stylesheet
   Design tokens, typografie, generieke componenten
   ========================================================================== */

:root {
	/* Kleuren — basispalet */
	--ms-sand:           rgb(252, 249, 240);   /* hoofd achtergrond, "papier" */
	--ms-sand-warm:      rgb(245, 238, 222);   /* warmere variant, voor sectie afwisseling */
	--ms-sand-deep:      rgb(235, 224, 200);   /* dieper, voor cards en accenten */
	--ms-sand-shadow:    rgb(241, 233, 210);   /* mix-blend overlays */

	--ms-ink:            rgb(44, 42, 37);      /* primaire tekstkleur, zachte zwart */
	--ms-ink-soft:       rgba(44, 42, 37, 0.7);
	--ms-ink-muted:      rgba(44, 42, 37, 0.5);

	--ms-blue:           rgb(35, 81, 107);     /* hero, donkere secties */
	--ms-blue-deep:      rgb(24, 58, 78);
	--ms-blue-soft:      rgb(89, 128, 148);

	--ms-brown: 		 rgb(44, 42, 37);

	--ms-orange:         #fb9740;              /* primaire actie */
	--ms-orange-warm:    #e8842c;

	--ms-green:          #479908;              /* status, telefoon */

	--ms-terracotta:     #fb9740;              /* warm accent voor nieuwe secties */
	--ms-clay:           #e8842c;

	/* Typografie */
	--ms-font-display: "Sansita", Georgia, "Times New Roman", serif;
	--ms-font-body:    "Poppins", Arial, sans-serif;
	--ms-font-mono:    "Courier New", Courier, monospace;

	/* Maten */
	--ms-radius-lg: 32px;
	--ms-radius-md: 20px;
	--ms-radius-sm: 12px;

	/* Schaduwen */
	--ms-shadow-sm: 0 2px 8px rgba(28, 38, 45, 0.06);
	--ms-shadow-md: 0 8px 24px rgba(28, 38, 45, 0.08);
	--ms-shadow-lg: 0 20px 50px rgba(28, 38, 45, 0.12);

	/* Layout */
	--ms-section-padding-y: 120px;
	--ms-section-padding-x: 100px;
	--ms-container-max: 1400px;
}

/* ==========================================================================
   Reset / basis
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Zorg dat ankerlinks niet onder het sticky menu vallen */
:target,
section[id],
header[id] {
	scroll-margin-top: 120px;
}

body {
	background-color: var(--ms-sand);
	color: var(--ms-ink);
	font-family: var(--ms-font-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

p {
	font-size: 1.17em;
	line-height: 1.6;
}

a, a:visited {
	color: inherit;
	border: 0;
}
a:hover {
	opacity: 0.85;
}

img, svg { display: block; max-width: 100%; }

button {
	font-family: inherit;
	color: inherit;
}

/* ==========================================================================
   Generieke wrappers
   ========================================================================== */

.global-border {
	padding: 32px;
	background-color: var(--ms-sand);
	position: relative;
}

.layout-container {
	padding: var(--ms-section-padding-y) var(--ms-section-padding-x);
	max-width: var(--ms-container-max);
	margin: 0 auto;
}

/* ==========================================================================
   Knoppen
   ========================================================================== */

.button-container {
	width: 100%;
	display: flex;
	justify-content: center;
}

.button {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	font-size: 20px;
	border-radius: 40px;
	background-color: var(--ms-orange);
	color: #fff;
	padding: 20px 30px;
	opacity: 0.9;
	font-weight: bold;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	transition: all .2s ease-in-out;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}
.button:hover {
	opacity: 1 !important;
	color: #fff;
}
.button:visited {
	color: #fff;
}
.button svg {
	width: auto;
	height: 14px;
	transition: all .2s ease-in-out;
}
.button:hover svg {
	transform: rotate(90deg);
}
.button svg path {
	fill: #fff;
}

.button--ghost {
	background-color: transparent;
	color: var(--ms-ink);
	border: 2px solid var(--ms-ink);
}
.button--ghost:hover {
	background-color: var(--ms-ink);
	color: var(--ms-sand);
}

.button--blue {
	background-color: var(--ms-blue);
}

/* ==========================================================================
   Typografische helpers
   ========================================================================== */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--ms-font-body);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--ms-terracotta);
	margin-bottom: 20px;
	font-weight: 600;
}

.eyebrow::before {
	content: "";
	display: block;
	width: 30px;
	height: 1px;
	background-color: var(--ms-terracotta);
}

.section-title {
	font-family: var(--ms-font-display);
	font-size: 70px;
	line-height: 1;
	margin: 0 0 20px;
}

.section-intro {
	font-size: 25px;
	line-height: 1.4;
	margin-bottom: 60px;
	max-width: 800px;
}

/* ==========================================================================
   Mobiel
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--ms-section-padding-y: 60px;
		--ms-section-padding-x: 25px;
	}

	.global-border { padding: 16px; }

	.section-title { font-size: 36px; }
	.section-intro { font-size: 18px; margin-bottom: 40px; }
	.eyebrow { font-size: 15px; }

	.button {
		font-size: 16px;
		padding: 15px 25px;
		gap: 10px;
	}
}