/* ==========================================================================
   Layout: container, sections, header, footer, mobile menu, bottom nav, hero.
   ========================================================================== */

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.container--narrow {
	max-width: calc(880px + var(--gutter) * 2);
}

.site-main {
	flex: 1 0 auto;
}

.section {
	padding: 100px 0;
}

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

.section--dark {
	color: var(--text-on-dark);
	background: var(--bg-dark);
}

.section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 30px;
}

.section__head .section__title {
	margin-bottom: 0;
}

.section__head-btn {
	flex: none;
	min-width: 345px;
}

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

.header {
	position: sticky;
	top: 0;
	z-index: 500;
	height: var(--header-h);
	color: #fff;
	background: var(--bg-dark);
}

.header__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(14px, 1.7vw, 25px);
	height: 100%;
}

.header__sep {
	width: 1px;
	height: 50px;
	flex: none;
	background: rgba(255, 255, 255, 0.2);
}

.header__cta {
	margin-left: auto;
}

.header__mobile {
	display: none;
}

/* Logo (text fallback mimics the design) */
.logo {
	display: inline-flex;
	align-items: center;
	color: #fff;
}

.logo__img {
	height: 34px;
	width: auto;
}

.logo__text {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
}

.logo__center {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
}

.logo__center b {
	font-weight: 700;
}

.logo__center span {
	font-weight: 300;
}

.logo__divider {
	width: 1px;
	height: 30px;
	background: currentColor;
	opacity: 0.6;
}

.logo__brand {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.5px;
}

.logo__brand b {
	padding: 1px 4px;
	font-size: 11px;
	font-weight: 700;
	color: #212121;
	background: #2bd4c9;
	border-radius: 3px;
}

.logo__atom {
	width: 34px;
	height: 20px;
}

/* Nav.
   Меню рендериться стандартним Walker_Nav_Menu (класи на <li> ставить WP,
   активний пункт — .current-menu-item), тому стилізуємо за структурою:
   .nav__list > li > a. Мобільне меню (ul.mobile-menu__list) — те саме меню,
   стилі блокових пунктів нижче в секції mobile-menu. */
.nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(14px, 2.1vw, 31px);
}

.nav__list > li > a {
	font-size: 17px;
	font-weight: 300;
	line-height: 18px;
	white-space: nowrap;
	transition: color 0.2s;
}

.nav__list > li > a:hover,
.nav__list > .current-menu-item > a {
	color: var(--accent);
}

/* Language switcher */
.lang {
	position: relative;
	font-size: 17px;
	font-weight: 300;
}

.lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
}

.lang__toggle .icon {
	width: 12px;
	height: 7px;
	transition: transform 0.2s;
}

.lang:hover .lang__toggle .icon,
.lang:focus-within .lang__toggle .icon {
	transform: rotate(180deg);
}

.lang__list {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	min-width: 70px;
	padding: 6px 0;
	transform: translateX(-50%);
	background: var(--bg-card);
	color: var(--text);
	border-radius: var(--radius);
	box-shadow: var(--shadow-menu);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
}

/* Відкриття без JS: наведення (миша й тач) або фокус усередині .lang —
   список видимий, поки курсор/фокус не пішов (вибір мови веде навігацію). */
.lang:hover .lang__list,
.lang:focus-within .lang__list {
	opacity: 1;
	visibility: visible;
}

/* Місток через розрив 10px між кнопкою і списком: курсор не «губить»
   дропдаун по дорозі до пункту (у мобільному меню список знизу). */
.lang__list::before {
	content: '';
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}

.mobile-menu .lang__list::before {
	top: auto;
	bottom: -12px;
}

/* У мобільному меню перемикач стоїть унизу ліворуч — список відкривається
   вгору і вирівнюється по лівому краю, щоб не виходити за екран. */
.mobile-menu .lang__list {
	top: auto;
	bottom: calc(100% + 10px);
	left: 0;
	transform: none;
}

.lang__link {
	display: block;
	padding: 6px 16px;
	text-align: center;
}

