/*
 * 1. Reseta o padding e margin padrão do navegador
 * 2. Define box-sizing para facilitar o layout
 */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Jost", sans-serif;
}


/* * Configuração para o "Sticky Footer" usando Flexbox 
 * Garante que o rodapé fique no fundo da viewport em páginas curtas.
 */

html,
body {
    min-height: 100%;
    background-color: #a0a0a0;
    scroll-behavior: smooth;
}

#page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Ocupa no mínimo 100% da altura da viewport */
    background-color: #a0a0a05b;
}

#content-wrap {
    flex-grow: 1;
    /* Garante que o conteúdo principal ocupe o espaço restante */
    padding-bottom: 50px;
    /* Adiciona espaço para evitar que o conteúdo toque no rodapé (Ajuste conforme a altura do seu rodapé) */
}


/*
 * Limita a Largura do Conteúdo e Centraliza
 * Aplicado a header, main, e footer
 */

.content-wrapper {
    max-width: 1280px;
    /* Largura máxima desejada para o conteúdo */
    margin-left: auto;
    /* Centraliza o bloco */
    margin-right: auto;
    /* Centraliza o bloco */
    padding: 0 20px;
    /* Adiciona um pequeno padding lateral para respiro em telas menores */
    width: 100%;
    /* Garante que ocupe 100% da largura do pai (até o max-width) */
}


/* --- Estilos Visuais Básicos (Opcional, apenas para visualizar a estrutura) --- */

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
}


/* --- ESTILOS DO HEADER/NAV (BASE E DESKTOP) --- */

header {
    background-color: #4382F0;
    color: white;
    padding: 10px 0;
}

.header-content {
    display: flex;
    /* Habilita Flexbox para alinhamento horizontal */
    justify-content: space-between;
    /* Logo à esquerda, menu/sanduíche à direita */
    align-items: center;
    /* Alinha verticalmente */
}

.logo h1 {
    font-size: 1.5em;
    margin: 0;
}

.logo img {
    max-width: 135px;
}


/* Oculta o botão sanduíche por padrão (Desktop) */

.hamburger-menu {
    display: none;
}


/* Estilos da Navegação (Desktop) */

.main-nav {
    display: flex;
    /* Habilita Flexbox dentro do nav */
    align-items: center;
}

.nav-links,
.lang-switcher {
    list-style: none;
    /* Remove bolinhas */
    margin: 0;
    padding: 0;
    display: flex;
    /* Alinha itens horizontalmente */
    align-items: center;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    transition: background-color 0.3s;
}


/* Efeito de Link Ativo */

.nav-links li a.active {
    background-color: rgba(255, 255, 255, 0.2);
    /* Fundo sutil para o link ativo */
    border-radius: 4px;
}

.nav-links li a:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}


/* --- Estilos do Seletor de Idiomas (Desktop) --- */

.lang-switcher {
    margin-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 20px;
    position: relative;
    /* Importante para o posicionamento do dropdown */
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    /* Ajusta o padding para o separador */
    display: flex;
    /* Para centralizar o "Idioma" */
    align-items: center;
}

.lang-main {
    color: #ffffff;
    cursor: pointer;
    padding: 10px 15px;
    transition: background-color 0.3s;
}

.lang-main:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}


/* Esconde o dropdown por padrão no Desktop */

.lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    /* Posição abaixo do botão "Idioma" */
    right: 0;
    z-index: 10;
    background-color: #4382F0;
    min-width: 150px;
    padding: 5px 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    border-radius: 0 0 4px 4px;
}


/* Mostra o dropdown quando a classe 'open' é adicionada via JS */

.lang-switcher.open .lang-dropdown {
    display: block;
}

.lang-dropdown li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lang-dropdown a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 8px 15px;
    font-size: 0.9em;
}

.lang-dropdown a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.lang-dropdown img {
    max-width: 20px;
}

main {
    padding: 40px 0;
    background-color: #ffffff;
}


/* --- Estilos do Rodapé (Desktop e Default) --- */

