/*
 * Header - one template part (parts/header.html), two looks.
 *
 * Inner-page look (416:954, 418:1831, 441:440, 499:347): blue C03 on the #F2F2F2 page.
 * Homepage look (326:1240): white C01 over the hero photo; the wrapper carries
 * .mn-chrome-header--home and the header is laid over the first section.
 *
 * Every value below is read from those nodes (frame 1440 wide, header box 0..193 from 499:347):
 *   top row      y 50, Geist 400 16/20.8, gap 35 (131 Įmonė, 212, 323, 438)
 *   logo         x 629..809, y 25, 180 x 70 (inner, vector) / 180 x 72 (homepage)
 *   LT control   flag 21 x 15 at x 1203 y 53; "LT" Geist 500 16 at x 1231; chevron 4 x 1.5 at x 1253
 *   search icon  19 x 19 at x 1289 y 52
 *   rule         y 116 rendered (0.5 px stroke at y 117): 1 px at 50 % of the text colour
 *   main row     y 138, Geist 500 18/23.4, items spread across 1176 (drawn gaps 42)
 *   chevron      7 x 2 at 5 px after the label (Tvoros, Priedai / tvirtinimai)
 *
 * Desktop layout from 1176 px: the drawn main row needs 926 px of labels plus six 35 px gaps
 * (the drawn top-row gap) = 1136 px inside a 20 px gutter. Below that the header is the
 * mobile bar: logo left, LT and search, burger right; the menu opens a full-screen panel.
 * The main row's last slot reads "Mūsų darbai" (ruling) where the design draws "Galerija", and
 * it carries a chevron, so that row is about 51 px wider than drawn and its gaps are narrower.
 */

.mn-chrome-header {
	position: relative;
	z-index: 20;
}

.mn-chrome-header--home {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.mn-header {
	--mn-header-ink: var(--wp--preset--color--c-03);
	--mn-header-rule: rgb(4 68 140 / 0.5);
	color: var(--mn-header-ink);
}

.mn-chrome-header--home .mn-header {
	--mn-header-ink: var(--wp--preset--color--c-01);
	--mn-header-rule: rgb(255 255 255 / 0.5);
}

.mn-header__inner {
	position: relative;
	width: min(var(--mn-content, 1176px), 100% - 40px);
	margin-inline: auto;
}

/* ---- logo: two images, one shown per look ---- */

.mn-header .mn-header__logo a {
	display: block;
	line-height: 0;
}

.mn-header .mn-header__logo img {
	display: block;
	width: 180px;
	height: 70px;
	max-width: none;
}

.mn-header .mn-header__logo--light img {
	height: 72px;
}

.mn-header .mn-header__logo--light,
.mn-chrome-header--home .mn-header .mn-header__logo--dark {
	display: none;
}

.mn-chrome-header--home .mn-header .mn-header__logo--light {
	display: block;
}

/* ---- tools: LT control and search ---- */

.mn-header .mn-header__tools {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 32px;
}

/* GTranslate "flags_code": one link per language; the current one is the closed control. */
.mn-lang {
	position: relative;
}

.mn-lang .gtranslate_wrapper {
	display: block;
}

.mn-header .mn-lang a.glink {
	display: none;
	align-items: center;
	gap: 7px;
	min-height: 24px;
	box-sizing: border-box;
	padding-block: 1.6px;
	margin-block: -1.6px;
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 500;
	font-size: 16px;
	line-height: 20.8px;
	color: var(--mn-header-ink);
	text-decoration: none;
	white-space: nowrap;
}

.mn-header .mn-lang a.glink.gt-current-lang {
	display: flex;
	font-weight: 500;
}

.mn-header .mn-lang a.glink span {
	margin: 0;
	font-size: 16px;
	vertical-align: baseline;
}

.mn-header .mn-lang a.glink img {
	display: block;
	width: 21px;
	height: 15px;
	object-fit: cover;
	opacity: 1;
}

/* The drawn flag (326:1269: #FFAF00 / #007500 / #D10000) replaces the plugin's own. */
.mn-header .mn-lang a.glink[data-gt-lang="lt"] img {
	content: url("../../img/chrome/flag-lt.svg");
}

.mn-header .mn-lang .mn-lang-chevron {
	display: block;
	position: relative;
	top: 1.6px;
	flex: 0 0 auto;
	width: 5px;
	height: 3px;
	margin-left: -2px;
}

.mn-header .mn-lang a.glink:not(.gt-current-lang) .mn-lang-chevron {
	display: none;
}

/* The other language: a plain list under the control, the dropdown style of the menu. */
.mn-header .mn-lang:hover a.glink:not(.gt-current-lang),
.mn-header .mn-lang:focus-within a.glink:not(.gt-current-lang) {
	display: flex;
	position: absolute;
	top: 100%;
	left: -12px;
	z-index: 5;
	margin: 0;
	padding: 10px 12px;
	background-color: var(--wp--preset--color--c-03);
	color: var(--wp--preset--color--c-01);
	font-weight: 400;
}

/* Search: core search block, button only, expands on click. The drawn icon, not core's. */
.mn-header .mn-search {
	position: relative;
	margin: 0;
}

.mn-header .mn-search .wp-block-search__inside-wrapper {
	width: auto !important;
	padding: 0;
	border: 0;
	background: none;
}

.mn-header .mn-search .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	min-width: 0;
	max-width: none;
	margin: 0 -2.5px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--mn-header-ink);
	cursor: pointer;
}

