/* Meza.Libaneza: the menu page, /ementa and /en/menu. Owner: page-ementa. Reads the tokens and the site.css
   components (.pratos, .prato, .caixa, .foto, .faixa, .t2, .t-caixa); never redefines a token.

   The page is the house menu gaining a screen: a 2 px navy rule opens each section, the house's three-column
   grid from 1180 px (couvert, soup and salads side by side; the photograph takes a column), navy boxes for
   the main courses, desserts and the beer, bottle and soft-drink blocks, the pattern band before the main
   courses and the drinks, letters and price side by side as on the paper menu.

   The dish itself (.prato-cabeca, .prato-valor) is in site.css. Contents: dish on this page · opening · tools (date, allergens, key, filter) · section guide ·
   sections · drinks · empty state · closing · widths */

/* ---------- the dish on this page ---------- */
.ementa .prato { scroll-margin-top: calc(var(--guia-h) + var(--space-xs)); }
.ementa .prato-descricao { margin-top: var(--space-3xs); max-width: 60ch; }
.ementa .prato:target { background: var(--color-surface-alt); margin-inline: calc(-1 * var(--space-xs)); padding-inline: var(--space-xs); }
.ementa .on-navy .prato:target { background: var(--navy-raised); }
/* sides, sauces, coffees, beer: name and price on one line, no description */
.prato--simples { padding-block: var(--space-xs); }
.prato--simples .prato-nome { font-size: var(--step-0); font-weight: var(--weight-label); }
.prato--simples .preco { font-size: var(--step-0); }

/* ---------- opening ---------- */
.ementa-pagina { --guia-h: 56px; }
.ementa-abertura { display: grid; gap: var(--space-m); justify-items: start; padding-block: var(--space-2xl) var(--space-m); }
.ementa-abertura .lead { max-width: 56ch; }

/* ---------- tools: the date, the allergen note and key, the filter ---------- */
.ementa-ferramentas { display: grid; gap: var(--space-l); padding-bottom: var(--space-xl); }
.ementa-fonte { font-size: var(--step--1); font-weight: var(--weight-label); color: var(--color-text-muted); margin-top: calc(-1 * var(--space-m)); }
.ementa-alergenios-nota { border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-s); }
.ementa-alergenios-nota, .ementa-nota-alergenios {
  display: flex; align-items: flex-start; gap: var(--space-2xs);
  font-weight: var(--weight-label); line-height: var(--leading-ui);
}
.ementa-alergenios-nota .ic, .ementa-nota-alergenios .ic { margin-top: .05em; }
.ementa-alergenios-nota { font-size: var(--step-1); }
.ementa-legenda { display: grid; gap: var(--space-xs); }
.ementa-letras { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m); }
.ementa-letras div { display: inline-flex; align-items: baseline; gap: var(--space-2xs); }
.ementa-letras dt {
  min-width: 2.4em; padding: 2px var(--space-2xs);
  border: var(--rule) solid var(--color-rule);
  font-size: var(--step--1); font-weight: var(--weight-heading); letter-spacing: var(--tracking-label);
  text-align: center; line-height: var(--leading-ui);
}
.ementa-letras dd { margin: 0; }

