:root {
    --dark-obsidian: #1a1a1a;
    --champagne-gold: #c5a059; /* Tom aproximado do seu logo */
    --pearl: #f4f4f4;
}

body {
    background-color: var(--dark-obsidian);
    color: var(--pearl);
    font-family: 'Raleway', sans-serif;
    line-height: 1.6;
}

.container {
    max-width: 1100px; /* Largura ideal para leitura e elegância */
    margin: 0 auto;    /* Isso centraliza o bloco na tela */
    padding: 0 20px;   /* Evita que o texto encoste na borda em celulares */
}

/* Ajuste nas seções para dar "respiro" (Whitespace) */
.section-padding {
    padding: 100px 0; /* Espaço generoso entre as seções */
}

h1, h2 {
    font-family: 'Playfair Display', serif;
    color: var(--champagne-gold);
}

.btn-gold {
    border: 1px solid var(--champagne-gold);
    color: var(--champagne-gold);
    padding: 12px 30px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-gold:hover {
    background: var(--champagne-gold);
    color: var(--dark-obsidian);
}

/* Reset básico para links */
a {
    text-decoration: none;
    color: inherit; /* Faz o link herdar a cor do texto pai */
    transition: 0.3s ease;
}

.navbar {
    display: flex;
    justify-content: space-between; /* Logo na esquerda, links na direita */
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2); /* Linha sutil dourada */
    position: relative; /* Necessário para o menu mobile se posicionar em relação a ela */
}

.logo img {
    height: 80px;    /* Altura ideal para manter o detalhe legível */
    width: auto;     /* Mantém a proporção original */
    display: block;
    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05); /* Um leve zoom ao passar o mouse */
}



.nav-links {
    display: flex;
    list-style: none; /* Remove as bolinhas do <ul> */
    gap: 30px;        /* Espaço entre os links do menu */
}

.nav-links a {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: var(--pearl);
}

.nav-links a:hover {
    color: var(--champagne-gold);
}

/* Configuração do Hero (Header) */
.hero {
    height: 100vh; /* Ocupa 100% da altura da tela */
    display: flex;
    align-items: center;      /* Centraliza verticalmente */
    justify-content: center;   /* Centraliza horizontalmente */
    text-align: center;        /* Centraliza o texto interno */
    
    /* Background setup */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/img/table.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efeito parallax sofisticado */

    color: var(--pearl);
}

.hero-content {
    max-width: 800px; /* Evita que o texto espalhe demais em telas ultra-wide */
    padding: 0 20px;
}


.hero h1 {
    font-size: 3.5rem; /* Tamanho imponente para o título */
    font-family: 'Playfair Display', serif;
    margin-bottom: 20px;
    letter-spacing: 3px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para ajudar na leitura */
    text-transform: uppercase;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: var(--pearl);
    opacity: 0.9;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.gallery-item {
    height: 350px; /* Altura da moldura */
    overflow: hidden;
    border: 1px solid rgba(197, 160, 89, 0.1);
    position: relative; /* Para garantir que o zoom não saia da borda */
}

/* Unificamos os estilos aqui */
.gallery-img {
    width: 100%;
    height: 100%; /* Agora ela obedece os 350px da .gallery-item */
    object-fit: cover; 
    filter: grayscale(20%);
    transition: transform 0.5s ease, filter 0.5s ease;
    cursor: pointer;
}

.gallery-img:hover {
    filter: grayscale(0%);
    transform: scale(1.05); /* Zoom elegante */
}

/* Container que organiza o texto e a imagem lado a lado */
.about-grid {
    display: flex;
    align-items: center; /* Centraliza verticalmente o texto com a foto */
    gap: 60px;           /* Espaço elegante entre texto e foto */
}

/* Garante que o texto e a imagem ocupem 50% cada em telas grandes */
.about-text, .about-image {
    flex: 1;
}

.about-text .lead {
    font-size: 1.2rem;
    color: var(--champagne-gold);
    margin-bottom: 20px;
}

.motto {
    margin-top: 30px;
    padding-left: 20px;
    border-left: 2px solid var(--champagne-gold);
    font-family: 'Playfair Display', serif;
    font-style: italic;
}

/* O SEGREDO: Faz a imagem respeitar a div pai */
.about-image img {
    width: 100%;            /* Ocupa toda a largura da div .about-image */
    height: 500px;          /* Define uma altura fixa para manter a elegância */
    object-fit: cover;      /* Corta a imagem para preencher o espaço sem esticar */
    border-radius: 4px;     /* Um toque sutil nos cantos */
    box-shadow: 20px 20px 0px var(--champagne-gold); /* Detalhe de design premium */
}

/* Estilos para o Formulário */
.contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form input, 
.contact-form select, 
.contact-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #444;
    padding: 15px 5px;
    color: var(--pearl);
    font-family: 'Raleway', sans-serif;
    outline: none;
    transition: border-color 0.3s;
}

