/* ==========================================================================
   La Bella Fiore — Base partilhada
   --------------------------------------------------------------------------
   Este ficheiro é usado por TODAS as páginas do site (index.html e a futura
   ementa.html). Aqui vive apenas o que é genérico: reset, tipografia base,
   cabeçalho, rodapé, botões e utilitários. Nada específico de uma página —
   isso fica no CSS dessa página (ex.: index.css).

   Todas as cores/tamanhos/espaçamentos vêm de tokens.css (var(--nome)).
   Este ficheiro pressupõe que tokens.css já foi carregado antes dele.
   ========================================================================== */

/* ---- Reset simples ------------------------------------------------------
   Não usamos um "reset" completo tipo normalize.css para não trazer regras
   que não precisamos. Só o essencial para partir de uma base previsível. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Rolamento suave ao clicar nos links de âncora do menu, mas só se a
     pessoa não pediu movimento reduzido (ver regra prefers-reduced-motion
     mais abaixo, que sobrepõe isto). */
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* compensa o cabeçalho fixo ao saltar para uma secção */
}

body,
h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, picture {
  max-width: 100%;
  display: block;
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* Área de toque mínima recomendada (44×44px) para tudo o que é clicável,
   para quem usa o site no telemóvel com dedos, não com um cursor preciso. */
button, a, input, select {
  touch-action: manipulation;
}

/* Foco visível em TUDO o que é navegável por teclado — não removemos o
   contorno nativo sem substituir por algo igualmente visível. Uma pessoa
   que navega só com o teclado (ou usa leitor de ecrã com navegação por
   tabulação) precisa de ver sempre onde está. */
:focus-visible {
  outline: 3px solid var(--latao-500);
  outline-offset: 3px;
  border-radius: var(--raio-p);
}

/* ---- Corpo base ----------------------------------------------------------- */
body {
  background: var(--fundo);
  color: var(--texto-forte);
  font-family: var(--fonte-corpo);
  font-size: var(--t-corpo);
  line-height: var(--altura-corpo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  line-height: var(--altura-titulo);
  letter-spacing: var(--espaco-letras-titulo);
  color: var(--texto-forte);
}

h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-seccao); }
h3 { font-size: var(--t-sub); }
h4 { font-size: var(--t-destaque); font-family: var(--fonte-corpo); font-weight: 600; }

/* Rótulos pequenos em maiúsculas (ex.: "SOBRE NÓS" antes de um título) —
   dão ao site aquele ar de menu de restaurante elegante. */
.rotulo {
  display: inline-block;
  font-family: var(--fonte-corpo);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--espaco-letras-caixa-alta);
  text-transform: uppercase;
  color: var(--latao-texto);
}

/* Sobre fundo escuro. Usa o tom mais claro do latão porque alguns destes
   fundos são fotografias escurecidas, não cores sólidas, e podem ter zonas
   claras por baixo do texto. Ver a nota em tokens.css. */
.rotulo--claro {
  color: var(--latao-300);
}

/* ---- Contentor genérico ---------------------------------------------------
   Centra o conteúdo e dá-lhe uma margem lateral que cresce com o ecrã,
   para o texto nunca colar às bordas do ecrã. */
.contentor {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--recuo-lateral);
}

/* Espaçamento vertical padrão entre secções da página. */
.seccao {
  padding-block: var(--resp-seccao);
}

.seccao--alt {
  background: var(--fundo-alt);
}

.seccao--escura {
  background: var(--fundo-escuro);
  color: var(--texto-claro);
}

.seccao--escura h1,
.seccao--escura h2,
.seccao--escura h3,
.seccao--escura h4 {
  color: var(--texto-claro);
}

/* Cabeçalho de secção centrado — usado em quase todas as secções da página. */
.cabecalho-seccao {
  max-width: var(--largura-texto);
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--e-12);
}

.cabecalho-seccao h2 {
  margin-top: var(--e-3);
}

