/**
 * ESI Fire Safety
 * Header and primary navigation.
 */


/* =========================================================
   Top bar
   ========================================================= */

.esi-topbar {
	position: relative;
	z-index: 1001;

	width: 100%;

	color: var(--esi-white);
	background: #0b0b0b;

	font-family: var(--esi-font-body);
	font-size: 12px;
}

.esi-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;

	width: 100%;
	max-width: var(--esi-content-width);
	min-height: 40px;

	margin-inline: auto;
	padding-inline: 0;

	box-sizing: border-box;
}


/* Left */

.esi-topbar .esi-topbar__left {
	display: flex;
	align-items: center;
	gap: 18px;

	color: rgba(255, 255, 255, 0.78);
}

.esi-topbar__phone {
	white-space: nowrap;
}

.esi-topbar .esi-topbar__phone a {
	color: var(--esi-white);

	font-weight: 600;
	text-decoration: none;
}

.esi-topbar .esi-topbar__phone a:hover {
	color: var(--esi-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.esi-topbar .esi-topbar__phone a:focus-visible {
	outline: 2px solid var(--esi-red);
	outline-offset: 3px;
}


/* Right */

.esi-topbar__right {
	display: flex;
	align-items: center;
	gap: 18px;
}

.esi-topbar .esi-topbar__link {
	color: rgba(255, 255, 255, 0.86);

	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;

	text-decoration: none;
	white-space: nowrap;
}

.esi-topbar .esi-topbar__link:hover {
	color: var(--esi-white);

	text-decoration: underline;
	text-underline-offset: 3px;
}

.esi-topbar .esi-topbar .esi-topbar__link:focus-visible {
	color: var(--esi-white);

	outline: 2px solid var(--esi-red);
	outline-offset: 3px;
}


/* WhatsApp green status dot */

.esi-topbar__whatsapp::after {
	content: "";

	display: inline-block;

	width: 7px;
	height: 7px;

	margin-left: 7px;

	background: var(--esi-whatsapp);
	border-radius: 50%;

	vertical-align: 1px;
}


/* =========================================================
   Main sticky header
   ========================================================= */

.esi-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;

	width: 100%;

	background: rgba(255, 255, 255, 0.96);

	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);

	border-bottom: 1px solid var(--esi-border);

	font-family: var(--esi-font-body);
}


/* =========================================================
   Header row
   ========================================================= */

.esi-header-main {
	width: 100%;
}

.esi-header-main__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 34px;

	width: 100%;
	max-width: var(--esi-content-width);
	height: 86px;

	margin-inline: auto;
	padding-inline: 0;

	box-sizing: border-box;
}


/* =========================================================
   Brand
   ========================================================= */

.esi-site-branding {
	min-width: max-content;
}

.esi-brand {
	display: flex;
	align-items: center;
	gap: 13px;

	color: var(--esi-ink);

	text-decoration: none;
}

.esi-brand__mark {
	display: block;
	flex: 0 0 46px;

	width: 46px;
	height: 46px;
}

.esi-brand__logo {
	display: block;

	width: 46px;
	height: 46px;

	object-fit: contain;

	border-radius: 5px;
}

.esi-brand__fallback {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	color: var(--esi-white);
	background: var(--esi-red);

	font-weight: 800;
	font-size: 17px;

	border-radius: 5px;
}


/* Brand typography */

.esi-brand__type {
	display: grid;

	line-height: 1.05;
}

.esi-brand__type strong {
	color: var(--esi-ink);

	font-family: var(--esi-font-heading);
	font-size: 19px;
	font-weight: 600;
	line-height: 1;
}

.esi-brand__type span {
	margin-top: 5px;

	color: var(--esi-muted);

	font-family: var(--esi-font-body);
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1.1;

	letter-spacing: 0.10em;
	text-transform: uppercase;
}


/* Focus */

.esi-brand:focus-visible {
	outline: 3px solid var(--esi-red);
	outline-offset: 4px;

	border-radius: 4px;
}


/* =========================================================
   Primary navigation
   ========================================================= */

.esi-primary-navigation {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 86px;
}


/* Reset menu */

.esi-primary-menu,
.esi-primary-menu ul {
	margin: 0;
	padding: 0;

	list-style: none;
}


/* Top-level menu */

.esi-primary-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;

	height: 86px;
}

.esi-primary-menu > li {
	position: relative;

	display: flex;
	align-items: center;

	height: 86px;
}

.esi-primary-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	height: 86px;

	padding: 0;

	color: #2f2f2b;

	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;

	text-decoration: none;
	white-space: nowrap;

	transition: color var(--esi-transition-fast);
}

.esi-primary-menu > li > a:hover,
.esi-primary-menu > li.current-menu-item > a,
.esi-primary-menu > li.current-menu-ancestor > a {
	color: var(--esi-red);
}

.esi-primary-menu a:focus-visible {
	outline: 2px solid var(--esi-red);
	outline-offset: 4px;

	border-radius: 2px;
}


/* =========================================================
   Top-level dropdown arrows
   ========================================================= */

