/* /carta (owner: page-carta). The menu: the sign on the terracota wall, the notices, the section index (a castanho
   bar that stays at the top on the phone, a list beside the menu from 64em), the parts and sections with the dish
   lines of site.css (.md-dish), the wall of two dish photos, the end notes and «Buon appetito».
   Tokens and shared classes come from tokens.css and site.css and are not redefined here. The terracota carries only
   the castanho sign and the castanho frames; nothing black touches it. */

.carta-sec { --carta-barra-h: 52px; padding-block: 0 var(--md-s-section); }

/* ---------- the opening: the page title as the sign of the façade ---------- */

.carta-abertura { padding-block: clamp(32px, 4.5vw, 60px); }
.carta-abertura__letreiro { width: auto; min-width: min(100%, 20rem); padding: clamp(14px, 2.6vw, 24px) clamp(32px, 7vw, 72px); }
.carta-abertura__titulo { color: var(--md-cream); text-align: center; }

/* ---------- layout: index beside the menu from 64em ---------- */

.carta__grelha { display: grid; }
.carta__corpo { min-width: 0; container-type: inline-size; }

@media (min-width: 64em) {
  .carta-sec { --carta-barra-h: 0px; padding-top: var(--md-s-8); }
  .carta__grelha { grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
}

/* ---------- the section index ---------- */

/* Phone and tablet: a castanho bar stuck to the top of the screen; the button opens the list of sections under it.
   Without JavaScript the button stays hidden and the list sits open in the page, in the same castanho. */
.carta-indice { position: relative; z-index: 10; margin-inline: calc(-1 * var(--md-s-gutter)); background: var(--md-brown); color: var(--md-cream); --md-focus: var(--md-cream); }
.js .carta-indice { position: sticky; top: 0; }

.carta-indice__botao {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: var(--carta-barra-h); padding: 0 var(--md-s-gutter);
  border: 0; background: var(--md-brown); color: var(--md-cream);
  font: 600 1.0625rem / 1.2 var(--md-font-text); text-align: left; cursor: pointer;
  transition: background-color var(--md-dur-hover) ease;
}
.carta-indice__botao[hidden] { display: none; }
.carta-indice__botao:active { background: var(--md-brown-deep); }
.carta-indice__botao:focus-visible { outline: 2px solid var(--md-cream); outline-offset: -5px; }
.carta-indice__botao > .ico { width: 22px; height: 22px; }
.carta-indice__rotulo { font-weight: 400; }
.carta-indice__atual { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carta-indice__seta { display: grid; place-items: center; width: 24px; height: 24px; transition: transform var(--md-dur-ui) var(--md-ease-out); }
.carta-indice__seta .ico { width: 20px; height: 20px; }
.carta-indice.is-aberto .carta-indice__seta { transform: rotate(180deg); }

.carta-indice__painel { padding: var(--md-s-3) var(--md-s-gutter) var(--md-s-5); }
.js .carta-indice__painel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: none;
  max-height: calc(100dvh - var(--carta-barra-h) - var(--barra-h) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--md-brown);
  border-top: 1px solid var(--linha-creme);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--md-dur-drawer-out) var(--md-ease-drawer), display var(--md-dur-drawer-out) allow-discrete;
}
.js .carta-indice.is-aberto .carta-indice__painel {
  display: block; clip-path: inset(0);
  transition: clip-path var(--md-dur-drawer-in) var(--md-ease-drawer), display var(--md-dur-drawer-in) allow-discrete;
}
@starting-style { .js .carta-indice.is-aberto .carta-indice__painel { clip-path: inset(0 0 100% 0); } }
/* reduced motion: the list appears and goes at once, the caret flips without turning */
@media (prefers-reduced-motion: reduce) {
  .js .carta-indice__painel, .js .carta-indice.is-aberto .carta-indice__painel, .carta-indice__seta { transition: none; }
}