.mn-header .mn-search .wp-block-search__button .mn-search-icon {
	display: block;
	width: 19px;
	height: 19px;
	min-width: 0;
	min-height: 0;
	fill: none;
}

.mn-header .mn-search .wp-block-search__input {
	position: absolute;
	top: 50%;
	right: calc(100% + 8px);
	width: 220px;
	height: 32px;
	margin: 0;
	padding: 0 4px;
	transform: translateY(-50%);
	border: 0;
	border-bottom: 1px solid var(--mn-header-ink);
	border-radius: 0;
	background: transparent;
	color: var(--mn-header-ink);
	font-family: var(--wp--preset--font-family--geist);
	font-weight: 400;
	font-size: 16px;
	line-height: 20.8px;
}

.mn-header .mn-search .wp-block-search__input::placeholder {
	color: var(--mn-header-ink);
	opacity: 0.7;
}

/* an open search field takes the LT control's place rather than lying over it */
.mn-header .mn-header__tools:has(.mn-search:not(.wp-block-search__searchfield-hidden)) .mn-lang {
	visibility: hidden;
}

.mn-header .mn-search.wp-block-search__searchfield-hidden .wp-block-search__input {
	width: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* ---- the rule under the top row: 0.5 px drawn, rendered as 1 px at 50 % ---- */

.mn-header .mn-header__rule {
	display: none;
	width: 100%;
	max-width: none;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--mn-header-rule);
	opacity: 1;
	pointer-events: none;
}

/* ---- drawn icons (inline SVG from inc/assets.php, drawn #04448C; white on the homepage) ---- */

.mn-chrome-header--home .mn-header .mn-chevron path,
.mn-chrome-header--home .mn-header .mn-lang-chevron path {
	stroke: var(--wp--preset--color--c-01);
}

.mn-chrome-header--home .mn-header .mn-search-icon path {
	fill: var(--wp--preset--color--c-01);
}

/* ---- navigation: shared ---- */

.mn-header nav.mn-nav {
	color: var(--mn-header-ink);
	font-family: var(--wp--preset--font-family--geist);
}

.mn-header nav.mn-nav .wp-block-navigation-item__content {
	color: inherit;
	text-decoration: none;
}

.mn-header nav.mn-nav .wp-block-navigation__submenu-icon .mn-chevron {
	display: block;
	width: 8px;
	height: 4px;
}

.mn-header nav.mn-nav .wp-block-navigation__responsive-container-open,
.mn-header nav.mn-nav .wp-block-navigation__responsive-container-close {
	color: var(--mn-header-ink);
}

/* ============================== desktop ============================== */

