/*
 * header.css: rebuild of Elementor Pro header template 799.
 * Contract: feedback/phase-1-contract/shell.md (H1-H8).
 * Breakpoints: desktop >= 1025px, tablet 768-1024px, mobile <= 767px,
 * plus the old theme's 1200px step.
 */

/* H1: the header box itself is dissolved so the menu bar can stick to the
   viewport; the shadow lives on the menu bar. */
.site-header {
	display: contents;
}

/* H2-H4: top bar */
.top-bar {
	position: relative;
	/* Above the menu bar so the bar's shadow only shows below it, as the
	   old single-box header did. */
	z-index: 101;
	background-color: #efefef;
	padding: 10px;
}
.top-bar__inner {
	display: flex;
	justify-content: flex-end;
}
.top-bar__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}
.top-bar__menu li {
	display: flex;
}
.top-bar__menu a,
.top-bar__menu a:visited {
	display: inline-flex;
	align-items: center;
	margin-left: 10px;
	padding: 5px 18px;
	border-radius: 50px;
	background: #077cbf;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2857;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.top-bar__menu a:hover,
.top-bar__menu a:focus {
	background: #04295c;
	color: #fff;
	text-decoration: none;
}

/* H5: menu bar */
.menu-bar {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background-color: #fff;
	padding: 10px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.menu-bar__inner {
	display: flex;
	align-items: center;
}

/* H6: logo */
.menu-bar__logo {
	flex: 0 0 60%;
	max-width: 60%;
	padding: 15px 0;
}
.menu-bar__logo p {
	margin: 0 0 16px;
	color: #000;
}
.menu-bar__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.menu-bar__nav {
	flex: 0 0 40%;
	max-width: 40%;
	display: flex;
	justify-content: flex-end;
}

/* H7: desktop navigation */
.main-nav {
	display: none;
}
.main-nav__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-nav__menu li {
	position: relative;
	display: flex;
}
.main-nav__menu a,
.main-nav__menu a:visited {
	position: relative;
	display: flex;
	align-items: center;
	padding: 34px 18px;
	color: #000;
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: 0.4s;
}
.main-nav__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	background-color: #c8c8c8;
	opacity: 0;
	transition: 0.3s;
}
.main-nav__menu a:hover,
.main-nav__menu a:focus {
	color: #077cbf;
}
.main-nav__menu a:hover::after,
.main-nav__menu a:focus::after {
	opacity: 1;
}
.main-nav__menu .current-menu-item > a,
.main-nav__menu .current-menu-item > a:hover {
	color: #000;
}
.main-nav__menu .current-menu-item > a::after {
	background-color: #077cbf;
	opacity: 1;
}
.main-nav__menu .sub-menu {
	display: none;
}

/* H8: toggle + dropdown (tablet and mobile) */
.menu-bar .menu-toggle,
.menu-bar .menu-toggle:hover,
.menu-bar .menu-toggle:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 auto;
	padding: 5.5px;
	width: 33.5px;
	height: 33px;
	border: 0;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.05);
	color: #666;
	box-shadow: none;
	cursor: pointer;
}
.menu-toggle svg {
	fill: currentColor;
	flex: none;
}
.menu-toggle__close,
.menu-toggle[aria-expanded="true"] .menu-toggle__open {
	display: none;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__close {
	display: block;
}
.menu-bar .menu-toggle[aria-expanded="true"] {
	background-color: #04295c;
	color: #fff;
}

.mobile-nav {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(50% + 34.5px);
	z-index: 102;
}
.mobile-nav[hidden] {
	display: none;
}
.mobile-nav__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #5a7294;
}
.mobile-nav__menu li:not(:last-child) {
	border-bottom: 1px solid #dcdcdc;
}
.mobile-nav__menu a,
.mobile-nav__menu a:visited {
	display: flex;
	padding: 12px 20px;
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
}
.mobile-nav__menu a:hover,
.mobile-nav__menu a:focus {
	background-color: #04295c;
	color: #fff;
}
.mobile-nav__menu .current-menu-item > a {
	background-color: #077cbf;
}

@media (min-width: 768px) {
	.menu-bar__logo {
		flex-basis: 22%;
		max-width: 22%;
	}
	.menu-bar__nav {
		flex-basis: 77.665%;
		max-width: 77.665%;
	}
}

@media (min-width: 1025px) {
	.top-bar {
		padding: 10px 15px;
	}
	.menu-bar {
		padding: 0 15px;
	}
	.main-nav {
		display: block;
	}
	.menu-bar .menu-toggle,
	.mobile-nav {
		display: none;
	}
}

@media (min-width: 1200px) {
	.top-bar__menu a {
		font-size: 13px;
		padding: 8px 20px;
	}
	.main-nav__menu a {
		padding-left: 36px;
		padding-right: 36px;
	}
}