/* =========================================================================
 * Apollo Safety - Custom site-wide header
 * -------------------------------------------------------------------------
 * Design tokens (see also style.css :root):
 *   Accent / brand red ............ #EF334B
 *   Button text (dark navy) ....... #242B42
 *   Header background ............. rgba(0, 0, 0, 0.43)  (#000 @ 43%)
 *   Typography .................... 'Montserrat'
 *   Logo .......................... 358 x 100
 * ========================================================================= */

.apollo-header,
.apollo-header *,
.apollo-header *::before,
.apollo-header *::after {
	box-sizing: border-box;
}

.apollo-header {
	position: fixed; /* overlays the hero AND stays pinned while scrolling */
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.43); /* #000000 @ 43% opacity */
	background-color: var(--apollo-header-bg, rgba(0, 0, 0, 0.43));
	border-bottom: 3px solid #EF334B;
	border-bottom-color: var(--apollo-accent, #EF334B);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-family: var(--apollo-font, 'Montserrat', sans-serif);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Keep the overlay header clear of the WordPress admin bar when logged in. */
.admin-bar .apollo-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .apollo-header {
		top: 46px;
	}
}

/* Compact state: toggled by JS (assets/js/apollo-header.js) once the page is
 * scrolled. The transitions on .apollo-header, __inner and __logo make the
 * shrink smooth; the logo keeps its 358:100 ratio via height:auto. */
.apollo-header.is-scrolled {
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.apollo-header.is-scrolled .apollo-header__inner {
	padding-top: 9px;
	padding-bottom: 9px;
}

.apollo-header.is-scrolled .apollo-header__logo {
	width: 262px;
}

/* Force Montserrat on every element inside the header, overriding any
 * typography injected by Elementor's global kit. */
.apollo-header,
.apollo-header a,
.apollo-header button,
.apollo-header span {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

.apollo-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
	max-width: 1540px;   /* 1500px content + 20px padding each side */
	margin: 0 auto;
	padding: 20px 20px;  /* 20px gutter so the bar lines up with page content */
	transition: padding 0.3s ease;
}

/* ---------------------------------------------------------------------- *
 * Logo
 * ---------------------------------------------------------------------- */
.apollo-header__logo-link {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.apollo-header__logo {
	display: block;
	width: 358px;
	height: auto;      /* preserves the 358 x 100 ratio while scaling down */
	max-width: 100%;
	transition: width 0.3s ease;
}

/* ---------------------------------------------------------------------- *
 * Right-hand cluster (nav + CTA)
 * ---------------------------------------------------------------------- */
.apollo-header__collapse {
	display: flex;
	align-items: center;
	gap: clamp(22px, 2.6vw, 44px);
}

/* ---------------------------------------------------------------------- *
 * Navigation
 * ---------------------------------------------------------------------- */
.apollo-header__nav .apollo-menu,
.apollo-header__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.2vw, 40px);
}

.apollo-header__nav li {
	position: relative;
	margin: 0;
}

.apollo-header__nav a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #ffffff;
	color: var(--apollo-header-text, #ffffff);
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	padding: 12px 0;
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* Sleek animated underline for hover + active page (text stays white). */
.apollo-header__nav a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 6px;
	width: 100%;
	height: 2px;
	background-color: #EF334B;
	background-color: var(--apollo-accent, #EF334B);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
	pointer-events: none;
}

.apollo-header__nav a:hover::before,
.apollo-header__nav a:focus-visible::before,
.apollo-header__nav .current-menu-item > a::before,
.apollo-header__nav .current_page_item > a::before,
.apollo-header__nav .current-menu-ancestor > a::before {
	transform: scaleX(1);
}

/* Dropdown caret for parent items (Services, Training, ...) — the arrow SVG is
 * applied as a mask so it inherits the link's currentColor and can still rotate. */
.apollo-header__nav .menu-item-has-children > a::after {
	content: "";
	width: 12px;
	height: 8px;
	background-color: currentColor;
	-webkit-mask: url("../images/menu-dropdown-arrow.svg") no-repeat center / contain;
	mask: url("../images/menu-dropdown-arrow.svg") no-repeat center / contain;
	transition: transform 0.2s ease;
}

.apollo-header__nav .menu-item-has-children:hover > a::after,
.apollo-header__nav .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

/* The dedicated sub-menu toggle button is a mobile-only control; on desktop the
 * sub-menus open on hover so it stays hidden. */
.apollo-submenu-toggle {
	display: none;
}

/* ---- Desktop dropdown sub-menus ---- */
.apollo-header__nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 8px 0;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background-color: rgba(10, 10, 10, 0.97);
	border-top: 3px solid #EF334B;
	border-top-color: var(--apollo-accent, #EF334B);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 20;
}

.apollo-header__nav li:hover > .sub-menu,
.apollo-header__nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.apollo-header__nav .sub-menu li {
	width: 100%;
}

.apollo-header__nav .sub-menu a {
	display: block;
	width: 100%;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.3px;
	text-transform: none;
	white-space: nowrap;
}

.apollo-header__nav .sub-menu a::before {
	display: none; /* dropdown items use the tint hover below, not the underline */
}

.apollo-header__nav .sub-menu a:hover {
	background-color: rgba(239, 51, 75, 0.12);
}

/* Nested sub-menus open to the side */
.apollo-header__nav .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	transform: translateX(10px);
}

