/*
 * Каркас сторінки: шапка, логотип, перемикач мов, підвал.
 */

/* — Логотип —————————————————————————————— */

.koto-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--koto-ink);
	text-decoration: none;
	flex: none;
}

.koto-logo__mark {
	width: 44px;
	height: 44px;
	flex: none;
}

.koto-logo__word {
	font-family: var(--koto-font-display);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0.005em;
	white-space: nowrap;
}

/*
 * Philosopher легший за геометричні гротески, тож поруч зі щільною
 * емблемою напису додано трохи кегля — інакше метал перетягує увагу.
 */
.koto-logo__koto {
	background: linear-gradient(158deg, var(--koto-brass-light) 0%, var(--koto-amber) 48%, var(--koto-brass) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.koto-logo__rest {
	color: var(--koto-ink);
}

.koto-logo--footer .koto-logo__mark {
	width: 38px;
	height: 38px;
}

.koto-logo--footer .koto-logo__word {
	font-size: 1.3rem;
}

/* — Шапка ———————————————————————————————— */

.koto-header {
	position: sticky;
	top: 0;
	z-index: var(--koto-z-header);

	/* Зсув під закріплену панель WordPress — див. cabinet.css. */
	--koto-admin-bar: 0px;
	top: var(--koto-admin-bar);
	background: rgba(8, 20, 31, 0.82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--koto-line-faint);
	transition: background-color var(--koto-normal) var(--koto-ease), border-color var(--koto-normal) var(--koto-ease);
}

/* Клас вішає site.js після прокрутки — шапка стає щільнішою. */
.koto-header.is-scrolled {
	background: rgba(6, 15, 24, 0.95);
	border-bottom-color: var(--koto-line);
}

.koto-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 0.4rem + 1.6vw, 2rem);
	min-height: 74px;
}

.koto-nav {
	margin-inline-start: auto;
}

.koto-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 0.1rem + 1.2vw, 1.5rem);
}

.koto-nav__link {
	display: block;
	padding: 0.5rem 0.25rem;
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
	font-weight: 600;
	white-space: nowrap;
	position: relative;
}

.koto-nav__link::after {
	content: "";
	position: absolute;
	left: 0.25rem;
	right: 0.25rem;
	bottom: 0.25rem;
	height: 1px;
	background: var(--koto-amber);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--koto-normal) var(--koto-ease);
}

.koto-nav__link:hover {
	color: var(--koto-ink);
}

.koto-nav__link:hover::after {
	transform: scaleX(1);
}

.koto-header__actions {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: none;
}

/* Дублікати кнопок входу — тільки для панелі мобільного меню. */
.koto-nav__auth {
	display: none;
}

/* — Перемикач мов ————————————————————————— */

.koto-lang {
	display: inline-flex;
	align-items: center;
	padding: 2px;
	border: 1px solid var(--koto-line);
	border-radius: var(--koto-radius-pill);
	flex: none;
}

.koto-lang__item {
	padding: 0.3em 0.7em;
	font-size: var(--koto-text-xs);
	font-weight: 700;
	color: var(--koto-ink-faint);
	border-radius: var(--koto-radius-pill);
	line-height: 1.4;
	transition: color var(--koto-fast) var(--koto-ease), background-color var(--koto-fast) var(--koto-ease);
}

.koto-lang__item:hover {
	color: var(--koto-ink);
}

.koto-lang__item.is-current {
	background: rgba(184, 135, 70, 0.18);
	color: var(--koto-amber);
}

/* — Бургер ———————————————————————————————— */

.koto-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: none;
	color: var(--koto-ink);
	border: 1px solid var(--koto-line);
	border-radius: var(--koto-radius-sm);
}

.koto-burger svg {
	width: 22px;
	height: 22px;
}

.koto-burger__close { display: none; }
.koto-burger[aria-expanded="true"] .koto-burger__open { display: none; }
.koto-burger[aria-expanded="true"] .koto-burger__close { display: block; }

/* — Підвал ———————————————————————————————— */

.koto-footer {
	background: var(--koto-bg-deep);
	border-top: 1px solid var(--koto-line-faint);
	padding-block: clamp(2.5rem, 1.8rem + 2.8vw, 4rem) 1.75rem;
	margin-top: var(--koto-section-y);
}

.koto-footer__top {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
	margin-bottom: 2.25rem;
}

.koto-footer__brand {
	display: grid;
	gap: 1rem;
	justify-items: start;
	max-width: 34ch;
}

.koto-footer__tagline {
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
	margin: 0;
}