.carta-indice__grupo + .carta-indice__grupo { margin-top: var(--md-s-4); }
.carta-indice__parte { margin-bottom: var(--md-s-2); font: 600 var(--md-t-small) / 1.3 var(--md-font-text); }
.carta-indice__parte a { display: inline-flex; align-items: center; min-height: 36px; color: inherit; text-decoration: none; }
.carta-indice__lista { display: flex; flex-wrap: wrap; gap: var(--md-s-2); list-style: none; }
.carta-indice__ligacao {
  display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 14px;
  border: 1px solid var(--linha-creme); border-radius: var(--md-r-button);
  color: var(--md-cream); font: 500 1rem / 1.2 var(--md-font-text); text-decoration: none;
  transition: background-color var(--md-dur-hover) ease, border-color var(--md-dur-hover) ease;
}
.carta-indice__ligacao:active { background: var(--md-brown-deep); }
.carta-indice__ligacao[aria-current] { background: var(--md-paper); border-color: var(--md-paper); color: var(--md-brown); font-weight: 600; }
.carta-indice a:focus-visible { outline: 2px solid var(--md-cream); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .carta-indice__botao:hover { background: var(--md-brown-deep); }
  .carta-indice__ligacao:not([aria-current]):hover { border-color: var(--md-cream); }
  .carta-indice__parte a:hover { text-decoration: underline; }
}

/* From 64em: a plain list beside the menu, stuck under the top edge; scrolls on its own when taller than the screen.
   The section in view is castanho and 600, with one dash of the seal's ring in front. */
@media (min-width: 64em) {
  .carta-indice, .js .carta-indice {
    position: sticky; top: var(--md-s-5);
    max-height: calc(100vh - 2 * var(--md-s-5)); overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 4px var(--md-s-2) 4px 4px;   /* room for the focus ring inside the scroll box */
    background: none; color: var(--md-text); --md-focus: var(--md-brown);
    scrollbar-width: thin; scrollbar-color: var(--md-rule) transparent;
  }
  .carta-indice__botao, .carta-indice__botao:not([hidden]) { display: none; }
  .carta-indice__painel, .js .carta-indice__painel {
    position: static; display: block; max-height: none; overflow: visible;
    padding: 0; background: none; border: 0; clip-path: none; transition: none;
  }
  .carta-indice__grupo + .carta-indice__grupo { margin-top: var(--md-s-5); }
  .carta-indice__parte { margin-bottom: var(--md-s-1); font: 400 1.25rem / 1.2 var(--md-font-display); }
  .carta-indice__parte a { min-height: 32px; }
  .carta-indice__lista { display: block; }
  .carta-indice__ligacao {
    position: relative; display: flex; min-height: 32px; padding: 4px 0 4px 18px;
    border: 0; border-radius: 0; color: var(--md-text); font: 400 var(--md-t-small) / 1.35 var(--md-font-text);
  }
  .carta-indice__ligacao[aria-current] { background: none; color: var(--md-brown); font-weight: 600; }
  .carta-indice__ligacao[aria-current]::before {
    content: ""; position: absolute; left: 0; top: 50%; width: var(--md-line-dash-length); height: var(--md-line-dash-thickness);
    margin-top: calc(var(--md-line-dash-thickness) / -2); border-radius: 2px; background: currentColor;
  }
  .carta-indice a:focus-visible { outline: 2px solid var(--md-brown); outline-offset: 2px; }
  .carta-indice__ligacao:active { background: none; color: var(--md-brown); }
  @media (hover: hover) and (pointer: fine) {
    .carta-indice__ligacao:not([aria-current]):hover { color: var(--md-brown); text-decoration: underline; text-underline-offset: 0.2em; }
  }
}
/* touch screens of 64em and more (a tablet on its side): the targets keep 44 px */
@media (min-width: 64em) and (pointer: coarse) {
  .carta-indice__ligacao, .carta-indice__parte a { min-height: 44px; }
}

/* ---------- the notices on top: the date of the menu and the allergens, at reading size ---------- */

.carta-avisos { display: grid; gap: var(--md-s-3); max-width: 44rem; margin-block: var(--md-s-6) var(--md-s-7); }
.carta-aviso { display: flex; gap: var(--md-s-3); align-items: flex-start; }
.carta-aviso .ico { width: 1.3em; height: 1.3em; margin-top: 0.12em; color: var(--md-brown); }
.carta-aviso--data { font-size: var(--md-t-lead); line-height: var(--md-lh-lead); }
.carta-aviso--alergenios { font-weight: 600; }
@media (min-width: 64em) { .carta-avisos { margin-top: 0; } }

/* ---------- parts and sections ---------- */

.carta-parte__filete { margin-block: var(--md-s-9) var(--md-s-7); }
.carta-parte__titulo { margin-bottom: var(--md-s-5); scroll-margin-top: calc(var(--carta-barra-h) + var(--md-s-3)); }
.carta-parte__titulo:focus { outline: 0; }
.carta-parte__titulo:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 4px; }