/* ---- Botões ---------------------------------------------------------------
   Dois estilos: o principal (sólido, verde-marca) para a ação mais
   importante de cada zona, e o secundário (contorno) para a ação seguinte
   em importância. Ambos cumprem os 44px mínimos de área de toque. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: var(--e-3) var(--e-8);
  border-radius: var(--raio-p);
  font-family: var(--fonte-corpo);
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: var(--espaco-letras-caixa-alta);
  text-transform: uppercase;
  text-align: center;
  transition: background-color var(--trans-rapida), color var(--trans-rapida),
              border-color var(--trans-rapida), transform var(--trans-rapida);
  border: 1.5px solid transparent;
}

.botao:hover {
  transform: translateY(-1px);
}

.botao--principal {
  background: var(--acento);
  color: var(--oliva-900);
}

.botao--principal:hover {
  background: var(--latao-400);
}

.botao--contorno {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}

.botao--contorno:hover {
  background: rgba(247, 242, 231, 0.12);
}

/* Variante para usar sobre fundo claro, com contorno na cor da marca. */
.botao--contorno-marca {
  border-color: var(--marca);
  color: var(--marca);
}

.botao--contorno-marca:hover {
  background: var(--marca);
  color: var(--texto-claro);
}

.botao--grande {
  padding: var(--e-4) var(--e-12);
  font-size: var(--t-corpo);
}

/* ---- Cabeçalho fixo --------------------------------------------------------
   O cabeçalho é SEMPRE sólido, e isso foi uma decisão medida, não estética.

   Tentámos primeiro um cabeçalho transparente com um véu escuro por cima da
   imagem. Funcionava com uma fotografia, mas a imagem de capa é um banner
   composto, com uma grande área creme muito clara. Medindo o pior pixel por
   baixo de cada link, quatro dos sete elementos ficavam entre 3,0 e 4,3 de
   contraste, abaixo do mínimo de 4,5 exigido pelas normas de acessibilidade.
   Escurecer mais o véu resolvia o contraste mas sujava a composição do
   banner.

   Com fundo sólido, o texto creme sobre o verde-oliva dá 13,4 de contraste,
   e o banner aparece inteiro por baixo, sem nada desenhado por cima. A
   classe .cabecalho--solido, aplicada ao deslizar, passa a servir só para
   encolher a barra e acrescentar sombra. */
.cabecalho {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  min-height: 5rem;
  padding-inline: var(--recuo-lateral);
  background: var(--fundo-escuro);
  transition: box-shadow var(--trans-media), min-height var(--trans-media);
}

.cabecalho--solido {
  background: var(--fundo-escuro);
  box-shadow: var(--sombra-media);
  min-height: 4.25rem;
}

/* Enquanto o hero está visível, o logótipo grande já aparece no painel verde
   mesmo por baixo. Mostrar o pequeno ao mesmo tempo é repetição visual, por
   isso só o revelamos quando a pessoa desliza e o grande sai de cena.
   Usamos visibility (e não só opacity) para que, estando escondido, também
   saia da navegação por teclado — um link invisível mas focável confunde
   quem navega com Tab ou com leitor de ecrã. */
.cabecalho:not(.cabecalho--solido) .cabecalho__logo {
  opacity: 0;
  visibility: hidden;
}

.cabecalho__logo {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--trans-media), visibility var(--trans-media);
}

.cabecalho__interior {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-6);
}

.cabecalho__logo {
  display: block;
  height: 2.5rem;
  width: auto;
}

.cabecalho__logo img {
  height: 100%;
  width: auto;
}

/* Navegação principal — escondida no telemóvel, visível a partir do ecrã
   de tablet/computador. No telemóvel usamos o menu de ecrã inteiro. */
.nav-principal {
  display: none;
}

.nav-principal__lista {
  display: flex;
  align-items: center;
  gap: var(--e-8);
}

.nav-principal__link {
  font-size: var(--t-peq);
  font-weight: 500;
  letter-spacing: var(--espaco-letras-caixa-alta);
  text-transform: uppercase;
  color: var(--texto-claro);
  position: relative;
  padding-block: var(--e-1);
}

.nav-principal__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--latao-400);
  transition: right var(--trans-media);
}

.nav-principal__link:hover::after,
.nav-principal__link:focus-visible::after {
  right: 0;
}

.cabecalho__ferramentas {
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

/* Seletor de idioma PT/EN — dois botões simples, o ativo fica destacado. */
.seletor-idioma {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  border: 1px solid var(--texto-claro-suave);
  border-radius: var(--raio-p);
  padding: 2px;
}

.seletor-idioma__botao {
  min-width: 36px;
  min-height: 32px;
  padding: var(--e-1) var(--e-2);
  border-radius: 2px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--texto-claro-suave);
  transition: background-color var(--trans-rapida), color var(--trans-rapida);
}

