/* ===========================================================================
   casa119.css — o piso da marca, compartilhado por todas as páginas.

   Duas camadas:
     TOKENS      cores, tipos, espaço. Mudar aqui rebranda o site inteiro.
     VOCABULÁRIO tipografia, utilitários, navegação das páginas internas.

   A página inicial (index.html) é uma peça de scroll com gramática própria e
   mantém o CSS dos capítulos e da comanda no próprio arquivo. Tudo que é da
   MARCA, e não daquela página, mora aqui.
   ========================================================================= */

:root {
  /* seis papéis de cor, um acento em dois níveis de claridade, porque o site
     corta entre fundos claros e escuros e um nível só não cobre os dois */
  --sc-canvas:     #17110E;
  --sc-surface:    #221915;
  --sc-ink:        #F4E7D6;
  --sc-ink-soft:   #C3AC97;
  --sc-accent:     #E8724F;
  --sc-accent-ink: #17110E;

  /* Montserrat é a tipografia secundária oficial do manual da marca e a única
     das quatro que existe em webfont livre. As corporativas (TAN Meringue e
     Luna) e a TAN Aegean são licenciadas: enquanto a casa não manda os
     arquivos woff2, os títulos ficam na Anton. */
  --sc-font-display: "Anton", "Montserrat", system-ui, sans-serif;
  --sc-font-text:    "Montserrat", system-ui, sans-serif;
  --sc-font-mono:    "Space Mono", ui-monospace, monospace;
  --f-mao:           "Caveat", "Montserrat", cursive;

  /* tintas por seção: a cor de cada capítulo/página, escurecida o suficiente
     para passar 4.5:1 sobre o papel creme. O vermelho e o verde vêm do manual
     da marca; as outras quatro são derivadas para dar ritmo aos capítulos. */
  --tinta-casa:        #9A0E07;   /* vermelho oficial */
  --tinta-bar:         #A93A20;
  --tinta-comidinhas:  #16432C;   /* verde oficial */
  --tinta-brunch:      #93472F;
  --tinta-tertulia:    #3F3A34;
  --tinta-programacao: #7A5407;
  --tinta-informacoes: #1B1310;

  --papel: #E6DAC4;               /* creme oficial */
  --r: 10px;

  /* A margem lateral do motor tem piso em rem, e rem cresce junto com o tamanho
     de fonte que a pessoa escolheu no navegador: a 200% a margem dobrava e
     comia 80px de uma tela de 390px. O piso aqui é em px para a margem parar de
     competir com o texto; o meio e o teto continuam escalando. */
  --sc-gutter: clamp(20px, 5vw, 5.5rem);
}

/* ======================================================= REFLUXO DE TEXTO ===
   O que segura o layout quando a pessoa sobe o tamanho de fonte do navegador
   (WCAG 1.4.4 pede até 200% sem perda de conteúdo).

   Um item de grid ou de flex tem `min-width: auto`, ou seja, nunca encolhe
   abaixo do tamanho do seu próprio conteúdo. Com a fonte dobrada, uma palavra
   como BRUSCHETTAS em caixa alta passa a ser mais larga do que o celular, a
   coluna se recusa a encolher e a página inteira ganha rolagem lateral. Daí
   `min-width: 0` nas caixas e quebra de palavra nos títulos.

   Medido por lab/acessibilidade.mjs. Mexer aqui pede rodar `npm test`. */
.wrap > *, .carta, .carta__secao, .itens, .item, .lista-fatos > div,
.destaques, .destaque, .agenda li, .rotulo, .vitrine, .peca {
  min-width: 0;
}

/* Dentro do conteúdo, nenhum item de grid ou de flex tem piso de largura
   automático. Quem precisa de um piso declara o seu (o carimbo, por exemplo,
   tem min-width próprio, e a classe vence este seletor de tag). O cabeçalho e
   a comanda ficam de fora: são faixas que rolam de propósito. */
main *, .rodape * { min-width: 0; }

/* Títulos: a palavra quebra antes de a página quebrar.
   `anywhere`, e não `break-word`: só o `anywhere` entra no cálculo da largura
   mínima. Com `break-word`, uma palavra como RESIDÊNCIA a 200% num celular de
   320px continuava mais larga que a tela e arrastava a coluna inteira junto.
   A hifenização deixa o corte com cara de português onde o navegador sabe. */
