/* ==========================================================
   Flerque Scribble Highlight for Elementor - Frontend styles
   Alle class-namen zijn geprefixt met 'fsh-' en/of 'fsh-flerque-scribble-*'
   om botsingen te voorkomen.

   Alles is em-based en schaalt mee met de font-size van de heading.
   De breedte wordt altijd afgeleid uit de breedte van het woord zelf
   (+ horizontale padding), zodat één of meerdere woorden gelijk goed
   uit de verf komen, op elk schermformaat.
   ========================================================== */

.fsh-word,
.fsh-flerque-scribble-word {
	position: relative;
	display: inline-block;
	/* Voorkom dat samengevoegde woorden (bijv. 3,4,5) afbreken op een nieuwe regel */
	white-space: nowrap;
}

.fsh-svg-wrap {
	/* Standaard waarden (in em, alles schaalt met font-size) */
	--fsh-color: #FF6B1A;
	--fsh-stroke-width: 0.08em;
	--fsh-pad-x: 0.15em;
	--fsh-pad-y: 0.12em;
	--fsh-offset-y: 0.03em;
	--fsh-duration: 900ms;
	--fsh-delay: 200ms;

	color: var(--fsh-color);
	position: absolute;
	pointer-events: none;
	z-index: 0;

	/* Rekt zich UIT over de volle breedte van het woord, plus padding aan beide kanten.
	   Dit werkt altijd: of het nu 1 woord of 3 woorden is, desktop of mobiel. */
	left: calc(-1 * var(--fsh-pad-x));
	right: calc(-1 * var(--fsh-pad-x));
}

/* ==========================================================
   CIRCLE-family: positioneert over de hele hoogte van het woord + padding
   ========================================================== */
.fsh-svg-wrap.fsh-family-circle {
	top: calc(-1 * var(--fsh-pad-y) + var(--fsh-offset-y));
	bottom: calc(-1 * var(--fsh-pad-y) - var(--fsh-offset-y));
}

/* ==========================================================
   UNDERLINE-family: alleen onderaan, gebaseerd op strokewidth + pad_y
   ========================================================== */
.fsh-svg-wrap.fsh-family-underline {
	/* Zit een stukje onder het woord. Hoogte is afhankelijk van lijn-dikte en padding. */
	top: auto;
	bottom: calc(-0.05em - var(--fsh-offset-y));
	height: calc(var(--fsh-stroke-width) * 4 + 0.25em);
}

/* Underline-2 (heen & weer, doorlopend pad) — iets extra hoogte omdat
   het pad meerdere keren heen en weer gaat in verticale richting */
.fsh-svg-wrap.fsh-type-underline-2 {
	height: calc(var(--fsh-stroke-width) * 4 + 0.3em);
	bottom: calc(-0.08em - var(--fsh-offset-y));
}

/* Underline-3 (handgetekende marker-streep, doorlopend pad met terugcurve) */
.fsh-svg-wrap.fsh-type-underline-3 {
	height: calc(var(--fsh-stroke-width) * 4 + 0.3em);
	bottom: calc(-0.08em - var(--fsh-offset-y));
}

/* Underline-4 (rechte streep met haakjes aan beide uiteinden) — de haakjes
   steken omhoog dus moet wat extra hoogte hebben, maar de streep zelf ligt
   alsnog dicht onder het woord */
.fsh-svg-wrap.fsh-type-underline-4 {
	height: calc(var(--fsh-stroke-width) * 3 + 0.45em);
	bottom: calc(-0.05em - var(--fsh-offset-y));
}

.fsh-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.fsh-svg .fsh-path {
	stroke: currentColor;
	stroke-width: var(--fsh-stroke-width);
	/* non-scaling-stroke zorgt dat de dikte gelijk blijft ondanks preserveAspectRatio=none */
	vector-effect: non-scaling-stroke;
}

/* Zorg dat de tekst boven de SVG blijft staan */
.fsh-word > :not(.fsh-svg-wrap) {
	position: relative;
	z-index: 1;
}

/* ==========================================================
   Animaties (stroke-dasharray truc)
   JS berekent de werkelijke pixel-lengte van het pad in screen-space
   en zet die als CSS-variabele --fsh-path-length, plus directe
   stroke-dasharray/dashoffset op het path zelf.

   BELANGRIJK: voor wraps die straks gaan animeren zetten we standaard
   al een grote stroke-dashoffset, zodat het pad ONMIDDELLIJK onzichtbaar
   is bij paginarendering — anders zie je het kort flashen voordat JS
   gemeten heeft. JS overschrijft deze waarde met de exacte gemeten lengte.
   ========================================================== */

/* Defaults: pad volledig zichtbaar (geen dasharray) */
.fsh-svg .fsh-path {
	stroke-dasharray: none;
}

/* Bij animatie: pad direct verborgen, met grote safety-waarde.
   JS overschrijft dit zo snel mogelijk met de exacte gemeten waarde. */
.fsh-animate .fsh-svg .fsh-path {
	stroke-dasharray: 5000px;
	stroke-dashoffset: 5000px;
}

@keyframes fsh-draw {
	from { stroke-dashoffset: var(--fsh-path-length, 5000px); }
	to   { stroke-dashoffset: 0; }
}

/* Viewport trigger */
.fsh-trigger-viewport.is-visible .fsh-svg .fsh-path {
	animation: fsh-draw var(--fsh-duration) ease-out var(--fsh-delay) forwards;
}

/* Load trigger */
.fsh-trigger-load.is-ready .fsh-svg .fsh-path {
	animation: fsh-draw var(--fsh-duration) ease-out var(--fsh-delay) forwards;
}

/* Hover trigger */
.fsh-trigger-hover .fsh-svg .fsh-path {
	transition: stroke-dashoffset var(--fsh-duration) ease-out;
}
.fsh-word:hover .fsh-trigger-hover .fsh-svg .fsh-path {
	stroke-dashoffset: 0;
	transition-delay: var(--fsh-delay);
}

/* Respecteer prefers-reduced-motion: skip animatie en toon direct */
@media (prefers-reduced-motion: reduce) {
	.fsh-animate .fsh-svg .fsh-path {
		animation: none !important;
		stroke-dashoffset: 0 !important;
		stroke-dasharray: none !important;
		transition: none !important;
	}
}

/* ==========================================================
   Responsive
   Alles is al em-based dus schaalt mee. We maken de lijn op mobiel
   iets dikker zodat hij zichtbaar blijft bij kleine font-sizes.
   ========================================================== */
@media (max-width: 767px) {
	.fsh-svg-wrap {
		/* Iets meer lijn-presence op mobiel voor betere leesbaarheid */
		--fsh-stroke-width: calc(var(--fsh-stroke-width) * 1.1);
	}
}