footer {
    background-color: #4382F0;
    ;
    color: #ffffff;
    padding: 15px 0;
}

#footer-content {
    /* 1. Layout Padrão (Desktop): Items alinhados horizontalmente com espaçamento */
    display: flex;
    justify-content: space-between;
    /* Espaçamento entre o copyright e os links */
    align-items: center;
    /* Alinha verticalmente no centro */
    flex-wrap: wrap;
    /* Permite quebras de linha em telas muito pequenas */
}

.copyright p {
    margin: 0;
    /* Remove margens padrão do parágrafo */
    font-size: 0.9em;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    margin-left: 20px;
    /* Espaçamento entre os links */
    font-size: 0.9em;
}

.footer-links a:hover {
    color: white;
    text-decoration: underline;
}


/* --- Media Query para Mobile (Telas Menores que 768px) --- */

@media (max-width: 768px) {
    /* 1. Botão Sanduíche (Aparece no Mobile) */
    .hamburger-menu {
        display: block;
        /* Mostra o botão sanduíche */
        background: none;
        border: none;
        padding: 5px;
        cursor: pointer;
        z-index: 1001;
        /* Garante que fique acima do menu aberto */
    }
    .hamburger-menu span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: white;
        margin: 5px 0;
        transition: transform 0.3s, opacity 0.3s;
    }
    /* 2. Menu Fechado (Escondido) */
    .main-nav {
        /* Ocupa a tela inteira quando aberto, mas escondido por padrão */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #4382F0;
        z-index: 1000;
        /* Configuração de centralização vertical e horizontal */
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Centraliza verticalmente */
        align-items: center;
        /* Centraliza horizontalmente */
        /* Esconde o menu fora da tela */
        transform: translateX(100%);
        transition: transform 0.5s ease-in-out;
    }
    /* 3. Classe para ABRIR o Menu */
    .main-nav.open {
        transform: translateX(0);
    }
    /* 4. Layout dos Links (Centralizados em Coluna) */
    .nav-links,
    .lang-switcher {
        flex-direction: column;
        text-align: center;
        margin: 15px 0;
        border-left: none;
        padding-left: 0;
    }
    /* Garante que o dropdown mobile seja sempre visível e em linha com o menu */
    .lang-switcher,
    .lang-dropdown,
    .lang-switcher.open .lang-dropdown {
        display: block;
        position: static;
        /* Remove o posicionamento absoluto do desktop */
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        background: none;
        padding: 0;
    }
    .lang-main {
        display: none;
        /* Esconde o botão toggle "Idioma" no mobile */
    }
    .lang-dropdown li {
        margin: 5px 0;
    }
    .lang-dropdown a {
        font-size: 1.4em;
        /* Aumenta o tamanho para fácil toque */
        padding: 5px;
    }
    .nav-links li {
        margin: 10px 0;
    }
    .nav-links li a,
    .lang-switcher li {
        font-size: 1.4em;
        /* Aumenta o tamanho para fácil toque */
        padding: 10px;
    }
    /* Mostra TODOS os idiomas no mobile */
    .lang-switcher li:not(.lang-main) {
        display: block;
    }
    .lang-switcher li.lang-main {
        margin-bottom: 20px;
    }
    /* Efeito de Link Ativo no Mobile */
    .nav-links li a.active {
        border-bottom: 2px solid white;
        background-color: transparent;
        border-radius: 0;
    }
    /* Estilos do ícone do menu aberto (Opcional: transforma em 'X') */
    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
    /* O padrão é que 768px e menos se refere a telas inferiores a 769px */
    #footer-content {
        /* Layout Mobile: Troca para coluna e centraliza */
        flex-direction: column;
        text-align: center;
    }
    .footer-links {
        /* Define a ordem para aparecer primeiro (acima) */
        order: 1;
        margin-bottom: 10px;
    }
    .footer-links a {
        /* Espaçamento horizontal entre os links */
        margin: 0 8px;
        display: inline-block;
    }
    .copyright {
        /* Define a ordem para aparecer por último (abaixo) */
        order: 2;
        margin-top: 10px;
    }
}