/* Meza.Libaneza: the site. Owner: shell. Needs /assets/fonts/fonts.css and /assets/css/tokens.css (a copy of
   brand/tokens.css) before it. Direction «Ementa de papel»: the house menu gaining a screen. Cream paper, navy
   ink, the azulejo band between sections, full navy boxes for the strong blocks, Poppins caps, square corners,
   flat. Components as site/identidade/ shows them; a page's own CSS (assets/css/<id>.css) reads these tokens
   and classes and never redefines a token. Motion (reveals, page changes) lives in motion.css (worker motion);
   here only the state transitions that belong to a component (hover, press, the menu opening).

   Contents: base · layout · type · cut letter · buttons and links · band · navy box · photograph · hours ·
   rating · dish · skip link and demo strip · header · phone menu · footer · action bar · shell pages · widths */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--color-surface);
  scroll-padding-top: var(--space-m);
  scrollbar-color: var(--navy-soft) var(--cream-deep);
}
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--weight-text) var(--step-0)/var(--leading-body) var(--font-text);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
main { display: block; flex: 1 0 auto; overflow-x: clip; }   /* a photo that bleeds to the screen edge (.foto--sangra) never adds a sideways scroll */
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; font-size: inherit; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0; }
p, li, dd, dt { text-wrap: pretty; }   /* no line ends on one lone word, lists and hours included */
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
a, button, summary, [role="button"] { touch-action: manipulation; }
button, .btn, summary { user-select: none; -webkit-user-select: none; }
input, select, textarea { font: inherit; font-size: max(16px, 1em); color: inherit; }
[hidden] { display: none !important; }
:target { scroll-margin-top: var(--space-m); }
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ic { width: var(--icon-size); height: var(--icon-size); fill: currentColor; flex: none; }
.num, .preco, time, .horas { font-variant-numeric: var(--numeric); }
.junto { white-space: nowrap; }
.par { display: inline-block; max-width: 100%; }   /* the last two words of a block, kept together by montar.mjs (semOrfas) */
/* focus on navy surfaces turns cream through the role tokens (tokens.css); never removed */
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--space-gutter));
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.wrap--estreito { max-width: calc(var(--wrap-narrow) + 2 * var(--space-gutter)); }
.seccao { padding-block: var(--space-section); }
.seccao--curta { padding-block: var(--space-xl); }
/* the 12-column grid of the wide screen (largura.md): one column on the phone and the tablet, 12 from 960 px.
   Children take .col-N (span N) and, when they do not start right after the previous one, .ini-N (first column).
   Text keeps its measure inside a wide column: .texto and .lead have a max-width in characters. */
.grelha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl) var(--space-m); }
@media (min-width: 960px) {
  .grelha { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.4vw, 48px); }
  .grelha > * { grid-column: 1 / -1; }
  .grelha > .col-3 { grid-column: auto / span 3; }
  .grelha > .col-4 { grid-column: auto / span 4; }
  .grelha > .col-5 { grid-column: auto / span 5; }
  .grelha > .col-6 { grid-column: auto / span 6; }
  .grelha > .col-7 { grid-column: auto / span 7; }
  .grelha > .col-8 { grid-column: auto / span 8; }
  .grelha > .col-9 { grid-column: auto / span 9; }
  .grelha > .ini-1 { grid-column-start: 1; }
  .grelha > .ini-2 { grid-column-start: 2; }
  .grelha > .ini-5 { grid-column-start: 5; }
  .grelha > .ini-6 { grid-column-start: 6; }
  .grelha > .ini-7 { grid-column-start: 7; }
  .grelha > .ini-8 { grid-column-start: 8; }
  .grelha > .ini-9 { grid-column-start: 9; }
  .grelha--centro { align-items: center; }
  .grelha--denso { grid-auto-flow: row dense; }
  .grelha--fim { align-items: end; }
}
/* a vertical stack: title, lead, actions */
.pilha { display: grid; gap: var(--space-m); justify-items: start; }
.pilha > .acoes { margin-top: var(--space-2xs); }
/* the gap above and below a band of the pattern that separates two sections */
.faixa-entre { margin-block: var(--pattern-band-gap); }