.d, .item__nome, .rotulo__nome, .agenda__oque, .destaque h3, .peca h2,
.hora-grande, .brunch__hora, .capa__nome {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* texto corrido também quebra a palavra quando ela sozinha não cabe na caixa.
   Só acontece em caso extremo (fonte a 200% num celular de 280px, dentro de um
   cartão), mas aí "exclusividade" era mais larga que o cartão inteiro. */
main p, main li, main dd, main dt, .rodape p { overflow-wrap: break-word; }
.txt { hyphens: auto; }

/* linha de cardápio: nome, pontilhado e preço. Quando os três não cabem, o
   preço desce em vez de empurrar a página. */
.item__linha { flex-wrap: wrap; }
.item__nome { min-width: 0; }
/* o pontilhado só faz sentido se sobrar linha para ele preencher */
.item__pontos { min-width: 2rem; }
/* "R$ 27" nunca quebra no meio; mas o preço que é frase ("10% na comanda")
   quebra, senão com a fonte a 200% ele sozinho é mais largo que o celular.
   Nessas linhas o pontilhado também abre mão do piso de 2rem: com a letra
   grande, ele e a frase juntos não cabiam na largura da coluna. */
/* as duas classes juntas: a regra geral de .item__preco mora mais abaixo no
   arquivo e, com a mesma especificidade, venceria esta */
.item__preco.item__preco--frase { white-space: normal; }
.item__linha:has(.item__preco--frase) .item__pontos { min-width: 0; }

/* pares rótulo/valor (horários, fatos da casa): quebram em duas linhas antes
   de estourar a caixa */
.horarios > div { flex-wrap: wrap; }
.horarios dt, .horarios dd,
.lista-fatos dt, .lista-fatos dd { min-width: 0; overflow-wrap: break-word; }

/* campos de formulário trazem uma largura própria herdada do HTML (o atributo
   `size`), que em grid vira piso e estoura a coluna */
input, select, textarea, button { min-width: 0; max-width: 100%; }

/* --------------------------------------------------------------- mundos --
   Cada página escolhe um fundo. `color` é reafirmado junto do token porque
   `color` herda como valor JÁ COMPUTADO: sem isso o texto mantém a tinta do
   body e a página inverte o fundo sem inverter a letra. */
.mundo--papel {
  --sc-canvas: var(--papel); --sc-surface: #E4D4BC;
  --sc-ink: #1B1310; --sc-ink-soft: #675343; --sc-accent: #9A0E07;
  /* texto sobre o tijolo é creme: o escuro do token raiz dá 2.8:1 aqui */
  --sc-accent-ink: #F7E9D5;
  background: var(--sc-canvas); color: var(--sc-ink);
}
.mundo--noite {
  --sc-canvas: #17110E; --sc-surface: #241A15;
  --sc-ink: #F4E7D6; --sc-ink-soft: #C3AC97; --sc-accent: #E8724F;
  background: var(--sc-canvas); color: var(--sc-ink);
}
.mundo--breu {
  --sc-canvas: #120F0D; --sc-surface: #1D1815;
  --sc-ink: #F4E7D6; --sc-ink-soft: #C3AC97; --sc-accent: #E8724F;
  background: var(--sc-canvas); color: var(--sc-ink);
}
.mundo--oliva {
  --sc-canvas: #16432C; --sc-surface: #1D5238;
  --sc-ink: #EFE6D2; --sc-ink-soft: #BDBA9A; --sc-accent: #E8A15F;
  background: var(--sc-canvas); color: var(--sc-ink);
}
.mundo--rosa {
  --sc-canvas: #F0D9CE; --sc-surface: #E5C7B8;
  --sc-ink: #2A1A14; --sc-ink-soft: #715345; --sc-accent: #A93A20;
  --sc-accent-ink: #F7E9D5;
  background: var(--sc-canvas); color: var(--sc-ink);
}
/* a adega: madeira escura de barril, com luz âmbar de garrafa. O vinho puro
   no fundo pesava demais; aqui a cor vem do lugar, não da bebida. Marrom
   neutro de propósito, sem puxar para o vermelho. */
.mundo--vinho {
  --sc-canvas: #2B2419; --sc-surface: #3A3123;
  --sc-ink: #F2E9D8; --sc-ink-soft: #C6B79D; --sc-accent: #DFAE5E;
  background: var(--sc-canvas); color: var(--sc-ink);
}
.mundo--tijolo {
  --sc-canvas: #7A1410; --sc-surface: #8F1E17;
  --sc-ink: #F7E9D5; --sc-ink-soft: #E4BFA6; --sc-accent: #F0B93B;
  background: var(--sc-canvas); color: var(--sc-ink);
}

/* ----------------------------------------------------------- tipografia -- */
.d { font-family: var(--sc-font-display); font-weight: 400; line-height: 0.92;
     letter-spacing: 0.005em; text-wrap: balance; margin: 0; text-transform: uppercase; }
.d--xl { font-size: clamp(3.6rem, 15vw, 9.5rem); }
.d--lg { font-size: clamp(2.6rem, 8vw, 5.4rem); }
.d--md { font-size: clamp(2rem, 5vw, 3.2rem); }
.d--sm { font-size: clamp(1.4rem, 3.2vw, 2rem); }

.mao { font-family: var(--f-mao); font-weight: 700; line-height: 1.2;
       font-size: clamp(1.5rem, 4.4vw, 2.4rem); color: var(--sc-accent); margin: 0; }

.rot { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 700;
       letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; }

.txt { max-width: 34rem; color: var(--sc-ink-soft); text-wrap: pretty; margin: 0;
       font-size: var(--sc-t-base); line-height: 1.6; }
.txt strong { color: var(--sc-ink); font-weight: 600; }
.txt--largo { max-width: 46rem; }

/* Um link sozinho dentro de um parágrafo não é "link no meio do texto": é um
   botão disfarçado, e precisa de altura para ser tocado. A exceção da WCAG
   2.5.8 para links em linha corrida não vale aqui, porque não há linha corrida
   em volta dele. */
p > .link:only-child, dd > .link:only-child,
.aviso .link { display: inline-block; padding-block: 0.35rem; }

/* No dedo, todo alvo de ação tem 44px, o mesmo piso da navegação e dos
   botões. Vale para o link de ação isolado e para os atalhos de seção das
   cartas. No mouse o visual fica compacto como antes. */
@media (pointer: coarse) {
  p > .link:only-child, dd > .link:only-child,
  .aviso .link,
  .atalhos li > a {   /* um nível a mais para vencer o `display: block` local */
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

.link { color: var(--sc-ink); text-decoration-thickness: 2px;
        text-decoration-color: var(--sc-accent); text-underline-offset: 0.2em;
        transition: color var(--sc-d-fast) var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .link:hover { color: var(--sc-accent); } }
.link:active { transform: translateY(1px); display: inline-block; }

/* pendências: visíveis de propósito. Nada aqui é conteúdo inventado. */
.pend {
  display: inline-block;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft);
  border: 1px dashed color-mix(in oklab, var(--sc-ink) 40%, transparent);
  border-radius: var(--sc-r-sm); padding: 0.28em 0.6em; margin: 0; line-height: 1.5;
  /* o selo pode cair dentro do preço, que não quebra linha: aqui ele volta a
     quebrar, e nunca passa da largura de quem o contém */
  white-space: normal; overflow-wrap: anywhere; max-width: 100%;
}
.pend-bloco {
  border-left: 1px solid color-mix(in oklab, var(--sc-ink) 26%, transparent);
  padding-left: var(--sc-4); margin: 0;
  display: grid; gap: var(--sc-2); justify-items: start;
}

/* ------------------------------------------------------------ utilitários */
/* a margem lateral nunca é menor que o recorte do aparelho: com o celular
   deitado, o notch fica na lateral e comeria a primeira letra de cada linha */
.wrap {
  width: 100%; max-width: 78rem; margin-inline: auto;
  padding-inline:
    max(var(--sc-gutter), env(safe-area-inset-left))
    max(var(--sc-gutter), env(safe-area-inset-right));
}
.wrap--estreito { max-width: 54rem; }

.skip {
  position: absolute; left: var(--sc-4); top: -5rem; z-index: 99;
  background: var(--papel); color: #1B1310;
  padding: var(--sc-3) var(--sc-4); border-radius: var(--r);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  transition: top var(--sc-d-fast) var(--sc-ease-out);
}
.skip:focus-visible { top: var(--sc-4); }

/* minmax(0,1fr) trava o trilho na largura disponível: sem isso o grid cresce
   até o tamanho intrínseco da foto (1600px) e estoura a tela no celular */
.foto { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-3); }
.moldura { overflow: clip; border-radius: var(--r); background: var(--sc-surface); position: relative; min-width: 0; }
.moldura img { width: 100%; height: 100%; object-fit: cover; }
.foto figcaption {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sc-ink-soft); line-height: 1.6;
}