.lang__link:hover {
	color: var(--accent);
}

/* Логотип у шапці на мобільному: іконка + «Центр знань» у два рядки (як у макеті). */
@media (max-width: 1023px) {
	.header .logo__divider,
	.header .logo__brand,
	.mobile-menu .logo__divider,
	.mobile-menu .logo__brand {
		display: none;
	}

	.header .logo__text,
	.mobile-menu .logo__text {
		gap: 10px;
	}

	.header .logo__atom,
	.mobile-menu .logo__atom {
		order: -1;
		width: 49px;
		height: 29px;
	}

	.header .logo__center,
	.mobile-menu .logo__center {
		font-size: 20px;
		line-height: 18px;
		text-align: left;
	}
}

/* Mobile header parts */
.header__user {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 18px;
	color: #fff;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.header__user .icon {
	width: 16px;
	height: 22px;
}

.header__user--name {
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	color: var(--accent);
}

.header__user .icon-logout {
	width: 20px;
	height: 20px;
}

.burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 60px;
	color: #fff;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.burger .icon {
	width: 18px;
	height: 14px;
}

/* ---------- Mobile menu (off-canvas) ---------- */

/* Панель тільки проявляється: рухати її по вертикалі не можна — логотип
   у меню стоїть рівно над логотипом шапки і будь-який зсув видно як стрибок. */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 800;
	display: flex;
	flex-direction: column;
	padding: 0 15px 30px;
	color: #fff;
	background: var(--bg-dark);
	overflow-y: auto;
	opacity: 0;
	transition: opacity 0.22s ease;
}

.mobile-menu.is-open {
	opacity: 1;
}

/* Вміст під шапкою виїжджає — сам логотип лишається нерухомим. */
.mobile-menu__nav,
.mobile-menu__actions,
.mobile-menu__foot {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.26s ease 0.06s, transform 0.26s ease 0.06s;
}

.mobile-menu.is-open .mobile-menu__nav,
.mobile-menu.is-open .mobile-menu__actions,
.mobile-menu.is-open .mobile-menu__foot {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu,
	.mobile-menu__nav,
	.mobile-menu__actions,
	.mobile-menu__foot {
		transition: none;
	}
}

.mobile-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	margin-bottom: 30px;
}

/* Хрестик — 56x60 біля правого краю (margin-right:-15px), значення з макета
   (бургер у шапці 76x60, хрестик у макета свідомий вужчий). */
.mobile-menu__close {
	display: inline-flex;
	width: 56px;
	height: 60px;
	margin-right: -15px;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.mobile-menu__close .icon {
	width: 19px;
	height: 19px;
}

.mobile-menu__list {
	display: flex;
	flex-direction: column;
}

.mobile-menu__list > li > a {
	display: block;
	padding: 18px 0;
	font-size: 20px;
	font-weight: 500;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Активний пункт/ховер мобільного меню — як у десктопній навігації
   (раніше це покривав спільний селектор .nav__link). */
.mobile-menu__list > li > a:hover,
.mobile-menu__list > .current-menu-item > a {
	color: var(--accent);
}

.mobile-menu__actions {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin: 30px 0;
}

.mobile-menu__actions .btn,
.mobile-menu__actions .header__cta {
	display: inline-flex;
	width: 100%;
	margin: 0;
}

.mobile-menu__actions .btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
}

.mobile-menu__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---------- Bottom nav (mobile) ---------- */

.bottom-nav {
	position: fixed;
	left: 5px;
	right: 5px;
	bottom: 10px;
	z-index: 700;
	display: none;
	align-items: center;
	justify-content: space-around;
	height: 60px;
	padding: 0 10px;
	color: #fff;
	background: var(--bg-dark);
	border-radius: var(--radius);
	box-shadow: var(--shadow-menu);
}

.bottom-nav__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	height: 36px;
	color: #fff;
	transition: color 0.2s;
}

.bottom-nav__item + .bottom-nav__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 36px;
	background: rgba(255, 255, 255, 0.2);
}

