/* Utilities ---------------------------------------------------------------
   Scoped to the header so they cannot collide with Bootstrap or any other
   stylesheet that defines the same names globally. */

.header-container .d-flex {
	display: flex;
}

.header-container .d-none {
	display: none;
}

.header-container .main-padding,
.misk-mobile-menu .main-padding {
	padding-inline: 20px;
}

.header-container .myMainWidth1880 {
	width: 100%;
	max-width: 1880px;
	margin-inline: auto;
}

.header-container .animation,
.misk-mobile-menu .animation {
	transition: opacity .3s ease, color .3s ease, background-color .3s ease, border-color .3s ease;
}

.header-container .text-title-1,
.misk-mobile-menu .text-title-1 {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
}

.header-container .text-title-2,
.misk-mobile-menu .text-title-2 {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .01em;
}

/* Shell -------------------------------------------------------------------
   Alpha in the original gradient was 4.62, which browsers clamp to 1. Written
   as 1 here so it is valid CSS and renders identically. For a softer fade,
   change the middle stop to rgba(28, 30, 66, .46). */

.header-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1040;
	background-color: transparent;
	transition: background-color .3s ease, box-shadow .3s ease;
}

/* The gradient lives on a pseudo-element so it can cross-fade into the solid
   white state. A gradient cannot be transitioned to a colour directly. */
.header-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, #1c1e42 0%, rgba(28, 30, 66, 1) 64%, rgba(28, 30, 66, 0) 100%) no-repeat padding-box;
	pointer-events: none;
	transition: opacity .3s ease;
}

/* The admin bar is only fixed from 601px up; below that it scrolls away. */
@media screen and (min-width: 601px) {
	body.admin-bar .header-container,
	body.admin-bar .misk-mobile-menu {
		top: 46px;
	}
}

@media screen and (min-width: 783px) {
	body.admin-bar .header-container,
	body.admin-bar .misk-mobile-menu {
		top: 32px;
	}
}

/* Must stay above .misk-mobile-menu: both are children of .header-container,
   and without a z-index here the positioned overlay covers the close button. */
.misk-header {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 16px;
}

/* The outer row and the action buttons keep one layout in every language:
   actions at the left, logo at the right. RTL would otherwise mirror the row
   and swap them, so the main axis is flipped back to left-to-right.
   The nav list is deliberately left out — its items follow the language, so
   they read left-to-right in English and right-to-left in Arabic. */
[dir="rtl"] .misk-header,
[dir="rtl"] .misk-header-actions {
	flex-direction: row-reverse;
}

.misk-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.misk-header-nav {
	flex: 1 1 auto;
}

.misk-header-nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.misk-header-nav li {
	margin: 0;
}

.misk-header-nav a {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	opacity: .85;
	transition: opacity .3s ease;
}

.misk-header-nav a:hover,
.misk-header-nav a.active {
	opacity: 1;
}

.misk-header-nav a.active {
	font-weight: 700;
}

/* Spacing comes from justify-content on the row; an auto margin here would
   push the logo the wrong way once the axis is reversed. */
.misk-header-logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

/* No display here: the variant rules below own it, and a class+element
   selector would outrank them. */
.misk-header-logo svg {
	width: 120px;
	height: auto;
}

/* Colour variants ---------------------------------------------------------
   The gradient shell is dark, so the light icons show by default. Add
   .header-container--solid to flip the whole header to the dark set. */

.misk-header-logo-svg,
.misk-burger-menu-svg,
.earth_icon_white {
	display: block;
}

.misk-header-logo-svg-black,
.misk-burger-menu-svg-black,
.earth_icon {
	display: none;
}

