/* ===============================
   NAVBAR PRINCIPAL
   =============================== */

/* Estilo da barra de navegação */
.navbar {
    position: absolute;                       /* Fixa a navbar na posição inicial do fluxo */
    display: flex;                            /* Usa Flexbox para organizar itens */
    justify-content: space-between;           /* Espaço entre logo e links */
    align-items: center;                      /* Alinha verticalmente ao centro */
    width: 100%;                              /* Ocupa toda a largura */
    padding: 2rem 5.1rem;                       /* Espaçamento interno */
    gap: 8.4rem;                              /* Espaçamento entre elementos filhos */
    z-index: 3;                               /* Fica acima do conteúdo normal */
}

/* Logo da navbar */
#logo {
    width: 1.7rem;                            /* Largura fixa pequena */
}

/* Lista de itens de navegação */
.nav-list {
    display: flex;                            /* Flex para alinhar horizontalmente */
    align-items: flex-start;                  /* Alinha ao topo da lista */
    list-style: none;                         /* Remove bullets */
    gap: 4rem;                                /* Espaçamento entre itens */
}

/* Linha horizontal dentro da nav-list (normalmente escondida) */
.nav-list hr { display: none; }

/* Itens individuais da navbar */
.nav-list .item {
    display: flex;
    align-items: center;                      /* Alinha ícone e texto verticalmente */
    color: var(--tertiary-color);              /* Cor principal */
    text-decoration: none;                    /* Sem sublinhado */
    font-family: "Inter", sans-serif;         /* Fonte personalizada */
    gap: 1rem;                                /* Espaçamento interno entre ícone e texto */
    transition: 0.2s ease;                    /* Suaviza alterações de cor */
}

/* Efeito hover/focus nos itens da navbar */
.nav-list .item:hover,
.nav-list .item:focus {
    color: var(--highlight-color);            /* Muda cor ao passar o mouse ou focar */
}

/* Span dentro dos itens (normalmente texto extra) */
.nav-list .item span { display: none; }

/* Menu mobile (hambúrguer) */
.mobile-menu { display: none; cursor: pointer; }

/* Barras do hambúrguer */
.mobile-menu div {
    width: 25px;                               /* Largura da barra */
    height: 3px;                               /* Altura da barra */
    background: var(--primary-color);          /* Cor da barra */
    margin: 5px auto;                          /* Espaçamento entre barras */
    transition: all 0.3s ease-in-out;          /* Animação suave para transformação */
}

/* ===============================
   MEDIA QUERIES
   =============================== */

/* Ajuste para telas menores que 1150px */
@media (max-width:1150px) {
    .navbar { padding: 2rem 5rem; }           /* Reduz o padding horizontal */
}

/* Ajustes para telas menores que 768px (mobile) */
@media (max-width:768px) {
    .navbar {
        position: fixed;                      /* Fixa no topo */
        z-index: 9999;                        /* Sempre acima de todo o conteúdo */
        transition: background 0.3s ease;     /* Suaviza mudança de background */
    }

    /* Navbar muda de cor quando a página é rolada */
    .navbar.scrolled { background: var(--background-color); }

    /* Lista de navegação mobile */
    .nav-list {
        position: fixed;                       /* Fixa na tela */
        left: -100%;                            /* Esconde fora da tela inicialmente */
        top: 0;                                 /* Início do topo */
        gap: 1rem;                              /* Reduz espaçamento */
        padding: 7rem 5rem 5rem 5rem;           /* Espaçamento interno */
        flex-direction: column;                 /* Empilha verticalmente */
        align-items: start;                     /* Alinha à esquerda */
        background: var(--background-color);    /* Cor de fundo */
        width: 100%;
        height: 100%;
        text-align: center;
        transition: 0.3s;                       /* Animação de entrada */
    }

    /* Linha horizontal aparece no mobile */
    .nav-list hr {
        display: block;
        width: 100%;
        border: .5px solid var(--secondary-color);
        margin-bottom: 2rem;
    }

    /* Span dentro dos itens agora aparece */
    .nav-list .item span { display: block; }

    /* Quando menu mobile é ativado */
    .nav-list.active { left: 0; }              /* Mostra o menu na tela */

    /* Margem entre itens da lista mobile */
    .nav-list li { margin: 1rem 0rem; }

    /* Exibe botão hamburger */
    .mobile-menu { display: block; }

    /* Animação das barras do hamburger quando ativo */
    .mobile-menu.active .bar:nth-child(2) { opacity: 0; }
    .mobile-menu.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .mobile-menu.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Ajustes para telas menores que 481px */
@media (max-width:481px) {
    .navbar { padding: 2rem 2rem; }
    .nav-list { padding: 6rem 2rem 5rem 2rem; }
}

/* Ajustes para telas menores que 359px */
@media (max-width:359px) {
    .navbar { padding: 2rem 1rem; }
    .nav-list { padding: 6rem 1rem 5rem 1rem; }
}