/**
 * iSolar Development — розкладка.
 * Контейнер 1240 px, секції з ритмом 96/56 px, сітки на auto-fit.
 */

/* ---------------------------------------------------------------
 * Каркас сторінки
 * ------------------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip; /* діагональні зрізи не мають давати горизонтальний скрол */
}

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

/* ---------------------------------------------------------------
 * Контейнер: максимум 1240 px, поля 20–72 px
 * ------------------------------------------------------------- */

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

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

.container--wide {
	max-width: calc(1440px + var(--container-pad) * 2);
}

/* ---------------------------------------------------------------
 * Секції — між секціями 96 px, на мобільному 56 px
 * ------------------------------------------------------------- */

.section {
	position: relative;
	padding-block: var(--section-pad);
}

.section--tight {
	padding-block: calc(var(--section-pad) * 0.6);
}

.section--flush-top {
	padding-top: 0;
}

.section--flush-bottom {
	padding-bottom: 0;
}

/* Два фонові кольори на сторінку — не більше (правило бренду) */
.section--cream {
	background-color: var(--surface-page);
}

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

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

.section--green-deep {
	background-color: var(--surface-dark-deep);
	color: var(--text-on-dark);
}

.section__header {
	max-width: 72ch;
	margin-bottom: var(--space-6);
}

.section__header--center {
	margin-inline: auto;
	text-align: center;
}

/* ---------------------------------------------------------------
 * Сітки: auto-fit, а не фіксовані колонки
 * ------------------------------------------------------------- */

.grid {
	display: grid;
	gap: var(--grid-gap);
}

.grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--4 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* Асиметрична пара: текст ширший за медіа */
.grid--split {
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 1024px) {
	.grid--split {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
	}

	.grid--split.is-reversed > :first-child {
		order: 2;
	}
}

.stack > * + * {
	margin-top: var(--space-3);
}

.stack--lg > * + * {
	margin-top: var(--space-5);
}

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}

/* ---------------------------------------------------------------
 * 06 — Стільниковий патерн
 * Накладається псевдоелементом, колір і прозорість — через змінні.
 * ------------------------------------------------------------- */

.has-pattern {
	position: relative;
	isolation: isolate;
}

.has-pattern > * {
	position: relative;
	z-index: 1;
}

.has-pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--z-pattern);
	background-color: var(--pattern-color, var(--c-white));
	opacity: var(--pattern-alpha, var(--pattern-opacity-dark));
	-webkit-mask: url("../img/honeycomb.svg") 0 0 / var(--pattern-step) auto repeat;
	mask: url("../img/honeycomb.svg") 0 0 / var(--pattern-step) auto repeat;
	pointer-events: none;
}

/* Патерн на зеленому — білий, 6–8 % */
.section--green.has-pattern,
.section--green-deep.has-pattern {
	--pattern-color: var(--c-white);
	--pattern-alpha: var(--pattern-opacity-dark);
}

/* Патерн на крейдовому — золото, 18–20 % */
.section--cream.has-pattern,
.section--white.has-pattern {
	--pattern-color: var(--c-gold-500);
	--pattern-alpha: var(--pattern-opacity-light);
}

/* ---------------------------------------------------------------
 * Діагональний зріз 12–15° — відділяє фото від тексту
 * ------------------------------------------------------------- */

.diagonal {
	--cut: calc(tan(var(--diagonal-angle)) * 100%);
	clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
}

