/* ===================================================
   MENU NAVEGAÇÃO - DROPDOWNS COM CSS PURO
   ===================================================
   Substitui data-toggle="dropdown" do Bootstrap
   por solução CSS pura com checkbox hack
   =================================================== */

/* ===== ESCONDER CHECKBOXES ===== */
.dropdown-toggle-checkbox,
.navbar-toggle-checkbox {
    display: none;
}

/* ===== DROPDOWN MENU - DESKTOP (HOVER) ===== */
@media (min-width: 577px) {
    /* Esconde dropdown por padrão */
    .dropdown-menu {
        display: none;
        position: absolute;
        z-index: 1000;
        top: 100%;
        left: 0;
    }

    /* Mostra ao hover do item pai */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }

    /* Transição suave */
    .dropdown-menu {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete;
    }

    .nav-item.dropdown:hover .dropdown-menu {
        opacity: 1;
        transform: translateY(0);
    }

    /* Label funciona como link normal em desktop */
    label.dropdown-toggle {
        cursor: pointer;
        user-select: none;
    }
}

/* ===== DROPDOWN MENU - MOBILE (CHECKBOX) ===== */
@media (max-width: 576px) {
    /* Esconde dropdown por padrão */
    .dropdown-menu {
        display: none;
        position: static;
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Mostra quando checkbox marcado */
    .dropdown-toggle-checkbox:checked ~ .dropdown-menu {
        display: block;
    }

    /* Estilo do label como botão */
    label.dropdown-toggle {
        cursor: pointer;
        user-select: none;
        display: block;
        width: 100%;
    }

    /* Seta rotaciona quando aberto */
    .dropdown-toggle::after {
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .dropdown-toggle-checkbox:checked ~ label.dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* ===== NAVBAR COLLAPSE - MOBILE ===== */
@media (max-width: 576px) {
    /* Esconde menu por padrão */
    .navbar-collapse {
        display: none !important;
        width: 100%;
        margin-top: 1rem;
    }

    /* Mostra quando checkbox marcado */
    .navbar-toggle-checkbox:checked ~ .navbar-collapse {
        display: block !important;
    }

    /* Estilo do toggler como botão */
    label.navbar-toggler {
        cursor: pointer;
        padding: 0.25rem 0.75rem;
        font-size: 1.25rem;
        line-height: 1;
        background-color: transparent;
        border: 1px solid rgba(0,0,0,.1);
        border-radius: 0.25rem;
        display: inline-block;
    }

    label.navbar-toggler:hover {
        background-color: rgba(0,0,0,.05);
    }
}

/* Desktop: menu sempre visível, toggler escondido */
@media (min-width: 577px) {
    .navbar-toggler {
        display: none !important;
    }

    .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}

/* ===== MELHORIAS VISUAIS ===== */

/* Label dropdown precisa manter estilos do nav-link */
label.nav-link {
    margin-bottom: 0;
    display: inline-block;
}

/* Garantir que dropdown-toggle tenha a seta */
.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* Animação da seta ao abrir (desktop hover) */
@media (min-width: 577px) {
    .dropdown-toggle::after {
        transition: transform 0.3s ease;
    }

    .nav-item.dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

/* Ícone do navbar-toggler (3 barras) */
.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

/* Sobrescrever estilos do menu de navegação para funcionar com label */
#menu-navegacao label.nav-link {
    color: #fff;
    font-size: 16px;
    padding-top: 10px;
    margin-top: -20px;
    margin-bottom: -8px;
    padding-left: 10px;
    padding-right: 10px;
}

#menu-navegacao label.nav-link:hover {
    color: #fff;
    font-size: 16px;
    background-color: #507b81;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    margin-top: -25px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Garantir posicionamento correto do dropdown */
.nav-item.dropdown {
    position: relative;
}