.header-container--solid {
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.header-container--solid::before {
	opacity: 0;
}

.header-container--solid .misk-header-logo-svg,
.header-container--solid .misk-burger-menu-svg,
.header-container--solid .earth_icon_white {
	display: none;
}

.header-container--solid .misk-header-logo-svg-black,
.header-container--solid .misk-burger-menu-svg-black,
.header-container--solid .earth_icon {
	display: block;
}

.header-container--solid .misk-header-nav a {
	color: #000;
}

.header-container--solid .misk-btn-lang {
	border-color: rgba(0, 0, 0, .4);
	color: #000;
}

/* The dark icon SVGs carry fill="#005556" as a presentation attribute, which
   any CSS fill outranks. Matching on that attribute leaves the fill="none"
   background paths alone, which would otherwise render as black squares. */
.header-container--solid .misk-burger-menu-svg-black path[fill="#005556"],
.header-container--solid .earth_icon path[fill="#005556"] {
	fill: #000;
}

/* Burger ----------------------------------------------------------------- */

/* Scoped and fully reset: Hello and Elementor both style bare `button`,
   which otherwise leaks a background and radius onto the icon. */
.misk-header-actions .misk-btn-login {
	position: relative;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

/* The parent reset gives every button a solid hover background; the burger is
   an icon, so keep it transparent. */
.misk-btn-login:hover,
.misk-btn-login:focus {
	background: none;
}

.misk-btn-login svg {
	width: 33px;
	height: 33px;
}

.misk-burger-close-svg,
.misk-btn-login .misk-burger-label-close {
	display: none;
}

body.misk-menu-open .misk-burger-menu-svg,
body.misk-menu-open .misk-burger-menu-svg-black,
body.misk-menu-open .misk-btn-login .misk-burger-label-open {
	display: none;
}

body.misk-menu-open .misk-burger-close-svg,
body.misk-menu-open .misk-btn-login .misk-burger-label-close {
	display: block;
}

/* Language switcher ------------------------------------------------------ */

/* Same 40px height as the burger so the two read as one control group. */
.misk-btn-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.header-container .misk-btn-lang .text-title-2 {
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

.misk-btn-lang:hover,
.misk-btn-lang:focus-visible {
	border-color: #fff;
	color: #fff;
}

.misk-btn-lang svg {
	width: 16px;
	height: 16px;
}

.header-container a:focus-visible,
.header-container button:focus-visible,
.misk-mobile-menu a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.header-container--solid a:focus-visible,
.header-container--solid button:focus-visible {
	outline-color: #000;
}

/* Mobile overlay --------------------------------------------------------- */

.misk-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 1;
	overflow-y: auto;
	padding-top: 96px;
	padding-bottom: 40px;
	background-color: #1c1e42;
}

.misk-mobile-menu[hidden] {
	display: none;
}

.misk-mobile-menu__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-height: 100%;
}

.misk-mobile-menu__list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.misk-mobile-menu__list li {
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}

/* The overlay is the only navigation on mobile, so it keeps its own scale. */
.misk-mobile-menu__list a {
	display: block;
	padding-block: 20px;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	text-decoration: none;
}

.misk-mobile-menu__list a.active {
	opacity: 1;
}

.misk-mobile-menu__lang {
	align-self: flex-start;
	margin-top: auto;
}

body.misk-menu-open {
	overflow: hidden;
}

/* Breakpoints ------------------------------------------------------------ */

@media (min-width: 1200px) {
	.header-container .main-padding {
		padding-inline: 40px;
	}

	.header-container .d-xl-block {
		display: block;
	}

	.header-container .d-xl-none {
		display: none;
	}

	.misk-header {
		gap: 32px;
		padding-block: 10px;
	}

	.misk-header-logo svg {
		width: 172px;
	}

	.misk-btn-lang {
		gap: 8px;
		height: 44px;
		padding: 0 18px;
	}

	.misk-btn-lang svg {
		width: 18px;
		height: 18px;
	}

	.header-container .misk-btn-lang .text-title-2 {
		font-size: 16px;
	}

	.misk-mobile-menu {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header-container,
	.header-container::before,
	.header-container .animation,
	.misk-header-nav a {
		transition: none;
	}
}

@media print {
	.header-container,
	.misk-mobile-menu {
		display: none;
	}
}