/* ==========================================================================
   Layout: header + mega menu (129:2, 136:181), mobile menu (189:2, 189:58),
   footer (17:2, 181:232), sections
   ========================================================================== */

/* ------------------------------------------------------------- Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-bg);
	border-bottom: 1px solid transparent;
	transition: border-color var(--t-fast) var(--ease);
}

.site-header.is-scrolled,
.site-header.is-menu-open {
	border-bottom-color: var(--c-line);
}

.site-header__bar {
	display: flex;
	align-items: center;
	height: var(--header-h);
}

.site-header__logo {
	flex: none;
	margin-left: 12px;
}

.site-header__logo-img {
	width: 235px;
	height: auto;
}

/* The nav and its items take the full bar height (links stay centred), so the pointer never leaves
   "Tehnika" on its way down to the mega menu: a 39 px gap used to start the close timer and the menu blinked. */
.main-nav {
	align-self: stretch;
	margin-left: auto;
}

.main-nav__list {
	display: flex;
	align-items: stretch;
	gap: 40px;
	height: 100%;
	margin: 0;
}

.main-nav__item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.main-nav__link {
	position: relative;
	display: block;
	color: var(--c-ink);
	font-size: 13px;
	font-weight: var(--fw-bold);
	line-height: 22px;
	letter-spacing: 0.0462em;
	text-transform: uppercase;
	transition: color var(--t-fast) var(--ease);
}

.main-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-fast) var(--ease);
}

.main-nav__link:hover {
	color: var(--c-muted);
}

.main-nav__link:hover::after,
.main-nav__link.is-active::after,
.main-nav__item--mega.is-open .main-nav__link::after {
	transform: scaleX(1);
}

.main-nav__link.is-active,
.main-nav__item--mega.is-open .main-nav__link {
	color: var(--c-ink);
}

.main-nav__toggle {
	display: grid;
	place-items: center;
	width: 16px;
	height: 22px;
	margin-left: -1px;
	color: var(--c-ink);
}

.main-nav__chevron {
	width: 12px;
	height: 12px;
	transition: transform var(--t-fast) var(--ease);
}

.main-nav__item--mega.is-open .main-nav__chevron {
	transform: rotate(180deg);
}

.site-header .site-header__social {
	margin-left: 77px;
}

/* Mega menu: absolute to the sticky header, full width */
.mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 44px 0;
	background: var(--c-white);
	border-top: 1px solid var(--c-line);
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}

.main-nav__item--mega.is-open .mega {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--t-fast) var(--ease);
}

.mega__inner {
	display: flex;
	align-items: stretch;
}

/* content-box + flex-basis 0 = equal content widths, like Figma "fill" columns */
.mega__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 14px;
	box-sizing: content-box;
	min-width: 0;
	padding: 0 32px;
	border-left: 1px solid var(--c-line);
}

.mega__col:first-child {
	padding-left: 0;
	border-left: 0;
}

.mega__title {
	padding-bottom: 6px;
	color: var(--c-ink);
	font-size: 16px;
	font-weight: var(--fw-bold);
	line-height: 24px;
	letter-spacing: 0.0188em;
}

.mega__title:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mega__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	font-size: 14px;
	line-height: 22px;
}

.mega__link {
	color: var(--c-muted);
	transition: color var(--t-fast) var(--ease);
}

