/**
 * components-header.css — GLOBAL v2 site header (topbar + navy header + nav +
 * search + mobile drawer). Sitewide; replaces the old Kadence-targeting
 * header-v2.css (which is no longer enqueued — the Kadence header DOM it styled
 * is gone, the child header.php renders its own markup).
 *
 * Ported from docs-claude/styles/rsm-v2.css (.topbar/.header/.nav/.logo/.footer)
 * and mapped onto the GLOBAL --mtsp-* tokens (tokens.css, крок 1). The footer
 * stays styled by style.css (.mtsp-footer, already navy).
 *
 * Added 2026-06-30 (Етап 1 крок 2). Scoped under .mtsp-site-header to avoid
 * Kadence `.container/.header/.nav` collisions.
 */

/* ============ TOPBAR ============ */
.mtsp-site-header .topbar {
	background: var(--mtsp-gray-100);
	padding: 8px 0;
	font-size: 13px;
	color: var(--mtsp-gray-600);
	border-bottom: 1px solid var(--mtsp-gray-200);
}
.mtsp-site-header .topbar-inner,
.mtsp-site-header .header-inner {
	max-width: 1280px; /* match content containers (.mtsp-eq-container / .mtsp-seal-page .container = 1280) so the logo's left edge lines up with breadcrumbs + page content */
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
}
.mtsp-site-header .topbar-phones { display: flex; gap: 20px; flex-wrap: wrap; }
.mtsp-site-header .topbar-phones a {
	color: var(--mtsp-gray-800);
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
}
.mtsp-site-header .topbar-phones a:hover { color: var(--mtsp-accent); }

.mtsp-site-header .topbar-lang { display: flex; gap: 4px; }
.mtsp-site-header .topbar-lang-link {
	color: var(--mtsp-gray-600);
	text-decoration: none;
	padding: 2px 8px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 12px;
	transition: background .15s, color .15s;
}
.mtsp-site-header .topbar-lang-link:hover { color: var(--mtsp-navy); background: var(--mtsp-gray-200); }
.mtsp-site-header .topbar-lang-link.active { background: var(--mtsp-navy); color: var(--mtsp-white); }

/* ============ HEADER (navy) ============ */
.mtsp-site-header .header { background: var(--mtsp-navy); padding: 18px 0; }
.mtsp-site-header .logo {
	color: var(--mtsp-white);
	font-family: var(--mtsp-font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.5px;
	text-decoration: none;
	white-space: nowrap;
}
.mtsp-site-header .logo span { color: var(--mtsp-accent); }

.mtsp-site-header .header-nav-wrap {
	display: flex;
	align-items: center;
	gap: 28px;
}

/* ============ NAV ============ */
.mtsp-site-header .nav {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}
.mtsp-site-header .nav li { margin: 0; }
.mtsp-site-header .nav a {
	color: var(--mtsp-white);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	opacity: 0.85;
	transition: opacity .2s, color .2s;
	white-space: nowrap;
}
.mtsp-site-header .nav a:hover,
.mtsp-site-header .nav .current-menu-item > a,
.mtsp-site-header .nav .current_page_item > a,
.mtsp-site-header .nav .current-menu-ancestor > a {
	opacity: 1;
	color: var(--mtsp-accent);
}

/* ============ HEADER SEARCH (navy variant) ============ */
/* Light field + accent button. Self-contained + explicit position/width to beat
   any leaked Kadence/parent input rules (fix-2: the old style.css rules leaked
   width:100% + position:absolute → overflow + white-on-white). */
.mtsp-site-header .mtsp-header-search {
	display: flex;
	align-items: stretch;       /* input + button equal height */
	width: 240px;
	height: 38px;
	flex: 0 0 auto;
	overflow: hidden;           /* hard guard: nothing escapes the rounded box */
	border-radius: 8px;
}
.mtsp-site-header .mtsp-header-search__input {
	position: static;           /* override leaked position from parent rules */
	flex: 1 1 auto;
	min-width: 0;               /* shrink inside the row, never force overflow */
	width: auto;                /* override leaked width:100% */
	height: 100%;
	margin: 0;
	background: var(--mtsp-white);
	border: 1px solid var(--mtsp-gray-200);
	border-right: none;
	border-radius: 8px 0 0 8px;
	color: var(--mtsp-gray-800);          /* dark text — readable on white */
	font-size: 13px;
	font-family: inherit;
	padding: 0 14px;
	box-sizing: border-box;
	outline: none;
	box-shadow: none;
}
.mtsp-site-header .mtsp-header-search__input::placeholder { color: var(--mtsp-gray-500); opacity: 1; }
.mtsp-site-header .mtsp-header-search__input:focus {
	border-color: var(--mtsp-accent);
	background: var(--mtsp-white);
	box-shadow: none;
}
.mtsp-site-header .mtsp-header-search__btn {
	position: static;           /* override leaked position:absolute */
	flex: 0 0 auto;
	width: 44px;
	min-width: 44px;
	height: 100%;
	background: var(--mtsp-accent);
	color: var(--mtsp-white);
	border: none;
	border-radius: 0 8px 8px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s;
	padding: 0;
}
.mtsp-site-header .mtsp-header-search__btn:hover { background: var(--mtsp-accent-hover); }
.mtsp-site-header .mtsp-header-search__btn svg { width: 16px; height: 16px; stroke: var(--mtsp-white); fill: none; }

/* ============ MOBILE TOGGLE (hamburger) — hidden on desktop ============ */
.mtsp-site-header .nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 38px;
	padding: 8px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	cursor: pointer;
}
.mtsp-site-header .nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--mtsp-white);
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}
.mtsp-site-header.is-nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mtsp-site-header.is-nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.mtsp-site-header.is-nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ MOBILE (≤1024) — drawer ============ */
@media (max-width: 1024px) {
	.mtsp-site-header .nav-toggle { display: flex; }
	.mtsp-site-header .header-inner { position: relative; }
	.mtsp-site-header .header-nav-wrap {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--mtsp-navy);
		padding: 0 24px;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s ease, padding .25s ease;
		box-shadow: 0 12px 24px rgba(8, 22, 40, .25);
		z-index: 200;
	}
	.mtsp-site-header.is-nav-open .header-nav-wrap {
		max-height: 80vh;
		padding: 16px 24px 22px;
		overflow-y: auto;
	}
	.mtsp-site-header .nav {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}
	.mtsp-site-header .nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
	.mtsp-site-header .nav a { display: block; padding: 13px 2px; font-size: 15px; opacity: 1; }
	.mtsp-site-header .mtsp-header-search { width: 100%; margin-top: 16px; }
}