/* Variáveis para fácil gestão das cores */
:root {
    --color-primary: #00bf63;
    /* Verde principal original */
    --color-highlight: #00bf63;
    /* Verde para 'Simulador' selecionado */
    --color-link-default: #7ed957;
    /* Verde claro para outros links */
    --color-secondary: #000;
    /* Preto para texto */
    --color-background: #fff;
    --color-light-gray: #f2f2f2;
}

body {
    font-family: system-ui, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--color-secondary);
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- HEADER (DUAS LINHAS) --- */
.header {
    display: flex;
    flex-direction: column;
    padding: 15px 40px;
}

/* PRIMEIRA LINHA: Logo e Menu */
.header-top {
    display: flex;
    justify-content: space-between; /*  flex-end  space-between */
    /* Alinha os itens à direita */
    align-items: center;
    gap: 15px;
    /* Espaço entre o botão e o avatar */
    width: 100%;
    margin-bottom: 10px;
    /* Espaço entre as duas linhas do header */
}

/* SEGUNDA LINHA: Logo e Menu */
.header-bottom {
    display: flex;
    justify-content: flex-end; /* Coloca o Logo à Esquerda e o Menu à Direita */
    /* CORREÇÃO: Alinha os itens pela linha de base do texto (importante para tamanhos de fonte diferentes) */
    align-items: center; /* baseline center */
    width: 100%;
}

.register-button {
    /* Fundo verde e texto branco conforme pedido */
    background-color: var(--color-primary);
    color: var(--color-background);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}

/* NOVO: Efeito Mouse Over no Botão de Registo */
.register-button:hover {
    background-color: var(--color-background);
    color: var(--color-primary);
}

.avatar-button {
    /* Fundo verde e texto branco */
    background-color: var(--color-primary);
    color: var(--color-background);
    border: none;    
    /* === Usar dimensões fixas === */
    width: 40px;      /* Define uma largura fixa (ajuste este valor) */
    height: 40px;     /* Define uma altura fixa igual à largura */    
    padding: 0;       /* Remove o padding, pois agora usamos width/height */    
    /* === PROPRIEDADES DE CÍRCULO E CENTRAGEM === */
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    /* Garante que o texto (iniciais) fique centrado perfeitamente */
    display: flex; /* Adicione display: flex se não estiver já definido */
    justify-content: center;
    align-items: center;
}

/* NOVO: Efeito Mouse Over no Botão de Registo */
.avatar-button:hover {
    background-color: var(--color-background);
    color: var(--color-primary);
}

/* --- LINKS DE NAVEGAÇÃO (MENU) --- */
.nav-links {
    display: flex;
    /* ALTERADO: Dobro do espaçamento (era 30px, agora 60px) */
    gap: 60px;
}

.nav-links a {
    /* NOVO: Removemos o sublinhado default aqui para o simularmos com border-bottom */
    text-decoration: none;

    /* NOVO: Simular sublinhado com maior espaçamento */
    border-bottom: 3px solid;
    /* Inicialmente transparente */
    padding-bottom: 8px;
    /* Espaço entre o texto e a linha */
}

/* Estilos Padrão para "Contacto" e "Quem Somos"
.nav-links a:not(:first-child) {*/
.nav-links a:not(:nth-child(2)) {
    font-size: 21px;
    color: var(--color-link-default);
}

/* Estilo Padrão (Simulado como "Selecionado") para "Simulador"
.nav-links a:first-child { */
.nav-links a:nth-child(2) {
    font-size: 21px;
    color: var(--color-highlight);
    font-weight: bold;
}

/* EFEITOS MOUSE OVER (HEADER) */

/* Mouse Over para "Contacto" e "Quem Somos"
.nav-links a:not(:first-child):hover { */
.nav-links a:not(:nth-child(2)):hover {
    /* Animação de 27px -> 32px */
    /* MANTÉM a cor original (var(--color-link-default)) e o sublinhado */
    color: var(--color-link-default);
    border-bottom: 0px solid;
}

/* Mouse Over para "Simulador"
.nav-links a:first-child:hover { */
.nav-links a:nth-child(2):hover {
    /* Animação de 32px -> 41px */
    /* MANTÉM a cor original (var(--color-highlight)) e o sublinhado */
    color: var(--color-highlight);
    border-bottom: 0px solid;
}

/* --- FOOTER --- */
.footer {
    padding: 20px 50px;
    background-color: var(--color-background);
    border-top: 1px solid var(--color-light-gray);
    display: flex;
    justify-content: center;
    gap: 40px;
}

.footer a {
    /* NOVIDADE: Tamanho de texto 21px para o footer */
    font-size: 19px;
    color: var(--color-link-default);
    font-weight: 500;
    /* ALTERADO: Remover o sublinhado */
    text-decoration: none;
}

/* NOVIDADE: Efeito Mouse Over no Footer */
.footer a:hover {
    color: var(--color-primary);
    /* Animação de 21px -> 27px */
    /* ALTERADO: Retirar o sublinhado no mouseover */
    text-decoration: none;
}