/* Container para centralizar o conteúdo */
.container {
    max-width: 100vw; /* Largura máxima do seu conteúdo */
    margin: 0 auto;    /* Centraliza o container */
    padding: 0 var(--spacing-md); /* Padding nas laterais */
}

/* Estilos do Cabeçalho Principal */
.header {
    background-color: var(--color-moss);
    padding: var(--spacing-md) 0; /* Padding superior e inferior */
    font-family: var(--font-family-primary);
    color: var(--color-sand); /* Cor do texto no cabeçalho */
    top: 0;
    z-index: 1000; /* Garante que o cabeçalho fique acima de outros elementos */
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.3s ease;
}

.header .container {
    display: flex;
    justify-content: space-between; /* Espaça logo e navegação */
    align-items: center; /* Alinha verticalmente */
}

/* Estilos da Navegação Principal */
.nav__toggle {
    display: none; /* Esconde o botão de toggle por padrão em telas maiores */
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    position: relative;
    z-index: 1001; /* Acima do menu para ser clicável */
}

.nav__toggle-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-sand);
    position: relative;
    transition: background-color 0.3s ease;
}

.nav__toggle-icon::before,
.nav__toggle-icon::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--color-sand);
    position: absolute;
    transition: transform 0.3s ease, top 0.3s ease;
}

.nav__toggle-icon::before {
    top: -8px;
}

.nav__toggle-icon::after {
    top: 8px;
}

/* Animação do ícone do hambúrguer para "X" */
.nav__toggle[aria-expanded="true"] .nav__toggle-icon {
    background-color: transparent; /* Esconde a barra do meio */
}

.nav__toggle[aria-expanded="true"] .nav__toggle-icon::before {
    transform: translateY(8px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}


.nav__list {
    display: flex; /* Exibe os itens em linha em telas maiores */
    gap: var(--spacing-lg); /* Espaçamento entre os itens */
}

.nav__link {
    color: var(--color-sand);
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    transition: color 0.3s ease;
}

.nav__link:hover,
.nav__link:focus {
    color: var(--color-olivegreen); /* Exemplo de hover */
}

/* Media Queries para Responsividade (Mobile First) */
@media (max-width: 768px) { /* Exemplo: para telas menores que 768px */
    .nav__toggle {
        display: block; /* Mostra o botão de toggle */
    }

    .nav__list {
        max-height: 0;
        overflow: hidden;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-moss);
        border-bottom-left-radius: var(--font-size-2xl);
        border-bottom-right-radius: var(--font-size-2xl);
        padding: 0;
        z-index: 999;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    }


    .nav__toggle[aria-expanded="true"] + .nav__list {
        max-height: 500px; /* Ou maior, depende da altura máxima real */
        padding: var(--spacing-md) 0;
    }


    .nav__item {
        text-align: center;
        padding: 0.8rem 0;
    }

    .nav__link {
        display: block; /* Faz o link preencher o item */
        padding: 0.5rem var(--spacing-md);
    }
}