/*
 * Sticky header: achtergrond, blur, schaduw en de kleur van links en iconen
 * wisselen zonder overgang.
 *
 * Blocksy laat achtergrond, blur en schaduw in 0,2 s overvloeien
 * (main.min.css). Scrol je snel terug naar boven, dan zet Blocksy Companion
 * de header in één keer terug op transparant (sticky/fade-slide.js), en
 * vervaagt de witte balk met blur nog even boven de hero. Dezelfde selectors
 * als Blocksy, en dit bestand laadt erna, dus het wint zonder zwaardere
 * selector.
 *
 * Het inschuiven blijft: [data-sticky*=slide][data-sticky*=yes-end] en
 * yes-hide-end zetten hun eigen transition op transform, en die regels zijn
 * zwaarder dan deze.
 */
[data-sticky],
[data-sticky] [data-row],
[data-sticky] [data-row*=boxed] > div {
	transition: none;
}

/*
 * Links en iconen zijn transparant wit en sticky donker. Blocksy laat links
 * overvloeien met `a { transition: var(--theme-transition) }` en iconen met
 * `var(--theme-icon-transition, fill 0.12s ...)`. Beide variabelen hier leeg,
 * alleen in de header. Hover wisselt daarmee ook meteen.
 *
 * [class*=ct-toggle] svg (het zoekicoon) zet --theme-icon-transition op het
 * icoon zelf, dus daar moet het op het icoon. De draai van een toggle blijft.
 */
#header [data-sticky] {
	--theme-transition: none;
	--theme-icon-transition: none;
}

#header [data-sticky] [class*=ct-toggle] svg {
	--theme-icon-transition: transform 0.15s ease-out;
}

/*
 * Op een telefoon blijft :hover na een tik hangen. Het mandje bleef na het
 * sluiten oranje staan, in de vaste pil grijs, en zoeken ook (Aart, 11
 * oktober 2026). Zonder muis is hover hier gelijk aan de gewone stand, zoals
 * bij de knop Menu in mobiel-menu.css. Op de elementen waar Blocksy de
 * kleuren zet. Live sinds 11 oktober 2026.
 */
@media (hover: none) {
	#header [data-id="search"],
	#header [data-id="cart"] .ct-cart-item,
	#header [data-id="account"] .ct-account-item {
		--theme-icon-hover-color: var(--theme-icon-color);
	}
}