/* ---------- type (brand/brand-brief.md, «Letra») ---------- */
.titulo-pagina, .t2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  overflow-wrap: anywhere;
}
.titulo-pagina { font-size: var(--step-4); }
.titulo-pagina--inicio { font-size: var(--step-5); }    /* once on the site: the home page title */
.t2 { font-size: var(--step-3); margin-bottom: var(--space-m); }
.t2--vermelho, .titulo-pagina--vermelho { color: var(--red); }   /* 800 at 26 px and up: large text, 3.80:1 */
.t3 { font-size: var(--step-1); font-weight: var(--weight-heading); line-height: var(--leading-ui); margin-bottom: var(--space-2xs); }
.t-caixa {
  font-size: var(--step-2);
  font-weight: var(--weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
  margin-bottom: var(--space-s);
}
.rotulo {
  font-size: var(--step--1);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-ui);
}
/* a title entering by lines (data-entra="linhas"): one .linha per real line, written by hand.
   The padding leaves room for accents above (Ã, Ó) and for the cut letter below. */
.linha { display: block; overflow: hidden; padding-block: .16em .06em; margin-block: -.16em -.06em; }
.linha > span { display: block; }
.lead { font-size: var(--step-1); line-height: 1.5; max-width: 52ch; }
.texto { max-width: var(--measure); }
.texto > * + * { margin-top: var(--space-s); }
.texto a, .lead a { text-decoration-color: currentColor; }
.nota { font-size: var(--step--1); color: var(--color-text-muted); max-width: 70ch; }
.lista { display: grid; gap: var(--space-2xs); }
.lista > li { position: relative; padding-left: 1.1em; }
.lista > li::before {     /* a square from the pattern, not a bullet dot */
  content: ""; position: absolute; left: 0; top: .62em;
  width: .42em; height: .42em; background: var(--red);
}

/* ---------- the cut letter (brand/fonts/specimen.html, class .cut) ----------
   Once per page, in a title of 26 px and up, on N or another letter that still reads as itself when its halves
   swap; never D, K, T, a symmetric letter or an accented one. The letter itself stays in the text:
   <span class="cut" data-l="n">n</span>. The halves sit swapped; motion.css may slide them in from whole. */
.cut { position: relative; display: inline-block; line-height: 1; -webkit-text-fill-color: transparent; }
.cut::before, .cut::after {
  content: attr(data-l);
  content: attr(data-l) / "";
  position: absolute; inset: 0; line-height: 1;
  -webkit-text-fill-color: currentColor;
  transition: transform var(--dur-cut-slide) var(--ease-out);
}
.cut::before {   /* bottom half of the letter, up into the top slot */
  clip-path: inset(calc(var(--cut-line) + var(--cut-gap) / 2) -0.2em -0.3em -0.2em);
  transform: translateY(calc(-1 * (var(--cut-shift) + var(--cut-gap) / 2)));
}
.cut::after {    /* top half of the letter, down into the bottom slot */
  clip-path: inset(-0.3em -0.2em calc(100% - var(--cut-line) + var(--cut-gap) / 2) -0.2em);
  transform: translateY(calc(var(--cut-shift) + var(--cut-gap) / 2));
}
.cut.is-whole::before, .cut.is-whole::after { transform: none; transition-duration: 0ms; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: var(--button-h); padding: var(--space-2xs) var(--space-m);
  border: var(--rule) solid var(--color-action); border-radius: var(--radius);
  background: var(--color-action); color: var(--color-action-text);
  font: var(--weight-label) var(--step--1)/1.25 var(--font-text);
  text-transform: uppercase; letter-spacing: var(--tracking-label); text-decoration: none;
  max-width: 100%; text-align: center; cursor: pointer;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.btn .ic { width: 1.35em; height: 1.35em; }
.btn--filete { background: transparent; color: var(--color-text); border-color: var(--color-rule); }
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--color-disabled-surface); border-color: var(--color-disabled-surface);
  color: var(--color-disabled-text); cursor: default; pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
  .btn--filete:hover { background: var(--color-ghost-hover); border-color: var(--color-rule); }
}
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }

/* a strong link: label, then an icon (arrow-right inside the site, arrow-up-right out of it) */
.ligacao {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: var(--tap);
  font-weight: var(--weight-label);
  text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.ligacao .ic { width: 1.15em; height: 1.15em; transition: transform var(--dur-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ligacao:hover { text-decoration-color: currentColor; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn:active, .barra-acao:active > span, .cabecalho-menu:active, .cabecalho-lingua:active { transform: scale(.97); }
}

/* ---------- the azulejo band (brand/padroes/, one module of height) ----------
   Separates sections; never behind text. <div class="faixa" aria-hidden="true"></div>, full width outside .wrap
   or inside it. On navy (.on-navy / data-surface="navy") the band drawn for navy swaps in by itself. */
.faixa {
  --faixa-h: var(--pattern-module);
  --faixa-img: url("/assets/img/padroes/faixa.svg");
  display: block;
  position: relative;
  height: var(--faixa-h);
  background: var(--faixa-img) left top / auto 100% repeat-x;
  overflow: hidden;
}
.on-navy .faixa, [data-surface="navy"] .faixa, .faixa--azul { --faixa-img: url("/assets/img/padroes/faixa-sobre-azul.svg"); }
.faixa--azul { background-color: var(--navy); }
.faixa--grande { --faixa-h: clamp(96px, 4rem + 8vw, 208px); }

/* ---------- the navy box (the menu's «Main courses») ---------- */
.caixa { padding: clamp(24px, 4vw, 56px); }
.caixa > :last-child { margin-bottom: 0; }

/* the band: a navy box from edge to edge of the screen on the computer, its content on the --wrap, like the
   «Main courses» strip of the paper menu. On the phone it stays the approved box inside the gutters.
   <section class="banda on-navy">…</section>, outside any .wrap (it is its own wrap). */
.banda { margin-inline: var(--space-gutter); padding: clamp(24px, 4vw, 56px); }
.banda > :last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .banda {
    margin-inline: 0;
    padding-block: clamp(48px, 5vw, 96px);
    padding-inline: max(var(--space-gutter), calc((100% - var(--wrap)) / 2));
  }
}

/* ---------- photograph: a piece of the azulejo (brand/fotografia/fotografia.css) ----------
   Whole, square cornered, in 1:1, 4:5 or 3:2, resting against a solid piece of the brand one module thick.
   No veils, gradients, frames, text over the picture or captions under it; the description goes in the alt.
     .foto            on a block of the text colour, offset one module down and right, red quarter circle in the free corner
     .foto--esquerda  the same, mirrored
     .foto--faixa     on a band of the pattern along the bottom edge (wide 3:2 photographs)
     .foto--quarto    cut as the quarter-circle tile (square dish photographs only, one per section) */
:root { --foto-faixa: url("/assets/img/padroes/faixa.svg"); }
[data-surface="navy"], .on-navy { --foto-faixa: url("/assets/img/padroes/faixa-sobre-azul.svg"); }
.foto {
  --foto-m: var(--pattern-module);
  --foto-bloco: var(--color-text);
  position: relative;
  display: block;
  margin: 0 var(--foto-m) var(--foto-m) 0;
  isolation: isolate;
}
.foto > img, .foto > picture > img { display: block; width: 100%; height: auto; border-radius: 0; }
.foto > picture { display: block; }
.foto::before {
  content: "";
  position: absolute;
  inset: var(--foto-m) calc(-1 * var(--foto-m)) calc(-1 * var(--foto-m)) var(--foto-m);
  background: var(--foto-bloco);
  z-index: -1;
}
.foto::after {
  content: "";
  position: absolute;
  right: calc(-1 * var(--foto-m));
  bottom: calc(-1 * var(--foto-m));
  width: var(--foto-m);
  height: var(--foto-m);
  background: var(--red);
  border-top-left-radius: 100%;
}
.foto--esquerda { margin: 0 0 var(--foto-m) var(--foto-m); }
.foto--esquerda::before { inset: var(--foto-m) var(--foto-m) calc(-1 * var(--foto-m)) calc(-1 * var(--foto-m)); }
.foto--esquerda::after { right: auto; left: calc(-1 * var(--foto-m)); border-top-left-radius: 0; border-top-right-radius: 100%; }
.foto--sem-quarto::after { content: none; }
.foto--faixa { margin: 0 0 var(--foto-m) 0; }
.foto--faixa::before {
  inset: auto 0 calc(-1 * var(--foto-m)) 0;
  height: var(--foto-m);
  background: var(--foto-faixa, var(--foto-bloco)) left center / auto 100% repeat-x;
  z-index: 0;
}
.foto--faixa::after { content: none; }
.foto--quarto > img, .foto--quarto > picture > img { aspect-ratio: 1; object-fit: cover; border-top-left-radius: 100%; }
.foto--quarto::after { content: none; }
/* a photograph that bleeds to the right edge of the screen (the home page's room): from 760 px the picture runs
   past the gutter to the edge, and its block and quarter circle move to the left. On the phone it is a plain .foto. */
@media (min-width: 760px) {
  .foto--sangra {
    --sangra: max(var(--space-gutter), calc((100vw - var(--wrap)) / 2));
    margin: 0 calc(-1 * var(--sangra)) var(--foto-m) var(--foto-m);
  }
  .foto--sangra::before { inset: var(--foto-m) var(--foto-m) calc(-1 * var(--foto-m)) calc(-1 * var(--foto-m)); }
  .foto--sangra::after { right: auto; left: calc(-1 * var(--foto-m)); border-top-left-radius: 0; border-top-right-radius: 100%; }
}

/* ---------- opening hours (encaixe horario / horario-curto, _partes/horario.mjs) ----------
   The hours as hours: no status sentence. Today is marked by assets/js/hoje.js with .is-hoje (colour and weight)
   and aria-current="date"; the «now» marker sits only on today's row and never on a closed day. */
.horario { max-width: 880px; }
.horario-resumo {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-m); margin-bottom: var(--space-l);
}
.horario-resumo div { display: contents; }
.horario-resumo dt { font-weight: var(--weight-label); }
.horario-resumo .is-fechado dd { color: var(--color-text-muted); }
.horario-avisos { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-l); }
.horario-avisos li { background: var(--color-surface-alt); padding: var(--space-xs) var(--space-s); font-weight: var(--weight-label); }
.regua {
  --nome-w: 3rem; --regua-gap: var(--space-xs);
  --eixo-de: 11; --eixo: 12;
  position: relative;
  container-type: inline-size;
}
.regua-dias { display: grid; gap: 6px; }
.regua-dia { display: grid; grid-template-columns: var(--nome-w) minmax(0, 1fr); gap: var(--regua-gap); align-items: center; height: 36px; }
.regua-nome { font-weight: var(--weight-label); font-size: var(--step--1); }
.regua-dia.is-hoje .regua-nome { color: var(--color-today); font-weight: var(--weight-display); }
.regua-pista { position: relative; height: 100%; border-bottom: var(--rule-soft) solid var(--color-rule-soft); }
.regua-bloco {
  position: absolute; top: 4px; bottom: 4px;
  left: calc((var(--de) - var(--eixo-de)) / var(--eixo) * 100%);
  width: calc((var(--ate) - var(--de)) / var(--eixo) * 100%);
  background: var(--color-text);
}
.regua-dia.is-fechado .regua-pista {
  display: flex; align-items: center; padding-left: var(--space-s);
  background: var(--color-closed-surface); border-bottom: 0;
}
.regua-fechado { font-size: var(--step--1); color: var(--color-closed-text); }
.regua-horas { position: relative; height: 1.8em; margin-left: calc(var(--nome-w) + var(--regua-gap)); margin-top: var(--space-2xs); }
.regua-horas > span {
  position: absolute; top: 0; left: calc((var(--h) - var(--eixo-de)) / var(--eixo) * 100%);
  transform: translateX(-50%); white-space: nowrap;
  font-size: var(--step--1); color: var(--color-text-muted); font-variant-numeric: var(--numeric);
}
.regua-agora {
  position: absolute; top: 0; bottom: 0; left: calc(var(--agora, 0) * 100%);
  width: 2px; margin-left: -1px; background: var(--color-now); z-index: 1;
}
.horario-notas { margin-top: var(--space-m); display: grid; gap: var(--space-3xs); font-size: var(--step--1); color: var(--color-text-muted); max-width: 60ch; }
@container (max-width: 34em) {    /* a narrow ruler with labels close together: only the first opening and the last closing */
  .regua-horas--apertada > span:not(.regua-ponta) { display: none; }
}
@container (max-width: 12em) {    /* a narrow ruler for its text size (320 px at 200 %): labels take turns */
  .regua-horas { height: 3.4em; }
  .regua-horas > span:nth-child(even) { top: 1.5em; }
  .regua-horas > span:last-child { transform: translateX(-100%); }
}
.horario-curto-lista { display: grid; gap: var(--space-2xs); }
.horario-curto-lista div { display: grid; }
.horario-curto-lista dt { font-weight: var(--weight-label); }
.horario-curto-lista .is-fechado dd { color: var(--color-text-muted); }
.horario-curto-lista .is-hoje dt, .horario-curto-lista .is-hoje dd { color: var(--color-today); font-weight: var(--weight-heading); }
.horario-curto-nota { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--color-text-muted); }
.on-navy .regua-dia.is-hoje .regua-nome, .on-navy .horario-curto-lista .is-hoje dt, .on-navy .horario-curto-lista .is-hoje dd { color: var(--cream); text-decoration: underline 2px; text-underline-offset: .3em; }

