/**
 * Masthead chrome: the two header rows, their controls, and the drawer's.
 *
 * The menu itself lives in nvn-nav.css; this file is everything around it.
 * Laid out with logical properties throughout, so Arabic mirrors from the
 * `dir` attribute rather than from overrides in nvn-rtl.css.
 */

.nvn-hdr {
	--nvn-hdr-top-bg: #eff8fd;
	--nvn-hdr-main-bg: #e7f4fc;
	--nvn-hdr-line: rgba(0, 113, 169, .14);
	--nvn-hdr-line-strong: rgba(0, 113, 169, .22);
	--nvn-hdr-fg: var(--primary-color, #0071A9);
	--nvn-hdr-accent: var(--secondary-color, #2EAE49);
	--nvn-hdr-control: 36px;
	/*
	 * One size for everything in the masthead except the menu itself, which
	 * stays at 16px. The utility row is secondary to it, so it is set smaller
	 * and lighter - and the icons are driven from the same token as the words
	 * beside them, which is what stopped the row reading as oversized.
	 */
	--nvn-hdr-text: 14px;
	--nvn-hdr-weight: 500;

	font-size: var(--nvn-hdr-text);

	position: relative;
	/* Above the page, below the drop panels the bar itself opens. */
	z-index: 20;
}

.nvn-hdr__top {
	background: var(--nvn-hdr-top-bg);
	border-bottom: 1px solid var(--nvn-hdr-line);
}

.nvn-hdr__main {
	background: var(--nvn-hdr-main-bg);
}

.nvn-hdr__row {
	display: flex;
	align-items: center;
	gap: 16px;
}

.nvn-hdr__row--top {
	min-height: 58px;
	padding-block: 8px;
}

.nvn-hdr__row--main {
	min-height: 86px;
	padding-block: 10px;
	gap: 20px;
}

/* A hairline divider that takes its height from the row. */
.nvn-hdr__rule {
	flex: 0 0 1px;
	align-self: stretch;
	width: 1px;
	margin-block: 9px;
	background: var(--nvn-hdr-line-strong);
}

/* ========================================================================== *
 * 1. Utility row
 * ========================================================================== */

.nvn-hdr__social {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nvn-hdr__social a {
	display: block;
	color: var(--nvn-hdr-fg);
	font-size: var(--nvn-hdr-text);
	line-height: 1;
	text-decoration: none;
	transition: color .16s ease, transform .16s ease;
}

.nvn-hdr__social a:hover,
.nvn-hdr__social a:focus-visible {
	color: var(--nvn-hdr-accent);
}

.nvn-hdr__media {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--nvn-hdr-fg);
	font-size: var(--nvn-hdr-text);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color .16s ease;
}

.nvn-hdr__media:hover,
.nvn-hdr__media:focus-visible {
	color: var(--nvn-hdr-accent);
}

.nvn-hdr__media i {
	font-size: var(--nvn-hdr-text);
}

/* ========================================================================== *
 * 2. Actions - search, account, language
 * ========================================================================== */

.nvn-hdr__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.nvn-hdr__account {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nvn-hdr__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: var(--nvn-hdr-control);
	padding-inline: 18px;
	border: 0;
	border-radius: 9px;
	font-size: var(--nvn-hdr-text);
	font-weight: var(--nvn-hdr-weight);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.nvn-hdr__btn i {
	font-size: var(--nvn-hdr-text);
}

.nvn-hdr__btn--primary {
	background: var(--nvn-hdr-fg);
	color: #fff;
}

.nvn-hdr__btn--primary:hover,
.nvn-hdr__btn--primary:focus-visible {
	background: #005e8d;
	color: #fff;
}

.nvn-hdr__btn--outline {
	background: #fff;
	color: var(--nvn-hdr-fg);
	box-shadow: inset 0 0 0 1.5px var(--nvn-hdr-fg);
}

.nvn-hdr__btn--outline:hover,
.nvn-hdr__btn--outline:focus-visible {
	background: var(--nvn-hdr-fg);
	color: #fff;
}

.nvn-hdr__btn:focus-visible,
.nvn-hdr__search-submit:focus-visible,
.nvn-hdr__burger:focus-visible {
	outline: 2px solid var(--nvn-hdr-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------- *
 * 2.1 Search
 *
 * Open at every width that can hold it. It used to be a button that opened a
 * panel, which asked the visitor to work out that the magnifier was a button
 * before they could type anything - and needed a piece of open/closed state
 * on every page of the site to do it.
 *
 * The auto margin is what parts this row: everything before the field sits
 * with the social icons, everything from it sits at the end. `order` then
 * decides whether Media Center falls before or after it - see the breakpoints.
 * -------------------------------------------------------------------------- */

.nvn-hdr__search {
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	height: var(--nvn-hdr-control);
	margin-inline-start: auto;
	padding-inline-end: 12px;
	border: 1px solid var(--nvn-hdr-line-strong);
	border-radius: 10px;
	background: #fff;
	color: var(--nvn-hdr-fg);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.nvn-hdr__search:focus-within {
	border-color: var(--nvn-hdr-accent);
	box-shadow: 0 0 0 3px rgba(46, 174, 73, .14);
}

.nvn-hdr__search-submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 10px 0 0 10px;
	background: none;
	color: inherit;
	cursor: pointer;
}

.nvn-hdr__search-field {
	flex: 1 1 auto;
	width: 160px;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nvn-hdr-fg);
	font: inherit;
}

.nvn-hdr__search-field:focus {
	outline: none;
}

.nvn-hdr__search-field::placeholder {
	color: #6b8ba1;
	opacity: 1;
}

/* Chrome's own clear button sits tight against a borderless field. */
.nvn-hdr__search-field::-webkit-search-cancel-button {
	margin-inline-start: 6px;
}

/* -------------------------------------------------------------------------- *
 * 2.2 Language
 *
 * Select2 owns the pill's internals, so the globe is laid over it rather than
 * injected into it. Selectors are doubled up with `.lang-switcher` only to
 * out-rank the sizes that stylesheet already sets.
 * -------------------------------------------------------------------------- */

.lang-switcher.nvn-hdr__lang {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: var(--nvn-hdr-control) !important;
}

.nvn-hdr__lang-icon {
	position: absolute;
	inset-inline-start: 12px;
	top: 50%;
	z-index: 2;
	color: #fff;
	font-size: var(--nvn-hdr-text);
	transform: translateY(-50%);
	pointer-events: none;
}

/*
 * The pill is as wide as the label inside it, and no wider.
 *
 * `max-content` is measured from the rendered label itself, so the box can
 * never come out too small for its own text.
 *
 * Two earlier attempts: a hand-set `min-width`, which carried about 45px of
 * dead space; then a measurement taken from the hidden native <select>, which
 * is right in principle - a select is as wide as its longest option - but left
 * exactly zero slack, so the moment those two elements disagreed about font
 * metrics by a pixel the label ellipsised to "Engli...".
 *
 * style.css pins every `header .select2-container` to 110px !important, which
 * this has to beat as well.
 */
.lang-switcher.nvn-hdr__lang .select2-container {
	width: max-content !important;
	min-width: 0 !important;
}

/* Before Select2 upgrades it, the bare select still has to look like the pill. */
.lang-switcher.nvn-hdr__lang > select {
	height: var(--nvn-hdr-control);
	padding-inline: 34px 26px;
	border: 0;
	border-radius: 9px;
	background: var(--nvn-hdr-accent);
	color: #fff;
	font: inherit;
	font-weight: var(--nvn-hdr-weight);
	appearance: none;
	-webkit-appearance: none;
}

.lang-switcher.nvn-hdr__lang .select2-container--default .select2-selection--single {
	height: var(--nvn-hdr-control);
	border-radius: 9px;
}

.lang-switcher.nvn-hdr__lang .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding-block: 0;
	padding-inline-start: 34px;
	padding-inline-end: 26px;
	font-weight: var(--nvn-hdr-weight);
	line-height: var(--nvn-hdr-control);
}

/* The dropdown is sized from the button, so this is its escape hatch if a
   language name is ever longer than the one currently selected. */
.lang-switcher.nvn-hdr__lang .select2-container .select2-dropdown {
	min-width: max-content;
}

.lang-switcher.nvn-hdr__lang .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50% !important;
	inset-inline-end: 8px;
	transform: translateY(-50%);
}

/* ========================================================================== *
 * 3. Main row
 * ========================================================================== */

.nvn-hdr__brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.nvn-hdr__burger {
	display: none;
	/* A flex item by default shrinks; this one was squeezed to 16px wide. */
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: var(--nvn-hdr-control);
	padding: 0 8px;
	border: 0;
	background: none;
	cursor: pointer;
}

.nvn-hdr__burger span {
	display: block;
	height: 2.5px;
	border-radius: 2px;
	background: var(--nvn-hdr-fg);
	transition: background-color .16s ease;
}

.nvn-hdr__burger:hover span {
	background: var(--nvn-hdr-accent);
}

/* ========================================================================== *
 * 4. Breakpoints
 *
 * 992px up: the menu is open in the main row and the actions sit in the
 * utility row. Below that the drawer takes over, the actions move down beside
 * the logo, and Media Center moves to the end of the utility row to balance
 * the social icons now that it no longer has the actions for company.
 * ========================================================================== */

@media (min-width: 992px) {
	.nvn-hdr__actions--compact,
	.nvn-hdr__rule--burger {
		display: none;
	}

	/*
	 * Media Center belongs with the social icons here, so it is ordered ahead
	 * of the field that follows it in the markup. On a tablet the source order
	 * is already the wanted one, which is why this only applies from 992px.
	 */
	.nvn-hdr__social {
		order: 1;
	}

	.nvn-hdr__rule--social {
		order: 2;
	}

	.nvn-hdr__media {
		order: 3;
	}

	.nvn-hdr__search {
		order: 4;
	}

	.nvn-hdr__actions--bar {
		order: 5;
	}
}

@media (max-width: 991.98px) {
	.nvn-hdr__actions--bar,
	.nvn-hdr__rule--social,
	.nvn-nav-wrap {
		display: none;
	}

	.nvn-hdr__actions--compact {
		margin-inline-start: auto;
	}

	.nvn-hdr__row--main {
		min-height: 74px;
		gap: 14px;
	}

	.nvn-hdr__burger {
		display: flex;
		/* The one control a touch visitor must hit, so it keeps its size. */
		height: 44px;
	}

	/* The actions end here, so the menu control gets its own compartment. */
	.nvn-hdr__rule--burger {
		margin-block: 14px;
	}

	/* Shorter here: the row is narrower and Media Center follows it. */
	.nvn-hdr__search-field {
		width: 130px;
	}

	.header-logo {
		width: 168px;
	}
}

@media (max-width: 767.98px) {
	/*
	 * The row is down to the logo and the menu control. Six social icons and
	 * Media Center already fill the utility row at this width, and everything
	 * hidden here is a tap away inside the drawer - search included.
	 */
	.nvn-hdr__actions--compact,
	.nvn-hdr__rule--burger,
	.nvn-hdr__search {
		display: none;
	}

	.nvn-hdr__media {
		margin-inline-start: auto;
	}

	.nvn-hdr__rule--burger {
		display: none;
	}

	.nvn-hdr__row--top {
		min-height: 50px;
	}

	.nvn-hdr__social {
		gap: 14px;
	}

	.header-logo {
		width: 146px;
	}
}

@media (max-width: 359.98px) {
	/* Only on the narrowest phones, where the label would wrap the row. */
	.nvn-hdr__media span {
		display: none;
	}
}

/* ========================================================================== *
 * 5. Drawer
 * ========================================================================== */

.nvn-hdr__drawer-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nvn-hdr__account--drawer {
	flex: 1 1 auto;
}

.nvn-hdr__account--drawer .nvn-hdr__btn {
	flex: 1 1 0;
	min-width: 0;
	/* The bars' controls are 36px; a thumb needs more than that. */
	height: 46px;
	padding-inline: 12px;
}

.nvn-hdr__drawer-search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	margin-top: 14px;
	padding-inline: 14px;
	border: 1px solid var(--nvn-hdr-line-strong, rgba(0, 113, 169, .22));
	border-radius: 10px;
	background: #fff;
	color: var(--primary-color, #0071A9);
}

.nvn-hdr__drawer-search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	border: 0;
	background: none;
	color: inherit;
}

.nvn-hdr__drawer-search input:focus {
	outline: none;
}

.nvn-hdr__social--drawer {
	gap: 18px;
	font-size: 18px;
}