/*
 * GTGF v21: premium visuele basislaag voor Mijn GTGF, Inloggen en Join/Contact.
 *
 * Dit bestand herdefinieert alleen bestaande, breed gebruikte CSS-variabelen
 * (--v14-display, --v14-body, --v14-paper, --v14-shadow, --gtgf-v15-*) en
 * herstijlt een klein aantal gedeelde componentklassen die op alle drie de
 * pagina's voorkomen (.button, .eyebrow, .page-hero, .section--paper,
 * .section--black, formuliervelden, .reveal-animatie). Omdat dit bestand
 * alleen wordt geladen op deze drie pagina's (zie gtgf_premium_redesign_assets()
 * in functions.php), werkt geen enkele regel hierin door naar de rest van de
 * site, ook al zijn de klassen zelf wel sitebreed gedeeld.
 *
 * --v14-display wijst nu naar een echt geladen lettertype (Inter, via Google
 * Fonts). Voorheen viel deze variabele terug op Arial Black/Impact, omdat er
 * nergens een echt display-font werd geladen. --v14-body wees al naar Inter,
 * maar dat lettertype werd nergens daadwerkelijk ingeladen, dus de site
 * toonde in de praktijk gewoon de systeemfont. Beide zijn nu actief.
 *
 * Uitzetten: define( 'GTGF_PREMIUM_REDESIGN', false ); in wp-config.php (zie
 * functions.php). Uitgeschakeld wordt geen van de v21-bestanden geladen en
 * valt alles terug op de situatie van voor deze redesign.
 */

:root {
	/* Eigen, ongebruikte namen zodat niets hier per ongeluk al ergens anders
	   betekenis had. */
	--gtp-orange: #ff5a00;
	--gtp-orange-deep: #d94a00;
	--gtp-orange-soft: rgba(255, 90, 0, .1);
	--gtp-black: #050505;
	--gtp-ink: #121110;
	--gtp-paper: #f6f4ee;
	--gtp-white: #fff;
	--gtp-line: rgba(5, 5, 5, .1);
	--gtp-line-soft: rgba(5, 5, 5, .065);
	--gtp-text-muted: rgba(5, 5, 5, .62);
	--gtp-text-faint: rgba(5, 5, 5, .46);
	--gtp-white-line: rgba(255, 255, 255, .14);
	--gtp-white-muted: rgba(255, 255, 255, .68);
	--gtp-white-faint: rgba(255, 255, 255, .46);
	--gtp-radius-l: 24px;
	--gtp-radius-m: 16px;
	--gtp-radius-s: 10px;
	--gtp-shadow-card: 0 2px 6px rgba(5, 5, 5, .04), 0 22px 54px rgba(5, 5, 5, .08);
	--gtp-shadow-card-hover: 0 6px 14px rgba(5, 5, 5, .07), 0 30px 70px rgba(5, 5, 5, .13);
	--gtp-shadow-dark: 0 30px 80px rgba(0, 0, 0, .5);
	--gtp-ease: cubic-bezier(.16, 1, .3, 1);
	--gtp-font: 'Inter', -apple-system, 'Segoe UI', Arial, Helvetica, sans-serif;

	/* Bestaande, breed gebruikte variabelen: hergebruikt in plaats van
	   vervangen, zodat alle bestaande selectors die er al naar verwijzen
	   automatisch meeliften. */
	--v14-display: var(--gtp-font);
	--v14-body: var(--gtp-font);
	--v14-paper: var(--gtp-paper);
	--v14-line: var(--gtp-line);
	--v14-line-light: var(--gtp-white-line);
	--v14-shadow: var(--gtp-shadow-card);
	--gtgf-v15-paper: var(--gtp-paper);
	--gtgf-v15-line: var(--gtp-line);
}

/* ---- Typografie ---- */

.gtgf-v181000-app,
.gtgf-v190500-dash,
body.gtp21-dash,
body.gtp21-login,
body.gtp21-join {
	font-family: var(--gtp-font);
}

.gtgf-v181000-app h1, .gtgf-v190500-dash h1,
body.gtp21-login h1,
body.gtp21-join h1,
body.gtp21-dash h1,
body.gtp21-dash h2,
body.gtp21-login h2,
body.gtp21-join h2,
body.gtp21-dash h3,
body.gtp21-login h3,
body.gtp21-join h3 {
	font-family: var(--gtp-font) !important;
	font-weight: 850;
	letter-spacing: -.02em;
	text-wrap: balance;
}

body.gtp21-login .page-hero h1,
body.gtp21-join .page-hero h1 {
	font-weight: 900 !important;
	letter-spacing: -.03em !important;
}

.eyebrow {
	font-family: var(--gtp-font);
	font-weight: 800 !important;
	letter-spacing: .14em !important;
	font-size: 11px !important;
}

/* ---- Knoppen: zelfde markup/gedrag, verfijnde uitvoering ---- */

