/* /assets/css/library-header.css */

/* =========================================
   DESKTOP STYLES (min-width: 768px)
   ========================================= */
[x-cloak] { display: none !important; }

/* 1. Сброс отступов */
html { margin-top: 0 !important; }
body { margin: 0 !important; padding: 0 !important; overflow-x: hidden; }

/* 2. Логика "липкой" шапки */
.header-sticky {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    transition: transform 0.3s ease-in-out;
    z-index: 999;
}
.header-hidden {
    transform: translateY(-100%);
}
body {
    padding-top: 88px;
}
body.admin-bar .header-sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .header-sticky { top: 46px; }
}
        
@media (min-width: 768px) {
    
    /* 1. РОДИТЕЛЬСКИЙ ПУНКТ МЕНЮ */
    .lib-menu-item {
        position: relative;
        display: flex;
        align-items: center;
        z-index: 50;
        /* Убрали min-height: 72px, чтобы строки не были гигантскими при переносе */
    }

    /* Ссылка внутри пункта */
    .lib-menu-item.menu-item-has-children > a {
        padding-right: 4px;
        position: relative;
        z-index: 60;
        
        display: flex;
        align-items: center;

        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 8px;
        padding-right: 8px;
        
        white-space: nowrap;
    }
    
    /* Стрелочка */
    .lib-menu-item.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        margin-left: 6px;
        vertical-align: middle;
        border: 4px solid transparent;
        border-top-color: rgba(255,255,255,0.6);
        transition: transform 0.2s ease;
    }
    
    .lib-menu-item.is-active > a::after,
    .lib-menu-item:hover > a::after {
        border-top-color: #f6b40e;
        transform: rotate(180deg);
    }

    /* 2. ВЫПАДАЮЩЕЕ МЕНЮ (ОБЫЧНОЕ) */
    .lib-menu-item .sub-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        
        position: absolute;
        left: 0;
        
        /* Меню появляется сразу под ссылкой */
        top: 100%; 
        /* FIX: Добавляем небольшой отступ, чтобы меню не прилипало к тексту, 
           имитируя отступ от хедера */
        margin-top: 11px; 
        
        padding: 8px 0;
        background: #0f2542;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 8px 8px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.5);
        border-top: 3px solid #f6b40e; 

        min-width: 260px;
        z-index: 100;
        
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
    }

    .lib-menu-item.is-active .sub-menu,
    .lib-menu-item:hover .sub-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        transition-delay: 0s;
    }

    .lib-menu-item .sub-menu li {
        display: block;
        height: auto; 
    }
    
    .lib-menu-item .sub-menu a {
        display: block;
        height: auto;
        padding: 10px 20px;
        color: #cfd9e8;
        font-size: 0.95rem;
        text-decoration: none;
        transition: all 0.15s;
        white-space: nowrap;
    }
    
    .lib-menu-item .sub-menu a:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
        padding-left: 24px;
    }

    /* 3. МЕГА-МЕНЮ (ЖАНРЫ) */
    .lib-menu-item.mega-menu {
        position: static;
    }
    
    .lib-menu-item.mega-menu .sub-menu {
        width: 800px;
        max-width: 95vw;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px 30px; 
        padding: 24px;
        top: 100%; 
        margin-top: 0;
    }
    
    .lib-menu-item.mega-menu.is-active .sub-menu,
    .lib-menu-item.mega-menu:hover .sub-menu {
        transform: translateX(-50%) translateY(0);
    }
    
    .lib-menu-item.mega-menu .sub-menu a {
        padding: 10px 20px;
    }
    
    .lib-menu-item.mega-menu .sub-menu a:hover {
        padding-left: 20px;
    }
    
    /* 4. ПРОЗРАЧНЫЙ МОСТ */
    .lib-menu-item::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 30px;
        background: transparent;
        z-index: 60;
    }
    
    .lib-menu-item.mega-menu::after {
        width: 140%;
        left: -20%;
    }
}

/* =========================================
   MOBILE STYLES (max-width: 767.98px)
   ========================================= */
@media (max-width: 767.98px) {
    .mobile-nav, .mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mobile-nav li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .mobile-link-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .mobile-nav a {
        display: block;
        padding: 14px 0;
        color: #e2e8f0;
        font-size: 1.1rem;
        text-decoration: none;
        flex-grow: 1;
    }
    .mobile-submenu-toggle {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.6);
        transition: transform 0.3s ease;
    }
    .menu-item-has-children.mobile-open > .mobile-link-wrapper .mobile-submenu-toggle {
        transform: rotate(180deg);
        color: #f6b40e;
    }
    .menu-item-has-children.mobile-open > .mobile-link-wrapper a {
        color: #f6b40e;
    }
    .mobile-nav .sub-menu {
        display: none;
        background: rgba(0, 0, 0, 0.2);
        padding-left: 20px;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
    .menu-item-has-children.mobile-open > .sub-menu {
        display: block;
        animation: slideDown 0.3s ease;
    }
    .mobile-nav .sub-menu a {
        font-size: 1rem;
        padding: 10px 0;
        color: #cbd5e1;
    }
}

/* =========================================
   ANIMATIONS (Global)
   ========================================= */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}