.contact-form input:focus, 
.contact-form textarea:focus {
    border-bottom: 1px solid var(--champagne-gold);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Coluna de info menor, form maior */
    gap: 60px;
    align-items: start;
}

.contact-info {
    text-align: center; /* Centraliza o título e o parágrafo */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza a lista (ul) */
}

.contact-info h3 {
    color: var(--champagne-gold);
    font-family: 'Playfair Display', serif;
    margin-bottom: 20px;
}

.contact-list {
    list-style: none;
    padding: 0;
    text-align: center; /* Garante que o texto dentro dos itens também centralize */
}

.contact-list li {
    margin-bottom: 15px;
}

.contact-list a {
    color: var(--pearl);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-list a:hover {
    color: var(--champagne-gold);
}

.btn-gold-submit {
    width: 100%; /* No novo layout, o botão largo fica mais elegante */
    background-color: var(--champagne-gold);
    color: #111;
    padding: 15px;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.btn-gold-submit:hover {
    color: var(--champagne-gold);
    background: var(--dark-obsidian);
}

.contact-form select {
    appearance: none; /* Remove a seta padrão do navegador */
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23c5a059"><path d="M6 9L1 4h10z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* Estiliza especificamente as opções do menu suspenso */
.contact-form select option {
    background-color: #1a1a1a; /* O mesmo dark-obsidian do fundo do site */
    color: var(--pearl);       /* Texto branco/pérola */
    padding: 10px;
}

/* Ajuste adicional para o select no modo "focado" */
.contact-form select:focus {
    background-color: #1a1a1a;
    color: var(--champagne-gold);
}

/* Ajuste do Contato */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
}

/* --- ESTILO DESKTOP (Padrão) --- */
.menu-toggle {
    display: none; /* Esconde o botão sanduíche no computador */
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--champagne-gold); /* Cor dourada do logo */
    transition: all 0.3s ease-in-out;
}

.services-grid {
    display: flex;         /* Mudamos de grid para flex */
    flex-wrap: wrap;       /* Permite que os cards pulem para a linha de baixo */
    justify-content: center; /* O SEGREDO: Centraliza os itens em cada linha */
    gap: 30px;             /* Espaço entre os cards */
    margin-top: 50px;
}

.service-card {
    flex: 0 1 350px;       /* Não cresce, pode encolher, base de 350px */
    min-width: 300px;      /* Garante que não fique pequeno demais */
    padding: 40px;
    border: 1px solid rgba(197, 160, 89, 0.2);
    text-align: center;
    background-color: rgba(255, 255, 255, 0.02); /* Leve destaque do fundo */
    transition: 0.4s;
}

.service-card:hover {
    border-color: var(--champagne-gold);
    transform: translateY(-5px); /* Efeito de flutuar ao passar o mouse */
}

.service-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--champagne-gold);
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--pearl);
}

.footer {
    background-color: #000; /* Preto absoluto para fechar o site */
    padding: 60px 0 30px;
    border-top: 1px solid rgba(197, 160, 89, 0.2);
    color: var(--pearl);
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.footer-logo img {
    height: 60px; /* Um pouco menor que no nav */
    opacity: 0.9;
}

.footer-nav {
    display: flex;
    flex-direction: row;
    gap: 25px;
}

.footer-nav a {
    color: var(--pearl);
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: var(--champagne-gold);
}

.footer-social a {
    color: var(--champagne-gold);
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
}

.footer-copy {
    margin-top: 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
}

#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  display: none; /* Escondido por padrão */
  background-color: #D4AF37; /* Cor dourada (chef style) */
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: opacity 0.3s, transform 0.3s;
}

