/* public/css/style.css */

/* --- :root - Variáveis de Cor e Padrões (Baseado no seu Logo) --- */
:root {
    --cor-principal-verde: #7FAF5C;  /* Verde da folha */
    --cor-acento-castanho: #8B5E3C;  /* Castanho da textura */
    --cor-acento-figo: #8A304F;      /* Roxo/Vermelho do interior do figo */
    --cor-acento-dourado: #D4AF37;   /* Dourado do garfo/texto */
    
    --cor-texto-principal: #333333; /* Cor escura para texto, mais suave que preto puro */
    --cor-fundo: #F9F9F9;          /* Um branco ligeiramente "sujo" para o fundo */
    --cor-branco: #FFFFFF;
    
    --sombra-padrao: 0 5px 10px rgba(0, 0, 0, 0.1);
    --borda-radius: 10px;
    --font-principal: 'Montserrat', sans-serif;
}

/* --- Reset Básico e Estilos Globais --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que padding e border não alterem a largura final */
}

body {
    font-family: var(--font-principal);
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    line-height: 1.7;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

main.container {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* --- Tipografia --- */
h1, h2, h3 {
    line-height: 1.4;
    margin-bottom: 1.4rem;
    font-weight: 900;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.6rem; color: var(--cor-acento-figo); }
h3 { font-size: 1.9rem; }
a {
    color: var(--cor-principal-verde);
    text-decoration: none;
    transition: color 0.4s ease;
}
a:hover {
    color: var(--cor-acento-castanho);
}


/* --- Componentes Reutilizáveis --- */

/* Botões */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--borda-radius);
    border: none;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.4s ease, transform 0.2s ease;
}

.btn:hover {
    transform: translateY(-3px); /* Efeito de levantar ao passar o rato */
}

.btn-primary {
    background-color: var(--cor-principal-verde);
    color: var(--cor-branco);
}
.btn-primary:hover {
    background-color: #6a9c4c; /* Um tom mais escuro do verde */
}

.btn-secondary {
    background-color: var(--cor-acento-dourado);
    color: var(--cor-texto-principal);
}
.btn-secondary:hover {
    background-color: #c09e32; /* Um tom mais escuro do dourado */
}


/* Cards (para itens do menu, por exemplo) */
.card {
    background: var(--cor-branco);
    border-radius: var(--borda-radius);
    box-shadow: var(--sombra-padrao);
    overflow: hidden; /* Garante que a imagem não saia dos cantos arredondados */
    margin-bottom: 40px;
}

.card-image {
    width: 100%;
    height: 300px;
    object-fit: cover; /* Faz a imagem cobrir o espaço sem distorcer */
}

.card-content {
    padding: 30px;
}

.card-title {
    margin-bottom: 30px;
}


/* Formulários (para login, reservas, etc.) */
.form-group {
    margin-bottom: 1.7rem;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 800;
}

.form-group input {
    width: 100%;
    padding: 14px;
    border: 1.2px solid #ccc;
    border-radius: var(--borda-radius);
}

/* --- Contentor Principal do Corpo da Página --- */

.body-container {
    /* Mais expandido que o error-container, ideal para conteúdo principal */
    max-width: 1100px; 
    
    /* Mantém o contentor centrado na página com margens no topo e em baixo */
    margin: 40px auto; 
    
    /* Espaçamento interno para o conteúdo não "colar" às bordas */
    padding: 40px; 
    
    /* Mantém o estilo de "cartão" que você definiu */
    background-color: var(--cor-branco);
    border-radius: var(--borda-radius);
    box-shadow: var(--sombra-padrao);
}

/* Estilos para títulos e parágrafos dentro do contentor principal, para consistência */
.body-container h1,
.body-container h2 {
    color: var(--cor-acento-castanho); /* Usando o castanho da marca para títulos */
    margin-top: 0;
}

/* --- Página de Erro --- */
.error-container {
    text-align: center;
    padding: 60px 50px; /* Ajustei o padding para ficar mais equilibrado */
    background-color: var(--cor-branco);
    border-radius: var(--borda-radius);
    box-shadow: var(--sombra-padrao);
    margin: 70px auto; /* Aumentei a margem superior para mais respiro */
    max-width: 800px; /* Limita a largura máxima, forçando o texto a quebrar linha e parecer mais centrado */
}

.error-container h1 {
    color: var(--cor-acento-figo);
    margin-bottom: 1.6rem; /* Aumenta o espaço abaixo do título */
    font-size: 2rem;
}

.error-container p {
    font-size: 1.4rem;
    line-height: 1.8;
}

/* --- Layout Específico --- */

