/*
Theme Name: Innovatie Media
Theme URI: https://innovatiemedia.nl
Author: Innovatie Media
Author URI: https://innovatiemedia.nl
Description: Maatwerkthema voor de nieuwe website van Innovatie Media. Blokken via ACF flexible content, Barba-paginawissels, Lenis smooth scroll en GSAP-animaties. Meertalig via Polylang.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: innovatiemedia
*/

/* =========================================================
   Design tokens, uit Figma "Innovatie Media V2" (file RfdEwvO58sXr1UK4v31gia).
   Het bestand heeft (nog) geen Figma-variabelen; deze waarden komen uit de
   frame 1:26 (header en hero). Pixelwaarden omgezet naar rem en
   clamp(), met het MacBook Pro 14"-frame (1512 breed) als bovenmaat.
   ========================================================= */

/* Lettertypes. General Sans (Fontshare, ITF Free Font License) staat zelf
   gehost in assets/fonts. Neulis (koppen en knoppen, de variant met de lussen; niet Neulis Alt) is commercieel; de
   @font-face zet functions.php erbij zodra de bestanden er staan
   (innovatiemedia_neulis_face()). */
@font-face {
	font-family: "General Sans";
	src: url("assets/fonts/general-sans-variable.woff2") format("woff2");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}


/* Terugval voor Oekraïens (Cyrillisch, Manrope) en Arabisch (IBM Plex Sans
   Arabic): Neulis en General Sans hebben die tekens niet. Zelf gehost (OFL);
   dankzij unicode-range laadt de browser ze alleen als zulke tekens op de
   pagina staan. */
@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/manrope-cyrillic-ext-400-700.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/manrope-cyrillic-400-700.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("assets/fonts/plex-arabic-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("assets/fonts/plex-arabic-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url("assets/fonts/plex-arabic-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root {
	/* Kleur */
	--c-bg: #29221a;            /* warm donkerbruin: hoofdvlak */
	--c-bg-deep: #211c10;       /* dieper bruin: tekst op lavendel */
	--c-panel: #16120b;         /* taalpaneel: nog donkerder bruin */
	--c-lavender: #d9a4e2;      /* accent: koppen, logo, primaire knop */
	--c-lavender-light: #e7c3ee;/* hover op de lavendel knop (niet in Figma, afgeleid) */
	--c-ink: #211c10;           /* tekst op lavendel */
	--c-white: #ffffff;
	--c-underline: #4b3e31;     /* subtiele bruine onderstreping van links in de hero */
	--c-logo-blend: #ffc6fc;    /* logo met difference: min het bruin = lavendel #d9a4e2 */
	--c-mute: rgba(255, 255, 255, 0.64);
	--c-line: rgba(255, 255, 255, 0.18);
	--c-error: #ff8a7a;

	/* Typografie */
	--f-display: "Neulis", "General Sans", "Manrope", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-body: "General Sans", "Manrope", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

	--fs-small: 0.875rem;                                     /* 14 */
	--fs-btn: 1rem;                                           /* 16: knoppen (Neulis Medium) */
	--fs-body: 1.0625rem;                                     /* 17 */
	--fs-lead: clamp(1.125rem, 0.95rem + 0.5vw, 1.5rem);      /* 24: introtekst hero */
	--fs-h1: clamp(2.125rem, 1.35rem + 2.1vw, 3.125rem);      /* 50: hero-kop */

	/* Ruimte */
	--gutter: clamp(1.25rem, 2.65vw, 2.5rem);                 /* 40 */
	--frame: 0.625rem;                                        /* 10: rand rond de hero-foto */
	--gap: 2.5rem;                                            /* 40: tussen kop, tekst en knoppen */

	/* Componenten */
	--btn-h: 3.125rem;                                        /* 50 */
	--btn-px: 1.875rem;                                       /* 30 */
	--radius: 0.625rem;                                       /* 10 */
	--radius-pill: 100px;
	--header-top: 2.5rem;                                     /* 40 */
	--lang-w: 4.875rem;                                       /* 78: taalpil */

	/* Beweging */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-im: cubic-bezier(0.625, 0.05, 0, 1);
}

@media (max-width: 47.99em) {
	:root {
		--header-top: 1.25rem;
		--btn-h: 2.875rem;
		--btn-px: 1.375rem;
		--gap: 1.75rem;
	}
}