/* ==========================================================================
   La Bella Fiore — Estilos da página de ementa (ementa.html)
   --------------------------------------------------------------------------
   Escrito telemóvel-primeiro: as regras de base são para ecrã pequeno, e as
   media queries com min-width vão ACRESCENTANDO estilo para ecrãs maiores.
   Tudo o que é cor, tamanho e espaçamento vem de tokens.css (var(--nome)) —
   nada de valores "à mão" aqui.

   Este ficheiro pressupõe que tokens.css e base.css já foram carregados
   antes dele (ver a ordem dos <link> em ementa.html).
   ========================================================================== */

/* ---- Compensar o cabeçalho fixo -------------------------------------------
   O cabeçalho (definido em base.css) é "position: fixed", por isso o
   primeiro bloco visível da página tem de ter espaço por cima, senão o
   cabeçalho tapa o título. */
.ementa-intro {
  padding-top: calc(5rem + var(--e-8));
  padding-bottom: var(--e-8);
  background: var(--fundo-alt);
}

.ementa-intro h1 {
  text-align: center;
}

.ementa-intro__frase {
  max-width: var(--largura-texto);
  margin-inline: auto;
  margin-top: var(--e-3);
  text-align: center;
  color: var(--texto-suave);
}

.ementa-intro__acoes {
  display: flex;
  justify-content: center;
  margin-top: var(--e-6);
}

/* ---- Alternador Comida / Bebidas -------------------------------------------
   Dois botões grandes, no formato "separador" (tab). Escolhemos separadores
   em vez de mostrar as duas listas seguidas porque a ementa tem 232 itens:
   numa lista contínua, quem quer só ver as bebidas teria de deslizar por
   toda a comida primeiro. Com separadores, chega-se a qualquer um dos dois
   grupos com um único toque, o que é mais rápido com o polegar. */
.grupo-selector {
  display: flex;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

.grupo-selector__botao {
  min-height: 44px;
  min-width: 44px;
  padding: var(--e-3) var(--e-6);
  border-radius: var(--raio-p);
  border: 1.5px solid var(--marca);
  background: transparent;
  color: var(--marca);
  font-family: var(--fonte-corpo);
  font-size: var(--t-peq);
  font-weight: 600;
  letter-spacing: var(--espaco-letras-caixa-alta);
  text-transform: uppercase;
  transition: background-color var(--trans-rapida), color var(--trans-rapida);
}

.grupo-selector__botao[aria-selected="true"] {
  background: var(--marca);
  color: var(--texto-claro);
}

/* ---- Filtros (só afetam a comida) ------------------------------------------
   Ficam sempre visíveis (não escondemos a barra ao trocar para bebidas, é
   simples e não confunde), mas só têm efeito visível quando o painel de
   comida está ativo. */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-top: var(--e-6);
}

.filtros__rotulo {
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--texto-suave);
}

.filtros__botao {
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-p);
  border: 1.5px solid var(--borda);
  background: var(--fundo);
  color: var(--texto-forte);
  font-size: var(--t-peq);
  font-weight: 500;
  transition: background-color var(--trans-rapida), color var(--trans-rapida),
              border-color var(--trans-rapida);
}

.filtros__botao[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--oliva-900);
}

.filtros__contagem {
  width: 100%;
  text-align: center;
  margin-top: var(--e-2);
  font-size: var(--t-peq);
  color: var(--texto-suave);
}

/* ---- Barra de atalhos das secções (sticky) ---------------------------------
   Fica agarrada ao ecrã logo abaixo do cabeçalho enquanto se percorre a
   ementa, para nunca ser preciso voltar ao topo da página para saltar de
   secção. Desliza na horizontal porque há demasiados atalhos (11 na comida,
   17 nas bebidas) para caber numa linha só em ecrã de telemóvel. */
.secoes-nav-fixa {
  position: sticky;
  top: 4.25rem; /* altura do cabeçalho já "sólido" (ver .cabecalho--solido em base.css) */
  z-index: var(--z-sticky);
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
  box-shadow: var(--sombra-baixa);
}

.secoes-nav {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Esconde a barra de scroll visualmente sem esconder a funcionalidade —
     numa lista de atalhos horizontal, uma barra de scroll visível só
     acrescenta ruído visual sem ajudar a navegação por gesto. */
  scrollbar-width: thin;
}