/* botão: uma forma só no site inteiro */
.botao {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  border: 0; border-radius: var(--sc-r-sm);
  padding: 0.85em 1.3em; text-decoration: none; cursor: pointer;
  transition: transform var(--sc-d-fast) var(--sc-ease-out),
              filter var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .botao:hover { filter: brightness(1.08); } }
.botao:active { transform: translateY(1px); }
.botao--linha {
  background: transparent; color: var(--sc-ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--sc-ink) 40%, transparent);
}

/* ========================================================== NAVEGAÇÃO =====
   A home tem a comanda (a chrome dela, definida no próprio index.html).
   As páginas internas têm esta barra, e a comanda da home também aponta para
   elas. Um rótulo por intenção: "Fale conosco" em todo lugar. */
.topo {
  position: sticky; top: 0; z-index: var(--sc-z-chrome);
  background: var(--sc-canvas);
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 16%, transparent);
}
.topo__interno {
  display: flex; align-items: center; gap: var(--sc-4);
  padding-block: 0.7rem; flex-wrap: wrap;
}
.topo__marca { display: flex; align-items: center; gap: var(--sc-3); text-decoration: none; margin-right: auto; }
.topo__marca img { width: 2.1rem; height: auto; }
.topo__marca span {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink);
}
.topo__links { display: flex; align-items: center; gap: 0.2rem; list-style: none; margin: 0; padding: 0;
               flex-wrap: wrap; }
