/*
 * Header (Figma «Шапка/десктоп» 4:386, «Шапка/мобільна» 4:374) and the logo (3:52).
 * Inline menu from 1200 px; below that a burger opens a panel.
 */

/* Logo: mark + «Обмір» + «БТІ Дніпро». */
.logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--c-graphite);
	text-decoration: none;
}

.logo:hover {
	color: inherit;
	text-decoration: none;
}

.logo__mark {
	display: block;
	width: 36px;
	height: 36px;
}

.logo__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	white-space: nowrap;
}

.logo__name {
	font-size: 24px;
	line-height: 26px;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.logo__sub {
	color: var(--c-graphite-soft);
	font-family: var(--font-measure);
	word-spacing: var(--ws-measure);
	font-size: var(--fs-measure-s);
	line-height: var(--lh-measure-s);
}

.logo--inverse {
	--c-logo-line: var(--c-sheet);
	--c-logo-arc: var(--c-sheet);
	color: var(--c-sheet);
}

.logo--inverse .logo__sub {
	color: var(--c-sheet);
}

/* Header bar */
.site-header {
	position: relative;
	z-index: 50;
	background: var(--c-paper);
	border-bottom: 1px solid var(--c-hatch);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 40px;
	min-height: calc(var(--header-h) - 1px); /* + 1 px border = 64 / 80 px as in Figma */
}

.site-header__logo {
	margin-right: auto;
}

.site-header__phone {
	display: none;
	color: var(--c-graphite);
	text-decoration: none;
	white-space: nowrap;
}

.site-header__phone:hover {
	color: var(--c-ink);
}

.site-header__cta {
	display: none;
	white-space: nowrap;
}

/* Burger: 44 px target, 24 px icon (Figma: 10 px padding, 8 px from the edge). */
.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--c-graphite);
	cursor: pointer;
}

.site-header__toggle .icon-close {
	display: none;
}

.site-header__toggle[aria-expanded="true"] .icon-open {
	display: none;
}

.site-header__toggle[aria-expanded="true"] .icon-close {
	display: block;
}

/* Navigation */
.site-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	color: var(--c-graphite);
	font-size: var(--fs-label);
	line-height: var(--lh-label);
	font-weight: 500;
	text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current_page_parent > a,
.site-nav__list .current-page-ancestor > a,
.site-nav__list a[aria-current] {
	color: var(--c-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.site-nav__list .sub-menu {
	display: none;
}

.site-nav__extra {
	display: none;
}

/* Below 1200 px: the menu is a panel under the bar. */
@media (max-width: 1199.98px) {
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--header-h));
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		background: var(--c-paper);
		border-bottom: 1px solid var(--c-graphite);
	}

	.js .site-nav:not(.is-open) {
		display: none;
	}

	.site-nav__list,
	.site-nav__extra {
		width: min(100% - 2 * var(--gutter), var(--container));
		margin-inline: auto;
	}

	.site-nav__list li {
		border-bottom: 1px solid var(--c-hatch);
	}

	.site-nav__list a {
		display: flex;
		align-items: center;
		min-height: 56px;
		font-size: var(--fs-body);
		line-height: var(--lh-body);
	}

	.site-nav__extra {
		display: grid;
		gap: var(--space-3);
		padding-block: var(--space-5);
	}

	.site-nav__phone {
		color: var(--c-graphite);
		text-decoration: none;
	}

	/* Without JavaScript there is no burger: the menu stays in the page flow. */
	.no-js .site-header__toggle {
		display: none;
	}

	.no-js .site-nav {
		position: static;
		flex-basis: 100%;
		max-height: none;
		border-bottom: 0;
	}

	.no-js .site-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-5);
		width: 100%;
	}

	.no-js .site-nav__list li {
		border: 0;
	}

	.no-js .site-nav__list a {
		min-height: 44px;
		font-size: var(--fs-label);
	}

	/* Below 768 px the bar has no phone or CTA: keep the panel extras under the links. */
	.no-js .site-nav__extra {
		width: 100%;
		padding-block: var(--space-2) var(--space-4);
	}

	/* Mobile menu open: the page behind it does not scroll (site.js toggles body.nav-open). */
	body.nav-open {
		overflow: hidden;
	}
}

@media (min-width: 768px) {
	.site-header__phone,
	.site-header__cta {
		display: inline-flex;
	}

	.site-nav__extra {
		display: none !important;
	}
}

@media (max-width: 1199.98px) and (min-width: 768px) {
	.site-header__inner {
		gap: 0 var(--space-5);
	}
}

/* From 1200 px: logo, menu, phone, «Замовити обмір» in one row (Figma 4:386). */
@media (min-width: 1200px) {
	.site-header__logo {
		margin-right: 0;
	}

	.site-header__toggle {
		display: none;
	}

	.site-nav {
		flex: 1 1 auto;
		min-width: 0;
	}

	.site-nav__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 28px;
	}

	.site-nav__list a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		white-space: nowrap;
	}
}