/* Site header: desktop bar, sticky bar, mobile bar, mobile menu and search overlay. */

/* Social icons (also used in the footer) */
.socials { display: flex; flex-wrap: wrap; align-items: center; }
.socials__link { display: inline-flex; padding: 2px; color: #000; font-size: 14px; line-height: 1; }
.socials__link:hover { color: var(--c-accent); }

/* Desktop header */
.site-header { background: #fff; }
.topbar { height: 30px; }
.topbar .container { display: flex; justify-content: flex-end; align-items: center; height: 100%; }
.topbar .socials__link { margin-right: 20px; }
.header-main { box-shadow: var(--shadow-row); padding-bottom: 10px; }
.site-banner { width: 100%; height: auto; }

/* Menus shared by the main bar and the sticky bar */
.main-nav .menu,
.main-nav .sub-menu { margin: 0; padding: 0; list-style: none; }
.main-nav > .menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.main-nav .menu > li { position: relative; }
.main-nav a {
	display: block;
	font-family: var(--f-ui);
	text-decoration: none;
}
.main-nav .menu > li > a {
	padding: 5px 10px;
	background: var(--c-panel);
	color: #000;
	font-size: 15px;
	font-weight: 700;
	line-height: 21px;
}
.main-nav .menu > li > a:hover,
.main-nav .menu > li:focus-within > a { color: var(--c-accent); }
.main-nav .menu > .current-menu-item > a,
.main-nav .menu > .current-menu-ancestor > a,
.main-nav .menu > .current-menu-parent > a {
	background: var(--c-accent);
	color: #fff;
}
@media (max-width: 1140px) {
	.main-nav .menu > li > a { font-size: 13px; }
}

/* Chevrons for items with children */
.main-nav .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 5px;
	background: currentColor;
	-webkit-mask: var(--chev-down) center / contain no-repeat;
	mask: var(--chev-down) center / contain no-repeat;
}
.main-nav .sub-menu .menu-item-has-children > a { position: relative; padding-right: 18px; }
.main-nav .sub-menu .menu-item-has-children > a::after {
	position: absolute;
	right: 4px;
	top: 50%;
	margin: -0.35em 0 0;
	-webkit-mask-image: var(--chev-right);
	mask-image: var(--chev-right);
}
.main-nav { --chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5'%3E%3Cpath d='M4 8l8 8 8-8'/%3E%3C/svg%3E"); --chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5'%3E%3Cpath d='M8 4l8 8-8 8'/%3E%3C/svg%3E"); }

/* Dropdowns (up to three levels) */
.main-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	width: 160px;
	padding: 20px 10px;
	background: #fff;
	border: 1px solid var(--c-border);
	text-align: left;
}
.main-nav .sub-menu .sub-menu { top: -1px; left: 100%; }
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { display: block; }
.main-nav .sub-menu li { position: relative; }
.main-nav .sub-menu a {
	padding: 4px 5px;
	color: #000;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
}
.main-nav .sub-menu a:hover,
.main-nav .sub-menu li:focus-within > a {
	color: var(--c-accent);
	background: rgba(29, 121, 242, 0.05);
}
@media (max-width: 1018px) {
	.main-nav .sub-menu { width: 130px; padding: 10px; }
	.main-nav .sub-menu a { font-size: 10px; }
	.topbar .socials__link { margin-right: 10px; }
}

/* Sticky bar */
.sticky-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 900;
	background: var(--c-green);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
body.is-sticky .sticky-bar {
	transform: none;
	visibility: visible;
	transition: transform 0.25s ease;
}
body.admin-bar .sticky-bar { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .sticky-bar { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
	.sticky-bar, body.is-sticky .sticky-bar { transition: none; }
}
.sticky-bar__inner { display: flex; align-items: center; }
.sticky-bar__logo {
	flex: none;
	margin-right: 10px;
	padding: 2px 8px;
	background: #fff;
	color: var(--c-navy);
	font-family: var(--f-ui);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}
.sticky-bar__logo:hover { color: var(--c-accent); }
.sticky-bar .main-nav { flex: 1; min-width: 0; }
.sticky-bar .main-nav > .menu { justify-content: flex-start; gap: 0; }
.sticky-bar .main-nav .menu > li > a {
	background: none;
	color: #fff;
	font-size: 14px;
}
.sticky-bar .main-nav .menu > li > a:hover,
.sticky-bar .main-nav .menu > li:focus-within > a,
.sticky-bar .main-nav .menu > .current-menu-item > a,
.sticky-bar .main-nav .menu > .current-menu-ancestor > a,
.sticky-bar .main-nav .menu > .current-menu-parent > a {
	background: none;
	color: var(--c-accent-light);
}
.sticky-bar__search {
	flex: none;
	padding: 6px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 16px;
	line-height: 1;
}
.sticky-bar__search:hover { color: var(--c-accent-light); }
@media (max-width: 1140px) {
	.sticky-bar__logo { font-size: 16px; }
	.sticky-bar .main-nav .menu > li > a { font-size: 13px; padding-inline: 8px; }
}
@media (max-width: 1018px) {
	.sticky-bar__logo { font-size: 12px; }
}

/* Mobile bar */
.mobile-bar {
	position: sticky;
	top: 0;
	z-index: 800;
	display: none;
	grid-template-columns: 20% 60% 20%;
	align-items: center;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: var(--shadow-row);
}
@media (min-width: 601px) and (max-width: 767px) {
	body.admin-bar .mobile-bar { top: 46px; }
}
.mobile-bar__btn {
	justify-self: center;
	padding: 10px;
	background: none;
	border: 0;
	color: var(--c-navy);
	font-size: 24px;
	line-height: 1;
}
.mobile-bar__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 4px 0;
	color: var(--c-navy);
	font-family: var(--f-ui);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}
.mobile-bar__logo img { flex: none; width: 40px; height: 43px; }

@media (max-width: 767px) {
	.site-header, .sticky-bar { display: none; }
	.mobile-bar { display: grid; }
}
@media (min-width: 768px) {
	.mobile-menu { display: none; }
}

/* Mobile menu */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1000;
	visibility: hidden;
	transition: visibility 0s linear 0.25s;
}
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { visibility: visible; transition: none; }
.mobile-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}
body.menu-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 85%;
	max-width: 340px;
	padding: 60px 20px 30px;
	overflow-y: auto;
	background: linear-gradient(rgba(7, 7, 58, 0.8), rgba(22, 46, 183, 0.9)), var(--c-navy);
	color: #fff;
	font-family: var(--f-ui);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
}
body.menu-open .mobile-menu__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.mobile-menu__panel, .mobile-menu__backdrop { transition: none; }
}
.mobile-menu__close {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 10px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 22px;
	line-height: 1;
}
.mobile-menu .menu,
.mobile-menu .sub-menu { margin: 0; padding: 0; list-style: none; }
.mobile-menu li { position: relative; }
.mobile-menu a {
	display: block;
	padding: 10px 40px 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}