.carta-seccao { margin-top: var(--md-s-8); scroll-margin-top: calc(var(--carta-barra-h) + var(--md-s-3)); }
.carta-parte__titulo + .carta-seccao { margin-top: 0; }
.carta-seccao__cabeca { display: grid; gap: var(--md-s-1); margin-bottom: var(--md-s-4); }
.carta-seccao__titulo:focus { outline: 0; }
.carta-seccao__titulo:focus-visible { outline: 2px solid var(--md-focus); outline-offset: 4px; }
.carta-seccao__sub { color: var(--md-text-muted); font-size: var(--md-t-small); line-height: var(--md-lh-small); }
.carta-seccao__nota { max-width: 58ch; margin-top: var(--md-s-2); font-size: var(--md-t-small); line-height: var(--md-lh-small); }
.carta-seccao__nota--fim { margin-top: var(--md-s-4); color: var(--md-text-muted); }

/* «Voltar às secções»: only without JavaScript and below 64em, where the list does not follow the page */
.carta-subir { display: none; margin-top: var(--md-s-2); }
.no-js .carta-subir { display: block; }
.carta-subir .ligacao .ico { margin: 0 0.35em 0 0; }
@media (min-width: 64em) { .no-js .carta-subir { display: none; } }

/* ---------- the dish lines: .md-dish from site.css ---------- */

/* one column keeps the price close to the name (36rem at most); from a 40rem menu column, two columns */
.carta-pratos { display: grid; max-width: 36rem; list-style: none; border-bottom: 1px solid var(--md-rule); }
@container (min-width: 40rem) {
  .carta-pratos { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--md-s-7); }
}
.prato { align-content: start; }
.prato__nome { min-width: 0; overflow-wrap: break-word; }
.prato__preco { display: grid; justify-items: end; align-content: start; text-align: right; }
.prato__porcao { font: 400 var(--md-t-credit) / var(--md-lh-credit) var(--md-font-text); color: var(--md-text-muted); white-space: nowrap; }
.prato__marcas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px var(--md-s-4); margin-top: var(--md-s-1); font: 400 var(--md-t-credit) / var(--md-lh-credit) var(--md-font-text); color: var(--md-text-muted); }
.prato__marca { display: inline-flex; align-items: center; gap: 6px; }
.prato__marca .md-peels { width: 1.15rem; color: var(--md-brown); }
.prato__marca .ico { width: 1.15rem; height: 1.15rem; color: var(--md-brown); }

/* «Esgotado hoje»: .prato__esgotado and .md-dish.is-esgotado live in site.css (shared with the home page's highlights) */

/* ---------- the wall: two dish photos hung on the terracota (frames and shadow castanho, credits on paper tags) ---------- */

.carta-parede { margin: var(--md-s-8) calc(-1 * var(--md-s-gutter)) 0; padding: clamp(40px, 7vw, 72px) var(--md-s-gutter); }
.carta-parede .md-hang-pair { width: min(100%, 50rem); }
.carta-parede .md-frame:first-child { --md-tilt: -1.1deg; }
.carta-parede .md-frame:last-child { --md-tilt: 0.9deg; }
@media (min-width: 64em) { .carta-parede { margin-inline: 0; } }

/* ---------- the end of the menu ---------- */

.carta-fim { display: grid; gap: var(--md-s-3); max-width: 46rem; margin-top: var(--md-s-8); }
.carta-fim .md-rule-dots { margin: 0 0 var(--md-s-4); }
.carta-fim__nota { max-width: 62ch; }

.carta--vazia { padding-block: var(--md-s-7); max-width: 44rem; }

/* «Buon appetito», as the printed menu closes; Gloock at display size is kept for one phrase like this */
.carta-fecho { padding-top: 0; }
.carta-fecho__corpo { display: grid; justify-items: center; gap: var(--md-s-5); text-align: center; }
.carta-fecho__despedida { font: 400 var(--md-t-display) / var(--md-lh-display) var(--md-font-display); letter-spacing: var(--md-tr-display); text-wrap: balance; }
.carta-fecho__pas { width: 3rem; color: var(--md-brown); }
.carta-fecho .acoes { justify-content: center; }
.carta-fecho__nota { max-width: 40ch; }