@media (min-width: 1176px) {
	.mn-header__inner {
		height: 193px;
	}

	/* the drawn rule under the top row (a core separator, so it is a real element) */
	.mn-header .mn-header__rule {
		display: block;
		position: absolute;
		top: 116px;
		left: 0;
		right: 0;
	}

	.mn-header .mn-header__logo {
		position: absolute;
		top: 25px;
		left: calc(50% - 90px);
		z-index: 3;
	}

	/* LT ends at 1257 and the 19 px icon starts at 1289 (its 24 px button at 1286.5) */
	.mn-header .mn-header__tools {
		position: absolute;
		top: 50px;
		right: 0;
		height: 20.8px;
		gap: 29.5px;
		z-index: 3;
	}

	.mn-header .mn-search {
		top: 1px;
	}

	.mn-header nav.mn-nav {
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		z-index: 2;
	}

	.mn-header nav.mn-nav .wp-block-navigation__container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		gap: 0;
	}

	/* the top row keeps the drawn 35 px between labels; the main row spreads across the width */
	.mn-header nav.mn-nav .wp-block-navigation__container > li:nth-child(-n+3) {
		margin-right: 35px;
	}

	/* line break between the top row (items 1-4) and the main row (items 5+) */
	.mn-header nav.mn-nav .wp-block-navigation__container::after {
		content: "";
		order: 1;
		flex-basis: 100%;
		height: 0;
	}

	.mn-header nav.mn-nav .wp-block-navigation__container > li:nth-child(4) {
		margin-right: auto;
	}

	.mn-header nav.mn-nav .wp-block-navigation__container > li:nth-child(n+5) {
		order: 2;
		margin-top: 67.2px;
	}

	/* main row: Geist 500 18/23.4 */
	.mn-header nav.mn-nav .wp-block-navigation__container > li > .wp-block-navigation-item__content {
		display: block;
		padding: 0.3px 0;
		margin: -0.3px 0;
		font-weight: 500;
		font-size: 18px;
		line-height: 23.4px;
		white-space: nowrap;
	}

	/* top row: Geist 400 16/20.8, link box padded to the 24 px target floor */
	.mn-header nav.mn-nav .wp-block-navigation__container > li:nth-child(-n+4) > .wp-block-navigation-item__content {
		padding: 1.6px 0;
		margin: -1.6px 0;
		font-weight: 400;
		font-size: 16px;
		line-height: 20.8px;
	}

	/* chevron toggle: 24 x 24 target, laid out as the drawn 5 px gap + 7 px chevron */
	.mn-header nav.mn-nav .wp-block-navigation__submenu-icon {
		position: relative;
		width: 24px;
		height: 24px;
		margin: -0.3px -12px -0.3px 0;
		padding: 0;
		background: none;
		border: 0;
		color: inherit;
	}

	/* the 24 px target must not make the 20.8 px top row taller */
	.mn-header nav.mn-nav .wp-block-navigation__container > li:nth-child(-n+4) > .wp-block-navigation__submenu-icon {
		margin-block: -1.6px;
	}

	.mn-header nav.mn-nav .wp-block-navigation__submenu-icon .mn-chevron {
		position: absolute;
		top: 10px;
		left: 4.5px;
		width: 8px;
		height: 4px;
	}

	/*
	 * Parents the design draws WITHOUT a chevron (Įmonė, Kiemo vartai / automatika) get one because
	 * the operator ruling gives them a list; it sits in the gap and takes no width, so every drawn
	 * label keeps its drawn position.
	 */
	.mn-header nav.mn-nav .wp-block-navigation__container > li:nth-child(1) > .wp-block-navigation__submenu-icon,
	.mn-header nav.mn-nav .wp-block-navigation__container > li:nth-child(6) > .wp-block-navigation__submenu-icon {
		margin-right: -24px;
	}

	/* the top row's chevron is the LT control's 5 x 3 one (326:1268) */
	.mn-header nav.mn-nav .wp-block-navigation__container > li:nth-child(-n+4) > .wp-block-navigation__submenu-icon .mn-chevron {
		top: 11px;
		left: 4.5px;
		width: 5px;
		height: 3px;
	}

	/* dropdown: a plain list under the item, in the design's blue and white, menu type */
	.mn-header nav.mn-nav .has-child .wp-block-navigation__submenu-container {
		top: 100%;
		left: 0;
		min-width: 0;
		padding: 12px 0;
		border: 0;
		background-color: var(--wp--preset--color--c-03);
		color: var(--wp--preset--color--c-01);
	}

	.mn-header nav.mn-nav .wp-block-navigation__container > li:last-child > .wp-block-navigation__submenu-container {
		left: auto;
		right: -12px;
	}

	.mn-header nav.mn-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 8px 20px;
		font-weight: 400;
		font-size: 16px;
		line-height: 20.8px;
		white-space: nowrap;
		color: var(--wp--preset--color--c-01);
	}
}