.seletor-idioma__botao[aria-pressed="true"] {
  background: var(--latao-400);
  color: var(--oliva-900);
}

/* Botão do menu hamburguer — só aparece no telemóvel/tablet pequeno. */
.botao-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
}

.botao-menu__barra {
  width: 24px;
  height: 2px;
  background: var(--texto-claro);
  transition: transform var(--trans-rapida), opacity var(--trans-rapida);
}

.botao-menu[aria-expanded="true"] .botao-menu__barra:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.botao-menu[aria-expanded="true"] .botao-menu__barra:nth-child(2) {
  opacity: 0;
}

.botao-menu[aria-expanded="true"] .botao-menu__barra:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu de ecrã inteiro para telemóvel — fica escondido fora do ecrã à
   direita e desliza para dentro quando aberto. Mais simples e mais robusto
   do que um "dropdown" pequeno, que é difícil de tocar com o dedo. */
.menu-movel {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--fundo-escuro);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-8);
  transform: translateX(100%);

  /* O visibility: hidden é ESSENCIAL, não é decoração.
     Sem ele, o menu fechado continua "visível" para o browser: está apenas
     empurrado para fora do ecrã pelo transform. Os seus 9 links continuam
     alcançáveis com a tecla Tab, e quem navega por teclado acaba a saltar
     para links que não vê, com o indicador de foco fora do ecrã. Fica
     completamente perdido, sem perceber porquê.
     O visibility: hidden tira-os da ordem de tabulação e dos leitores de
     ecrã, mantendo a animação de deslize. */
  visibility: hidden;

  /* O atraso no visibility faz a diferença: ao ABRIR fica visível de
     imediato (0s), ao FECHAR só desaparece depois de a animação terminar,
     para não sumir a meio do movimento. */
  transition: transform var(--trans-media), visibility 0s var(--trans-media);
}

.menu-movel[data-aberto="true"] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--trans-media), visibility 0s 0s;
}

.menu-movel__lista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-6);
}

.menu-movel__link {
  font-family: var(--fonte-titulo);
  font-size: var(--t-sub);
  color: var(--texto-claro);
}

.menu-movel__fechar {
  position: absolute;
  top: var(--e-6);
  right: var(--recuo-lateral);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--texto-claro);
  font-size: 1.75rem;
  line-height: 1;
}

/* Quando o menu móvel está aberto, impede a página por trás de deslizar. */
.sem-scroll {
  overflow: hidden;
}

@media (min-width: 880px) {
  .nav-principal {
    display: block;
  }

  .botao-menu {
    display: none;
  }

  .menu-movel {
    display: none;
  }
}

/* ---- Rodapé ---------------------------------------------------------------- */
.rodape {
  background: var(--oliva-900);
  color: var(--texto-claro-suave);
  padding-block: var(--e-16) var(--e-8);
}

.rodape__grelha {
  display: grid;
  gap: var(--e-12);
  margin-bottom: var(--e-12);
}

.rodape__logo {
  height: 2.75rem;
  width: auto;
  margin-bottom: var(--e-4);
}

.rodape__logo img {
  height: 100%;
  width: auto;
}

/* Nota sobre a tag: usamos <h3> aqui (não <h4>) para não saltar um nível
   na hierarquia de títulos da página — o título de secção mais recente
   antes do rodapé é sempre um <h2>, por isso o próximo nível é <h3>.
   Visualmente continua pequeno e discreto: sobrepomos o tamanho/família
   grandes que .rodape__coluna h3 herdaria por defeito de h3 no base.css. */
.rodape__coluna h3 {
  font-family: var(--fonte-corpo);
  font-size: var(--t-destaque);
  font-weight: 600;
  color: var(--texto-claro);
  margin-bottom: var(--e-3);
}

.rodape__coluna p,
.rodape__coluna a {
  font-size: var(--t-peq);
  line-height: var(--altura-corpo);
}

.rodape__coluna a {
  transition: color var(--trans-rapida);
}

.rodape__coluna a:hover {
  color: var(--latao-400);
}