/* ---------- rating (encaixe avaliacoes, _partes/avaliacoes.mjs): a line with source and month, not a seal ---------- */
.avaliacoes { display: grid; gap: var(--space-s); }
.avaliacao { display: grid; gap: var(--space-3xs); justify-items: start; }
.avaliacao-linha { display: flex; align-items: center; gap: var(--space-xs); }
.avaliacao-nota {
  font-size: var(--step-3); font-weight: var(--weight-display); line-height: 1;
  letter-spacing: var(--tracking-display);
}
.avaliacao-texto { display: grid; line-height: var(--leading-ui); }
.avaliacao-escala { font-weight: var(--weight-label); }
.avaliacao-total { font-size: var(--step--1); color: var(--color-text-muted); }
.avaliacao-ligacao { font-size: var(--step--1); }

/* ---------- a dish of the menu (shared by /ementa and the highlights on the home page) ---------- */
.pratos { display: grid; }
/* a list of dishes in two columns from 1100 px (the paper menu's columns); one column below */
@media (min-width: 1100px) {
  .pratos--colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 64px); }
  .pratos--colunas > .prato:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.prato { padding-block: var(--space-s); border-bottom: var(--rule-soft) solid var(--color-rule-soft); }
.prato:last-child { border-bottom: 0; }
/* the name keeps at least 12 characters of width; when letters and price do not fit beside it, the letters drop
   under the price (still on the right) instead of squeezing the name into a column of syllables */