.esi-primary-menu >
.menu-item-has-children >
a::after {

	content: "";

	display: inline-block;

	width: 6px;
	height: 6px;

	margin-left: 2px;
	margin-top: -4px;

	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;

	transform: rotate(45deg);

	transition: transform var(--esi-transition-fast);
}


/*
 * Normal dropdown arrows can respond directly to hover/focus.
 */

@media (min-width: 1025px) {

	.esi-primary-menu >
	.menu-item-has-children:not(.esi-mega-menu):hover >
	a::after,

	.esi-primary-menu >
	.menu-item-has-children:not(.esi-mega-menu):focus-within >
	a::after {

		transform:
			translateY(3px)
			rotate(225deg);
	}


	/*
	 * Mega-menu arrow follows the JS-controlled state.
	 */

	.esi-primary-menu >
	.esi-mega-menu.is-mega-open >
	a::after {

		transform:
			translateY(3px)
			rotate(225deg);
	}
}


/* =========================================================
   Standard desktop dropdown
   ========================================================= */

@media (min-width: 1025px) {

	.esi-primary-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 100;

		width: 260px;

		padding: 10px;

		background: var(--esi-white);
		border: 1px solid var(--esi-border);
		border-radius: 8px;

		box-shadow: var(--esi-shadow-menu);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform: translate(-50%, 12px);

		transition:
			opacity 180ms ease,
			visibility 180ms ease,
			transform 180ms ease;
	}


	/*
	 * IMPORTANT:
	 *
	 * Only ordinary top-level dropdowns use CSS hover/focus.
	 * Mega menus are excluded and are controlled by JS.
	 */

	.esi-primary-menu
	> li:not(.esi-mega-menu):hover
	> .sub-menu,

	.esi-primary-menu
	> li:not(.esi-mega-menu):focus-within
	> .sub-menu {

		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translate(-50%, 0);
	}
}


/* Dropdown links */

.esi-primary-menu .sub-menu li {
	display: block;

	width: 100%;
}

.esi-primary-menu .sub-menu a {
	display: block;

	padding: 7px 10px;

	color: #555;

	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;

	text-decoration: none;

	border-radius: 4px;
}

.esi-primary-menu .sub-menu a:hover,
.esi-primary-menu .sub-menu a:focus-visible {
	color: var(--esi-red);
	background: var(--esi-warm);
}


/* =========================================================
   ESI mega menu
   Desktop only
   ========================================================= */

