/* assets/css/site-animations.css */

/* ---------------------------------------------------------------
   Footer columns: fade-in-up as they scroll into view.
   Classes are added by assets/js/site-animations.js -- .farhang-footer-col
   is the "before reveal" state, .farhang-footer-col--visible is added
   once the column enters the viewport (see IntersectionObserver there).
   Both classes are only added when JS actually runs the reveal (skipped
   for prefers-reduced-motion / the site's Reduced Motion toggle / no
   IntersectionObserver support), so columns never start invisible for
   anyone who won't get the reveal to make them visible again. ------- */
.farhang-footer-col {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.farhang-footer-col--visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.farhang-footer-col {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------------------------------------------------------------
   Header + footer link hover: smooth color change plus an underline
   that slides in from the left, instead of the instant color swap
   Elementor's default nav-menu/link styling gives you. Covers the
   nav-menu widgets AND the two footer text-editor columns (Volunteer/
   Job Openings/... and Home/About/.../Press) now that those columns
   were converted from static <p> text to real <a> links.

   The explicit `color: #FFFFFF` on :hover is NOT decorative -- it's
   a fix. The site's Global Kit has `a:hover { color:
   var(--e-global-color-secondary) }`, and --e-global-color-secondary
   (#171F5B) is ALSO the header/footer background color. Any real link
   on that background turns invisible on hover without this override
   (confirmed: same bug already existed on the header nav, just never
   noticed because nothing had been hovered/reported there yet).
   White matches the hover color the header's own icon/button widgets
   already use on this same background, so it stays visually
   consistent rather than introducing a new color. ------------------ */
.elementor-location-header .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu--dropdown a,
.elementor-location-footer .elementor-widget-text-editor a {
	position: relative;
	transition: color 0.2s ease;
}

.elementor-location-header .elementor-nav-menu a:hover,
.elementor-location-footer .elementor-nav-menu a:hover,
.elementor-location-footer .elementor-nav-menu--dropdown a:hover,
.elementor-location-footer .elementor-widget-text-editor a:hover {
	color: #FFFFFF;
}

.elementor-location-header .elementor-nav-menu a::after,
.elementor-location-footer .elementor-nav-menu a::after,
.elementor-location-footer .elementor-nav-menu--dropdown a::after,
.elementor-location-footer .elementor-widget-text-editor a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

.elementor-location-header .elementor-nav-menu a:hover::after,
.elementor-location-footer .elementor-nav-menu a:hover::after,
.elementor-location-footer .elementor-nav-menu--dropdown a:hover::after,
.elementor-location-footer .elementor-widget-text-editor a:hover::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .elementor-nav-menu a,
	.elementor-location-footer .elementor-nav-menu a,
	.elementor-location-footer .elementor-nav-menu--dropdown a,
	.elementor-location-footer .elementor-widget-text-editor a,
	.elementor-location-header .elementor-nav-menu a::after,
	.elementor-location-footer .elementor-nav-menu a::after,
	.elementor-location-footer .elementor-nav-menu--dropdown a::after,
	.elementor-location-footer .elementor-widget-text-editor a::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------
   Sticky header polish: the Header template's own container already
   has Elementor Pro's native Sticky effect turned on (sticky: "top",
   set directly in that container's settings -- not here). Elementor
   Pro's sticky.js adds "elementor-sticky--effects" to that SAME
   container once it sticks -- it's a descendant of the
   .elementor-location-header wrapper, not the same element, hence the
   descendant selector (not a compound .a.b selector) below. This just
   adds a subtle shadow so the docked header reads as "docked" instead
   of floating with no visual separation from content scrolling
   underneath it. */
.elementor-location-header .elementor-sticky--effects {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header .elementor-sticky--effects {
		transition: none;
	}
}