/*
 * Header auth navigation — dropdown "Личный кабинет" with
 * "Зарегистрироваться" / "Войти" for anonymous users.
 *
 * This file is a separate stylesheet (not part of styles.css) so that
 * handoff updates that re-compile styles.css don't wipe the auth-nav
 * logic. The markup, styles and toggle script form a single contract
 * used by the Drupal integration at /app.
 *
 * IMPORTANT for designers: if you redesign the header auth button,
 * please keep it as a dropdown with register/login items (or tell us,
 * so we can update the Drupal integration). The Drupal app swaps this
 * dropdown for a single "Личный кабинет → /user" link when a user is
 * already logged in.
 */

.auth-nav {
    position: relative;
    display: inline-block;
}

.auth-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The parent .btn-login adds an ::after underline on :hover via generic
   nav rules; kill it here so the dropdown button stays clean. */
.auth-nav__toggle::after,
.auth-nav__toggle:hover::after {
    display: none;
    content: none;
}

.auth-nav__chevron {
    transition: transform 0.2s ease;
}

.auth-nav.is-open .auth-nav__chevron {
    transform: rotate(180deg);
}

.auth-nav__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #0f1420;
    border: 1px solid rgba(247, 245, 242, 0.08);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(10, 15, 24, 0.45);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1000;
}

.auth-nav.is-open .auth-nav__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.auth-nav__menu li {
    margin: 0;
}

.auth-nav__item {
    display: block;
    padding: 10px 16px;
    color: #f7f5f2;
    font-weight: 500;
    font-size: 15px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.auth-nav__item::after,
.auth-nav__item:hover::after {
    display: none;
    content: none;
}

.auth-nav__item:hover {
    background: rgba(247, 245, 242, 0.08);
    color: #fff;
}

.auth-nav__item--primary {
    color: #e1c59d;
}

.auth-nav__item--primary:hover {
    background: rgba(225, 197, 157, 0.1);
    color: #e1c59d;
}

/* Inside the burger menu (mobile side panel):
   hide the toggle button and show the two links as stacked CTAs
   at the bottom, so users still reach register/login directly. */
@media (max-width: 768px) {
    .auth-nav {
        width: 100%;
        margin-top: auto;
        display: block;
    }

    .auth-nav__toggle {
        display: none;
    }

    .auth-nav__menu {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .auth-nav__item {
        padding: 14px 28px;
        text-align: center;
        border-radius: 14px;
        font-weight: 600;
        font-size: 15px;
        border: 1px solid rgba(247, 245, 242, 0.18);
        color: #f7f5f2;
        background: transparent;
    }

    .auth-nav__item:hover {
        background: rgba(247, 245, 242, 0.06);
    }

    .auth-nav__item--primary {
        background: linear-gradient(135deg, #074948, #3a6b5a, #e1c59d);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 4px 20px rgba(7, 73, 72, 0.3);
    }

    .auth-nav__item--primary:hover {
        background: linear-gradient(135deg, #074948, #3a6b5a, #e1c59d);
        color: #fff;
    }
}