/* ==========================================================================
   menu.css — página de cardápios
   Carregado só em menu.html. Usa Zilla Slab nos itens, espelhando o serif
   dos cardápios impressos.
   ========================================================================== */

/* Aqui o header já nasce sólido: não há hero por baixo dele. */
.pagina-menu {
  padding-top: var(--header-altura);
}

/* ==========================================================================
   Topo da página
   ========================================================================== */

.menu-topo {
  padding-block: var(--sp-12) var(--sp-10);
  background-color: var(--verde-escuro);
  border-bottom: 1px solid var(--borda);
}

/* O topo já dá respiro suficiente; a seção dos cardápios não precisa do
   padding cheio de uma seção da home. */
.pagina-menu .secao {
  padding-top: var(--sp-12);
}

.menu-topo__intro {
  max-width: 56ch;
  margin-top: var(--sp-5);
  color: var(--texto-suave);
  font-size: var(--txt-md);
}

/* ==========================================================================
   Abas
   ========================================================================== */

.menu-abas {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--borda);
  /* No mobile as 4 abas não cabem: viram uma faixa rolável horizontal,
     sem gerar scroll na página. */
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.menu-aba {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--texto-suave);
  font-family: var(--fonte-display);
  font-size: var(--txt-sm);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--transicao), background-color var(--transicao),
    border-color var(--transicao);
}

.menu-aba:hover {
  color: var(--creme);
  background-color: rgb(var(--rgb-creme) / 0.06);
}

.menu-aba[aria-selected="true"] {
  color: var(--preto);
  background-color: var(--dourado);
  border-color: var(--dourado);
}

/* ==========================================================================
   Painel de um cardápio
   ========================================================================== */

.menu-painel:focus-visible {
  outline: 2px solid var(--dourado-claro);
  outline-offset: 6px;
}

.menu-painel__cabecalho {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--borda);
}

.menu-painel__titulo {
  font-size: var(--txt-xl);
}

.menu-painel__desc {
  max-width: 60ch;
  margin-top: var(--sp-3);
  color: var(--texto-suave);
}

.menu-painel__nota {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background-color: rgb(var(--rgb-dourado) / 0.08);
  border-left: 3px solid var(--dourado);
  border-radius: var(--radius);
  color: var(--creme);
  font-size: var(--txt-sm);
}

.menu-painel__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

/* Duas colunas de seções no desktop, mantendo cada bloco inteiro. */
.menu-painel__secoes {
  display: grid;
  gap: var(--sp-12);
}

@media (min-width: 900px) {
  .menu-painel__secoes {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12) var(--sp-16);
    align-items: start;
  }
}

/* ==========================================================================
   Seção e itens
   ========================================================================== */

.menu-secao__titulo {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--borda-acento);
  color: var(--dourado);
  font-size: var(--txt-sm);
  letter-spacing: var(--ls-olho);
}

.menu-secao__itens {
  display: grid;
  gap: var(--sp-6);
}

.menu-item__linha {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.menu-item__nome {
  flex-shrink: 0;
  max-width: 75%;
  color: var(--creme);
  font-family: var(--fonte-menu);
  font-size: var(--txt-md);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Pontilhado que liga o nome ao preço, como no cardápio impresso. */
.menu-item__pontos {
  flex: 1 1 auto;
  min-width: var(--sp-4);
  height: 1px;
  align-self: flex-end;
  margin-bottom: 0.35em;
  border-bottom: 1px dotted rgb(var(--rgb-creme) / 0.28);
}

.menu-item__preco {
  flex-shrink: 0;
  color: var(--dourado);
  font-family: var(--fonte-menu);
  font-size: var(--txt-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.menu-item__desc {
  max-width: 58ch;
  margin-top: var(--sp-1);
  color: var(--texto-suave);
  font-family: var(--fonte-menu);
  font-size: var(--txt-sm);
  line-height: 1.55;
}

/* Origem e uva — só nos vinhos. */
.menu-item__meta {
  margin-top: var(--sp-1);
  color: var(--creme-suave);
  font-size: var(--txt-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.menu-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.menu-item__tag {
  padding: 2px var(--sp-2);
  border: 1px solid var(--borda-acento);
  border-radius: var(--radius);
  color: var(--dourado);
  font-size: var(--txt-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Estados: carregando, aviso e fallback em imagem
   ========================================================================== */

.menu-carregando {
  padding-block: var(--sp-12);
  color: var(--texto-suave);
  text-align: center;
}

.menu-aviso {
  margin-bottom: var(--sp-8);
  padding: var(--sp-4) var(--sp-5);
  background-color: rgb(var(--rgb-dourado) / 0.1);
  border-left: 3px solid var(--dourado);
  border-radius: var(--radius);
  color: var(--creme);
  font-size: var(--txt-sm);
}

/* O fallback nasce VISÍVEL no HTML e só é escondido por menus.js — o próprio
   módulo que renderiza os cardápios. Não usar a classe `.js` aqui: em file://
   o navegador bloqueia ES modules por CORS, o script inline roda (e poria a
   classe) mas menus.js não, e a página ficaria sem cardápio nenhum. Quem
   esconde é quem consegue substituir. */
.menu-fallback {
  display: grid;
  gap: var(--sp-10);
}

.menu-fallback[hidden] {
  display: none;
}

.menu-fallback__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.menu-fallback__item figcaption {
  font-family: var(--fonte-display);
  font-size: var(--txt-sm);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--dourado);
}

.menu-fallback__item img {
  width: 100%;
  max-width: 620px;
  border: 1px solid var(--borda);
  border-radius: var(--radius);
}

@media (min-width: 900px) {
  .menu-fallback {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-12);
  }
}

.menu-rodape {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: var(--txt-xs);
}