/*
Theme Name: Nida ul Islam
Theme URI: https://nida.im-development.nl
Author: Innovatie Media
Author URI: https://innovatiemedia.nl
Description: Maatwerkthema voor Sociaal Culturele Stichting en Moskee Nida ul Islam in Den Helder. Blokken via ACF flexible content, gebedstijden live uit Mawaqit, Barba-paginawissels, Lenis smooth scroll en GSAP-animaties.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: nida
*/

/* =========================================================
   Lettertypes, zelf gehost (OFL, via Fontsource):
   - Figtree (koppen en tekst): rustig en goed leesbaar, ook voor ouderen.
   - Fraunces (sierletter in koppen): warme serif met zachte vormen.
   - Amiri (Arabisch): klassiek naskh, voor gebedsnamen en de naam.
   ========================================================= */
@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces-latin-wght-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Figtree";
	src: url("assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Amiri";
	src: url("assets/fonts/amiri-arabic-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
	font-family: "Amiri";
	src: url("assets/fonts/amiri-arabic-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

/* =========================================================
   Design tokens. De kleuren van Den Helder: Noordzeegroen (het water
   tussen de kop en Texel), duinzand, het goud van het houtwerk in de
   moskee en een vleugje rood van de Lange Jaap en het tapijt.
   ========================================================= */
:root {
	/* Kleur */
	--c-bg: #0b3a3f;            /* nachtzee: hoofdvlak op donker, hero, footer */
	--c-bg-deep: #072a2e;       /* bovenbalk en menu: nog dieper */
	--c-bg-licht: #114a50;      /* tegels op donker */
	--c-bg-tegel: #175a60;      /* hover van een tegel op donker */
	--c-zee: #11646b;           /* banden: de gebedstijden */
	--c-zee-licht: #23808a;     /* sierletters en accenten op licht */
	--c-goud: #d8b46a;          /* accent: pijlen, lijnen, Arabisch */
	--c-goud-donker: #a97d33;   /* goud op licht */
	--c-goud-licht: #ecd7a6;    /* sierletters op donker */
	--c-groen: #11646b;         /* links en kleine accenten op licht */
	--c-groen-fel: #2ecb78;     /* de stip van het volgende gebed */
	--c-vuurtoren: #b8392a;     /* de Lange Jaap */
	--c-creme: #f7f3ea;         /* duinzand: lichte vlakken en tekst op donker */
	--c-paper: #f7f3ea;
	--c-zand: #ece4d2;          /* tweede lichte tint */
	--c-ink: #0a2c30;           /* tekst op licht */
	--c-white: #fdfbf6;
	--c-mute: rgba(247, 243, 234, 0.72);      /* gedempte tekst op donker */
	--c-mute-ink: rgba(10, 44, 48, 0.72);     /* gedempte tekst op licht */
	--c-line: rgba(247, 243, 234, 0.16);      /* haarlijn op donker */
	--c-line-ink: rgba(10, 44, 48, 0.14);     /* haarlijn op licht */
	--c-hairline: rgba(216, 180, 106, 0.4);   /* gouden haarlijn */
	--c-error: #e0675a;
	--c-ok: #6fbf8b;

	/* Typografie: strakke koppen in Figtree, de sierletter in Fraunces */
	--f-display: "Figtree", "Amiri", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-serif: "Fraunces", "Amiri", Georgia, "Times New Roman", serif;
	--f-text: "Figtree", "Amiri", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-arab: "Amiri", "Noto Naskh Arabic", "Geeza Pro", serif;

	--fs-hero: clamp(3rem, 1.9rem + 4.8vw, 6rem);
	--fs-h1: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
	--fs-h2: clamp(2.05rem, 1.55rem + 2.1vw, 3.5rem);
	--fs-h3: clamp(1.4rem, 1.2rem + 0.85vw, 1.9rem);
	--fs-h4: clamp(1.1rem, 1.04rem + 0.3vw, 1.3rem);
	--fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.3rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-btn: 0.8125rem;
	--fs-kicker: 0.75rem;
	--lh-tight: 1.06;
	--lh-head: 1.1;
	--lh-body: 1.6;

	/* Ruimte */
	--rand: 0.625rem;
	--gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
	--wrap: 74rem;
	--wrap-smal: 46rem;
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
	--sp-6: clamp(3.25rem, 2.5rem + 3vw, 5rem);
	--sp-7: clamp(4.25rem, 3.25rem + 4.2vw, 7rem);

	/* Vorm: rechter dan voorheen, met kleine ronde hoekjes */
	--radius: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-sm: 0.25rem;
	--radius-pill: 0.25rem;
	--btn-h: 3.375rem;
	--btn-px: 1.75rem;
	--topbar-h: 2.5rem;
	--header-h: 4.875rem;

	/* Beweging */
	--ease: cubic-bezier(0.625, 0.05, 0, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur: 0.6s;

	/* Patronen: het sterpatroon uit het houtwerk en de golven van de Noordzee */
	--patroon-ster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%23d8b46a' stroke-width='1'%3E%3Cpath d='M28.6 28.6h30.8v30.8H28.6z'/%3E%3Cpath d='M44 22.2 65.8 44 44 65.8 22.2 44z'/%3E%3Cpath d='M0 44h22.2M65.8 44H88M44 0v22.2M44 65.8V88'/%3E%3C/g%3E%3C/svg%3E");
	--patroon-golf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='36' viewBox='0 0 96 36'%3E%3Cg fill='none' stroke='%23ecd7a6' stroke-opacity='.55' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 9q12-8 24 0t24 0 24 0 24 0'/%3E%3Cpath d='M-24 27q12-8 24 0t24 0 24 0 24 0 24 0 24 0'/%3E%3C/g%3E%3C/svg%3E");

	color-scheme: light;
}

@media (max-width: 47.99em) {
	:root {
		--btn-h: 3.125rem;
		--btn-px: 1.35rem;
		--header-h: 4.25rem;
		--topbar-h: 2.25rem;
	}
}