/* ==========================================================================
   Amazing FD — tokens + base. Exacte waarden uit DESIGN-SYSTEM.md (Figma).
   Merk-accent op de core-tokens (--sellabees-*) zodat de core meekleurt.
   ========================================================================== */
:root {
	/* Kleuren */
	--amazing-bg:       #242424; /* body + donkere secties + footer-CTA-blok */
	--amazing-nav:      #292929; /* header navbalk */
	--amazing-footer:   #161616; /* footer kolommen + colofon (donkerst) */
	--amazing-ink:      #ffffff; /* alle tekst */
	--amazing-accent:   #89816a; /* merk-accent: topbalk, pill-knoppen, icoontjes */
	--amazing-accent-2: #5e594a; /* secundair: "Werken bij"-tab */

	/* Maatvoering */
	--amazing-content:  1322px;  /* body content-band (marges 299px @1920) */
	--amazing-wide:     1480px;  /* header/hero-band (marges 220px @1920) */
	--amazing-sectoren: 1636px;  /* sectoren-band (marges 142px @1920) */
	--amazing-gutter:   clamp(20px, 6.51vw, 299px);
	/* Zijmarge om de 1322-band te centreren (voor full-bleed secties) */
	--amazing-band-pad: max(clamp(20px, 4vw, 40px), calc((100vw - var(--amazing-content)) / 2));
	/* Zijmarge om de bredere 1480-band (header/hero) te centreren → x=220 @1920 */
	--amazing-band-pad-wide: max(clamp(20px, 4vw, 40px), calc((100vw - var(--amazing-wide)) / 2));

	/* Fonts */
	--amazing-font-heading: 'Kaisei Opti', Georgia, 'Times New Roman', serif;
	--amazing-font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

	/* Core-tokens meekleuren */
	--sellabees-accent: var(--amazing-accent);
	--sellabees-red:    var(--amazing-accent);
	--sellabees-yellow: var(--amazing-accent);
	--sellabees-ink:    var(--amazing-ink);
	--sellabees-font-heading: var(--amazing-font-heading);
	--sellabees-preloader-bg:      var(--amazing-bg);
	--sellabees-preloader-accent:  var(--amazing-accent);
	--sellabees-preloader-accent2: var(--amazing-accent);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--amazing-bg);
	color: var(--amazing-ink);
	font-family: var(--amazing-font-body);
	font-size: 16px;
	line-height: 1.35;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--amazing-font-heading);
	color: var(--amazing-ink);
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 .4em;
}
h1 { font-size: clamp(38px, 3.13vw, 60px); }  /* hero 60 */
h2 { font-size: clamp(28px, 2.2vw, 40px); }   /* sectiekop 40 (Figma) */
h3 { font-size: 24px; }

p { margin: 0 0 1em; line-height: 1.31; } /* 16/21 ≈ 1.31 */

a { color: inherit; text-decoration: none; transition: color .2s, opacity .2s; }
a:hover { opacity: .8; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; }

/* Content-containers */
.container {
	width: 100%;
	max-width: calc(var(--amazing-content) + 2 * 40px);
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 40px);
}
.container--wide { max-width: calc(var(--amazing-wide) + 2 * 40px); }

/* ==========================================================================
   Knoppen — pills, radius 100px. Twee smaken: solid goud + 2px witte outline.
   Label: Poppins ExtraBold 800, 16px, wit, UPPERCASE.
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	padding: 14px 32px;
	border-radius: 100px;
	font-family: var(--amazing-font-body);
	font-weight: 800;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--amazing-ink);
	cursor: pointer;
	border: 2px solid transparent;
	white-space: nowrap;
	transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.btn--primary { background: var(--amazing-accent); border-color: var(--amazing-accent); color: #fff; }
.btn--primary:hover { opacity: .9; }
.btn--outline { background: transparent; border-color: #fff; color: #fff; }
.btn--outline:hover { background: #fff; color: var(--amazing-bg); opacity: 1; }
.btn--white { background: #fff; border-color: #fff; color: var(--amazing-accent); }
.btn--white:hover { opacity: .9; }

/* Pagina-content (the_content fallback, o.a. legal) */
.page-content { padding-block: 64px; }
.page-content .page-title { font-size: clamp(32px, 3vw, 56px); margin-bottom: 30px; }
.entry-content { max-width: 900px; font-size: 16px; line-height: 1.65; }
.entry-content h2 { font-size: clamp(22px, 1.8vw, 28px); margin: 1.6em 0 .5em; }
.entry-content h3 { font-size: 20px; margin: 1.3em 0 .4em; }
.entry-content p { margin: 0 0 1em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.entry-content li { margin-bottom: .5em; }
.entry-content a { color: var(--amazing-accent); text-decoration: underline; }
.entry-content strong { color: #fff; }

/* Sparkle/"sterretje" — het exacte Figma-asset (6-punts twinkle, #89816a).
   Maat/positie worden per context (width/height) gezet. */
.amazing-sparkle {
	display: inline-block;
	pointer-events: none;
	/* Sterretje als recolorbaar CSS-mask → krijgt zijn kleur van background-color.
	   Standaard WIT (zoals de logo-/fotosterretjes en de meeste sparkles in het
	   ontwerp); specifieke plekken zetten 'm op goud waar het ontwerp dat toont. */
	background-color: #fff;
	-webkit-mask: url("../img/sparkle.png") center / contain no-repeat;
	        mask: url("../img/sparkle.png") center / contain no-repeat;
}

/* Helpers */
.u-uppercase { text-transform: uppercase; }
.u-italic { font-style: italic; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Micro-interacties — subtiele levendigheid. Alles onder één reduced-motion-
   guard: wie "verminder beweging" aan heeft, krijgt een volledig statische site.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Sparkles twinkelen zacht. Geanimeerd via transform (scale+rotate) i.p.v.
	   mask-size → GPU-gecomposit, dus vloeiend. De positionerings-translate
	   (-50%,-50%, gelijk voor álle sparkles) staat in de keyframe zodat de plek
	   niet verspringt. Per sparkle iets ander ritme → levendig, niet synchroon. */
	@keyframes amazing-twinkle {
		0%, 100% { transform: translate(-50%, -50%) scale(.82) rotate(-10deg); }
		50%      { transform: translate(-50%, -50%) scale(1)   rotate(0deg);   }
	}
	.amazing-sparkle { animation: amazing-twinkle 3.8s ease-in-out infinite; will-change: transform; }
	.amazing-sparkle:nth-child(2) { animation-duration: 4.6s; animation-delay: -1.4s; }
	.amazing-sparkle:nth-child(3) { animation-duration: 3.3s; animation-delay: -2.7s; }
	.amazing-sparkle:nth-child(4) { animation-duration: 4.2s; animation-delay: -0.8s; }
	.amazing-sparkle:nth-child(5) { animation-duration: 3.6s; animation-delay: -2.1s; }
	.amazing-sparkle:nth-child(6) { animation-duration: 4.9s; animation-delay: -3.3s; }

	/* Scroll-reveal: secties faden zacht omhoog bij binnenkomst. De klassen worden
	   door amazing.js gezet; zonder JS (geen .amz-anim) blijft alles gewoon zichtbaar. */
	.amz-anim .amz-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); }
	.amz-anim .amz-reveal.is-visible { opacity: 1; transform: none; }
}