/* Barra de Navegação / Header */
.navbar {
    background-color: var(--cor-branco);
    padding: 16px 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-logo img {
    height: 60px; /* Ajuste a altura do seu logo conforme necessário */
    width: auto;
}

.navbar-links a {
    margin-left: 30px;
    font-weight: 700;
}

/* Adicione estas regras ao final do seu style.css */

/* --- Estilos do Rodapé Fig-Mesa --- */

.site-footer {
    background-color: var(--cor-texto-principal); /* Fundo escuro consistente */
    color: var(--cor-fundo); /* Texto claro */
    padding: 50px 0;
    margin-top: 50px;
    text-align: center;
}

.site-footer a {
    color: var(--cor-principal-verde); /* Links com a cor principal do site */
    font-weight: 700;
    transition: color 0.4s ease;
}

.site-footer a:hover {
    color: var(--cor-branco);
}

.footer-section {
    margin-bottom: 28px;
}

.footer-section:last-child {
    margin-bottom: 0;
}

.footer-section h4 {
    color: var(--cor-acento-dourado); /* Título da seção em dourado */
    margin-bottom: 17px;
    font-size: 1.4rem;
}

.sponsorship-links a {
    margin: 0 12px;
    display: inline-block;
}

.copyright p {
    margin-bottom: 6px;
    color: #ccc; /* Um cinza claro para o texto secundário */
}


/* --- Modal de Privacidade (Estilo Fig-Mesa) --- */

.privacy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, 0.85); /* Fundo escuro do tema com transparência */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.privacy-overlay.active {
    opacity: 1;
    visibility: visible;
}

.privacy-modal {
    background: var(--cor-acento-castanho); /* Usando o castanho do tema */
    color: var(--cor-branco);
    border-radius: var(--borda-radius);
    padding: 36px;
    max-width: 460px;
    width: 90%;
    box-shadow: var(--sombra-padrao);
    transform: translateY(20px);
    transition: transform 0.3s ease;
    font-family: var(--font-principal); /* Usando a fonte padrão do site */
}

.privacy-overlay.active .privacy-modal {
    transform: translateY(0);
}

.privacy-modal h2 {
    color: var(--cor-branco);
    font-size: 1.6rem; /* 24px */
    margin-bottom: 1.2rem;
}

.privacy-modal p {
    color: var(--cor-fundo); /* Branco "sujo" para um contraste mais suave */
    line-height: 1.7;
    margin-bottom: 1.6rem;
}

.privacy-btn {
    background: var(--cor-principal-verde); /* Botão com a cor principal do site */
    color: var(--cor-branco);
    border: none;
    padding: 14px 27px;
    border-radius: 60px; /* Mais arredondado para um look moderno */
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.privacy-btn:hover {
    background: #6a9c4c; /* Verde mais escuro no hover */
    transform: translateY(-2px);
}

/* --- Ajustes para Desktop (Ecrãs com 768px ou mais de largura) --- */
@media (min-width: 768px) {

    /* Deixa o header mais alto aumentando o seu espaçamento interno */
    .navbar {
        padding-top: 30px;
        padding-bottom: 40px;
        transition: padding 0.3s ease; /* Efeito suave na transição */
    }

    /* Aumenta o tamanho do logo especificamente em ecrãs maiores */
    .navbar-logo img {
        height: 70px; /* Aumenta a altura de 50px para 60px */
        transition: height 0.3s ease; /* Efeito suave na transição */
    }

/* --- Tipografia --- */
.form h1, h2, h3 {
    line-height: 1.8;
    margin-bottom: 1.8rem;
    font-weight: 1200;
    }

.form h1 { font-size: 3.7rem; }
.form h2 { font-size: 2.8rem; color: var(--cor-acento-figo); }
.form h3 { font-size: 2.2rem; }
.form a {
    color: var(--cor-principal-verde);
    text-decoration: none;
    transition: color 0.4s ease;
    }

/* --- Componentes Reutilizáveis --- */

/* Botões */
.form .btn {
    display: inline-block;
    padding: 16px 30px;
    border-radius: var(--borda-radius);
    border: none;
    font-weight: 900;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.4s ease, transform 0.2s ease;
    }

}


/* ============================================= */
/* --- ESTILOS PARA DISPOSITIVOS MÓVEIS --- */
/* (Ecrãs com largura máxima de 768px) */
/* ============================================= */
@media (max-width: 768px) {

    /* --- AJUSTES NA BARRA DE NAVEGAÇÃO (HEADER) --- */
    
    .navbar .container {
        flex-direction: column;
        gap: 15px;
    }

    .navbar-logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .navbar-logo img {
        height: 120px; /* ALTERADO: Aumentado de 40px para 120px para maior destaque */
    }

    .navbar-logo h4 {
        display: none;
    }

    .navbar-links {
        justify-content: center;
        flex-wrap: wrap;
    }

    .navbar-links a {
        font-size: 0.9rem;
        padding: 6px 10px;
    }

    .body-container h1 {
        font-size: 3.0rem;
    }

    /* --- AJUSTES NO RODAPÉ (FOOTER) --- */

    .site-footer {
        padding: 48px 33px;
        margin-top: 20px;
        text-align: center; /* ADICIONADO: Garante que todo o conteúdo do rodapé fica centrado */
    }

    .copyright p {
        font-size: 1.4rem;
        line-height: 1.8;
    }

    .footer-section h4 {
        font-size: 1.4rem;
    }
}