.topo__links a {
  display: block; text-decoration: none; color: var(--sc-ink-soft);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.55em 0.7em; border-radius: var(--sc-r-sm);
  transition: color var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .topo__links a:hover { color: var(--sc-ink); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
}
.topo__links a[aria-current="page"] {
  color: var(--sc-accent);
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--sc-accent) 55%, transparent);
}
.topo .botao { padding: 0.6em 1em; font-size: var(--sc-t-xs); }

/* alvo de toque: 44px de altura mínima em qualquer dedo, em qualquer tela */
@media (pointer: coarse) {
  .topo__marca { min-height: 44px; min-width: 44px; justify-content: center; }
  .topo__links a { min-height: 44px; display: flex; align-items: center; }
  .topo .botao { min-height: 44px; }
}

@media (max-width: 720px) {
  .topo__interno { gap: var(--sc-2); }
  .topo__marca span { display: none; }
  .topo__links { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap;
                 padding-bottom: 0.2rem; overscroll-behavior-x: contain; }
  /* tipo maior no celular: 0.68rem dava menos de 11px, pequeno demais para
     um link que se toca com o dedo */
  .topo__links a { white-space: nowrap; font-size: 0.75rem; padding: 0.6em 0.8em; }
  .topo .botao { font-size: var(--sc-t-xs); padding: 0.7em 1em; }
  .topo__marca img { width: 2.4rem; }
}

/* ------------------------------------------------------------- cabeçalho --
   Abre-página das internas. Não é herói de scroll: é título de seção. */
.cabeca { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.cabeca__grade { display: grid; gap: var(--sc-5); }
@media (min-width: 900px) {
  .cabeca__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--sc-8); align-items: end; }
}
/* Variante com texto ao lado: o texto começa na altura do título, nunca
   acima dele. Com `align-items: end` o texto mais alto que o título subia
   até a linha do sobretítulo. Aqui sobretítulo, título e texto são filhos
   diretos da grade, e o texto mora na mesma linha do título. */