.bottom-nav__item .icon {
	width: 22px;
	height: 22px;
}

.bottom-nav__item.is-active,
.bottom-nav__item:hover {
	color: var(--accent);
}

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

.footer {
	flex: none;
	padding: 60px 0 40px;
	color: #fff;
	background: var(--bg-dark);
}

.footer__subscribe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--line-dark);
}

.footer__subscribe-text {
	max-width: 550px;
	font-size: 22px;
	font-weight: 300;
	line-height: 33px;
}

.footer__subscribe-text strong {
	font-weight: 700;
}

.footer__form {
	display: flex;
	gap: 20px;
	width: 100%;
	max-width: 580px;
}

/* Розсилка — плагін Newsletter (T6): мапінг його tnp-розмітки на дизайн
   футера. Форма рендериться плагіном ([newsletter_form]), submit нативний. */
.footer__form .tnp-subscription {
	display: flex;
	flex: 1;
	gap: 20px;
}

.footer__form .tnp-field {
	flex: 1;
}

.footer__form .tnp-field-button {
	flex: 0 0 auto;
}

.footer__form .tnp-email {
	display: block;
	width: 100%;
	/* У макеті поле рівно 50px: line-height + padding + рамка дають саме 50. */
	min-height: 50px;
	padding: 13px 20px;
	line-height: 22px;
	font-size: 16px;
	font-weight: 300;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(229, 229, 229, 0.1);
	border-radius: var(--radius);
	transition: border-color 0.2s;
	appearance: none;
}

.footer__form .tnp-email::placeholder {
	color: var(--text-placeholder);
	opacity: 0.9;
}

.footer__form .tnp-email:focus {
	outline: none;
	border-color: var(--accent);
}

.footer__form .tnp-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 190px;
	min-height: 50px;
	padding: 12px 30px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	background: var(--accent);
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	box-shadow: var(--accent-glow);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, transform 0.1s;
}

.footer__form .tnp-submit:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}

.footer__form .tnp-submit:active {
	transform: translateY(1px);
}

.footer__info {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 45px 0;
	border-bottom: 1px solid var(--line-dark);
}

.footer__logo {
	flex: none;
}

.footer__contacts {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.3;
}

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

.socials {
	display: flex;
	gap: 20px;
	margin-left: auto;
}

.socials__link {
	display: inline-flex;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: transform 0.2s;
}

.socials__link .icon {
	width: 40px;
	height: 40px;
}

.socials__link:hover {
	transform: translateY(-2px);
}

.footer__copy {
	padding-top: 25px;
	font-size: 17px;
	text-align: center;
}

/* ---------- Hero ---------- */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	color: #fff;
	background: var(--bg-dark);
	isolation: isolate;
}

/* Фото банера — окремий <img>, щоб браузер вантажив його першим
   (loading="eager" + fetchpriority="high"), а не чекав на CSS. */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(33, 33, 33, 0.6);
}

.hero--home {
	min-height: 700px;
}

.hero--page {
	min-height: 514px;
}

.hero__inner {
	text-align: center;
	padding-top: 60px;
	padding-bottom: 60px;
}

/* Макет: блок заголовка 986x167 (два рядки по 83), текст 1030x82. */
.hero__title {
	max-width: 1030px;
	margin: 0 auto 18px;
	font-size: 55px;
	font-weight: 700;
	line-height: 83px;
}

.hero__title-light {
	font-weight: 300;
}

.hero__subtitle {
	max-width: 900px;
	margin: 0 auto 25px;
	font-size: 25px;
	font-weight: 700;
	line-height: 33px;
}

.hero__text {
	max-width: 1030px;
	margin: 0 auto;
	font-size: 25px;
	font-weight: 300;
	line-height: 33px;
}

.hero__actions {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-top: 50px;
}

/* Банер головної в макеті: заголовок на 222, текст 407, кнопки 536. */
.hero--home .hero__actions {
	margin-top: 30px;
}

.hero--home .hero__inner {
	padding-bottom: 103px;
}