.prato-cabeca { display: grid; grid-template-columns: minmax(min(100%, 12ch), 1fr) fit-content(45%); align-items: baseline; gap: 0 var(--space-m); }
.prato-nome {
  min-width: 0; font-size: var(--step-1); font-weight: var(--weight-label); line-height: var(--leading-ui);
  text-wrap: balance;
  overflow-wrap: break-word;   /* breaks inside a word only when that word alone is wider than the line; no hyphens:auto,
                                  which would split dish names written as the house writes them (pt or en) */
}
.prato .preco { font-size: var(--step-1); font-weight: var(--weight-label); white-space: nowrap; justify-self: end; font-variant-numeric: var(--numeric); }
.prato-letras { font-size: var(--step--1); font-weight: var(--weight-label); letter-spacing: var(--tracking-label); color: var(--color-text-muted); margin-bottom: var(--space-3xs); }
/* the letters beside the price, right of the name, as on the paper menu (ementa.mjs, also the home page's highlights) */
.prato-valor {
  display: inline-flex; flex-flow: row-reverse wrap; justify-content: flex-start;
  align-items: baseline; gap: 0 var(--space-xs);
  justify-self: end; min-width: 0;
}
.prato-valor > * { white-space: nowrap; }
.prato-valor .preco { order: -1; }   /* reversed row: the price is the rightmost piece and the first line when it wraps */
.prato-valor .prato-letras { margin: 0; }
/* under 375 px (navy boxes included) name, letters and price no longer fit one line: the name takes the whole
   line and the letters and the price go to the line below, on the right (page-ementa, tested at 320 and 390) */
@media (max-width: 374.98px) {
  .prato-cabeca { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}
.prato-descricao, .prato-pt { line-height: 1.5; }
.prato-pt { color: var(--color-accent-text); }
.on-navy .prato-pt, [data-surface="navy"] .prato-pt { color: var(--mist); }
/* sold out today (marked in the staff panel, esgotado_hoje): the dish stays with its price; the name and the
   description dim and a line says it, with the prohibit icon */
.prato--esgotado .prato-nome, .prato--esgotado .prato-descricao { color: var(--color-text-muted); }
.prato-esgotado {
  display: flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-3xs);
  font-size: var(--step--1); font-weight: var(--weight-label); line-height: var(--leading-ui);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--color-accent-text);
}
.prato-esgotado .ic { width: 1.15em; height: 1.15em; }
.on-navy .prato-esgotado, [data-surface="navy"] .prato-esgotado { color: var(--cream); }   /* red never carries text on navy */

/* ---------- skip link and the demo strip ---------- */
.saltar {
  position: absolute; left: var(--space-gutter); top: var(--space-s); z-index: var(--z-skip-link);
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-s);
  background: var(--navy); color: var(--cream); font-weight: var(--weight-label); text-decoration: none;
  transform: translateY(calc(-100% - var(--space-l)));
}
.saltar:focus { transform: none; }
.saltar:focus-visible { outline-color: var(--navy); }
.faixa-demo { background: var(--color-surface-alt); font-size: var(--step--1); line-height: var(--leading-ui); }
.faixa-demo p { padding-block: var(--space-2xs); }

