/* ШАПКА САЙТА
 *
 * Подключается последней, после стилей страницы.
 *
 * Шапок в проекте четыре, и у каждой свои имена классов:
 * главная и страница курса, кабинет, обучение, вебинары.
 * Выглядели они по-разному — разная высота, разный логотип,
 * где-то ссылка-пилюля, где-то простой текст.
 *
 * Здесь они сведены к одному виду и к системе сайта:
 * логотип серифом прописными с разрядкой, пункты меню
 * мелкими прописными, золотая черта под наведением,
 * тонкая линия внизу вместо тени.
 *
 * Разметку не трогаем — только стили, поэтому ничего
 * не может сломаться в пяти шаблонах сразу.
 */

/* ========================================
   ПОЛОСА ШАПКИ
======================================== */

.site-header,
.account-header,
.learning-header,
.webinar-header {
    background: var(--bg-secondary);

    /* Волосяная линия вместо тени: она не отрывает шапку
       от страницы, а только отделяет */
    border-bottom: 1px solid rgba(29, 79, 107, 0.14);

    box-shadow: none;
}

.nav,
.account-header-inner,
.learning-header-inner,
.webinar-header-inner {
    height: 72px;
}

/* На компьютере шапка чуть прозрачная, с размытием: страница
   мягко проходит под ней, как на странице книг. На телефоне
   размытие нельзя — оно ломает выезжающее меню (см. style.css). */

@media (min-width: 701px) {

    .site-header {
        background: rgba(251, 246, 242, 0.86);
        backdrop-filter: saturate(1.4) blur(16px);
        -webkit-backdrop-filter: saturate(1.4) blur(16px);
    }
}


/* ========================================
   ЛОГОТИП
======================================== */

.logo,
.account-logo,
.learning-logo,
.webinar-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    font-family: var(--font-header);
    font-size: 19px;
    font-weight: 600;

    text-transform: uppercase;

    /* Разрядка из гайда. Отрицательный трекинг, который
       стоял раньше, делал надпись плотной и тяжёлой */
    letter-spacing: 3px;

    color: var(--text-main);
    text-decoration: none;

    transition: color 0.2s ease;
}

/* Бабочка перед названием — знак, а не буква:
   поэтому мельче текста и без разрядки */

.logo-butterfly,
.account-logo .logo-butterfly {
    font-size: 15px;
    letter-spacing: normal;
}

@media (hover: hover) {

    .logo:hover,
    .account-logo:hover,
    .learning-logo:hover,
    .webinar-logo:hover {
        color: var(--butterfly-deep);
        opacity: 1;
    }
}


/* ========================================
   ПУНКТЫ МЕНЮ
======================================== */

.nav nav {
    gap: 26px;
}

.nav nav a {
    position: relative;

    padding: 4px 0;

    /* Приглушённый серый на кремовом даёт контраст 3.1 —
       для одиннадцати пикселей прописными этого мало.
       Тёмный читается, а цвет марки остаётся на наведение. */
    color: var(--text-main);

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;

    text-transform: uppercase;
    letter-spacing: 1.5px;

    transition: color 0.2s ease;
}

/* Золотая черта вырастает слева направо.
   Только там, где есть курсор: на телефоне пункты
   меню живут в выезжающей панели и черта им не нужна. */

@media (min-width: 701px) {

    .nav nav a::after {
        content: "";

        position: absolute;
        left: 0;
        bottom: 0;

        width: 0;
        height: 1px;

        background: var(--accent-gold);

        transition: width 0.25s ease;
    }

    .nav nav a.nav-account::after,
    .nav nav button.nav-login::after {
        display: none;
    }
}

@media (hover: hover) {

    .nav nav a:hover {
        color: var(--butterfly-deep);
        transform: none;
    }

    .nav nav a:hover::after {
        width: 100%;
    }
}


/* ========================================
   ССЫЛКА КАБИНЕТА И ВОЗВРАТА
======================================== */

/* Была пилюлей на 999 пикселей — в системе, где у всего
   почти прямые углы, она выбивалась сильнее всего */

.nav nav a.nav-account,
.nav nav button.nav-login,
.logout-link,
.learning-back,
.webinar-back {
    padding: 9px 16px;

    cursor: pointer;

    background: transparent;
    border: 1px solid var(--butterfly-border);
    border-radius: 2px;

    color: var(--butterfly-deep);

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 1.5px;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

@media (hover: hover) {

    .nav nav a.nav-account:hover,
    .nav nav button.nav-login:hover,
    .logout-link:hover,
    .learning-back:hover,
    .webinar-back:hover {
        background: var(--butterfly-strong);
        border-color: var(--butterfly-strong);
        color: var(--white);

        transform: none;
    }
}

.nav nav a:focus-visible,
.nav nav button:focus-visible,
.logo:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}


/* Имя вошедшего рядом с кнопкой выхода */

.account-user {
    gap: 16px;
}

.account-user-name {
    color: var(--text-muted);

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}


/* ========================================
   ТЕЛЕФОН И ПЛАНШЕТ
======================================== */

@media (max-width: 700px) {

    .nav,
    .account-header-inner,
    .learning-header-inner,
    .webinar-header-inner {
        height: 64px;
    }

    .logo,
    .account-logo,
    .learning-logo,
    .webinar-logo {
        font-size: 16px;
        letter-spacing: 2px;
    }

    /* Полоски бургера тоньше: две точки в толщину
       спорили с волосяными линиями всего остального */

    .nav-burger span {
        height: 1px;
        background: var(--text-main);
    }

    /* Выезжающая панель — кремовая, как страница,
       а не белая заплатка поверх неё */

    .nav nav {
        background: var(--bg-secondary);
        border-left: 1px solid rgba(29, 79, 107, 0.14);
        padding-top: 78px;
    }

    .nav nav a {
        font-size: 13px;
        letter-spacing: 2px;

        border-bottom: 1px solid var(--border);
    }

    .nav nav a.nav-account,
    .nav nav button.nav-login {
        margin-top: 18px;
        padding: 15px 16px;
        text-align: center;

        background: var(--butterfly-strong);
        border-color: var(--butterfly-strong);
        color: var(--white);
    }

    /* Пункты панели выезжают по очереди, когда она открывается */

    .nav nav > a {
        transition: color 0.2s ease, opacity 0.35s ease, transform 0.35s var(--ease-soft);
    }

    .nav:has(.nav-burger):not(.nav-open) nav > a {
        opacity: 0;
        transform: translateX(14px);
    }

    .nav.nav-open nav > a:nth-child(2) { transition-delay: 0.04s; }
    .nav.nav-open nav > a:nth-child(3) { transition-delay: 0.08s; }
    .nav.nav-open nav > a:nth-child(4) { transition-delay: 0.12s; }
    .nav.nav-open nav > a:nth-child(5) { transition-delay: 0.16s; }
    .nav.nav-open nav > a:nth-child(6) { transition-delay: 0.20s; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {

    .nav:has(.nav-burger):not(.nav-open) nav > a {
        opacity: 1;
        transform: none;
    }
}