/* AW module: Sticky header — gebruikt de class elementor-sticky--effects die Elementor
   na de "effects offset" op de sticky header zet. Kleuren via Elementor Global Colors. */

.awcf-header {
	transition: background-color .3s ease, box-shadow .3s ease;

	.awcf-header-inner { transition: padding .3s ease; }

	&.elementor-sticky--effects {
		box-shadow: 0 6px 24px rgba(27, 26, 28, .08);

		.awcf-header-inner {
			--padding-top: 16px;
			--padding-bottom: 16px;
		}
	}
}

/* Homepage: transparant over de hero, wit na scrollen */
.awcf-header-hero.elementor-sticky--effects {
	background-color: var(--e-global-color-sa_wit, #fff) !important;
	background-image: none !important;

	.elementor-nav-menu--main .elementor-item,
	.elementor-nav-menu--main .elementor-item:hover,
	.elementor-nav-menu--main .elementor-item.elementor-item-active {
		color: var(--e-global-color-accent, #1B1A1C) !important;
	}
	.elementor-menu-toggle {
		color: var(--e-global-color-accent, #1B1A1C) !important;
		fill: var(--e-global-color-accent, #1B1A1C) !important;
	}
	.elementor-menu-toggle svg { fill: var(--e-global-color-accent, #1B1A1C) !important; }
}

@media (max-width: 767px) {
	.awcf-header.elementor-sticky--effects .awcf-header-inner {
		--padding-top: 12px;
		--padding-bottom: 12px;
	}
}