/* ============================================================
   VARIÁVEIS CSS (Se você usa, defina-as no seu arquivo principal ou aqui)
   Exemplo:
   :root {
       --cor-1: #011754;          // Cor de fundo do menu
       --cor-link-menu: #ffffff;  // Cor padrão do texto do link
       --cor-hover-menu: #0e62ac; // Cor do hover/ativo (o azul do seu logo)
   }
============================================================ */

/* ============================
      MENU — ESTILOS GERAIS
============================ */

#main-menu .navbar {
    /* Garante que o navbar-dark funcione para cores de texto */
    --bs-navbar-color: var(--cor-link-menu, #ffffff);
    --bs-navbar-hover-color: var(--cor-hover-menu, #0e62ac);
    --bs-navbar-active-color: var(--cor-hover-menu, #0e62ac);
    /*background-color: var(--cor-1, #011754); /* Fundo do seu menu */
}

#main-menu .nav-link {
    font-size: 17px;
    font-weight: 500;
    color: var(--cor-link-menu, #ffffff) !important; /* Cor padrão dos links */
    background-color: transparent !important; /* Garante fundo transparente */
    padding: 10px 15px; /* Padding para aumentar a área clicável */
    border-radius: 12px; /* Bordas arredondadas para o link */
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Hover e Focus dos links do menu principal (desktop e mobile) */
#main-menu .nav-link:hover,
#main-menu .nav-link:focus {
    color: var(--cor-link-menu, #ffffff) !important; /* Texto branco no hover */
    background-color: var(--cor-hover-menu, #0e62ac) !important; /* Fundo azul no hover */
}

/* Link ativo (definido pelo PHP) */
#main-menu .nav-link.active {
    color: #ffffff !important; /* Texto branco para ativo */
    background-color: var(--cor-hover-menu, #0e62ac) !important; /* Fundo azul para ativo */
    font-weight: 700; /* Negrito para ativo */
}

/* ============================
      BOTÃO DE EXAME (se ativo)
============================ */
.menu-btn-exame {
    background: white;
    color: #000b8c;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.menu-btn-exame:hover {
    background: gray;
    color: white;
    transform: translateY(-1px);
}

/* ============================
      OFFSET MENU (se usado)
============================ */
.offset-menu{height:170px;}

/* ============================
      ÍCONE DE SETA (dropdown-arrow)
============================ */
.dropdown-arrow {
    transition: transform 0.3s ease; /* Transição suave para a rotação */
    margin-left: 5px; /* Espaçamento entre o texto e a seta */
}

/* Gira a seta quando o dropdown está aberto (mobile) ou em hover (desktop) */
.navbar .dropdown.show .dropdown-arrow,
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-arrow {
        transform: rotate(180deg);
    }
}

/* ============================
   DROPDOWN — ESTILOS BASE
============================ */

.navbar .dropdown-menu {
    /* Estilos base do dropdown-menu */
    background-color: var(--cor-1, #011754); /* Fundo igual ao menu principal */
    border: none; /* Remove borda */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra */
    padding: 8px 0; /* Espaçamento interno */
    margin: 0; /* Remove margens extras */
    list-style: none; /* Remove marcadores de lista */

    /* Garante que o dropdown-menu esteja invisível por padrão */
    display: none; /* Esconde completamente o elemento */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Posição inicial para a animação */
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
    color: #ffffff;
    pointer-events: none; /* Impede interação quando invisível */
}

.navbar .dropdown-menu.show {
    display: block; /* Torna visível quando a classe 'show' está ativa */
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Posição final da animação */
    transition-delay: 0s;
    pointer-events: auto; /* Permite interação quando visível */
}

/* Estilo para os itens do submenu */
.navbar .dropdown-item {
    font-size: 14px;
    font-weight: 500;
    color: var(--cor-link-menu, #ffffff) !important; /* Cor padrão dos itens do submenu */
    padding: 8px 20px; /* Espaçamento */
    border-radius: 6px; /* Bordas arredondadas para os itens */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover e Focus dos itens do submenu */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--cor-hover-menu, #0e62ac) !important; /* Fundo azul no hover */
    color: #ffffff !important; /* Texto branco no hover */
}

/* ============================
   DROPDOWN — MOBILE (<992px)
============================ */

@media (max-width: 991px) {
    /* Estilos para o menu principal quando aberto no mobile */
    .navbar-collapse {
        max-height: 80vh; /* Ocupa no máximo 80% da tela */
        overflow-y: auto; /* Ativa o scroll vertical */
        -webkit-overflow-scrolling: touch; /* Scroll suave no iPhone */
        padding-bottom: 20px; /* Espaço extra no final */
    }

    /* Estilos para o dropdown-menu no mobile */
    .navbar .dropdown-menu {
        position: static; /* Para que o submenu apareça no fluxo do documento */
        float: none; /* Remove float */
        width: 100%; /* Ocupa a largura total */
        margin-top: 0.5rem; /* Espaçamento abaixo do toggle */
        border: none; /* Remove borda */
        border-radius: 0; /* Remove borda arredondada */
        box-shadow: none; /* Remove sombra */
        background-color: transparent; /* Fundo transparente para se integrar ao menu principal */

        /* Controle de visibilidade e animação para slide/fade */
        max-height: 0; /* Começa fechado */
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px); /* Posição inicial para animação */
        transition: max-height 0.36s ease, opacity 0.28s ease, transform 0.28s ease;
        pointer-events: none; /* Impede clicks quando fechado */
        padding: 0 10px; /* Padding lateral mínimo para não "pular" */
    }

    /* Estado aberto do dropdown-menu no mobile */
    .navbar .dropdown-menu.show {
        max-height: 900px; /* Alto suficiente para o conteúdo */
        opacity: 1;
        transform: translateY(0); /* Posição final da animação */
        pointer-events: auto;
        padding: 10px; /* Padding completo só ao abrir */
        display: grid; /* Se você quer 2 colunas, use grid */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colunas */
        gap: 8px; /* Espaçamento entre as colunas */
        box-sizing: border-box;
    }

    /* Se você preferir 1 coluna para o submenu mobile, use este bloco no lugar do anterior */
    /*
    .navbar .dropdown-menu.show {
        max-height: 900px;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        padding: 10px;
        display: block; // Para 1 coluna
    }
    */

    /* Itens do submenu no mobile */
    .navbar .dropdown-menu .dropdown-item {
        white-space: normal; /* Permite que o texto quebre linha */
        padding: 8px 10px;
        border-radius: 6px;
    }

    /* Garante que o conteúdo dos itens não force linha única */
    .navbar .dropdown-menu .dropdown-item > * {
        width: 100%;
        box-sizing: border-box;
    }

    /* Estilo para o link do dropdown-toggle quando ele está aberto no mobile */
    .navbar .dropdown.show .nav-link.dropdown-toggle {
        color: var(--cor-link-menu, #ffffff) !important; /* AGORA É BRANCO QUANDO O DROPDOWN ESTÁ ABERTO NO MOBILE */
        background-color: var(--cor-hover-menu, #0e62ac) !important; /* Fundo azul quando o dropdown está aberto */
    }

    /* Garante que o :focus e :active não deixem a cor persistente no mobile */
    .navbar-dark .dropdown .nav-link.dropdown-toggle:focus,
    .navbar-dark .dropdown .nav-link.dropdown-toggle:active {
        color: var(--cor-link-menu, #ffffff) !important; /* Cor padrão ao focar/clicar, se não estiver ativo ou aberto */
        background-color: transparent !important;
    }
}


/* Força o texto branco no hover do link DISJUNTORES A VÁCUO (desktop e mobile) */
#dropdown-assistencia > .nav-link:hover,
#dropdown-assistencia > .nav-link:focus {
    color: #ffffff !important; /* texto branco */
}

#dropdown-assistencia > .nav-link.dropdown-toggle:hover,
#dropdown-assistencia > .nav-link.dropdown-toggle:focus {
    color: #ffffff !important;
}

/* Hover de qualquer link do menu principal */
#main-menu .nav-link:hover,
#main-menu .nav-link:focus {
    background-color: var(--cor-hover-menu, #0e62ac) !important;
    color: #ffffff !important;  /* força branco pra todos no hover */
}