.apollo-header__nav .sub-menu li:hover > .sub-menu,
.apollo-header__nav .sub-menu li:focus-within > .sub-menu {
	transform: translateX(0);
}

/* ---------------------------------------------------------------------- *
 * Header CTA buttons (Customer Portal + e-Learning Portal)
 * ---------------------------------------------------------------------- */
.apollo-header__ctas {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 12px;
}

.apollo-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 40px;                              /* never taller than 40px */
	max-height: 40px;
	padding: 0 22px;
	border: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.3px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Primary: Customer Portal (solid white). */
.apollo-header__cta--portal {
	background-color: #ffffff;
	color: #242B42 !important;                 /* button text */
	border-bottom: 2px solid #EF334B;          /* accent, bottom only */
	border-bottom-color: var(--apollo-accent, #EF334B);
}

.apollo-header__cta--portal:hover,
.apollo-header__cta--portal:focus-visible {
	background-color: #f4f5f7;                  /* subtle lift, keeps #242B42 text, no shift */
	color: #242B42 !important;
}

/* Secondary: e-Learning Portal (accent outline, so the two CTAs read as
 * distinct destinations rather than duplicate buttons). */
.apollo-header__cta--elearning {
	background-color: transparent;
	color: #ffffff !important;
	border: 2px solid #ffffff;
	border-color: rgba(255, 255, 255, 0.7);
}

.apollo-header__cta--elearning:hover,
.apollo-header__cta--elearning:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
	color: #ffffff !important;
}

/* ---------------------------------------------------------------------- *
 * Mobile toggle (hamburger) - hidden on desktop
 * ---------------------------------------------------------------------- */
.apollo-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 10px;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* The bare hamburger button must never pick up a fill from Elementor's / the
 * theme's global button styling on hover, focus or the sticky post-click
 * (:active / :focus) state. Force it transparent in every interaction state. */
.apollo-header__toggle,
.apollo-header__toggle:hover,
.apollo-header__toggle:focus,
.apollo-header__toggle:active {
	background: transparent !important;
	background-color: transparent !important;
	border: 0;
	box-shadow: none !important;
}

/* Keep a visible focus ring for keyboard users (no fill), and no ring on
 * pointer/tap so nothing lingers after a click. */
.apollo-header__toggle:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.6);
	outline-offset: 2px;
}

.apollo-header__toggle:focus:not(:focus-visible) {
	outline: none;
}

