/* categorias_dropdown.css */

/* --- Estilos para o Dropdown de Categorias (VERSÃO DESKTOP) --- */
.dropdown-categorias {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dropdown-categorias-trigger { /* O link "Categorias" no desktop */
    cursor: pointer;
    background-color: transparent;
    display: flex; /* Garante que o ícone e o texto estejam alinhados */
    align-items: center;
    color: #555; /* Garante a cor do texto padrão */
    text-decoration: none;
    padding: 10px 15px; /* Para que ele tenha a mesma área clicável dos outros links */
    border-radius: 5px;
    transition: opacity 0.2s ease;
}

.dropdown-categorias-trigger:hover {
    opacity: 0.7;
    background-color: transparent; /* Garante que não tenha fundo no hover */
}

.dropdown-arrow-nav { /* Seta geral */
    font-size: 12px;
    transition: transform 0.2s ease;
    transform: rotate(0deg); /* Seta para direita por padrão */
    margin-left: 5px; /* Espaço entre texto e seta */
}

.dropdown-arrow-nav.rotate {
    transform: rotate(90deg); /* Seta para baixo quando ativo */
}

/* CONTEÚDO DO DROPDOWN (usado tanto para desktop quanto para mobile, e depois sobrescrito) */
/* Por padrão, ocultamos o conteúdo do dropdown. */
.categorias-dropdown-content {
    display: none; /* Regra base para ocultar */
    background: var(--azul-padrao); /* Fundo AZUL para o CONTAINER */
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 1001;
    padding: 0;
    overflow: hidden;
}

/* Desktop-specific styles for dropdown content - Este bloco é para o dropdown visível no desktop */
/* Garante que o conteúdo do dropdown de categorias no desktop seja absoluto e OCULTO por padrão */
.dropdown-categorias .categorias-dropdown-content {
    position: absolute; /* Para que ele flutue */
    top: 100%;
    left: 0;
    /* Essa é a linha CRÍTICA para garantir que ele esteja oculto por padrão no desktop. */
    /* Garante que essa regra tenha precedência sobre qualquer outra */
    display: none !important;
}

/* EXIBE O CONTEÚDO QUANDO A CLASSE 'SHOW' É ATIVADA (para desktop e mobile) */
.categorias-dropdown-content.show {
    display: block !important; /* Força a exibição quando o JS adiciona 'show' */
}

.categorias-dropdown-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categorias-dropdown-content li a {
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    font-size: 15px;
    background: var(--azul-padrao); /* Garante o fundo azul para os itens no desktop */
    transition: opacity 0.2s ease;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.categorias-dropdown-content li a:hover {
    opacity: 0.7;
    background-color: var(--azul-padrao); /* Mantém o fundo azul no hover */
    color: white;
}

@media (max-width: 768px) {
    /* OCULTA TODO O ITEM DE CATEGORIAS DO DESKTOP NA NAVEGAÇÃO PRINCIPAL */
    .nav-opcoes-navegacao .dropdown-categorias {
        display: none !important;
    }

    /* MOSTRA O ITEM DE CATEGORIAS NO MENU MOBILE */
    .mobile-dropdown-categorias-item {
        align-items: center;
        /* Adicionando display: block para garantir que o fluxo seja vertical no mobile,
           caso ele esteja sendo contido por um display: flex/grid do pai. */
        display: block;
    }

    /* Garante que o trigger (o link "Categorias" do mobile) seja flex */
    .mobile-categorias-trigger {
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* Estilos para o CONTEÚDO do dropdown de categorias quando exibido no MENU MOBILE */
    /* Este bloco se aplica ao .categorias-dropdown-content DENTRO do .mobile-dropdown-categorias-item */
    .mobile-dropdown-categorias-item > .categorias-dropdown-content {
        position: static;
        box-shadow: none;
        border-top: 1px solid #eee;
        margin-top: 5px;
        background-color: #f9f9f9; /* Fundo mais claro para o mobile */
        padding-left: 20px;
        min-width: unset;

        /* MUDANÇA CRÍTICA: Ocultamos por altura máxima (max-height) em vez de display: none. */
        /* Isso permite a transição e a correta expansão do elemento. */
        max-height: 0;
        overflow: hidden; /* Mantemos para garantir que o conteúdo não vaze */
        transition: max-height 0.3s ease-out; /* Adiciona uma transição suave */
        /* display: block !important; <--- REMOVIDO: Será ativado pelo .show */
    }

    .mobile-dropdown-categorias-item > .categorias-dropdown-content.show {
        /* MUDANÇA CRÍTICA: Usamos um valor alto para max-height para exibir o conteúdo */
        max-height: 500px; /* Suficiente para muitas categorias. Ajuste se precisar de mais! */
        display: block !important; /* Mantemos o display: block para garantir o fluxo vertical */
    }

    /* Nota: Se o .categorias-dropdown-content global tiver overflow: hidden,
       ele está sendo sobrescrito aqui. */

    /* Estilos dos links dentro do dropdown de categorias no mobile */
    .mobile-dropdown-categorias-item > .categorias-dropdown-content ul li a {
        padding-left: 30px;
        color: #555; /* Cores dos links de categorias no mobile */
        background-color: transparent; /* Remove o fundo azul padrão */
    }

    .mobile-dropdown-categorias-item > .categorias-dropdown-content ul li a:hover {
        background-color: #f0f0f0;
        opacity: 1;
    }

    /* Ajuste para a seta do dropdown de categorias no mobile */
    .mobile-categorias-trigger .dropdown-arrow-nav {
        transform: rotate(0deg); /* Seta do mobile para direita por padrão */
        margin-left: auto; /* Empurra a seta para a direita */
        margin-right: 10px; /* Pequeno espaçamento à direita */
    }
    .mobile-categorias-trigger .dropdown-arrow-nav.rotate {
        transform: rotate(90deg); /* Seta do mobile para baixo quando expandido */
    }
}