/* ======================
   Estilo dos links do menu
   ====================== */
.menu-link {
  font-family: 'Poppins', sans-serif;   /* Fonte moderna e legível */
  font-weight: 500;                     /* Peso médio para melhor leitura */
  color: #5a3000 !important;            /* Cor marrom escuro com prioridade */
  position: relative;                   /* Para possíveis efeitos posicionados */
  padding: 10px 16px;                  /* Espaçamento interno confortável */
  display: flex;                       /* Flexbox para alinhar ícones e texto */
  align-items: center;                 /* Centraliza verticalmente */
  justify-content: center;             /* Centraliza horizontalmente */
  gap: 6px;                           /* Espaço entre ícone e texto */
  transition: all 0.3s ease;          /* Transição suave para hover */
  line-height: 1.2;                   /* Altura da linha para legibilidade */
}

/* ======================
   Efeito hover nos links do menu
   ====================== */
.menu-link:hover {
  color: #b84f00 !important;                 /* Cor de destaque laranja */
  background-color: rgba(255, 234, 200, 0.6); /* Fundo bege translúcido */
  border-radius: 25px;                        /* Bordas arredondadas */
  transform: translateY(-1px);                /* Leve elevação no hover */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06); /* Sombra sutil */
}

/* ======================
   Estilo dos ícones dentro dos links do menu
   ====================== */
.menu-link i {
  font-size: 1rem;                      /* Tamanho padrão para ícones */
  transition: transform 0.3s ease;     /* Animação suave para transformação */
}

/* ======================
   Efeito hover para os ícones dos links do menu
   ====================== */
.menu-link:hover i {
  transform: rotate(-5deg) scale(1.15); /* Gira e aumenta o ícone no hover */
}

/* ======================
   Estilo do menu dropdown (submenu)
   ====================== */
.dropdown-menu {
  background: linear-gradient(90deg, #fff4db, #ffe8c2); /* Fundo degradê amarelo/bege */
  border: none;                 /* Remove borda padrão */
  border-radius: 12px;          /* Bordas arredondadas */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra mais destacada */
  font-family: 'Poppins', sans-serif; /* Mantém a mesma fonte */
}

/* ======================
   Estilo dos itens dentro do dropdown
   ====================== */
.dropdown-item {
  padding: 10px 18px;           /* Espaçamento confortável */
  color: #5a3000;               /* Cor marrom escuro */
  font-weight: 500;             /* Peso médio */
  display: flex;                /* Flexbox para alinhamento */
  align-items: center;          /* Centraliza verticalmente */
  gap: 8px;                    /* Espaço entre ícones/textos */
  border-radius: 8px;           /* Bordas arredondadas */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave */
}

/* ======================
   Efeito hover e foco nos itens do dropdown
   ====================== */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #ffe1b8 !important; /* Fundo amarelo claro */
  color: #b84f00 !important;            /* Texto laranja destacado */
}

/* ======================
   Ajustes para telas maiores (desktop)
   ====================== */
@media (min-width: 992px) {
  /* Espaçamento entre os itens da navbar */
  .navbar-nav {
    gap: 0.3rem;
  }
}

/* ======================
   Estilo do texto dentro da navbar-brand (logo e texto)
   ====================== */
.navbar-brand span {
  font-size: 1.1rem;           /* Tamanho da fonte */
  color: #963800;              /* Cor marrom escuro */
}

/* ======================
   Ajustes para navbar-brand em telas maiores
   ====================== */
@media (min-width: 992px) {
  .navbar-brand {
    flex-direction: row !important; /* Alinha logo e texto na horizontal */
    gap: 10px;                      /* Espaço entre logo e texto */
    font-size: 1.4rem;              /* Aumenta tamanho da fonte */
  }

  .navbar-brand span {
    line-height: 1;                 /* Ajusta altura da linha */
    display: inline;                /* Exibe texto em linha */
  }
}