/* ---------- header: the top row of the menu (logo, then the band to the edge), then the navigation ---------- */
.cabecalho {
  --logo-h: 44px;
  view-transition-name: cabecalho;
  padding-top: var(--space-xs);
  background: var(--color-surface);
}
.cabecalho-topo, .menu-topo {
  display: flex; align-items: stretch; gap: var(--space-xs);
  height: var(--logo-h);
  padding-inline: var(--space-gutter);
}
.cabecalho-marca { flex: none; display: block; height: 100%; border-radius: 0; }
.cabecalho-marca .logo { width: auto; height: 100%; overflow: hidden; }
.cabecalho-faixa { --faixa-h: 100%; flex: 1 1 0; min-width: 0; margin-left: var(--space-2xs); }
.cabecalho-lingua, .cabecalho-menu {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); align-self: center;
  font-size: var(--step--1); font-weight: var(--weight-label); letter-spacing: var(--tracking-label);
  text-decoration: none; text-transform: uppercase;
  transition: background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.cabecalho-menu { border: var(--rule) solid var(--color-rule); background: transparent; padding: 0; cursor: pointer; }
.cabecalho-menu .ic { width: 24px; height: 24px; }
.cabecalho::after {        /* phone: the navy rule under the top row, inside the gutters */
  content: ""; display: block; height: var(--rule); background: var(--color-rule);
  margin: var(--space-xs) var(--space-gutter) 0;
}
.cabecalho-barra { display: none; }
.cabecalho-nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-l); }
.cabecalho-nav a, .cabecalho-outra-lingua {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 64px;
  font-size: var(--step--1); font-weight: var(--weight-label); line-height: 1;
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  text-decoration: none;
  transition: color var(--dur-hover) ease;
}
.cabecalho-nav a::after {  /* the current page: a red bar sitting on the navy rule */
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rule) - 1px);
  height: 4px; background: transparent;
  transition: background-color var(--dur-hover) ease;
}
.cabecalho-nav a[aria-current="page"] { color: var(--color-accent-text); }
.cabecalho-nav a[aria-current="page"]::after { background: var(--red); }
.cabecalho-outra-lingua { text-transform: none; letter-spacing: 0; }
.cabecalho-outra-lingua .ic { width: 1.25em; height: 1.25em; }
@media (hover: hover) and (pointer: fine) {
  .cabecalho-nav a:not([aria-current]):hover::after { background: var(--color-text); }
  .cabecalho-outra-lingua:hover { text-decoration: underline; }
  .cabecalho-menu:hover, .cabecalho-lingua:hover { background: var(--color-ghost-hover); }
}
/* without JavaScript and without invoker commands the menu cannot open: show the links instead */
.no-js .cabecalho-menu { display: none; }
.no-js .cabecalho-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-l); }
.no-js .cabecalho-barra .cabecalho-outra-lingua, .no-js .cabecalho-barra .cabecalho-reservar { display: none; }
.no-js .cabecalho::after { content: none; }
.no-js .cabecalho-barra { border-bottom: var(--rule) solid var(--color-rule); }

/* ---------- the phone menu: a modal dialog, full screen, the same top row with the close button ---------- */
.menu {
  --logo-h: 44px;
  position: fixed; inset: 0;
  width: 100%; max-width: none; height: 100dvh; max-height: none;
  margin: 0; padding: var(--space-xs) 0 calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: 0;
  background: var(--color-surface); color: var(--color-text);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu::backdrop { background: transparent; }
.menu .cabecalho-marca .logo { height: 100%; width: auto; }
.menu .cabecalho-faixa { margin-right: var(--space-2xs); }
.menu-nav { margin-top: var(--space-l); }
.menu-lista { border-top: var(--rule) solid var(--color-rule); }
.menu-lista a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
  min-height: 64px;
  border-bottom: var(--rule-soft) solid var(--color-rule-soft);
  font-size: var(--step-3); font-weight: var(--weight-display); line-height: 1.1;
  text-transform: uppercase; letter-spacing: var(--tracking-display);
  text-decoration: none;
}
.menu-lista a .ic { width: .8em; height: .8em; }
.menu-lista a[aria-current="page"] { color: var(--color-accent-text); }
.menu-pe { display: grid; justify-items: start; gap: var(--space-3xs); margin-top: var(--space-l); }
@media (prefers-reduced-motion: no-preference) {
  .menu {
    transition: opacity var(--dur-drawer-out) ease, transform var(--dur-drawer-out) var(--ease-drawer),
                overlay var(--dur-drawer-out) allow-discrete, display var(--dur-drawer-out) allow-discrete;
    opacity: 0; transform: translateY(-12px);
  }
  .menu[open] {
    opacity: 1; transform: none;
    transition-duration: var(--dur-drawer-in);
  }
  @starting-style { .menu[open] { opacity: 0; transform: translateY(-12px); } }
}
@media (prefers-reduced-motion: reduce) {
  .menu { transition: opacity var(--dur-fade-reduced) ease, overlay var(--dur-fade-reduced) allow-discrete, display var(--dur-fade-reduced) allow-discrete; opacity: 0; }
  .menu[open] { opacity: 1; }
  @starting-style { .menu[open] { opacity: 0; } }
}

