/* ============================================================
   navbar.css  —  Ajustes de layout da navbar em dispositivos mobile
   Usado em: home/templates/partials/header.html
   ============================================================ */

@media (max-width: 991.98px) {

    /* Alinha logo + toggler + botão de perfil/login à esquerda */
    .navbar > .container {
        justify-content: flex-start !important;
        gap: 0.25rem !important;
        /* CORREÇÃO AQUI: Tem de ser 'wrap' para o menu conseguir cair para a linha de baixo quando aberto */
        flex-wrap: wrap !important;
    }

    /* Remove margem padrão do Bootstrap após a logo */
    .navbar-brand {
        margin-right: 0 !important;
    }

    /* Deixa o botão hambúrguer sem borda visível no mobile */
    .navbar-toggler {
        border: none;
        padding-left: 0;
    }

    /* Garante que o menu expandido apareça sempre abaixo de todos os elementos e ocupe 100% da largura */
    .navbar-collapse {
        order: 10;
        width: 100%;
        flex-basis: 100%; /* Força a quebra de linha para o conteúdo do menu */
        margin-top: 0.5rem; /* Dá um pequeno respiro entre a logo e os links do menu */
    }
}