#backToTop:hover {
  transform: scale(1.1);
  background-color: #b8952e;
}

/* Responsividade */
@media (max-width: 768px) {
     .logo img {
        height: 60px; /* Logo um pouco menor em celulares */
    }
    
    .menu-toggle {
        display: block;
        order: 2; /* Garante que fique depois do logo se houver conflito */
    }

    .nav-links {
        display: none; /* Escondido por padrão */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Brota logo abaixo da navbar */
        right: 0;
        width: 100%;
        background-color: rgba(26, 26, 26, 0.98); 
        text-align: center;
        padding: 40px 0;
        z-index: 1000;
        border-bottom: 2px solid var(--champagne-gold);
    }

    /* Classe que o JavaScript vai adicionar/remover */
    .nav-links.active {
        display: flex !important; /* Força o menu a aparecer */
    }

    .nav-links li {
        margin: 15px 0;
    }

    .about-grid {
        flex-direction: column;
        text-align: center; /* Centraliza o H2 e o P */
    }
    
    .about-text h2 {
        margin-bottom: 20px;
    }

    .about-image {
        /*order: -1; /* Opcional: coloca a foto do chef ACIMA do texto no mobile */
        margin-bottom: 30px;
    }

    .about-image img {
        height: 350px; /* Menor no celular */
    }

    .hero {
        /* Desativar o fixed no mobile melhora a performance e evita distorção */
        background-attachment: scroll; 
        
        /* Ajustamos a posição para focar na parte mais bonita da mesa no modo retrato */
        background-position: 65% center; 
        
        /* Opcional: Diminuir um pouco a altura para não esconder o conteúdo */
        height: 80vh; 
    }

    .hero h1 {
        font-size: 2.2rem; /* Título menor para caber em telas estreitas */
        padding: 0 10px;
    }

    /* Responsividade básica para o form */
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .contact-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .contact-grid {
        grid-template-columns: 1fr; /* Um embaixo do outro no celular */
        gap: 40px;
        text-align: center;
    }

    /* Responsividade para o Footer */
    .footer-nav {
        flex-direction: column;
        gap: 15px;
    }
    #backToTop {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* Ajuste para Mobile e Tablets (iPads) */
@media (max-width: 1024px) {
    .hero {
        /* O SEGREDO: Desativar o fixed resolve a deformação em iPads */
        background-attachment: scroll !important; 
        
        /* Garante que a imagem cubra o espaço sem ser esticada */
        background-size: cover;
        
        /* Ajuste fino da posição: pode ser 'center' ou um valor como '70%' 
           se quiser focar mais nos pratos da mesa no iPad */
        background-position: center center; 
        
        /* Altura fixa em tablets evita que o teclado virtual ou 
           a barra de endereços do Safari 'pulem' a imagem */
        height: 70vh; 
    }

    .hero h1 {
        font-size: 2.8rem; /* Tamanho confortável para tablets */
    }
}

/* Ajuste para Mobile e Tablets (incluindo iPad em modo paisagem) */
@media (max-width: 1180px) { 
    .hero {
        /* Desativa o fixed que causa o zoom/deformação no iPad */
        background-attachment: scroll !important; 
        
        /* Garante que a imagem se ajuste ao enquadramento da tela */
        background-size: cover;
        background-position: center center;
        
        /* Ajuste a altura para que o lustre e a mesa apareçam bem no iPad */
        height: 80vh; 
    }

    .hero h1 {
        font-size: 3rem; /* Ajuste de escala para telas médias */
    }
}

/* Opcional: Se o Chef achar que o lustre ainda está "cortado" no iPad */
@media (min-width: 769px) and (max-width: 1180px) {
    .hero {
        background-position: center 20%; /* Sobe um pouco a foto para mostrar mais do lustre */
    }
}