/* =========================================================
   DESKTOP MENU ENHANCED v1 — Loja da Barba
   Aplica melhorias visuais APENAS no menu desktop (≥992px).
   Para reverter: remova ou comente a linha deste arquivo no header.twig
   ========================================================= */

/* Oculta o cabeçalho de categoria no mobile/tablet */
.cimenu #menu .dropdown-category-title {
    display: none;
}

@media (min-width: 992px) {

    /* ── Categorias principais ── */
    .cimenu #menu .navbar-nav {
        gap: 4px;
    }

    .cimenu #menu .navbar-nav > li > a {
        font-family: "Lexend", sans-serif;
        font-size: 13.5px;
        font-weight: 500;
        letter-spacing: 0.3px;
        text-transform: none;
        padding: 6px 14px;
        border-bottom: 2px solid transparent;
        transition: color 0.25s ease, border-color 0.25s ease;
    }

    .cimenu #menu .navbar-nav > li > a:hover,
    .cimenu #menu .dropdown:hover > .dropdown-toggle,
    .cimenu #menu .ldb-mega-item.is-mega-open > .dropdown-toggle {
        border-bottom-color: #D4AF68;
    }

    /* Chevron gira ao abrir */
    .cimenu #menu .dropdown-toggle::after {
        transition: transform 0.18s ease;
        display: inline-block;
    }

    .cimenu #menu .dropdown:hover > .dropdown-toggle::after,
    .cimenu #menu .ldb-mega-item.is-mega-open > .dropdown-toggle::after {
        transform: rotate(180deg);
    }

    /* ── Painel do dropdown ── */
    .cimenu #menu .dropdown-menu {
        padding: 0 !important;
        min-width: 240px !important;
        overflow: hidden;
    }

    /* Seta apontando para a categoria pai */
    .cimenu #menu .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 28px;
        width: 11px;
        height: 11px;
        background: #ffffff;
        border-left: 1px solid #EAEAEA;
        border-top: 1px solid #EAEAEA;
        transform: rotate(45deg);
        z-index: 1;
    }

    /* Cabeçalho da categoria dentro do dropdown */
    .cimenu #menu .dropdown-category-title {
        display: block;
        padding: 14px 18px 10px;
        font-family: "Lexend", sans-serif;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: #1E392A;
        border-bottom: 1px solid #F0F0F0;
        background: #FAFBFA;
    }

    /* Layout em colunas (flex em vez de table) */
    .cimenu #menu .dropdown-inner {
        display: flex !important;
        padding: 8px;
        gap: 0;
    }

    .cimenu #menu .dropdown-inner > ul.list-unstyled {
        display: block !important;
        flex: 1;
        min-width: 0;
        padding: 0 4px;
        margin: 0;
    }

    .cimenu #menu .dropdown-inner > ul.list-unstyled + ul.list-unstyled {
        border-left: 1px solid #F0F0F0;
        padding-left: 8px;
    }

    /* ── Links das subcategorias ── */
    .cimenu #menu .dropdown-menu li > a {
        font-family: "Lexend", sans-serif;
        font-size: 13px;
        font-weight: 400;
        padding: 9px 14px 9px 20px !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* Neutraliza o sublinhado horizontal antigo do tema */
    .cimenu #menu .dropdown-menu li > a::before,
    .cimenu #menu .dropdown-menu li > a:hover::before {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Barra dourada vertical — centralizada no item via top/bottom */
    .cimenu #menu .dropdown-menu li > a::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 7px !important;
        top: 7px !important;
        bottom: 7px !important;
        width: 3px !important;
        height: auto !important;
        margin: 0 !important;
        background-color: #D4AF68 !important;
        border-radius: 2px !important;
        opacity: 0;
        transform: scaleY(0);
        transform-origin: center center;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .cimenu #menu .dropdown-menu li > a:hover::after {
        opacity: 1 !important;
        transform: scaleY(1) !important;
    }

    /* Animação escalonada ao abrir */
    .cimenu #menu .dropdown-menu li {
        opacity: 0;
        transform: translateY(6px);
    }

    .cimenu #menu .dropdown:hover .dropdown-menu li {
        animation: desktopMenuItemIn 0.3s ease forwards;
    }

    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(1)  { animation-delay: 0.03s; }
    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(2)  { animation-delay: 0.06s; }
    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(3)  { animation-delay: 0.09s; }
    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(4)  { animation-delay: 0.12s; }
    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(5)  { animation-delay: 0.15s; }
    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(6)  { animation-delay: 0.18s; }
    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(7)  { animation-delay: 0.21s; }
    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(8)  { animation-delay: 0.24s; }
    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(9)  { animation-delay: 0.27s; }
    .cimenu #menu .dropdown:hover .dropdown-menu li:nth-child(10) { animation-delay: 0.30s; }

    @keyframes desktopMenuItemIn {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── Link "Ver todos" como botão pill ── */
    .cimenu #menu .see-all {
        display: block;
        text-align: center;
        margin: 6px 12px 10px !important;
        padding: 10px 18px !important;
        border: 1px solid #1E392A !important;
        border-top: 1px solid #1E392A !important;
        border-radius: 24px !important;
        background: transparent !important;
        font-family: "Lexend", sans-serif;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #1E392A !important;
        letter-spacing: 0.3px;
        transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
    }

    .cimenu #menu .see-all::after {
        content: ' \2192';
        transition: transform 0.2s ease;
        display: inline-block;
    }

    .cimenu #menu .see-all:hover {
        background: #1E392A !important;
        color: #ffffff !important;
        border-color: #1E392A !important;
        transform: none !important;
    }

    .cimenu #menu .see-all:hover::after {
        transform: translateX(3px);
    }

}