/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/
 Description:  Child theme voor Hello Elementor — geoptimaliseerd voor conversie.
 Author:       CEO Studio
 Author URI:   https://jouwdomein.nl
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   CSS Custom Properties — Branding
   Pas deze variabelen aan per project.
   ========================================================================== */

:root {
	/* Kleuren */
	--ceo-color-primary: #2563eb;
	--ceo-color-primary-hover: #1d4ed8;
	--ceo-color-secondary: #f59e0b;
	--ceo-color-dark: #1e293b;
	--ceo-color-light: #f8fafc;
	--ceo-color-text: #334155;
	--ceo-color-text-light: #94a3b8;

	/* Typografie */
	--ceo-font-heading: 'Inter', sans-serif;
	--ceo-font-body: 'Inter', sans-serif;
	--ceo-font-size-base: 1rem;
	--ceo-line-height-base: 1.6;

	/* Spacing */
	--ceo-spacing-xs: 0.5rem;
	--ceo-spacing-sm: 1rem;
	--ceo-spacing-md: 2rem;
	--ceo-spacing-lg: 4rem;
	--ceo-spacing-xl: 6rem;

	/* Overig */
	--ceo-border-radius: 8px;
	--ceo-transition-speed: 0.3s;
	--ceo-max-width: 1200px;
}

/* ==========================================================================
   Basis Stijlen
   ========================================================================== */

body {
	color: var(--ceo-color-text);
	font-family: var(--ceo-font-body);
	font-size: var(--ceo-font-size-base);
	line-height: var(--ceo-line-height-base);
}

/* Verberg elementen voor GSAP animatie (voorkom flash of content) */
.ceo-anim-fade-up,
.ceo-anim-fade-in,
.ceo-anim-stagger {
	opacity: 0;
}

/* Fallback: toon elementen als JS uitgeschakeld is */
.no-js .ceo-anim-fade-up,
.no-js .ceo-anim-fade-in,
.no-js .ceo-anim-stagger {
	opacity: 1;
}

/* Respecteer voorkeur voor minder beweging */
@media (prefers-reduced-motion: reduce) {
	.ceo-anim-fade-up,
	.ceo-anim-fade-in,
	.ceo-anim-stagger {
		opacity: 1 !important;
		transform: none !important;
	}
}