/* the filter: a segmented control of the brand's buttons; the chosen one in full navy */
.ementa-filtro { display: grid; gap: var(--space-xs); align-content: start; border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-s); }
.no-js .ementa-filtro { display: none; }
.filtro { display: flex; flex-wrap: wrap; align-items: center; }
.filtro-rotulo { flex-basis: 100%; margin-bottom: var(--space-2xs); font-size: var(--step--1); font-weight: var(--weight-label); color: var(--color-text-muted); }
.filtro button {
  flex: 1 1 auto;
  min-height: var(--tap); padding: 0 var(--space-s);
  border: var(--rule) solid var(--color-rule); border-left-width: 0; border-radius: var(--radius);
  background: transparent; color: var(--color-text); cursor: pointer;
  font-size: var(--step--1); font-weight: var(--weight-label); line-height: 1.2;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
/* one 2 px rule between two buttons, without overlapping them (touch targets stay whole) */
.filtro-rotulo + button { border-left-width: var(--rule); }
.filtro button[aria-pressed="true"] { background: var(--color-action); color: var(--color-action-text); }
.filtro button:focus-visible { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) { .filtro button:active { transform: scale(.97); } }
@media (hover: hover) and (pointer: fine) { .filtro button[aria-pressed="false"]:hover { background: var(--color-ghost-hover); } }
.filtro-contagem { min-height: 1.6em; font-weight: var(--weight-label); color: var(--color-accent-text); font-variant-numeric: var(--numeric); }

/* ---------- the section guide: stays on screen while the menu scrolls ----------
   Wide screens: every section in one row on a navy rule, the current one in red with a red bar (the header's
   own navigation). Phone and tablet: one bar with the current section; tapping it opens every section at once,
   in a grid (never a strip that scrolls sideways and hides some). Without JavaScript: the list, wrapped. */
.ementa-guia { background: var(--color-surface); z-index: 5; }
.js .ementa-guia { position: sticky; top: 0; }
.ementa-guia-linha { position: relative; }
.ementa-guia-linha::after {
  content: ""; position: absolute; left: var(--space-gutter); right: var(--space-gutter); bottom: 0;
  height: var(--rule); background: var(--color-rule);
}
.ementa-guia-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); }
.ementa-guia-nav a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: var(--guia-h);
  font-size: var(--step--1); font-weight: var(--weight-label); line-height: 1.2;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  text-decoration: none;
  transition: color var(--dur-hover) ease;
}
.ementa-guia-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 4px; background: transparent;
  transition: background-color var(--dur-hover) ease;
}
.ementa-guia-nav a[aria-current] { color: var(--color-accent-text); }
.ementa-guia-nav a[aria-current]::after { background: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .ementa-guia-nav a:not([aria-current]):hover::after { background: var(--color-text); }
  .ementa-guia-botao:hover { background: var(--color-ghost-hover); }
}
.ementa-guia-botao { display: none; }
/* press feedback on touch, where there is no hover */
.ementa-guia-botao:active, .ementa-guia.is-compacta .ementa-guia-nav a:active { background: var(--color-ghost-hover); }

/* compact: set by ementa.js below 1240 px, and on a wide screen whose row would wrap (long names, text at
   200 %). Before the script decides, a narrow screen shows the bare bar, never the wrapped list. */
@media (max-width: 1239.98px) { .js .ementa-guia:not(.is-pronta) .ementa-guia-nav { visibility: hidden; height: var(--guia-h); overflow: hidden; } }
.ementa-guia.is-compacta .ementa-guia-botao {
  display: flex; align-items: center; gap: var(--space-2xs);
  width: calc(100% + 2 * var(--space-2xs)); min-height: var(--guia-h); padding: 0 var(--space-2xs);
  margin-inline: calc(-1 * var(--space-2xs));
  border: 0; border-radius: var(--radius); background: transparent; color: var(--color-text); cursor: pointer;
  text-align: left;
  transition: background-color var(--dur-hover) ease;
}
.ementa-guia-rotulo {
  flex: none; font-size: var(--step--1); font-weight: var(--weight-label); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.ementa-guia-atual {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--weight-heading); color: var(--color-accent-text);
}
.ementa-guia-botao .ic { transition: transform var(--dur-micro) var(--ease-out); }
.ementa-guia-botao[aria-expanded="true"] .ic { transform: rotate(180deg); }
.ementa-guia.is-compacta .ementa-guia-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100svh - var(--guia-h) - 72px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-2xs) var(--space-gutter) var(--space-s);
  background: var(--color-surface);
  border-bottom: var(--rule) solid var(--color-rule);
}
.ementa-guia.is-compacta.is-aberta .ementa-guia-nav { display: block; }
.ementa-guia.is-compacta .ementa-guia-nav ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 0 var(--space-m); }
.ementa-guia.is-compacta .ementa-guia-nav li { border-bottom: var(--rule-soft) solid var(--color-rule-soft); }
.ementa-guia.is-compacta .ementa-guia-nav a { display: flex; width: 100%; min-height: 48px; }
.ementa-guia.is-compacta .ementa-guia-nav a::after { content: none; }
.ementa-guia.is-compacta .ementa-guia-nav a[aria-current] { font-weight: var(--weight-heading); }
@media (prefers-reduced-motion: reduce) { .ementa-guia-botao .ic { transition: none; } }

/* ---------- sections ---------- */
/* on the phone the menu is the last block of the page (the closing hides): the footer's margin is the only gap */
.ementa-corpo { padding-bottom: 0; }
/* a jump lands the section's rule (or its band) just under the guide: the section's own top padding is taken
   back from the margin, and html keeps its scroll-padding-top of --space-m (site.css) */
