/**
 * ============================================================================
 * V2 HEADER — Стили навигации и брендинга
 * ============================================================================
 * 
 * @file        web/css/v2/header.css
 * @description Стили header/navbar для модуля V2 "Мастерская Санты"
 * @version     1.0 (Декабрь 2025)
 * 
 * ============================================================================
 * СОДЕРЖИМОЕ:
 * ────────────────────────────────────────
 * 
 * 1. Header Container — фон и эффекты
 * 2. Brand Logo — логотип и название
 * 3. Brand Text — типографика названия
 * 4. Анимации и эффекты
 * 5. Responsive
 * 
 * ============================================================================
 */

/* ==========================================================================
   1. HEADER CONTAINER — Навигационная панель V2
   ========================================================================== */

/* Переопределяем базовый header для V2 — сохраняем фирменный красный */
.v2-layout .header-container {
    background: linear-gradient(to right, #8c0202 0%, #c73131 50%, #a20000 100%);
    border-bottom: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.v2-layout .header-container .navbar {
    background: transparent;
    box-shadow: none;
}

/* ==========================================================================
   2. BRAND SECTION — Логотип и название
   ========================================================================== */

/* Контейнер бренда — фирменный стиль */
.v2-layout .navbar-nav.theme-brand {
    background: linear-gradient(to right, #8c0202 0%, #a20000 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Тонкое свечение сверху */
.v2-layout .navbar-nav.theme-brand::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    pointer-events: none;
}

/* Без золотой линии — оставляем чистый красный */
.v2-layout .navbar-nav.theme-brand::after {
    display: none;
}

/* ==========================================================================
   3. LOGO — Логотип
   ========================================================================== */

.v2-layout .theme-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

.v2-layout .theme-logo a {
    display: flex;
    align-items: center;
    transition: transform 0.3s var(--v2-ease-bounce);
}

.v2-layout .theme-logo a:hover {
    transform: scale(1.08);
}

/* Логотип — SVG */
.v2-layout .theme-logo-img {
    width: 44px;
    height: 44px;
    background-image: url(/img/v2-logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 2px 8px rgba(245, 200, 66, 0.3));
    transition: filter 0.3s ease;
}

.v2-layout .theme-logo a:hover .theme-logo-img {
    filter: drop-shadow(0 2px 12px rgba(245, 200, 66, 0.5));
}

/* Альтернатива — через img тег */
.v2-layout .v2-logo-img {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 2px 8px rgba(245, 200, 66, 0.3));
    transition: filter 0.3s ease, transform 0.3s var(--v2-ease-bounce);
}

.v2-layout .theme-logo a:hover .v2-logo-img {
    filter: drop-shadow(0 2px 12px rgba(245, 200, 66, 0.5));
    transform: rotate(-5deg);
}

/* ==========================================================================
   4. BRAND TEXT — Название проекта
   ========================================================================== */

.v2-layout .navbar-nav .theme-text {
    width: auto;
    min-width: 140px;
    padding: 0 5px;
}

.v2-layout .navbar-nav .theme-text a.nav-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 10px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.v2-layout .navbar-nav .theme-text a.nav-link:hover {
    transform: translateX(2px);
}

/* Главная надпись */
.v2-layout .v2-brand-title {
    font-family: 'Montserrat', 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f1f5f9;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Акцентная часть названия */
.v2-layout .v2-brand-title .v2-brand-accent {
    color: var(--v2-gold);
    text-shadow: 0 0 10px rgba(245, 200, 66, 0.4);
}

/* Иконка в названии */
.v2-layout .v2-brand-title .v2-brand-icon {
    font-size: 16px;
    animation: v2-float 3s ease-in-out infinite;
}

/* Подзаголовок */
.v2-layout .v2-brand-subtitle {
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--v2-text);
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 2px;
}

/* Бейдж версии */
.v2-layout .v2-brand-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--v2-gold) 0%, #d97706 100%);
    color: #0f172a;
    border-radius: 10px;
    margin-left: 8px;
    box-shadow: 0 2px 8px rgba(245, 200, 66, 0.3);
}

/* ==========================================================================
   5. DECORATIVE ELEMENTS — Декор
   ========================================================================== */

/* Снежинки/звёздочки рядом с лого (через псевдо) */
.v2-layout .theme-brand .v2-brand-stars {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.6;
}

.v2-layout .theme-brand .v2-brand-stars::before,
.v2-layout .theme-brand .v2-brand-stars::after {
    content: '✦';
    position: absolute;
    color: var(--v2-gold);
    font-size: 8px;
    animation: v2-twinkle 2s ease-in-out infinite;
}

.v2-layout .theme-brand .v2-brand-stars::before {
    top: -20px;
    left: 5px;
    animation-delay: 0.5s;
}

.v2-layout .theme-brand .v2-brand-stars::after {
    top: 15px;
    left: -5px;
    animation-delay: 1s;
}

/* ==========================================================================
   6. RESPONSIVE — Адаптивность
   ========================================================================== */

@media (max-width: 991px) {
    .v2-layout .navbar-nav.theme-brand {
        width: auto;
        min-width: 180px;
    }
    
    .v2-layout .v2-brand-title {
        font-size: 13px;
    }
    
    .v2-layout .v2-brand-subtitle {
        display: none;
    }
}

@media (max-width: 768px) {
    .v2-layout .navbar-nav.theme-brand {
        min-width: 140px;
    }
    
    .v2-layout .navbar-nav .theme-text {
        min-width: auto;
    }
    
    .v2-layout .v2-brand-title {
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    
    .v2-layout .theme-logo-img,
    .v2-layout .v2-logo-img {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 576px) {
    .v2-layout .navbar-nav.theme-brand {
        min-width: 90px;
        justify-content: center;
    }
    .header-container .toggle-sidebar{
        width: 50px;
    }
    
    .v2-layout .navbar-nav .theme-text {
        display: none;
    }
    
    .v2-layout .theme-logo-img,
    .v2-layout .v2-logo-img {
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   7. LIGHT THEME — Светлая тема (header остаётся красным)
   ========================================================================== */

/* Header остаётся красным в обеих темах — это фирменный стиль */
.v2-theme-light .header-container {
    background: linear-gradient(to right, #8c0202 0%, #c73131 50%, #a20000 100%);
    border-bottom: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.v2-theme-light .navbar-nav.theme-brand {
    background: linear-gradient(to right, #8c0202 0%, #a20000 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Текст остаётся белым на красном фоне */
.v2-theme-light .v2-brand-title {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.v2-theme-light .v2-brand-title .v2-brand-accent {
    color: #ffd600;
}

.v2-theme-light .v2-brand-subtitle {
    color: rgba(255, 255, 255, 0.8);
}