/* ==========================================================================
   Mister Frango - pagina de menu
   (cabecalho de pagina partilhado esta em paginas.css)
   ========================================================================== */

/* --- corpo: navegacao de categorias + lista ------------------------------- */

.menu-corpo{padding-block:3.5rem 5rem}

.menu-corpo__grid{
  display:grid;
  grid-template-columns:1fr 14rem;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}
/* conteudo a esquerda, indice de categorias a direita — a ordem no HTML
   fica com o indice primeiro de proposito (quem navega por teclado chega
   primeiro aos atalhos de categoria, antes dos 50 itens do menu). */
.menu-corpo__grid > nav{order:2}
.menu-corpo__grid > div{order:1}
/* Sem isto, o conteudo nao-quebravel do indice (nav > .menu-indice, que so
   ganha overflow-x:auto um nivel abaixo) empurra a largura minima do proprio
   <nav> para alem do ecra, e isso alastra a coluna inteira do grid. */
.menu-corpo__grid > *{min-width:0}

/* indice de categorias: pegajoso e centrado verticalmente no ecra, dentro
   dos limites da coluna (para de acompanhar quando chega ao fim do menu).
   O sticky vai no <nav> — o item real da grelha, com a altura da fila toda
   — e nao na lista: na lista, o "espaco" para o sticky se mover era so o
   tamanho da propria lista, e nao acompanhava o scroll nenhum.
   Nota: cheguei a experimentar top:0;bottom:0 com align-self:center (o
   truque nativo de centrar um sticky dentro do pai) mas com esta coluna a
   ser MUITO mais alta que o ecra isso nao centra — cola ao fundo do ecra
   na primeira metade do menu e ao topo na segunda, porque a posicao
   "natural" centrada fica a meio do documento, longe de qualquer ecra
   visivel na maior parte do scroll. Top:50vh + transform e o que
   realmente mantem centrado o tempo todo; confirmado a percorrer a
   pagina inteira, nao so o inicio. */
.menu-corpo__grid > nav{
  position:sticky;
  top:50vh;
  transform:translateY(-50%);
  /* o limite de subida do sticky (quando solta perto do topo) segue o
     topo real da coluna do menu, que e o da FOTO da primeira categoria —
     bem mais acima do que o texto "Opções Churrasco" ao lado (o titulo
     fica centrado na vertical contra uma foto mais alta, e o proprio
     sticky ainda sobe metade da sua altura por causa do transform de
     centrar). Esta margem empurra esse limite para baixo, ate o topo do
     indice alinhar com o topo do h2 (medido a 1280px: 216px de diferenca
     entre o ponto onde o sticky parava antes e o topo do "Opções
     Churrasco"). */
  margin-top:13.5rem;
}
.menu-indice{list-style:none;margin:0;padding:0}
.menu-indice li{border-left:2px solid var(--linha)}
.menu-indice a{
  display:block;
  padding:.5rem 0 .5rem 1rem;
  text-decoration:none;
  font-size:.875rem;
  font-weight:700;
  color:var(--creme-45);
  transition:color .18s ease;
}
.menu-indice a:hover{color:var(--creme)}
.menu-indice li.is-ativa a{color:var(--creme)}

/* marcador flutuante: substitui o border-left vermelho fixo por-item.
   Acompanha o scroll em continuo (main.js recalcula o "top" a cada frame
   de scroll, mesmo dentro da mesma categoria) — por isso a transicao do
   "top" e' curta, só para tirar o serrilhado entre frames, não um
   deslize longo (senão fica sempre a correr atrás do scroll). Ao mover
   fica so um pontinho (.is-a-mover); 150ms depois do scroll parar (ver
   main.js) assenta na barra do tamanho da categoria atual. */
.menu-indice__marcador{
  position:absolute;left:0;top:0;
  width:2px;height:1.5rem;
  background:var(--vermelho);
  border-radius:1px;
  opacity:0;
  pointer-events:none;
  transition:top .12s linear, height .25s ease,
             width .2s ease, border-radius .2s ease, opacity .2s ease;
}
.menu-indice__marcador.is-visivel{opacity:1}
.menu-indice__marcador.is-a-mover{
  width:6px;
  border-radius:50%;
  transform:translateX(-2px);
}

