/*
Theme Name: Essence Pillar
Theme URI: https://essencepillar.innovatiemedia.nl
Author: Innovatie Media
Description: Maatwerk thema voor Essence Pillar. ACF flexibele contentblokken, dynamisch scroll-achtergrondsysteem, Osmo navigatie/tabs, Barba/GSAP/Lenis.
Version: 0.2.5
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: essence-pillar
*/

/* =========================================================
   DESIGN TOKENS — uit Figma "Essence Pillar website_IM"
   ========================================================= */
:root {
	/* Brand palette */
	--c-white:   #ffffff;
	--c-beige:   #f7f3ed;  /* Beige 10 */
	--c-grey:    #e9ebeb;  /* Grey 10 */
	--c-green:   #1f3b33;  /* Green (koppen, hero mask) */
	--c-gold:    #b8874f;  /* Gold (knoppen, accenten) */
	--c-red:     #720505;  /* Red (quote) */
	--c-text:    #161e1b;  /* Text */
	--c-black:   #131313;  /* Zwart (paginatransitie, donkere UI) */

	/* Semantic */
	--text-on-light: var(--c-text);
	--text-on-dark:  var(--c-white);

	/* Dynamische canvas-kleur, gezet door scroll-bg.js */
	--bg: var(--c-beige);

	/* Typography */
	--font-head: "Poltawski Nowy", Georgia, serif;
	--font-body: "PT Sans", Arial, sans-serif;

	/* Layout */
	--container-max: 1180px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);

	/* Motion */
	--cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
	--duration-fast: 0.2s;
	--duration-normal: 0.45s;
}

/* Basisreset; alle verdere styling leeft in assets/css/app.css. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 1.7;
	color: var(--text-on-light);
	background: var(--c-beige);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
	font-family: var(--font-head);
	font-weight: 400;
	color: var(--c-green);
	margin: 0;
}

h1 { font-size: clamp(34px, 4.5vw, 54px); line-height: 1.12; }
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.3; }
h3 { font-size: clamp(27px, 3.2vw, 40px); line-height: 1.1; }
h4 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.14; }
h5 { font-size: clamp(19px, 2vw, 26px); line-height: 1.16; }

p {
	margin: 0 0 1em;
}

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

a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 2px;
}

button {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: none;
	padding: 0;
	color: inherit;
}

ul {
	margin: 0 0 1em;
	padding-left: 1.4em;
}