/* =========================================================
   1. BASE (Estrutura Básica)
========================================================= */
li.menu-dinamico-especialidades { position: relative !important; }
.cz-painel-categorias { display: none; }
.cz-painel-posts { display: none; }
.cz-link-categoria { display: flex !important; justify-content: space-between !important; align-items: center !important; text-decoration: none !important; }
.cz-seta { font-size: 18px; font-weight: bold; transition: transform 0.3s ease; }
.cz-link-post { display: block !important; text-decoration: none !important; }
.cz-vazio { display: block; padding: 12px 15px; font-style: italic; font-size: 12px; }

/* =========================================================
   2. REGRAS DE DESKTOP (PC - Fundo Branco e Flyout)
   Só funciona em telas grandes (992px ou mais)
========================================================= */
@media (min-width: 992px) {
    /* Paineis brancos flutuantes */
    .cz-painel-categorias {
        position: absolute !important; top: 0 !important; left: 100% !important; width: 280px !important;
        background-color: #ffffff !important; box-shadow: 4px 4px 15px rgba(0,0,0,0.1) !important; border: 1px solid #e5e5e5 !important; z-index: 999999 !important;
    }
    .cz-painel-posts {
        position: absolute !important; top: 0 !important; left: 100% !important; width: 260px !important;
        background-color: #ffffff !important; box-shadow: 4px 4px 15px rgba(0,0,0,0.1) !important; border: 1px solid #e5e5e5 !important; z-index: 1000000 !important;
    }

    /* Estilo dos itens no desktop */
    .cz-item-categoria { position: relative !important; border-bottom: 1px solid #f0f0f0 !important; }
    .cz-item-categoria:last-child { border-bottom: none !important; }
    
    .cz-link-categoria { padding: 12px 15px !important; color: #333333 !important; background-color: #ffffff !important; transition: background-color 0.2s, color 0.2s !important; }
    .cz-link-post { padding: 10px 15px !important; color: #555555 !important; border-bottom: 1px solid #f5f5f5 !important; background-color: #ffffff !important; transition: background-color 0.2s, color 0.2s !important; }
    .cz-link-post:last-child { border-bottom: none !important; }

    /* Efeitos de Hover (Passar o mouse) - Fica azul */
    li.menu-dinamico-especialidades:hover > .cz-painel-categorias { display: block !important; }
    .cz-item-categoria:hover > .cz-painel-posts { display: block !important; }
    .cz-item-categoria:hover > .cz-link-categoria { background-color: #006b96 !important; color: #ffffff !important; }
    .cz-link-post:hover { color: #006b96 !important; background-color: #f9f9f9 !important; }
    .cz-vazio { color: #999 !important; }
}

/* =========================================================
   3. REGRAS RESPONSIVAS (Celular - Tema Escuro, Transparente e Espaçado)
   Só funciona em telas menores (991px ou menos)
========================================================= */
@media (max-width: 991px) {
    /* Remove a flutuação e FORÇA fundo transparente em TUDO */
    .cz-painel-categorias, 
    .cz-painel-posts,
    .cz-item-categoria {
        position: relative !important; 
        left: 0 !important; 
        width: 100% !important;
        box-shadow: none !important; 
        border: none !important; 
        margin: 0 !important; 
        background: transparent !important; 
        background-color: transparent !important; 
    }
    
    /* Links com letra branca e recuo maior na esquerda para a bolinha não encostar */
    .cz-link-categoria, 
    .cz-link-post {
        color: #ffffff !important;
        padding: 12px 15px 12px 50px !important; /* Espaço aumentado para a palavra */
        position: relative !important;
        background: transparent !important;
        border: none !important;
    }

    /* Adiciona a bolinha (bullet) igual ao tema */
    .cz-link-categoria::before, 
    .cz-link-post::before {
        content: "•" !important; 
        position: absolute !important; 
        left: 25px !important; /* Bolinha fixada mais para a esquerda */
        color: #ffffff !important; 
        font-size: 16px !important; 
        line-height: 1 !important;
    }
    
    /* Afasta AINDA MAIS os posts (3º nível) para indicar que são submenu */
    .cz-painel-posts .cz-link-post {
        padding-left: 65px !important;
    }
    .cz-painel-posts .cz-link-post::before {
        left: 40px !important;
    }

    /* Ajuste da Setinha para o mobile */
    .cz-seta { transform: rotate(90deg) !important; margin-left: auto !important; color: #ffffff !important; }
    .cz-link-categoria.cz-aberto .cz-seta { transform: rotate(-90deg) !important; }

    /* Removemos os hovers no mobile para evitar que fiquem azuis/brancos ao tocar */
    .cz-item-categoria:hover > .cz-link-categoria, 
    .cz-link-post:hover {
        background: transparent !important; 
        background-color: transparent !important; 
        color: #ffffff !important;
    }
    .cz-vazio { color: #ffffff !important; padding-left: 50px !important; background: transparent !important; }
}