/* ==========================================================================
   ROERICH TEMPLATE FRAMEWORK (base-roerich.css)
   ========================================================================== */

/* --- 1. DESKTOP NAVIGATION --- */
.roerich-nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; margin-top: 1rem; margin-bottom: 3rem; background: rgba(243, 240, 223, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: var(--radius-lg); box-shadow: var(--elevation-layer-2); position: sticky; top: 1rem; z-index: 100; view-transition-name: desktop-top-nav; }
.nav-brand { font-family: var(--font-majestic); font-size: 1.5rem; font-weight: 700; color: var(--color-roerich-ultramarine); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link { font-family: var(--font-utility); font-weight: 800; font-size: 0.95rem; color: var(--color-abyss-ink); text-decoration: none; padding: 0.5rem 1rem; border-radius: var(--radius-sm); transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; border: none; background: transparent; }
.nav-link:hover, .nav-link:focus-within { background: rgba(0, 80, 136, 0.05); color: var(--color-roerich-ultramarine); }
.nav-link.active-highlight { background: var(--color-roerich-ultramarine); color: var(--color-snow-summit); border-radius: 50px; }
.nav-link.active-highlight:hover { background: var(--color-mystic-violet); color: #1A1A24; }

/* Dropdowns */
.dropdown-menu { position: absolute; top: 120%; left: 0; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; z-index: 150; }
.dropdown-menu::before { content: ''; position: absolute; top: -1rem; left: 0; width: 100%; height: 1rem; }
.nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item { text-decoration: none; color: var(--color-abyss-ink); font-weight: 500; padding: 0.75rem 1rem; border-radius: var(--radius-sm); transition: background 0.2s, padding-left 0.2s; display: flex; align-items: center; gap: 0.6rem; }
.dropdown-item:hover { background: rgba(0, 80, 136, 0.05); color: var(--color-roerich-ultramarine); padding-left: 1.25rem; }
.dropdown-divider { height: 1px; background: rgba(0, 80, 136, 0.1); margin: 0.5rem 0; border: none; }

/* User Roles */
.user-badge { display: flex; align-items: center; gap: 1rem; background: rgba(0, 80, 136, 0.05); padding: 0.4rem 0.4rem 0.4rem 1.2rem; border-radius: 50px; }
.role-tag { font-size: 0.7rem; font-weight: 800; padding: 0.2rem 0.6rem; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.05em; }
.role-admin { background: var(--color-fiery-orange); color: var(--color-snow-summit); }
.role-cult { background: var(--color-mystic-violet); color: #1A1A24; }
.role-head { background: var(--color-roerich-ultramarine); color: var(--color-snow-summit); }

/* --- 2. FOOTER --- */
.roerich-footer { display: block !important; position: relative; z-index: 30; margin-top: auto; padding: 1rem; text-align: center; color: var(--color-abyss-ink); opacity: 0.6; font-size: 0.875rem; font-weight: 500; }
.roerich-footer a { color: var(--color-roerich-ultramarine); font-weight: 800; text-decoration: none; }

/* --- 3. MOBILE NAVIGATION --- */
.mobile-nav-bar, .mobile-menu-overlay { display: none; }

@media (max-width: 992px) {
    .roerich-nav { display: none; }

    /* Mobile Bottom Bar */
    .mobile-nav-bar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; background: rgba(243, 240, 223, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 -4px 24px rgba(0, 80, 136, 0.08); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom)); view-transition-name: mobile-bottom-nav; }
    .mobile-nav-bar::before {
        content: '';
        position: absolute;
        top: -20px;  /* Высота защитной зоны вверх (настраивай под себя: 15px-25px) */
        left: 0;
        width: 100%;
        height: 20px; /* Должна совпадать с отрицательным top */
        background: transparent; /* Полностью прозрачный и незаметный */
        pointer-events: auto;    /* Критически важно: заставляет его перехватывать тапы */
        z-index: -1; /* Ложится внутри контекста панели, но выше элементов страницы */
    }
    .mobile-nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-decoration: none; color: var(--color-abyss-ink); font-size: 0.7rem; font-weight: 800; opacity: 0.6; padding: 0.5rem; transition: opacity 0.2s; }
    .mobile-nav-item:hover, .mobile-nav-item:active { opacity: 1; color: var(--color-roerich-ultramarine); }

    .mobile-nav-fab { grid-column: 3; position: relative; background: linear-gradient(135deg, #FFB347 0%, var(--color-fiery-orange) 100%); color: var(--color-snow-summit); width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; box-shadow: 0 0 20px rgba(255, 130, 58, 0.5), 0 0 40px rgba(255, 130, 58, 0.2); transform: translateY(-20px); cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; z-index: 110; }
    .mobile-nav-fab:active { transform: translateY(-16px) scale(0.92); box-shadow: 0 0 10px rgba(255, 130, 58, 0.8); }

    /* Mobile Overlay Menu */
    .mobile-menu-overlay { display: flex; position: fixed; inset: 0; background: rgba(10, 17, 40, 0.4); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; flex-direction: column; justify-content: flex-end; }
    .mobile-menu-overlay.active { opacity: 1; pointer-events: all; }
    .mobile-menu-content { background: var(--color-mountain-paper); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 2rem 1.5rem 6rem 1.5rem; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); max-height: 85vh; overflow-y: auto; }
    .mobile-menu-overlay.active .mobile-menu-content { transform: translateY(0); }
    .mobile-menu-group { margin-bottom: 2rem; position: relative; padding-left: 1.5rem; }
    .mobile-menu-group::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--color-mystic-violet); border-radius: 3px; opacity: 0.5; }
    .mobile-menu-title { font-family: var(--font-utility); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-roerich-ultramarine); font-size: 0.8rem; margin-bottom: 1rem; }
    .mobile-menu-link { font-size: 1.2rem; font-weight: 500; color: var(--color-abyss-ink); text-decoration: none; padding: 0.75rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; gap: 0.6rem; }
    .mobile-menu-link:last-child { border-bottom: none; }
    /* Увеличиваем иконки нижней панели навигации */
    .mobile-nav-item .svg-icon {
        width: 24px !important;
        height: 24px !important;
        margin-bottom: 0.15rem;
    }
}