@media (max-width:56.25rem){
  .menu-corpo__grid{grid-template-columns:1fr}
  .menu-corpo__grid > nav{
    position:sticky;top:var(--nav-h);transform:none;z-index:10;
    order:0;
  }
  .menu-corpo__grid > div{order:0}
  .menu-indice{
    display:flex;overflow-x:auto;gap:0;
    padding:.75rem 0;margin-bottom:1rem;
    background:var(--tinta);
    border-bottom:1px solid var(--linha);
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .menu-indice::-webkit-scrollbar{display:none}
  .menu-indice li{
    border-left:none;border-bottom:2px solid transparent;
    flex:0 0 auto;
  }
  .menu-indice a{padding:.375rem .875rem;white-space:nowrap}
  .menu-indice li.is-ativa{border-left-color:transparent;border-bottom-color:var(--vermelho)}
  /* o marcador flutuante (bolinha a viajar + barra) e' coisa da barra
     vertical do desktop — no mobile o indice e' uma fila horizontal e a
     categoria ativa ja se ve pelo border-bottom vermelho do proprio item,
     por isso o marcador nem chega a aparecer aqui */
  .menu-indice__marcador{display:none}
}

/* --- categoria ------------------------------------------------------------- */

.categoria-menu{
  scroll-margin-top:calc(var(--nav-h) + 1rem);
  padding-bottom:3.5rem;
  margin-bottom:3.5rem;
  border-bottom:1px solid var(--linha);
}
/* :last-of-type e nao :last-child porque a nota de alergenios (<p>) vem a
   seguir a ultima categoria dentro do mesmo <div> — isso fazia a ultima
   categoria nunca ser realmente a ultima filha, e o traço ficava sempre */
.categoria-menu:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0}

.categoria-menu__cabecalho{
  display:grid;
  grid-template-columns:9rem 1fr;
  gap:1.5rem;
  align-items:center;
  margin-bottom:1.75rem;
}
.categoria-menu__foto{
  width:9rem;height:9rem;
  border-radius:var(--radio);
  overflow:hidden;
  background:var(--carvao);
}
.categoria-menu__foto img{width:100%;height:100%;object-fit:cover}

.categoria-menu__titulo{display:flex;flex-direction:column;gap:.375rem}
.categoria-menu__titulo .etiqueta{color:var(--brasa)}
.categoria-menu__titulo h2{font-size:clamp(1.625rem,3.4vw,2.25rem)}

.categoria-menu--sem-foto .categoria-menu__cabecalho{grid-template-columns:1fr}

/* --- lista de pratos --------------------------------------------------------- */

.lista-pratos{list-style:none;margin:0;padding:0}

.item-prato{
  padding-block:1.0625rem;
  border-bottom:1px dashed var(--linha);
}
.item-prato:first-child{padding-top:0}
.item-prato:last-child{border-bottom:none}

.item-prato__linha{
  display:flex;align-items:baseline;gap:.75rem;
}

.item-prato__nome{
  flex:0 1 auto;
  font-weight:700;
  font-size:1.0625rem;
}

.item-prato__pontilhado{
  flex:1 1 auto;
  border-bottom:1px dotted var(--linha-forte);
  margin-bottom:.375rem;
  min-width:1.5rem;
}

.item-prato__preco{
  flex:0 0 auto;
  font-family:var(--mono);
  font-weight:700;
  font-size:1.125rem;
  white-space:nowrap;
}

.item-prato__desc{
  margin:.375rem 0 0;
  font-size:.875rem;
  color:var(--creme-45);
  max-width:34rem;
}

@media (max-width:30rem){
  .categoria-menu__cabecalho{grid-template-columns:1fr}
  .categoria-menu__foto{width:100%;height:11rem}
  .item-prato__nome{font-size:1rem}
}

/* --- nota de alergenios ----------------------------------------------------- */

.menu-nota{
  margin-top:3rem;
  font-family:var(--mono);
  font-size:.8125rem;
  color:var(--creme-45);
  max-width:38rem;
}