.apollo-header__toggle-bar {
	display: block;
	width: 26px;
	height: 3px;
	background-color: #ffffff;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.apollo-header.is-open .apollo-header__toggle-bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.apollo-header.is-open .apollo-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.apollo-header.is-open .apollo-header__toggle-bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* =========================================================================
 * Responsive: collapse nav into a mobile panel
 * ========================================================================= */
@media (max-width: 1024px) {

	.apollo-header__inner {
		flex-wrap: wrap;
		padding: 14px clamp(16px, 4vw, 40px);
	}

	.apollo-header__logo {
		width: 280px;
	}

	.apollo-header.is-scrolled .apollo-header__logo {
		width: 220px;
	}

	.apollo-header__toggle {
		display: flex;
	}

	/* The nav + CTA panel slides open below the bar */
	.apollo-header__collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0 clamp(16px, 4vw, 40px);
		background-color: rgba(0, 0, 0, 0.95);
		border-bottom: 3px solid #EF334B;
		border-bottom-color: var(--apollo-accent, #EF334B);
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, visibility 0.25s ease;
	}

	.apollo-header.is-open .apollo-header__collapse {
		max-height: calc(100vh - 100%);
		overflow-y: auto;
		padding: 12px clamp(16px, 4vw, 40px) 26px;
		opacity: 1;
		visibility: visible;
	}

	/* While the mobile panel is open, lift the bar to the same opacity as the
	 * dropdown so the header + menu read as one solid surface. */
	.apollo-header.is-open {
		background-color: rgba(0, 0, 0, 0.95);
	}

	.apollo-header__nav {
		width: 100%;
	}

	.apollo-header__nav .apollo-menu,
	.apollo-header__nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.apollo-header__nav > .apollo-menu > li,
	.apollo-header__nav li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	}

	.apollo-header__nav a {
		width: 100%;
		justify-content: space-between;
		padding: 15px 2px;
	}

	/* Sub-menus become static, indented, collapsible lists on mobile. They stay
	 * closed until their parent <li> gets .is-expanded (added by the JS toggle). */
	.apollo-header__nav .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 0 16px;
		background: transparent;
		border-top: 0;
		box-shadow: none;
		transform: none;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, visibility 0.25s ease;
	}

	.apollo-header__nav .menu-item-has-children.is-expanded > .sub-menu {
		max-height: 1500px; /* generous cap; collapses smoothly back to 0 */
		padding: 0 0 8px 16px;
		opacity: 1;
		visibility: visible;
	}

	.apollo-header__nav .sub-menu .sub-menu {
		left: auto;
		transform: none;
	}

	.apollo-header__nav .sub-menu a {
		padding: 12px 2px;
	}

	/* The link's own caret is replaced by the dedicated toggle button on mobile. */
	.apollo-header__nav .menu-item-has-children > a::after {
		display: none;
	}

	/* Parent item: the link and the arrow button share the top row; the sub-menu
	 * wraps onto its own full-width row beneath them. */
	.apollo-header__nav .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.apollo-header__nav .menu-item-has-children > a {
		flex: 1 1 auto;
		width: auto;
	}

	.apollo-header__nav .menu-item-has-children > .sub-menu {
		flex: 0 0 100%;
		width: 100%;
	}

	/* Dedicated, obviously-separate dropdown toggle button. */
	.apollo-submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		align-self: stretch;
		width: 56px;
		margin: 0;
		padding: 0;
		background: rgba(255, 255, 255, 0.06);
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.14);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: background-color 0.2s ease;
	}

	.apollo-submenu-toggle:hover,
	.apollo-submenu-toggle:focus-visible {
		background: rgba(239, 51, 75, 0.22);
		outline: none;
	}

	.apollo-header__nav .menu-item-has-children.is-expanded > .apollo-submenu-toggle {
		background: rgba(239, 51, 75, 0.30);
	}

	.apollo-submenu-toggle__caret {
		display: block;
		width: 14px;
		height: 9px;
		background-color: #ffffff;
		-webkit-mask: url("../images/menu-dropdown-arrow.svg") no-repeat center / contain;
		mask: url("../images/menu-dropdown-arrow.svg") no-repeat center / contain;
		transition: transform 0.25s ease;
	}

	/* Caret points up while the dropdown is open. */
	.apollo-header__nav .menu-item-has-children.is-expanded > .apollo-submenu-toggle .apollo-submenu-toggle__caret {
		transform: rotate(180deg);
	}

	/* Underline reads oddly on full-width stacked rows; hide it on mobile. */
	.apollo-header__nav a::before {
		display: none;
	}

	.apollo-header__nav a:hover,
	.apollo-header__nav a:focus-visible {
		opacity: 0.7; /* minimal touch feedback, text stays white */
	}

	.apollo-header__nav .sub-menu a:hover {
		background-color: transparent;
		opacity: 0.7;
	}

	.apollo-header__nav .menu-item-has-children > a::after {
		margin-left: auto;
	}

	.apollo-header__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		width: 100%;
		margin-top: 18px;
	}

	.apollo-header__cta {
		width: 100%;
		padding: 0 28px;
	}
}

@media (max-width: 480px) {
	.apollo-header__logo {
		width: 220px;
	}
}

/* =========================================================================
 * Neutralise Elementor's global reduced-motion override for the header.
 *
 * Elementor's frontend.min.css ships:
 *     @media (prefers-reduced-motion: reduce) {
 *         html * { transition-delay: 0s !important; transition-duration: 0s !important; }
 *     }
 * which disables the header's shrink / hover / underline transitions whenever
 * the OS has "reduce motion" enabled. The #apollo-site-header id below has a
 * higher specificity (1,0,0) than Elementor's `html *` (0,0,1), so it wins the
 * !important battle regardless of stylesheet load order and re-enables the
 * header's animations. Reduced-motion behaviour everywhere else is untouched.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	#apollo-site-header,
	#apollo-site-header .apollo-header__inner,
	#apollo-site-header .apollo-header__logo,
	#apollo-site-header .apollo-header__collapse,
	#apollo-site-header .apollo-header__nav a,
	#apollo-site-header .apollo-header__nav a::before,
	#apollo-site-header .apollo-header__nav .menu-item-has-children > a::after,
	#apollo-site-header .apollo-header__nav .sub-menu,
	#apollo-site-header .apollo-header__cta,
	#apollo-site-header .apollo-header__toggle-bar {
		transition-duration: 0.3s !important;
		transition-delay: 0s !important;
	}
}