/* Navbar DJ - ajustes responsivos */
.navbar-dj {
    backdrop-filter: saturate(120%) blur(2px);
}
/* Compensa a navbar fixed-top para não sobrepor conteúdo */
body {
    padding-top: 64px;
}
@media (min-width: 768px) {
    body { padding-top: 70px; }
}

.navbar-dj .navbar-brand .logo {
    max-height: 42px;
    height: auto;
}
.navbar-dj .nav-link {
    font-weight: 500;
    padding: .5rem .75rem;
}

/* Espaço interno quando o menu está aberto em mobile */
.navbar-dj .navbar-collapse {
    padding-top: .25rem;
    padding-bottom: .5rem;
}

/* Aparência do menu colapsado no mobile: fundo escuro e links legíveis */
@media (max-width: 767.98px) {
    /* Oculta o conteúdo colapsado padrão e o usernav no mobile */
    .navbar-dj .navbar-collapse { display: none !important; }
    .navbar-dj #usernavigation { display: none !important; }
    /* Oculta qualquer toggler legado no mobile (ex.: botão drawer antigo do Boost) */
    .navbar-dj .navbar-toggler,
    .navbar-dj .aabtn.d-block.d-md-none { display: none !important; }

    /* Logo sempre à esquerda no mobile */
    .navbar-dj .navbar-brand {
        margin-right: auto !important;
        margin-left: .25rem !important;
    }

    .navbar-dj .nav-link,
    .navbar-dj .dropdown-item { color: #fff !important; }
    .navbar-dj .nav-link:hover,
    .navbar-dj .dropdown-item:hover {
        color: #ffec8a !important;
        background: transparent !important;
    }
    /* Dropdowns empilhados dentro do collapse (caso seja reativado no futuro) */
    .navbar-dj .dropdown-menu {
        position: static !important;
        float: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding-left: 0;
        margin: 0;
    }
    .navbar-dj .dropdown-item {
        padding-left: 1.25rem;
    }
    .navbar-dj .navbar-brand .logo {
        max-height: 36px;
    }
    .navbar-dj .navbar-toggler { margin-left: .5rem; }

    /* Botão hambúrguer custom (maior, com blur e alto contraste) */
    .mobile-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 55px;
        border-radius: 12px;
        color: #fff;
        background: rgba(0, 0, 0, 0.35);
        border: 1.5px solid rgba(255,255,255,0.6);
        box-shadow:
            0 6px 16px rgba(0,0,0,0.35),
            inset 0 0 0 1px rgba(255,255,255,0.08);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
        line-height: 1;
        z-index: 1060; /* acima da navbar */
    }
    .mobile-menu-btn .fa-bars {
        font-size: 22px;
        line-height: 1;
    }
    .mobile-menu-btn:hover {
        background: rgba(0, 0, 0, 0.5);
        border-color: #fff;
        box-shadow:
            0 8px 20px rgba(0,0,0,0.4),
            inset 0 0 0 1px rgba(255,255,255,0.15);
    }
    .mobile-menu-btn:active {
        transform: scale(0.96);
    }
    .mobile-menu-btn:focus {
        outline: 2px solid rgba(255,255,255,0.65);
        outline-offset: 3px;
        box-shadow:
            0 8px 20px rgba(0,0,0,0.4),
            0 0 0 2px rgba(255,255,255,0.35);
    }
    .navbar-dj .navbar-nav {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    /* Esconde menus extras pesados no mobile (se existirem) */
    .navbar-dj .primary-navigation {
        display: none;
    }
}