/* ~~~~~~~~~~~~~~~~ Header Styles ~~~~~~~~~~~~~~~~~~~~ */

.navbar{
    background: transparent;   
    padding: 11px 12px 11px 12px;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled{
    background: var(--vox-color-fdr-secondary-medium-light);
    backdrop-filter: blur(20px); 
}

.navbar-toggler{
    padding: 0;
}

.nav-link{
    color: var(--vox-color-fdr-neutral-lighter);
}

.nav-link:hover {
    color: var(--vox-color-fdr-primary-medium);
}

.navbar-nav .nav-link.show {
    color: var(--vox-color-fdr-neutral-lighter);
}

.nav-link:focus{
    color: var(--vox-color-fdr-neutral-lighter);
}

.navbar-collapse{
    flex-grow: unset;
}

.dropdown-item{
    color: var(--vox-color-fdr-neutral-lighter);
}

.navbar-toggler{
    border: none;
}

.dropdown-menu{
    background: none;
    border: none;
}

/* Remove a seta padrão quando usar ícone próprio */
.dropdown-toggle-custom::after {
  display: none;
}

/* Rotaciona o ícone interno quando o dropdown estiver aberto */
.dropdown-toggle-custom i {
    display: inline-block;
    transition: transform 0.28s ease;
    transform-origin: center;
}

/* Quando o toggle tiver aria-expanded=true (ou o .dropdown estiver .show) invertemos a seta */
.dropdown-toggle-custom[aria-expanded="true"] i,
.dropdown.show .dropdown-toggle-custom i {
    transform: rotate(180deg);
}

/* Animação suave de abertura */
.dropdown-menu {
  animation: slideDown 0.3s ease-out;
  transform-origin: top;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile */
@media (max-width: 575px){
    .navbar-brand img{
        width: 79px;
        height: 38px;
    }
}

@media (min-width: 760px){
    .navbar {
        padding: 15px 24px 15px 24px;
    }
}

/* Desktop */
@media (min-width: 992px){
    .navbar-brand img{
       width: 94px;
       height: 45px;
       aspect-ratio: 94/45;
    }
    .nav-item a{
        font-size: 16px;
    }

    .dropdown-menu{
     background: var(--vox-color-fdr-neutral-lighter);
    }

    .dropdown-item{
     color: var(--vox-color-fdr-secondary-dark);
    }
    
}

@media (min-width: 1440px) {
    
    .navbar {
        padding: 18px 70px 18px 70px;
    }
}