.ementa-seccao:not(.banda) { padding-top: var(--space-xl); scroll-margin-top: calc(var(--guia-h) - var(--space-xl)); }
.ementa-seccao-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m) var(--space-l); align-items: start; }
.ementa-seccao:not(.banda) .ementa-seccao-corpo { border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-m); }
.ementa-seccao-cabeca { display: grid; gap: var(--space-2xs); grid-column: 1 / -1; }
.ementa-seccao-cabeca .t2, .ementa-seccao-cabeca .t-caixa { margin-bottom: 0; }
.ementa-intro { color: var(--color-text-muted); max-width: 52ch; }
.ementa-t-pequeno, .ementa-t-sub {
  font-size: var(--step-2); font-weight: var(--weight-heading); line-height: var(--leading-heading);
  text-transform: uppercase; letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
}
.ementa-nota-alergenios { margin-top: var(--space-2xs); color: var(--color-text); }
.ementa-seccao .pratos { grid-column: 1 / -1; column-gap: var(--space-l); }
.ementa-seccao .pratos:empty { display: none; }
/* the navy band (site.css .banda: the box inside the gutters on the phone, edge to edge from 760 px) */
.ementa-seccao.banda { margin-top: var(--space-xl); scroll-margin-top: var(--guia-h); }
.ementa-faixa { margin-top: var(--space-2xl); }
.ementa-faixa + .ementa-seccao:not(.banda) { padding-top: var(--space-2xl); scroll-margin-top: calc(var(--guia-h) - var(--space-2xl)); }
.ementa-faixa + .ementa-seccao:not(.banda) .ementa-seccao-corpo { border-top: 0; padding-top: 0; }

/* the photograph: a piece of the azulejo (site.css .foto), beside the dish it shows */
.ementa-foto { width: min(68%, 18rem); justify-self: start; }
.ementa-foto.foto--quarto { width: min(64%, 17rem); }

/* below 1100 px the photograph keeps its approved place, under the section title, even when the source puts it
   after the list (beside its dish in the computer's column) */
@media (max-width: 1099.98px) {
  .ementa-seccao--foto-fim .ementa-seccao-cabeca { order: 1; }
  .ementa-seccao--foto-fim .ementa-foto { order: 2; }
  .ementa-seccao--foto-fim .pratos { order: 3; }
  .ementa-seccao--foto-fim .ementa-vazio { order: 4; }
}

/* a row of sections: on the computer its columns sit side by side, like the paper menu */
.ementa-coluna, .ementa-linha > .ementa-seccao { min-width: 0; }

/* ---------- drinks: a red title, then the house's blocks ---------- */
.ementa-subs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-l); grid-column: 1 / -1; align-items: start; }
.ementa-sub { display: grid; gap: var(--space-2xs); min-width: 0; scroll-margin-top: var(--guia-h); }
.ementa-sub .pratos { margin-top: var(--space-2xs); }
.ementa-sub--caixa { padding: var(--space-m) clamp(20px, 3vw, 32px) var(--space-s); }

/* ---------- empty state: a filter that leaves a section with nothing ---------- */
.ementa-vazio {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: var(--space-2xs);
  max-width: 60ch; padding-block: var(--space-2xs);
  color: var(--color-text-muted);
}
.ementa-vazio::before {   /* the pattern's square, as in the site's lists */
  content: ""; flex: none; width: .42em; height: .42em; margin-top: .6em; background: var(--red);
}
/* a section the filter leaves empty loses its photograph too */
.ementa-seccao:has(.ementa-vazio:not([hidden])) .ementa-foto { display: none; }

/* ---------- closing (wide screens only: on the phone «Reservar mesa» lives in the bottom bar) ---------- */
/* no space below: the footer brings its own --space-section */
.ementa-fecho {
  display: none;
  padding-block: var(--space-xl) 0;
}
.ementa-fecho .t2 { margin: 0; }