/* ---------- footer: the bottom row of the menu (band from the edge, then the logo), the columns, the legal line ---------- */
.rodape {
  --logo-h: 44px;
  margin-top: var(--space-section);
  font-size: var(--step--1);
  line-height: 1.5;
}
.rodape-topo {
  display: flex; align-items: stretch; gap: var(--space-xs);
  height: var(--logo-h);
  padding-inline-end: max(var(--space-gutter), calc((100% - var(--wrap)) / 2));
}
.rodape-faixa { --faixa-h: 100%; flex: 1 1 0; min-width: 0; margin-right: var(--space-2xs); background-position: right top; }
.rodape-logo { flex: none; height: 100%; width: auto; }
.rodape-corpo { padding-block: var(--space-xl) calc(var(--space-xl) + var(--space-s)); }
.rodape-grelha {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--space-m);
}
.rodape-col { border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-xs); min-width: 0; }
.rodape-titulo {
  font-size: var(--step--1); font-weight: var(--weight-heading); line-height: var(--leading-ui);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-xs);
}
.rodape-morada { margin-bottom: var(--space-3xs); }
.rodape-lista a {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: var(--tap); max-width: 100%;
  text-decoration: underline; text-decoration-color: transparent;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-hover) ease;
}
.rodape-lista a[aria-current="page"] { color: var(--color-accent-text); font-weight: var(--weight-label); }
.rodape .ligacao { font-size: var(--step--1); }
@media (hover: hover) and (pointer: fine) { .rodape-lista a:hover { text-decoration-color: currentColor; } }
.rodape-legal {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-m);
  margin-top: var(--space-xl);
  color: var(--color-text-muted);
}
.rodape-legal p { border-top: var(--rule-soft) solid var(--color-rule-soft); padding-block: var(--space-xs); min-width: 0; }
.rodape-legal p:empty { display: none; }
.rodape-legal a { color: var(--color-text); font-weight: var(--weight-label); text-decoration-color: currentColor; display: inline-block; padding-block: 10px; margin-block: -10px; }

