/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
	background-color: var(--color-cream);
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--color-gray-200);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-8);
	padding-block: var(--space-4);
}

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

/* ---------- Навігація: desktop за замовчуванням ---------- */

.main-nav__list {
	display: flex;
	gap: var(--space-8);
	font-weight: 600;
	font-size: var(--fs-small);
}

.main-nav__list a {
	position: relative;
	padding-block: var(--space-2);
	transition: color var(--transition-base);
}
/* Підкреслення, що "виростає" при наведенні — легша альтернатива кольору-по-наведенню */
.main-nav__list a::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 0;
	height: 2px;
	background-color: var(--color-accent);
	transition: width var(--transition-base);
}
.main-nav__list a:hover::after { width: 100%; }

.main-nav__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: var(--space-2);
}
.main-nav__toggle span {
	width: 24px;
	height: 2px;
	background-color: var(--color-black);
	transition: transform var(--transition-base), opacity var(--transition-base);
}

/* ---------- Мобільна адаптація: бургер-меню ---------- */
@media (max-width: 900px) {
	.main-nav__toggle { display: flex; }

	.main-nav__list {
		position: fixed;
		inset: 0 0 0 30%;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: var(--space-6);
		background-color: var(--color-black);
		padding: var(--space-8);
		transform: translateX(100%);
		transition: transform 300ms ease;
	}
	.main-nav__list a { color: var(--color-white); font-size: var(--fs-h3); }

	.main-nav[data-open="true"] .main-nav__list {
		transform: translateX(0);
	}
	.main-nav[data-open="true"] .main-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.main-nav[data-open="true"] .main-nav__toggle span:nth-child(2) { opacity: 0; }
	.main-nav[data-open="true"] .main-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.site-header__cta { display: none; } /* на мобільному CTA дублюється в меню, щоб не тісно в хедері */
}