/* ============================== mobile bar ============================== */

@media (max-width: 1175.98px) {
	.mn-header__inner {
		display: flex;
		align-items: center;
		gap: 16px;
		padding-block: 16px;
	}

	.mn-header .mn-header__logo {
		margin-right: auto;
	}

	.mn-header .mn-header__logo img,
	.mn-header .mn-header__logo--light img {
		width: auto;
		height: 52px;
	}

	.mn-header .mn-header__tools {
		gap: 16px;
	}

	.mn-header .mn-search .wp-block-search__input {
		top: calc(100% + 20px);
		right: 0;
		width: min(300px, calc(100vw - 40px));
		height: 40px;
		padding: 0 8px;
		transform: none;
		border: 1px solid var(--wp--preset--color--c-03);
		background-color: var(--wp--preset--color--c-06);
		color: var(--wp--preset--color--c-03);
	}

	/* the burger from 0 up to the desktop width, not only below core's 600 px */
	.mn-header nav.mn-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}

	.mn-header nav.mn-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* ---- the open panel: full screen, the X where the burger was ----
	 * Selectors carry .mn-header__inner so they outrank core's :not(.has-background) and
	 * :not(.has-text-color) overlay defaults (white / black).
	 */

	.mn-header .mn-header__inner nav.mn-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0 20px 40px;
		background-color: var(--wp--preset--color--c-06);
		color: var(--wp--preset--color--c-03);
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 30px;
		right: 0;
		width: 24px;
		height: 24px;
		color: var(--wp--preset--color--c-03);
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 100px;
		align-items: stretch;
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		gap: 0;
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .wp-block-navigation__container > li {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		color: var(--wp--preset--color--c-03) !important;
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .wp-block-navigation__container > li > .wp-block-navigation-item__content {
		flex: 1 1 0;
		padding: 12px 0;
		font-weight: 500;
		font-size: 18px;
		line-height: 23.4px;
		color: var(--wp--preset--color--c-03);
	}

	/* core marks every list open while the panel is open, so the panel uses its own toggles
	 * (header.js clones core's button, label included, as .mn-acc-toggle) */
	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .wp-block-navigation__submenu-icon:not(.mn-acc-toggle) {
		display: none;
	}

	.mn-header nav.mn-nav .mn-acc-toggle {
		display: none;
	}

	/* accordion chevron: the drawn main-row chevron, scaled up for touch, 44 x 44 target */
	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .mn-acc-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0 -10px 0 0;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .mn-acc-toggle .mn-chevron {
		position: static;
		width: 14px;
		height: 7px;
		transition: transform 0.15s ease;
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .mn-acc-toggle .mn-chevron path {
		stroke: var(--wp--preset--color--c-03);
		stroke-width: 1.5;
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .mn-acc-toggle[aria-expanded="true"] .mn-chevron {
		transform: rotate(180deg);
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .has-child > .wp-block-navigation__submenu-container {
		display: none;
		flex-basis: 100%;
		min-width: 0;
		padding: 0 0 8px 16px;
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .has-child.mn-acc-open > .wp-block-navigation__submenu-container {
		display: flex;
	}

	.mn-header .mn-header__inner nav.mn-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 8px 0;
		font-weight: 400;
		font-size: 16px;
		line-height: 20.8px;
		color: var(--wp--preset--color--c-03);
	}
}

/* the cloned accordion toggles exist at every width; only the open panel shows them */
@media (min-width: 1176px) {
	.mn-header nav.mn-nav .mn-acc-toggle {
		display: none;
	}
}