/* headerindex.css - Estilos para o cabeçalho principal do site (frontend) */

/* Variáveis de cores (para consistência) */
:root {
    --cor-primaria-verde: #28a745;
    --cor-primaria-verde-hover: #218838;
    --cor-secundaria-roxo: #6f42c1;
    --cor-texto-escuro: #343a40;
    --cor-texto-claro: #ffffff;
    --cor-fundo-header: #ffffff; /* Fundo branco para o header */
    --cor-borda-header: #e0e0e0; /* Borda clara sutil */
}

/* Contêiner Principal do Header */
.main-site-header {
    margin: 0 auto;
    max-width: 105vh;
    border-radius: 12px;
    background-color: var(--cor-fundo-header);
    border-bottom: 1px solid var(--cor-borda-header);
    padding: 8px 20px; /* Padding vertical reduzido para mais compacto */
    display: flex;
    justify-content: space-between; /* Logo de um lado, menu do outro */
    align-items: center; /* Alinhamento vertical */
    box-shadow: 0 1px 6px rgba(0,0,0,0.04); /* Sombra mais suave */
    flex-wrap: wrap; /* Permite que os itens quebrem linha em telas menores */
    
}

/* Logo */
.navbar-logo-img {
    max-height: 60px; /* ALTURA DA LOGO AJUSTADA (antes 40px) */
    width: auto;
    display: block;
}

/* Menu de Autenticação (Entrar/Cadastrar / Bem-vindo/Sair) */
.header-auth-menu-simple {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* Impede quebra de linha em desktop */
    gap: 12px; /* Espaçamento entre itens (reduzido) */
}

/* Estilo do texto "Bem-vindo(a), [email]!" */
.header-auth-menu-simple .text-dark.fw-bold { /* Mantendo as classes do Bootstrap para o texto principal */
    font-size: 0.9em; /* Fonte ligeiramente menor */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 140px; /* Limita a largura */
    color: var(--cor-texto-escuro) !important; /* Força a cor do texto */
}
.header-auth-menu-simple .text-success { /* A cor do email */
    color: var(--cor-primaria-verde) !important; /* Força a cor verde */
}

/* Estilo dos Botões Entrar/Cadastrar/Sair */
.header-auth-menu-simple .btn.btn-outline-success.btn-sm,
.header-auth-menu-simple .btn.btn-success.btn-sm {
    font-size: 0.85em; /* Fonte do botão menor */
    padding: 5px 10px; /* Padding do botão reduzido */
    border-radius: 4px; /* Cantos ligeiramente menos arredondados */
}
.header-auth-menu-simple .btn i {
    font-size: 0.85em; /* Ícone do botão menor */
    margin-right: 4px;
}
.header-auth-menu-simple .btn-outline-success {
    color: var(--cor-primaria-verde) !important;
    border-color: var(--cor-primaria-verde) !important;
}
.header-auth-menu-simple .btn-outline-success:hover {
    background-color: var(--cor-primaria-verde);
    color: var(--cor-texto-claro) !important;
}
.header-auth-menu-simple .btn-success {
    background-color: var(--cor-primaria-verde) !important;
    border-color: var(--cor-primaria-verde) !important;
}
.header-auth-menu-simple .btn-success:hover {
    background-color: var(--cor-primaria-verde-hover) !important;
    border-color: var(--cor-primaria-verde-hover) !important;
}

/* --- Media Queries para Responsividade --- */

@media (max-width: 767.98px) {
    .main-site-header {
        flex-direction: row; /* Logo e menu em colunas */
        padding: 8px 15px; /* Padding ajustado */
    }
    .navbar-logo-img {
        max-height: 60px; /* Logo menor em mobile */
    }
    .header-auth-menu-simple {
        flex-direction: row; /* Itens do menu lado a lado */
        justify-content: end;
        margin-top: 5px;
        gap: 8px; /* Espaçamento reduzido */
    }
    .header-auth-menu-simple .text-dark.fw-bold {
        font-size: 0.8em; /* Fonte menor */
        white-space: normal; /* PERMITE QUEBRA DE LINHA */
        max-width: 100%; /* Ocupa largura total */
    }
    .header-auth-menu-simple .btn.btn-outline-success.btn-sm,
    .header-auth-menu-simple .btn.btn-success.btn-sm {
        font-size: 0.8em; /* Fonte do botão menor */
        padding: 4px 8px; /* Padding do botão menor */
    }
}

@media (max-width: 480px) {
    .navbar-logo-img {
        max-height: 50px; /* Logo ainda menor */
    }
    .header-auth-menu-simple {
        gap: 6px;
    }
    .header-auth-menu-simple .text-dark.fw-bold {
        font-size: 0.75em;
    }
    .header-auth-menu-simple .btn.btn-outline-success.btn-sm,
    .header-auth-menu-simple .btn.btn-success.btn-sm {
        font-size: 0.75em;
        padding: 3px 6px;
    }
}