.mega__link:hover {
	color: var(--c-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.mega__link.is-active {
	color: var(--c-ink);
}

/* Burger (mobile) */
.burger {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	margin-right: -10px;
	color: var(--c-ink);
}

.burger__lines,
.burger__lines::before,
.burger__lines::after {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.burger__lines {
	position: relative;
}

.burger__lines::before,
.burger__lines::after {
	content: "";
	position: absolute;
	left: 0;
}

.burger__lines::before {
	top: -8px;
}

.burger__lines::after {
	top: 8px;
}

.burger[aria-expanded="true"] .burger__lines {
	background: transparent;
}

.burger[aria-expanded="true"] .burger__lines::before {
	transform: translateY(8px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__lines::after {
	transform: translateY(-8px) rotate(-45deg);
}

.burger:active {
	background: var(--c-line);
}

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

.mobile-menu {
	display: none;
}

@media (max-width: 1023px) {
	.site-header__logo {
		margin-left: 0;
	}

	.site-header__logo-img {
		width: 136px;
	}

	.main-nav,
	.site-header .site-header__social {
		display: none;
	}

	.burger {
		display: grid;
	}

	.mobile-menu:not([hidden]) {
		position: fixed;
		top: var(--header-h);
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--c-white);
	}
}

.mobile-menu__list,
.mobile-menu__sub,
.mobile-menu__third {
	margin: 0;
}

.mobile-menu__row,
.mobile-menu__subrow {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border-bottom: 1px solid var(--c-line);
	color: var(--c-ink);
	font-weight: var(--fw-bold);
	text-align: left;
}

.mobile-menu__row {
	padding: 20px var(--gutter);
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.0111em;
}

.mobile-menu__sub {
	background: var(--c-bg);
}

.mobile-menu__subrow {
	padding: 20px var(--gutter) 20px calc(var(--gutter) + 12px);
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0.0133em;
}

.mobile-menu__row.is-active,
.mobile-menu__row:active,
.mobile-menu__subrow[aria-expanded="true"],
.mobile-menu__subrow:active {
	background: var(--c-bg-2);
}

.mobile-menu__row.is-active::before,
.mobile-menu__subrow[aria-expanded="true"]::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--c-ink);
}

.mobile-menu__row--toggle.is-active::before {
	content: none;
}

.mobile-menu__chevron {
	flex: none;
	width: 17px;
	height: 17px;
	transition: transform var(--t-fast) var(--ease);
}

[aria-expanded="true"] > .mobile-menu__chevron {
	transform: rotate(180deg);
}

.mobile-menu__third {
	padding: 0 0 10px calc(var(--gutter) + 24px);
	background: var(--c-bg-2);
	border-bottom: 1px solid var(--c-line);
}

.mobile-menu__link {
	display: block;
	padding: 10px var(--gutter) 10px 0;
	color: var(--c-muted);
	font-size: 15px;
	line-height: 22px;
}

.mobile-menu__link.is-active {
	color: var(--c-ink);
	font-weight: var(--fw-bold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mobile-menu__footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	margin-top: auto;
	padding: 22px var(--gutter) 28px;
	background: var(--c-bg);
	border-top: 1px solid var(--c-line);
}

.mobile-menu__phone {
	color: var(--c-ink);
	font-size: 20px;
	font-weight: var(--fw-bold);
	line-height: 28px;
}

.mobile-menu__email {
	color: var(--c-muted);
	font-size: 15px;
	line-height: 22px;
}

.mobile-menu__footer .social-links {
	gap: 14px;
}

.mobile-menu__footer .btn {
	align-self: stretch;
	min-height: 52px;
	padding-block: 15px;
}

/* ------------------------------------------------------------- Footer */

.site-footer {
	padding: 90px 0 70px;
	background: var(--c-ink);
	color: var(--c-white);
}

.site-footer__top {
	display: flex;
	gap: 80px;
}

.site-footer__brand {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 18px;
	width: 360px;
}

.site-footer__logo svg,
.site-footer__logo img {
	width: 158px;
	height: auto;
}

.site-footer__name {
	font-size: 18px;
	font-weight: var(--fw-bold);
	line-height: 24px;
	letter-spacing: 0.0556em;
	text-transform: uppercase;
}

.site-footer__tagline,
.site-footer__links a,
.site-footer__contacts {
	color: var(--c-on-dark);
	font-size: 14px;
	line-height: 22px;
}

.site-footer__tagline {
	line-height: 23px;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.site-footer__col--tehnika {
	flex: none;
	width: 260px;
}

.site-footer__col--company {
	flex: none;
	width: 180px;
}

.site-footer__col--contacts {
	flex: 1 1 auto;
}

.site-footer__heading {
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	font-size: 14px;
	line-height: 22px;
}

.site-footer__links a,
.site-footer__contacts a,
.site-footer__legal a {
	transition: color var(--t-fast) var(--ease);
}

.site-footer__links a:hover,
.site-footer__contacts a:hover,
.site-footer__legal a:hover {
	color: var(--c-white);
}

.site-footer__contacts p + p {
	margin-top: 22px;
}

.site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 56px;
	padding-top: 56px;
	border-top: 1px solid var(--c-ink-80);
}

.site-footer__copy,
.site-footer__legal a,
.site-footer__legal-button {
	color: var(--c-on-dark-muted);
	font-size: 13px;
	line-height: 20px;
}

/* Cookie settings button (opens the consent banner): looks like the legal links. */
.site-footer__legal-button {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-weight: inherit;
	text-decoration: inherit;
	cursor: pointer;
	transition: color var(--t-fast) var(--ease);
}

.site-footer__legal-button:hover,
.site-footer__legal-button:focus-visible {
	color: var(--c-white);
}

/* Type set on the list too: a link that wrapped took the body line height while the button kept 20 px.
   The list keeps its width (the copyright line wraps instead), each item stays on one line. */
.site-footer__legal {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	margin: 0;
	font-size: 13px;
	line-height: 20px;
}

.site-footer__legal li {
	white-space: nowrap;
}

.site-footer .site-footer__social {
	display: none;
}

.site-footer__social .social-links__link {
	color: var(--c-on-dark);
}

.site-footer__social .social-links__link:hover {
	color: var(--c-white);
}

.site-footer__credit svg,
.site-footer__credit img {
	width: 117px;
	height: auto;
}

@media (max-width: 1279px) {
	.site-footer__top {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px 40px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
		width: auto;
		max-width: 420px;
	}

	.site-footer__col--tehnika,
	.site-footer__col--company {
		width: auto;
	}
}

/* Below the header breakpoint the header's social links are gone (burger menu), so the footer shows them. */
@media (max-width: 1023px) {
	.site-footer .site-footer__social {
		display: flex;
		margin-top: 4px;
	}
}

@media (max-width: 767px) {
	.site-footer {
		padding: 48px 0 28px;
	}

	.site-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
	}

	.site-footer__brand {
		gap: 14px;
	}

	.site-footer__col--contacts {
		grid-column: 1 / -1;
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		margin-top: 32px;
		padding-top: 32px;
	}
}

/* ----------------------------------------------------------- Sections */

.section {
	padding-block: var(--section-y);
}

.section--alt {
	background: var(--c-bg-2);
}

.section--dark {
	background: var(--c-ink);
	color: var(--c-white);
}

.section-intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 50px;
}

.section-intro .lead {
	max-width: 760px;
}

@media (max-width: 767px) {
	.section-intro {
		gap: 10px;
		margin-bottom: 24px;
	}
}