.cabeca__grade--topo { row-gap: 0; }
.cabeca__grade--topo > .cabeca__lado { display: grid; gap: var(--sc-4); margin-top: var(--sc-5); }
@media (min-width: 900px) {
  .cabeca__grade--topo { align-items: start; }
  .cabeca__grade--topo > .rot { grid-column: 1; grid-row: 1; }
  .cabeca__grade--topo > h1 { grid-column: 1; grid-row: 2; }
  .cabeca__grade--topo > .cabeca__lado { grid-column: 2; grid-row: 2; margin-top: var(--sc-3); }
}

/* ------------------------------------------------------------------ carta --
   A estrutura das três cartas (drinks, vinhos, cozinha). Modular de propósito:
   cada seção é um bloco independente, e um bloco sem itens confirmados mostra
   a pendência em vez de conteúdo inventado. */
.carta { display: grid; gap: clamp(2.5rem, 6vw, 4rem); margin-top: clamp(2rem, 5vw, 3rem); }
.carta__secao { display: grid; gap: var(--sc-4); }
.carta__cabeca { display: flex; align-items: baseline; gap: var(--sc-4); flex-wrap: wrap;
                 border-bottom: 1.5px solid color-mix(in oklab, var(--sc-ink) 30%, transparent);
                 padding-bottom: var(--sc-3); }
.carta__cabeca h2 { margin: 0; }
.carta__nota { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.08em;
               text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 0 auto; }

/* Duas colunas a partir do tablet, para a carta não virar um corredor.
   No celular é sempre um item por linha: o que não couber encolhe a fonte
   ou quebra a linha, nunca divide a linha com o vizinho. */
.itens { list-style: none; margin: 0; padding: 0; display: grid; column-gap: var(--sc-7); }
@media (min-width: 760px) {
  .itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* horário curto na mesma linha do título da seção (almoço, brunch) */
.carta__hora { font-family: var(--sc-font-display); font-size: clamp(1.1rem, 2.4vw, 1.5rem);
               line-height: 1; color: var(--sc-accent); margin: 0; }
.item { display: grid; gap: var(--sc-1); padding-block: var(--sc-4);
        border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.item__linha { display: flex; align-items: baseline; gap: var(--sc-3); }
.item__nome { font-family: var(--sc-font-display); font-weight: 400; text-transform: uppercase;
              font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.05; margin: 0; }
/* O pontilhado empurra o preço para a direita, mas só aparece no item em
   destaque: repetido em toda linha, ele virava um chuvisco de tracinhos.
   O elemento continua existindo (é ele que faz o preço encostar na margem). */
.item__pontos { flex: 1; transform: translateY(-0.2em); }
.item--destaque .item__pontos {
  border-bottom: 1px dotted color-mix(in oklab, var(--sc-ink) 30%, transparent);
}
.item__preco { font-family: var(--sc-font-mono); font-size: var(--sc-t-lg); font-weight: 700;
               color: var(--sc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__desc { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 52ch; margin: 0; }
.item--destaque { background: color-mix(in oklab, var(--sc-accent) 12%, transparent);
                  border-radius: var(--r); padding: var(--sc-5); border-bottom: 0; }

.espera {
  padding: var(--sc-6); border-radius: var(--r);
  border: 1.5px dashed color-mix(in oklab, var(--sc-ink) 26%, transparent);
  display: grid; gap: var(--sc-3); justify-items: start;
}

/* ----------------------------------------------------------------- rodapé */
.rodape {
  margin-top: clamp(3rem, 8vw, 6rem);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 20%, transparent);
}
.rodape__grade { display: grid; gap: var(--sc-5); }
@media (min-width: 760px) { .rodape__grade { grid-template-columns: 1fr auto; align-items: center; } }
.rodape img { width: 2.6rem; height: auto; }

/* Tela baixa (celular deitado, janelas curtas): a barra continua presa no
   topo, mas numa linha só. Empilhada em duas linhas ela comia 22% da altura;
   aqui os links viram uma faixa que rola de lado entre a marca e o botão. */
@media (max-height: 600px) {
  .topo__interno { flex-wrap: nowrap; padding-block: 0.25rem; gap: var(--sc-3); }
  .topo__marca span { display: none; }
  .topo__links { order: 0; width: auto; flex: 1 1 auto; min-width: 0;
                 overflow-x: auto; flex-wrap: nowrap; overscroll-behavior-x: contain;
                 padding-bottom: 0; }
  .topo__links a { white-space: nowrap; }
  .topo .botao { flex: none; white-space: nowrap; }
}