/* ================= HEADER ================= */
.header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 64px;
	/*✔ Фиксированная шапка — классика
	✔ Высота вынесена в одно место (важно для main.content ниже)*/

    background: #191919;
    color: #fff;
	/*✔ Контрастный фон
	⚠️ Если проект большой — можно вынести цвет в CSS-переменную:--header-bg: #2c3e50;*/

    z-index: 1100;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
	/*✔ z-index выше контента — ок
	✔ Тень добавляет глубину, не перебор*/
}

/* ================= NAV CONTAINER ================= */
.nav-container {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 1rem;
	/*✔ Контейнер по центру
	✔ Высота равна header — правильный подход*/

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
	/*✔ Flex — идеально
	✔ gap — современно и чище, чем margin*/
}

/* ================= LOGO ================= */
.logo {
    display: flex;
    align-items: center;
    gap: .5rem;
	/*✔ Иконка + текст без костылей*/

    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.25rem;
	/*✔ Подходит и для <a>, и для <div>*/
}

.logo-icon {
    font-size: 1.6rem;
	/*✔ Визуальный акцент на иконке*/
}

.logo-text {
    white-space: nowrap;
	/*✔ Логотип не ломается на две строки*/
}

@media (max-width: 768px) {
    .logo-text {
        display: none;
		/*🔥 Очень хорошее решение
		✔ Экономит место
		✔ Оставляет узнаваемую иконку*/
    }
}

/* ================= NAV MENU ================= */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.5rem;
	/*✔ Меню и язык в одной строке
	✔ Ничего лишнего*/
}

/* ================= LINKS ================= */
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
	/*✔ Семантически правильно (ul > li > a)*/
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color .2s ease;
	/*✔ Плавный hover — приятно*/
}

.nav-links a:hover {
    color: #3498db;
	/*✔ Цвет акцента читается*/
}

.nav-links a.active {
    color: #3498db;
    font-weight: 600;
	/*✔ Активный пункт подчёркнут логично
	💡 Можно позже добавить aria-current="page" для доступности*/
}

/* ================= BURGER ================= */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
	/*✔ По умолчанию скрыт
	✔ Flex-колонка — правильно*/
	
    background: none;
    border: none;
    cursor: pointer;
	/*✔ Без лишних рамок*/
	
}

.burger span {
    width: 24px;
    height: 2px;
    background: #fff;
    transition: transform .3s ease, opacity .3s ease;
	/*✔ Анимация уже готова под X
	👉 Можно позже добавить .burger.open span:nth-child(...)*/
}
/* ===== BURGER → X ===== */
.burger {
    position: relative;
}

.burger span {
    width: 24px;
    height: 3px;
    background: #fff;
    border-radius: 24px;
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
}

/* верхняя линия */
.burger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

/* средняя линия */
.burger.active span:nth-child(2) {
    opacity: 0;
}

/* нижняя линия */
.burger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* ================= LANG SWITCH ================= */
.lang-switch {
    position: relative;
	/*✔ Основа для absolute dropdown*/
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 3px;
	/*✔ Флаг + текст / стрелка*/

    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(1px);
	/*🔥 Стеклянный эффект
⚠	️ backdrop-filter — красиво, но не во всех браузерах (нормально)*/

    border-radius: 3px;
    padding: 1px 1px;
	/*✔ Удобно нажимать пальцем*/
	
    border: none;
    cursor: pointer;

    color: #fff;
    font-weight: 600;
}

.lang-btn:hover {
    background: rgba(255,255,255,.5);
}
/*стил флаги Всё — флаги станут аккуратно скруглёнными, как на iOS / Android.*/
/*
.fi {
    border-radius: 4px;   /* можешь 3–6px подобрать */
 /* overflow: hidden;     /* ОБЯЗАТЕЛЬНО */
/*}*/

/*В кнопке языка — чуть сильнее:*/
.lang-btn .fi {
    border-radius: 3px;
}
/*В выпадающем списке — чуть слабее:*/
.lang-dropdown .fi {
    border-radius: 3px;
}
/*🔥 Бонус (если захочешь «премиум»-вид)*/
.fi {
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}


.lang-dropdown {
    position: absolute;
    top: 105%;
    right: 0;
	/*🔥 Очень приятно выглядит*/

    background: rgba(5, 5, 1, 1);
    backdrop-filter: blur(1px);
	/*🔥 Очень приятно выглядит*/
    border-radius: 6px;

    list-style: none;
    min-width: 0;
    padding: 6px 0;

    box-shadow:
        0 8px 20px rgba(0,0,0,.12),
        0 2px 6px rgba(0,0,0,.08);

    opacity: 0;
    transform: translateY(-6px) scale(.98);
    pointer-events: none;
	/*✔ Скрытие без display: none
	✔ Анимация будет плавной*/

    transition: opacity .25s ease, transform .25s ease;
    z-index: 1200;
}

.lang-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
	/*✔ JS-friendly класс
	✔ Отличная UX-логика*/
}

.lang-dropdown li {
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.lang-dropdown li:hover {
    background: rgba(116, 94, 0, 1);
}

.lang-btn .flag {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
}

.lang-btn .code {
    font-weight: 600;
    letter-spacing: .5px;
}

/* активный язык в списке */
.lang-dropdown li.active {
    background: rgba(116, 78, 3, 1);
    font-weight: 600;
}


/* ================= MOBILE ================= */
@media (max-width: 900px) {
	/*✔ Чуть шире, чем логотип — разумно*/

    .burger {
        display: flex;
		/*✔ Бургер появляется вовремя*/
    }

    .nav-menu {
        position: fixed;
        inset: 64px 0 0 0;
		/*🔥 inset — чисто и современно
		✔ Меню ровно под хедером*/

        background: rgba(40,36,30,.55);
        backdrop-filter: blur(3px);
		/*✔ Почти как native mobile menu 🔥 Стеклянный эффект*/

        flex-direction: column;
        padding: 2rem 1rem;

        transform: translateX(100%);
        transition: transform .50s ease;
		/*✔ Слайд-меню справа*/
        z-index: 1050;
    }

    .nav-menu.open {
        transform: translateX(0);
		/*✔ Всё управление через один класс — 👍*/
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: 1.2rem;
        align-items: center;
    }

    .lang-switch {
        margin-top: 2rem;
    }
}

/* ================= OFFSET FOR FIXED HEADER ================= */
main.content {
    padding-top: 64px;
	/*🔥 Очень важная строка
	✔ Контент не прячется под фиксированной шапкой
	💡 Если поменяешь высоту header — поменяй в одном месте*/
}