.diagonal--left {
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

@supports not (width: calc(tan(13deg) * 1px)) {
	.diagonal {
		clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
	}

	.diagonal--left {
		clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
	}
}

@media (max-width: 768px) {
	.diagonal,
	.diagonal--left {
		clip-path: none; /* на вузьких екранах зріз з'їдає контент */
	}
}

/* ---------------------------------------------------------------
 * Слоти під Elementor
 *
 * Хедер і футер приходять з Elementor, тому їхній вигляд задається там.
 * Тема лишає за собою тільки те, що Elementor free не вміє: sticky-позицію
 * й реакцію на скрол. Розділення навмисне — інакше два джерела стилів
 * почнуть перебивати одне одного.
 * ------------------------------------------------------------- */

.site-header-slot {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
}

.admin-bar .site-header-slot {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header-slot {
		top: 46px;
	}
}

/* Плагін виводить дубль назви сайту для мікророзмітки — він службовий. */
.site-header-slot .main-title.bhf-hidden {
	display: none;
}

.site-footer-slot {
	margin-top: auto;
}

/* ---------------------------------------------------------------
 * Header — PHP-фолбек, доки хедер не зібраний в Elementor
 * ------------------------------------------------------------- */

.site-header {
	background-color: var(--surface-dark);
	border-bottom: var(--border-width) solid var(--border-color-dark);
	color: var(--text-on-dark);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	min-height: var(--header-height);
	transition: min-height var(--dur) var(--ease);
}

/* Після скролу хедер трохи стискається — клас вішає assets/js/main.js */
.site-header-slot.is-scrolled .site-header {
	background-color: var(--c-green-800);
}

.site-header-slot.is-scrolled .site-header__inner {
	min-height: calc(var(--header-height) - 8px);
}

.site-branding {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	flex: 0 0 auto;
	color: var(--color-accent);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: 1.125rem;
	letter-spacing: -0.01em;
	text-decoration: none;
}

/* Мінімальна висота знака — 32 px (правило дизайн-системи). */
.site-branding img,
.site-branding svg,
.custom-logo-link img {
	height: 36px;
	width: auto;
	max-width: none;
}

.site-branding:hover {
	color: var(--c-white);
}

.site-header__nav {
	margin-left: auto;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex: 0 0 auto;
}

/* Головне меню */
.menu-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-main li {
	margin: 0;
}

.menu-main a {
	position: relative;
	display: inline-block;
	padding-block: var(--space-1);
	color: var(--text-on-dark);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-medium);
	text-decoration: none;
	white-space: nowrap;
}

.menu-main a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-accent);
	transition: width var(--dur) var(--ease);
}

.menu-main a:hover,
.menu-main a:focus-visible,
.menu-main .current-menu-item > a {
	color: var(--color-accent);
}

.menu-main a:hover::after,
.menu-main a:focus-visible::after,
.menu-main .current-menu-item > a::after {
	width: 100%;
}

/* Бургер */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: none;
	border: var(--border-width) solid var(--border-color-dark);
	color: inherit;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
	.nav-toggle {
		display: flex;
		margin-left: auto;
		order: 3;
	}

	.site-header__nav {
		order: 4;
		flex-basis: 100%;
		margin-left: 0;
	}

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

	.menu-main {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: var(--space-4);
	}

	.menu-main li + li {
		border-top: var(--border-width) solid var(--border-color-dark);
	}

	.menu-main a {
		display: block;
		padding: var(--space-3) 0;
		font-size: var(--fs-body);
	}

	.site-header__actions .btn {
		display: none;
	}

	.site-header__nav.is-open ~ .site-header__actions {
		display: none;
	}
}

/* ---------------------------------------------------------------
 * Бічна панель соцмереж — поза header-контейнером
 * ------------------------------------------------------------- */

.social-rail {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: var(--z-social);
	transform: translateY(-50%);
}

.social-rail__list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-rail__list li {
	margin: 0;
}

.social-rail a {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background-color: var(--c-green-800);
	color: var(--color-accent);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.social-rail a:hover,
.social-rail a:focus-visible {
	background-color: var(--color-accent);
	color: var(--c-green-900);
}

.social-rail svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 1024px) {
	.social-rail {
		display: none; /* фіксована панель на вузьких екранах перекриває контент */
	}
}

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

.site-footer {
	background-color: var(--surface-dark-deep);
	color: var(--text-on-dark);
	padding-block: var(--space-7) var(--space-5);
}

.site-footer__grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: var(--border-width) solid var(--border-color-dark);
	color: var(--text-on-dark-muted);
	font-size: var(--fs-small);
}

.site-footer .menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.site-footer .menu a {
	color: var(--text-on-dark-muted);
	text-decoration: none;
}

.site-footer .menu a:hover {
	color: var(--color-accent);
}

/* Контактний блок футера: ейбрау + значення */
.contact-item__value {
	font-size: var(--fs-lead);
	color: var(--text-on-dark);
	text-decoration: none;
}

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