header{
    position:fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 100px;
    background-color: #211452;
    z-index: 99;
    font-weight: bold;
}
header .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 12px;
    gap: 8px;
}

/* As duas divs .logo (#logo-a com logo-uerj.svg 100x100 e #logo-b com
   logo-app.svg 340x80) não tinham NENHUMA regra de tamanho própria: o <img>
   ficava só com width="100%"/img-fluid dentro de uma div sem largura definida,
   o que faz o navegador cair para o tamanho intrínseco do SVG (até 340px de
   largura para a logo-app). Em telas estreitas isso somado ao menu ultrapassa
   a largura da viewport e "quebra" o cabeçalho - e como ele é fixed no topo em
   TODAS as páginas (layouts/app.blade.php e layouts/public.blade.php), o
   problema aparecia em qualquer tela, não só na home. Fixamos a altura da
   logo (não a largura) e deixamos a largura seguir a proporção da imagem, com
   clamp() para reduzir suavemente em telas pequenas em vez de depender de
   breakpoints fixos. */
header .logo {
    display: flex;
    align-items: center;
    height: clamp(32px, 9vw, 70px);
    flex: 0 0 auto;
}

header .logo img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

header .navbar {
    background-color: #ffffffbb;
    border-radius: 10px;
    color: #211452;
    flex-shrink: 0;
    /* padding: 0px 0px; */
}

/* O botão do menu (hambúrguer) usa a classe "navbar-light" do Bootstrap, cujo
   ícone padrão é escuro (pensado para fundos claros) - sobre o fundo roxo
   escuro do cabeçalho ele fica praticamente invisível, "sumindo" o único
   acesso ao menu em telas estreitas (abaixo de 992px, quando o menu
   horizontal colapsa para este botão). Redesenhamos o botão com o mesmo
   estilo de pílula clara usado pelo .navbar (fundo #ffffffbb) e um ícone na
   cor roxa do tema, deixando-o visível e coerente com o restante do
   cabeçalho. */
header .navbar-toggler {
    background-color: #ffffffbb;
    border-color: transparent;
}

header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33, 20, 82, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

header .navbar a {
    color: #211452; 
    border-radius: 10px; 
    transition: background-color 0.3s, color 0.3s; 
}

header .navbar a:hover {
    background-color: #211452; 
    color: #ffffff; 
}