.secoes-nav__lista {
  display: flex;
  gap: var(--e-1);
  padding: var(--e-2) var(--recuo-lateral);
  width: max-content;
  min-width: 100%;
}

.secoes-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--e-2) var(--e-4);
  border-radius: var(--raio-p);
  font-size: var(--t-peq);
  font-weight: 500;
  white-space: nowrap;
  color: var(--texto-suave);
  transition: background-color var(--trans-rapida), color var(--trans-rapida);
}

.secoes-nav__link:hover {
  background: var(--fundo-alt);
  color: var(--texto-forte);
}

/* Secção atualmente visível no ecrã, atualizado por assets/js/ementa.js
   através de um IntersectionObserver enquanto a pessoa desliza a página. */
.secoes-nav__link.secoes-nav__link--ativo {
  background: var(--marca);
  color: var(--texto-claro);
}

/* ---- Secções da ementa ------------------------------------------------- */
.seccao-ementa {
  padding-block: var(--e-12);
  scroll-margin-top: 9rem; /* compensa o cabeçalho fixo + a barra de atalhos ao saltar para aqui */
}

.seccao-ementa:nth-child(even) {
  background: var(--fundo-alt);
}

.seccao-ementa__titulo {
  text-align: center;
  margin-bottom: var(--e-8);
}

.seccao-ementa__subtitulo {
  font-size: var(--t-sub);
  text-align: center;
  margin-top: var(--e-8);
  margin-bottom: var(--e-6);
  color: var(--latao-texto);
}

.seccao-ementa__grelha {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: 1fr;
}

/* Quando uma secção fica sem nenhum item visível (por causa dos filtros),
   escondemo-la por inteiro, incluindo o título — ver assets/js/ementa.js. */
.seccao-ementa[hidden] {
  display: none;
}

/* ---- Cartão de um prato/bebida ---------------------------------------------
   "article" para ser um bloco de conteúdo autónomo e identificável por
   leitores de ecrã, independentemente do resto da secção. */
.prato {
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--borda);
}

.prato[hidden] {
  display: none;
}

.prato__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
}

.prato__nome {
  font-size: var(--t-destaque);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  color: var(--texto-forte);
}

/* Preço: usa OBRIGATORIAMENTE --latao-texto (não --latao-500), porque é o
   único dos dois tons de latão que cumpre o contraste mínimo de 4.5:1 em
   texto pequeno sobre fundo claro — ver a nota de acessibilidade em
   tokens.css. */
.prato__preco {
  flex-shrink: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-destaque);
  font-weight: 600;
  color: var(--latao-texto);
  white-space: nowrap;
}

.prato__descricao {
  margin-top: var(--e-1);
  font-size: var(--t-peq);
  color: var(--texto-suave);
}

.prato__regiao {
  margin-top: var(--e-1);
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--espaco-letras-caixa-alta);
  text-transform: uppercase;
  color: var(--latao-texto);
}

.prato__simbolos {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.simbolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.05rem;
  line-height: 1;
}

/* ---- Avisos legais ----------------------------------------------------------
   Letra pequena mas nunca abaixo de 14px (aqui usamos --t-peq, ~15px), com
   cor de texto que cumpre o contraste mínimo sobre o fundo claro. */
.avisos-legais {
  padding-block: var(--e-8);
  background: var(--fundo-alt);
  border-top: 1px solid var(--borda);
}

.avisos-legais__texto {
  max-width: var(--largura-texto);
  margin-inline: auto;
  font-size: var(--t-peq);
  line-height: var(--altura-corpo);
  color: var(--texto-suave);
}

.avisos-legais__texto + .avisos-legais__texto {
  margin-top: var(--e-4);
}

.ementa-cta-final {
  padding-block: var(--e-12);
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   ECRÃ A PARTIR DE TABLET (≥620px)
   ========================================================================== */
@media (min-width: 620px) {
  .seccao-ementa__grelha {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--e-8);
  }
}

/* ==========================================================================
   ECRÃ DE COMPUTADOR (≥960px)
   ========================================================================== */
@media (min-width: 960px) {
  .secoes-nav__lista {
    justify-content: center;
  }
}

/* Respeita quem pediu menos animação — aqui não há animações próprias além
   das herdadas de tokens.css/base.css, mas as transições de cor/fundo dos
   botões já ficam praticamente instantâneas por causa da variável
   --trans-rapida ser reduzida a 1ms nesse caso. */