.koto-footer__title {
	font-family: var(--koto-font-body);
	font-size: var(--koto-text-xs);
	font-weight: 700;
	letter-spacing: var(--koto-tracking-wide);
	text-transform: uppercase;
	color: var(--koto-brass);
	margin-bottom: 1rem;
}

.koto-footer__col ul {
	display: grid;
	gap: 0.6rem;
}

/*
 * Кнопку виключено навмисно. «.koto-footer__col a» специфічніший за
 * «.koto-btn--primary», тож без :not() він перефарбовував напис на
 * бурштиновій кнопці в блідо-блакитний — і той майже зникав.
 */
.koto-footer__col a:not(.koto-btn) {
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
}

.koto-footer__col a:not(.koto-btn):hover {
	color: var(--koto-amber);
}

.koto-footer__col--contacts li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--koto-ink-muted);
	font-size: var(--koto-text-sm);
}

.koto-footer__col--contacts svg {
	width: 17px;
	height: 17px;
	flex: none;
	color: var(--koto-brass);
}

.koto-footer__cta {
	margin-top: 1.25rem;
}

.koto-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 1.5rem;
}

.koto-footer__copy {
	margin: 0;
	color: var(--koto-ink-faint);
	font-size: var(--koto-text-xs);
}

/*
 * Правові документи в підвалі — там, де їх шукають. Дрібним і приглушеним
 * навмисно: це не заклик, а обов'язкове посилання, і воно не має
 * конкурувати з тим, заради чого людина прийшла.
 */
.koto-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	font-size: var(--koto-text-xs);
}

.koto-footer__legal a {
	color: var(--koto-ink-faint);
}

.koto-footer__legal a:hover,
.koto-footer__legal a:focus-visible {
	color: var(--koto-ink-muted);
}

/* — Планшет ——————————————————————————————— */

@media (max-width: 1080px) {
	.koto-header__cta {
		display: none;
	}
}

@media (max-width: 900px) {
	.koto-burger {
		display: inline-flex;
		order: 3;
	}

	.koto-header__actions {
		margin-inline-start: auto;
		order: 2;
	}

	/*
	 * Меню на вузьких екранах їде окремою панеллю під шапкою.
	 * Схлопуємо через grid-template-rows, а не max-height: так висота
	 * не вгадується наперед і перехід лишається плавним.
	 */
	.koto-nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		margin: 0;
		display: grid;
		grid-template-rows: 0fr;
		background: var(--koto-bg-deep);
		border-bottom: 1px solid var(--koto-line);
		transition: grid-template-rows var(--koto-normal) var(--koto-ease);
	}

	.koto-nav.is-open {
		grid-template-rows: 1fr;
	}

	.koto-nav__list {
		overflow: hidden;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.koto-nav__link {
		padding: 0.9rem var(--koto-gutter);
		font-size: var(--koto-text-base);
		border-bottom: 1px solid var(--koto-line-faint);
	}

	.koto-nav__link::after {
		display: none;
	}

	.koto-nav__auth {
		display: block;
	}

	.koto-nav__link--accent {
		color: var(--koto-amber);
	}

	.koto-header {
		position: relative;
	}

	.koto-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.koto-footer__brand {
		grid-column: 1 / -1;
		max-width: none;
	}
}

/*
 * Нижче 700 px у рядку шапки лишаються тільки логотип, перемикач мов і
 * бургер: кнопка входу вже не вміщається й виштовхувала бургер за екран.
 * Вона нікуди не зникає — обидві кнопки входу є в самій панелі меню.
 */
@media (max-width: 700px) {
	.koto-header__actions .koto-btn {
		display: none;
	}
}

@media (max-width: 560px) {
	.koto-logo__word { font-size: 1.25rem; }
	.koto-logo__mark { width: 36px; height: 36px; }

	.koto-footer__top {
		grid-template-columns: 1fr;
	}
}

/* Найвужчі екрани, які ще трапляються — iPhone SE першого покоління. */
@media (max-width: 400px) {
	.koto-logo__word { font-size: 1.1rem; }
	.koto-logo__mark { width: 32px; height: 32px; }

	.koto-lang__item {
		padding: 0.3em 0.5em;
	}
}

/* — Панель WordPress ——————————————————————
 * Її бачить лише персонал, але без цього закріплена шапка заїжджає
 * під неї при прокручуванні.
 */

body.admin-bar .koto-header {
	--koto-admin-bar: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .koto-header {
		--koto-admin-bar: 46px;
	}
}

@media screen and (max-width: 600px) {
	body.admin-bar .koto-header {
		--koto-admin-bar: 0px;
	}
}