/* =================================================================
   ToegankelijkeContent.nl — Tokens & utility classes
   Aliassen van WordPress presets naar korte brand-namen, plus
   .tc-* utility-klassen voor headings, body, eyebrow, links en
   accessibility (focus, sr-only, skip-link, reduced-motion).
   ================================================================= */

:root {
	/* ----- Color aliases ----- */
	--blue-50:   var(--wp--preset--color--blue-50);
	--blue-500:  var(--wp--preset--color--blue-500);
	--blue-700:  var(--wp--preset--color--blue-700);
	--blue-800:  var(--wp--preset--color--blue-800);
	--blue-900:  var(--wp--preset--color--blue-900);

	--green-50:  var(--wp--preset--color--green-50);
	--green-400: var(--wp--preset--color--green-400);
	--green-600: var(--wp--preset--color--green-600);
	--green-700: var(--wp--preset--color--green-700);
	--green-900: var(--wp--preset--color--green-900);

	--gray-50:   var(--wp--preset--color--gray-50);
	--gray-400:  var(--wp--preset--color--gray-400);
	--gray-700:  var(--wp--preset--color--gray-700);
	--gray-900:  var(--wp--preset--color--gray-900);

	--white:     #FFFFFF;
	--black:     #000000;

	/* ----- Semantic foreground ----- */
	--fg-default:         var(--gray-900);
	--fg-body:            var(--gray-700);
	--fg-muted:           var(--gray-400);
	--fg-title:           var(--blue-900);
	--fg-on-inverse:      var(--white);
	--fg-on-accent:       var(--blue-900);
	--fg-link:            var(--blue-700);
	--fg-link-on-inverse: var(--green-400);
	--fg-success:         var(--green-700);

	/* ----- Interactive ----- */
	--interactive-primary:       var(--blue-700);
	--interactive-primary-hover: var(--blue-800);
	--interactive-primary-text:  var(--white);
	--interactive-accent:        var(--green-400);
	--interactive-accent-hover:  #11C485;
	--interactive-accent-text:   var(--blue-900);

	/* ----- Borders & focus ----- */
	--border-subtle:  #E5E6EC;
	--border-default: #D5D7E0;
	--border-strong:  var(--gray-400);
	--border-focus:   var(--blue-700);

	/* ----- Fonts (aliassen) ----- */
	--font-heading: var(--wp--preset--font-family--encode-sans);
	--font-body:    var(--wp--preset--font-family--inter);

	/* ----- Motion ----- */
	--ease-standard: cubic-bezier(0.2, 0, 0, 1);
	--dur-fast:   120ms;
	--dur-normal: 200ms;
	--dur-slow:   320ms;
}

/* =================================================================
   Type-utilities. Headings in Encode Sans, body in Inter. Headings
   zijn blue-900 op wit, body is gray-700. Gebruik nooit gray-400
   voor body-tekst (contrast onder AA).

   We stylen zowel de utility-klassen (.tc-h1 etc., handig voor
   paragraph-blokken die als heading moeten ogen) als de bare HTML-
   elementen (h1 t/m h6), zodat de Heading-block uit Gutenberg ook
   zonder klasse correct gerenderd wordt. Dit fungeert tegelijk als
   safety net mocht theme.json-parsing in WP haperen.
   ================================================================= */

h1,
.tc-h1,
h2,
.tc-h2,
h3,
.tc-h3,
h4,
.tc-h4,
h5,
.tc-h5,
h6,
.tc-h6 {
	font-family: var(--font-heading);
	color: var(--fg-title);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
}

h1, .tc-h1 { font-size: 3.75rem; font-weight: 800; }
h2, .tc-h2 { font-size: 3rem;    font-weight: 700; }
h3, .tc-h3 { font-size: 2.25rem; font-weight: 700; line-height: 1.25; }
h4, .tc-h4 { font-size: 1.5rem;  font-weight: 600; line-height: 1.25; }
h5, .tc-h5 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
h6, .tc-h6 { font-size: 1.125rem;font-weight: 600; line-height: 1.25; }

