/* /assets/css/header.css */

/* pílula */
#navbar .wrap {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 9999px;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .25);
}

/* navegação / CTA */
#navbar nav {
    gap: clamp(12px, 2.2vw, 28px)
}

#navbar nav a {
    font-size: clamp(12px, 1.0vw, 16px);
    line-height: 1.2;
    white-space: nowrap
}



/* Logo com gradiente + shine igual ao CTA */
.logo-is-gradient {
    display: inline-block;
    height: clamp(34px, 5.2vw, 56px);
    aspect-ratio: 4/1;
    background-image: linear-gradient(135deg, var(--brand-a), var(--brand-b));
    /* igual ao CTA */
    -webkit-mask: url("../../Imagens/logo.svg") center/contain no-repeat;
    mask: url("../../Imagens/logo.svg") center/contain no-repeat;
    position: relative;
    overflow: hidden;
    /* necessário pro brilho */
    transition: transform .25s ease, filter .25s ease, background .25s ease;
    /* já tinha */
}

/* Shine no hover (mesma lógica do .btn-shine) */
.logo-is-gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    left: -120%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-22deg);
    transition: .8s;
}

.logo-is-gradient:hover::after {
    left: 120%;
}

/* Tamanho consistente das bandeiras */

.flag-fixed {
    width: 28px;
    /* ajuste aqui se quiser 26/30 etc. */
    height: 28px;
    border-radius: 9999px;
    object-fit: cover;
    /* evita distorção */
    display: block;
}

@media (max-width: 767px) {
    .navbar-pill-container {
        /* Define a largura para 100% menos um padding total de 20px (10px de cada lado) */
        /* Isso garante que sempre haja um respiro e impede a rolagem */
        width: calc(100% - 20px) !important;

        /* Centraliza a pílula */
        margin-left: auto !important;
        margin-right: auto !important;

        /* Garante que nenhum conteúdo interno vaze horizontalmente */
        overflow-x: hidden !important;

        /* Adiciona um padding nas laterais, caso o do HTML não esteja funcionando */
        padding-left: 10px !important;
        padding-right: 10px !important;

        /* Para depuração: adicione uma borda temporária para ver onde ela termina */
        /* border: 1px solid red !important; */
    }

    /* Também vamos garantir que o wrapper externo da navbar não tenha overflow */
    #navbar {
        overflow-x: hidden !important;
    }
}