/*
 * EgyTech custom styles -- header.css
 * Scope: Elementor header template 22411 + sticky-header plugin
 * Moved out of WordPress Additional CSS on 2026-09-21 so that a change
 * to one area can no longer overwrite unrelated sections.
 * See docs/SITE-CUSTOMIZATION-MAP.md
 */

/* =========================================================================
   NAVIGATION ACTIVE/HOVER INDICATOR
   The main nav (<nav class="... e--pointer-underline e--animation-grow">)
   already uses Elementor Pro's own native animated pointer-underline
   (.elementor-item:after), confirmed live in
   elementor-pro/assets/css/widget-nav-menu.min.css. Its default color is
   #3f444b (dark gray) -- recoloring that existing indicator to brand gold,
   rather than adding a second competing underline, avoids a doubled-up
   underline look under nav items. Elementor already animates this pointer's
   width/position with its own transition -- only the color changes here.
   ========================================================================= */
.e--pointer-underline .elementor-item:after,
.e--pointer-double-line .elementor-item:after,
.e--pointer-double-line .elementor-item:before,
.e--pointer-overline .elementor-item:after,
.e--pointer-overline .elementor-item:before {
	background-color: #F4B41A;
}

.site-header .site-navigation a,
.elementor-nav-menu .elementor-item {
	color: #035292;
	text-decoration: none;
}

.site-header .site-navigation a:hover,
.site-header .site-navigation a:focus,
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item:focus,
.elementor-nav-menu .elementor-item.elementor-item-active {
	color: #035292;
	text-decoration: none;
}


/* =========================================================================
   STICKY HEADER -- smoother transition
   ROOT CAUSE (confirmed via the live header's own data-settings and the
   Sticky Header Effects plugin's she-header.js / she-header-style.css):
   this header runs in TRANSPARENT mode ("transparent":"yes") -- at the top
   of the page it is `position: absolute` (floating over the hero image,
   see .she-header-transparent-yes in the plugin CSS). Past 60px of scroll
   ("scroll_distance":60) its JS swaps the class to `she-header`, which the
   plugin's CSS makes `position: fixed !important`.
   A CSS `transition` can smooth color/shadow/size changes, but `position`
   itself is a discrete property -- browsers cannot interpolate between
   absolute and fixed, so no amount of transition-timing tuning (what the
   previous pass tried) can smooth that specific jump. Re-implementing the
   header with a different positioning strategy (e.g. `position: sticky`)
   would remove the intentional transparent-over-hero effect at the top of
   the page, which is a design change, not a smoothness fix, so that was
   deliberately avoided here.
   FIX: mask the instant position swap with a short fade/slide-in *animation*
   on the `.she-header` (stuck) state. Unlike a `transition`, a CSS
   `animation` always plays its keyframes when the rule starts applying --
   it doesn't need a "before" value to interpolate from, so it works
   correctly even though the class is added synchronously by the plugin's
   scroll handler. The header still becomes fixed instantly (unavoidable),
   but instead of instantly snapping into full view, it eases in --
   which is what actually reads as "smooth" to the eye. No JS was touched;
   this is pure CSS layered on top of the existing plugin. */
@keyframes sheHeaderStickyIn {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.she-header {
	animation: sheHeaderStickyIn 320ms ease-out both;
}

/* Symmetric, lighter touch for the reverse direction (scrolling back up
   past the threshold, header returns to its transparent/absolute resting
   state over the hero) -- same masking technique, shorter/subtler since
   this direction is inherently less jarring (it only triggers near the top
   of the page, where the absolute-positioned header is already in view). */
@keyframes sheHeaderRestoreIn {
	from {
		opacity: 0.4;
	}
	to {
		opacity: 1;
	}
}

.she-header-transparent-yes {
	animation: sheHeaderRestoreIn 250ms ease-out both;
}

.she-header-yes,
.she-header-yes.e-con,
.she-header {
	transition: background-color 320ms ease-out, box-shadow 320ms ease-out,
		padding 320ms ease-out, height 320ms ease-out, border-color 320ms ease-out !important;
}

.she-header-yes .elementor-widget-theme-site-logo img,
.she-header-yes .elementor-widget-image img,
.she-header-yes .logo img {
	transition: all 320ms ease-out !important;
}

/* Respect users who've asked their OS/browser to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.she-header,
	.she-header-transparent-yes {
		animation: none;
	}
}