.tc-eyebrow {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fg-muted);
}

.tc-lead {
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--fg-body);
	line-height: 1.65;
	text-wrap: pretty;
}

.tc-body {
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	color: var(--fg-body);
	line-height: 1.65;
	text-wrap: pretty;
}

.tc-small {
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--fg-body);
	line-height: 1.5;
}

.tc-caption {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--fg-muted);
	line-height: 1.5;
}

.tc-link {
	color: var(--fg-link);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1.5px;
	transition: color var(--dur-fast) var(--ease-standard);
}
.tc-link:hover {
	color: var(--interactive-primary-hover);
	text-decoration-thickness: 2px;
}

/* Op donkerblauwe achtergrond worden links groen-400 (8.1:1 AAA) */
.tc-on-inverse .tc-link        { color: var(--fg-link-on-inverse); }
.tc-on-inverse .tc-link:hover  { color: var(--white); }

/* =================================================================
   Accessibility utilities
   ================================================================= */

*:focus-visible {
	outline: 3px solid var(--border-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.tc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.tc-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	background: var(--blue-700);
	color: var(--white);
	padding: 12px 20px;
	border-radius: 8px;
	z-index: 9999;
	font-family: var(--font-body);
	font-weight: 600;
}
.tc-skip-link:focus { top: 16px; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* =================================================================
   Site-template fixes voor Twenty Twenty-Five parent.
   ================================================================= */

/* Verberg de automatische pagina-titel ("Home") op alle pagina's met de
   homepage-template, of waar de TC hero sectie aanwezig is. Twenty
   Twenty-Five rendert de titel via .wp-block-post-title in de page-
   template. We verbergen 'm op de Home en op alle template-niveau-
   pagina's die de hero hebben. */
.home .wp-block-post-title,
.page-template-default .wp-block-post-title:has(+ * .tc-hero),
body:has(.tc-hero) .wp-block-post-title {
	display: none !important;
}

/* Reset de default padding/margin die Twenty Twenty-Five op het <main>-element
   en .wp-site-blocks zet. De parent-template plaatst een inline
   margin-top:var(--wp--preset--spacing--60) op <main id="wp--skip-link--target">,
   plus global-padding links/rechts. Onze full-width secties bepalen hun eigen
   ruimte, dus we resetten dit hard.

   We targeten zowel het skip-link-target id (zeer specifiek, wint van inline)
   als de generieke main.wp-block-group. Het id-target heeft genoeg specificity
   om de inline margin te verslaan. */
main#wp--skip-link--target,
main.wp-block-group.has-global-padding {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* De wp-site-blocks wrapper en de losse blokken erbinnen mogen ook geen
   verticale ruimte forceren tussen header, main en footer. */
.wp-site-blocks {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}
.wp-site-blocks > footer.wp-block-template-part,
footer.wp-block-template-part {
	margin-top: 0 !important;
}

/* Mobile nav alleen tonen onder 1024px én alleen als 'm is open-getoggled.
   De :has-selector in de header CSS bleek niet in elke browser werkend, dus
   we forceren 'm hier expliciet. */
.tc-mobile-nav { display: none; }
.tc-mobile-nav.is-open { display: block; }
@media (min-width: 1025px) {
	.tc-mobile-nav,
	.tc-mobile-nav.is-open { display: none !important; }
}


/* =================================================================
   GLOBAL OVERFLOW PROTECTION
   Voorkomt dat secties of inner-containers ooit breder zijn dan de
   viewport. Dit lost de "items vallen rechts af"-bug op alle secties
   in één keer op. Werkt op desktop en mobiel.
   ================================================================= */

html, body {
	overflow-x: hidden;
	max-width: 100vw;
}

/* Alle Custom HTML blocks (alle TC secties) en hun directe wrappers
   mogen niet buiten de viewport vallen. */
.tc-hero,
.tc-services,
.tc-stats,
.tc-why,
.tc-approach,
.tc-clients,
.tc-testimonial,
.tc-blog,
.tc-cta {
	width: 100%;
	max-width: 100vw;
	overflow-x: clip;
	box-sizing: border-box;
}

/* Zorg dat ALLE elementen box-sizing border-box gebruiken zodat padding
   nooit meer breedte toevoegt dan verwacht. */
.tc-hero *, .tc-services *, .tc-stats *, .tc-why *,
.tc-approach *, .tc-clients *, .tc-testimonial *,
.tc-blog *, .tc-cta * {
	box-sizing: border-box;
	max-width: 100%;
}

/* =================================================================
   MOBIELE PADDING-CORRECTIE
   De inline padding van 24px in de Custom HTML blocks is op mobiel te
   krap. Hier zetten we 'm globaal aan op 20px onder 720px, 16px onder
   480px. Alle secties pakken dit automatisch op.
   ================================================================= */

@media (max-width: 720px) {
	.tc-hero > div > div,
	.tc-services > div,
	.tc-stats > div,
	.tc-why > div,
	.tc-approach > div,
	.tc-clients > div,
	.tc-testimonial > div,
	.tc-blog > div,
	.tc-cta > div {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Verticale padding compacter op mobiel: secties zijn nu 112px boven
	   en onder, dat is 30% van het scherm. 64px is genoeg. */
	.tc-services > div,
	.tc-why > div,
	.tc-approach > div,
	.tc-clients > div,
	.tc-testimonial > div,
	.tc-blog > div {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
	}

	/* Hero specifiek: nog compacter en heading mag krimpen. */
	.tc-hero h1 {
		font-size: clamp(34px, 9vw, 56px) !important;
		line-height: 1 !important;
	}

	/* Service cards stack zonder horizontale overflow */
	.tc-services [class*="grid"],
	.tc-blog [class*="grid"],
	.tc-approach [class*="grid"] {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	/* CTA-strip op mobiel: knoppen volle breedte */
	.tc-cta .tc-cta-buttons,
	.tc-cta > div > div > div:last-child {
		width: 100%;
	}
	.tc-cta a {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.tc-hero > div > div,
	.tc-services > div,
	.tc-stats > div,
	.tc-why > div,
	.tc-approach > div,
	.tc-clients > div,
	.tc-testimonial > div,
	.tc-blog > div,
	.tc-cta > div {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* =================================================================
   DESKTOP WITRUIMTE-FIX (terugkerende bug)
   De Twenty Twenty-Five page-template plaatst soms opnieuw margin-top
   op <main> nadat content gewijzigd is. We dwingen het hard af.
   ================================================================= */

main#wp--skip-link--target,
main.wp-block-group.has-global-padding,
.wp-site-blocks main,
.wp-site-blocks > main {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}


/* =================================================================
   STRONG MARGIN/PADDING RESET (v2)
   De page-template plaatst dynamisch margins terug na block-edits.
   We dwingen het hard af met meerdere selectors.
   ================================================================= */

/* Main-element mag geen verticale ruimte hebben tussen header en hero */
body main#wp--skip-link--target,
body main.wp-block-group.has-global-padding,
body.home main,
body.page-template-default main {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Pagina-titel verbergen (komt soms terug na template-edits) */
.wp-block-post-title,
h1.wp-block-post-title,
.entry-content > h1.has-text-align-center:first-child {
	display: none !important;
}

/* Entry-content reset: de negative margins waardoor secties scheef gaan */
.entry-content.alignfull,
.wp-block-post-content.alignfull,
.wp-block-post-content {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Zorg dat het container-blok BINNEN main ook geen marges erft */
main > .wp-block-group.has-global-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}

/* En binnen elke TC-sectie: zorg dat de directe child (de witte HTML-div)
   centered is en padding krijgt van de breakpoint-regels */
.tc-hero > div,
.tc-services > div,
.tc-stats > div,
.tc-why > div,
.tc-approach > div,
.tc-clients > div,
.tc-testimonial > div,
.tc-blog > div,
.tc-cta > div {
	margin-left: auto !important;
	margin-right: auto !important;
}