/* ---------- widths ---------- */
@media (max-width: 759.98px) {
  .filtro button { padding: 0 var(--space-xs); }
}
@media (max-width: 359.98px) {
  .filtro button { padding: 0 6px; letter-spacing: 0; }
  .ementa-letras { gap: var(--space-2xs) var(--space-s); }
  .ementa-seccao.banda, .ementa-sub--caixa { padding-inline: var(--space-s); }
}
/* tablet: one section under the other, the dishes in two columns, the photograph beside the title */
@media (min-width: 760px) {
  .ementa-abertura { padding-top: var(--space-3xl); }
  .ementa-ferramentas { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-l); }
  .ementa-fonte { grid-column: 1 / -1; }
  .ementa-alergenios-nota, .ementa-legenda { grid-column: 1 / span 7; }
  .ementa-filtro { grid-column: 8 / -1; grid-row: 2 / span 2; }
  .filtro-rotulo { flex-basis: 100%; }
  .ementa-seccao .pratos:not(.pratos--simples) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 64px); }
  .ementa-seccao .pratos:not(.pratos--simples) > .prato:nth-last-child(2):nth-child(odd) { border-bottom: 0; }   /* the last row ends on one line */
  .ementa-sub .pratos { grid-template-columns: minmax(0, 1fr) !important; }
  .ementa-seccao-corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ementa-seccao--foto .ementa-foto { grid-column: 2; grid-row: 1; justify-self: end; width: min(100%, 16rem); }
  .ementa-seccao--foto .ementa-seccao-cabeca { grid-column: 1; }
  .ementa-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ementa-fecho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); }
}
/* the computer, from 1100 px, as the paper menu: the title beside the tools; couvert, soup and salads, the cold
   and the hot mezze in three columns; main courses and desserts as navy bands from edge to edge with the dishes
   in two columns; sides and sauces, and the drinks, in the same three columns */
@media (min-width: 1100px) {
  .ementa-topo {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 48px);
    align-items: start; padding-top: var(--space-3xl); padding-bottom: var(--space-xl);
  }
  .ementa-abertura { grid-column: 1 / span 6; padding: 0; }
  .ementa-ferramentas { grid-column: 8 / -1; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); padding-bottom: 0; }
  .ementa-ferramentas > * { grid-column: 1 / -1; grid-row: auto; }
  .ementa-fonte { margin-top: 0; }

  .ementa-linha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 3vw, 64px); align-items: start; }
  .ementa-linha--unica { display: block; }
  .ementa-linha--unica .pratos:not(.pratos--simples) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ementa-coluna .ementa-seccao-corpo { grid-template-columns: minmax(0, 1fr); }
  .ementa-coluna .ementa-seccao-cabeca { grid-column: 1 / -1; }
  .ementa-coluna .pratos:not(.pratos--simples) { grid-template-columns: minmax(0, 1fr); }
  .ementa-coluna .pratos:not(.pratos--simples) > .prato:nth-last-child(2):nth-child(odd) { border-bottom: var(--rule-soft) solid var(--color-rule-soft); }
  .ementa-coluna .ementa-foto { grid-column: 1 / -1; grid-row: auto; justify-self: start; width: min(78%, 22rem); }
  .ementa-coluna .ementa-foto.foto--quarto { width: min(66%, 18rem); }

  /* the bands: the dishes in the paper menu's two columns, the photograph in a column of its own */
  .ementa-seccao.banda .ementa-seccao-corpo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 48px); }
  .ementa-seccao.banda .ementa-seccao-cabeca, .ementa-seccao.banda .pratos { grid-column: 1 / -1; }
  .ementa-seccao.banda.ementa-seccao--foto .pratos { grid-column: 1 / span 8; grid-row: 2; }
  .ementa-seccao.banda.ementa-seccao--foto .ementa-foto { grid-column: 10 / -1; grid-row: 2 / span 2; justify-self: stretch; width: auto; }
  .ementa-seccao.banda.ementa-seccao--foto .ementa-vazio { grid-column: 1 / span 8; }

  .ementa-subs { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 3vw, 64px); }
}
/* 1100 to 1279 px: a column is about 300 px wide, so the letters go under the name (the dish's narrow form,
   as under 375 px) and the name keeps room for its words */
@media (min-width: 1100px) and (max-width: 1279.98px) {
  .ementa-coluna .prato-cabeca { column-gap: var(--space-xs); }
  .ementa-coluna .prato-valor { display: contents; }
  .ementa-coluna .prato-valor .preco { order: 2; }
  .ementa-coluna .prato-valor .prato-letras { order: 3; grid-column: 1 / -1; }
}
/* the guide in one row: the sections spread over the whole width */
@media (min-width: 1240px) {
  .ementa-guia:not(.is-compacta) .ementa-guia-nav ul { justify-content: space-between; }
}