/*
 * Microcubo UI · header of the pages of the new design (body.mc-design, see ../layout.php)
 * The Brok header with the Figma measures at 1920: 98px high, 51px gutters, logo 189px, menu 16px SemiBold with
 * 42px between the items. Only loaded on those pages.
 *
 * The theme options set the current header with inline CSS (120px, 3% sides, 17px) and theme/theme.css resizes
 * the menu per breakpoint with !important: hence the longer selectors and the !important flags here.
 */

body.mc-design {
	--mc-header-h: clamp(80px, 5.104vw, 98px);
}

body.mc-design.qodef-header--standard #qodef-page-header {
	height: var(--mc-header-h);
}

/* the gutter of the pages */
body.mc-design.qodef-header--standard #qodef-page-header-inner {
	padding: 0 2.656vw;
}

/* ------------------------------------------------------------------ logo */

body.mc-design #qodef-page-header .qodef-header-logo-link {
	width: auto !important;
	height: auto;
	padding-bottom: .2vw; /* Figma: 2px above the middle */
}

body.mc-design #qodef-page-header .qodef-header-logo-link img {
	width: clamp(160px, 9.844vw, 189px);
	max-width: none;
}

/* ------------------------------------------------------------------ menu */

/* the item texts have 5px on each side: the last one ends at the gutter */
body.mc-design .qodef-header-navigation {
	margin-right: -5px;
}

body.mc-design .qodef-header-navigation > ul > li {
	margin: 0 clamp(8px, .833vw, 16px) !important;
}

body.mc-design .qodef-header-navigation > ul > li:first-child {
	margin-left: 0 !important;
}

/* the last item, or the one before the language switcher (which is out of the row) */
body.mc-design .qodef-header-navigation > ul > li:last-child,
body.mc-design .qodef-header-navigation > ul > li:has(+ .wpml-ls-item) {
	margin-right: 0 !important;
}

body.mc-design .qodef-header-navigation > ul > li > a {
	padding-top: .39vw; /* Figma: the text sits 4px under the middle */
	font-size: clamp(14px, 1.1vw, 16px) !important;
	font-weight: 600;
}

/* language switcher: in the corner above the menu, as on the current header */
body.mc-design .qodef-header-navigation > ul > li.wpml-ls-item {
	top: calc(var(--mc-header-h) / -4 - 3px);
}

body.mc-design .qodef-header-navigation > ul > li.wpml-ls-item > a {
	padding-top: 0;
}

body.mc-design .qodef-header-navigation ul li.wpml-ls-item .qodef-drop-down-second {
	top: calc(var(--mc-header-h) / 2 + 14px) !important;
}

/* ------------------------------------------------------------------ small laptops */

/* theme/theme.css switches to the mobile header under 1200px (the current menu does not fit): this one does */
@media (min-width: 1025px) and (max-width: 1199px) {
	body.mc-design.qodef-header--standard #qodef-page-header {
		display: inline-block !important;
	}

	body.mc-design #qodef-page-mobile-header {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ tablet and mobile (the theme's mobile header) */

/* the logo is not bigger than on a small laptop (the theme options give it 46px of height, 209px wide) */
@media (max-width: 1024px) {
	body.mc-design #qodef-page-mobile-header .qodef-mobile-header-logo-link {
		height: auto;
		align-self: center;
	}

	body.mc-design #qodef-page-mobile-header .qodef-mobile-header-logo-link img {
		width: 160px;
	}
}

/* tablet: the 30px gutter of the pages (the theme options set 20px, the gutter on phones) */
@media (min-width: 768px) and (max-width: 1024px) {
	body.mc-design.qodef-mobile-header--standard #qodef-page-mobile-header-inner:not(.qodef-content-grid) {
		padding: 0 30px;
	}
}