/* --- 4. VIEW TRANSITIONS --- */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }

/* Контейнер для мобильного юзернейма */
.mobile-username-wrapper {
    display: flex;
    justify-content: center; /* Центрируем плашку по горизонтали */
    width: 100%;
    margin-top: 1.5rem;   /* Отступ снизу до контента страницы */
    box-sizing: border-box;
}

/* На десктопе (экраны шире 768px) полностью вырезаем из разметки */
@media (min-width: 992px) {
    .mobile-username-wrapper {
        display: none !important;
    }
}

/* Убираем синий/фиолетовый цвет для всех состояний ссылки профиля */
.user-profile-link,
.user-profile-link:visited,
.user-profile-link:active,
.user-profile-link:focus {
    color: inherit; /* Ссылка будет брать цвет текста родителя */
    text-decoration: none; /* Убираем подчеркивание */
}

/* Приятный легкий отклик при наведении */
.user-profile-link:hover {
    opacity: 0.75;
    color: var(--color-fiery-orange); /* Или оставь inherit, если не нужен акцент при ховере */
}

.mobile-profile-btn {
min-height: 34px;
}
/* Эффекты для мобильной кнопки профиля */
.mobile-profile-btn:visited,
.mobile-profile-btn:active,
.mobile-profile-btn:focus {
    color: inherit;
    text-decoration: none;
}

/* Отклик при нажатии пальцем (Mobile Active) */
.mobile-profile-btn:active {
    transform: scale(0.96);
    background: rgba(0, 80, 136, 0.12); /* Слегка темнеет фон при тапе */
}

/* Изменение иконки-стрелочки при наведении */
.mobile-profile-btn:hover .svg-icon:last-child {
    opacity: 1;
    transform: translateX(2px);
    transition: transform 0.2s ease, opacity 0.2s ease;
}