.hero__actions .btn {
	min-width: 345px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1479px) {
	.nav__list > li > a {
		font-size: 15px;
	}

	.header__sep {
		height: 40px;
	}

	.btn--header {
		font-size: 14px;
		padding: 10px 16px;
	}
}

@media (max-width: 1279px) {
	.nav__list > li > a {
		font-size: 14px;
	}

	.btn--header {
		font-size: 13px;
		padding: 10px 12px;
	}
}

@media (max-width: 1023px) {
	.section {
		padding: 70px 0;
	}

	.section__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.section__head-btn {
		min-width: 0;
	}

	/* Header switches to the mobile layout */
	:root {
		--header-h: 60px;
	}

	.header__sep,
	.header__nav,
	.header > .header__inner > .lang,
	.header__cta,
	/* десктопний елемент користувача: на мобайлі своя іконка в .header__mobile */
	.header > .header__inner > .header__user {
		display: none;
	}

	.header__inner {
		gap: 0;
		padding: 0 0 0 15px;
	}

	.header__mobile {
		display: flex;
		margin-left: auto;
	}

	.bottom-nav {
		display: flex;
	}

	/* Відкрите мобільне меню — нижня навігація прихована (як у макеті). */
	body.is-locked .bottom-nav {
		display: none;
	}

	body {
		padding-bottom: 80px;
	}

	.hero--home,
	.hero--page {
		min-height: 0;
	}

	.hero__title {
		font-size: 40px;
	}

	.hero__subtitle,
	.hero__text {
		font-size: 20px;
		line-height: 30px;
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		margin-top: 35px;
	}

	.hero__actions .btn {
		min-width: 0;
	}

	.footer__subscribe {
		flex-direction: column;
		align-items: stretch;
	}

	.footer__info {
		flex-wrap: wrap;
		gap: 25px 40px;
	}

	.socials {
		margin-left: 0;
	}
}

@media (max-width: 767px) {
	:root {
		--gutter: 15px;
	}

	.section {
		padding: 50px 0;
	}

	/* Банер звірений з макетом 375px: висота 495, кнопки 345x50 з кроком 70. */
	.hero__inner {
		padding-top: 59px;
		padding-bottom: 61px;
	}

	.hero__title {
		font-size: 30px;
		line-height: 38px;
		margin-bottom: 7px;
	}

	.hero__subtitle {
		font-size: 17px;
		line-height: 24px;
	}

	.hero__text {
		font-size: 15px;
		line-height: 20px;
	}

	.hero__actions {
		margin-top: 34px;
		gap: 20px;
	}

	/* Футер звірений з макетом 375: висота 610, блоки по центру. */
	.footer {
		padding: 40px 0 35px;
		text-align: center;
	}

	.footer__subscribe {
		gap: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.footer__subscribe-text {
		font-size: 15px;
		line-height: 21px;
	}

	.footer__form {
		flex-direction: column;
		gap: 19px;
		max-width: none;
		margin-top: 19px;
	}

	.footer__form .tnp-subscription {
		flex-direction: column;
		gap: 19px;
	}

	.footer__form .tnp-email {
		padding-block: 0;
	}

	.footer__form .tnp-submit {
		min-width: 0;
		width: 100%;
	}

	.footer__info {
		flex-direction: column;
		align-items: center;
		gap: 0;
		padding: 0;
		border-bottom: 0;
	}

	.footer__logo {
		margin: 39px 0 30px;
	}

	.footer .logo__center {
		font-size: 10px;
	}

	.footer .logo__brand {
		font-size: 12px;
	}

	.footer .logo__atom {
		width: 30px;
		height: 18px;
	}

	.footer__contacts {
		font-size: 15px;
		line-height: 27px;
	}

	.footer__contacts p + p {
		margin-top: 0;
	}

	.socials {
		justify-content: center;
		align-items: center;
		margin-top: 26px;
		line-height: 0;
	}

	.footer__copy {
		margin-top: 44px;
		padding-top: 27px;
		font-size: 15px;
		border-top: 1px solid var(--line-dark);
		border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	}
}