/* ---------- the phone action bar: only «Reservar mesa», stuck to the bottom of the screen ---------- */
.barra {
  view-transition-name: barra;
  position: sticky; bottom: 0; z-index: var(--z-action-bar);
  background: var(--navy);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.barra-acao {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 56px; padding-inline: var(--space-gutter);
  background: var(--navy); color: var(--cream);
  font-size: var(--step--1); font-weight: var(--weight-label);
  text-transform: uppercase; letter-spacing: var(--tracking-label); text-decoration: none;
  transition: background-color var(--dur-press) ease;
}
.barra-acao > span { transition: transform var(--dur-press) var(--ease-out); }
.barra-acao .ic { width: 1.35em; height: 1.35em; }
.barra-acao:active { background: var(--navy-raised); }
.barra-acao:focus-visible { outline-color: var(--cream); outline-offset: -6px; }
html:has(.barra) { scroll-padding-bottom: 72px; }   /* focus and anchors never land under the bar */

/* ---------- the shell's own pages: 404 and privacy ---------- */
.p404 { padding-block: var(--space-2xl) 0; }   /* the footer's own top margin closes the page */
.p404-texto { display: grid; gap: var(--space-m); justify-items: start; align-content: center; }
.p404-texto .lead { max-width: 44ch; }
.p404-texto .acoes { margin-top: var(--space-s); }
.p404-flor { display: none; }
@media (min-width: 960px) {
  .p404-flor { display: block; width: 100%; max-width: 400px; height: auto; justify-self: end; }
}
.legal { padding-block: var(--space-2xl) 0; }
.legal-topo { margin-bottom: var(--space-xl); }
.legal-lado { display: grid; gap: var(--space-m); align-content: start; }
.legal-lado .lead { max-width: 34ch; }
.legal-seccoes { display: grid; gap: var(--space-xl) clamp(24px, 2.4vw, 48px); }
@media (min-width: 1100px) { .legal-seccoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legal-seccao { border-top: var(--rule) solid var(--color-rule); padding-top: var(--space-s); }
.legal-seccao .t3 { margin-bottom: var(--space-xs); }
.legal-seccao .texto a { font-weight: var(--weight-label); overflow-wrap: anywhere; }
.legal-revisao { margin-top: var(--space-s); }

/* ---------- widths ---------- */
@media (max-width: 359px) {
  .cabecalho, .rodape, .menu { --logo-h: 40px; }
  .cabecalho-topo, .menu-topo { gap: var(--space-2xs); }
  .regua { --nome-w: 2.1rem; --regua-gap: 6px; }
  .regua-horas > span { letter-spacing: -0.02em; }
  .regua-min { display: none; }
}
@media (max-width: 400px) {
  .regua-min { display: none; }
}
@media (max-width: 640px) {
  .horario-resumo { grid-template-columns: minmax(0, 1fr); }
  .horario-resumo dd { margin-bottom: var(--space-2xs); }
  .regua { --nome-w: 2.4rem; --regua-gap: var(--space-2xs); }
  .regua-dia { height: 32px; }
}
@media (min-width: 560px) {
  .rodape-grelha, .rodape-legal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .barra { display: none; }
  .cabecalho { --logo-h: 56px; padding-top: var(--space-m); }
  .rodape { --logo-h: 56px; }
  .cabecalho-topo { padding-inline: max(var(--space-gutter), calc((100% - var(--wrap)) / 2)) 0; gap: var(--space-s); }
  .cabecalho-lingua, .cabecalho-menu { display: none; }
  .cabecalho::after { content: none; }
  .cabecalho-barra {
    display: flex; align-items: center; gap: var(--space-l);
    margin-top: var(--space-2xs);
  }
  .cabecalho-barra { position: relative; }
  .cabecalho-barra::before {   /* the navy rule, on the content edges */
    content: ""; position: absolute; left: var(--space-gutter); right: var(--space-gutter); bottom: 0;
    height: var(--rule); background: var(--color-rule);
  }
  .cabecalho-nav { align-self: stretch; display: flex; }
  .cabecalho-nav ul { flex-wrap: nowrap; }
  .cabecalho-nav a::after { bottom: 0; }
  .cabecalho-outra-lingua { margin-left: auto; }
  .cabecalho-reservar { flex: none; }
  .menu, .menu[open] { display: none; }
  .no-js .cabecalho-barra .cabecalho-outra-lingua, .no-js .cabecalho-barra .cabecalho-reservar { display: inline-flex; }
}
@media (min-width: 960px) {
  .rodape-grelha, .rodape-legal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rodape-grelha, .rodape-legal { column-gap: clamp(24px, 2.4vw, 48px); }
}
@media (min-width: 1200px) {
  .cabecalho, .rodape { --logo-h: 64px; }
  /* the footer uses the width: twelve columns, the pages side by side in two columns, and the legal line as one
     line under one rule, in the same columns as the blocks above */
  .rodape-grelha, .rodape-legal { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .rodape-grelha > :nth-child(1) { grid-column: 1 / span 3; }
  .rodape-grelha > :nth-child(2) { grid-column: 4 / span 3; }
  .rodape-grelha > :nth-child(3) { grid-column: 7 / span 3; }
  .rodape-grelha > :nth-child(4) { grid-column: 10 / span 3; }
  .rodape-grelha nav .rodape-lista { columns: 2; column-gap: var(--space-m); }
  .rodape-grelha nav .rodape-lista li { break-inside: avoid; }
  .rodape-legal { border-top: var(--rule-soft) solid var(--color-rule-soft); }
  .rodape-legal p { border-top: 0; }
  .rodape-legal > :nth-child(1) { grid-column: 1 / span 3; }
  .rodape-legal > :nth-child(2) { grid-column: 4 / span 3; }
  .rodape-legal > :nth-child(3) { grid-column: 7 / span 3; }
  .rodape-legal > :nth-child(4) { grid-column: 10 / span 3; }
}