/**
 * Ondersteunende CSS voor de zoekbalk-integratie van typewriter.js.
 *
 * De overlay ligt bovenop de echte input en verdwijnt bij focus/invoer
 * (zie typewriter.js). pointer-events: none zorgt dat klikken gewoon
 * doorgaan naar de echte input eronder.
 *
 * Let op: "left" én "top" hieronder zijn startpunten — pas ze aan op de
 * eigen opbouw van de input in je Kadence-pattern (padding, en of de
 * wrapper naast de input nog andere elementen bevat, zoals een knop),
 * zodat de overlay-tekst precies uitlijnt met waar de native
 * placeholder-tekst ook zou staan.
 */
.js-search-typewriter {
	position: relative;
}

.js-search-overlay {
	position: absolute;
	top: 50%; 
	left: 1rem;
	transform: translateY(-50%);
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

/**
 * Mask voor het verticale woord-wisseleffect (zie typewriter.js).
 * .js-typed-suffix zelf is de geclipte "kijkopening"; de interne spans
 * (.js-typed-suffix-inner, één per woord, aangemaakt door JS) worden
 * daarbinnen absoluut gepositioneerd en verticaal in-/uitgeschoven.
 *
 * BELANGRIJK: height:1em is hier bewust nodig. Omdat de interne spans
 * position:absolute hebben (nodig om twee woorden tegelijk te kunnen
 * tonen tijdens de overgang), tellen ze NIET mee voor de auto-hoogte
 * van deze ouder — zonder een expliciete hoogte zou deze mask
 * terugvallen op (bijna) 0px, en zou overflow:hidden de tekst dus
 * volledig wegknippen, ook al staat de content er wel degelijk in.
 */
.js-typed-suffix {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	white-space: nowrap;
	height: 22px;
	line-height: 1;
}

.js-typed-suffix-inner {
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	line-height: 1;
}