.mobile-menu a:hover,
.mobile-menu .current-menu-item > a,
.mobile-menu .current-menu-ancestor > a { color: var(--c-accent-light); }
.mobile-menu .sub-menu { display: none; padding-left: 15px; }
.mobile-menu li.is-open > .sub-menu { display: block; }
.mobile-menu .sub-menu a { font-size: 14px; font-weight: 400; }
.submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 42px;
	padding: 0;
	background: none;
	border: 0;
	color: #fff;
}
.submenu-toggle::before {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	margin: auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5'%3E%3Cpath d='M4 8l8 8 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5'%3E%3Cpath d='M4 8l8 8 8-8'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}
.submenu-toggle[aria-expanded="true"]::before { transform: rotate(180deg); }
.mobile-menu :focus-visible, .search-overlay :focus-visible { outline-color: #fff; }

/* Search overlay */
.search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
body.search-open .search-overlay { transform: none; visibility: visible; transition: transform 0.25s ease; }
body.admin-bar .search-overlay { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .search-overlay { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar .search-overlay { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.search-overlay, body.search-open .search-overlay { transition: none; }
}
.search-overlay__panel { position: relative; padding: 40px 60px 40px 20px; }
.search-form { display: flex; align-items: flex-end; max-width: 630px; margin-inline: auto; }
.search-form__input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--c-border);
	border-radius: 0;
	color: var(--c-text);
	font-family: var(--f-ui);
	font-size: 16px;
}
.search-form__input:focus { outline: 0; border-bottom-color: var(--c-navy); }
.search-form__submit {
	padding: 11px 20px;
	background: var(--c-navy);
	border: 0;
	color: #fff;
	font-family: var(--f-ui);
	font-size: 13px;
	line-height: 1.2;
}
.search-form__submit:hover { background: var(--c-accent); }
.search-overlay__close {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 10px;
	background: none;
	border: 0;
	color: var(--c-navy);
	font-size: 20px;
	line-height: 1;
}
.search-overlay__close:hover { color: var(--c-accent); }
@media (max-width: 1018px) {
	.search-form { max-width: 530px; }
}