/*
 * Behaviour for the V4 header (and later other V4 blocks) that Elementor's V4
 * classes cannot express: showing a dropdown when its menu item is hovered,
 * pseudo-elements and the mobile menu. Looks (colours, sizes, spacing) stay in
 * the V4 global classes so they can be edited in Elementor.
 *
 * Every selector starts at an hzd-* class, so V3 pages are unaffected.
 * V4 class rules are ".elementor .hzd-x"; these use at least the same weight.
 */

/*
 * The header follows the page as it scrolls, below the WordPress admin bar
 * when one is shown. Once the page has scrolled, or while the pointer is over
 * it, the whole bar (logo included) is frosted (Chris, 2026-10-29).
 */
.elementor .hzd-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	transition: background-color 0.3s, box-shadow 0.3s;
}

.elementor .hzd-header:hover,
.elementor .hzd-header.hzd-scrolled {
	background-color: rgba(255, 255, 255, 0.78);
	box-shadow: 5px 10px 30px 0 rgba(0, 0, 0, 0.25);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
}

/*
 * A sticky element only moves inside its parent. When the header sits in a
 * Theme Builder header template (live pages) or in a page wrapper (drafts and
 * the sandbox), that parent is exactly as tall as the header, so the wrapper
 * itself has to stick.
 */
.elementor-location-header:has(.hzd-header),
.elementor[data-elementor-type="wp-page"] > .e-con:has(.hzd-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* On narrow phones the admin bar scrolls away, so stick to the very top. */
@media (max-width: 600px) {
	.elementor .hzd-header,
	.elementor-location-header:has(.hzd-header),
	.elementor[data-elementor-type="wp-page"] > .e-con:has(.hzd-header) {
		top: 0;
	}
}

/* Desktop: open a mega panel on hover, keyboard focus or click. */
@media (min-width: 1025px) {
	.elementor .hzd-menu-item:hover > .hzd-mega,
	.elementor .hzd-menu-item:focus-within > .hzd-mega,
	.elementor .hzd-menu-item.hzd-item-open > .hzd-mega {
		display: flex;
	}
}

/*
 * Small laptops: tighter titles so the menu stays on one line, as the live
 * site's child theme does for the V3 menu (padding-inline 9px, 1025-1170px).
 */
@media (min-width: 1025px) and (max-width: 1170px) {
	.elementor .hzd-nav .hzd-menu-link {
		padding-left: 9px;
		padding-right: 9px;
	}
}

/* Chevron after a menu title that has a panel (10px, like the V3 menu). */
.elementor .hzd-has-mega::after {
	content: "";
	width: 5px;
	height: 5px;
	margin: -3px 1.5px 0 8.5px;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.elementor .hzd-menu-item:hover > .hzd-has-mega::after,
.elementor .hzd-menu-item.hzd-item-open > .hzd-has-mega::after {
	margin-top: 3px;
	transform: rotate(-135deg);
}

/* Menu titles turn orange while their item is hovered, focused or open; the
   chevron follows through currentColor. */
.elementor .hzd-menu-link {
	transition: color 0.3s;
}

.elementor .hzd-menu-item:hover > .hzd-menu-link,
.elementor .hzd-menu-item:focus-within > .hzd-menu-link,
.elementor .hzd-menu-item.hzd-item-open > .hzd-menu-link {
	color: #E14D1E;
}

/* Links inside the mega panels, including linked column headings. */
.elementor .hzd-mega-link,
.elementor .hzd-mega-head {
	transition: color 0.3s;
}

.elementor .hzd-mega-link:hover,
.elementor .hzd-mega-link:focus-within,
.elementor .hzd-mega-head:has(a):hover,
.elementor .hzd-mega-head:has(a):focus-within {
	color: #E14D1E;
}

/* An arrow fades in to the left of a hovered panel link, inside the column's
   20px padding so the text does not move (the live child theme's ➔ effect). */
.elementor .hzd-mega-link {
	position: relative;
}

.elementor .hzd-mega-link::before {
	content: "➔";
	position: absolute;
	right: 100%;
	margin-right: 4px;
	font-size: 14px;
	opacity: 0;
	transform: translateX(-5px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.elementor .hzd-mega-link:hover::before,
.elementor .hzd-mega-link:focus-within::before {
	opacity: 1;
	transform: translateX(0);
}

/* Gradient line under the first column's heading, drawn on hover. */
.elementor .hzd-mega-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: linear-gradient(90deg, #FFB272 0%, #FF4715 34%, #1649E2 67%, #263E73 100%);
	transition: width 0.4s ease;
}

.elementor .hzd-mega-col:first-child:hover .hzd-mega-head::after {
	width: 100%;
}

/* Hamburger icon, drawn in CSS so it needs no uploaded image. */
.elementor .hzd-burger {
	background:
		linear-gradient(currentColor, currentColor) 0 3px / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 9px / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) 0 15px / 100% 2px no-repeat;
}

.elementor .hzd-header.hzd-open .hzd-burger {
	background:
		linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
}

/* Tablet and phone: the menu opens below the header as a stacked list. */
@media (max-width: 1024px) {
	/* The list spans the whole header, not just the area right of the logo. */
	.elementor .hzd-header.hzd-open .hzd-header-right {
		position: static;
	}

	.elementor .hzd-header.hzd-open .hzd-nav {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
		position: absolute;
		/* Hangs from the bottom of the 20px toggle, as the V3 menu does. */
		top: calc(50% + 10px);
		left: -1px;
		right: -1px;
	}

	.elementor .hzd-header.hzd-open .hzd-menu-item {
		flex-direction: column;
		align-items: stretch;
	}

	.elementor .hzd-header.hzd-open .hzd-menu-link {
		justify-content: flex-end;
		padding: 8px 16px;
		background: #fff;
	}

	.elementor .hzd-header.hzd-open .hzd-menu-item.hzd-item-open > .hzd-mega {
		display: flex;
		position: static;
		flex-direction: column;
		width: 100%;
	}

	.elementor .hzd-header.hzd-open .hzd-mega-col {
		width: 100%;
	}
}