body.gtp21-dash .button,
body.gtp21-login .button,
body.gtp21-join .button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 24px;
	border-radius: var(--gtp-radius-s);
	background: linear-gradient(180deg, var(--gtp-orange), var(--gtp-orange-deep));
	border: 1px solid var(--gtp-orange-deep);
	color: var(--gtp-white);
	font-family: var(--gtp-font);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .01em;
	box-shadow: 0 1px 2px rgba(217, 74, 0, .18), 0 14px 30px rgba(255, 90, 0, .22);
	transition: transform .35s var(--gtp-ease), box-shadow .35s var(--gtp-ease), filter .35s var(--gtp-ease);
}
body.gtp21-dash .button:hover,
body.gtp21-login .button:hover,
body.gtp21-join .button:hover,
body.gtp21-dash .button:focus-visible,
body.gtp21-login .button:focus-visible,
body.gtp21-join .button:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(217, 74, 0, .22), 0 20px 44px rgba(255, 90, 0, .3);
	filter: brightness(1.03);
}
body.gtp21-dash .button:active,
body.gtp21-login .button:active,
body.gtp21-join .button:active {
	transform: translateY(0);
}
body.gtp21-dash .button--dark,
body.gtp21-login .button--dark,
body.gtp21-join .button--dark {
	background: linear-gradient(180deg, #1a1a1a, var(--gtp-black));
	border-color: var(--gtp-black);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .28);
}
body.gtp21-dash .button--dark:hover,
body.gtp21-login .button--dark:hover,
body.gtp21-join .button--dark:hover {
	box-shadow: 0 2px 4px rgba(0, 0, 0, .32), 0 20px 44px rgba(0, 0, 0, .34);
}
body.gtp21-dash .button--outline-light,
body.gtp21-login .button--outline-light,
body.gtp21-join .button--outline-light {
	background: transparent;
	border-color: var(--gtp-white-line);
	color: var(--gtp-white);
	box-shadow: none;
}
body.gtp21-dash .button--outline-light:hover,
body.gtp21-login .button--outline-light:hover,
body.gtp21-join .button--outline-light:hover {
	border-color: var(--gtp-white-muted);
	background: rgba(255, 255, 255, .06);
	box-shadow: none;
}

/* ---- Secties: paper en black, met iets meer lucht en een subtiele textuur ---- */

body.gtp21-login .section--paper,
body.gtp21-join .section--paper {
	background: var(--gtp-paper) !important;
}
body.gtp21-login .section--black,
body.gtp21-join .section--black {
	background: var(--gtp-black) !important;
}

/* ---- Formulieren: iets ruimer, duidelijkere focus ---- */

body.gtp21-login input[type="text"],
body.gtp21-login input[type="email"],
body.gtp21-login input[type="password"],
body.gtp21-join input[type="text"],
body.gtp21-join input[type="email"],
body.gtp21-join input[type="password"],
body.gtp21-dash input[type="text"],
body.gtp21-dash input[type="email"],
body.gtp21-dash input[type="password"],
body.gtp21-dash input[type="number"],
body.gtp21-dash select,
body.gtp21-dash textarea {
	border-radius: var(--gtp-radius-s) !important;
	border: 1px solid var(--gtp-line) !important;
	transition: border-color .2s var(--gtp-ease), box-shadow .2s var(--gtp-ease);
}
body.gtp21-login input:focus-visible,
body.gtp21-join input:focus-visible,
body.gtp21-dash input:focus-visible,
body.gtp21-dash select:focus-visible,
body.gtp21-dash textarea:focus-visible {
	outline: none !important;
	border-color: var(--gtp-orange) !important;
	box-shadow: 0 0 0 4px var(--gtp-orange-soft) !important;
}

/* Zichtbare, consistente focusring voor toetsenbordgebruik, overal op deze drie pagina's. */
body.gtp21-dash a:focus-visible,
body.gtp21-dash button:focus-visible,
body.gtp21-login a:focus-visible,
body.gtp21-login button:focus-visible,
body.gtp21-join a:focus-visible,
body.gtp21-join button:focus-visible {
	outline: 2px solid var(--gtp-orange) !important;
	outline-offset: 3px !important;
	border-radius: 4px;
}

/* ---- Rustige, altijd-veilige intro-animatie ----
   Belangrijk: de basisstaat van .reveal wordt hier NIET op opacity 0 gezet.
   Alleen het moment waarop JS (theme.js) al besloten heeft dat een element
   zichtbaar moet zijn (de klasse .is-visible) krijgt een korte inkomende
   animatie. Als JS om wat voor reden dan ook niet zou draaien, blijft alles
   gewoon normaal zichtbaar; er is dus geen scenario waarin content onzichtbaar
   blijft hangen. */
@media (prefers-reduced-motion: no-preference) {
	body.gtp21-dash .reveal.is-visible,
	body.gtp21-login .reveal.is-visible,
	body.gtp21-join .reveal.is-visible {
		animation: gtp-reveal .6s var(--gtp-ease) both;
	}
	@keyframes gtp-reveal {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}
}