.rodape__base {
  border-top: 1px solid rgba(247, 242, 231, 0.12);
  padding-top: var(--e-6);
  font-size: var(--t-micro);
  text-align: center;
  color: var(--texto-claro-suave);
}

@media (min-width: 720px) {
  .rodape__grelha {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

/* ---- Utilitário de animação de entrada -------------------------------------
   Aplicado via JavaScript (IntersectionObserver) a elementos com a classe
   .animar-entrada: começam ligeiramente abaixo e transparentes, e sobem
   suavemente quando entram no ecrã. A classe .em-vista é adicionada pelo
   JS. Se a pessoa pediu "reduzir movimento" no sistema operativo, tokens.css
   já reduz as transições para 1ms — por isso não precisamos de duplicar
   aqui a lógica de prefers-reduced-motion. */
.animar-entrada {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--trans-lenta), transform var(--trans-lenta);
}

.animar-entrada.em-vista {
  opacity: 1;
  transform: translateY(0);
}

/* Classe utilitária para esconder visualmente mas manter acessível a
   leitores de ecrã (ex.: títulos de contexto só para tecnologia de apoio). */
.apenas-leitor-ecra {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ligação de acesso rápido ("skip to content") — invisível até receber
   foco por teclado. Ajuda quem navega por Tab a não ter de passar por todo
   o menu em cada página. */
.saltar-para-conteudo {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  background: var(--acento);
  color: var(--oliva-900);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--raio-p);
  z-index: var(--z-modal);
  font-weight: 600;
  transition: top var(--trans-rapida);
}

.saltar-para-conteudo:focus {
  top: var(--e-4);
}

/* ==========================================================================
   ÁREAS DE TOQUE — correção de acessibilidade em telemóvel
   --------------------------------------------------------------------------
   Medição feita num ecrã de 375x812: vários links tinham só 22 a 32 pixéis de
   altura. Um dedo adulto cobre cerca de 45 pixéis, por isso alvos assim
   obrigam a apontar com precisão e falham muito — sobretudo o NÚMERO DE
   TELEFONE, que é a ação mais importante do site inteiro num telemóvel.

   As orientações de acessibilidade (WCAG 2.2) pedem no mínimo 24x24; as da
   Apple e da Google recomendam 44x44. Usamos 44.

   Nota: aumentamos a área CLICÁVEL sem aumentar o texto, com padding e
   margens negativas onde é preciso — o aspeto visual mantém-se igual.

   Critério: largura de ecrã, e não "ecrã tátil". Um telemóvel real ativa
   ambos, mas o critério tátil não é verificável num navegador de secretária
   redimensionado — e regra que não se consegue testar é regra em que não se
   pode confiar. Por largura, aplica-se em qualquer telemóvel E é testável.
   ========================================================================== */
@media (max-width: 880px) {

  /* Telefone, Instagram e Facebook nos contactos e no rodapé.
     Nota: a secção de contactos NÃO tem uma classe ".contactos"; os seus
     blocos chamam-se "contactos__faixa", "contactos__linha", etc. Usamos o
     id #contactos, que existe de certeza porque é o destino do link do menu. */
  #contactos a[href^="tel:"],
  #contactos a[href^="mailto:"],
  #contactos a[href*="instagram"],
  #contactos a[href*="facebook"],
  .rodape a[href^="tel:"],
  .rodape a[href^="mailto:"],
  .rodape a[href*="instagram"],
  .rodape a[href*="facebook"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Links do menu de ecrã inteiro */
  .menu-movel__link {
    display: flex;
    align-items: center;
    min-height: 48px;
  }

  /* Seletor de idioma: os botões PT/EN tinham 36x32 */
  .seletor-idioma__botao {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Links da navegação principal (quando visível em tablet) */
  .navegacao__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* O logótipo do cabeçalho é um link para o topo. A imagem tem 40px de
     altura, o que deixava a área de toque 4px abaixo do mínimo. Damos-lhe
     os 44px em altura de área clicável sem mexer no tamanho da imagem. */
  .cabecalho__logo {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- Cabeçalho em ecrãs muito estreitos ------------------------------------
   Medição num ecrã de 375px: o conjunto PT/EN + Reservar + botão de menu
   somava 336px de conteúdo dentro de uma área útil de 335px, e o botão de
   menu ficava 5px cortado na margem direita.

   Escondemos o "Reservar" do cabeçalho abaixo dos 620px. Não se perde nada:
   logo por baixo da imagem de capa há um botão "Reservar mesa" bem maior, e
   o menu de ecrã inteiro também o inclui. Assim sobra espaço para o botão de
   menu respirar. */
@media (max-width: 620px) {
  .cabecalho__ferramentas > .botao {
    display: none;
  }
}

/* ==========================================================================
   O atributo hidden tem de ganhar sempre
   --------------------------------------------------------------------------
   Armadilha clássica de CSS: o HTML tem um atributo `hidden` que esconde
   um elemento, e os browsers implementam-no com uma regra `display: none`.
   Só que essa regra vem da folha de estilos do BROWSER, e qualquer regra
   nossa com `display` ganha-lhe, mesmo sem !important.

   Aconteceu mesmo aqui: os filtros Vegetariano/Vegano tinham
   `.filtros { display: flex }`, e o JavaScript a pôr `hidden = true` não
   surtia efeito nenhum. Ficavam visíveis nas bebidas, onde não fazem nada.

   Esta regra garante que, quando algo é marcado como escondido, fica mesmo
   escondido. É dos poucos sítios onde o !important é a solução correta e
   não um remendo.
   ========================================================================== */
[hidden] {
  display: none !important;
}

/* ---- Altura mínima dos links de contacto, em qualquer ecrã ------------------
   Medição no computador: os links do rodapé (telefone, e-mail, Instagram,
   Facebook) tinham 22 pixéis de altura. A norma de acessibilidade WCAG 2.2
   exige um mínimo de 24x24 para qualquer alvo clicável, e 22 fica abaixo.

   No telemóvel já subimos estes links para 44px (ver o bloco "ÁREAS DE
   TOQUE"). Aqui garantimos os 24px também no computador, sem esticar o
   rodapé: 24px é pouco mais do que a altura natural da linha de texto.
   ========================================================================== */
#contactos a[href^="tel:"],
#contactos a[href^="mailto:"],
#contactos a[href*="instagram"],
#contactos a[href*="facebook"],
.rodape a[href^="tel:"],
.rodape a[href^="mailto:"],
.rodape a[href*="instagram"],
.rodape a[href*="facebook"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* ==========================================================================
   REDES SOCIAIS — ícones
   --------------------------------------------------------------------------
   Os desenhos (SVG) estão escritos diretamente no HTML, não vêm de uma
   biblioteca externa. Duas vantagens: zero pedidos a servidores de terceiros
   (velocidade e RGPD), e os ícones herdam a cor do texto à volta, portanto
   funcionam tanto sobre fundo claro como escuro sem duplicar ficheiros.

   Cada link tem um aria-label bilingue no HTML, porque um ícone sozinho não
   diz nada a quem usa leitor de ecrã.
   ========================================================================== */
.redes {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  /* A margem negativa vai no CONTENTOR, não em cada ícone.
     Serve para o primeiro ícone alinhar visualmente com o texto das linhas
     de cima, compensando o espaço invisível da área de toque de 44px.
     Se estivesse em cada link, comia também o espaço ENTRE os dois ícones
     (medido: ficavam a 0px um do outro) e no telemóvel era fácil tocar no
     errado. */
  margin-inline-start: calc(var(--e-2) * -1);
}

.redes__link {
  /* 44x44 é o mínimo recomendado para algo que se toca com o dedo. O ícone
     em si é mais pequeno; o resto é área clicável invisível, que evita
     toques falhados sem alterar o aspeto. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--marca);
  transition: color var(--trans-rapida), background-color var(--trans-rapida),
              transform var(--trans-rapida);
}

.redes__link:hover,
.redes__link:focus-visible {
  color: var(--latao-texto);
  background-color: rgba(74, 74, 34, 0.08);
  transform: translateY(-1px);
}

.redes__icone {
  width: 22px;
  height: 22px;
  display: block;
}

/* No rodapé o fundo é verde muito escuro, por isso os ícones vão a creme. */
.redes--rodape {
  margin-top: var(--e-3);
}

.redes--rodape .redes__link {
  color: var(--texto-claro-suave);
}

.redes--rodape .redes__link:hover,
.redes--rodape .redes__link:focus-visible {
  color: var(--texto-claro);
  background-color: rgba(247, 242, 231, 0.12);
}