@media (min-width: 1025px) {

	/*
	 * Gives the mega menu a predictable positioning context.
	 */
	.esi-header-main__inner {
		position: relative;
	}


	/*
	 * Mega-menu parent no longer positions the dropdown.
	 * The main header inner wrapper does.
	 */
	.esi-primary-menu >
	li.esi-mega-menu {
		position: static;
	}


	/* -----------------------------------------------------
	   Mega-menu panel
	   ----------------------------------------------------- */

	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu {

		top: 100%;
		left: 0;

		display: grid;

		grid-template-columns:
			repeat(4, minmax(0, 1fr));

		column-gap: 38px;
		row-gap: 0;

		width: 100%;

		padding:
			30px 30px 24px;

		background: var(--esi-white);

		border:
			1px solid var(--esi-border);

		border-radius: 10px;

		box-shadow:
			0 20px 50px
			rgba(18, 18, 18, 0.11);

		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform: translateY(10px);

		box-sizing: border-box;

		transition:
			opacity 180ms ease,
			visibility 180ms ease,
			transform 180ms ease;
	}


	/*
	 * IMPORTANT:
	 *
	 * Mega menu opens only when navigation.js adds
	 * .is-mega-open after intentional Services hover/focus.
	 */

	.esi-primary-menu >
	li.esi-mega-menu.is-mega-open >
	.sub-menu {

		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateY(0);
	}


	/* -----------------------------------------------------
	   Columns
	   ----------------------------------------------------- */

	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column {

		position: relative;

		display: block;

		width: auto;
	}


	/* Column headings */

	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column >
	a {

		display: block;

		padding: 0;

		color: var(--esi-ink);
		background: transparent;

		font-family: var(--esi-font-body);
		font-size: 12px;
		font-weight: 700;
		line-height: 1.4;

		letter-spacing: 0.09em;
		text-transform: uppercase;

		border-radius: 0;
	}


	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column >
	a[href]:hover {

		color: var(--esi-red);
		background: transparent;
	}


	/* Column labels using URL "#" */

	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column >
	a:not([href]) {

		color: var(--esi-ink);

		cursor: default;
	}


	/* -----------------------------------------------------
	   Level-three lists
	   ----------------------------------------------------- */

	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column >
	.sub-menu {

		position: static;

		display: block;

		width: auto;

		margin: 18px 0 0;
		padding: 0;

		background: transparent;

		border: 0;
		border-radius: 0;

		box-shadow: none;

		/*
		* Keep the nested list visually present within
		* the mega-menu layout, but inherit whether the
		* overall mega menu is interactive/visible.
		*/
		opacity: 1;
		visibility: inherit;
		pointer-events: inherit;

		transform: none;
	}

	.esi-primary-menu >
	li.esi-mega-menu:not(.is-mega-open) >
	.sub-menu,

	.esi-primary-menu >
	li.esi-mega-menu:not(.is-mega-open) >
	.sub-menu * {

		pointer-events: none;
	}


	/* Individual service links */

	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column >
	.sub-menu >
	li {

		display: block;

		width: 100%;

		margin-bottom: 12px;
	}


	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column >
	.sub-menu >
	li:last-child {

		margin-bottom: 0;
	}


	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column >
	.sub-menu >
	li >
	a {

		display: inline;

		padding: 0;

		color: #5d5b58;
		background: transparent;

		font-family: var(--esi-font-body);
		font-size: 13px;
		font-weight: 500;
		line-height: 1.45;

		border-radius: 0;

		transition:
			color var(--esi-transition-fast);
	}


	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column >
	.sub-menu >
	li >
	a:hover,

	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-column >
	.sub-menu >
	li >
	a:focus-visible {

		color: var(--esi-red);
		background: transparent;
	}


	/* -----------------------------------------------------
	   Feature / Training strip
	   ----------------------------------------------------- */

	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-feature-active {

		grid-column: 1 / -1;

		display: block;

		width: 100%;

		margin-top: 28px;
		padding-top: 22px;

		border-top:
			1px solid var(--esi-border);
	}


	.esi-primary-menu >
	li.esi-mega-menu >
	.sub-menu >
	li.esi-mega-feature-active >
	a {

		display: grid;

		grid-template-columns:
			minmax(0, 1fr)
			auto;

		align-items: center;
		gap: 30px;

		width: 100%;

		padding: 0;

		color: var(--esi-ink);
		background: transparent;

		border-radius: 0;

		box-sizing: border-box;
	}


	/* Feature copy */

	.esi-mega-feature__copy {

		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
	}


	.esi-mega-feature__title {

		color: var(--esi-ink);

		font-family: var(--esi-font-heading);
		font-size: 18px;
		font-weight: 500;
		line-height: 1.25;
	}


	.esi-mega-feature__description {

		display: block;

		color: var(--esi-muted);

		font-family: var(--esi-font-body);
		font-size: 12.5px;
		font-weight: 400;
		line-height: 1.5;
	}


	/* Feature CTA */

	.esi-mega-feature__cta {

		display: inline-flex;
		align-items: center;
		gap: 9px;

		color: var(--esi-red);

		font-family: var(--esi-font-body);
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;

		white-space: nowrap;
	}


	.esi-mega-feature__arrow {

		display: inline-block;

		font-size: 1.1em;

		transition:
			transform var(--esi-transition);
	}


	.esi-mega-feature-active >
	a:hover {

		background: transparent;
	}


	.esi-mega-feature-active >
	a:hover
	.esi-mega-feature__cta,

	.esi-mega-feature-active >
	a:focus-visible
	.esi-mega-feature__cta {

		color: var(--esi-red-dark);
	}


	.esi-mega-feature-active >
	a:hover
	.esi-mega-feature__arrow,

	.esi-mega-feature-active >
	a:focus-visible
	.esi-mega-feature__arrow {

		transform: translateX(4px);
	}
}


/* =========================================================
   Header actions
   ========================================================= */

.esi-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;

	min-width: max-content;
}

.esi-site-header .esi-header-quote {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 50px;

	padding: 13px 22px;

	color: var(--esi-white);
	background: var(--esi-red);

	font-family: var(--esi-font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;

	text-decoration: none;
	white-space: nowrap;

	border-radius: var(--esi-radius-sm);

	transition:
		background-color var(--esi-transition-fast),
		transform var(--esi-transition-fast);
}

.esi-site-header .esi-header-quote:hover {
	color: var(--esi-white);
	background: var(--esi-red-dark);

	transform: translateY(-1px);
}

.esi-site-header .esi-header-quote:focus-visible {
	color: var(--esi-white);
	background: var(--esi-red-dark);

	outline: 3px solid rgba(226, 16, 27, 0.25);
	outline-offset: 3px;
}


/* =========================================================
   Mobile toggle
   ========================================================= */

.esi-site-header .esi-menu-toggle {
	display: none;

	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	padding: 10px;

	color: var(--esi-ink);
	background: var(--esi-white);

	border: 1px solid var(--esi-border);
	border-radius: 6px;

	cursor: pointer;
}

.esi-menu-toggle__icon {
	display: block;

	width: 22px;
}

.esi-menu-toggle__icon span {
	display: block;

	width: 100%;
	height: 2px;

	margin: 4px 0;

	background: currentColor;

	transition:
		transform var(--esi-transition),
		opacity var(--esi-transition);
}


/* Open icon */

.esi-menu-toggle[aria-expanded="true"]
.esi-menu-toggle__icon span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.esi-menu-toggle[aria-expanded="true"]
.esi-menu-toggle__icon span:nth-child(2) {
	opacity: 0;
}

.esi-menu-toggle[aria-expanded="true"]
.esi-menu-toggle__icon span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}


/* Mobile submenu buttons injected by JS */

.esi-submenu-toggle {
	display: none;
}