/* =========================================================================
   KAIA — bar, cozinha & cultura
   Folha única, ordenada por componente. Cada componente traz seus próprios
   ajustes de largura logo abaixo da sua base.

   Breakpoints:  768px (dois blocos lado a lado) · 1100px (tipografia grande)
   Escala tipográfica: razão 1,25 a partir de 16px
   ========================================================================= */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Paleta aprovada */
  --carvao:    #121110;   /* base */
  --verde:     #01401d;   /* cabeçalho, visita, rodapé — o mesmo verde do logo */
  --mostarda:  #f3b315;   /* amostrado do arquivo do logo (LOGO 2026) */
  --claro:     #f5f5f2;   /* texto sobre carvão */
  --linha:     #77776e;   /* divisórias sobre carvão */

  /* Espaçamento — múltiplos de 8 */
  --e1:  8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e5: 40px;
  --e6: 48px;
  --e8: 64px;

  /* Tipografia */
  --texto:    'Barlow', Arial, Helvetica, sans-serif;
  --titulo:   'Barlow Condensed', 'Barlow', Arial, sans-serif;
  --t-micro:  12.8px;
  --t-base:     16px;
  --t-medio:    20px;
  --t-sub:      25px;
  --t-sub-lg: 31.25px;
  --t-display:  40px;
  --t-display-lg: 61px;

  /* Alvo mínimo de toque */
  --toque: 48px;

  color-scheme: dark;
}

/* --- 2. Base ------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--carvao);
  color: var(--claro);
  font: var(--t-base)/1.5 var(--texto);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }

a:hover { text-decoration: underline; text-underline-offset: 4px; }

button { font: inherit; cursor: pointer; }

/* height:auto impede que os atributos width/height do HTML achatem a imagem
   quando o CSS limita apenas a largura (era o caso do logo no cabeçalho). */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure, p { margin: 0; }

/* A seta de link externo era o caractere ↗ (U+2197), que o iOS renderiza como
   emoji colorido. Em SVG ela herda a cor e o tamanho do texto ao redor e fica
   igual em qualquer aparelho. */
.seta {
  display: inline-block;
  width: .78em;
  height: .78em;
  vertical-align: -.06em;
}

section { scroll-margin-top: var(--e2); }

a:focus-visible,
button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

/* --- 3. Tipografia ------------------------------------------------------ */

h1, h2 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: .98;
  letter-spacing: -.025em;
}

.eyebrow,
small,
.brand span {
  font-size: var(--t-micro);
  line-height: 1.35;
}

.eyebrow {
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: var(--e3);
}

@media (min-width: 1100px) {
  h1, h2 { font-size: var(--t-display-lg); }
}

/* --- 4. Cabeçalho ------------------------------------------------------- */

header {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e3);
  background: var(--verde);
  color: var(--mostarda);
  border-bottom: 1px solid currentColor;
}

.brand { width: 184px; }

.brand span {
  display: block;
  margin-top: var(--e1);
  text-align: center;
  font-weight: 600;
  letter-spacing: .04em;
}

nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e2);
}

nav a {
  min-height: var(--toque);
  padding: var(--e1) 0;
  font-weight: 600;
}

/* A navegação usa a mesma voz dos títulos: Barlow Condensed, caixa alta e um
   respiro entre as letras, que a condensada em maiúsculas pede para não
   fechar demais. O tamanho sobe junto com os títulos a partir de 1100px. */
header > nav:not(.social) a {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: var(--t-medio);
  text-transform: uppercase;
  letter-spacing: .05em;
}

@media (min-width: 768px) {
  header > nav:not(.social) { gap: var(--e5); }
}

@media (min-width: 1100px) {
  header > nav:not(.social) a { font-size: var(--t-sub); }
}

.social {
  justify-content: flex-start;
  gap: var(--e1);
}

.social a {
  display: flex;
  align-items: center;
  padding: var(--e1) var(--e2);
  border: 1px solid var(--mostarda);
}

.social a:hover {
  background: var(--mostarda);
  color: var(--verde);
}

@media (min-width: 768px) {
  header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e3) var(--e5);
  }
  header > nav { gap: var(--e3); }
  .social { margin-left: auto; }
}

@media (min-width: 1100px) {
  header { flex-wrap: nowrap; }
  .social { margin-left: 0; }
}

/* --- 5. Abertura: texto e cardápios ------------------------------------- */

.intro { padding: var(--e4) var(--e3); }

/* text-wrap:balance distribui as linhas em comprimentos parecidos, evitando a
   última palavra sozinha. Onde não houver suporte, quebra normalmente. */
.lead {
  margin-top: var(--e3);
  text-wrap: balance;
}

.menus {
  margin-top: var(--e4);
  border-top: 1px solid var(--claro);
}

.menus a {
  display: grid;
  grid-template-columns: var(--e3) 1fr var(--e3);
  align-items: center;
  gap: var(--e2);
  min-height: 96px;
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--linha);
}

/* Primeiro cardápio em destaque, conforme versão aprovada */
.menus a:first-child {
  padding-inline: var(--e2);
  background: var(--mostarda);
  color: var(--carvao);
}

.menus a:hover {
  background: var(--mostarda);
  color: var(--carvao);
  text-decoration: none;
}

.menus strong {
  font: 600 var(--t-sub)/1.1 var(--titulo);
}

.menus small {
  display: block;
  margin-top: var(--e1);
}

.number { font-size: var(--t-micro); }
.arrow  { font-size: var(--t-sub); }

@media (min-width: 768px) {
  .opening {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .intro { padding: var(--e6) var(--e5); }
}

@media (min-width: 1100px) {
  .intro { padding: var(--e8); }
  .menus strong { font-size: var(--t-sub-lg); }
}

/* --- 6. Carrossel ------------------------------------------------------- */
/* Sem JavaScript as três fotos aparecem empilhadas e os controles ficam
   ocultos. O JavaScript marca .is-enhanced e o bloco passa a alternar. */

.food {
  position: relative;
  min-width: 0;
  background: var(--carvao);
}

.slide { position: relative; }

/* --corte permite reenquadrar uma foto específica no HTML, sem criar uma
   regra nova para cada uma. Padrão: levemente à direita do centro. */
.slide img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: var(--corte, 55% 50%);
}

.carousel-controls { display: none; }

/* Estado com JavaScript */
.food.is-enhanced .slide[hidden] { display: none; }

.food.is-enhanced .carousel-controls {
  position: absolute;
  right: var(--e3);
  bottom: var(--e2);
  left: var(--e3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e1);
  background: var(--carvao);
  color: var(--mostarda);
}

.carousel-controls button {
  width: var(--toque);
  height: var(--toque);
  border: 1px solid var(--mostarda);
  background: var(--verde);
  color: var(--mostarda);
  font-size: var(--t-sub);
}

.carousel-controls button:hover {
  background: var(--mostarda);
  color: var(--carvao);
}

.carousel-meta {
  display: flex;
  align-items: center;
  gap: var(--e2);
}

.carousel-controls span {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .12em;
}

/* Botão de pausa: exigido porque o carrossel gira sozinho — quem precisa de
   mais tempo tem de conseguir parar o movimento, e não só passar o mouse. */
#toggle { font-size: var(--t-micro); }

.carousel:focus-visible {
  outline: 3px solid var(--mostarda);
  outline-offset: -3px;
}

@media (min-width: 768px) {
  .food {
    min-height: 680px;
    overflow: hidden;
  }

  /* A lâmina visível sai do fluxo e cola nas quatro bordas do bloco: toda
     foto ocupa exatamente a mesma caixa, em pé ou deitada. Antes cada uma
     media o que a sua proporção pedia — 965px contra 680px — e a página
     pulava a cada troca. Fora do fluxo, a altura do bloco deixa de depender
     da foto e passa a vir da coluna ao lado. */
  .food.is-enhanced .slide {
    position: absolute;
    inset: 0;
  }

  .food.is-enhanced .slide img { height: 100%; }

  /* Sem JavaScript as fotos se empilham: ficam menores para a coluna não
     crescer muito além do texto ao lado. */
  .food:not(.is-enhanced) .slide img { height: 340px; }
}

@media (min-width: 1100px) {
  .food { min-height: 750px; }
}

/* --- 7. Visita: endereço e horários ------------------------------------- */
/* Faixa compacta, sem fotografia: o texto, os horários e o botão dividem a
   largura no desktop e se empilham no celular. */

.visit {
  padding: var(--e5) var(--e3);
  background: var(--verde);
  color: var(--claro);
}

.visit h2,
.visit .eyebrow { color: var(--mostarda); }

.visit-info > p:not(.eyebrow) { margin-top: var(--e2); }

.hours { margin: var(--e4) 0; }

.hours p {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--e2) 0;
  border-top: 1px solid;
}

.hours span {
  font-size: var(--t-micro);
  font-weight: 600;
}

.hours strong {
  font-size: var(--t-medio);
  line-height: 1.3;
}

/* Filho direto: é a linha de fechamento. O small dentro do <strong> é a
   ressalva do almoço de sábado e não leva traço em cima. */
.hours > small {
  display: block;
  padding-top: var(--e2);
  border-top: 1px solid;
}

.hours strong small {
  display: block;
  margin-top: 4px;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .04em;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  background: var(--mostarda);
  color: var(--carvao);
  font-weight: 600;
}

/* Chamada principal da abertura. Os cardápios passaram a viver numa página
   própria, então este botão carrega sozinho a ação mais importante do site. */
.button.principal {
  margin-top: var(--e4);
  padding: var(--e3) var(--e5);
  font: 700 var(--t-sub)/1 var(--titulo);
  letter-spacing: .01em;
}

@media (min-width: 1100px) {
  .button.principal { font-size: var(--t-sub-lg); }
}

@media (min-width: 768px) {
  .visit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--e5);
    padding: var(--e6) var(--e5);
  }
  .hours { margin: 0; }
  .visit .button { grid-column: 1 / -1; justify-self: start; }
}

@media (min-width: 1100px) {
  .visit {
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    padding: var(--e6) var(--e8);
  }
  .visit .button { grid-column: auto; }
}

/* --- 8. Delivery -------------------------------------------------------- */

.delivery {
  padding: var(--e4) var(--e3);
  background: var(--mostarda);
  color: var(--carvao);
}

.stores { margin-top: var(--e4); }

.stores a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e3) 0;
  border-top: 1px solid;
  font: 600 var(--t-sub)/1.15 var(--titulo);
}

/* :last-of-type, não :last-child — abaixo dos links existe um parágrafo, e
   com :last-child a linha de baixo da lista desapareceria. */
.stores a:last-of-type { border-bottom: 1px solid; }

.stores small {
  display: block;
  margin-top: var(--e1);
  font-family: var(--texto);
}

/* Keeta e 99Food não têm página web por restaurante: são só aplicativo. Ficam
   como texto, porque um botão sem destino promete um clique que não existe. */
.tambem {
  margin-top: var(--e3);
  font-size: var(--t-base);
  line-height: 1.4;
}

.tambem strong { font-weight: 600; }

@media (min-width: 768px) {
  .delivery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--e5);
    padding: var(--e5);
  }
  .stores { margin: 0; }
}

@media (min-width: 1100px) {
  .delivery { padding: var(--e5) var(--e8); }
  .stores a { font-size: var(--t-sub-lg); }
}

/* --- 9. Página de cardápios --------------------------------------------- */
/* A lista de cardápios saiu da abertura e virou /cardapios/, que reusa o grid
   .opening: a lista de um lado, o carrossel dos pratos do outro. */

.textlink {
  display: inline-block;
  margin-top: var(--e3);
  padding: var(--e1) 0;
  min-height: var(--toque);
  border-bottom: 1px solid;
  font-weight: 600;
}

/* --- 10. Rodapé --------------------------------------------------------- */

footer {
  display: grid;
  gap: var(--e3);
  padding: var(--e4) var(--e3);
  background: var(--verde);
}

footer p { font-size: var(--t-micro); }

footer img { width: 160px; }

/* A história da casa vive aqui desde que a página foi compactada. Recebe a
   coluna flexível do rodapé por ser o texto mais longo da faixa. */
.historia { max-width: 70ch; }

footer a {
  min-height: var(--toque);
  padding: var(--e1) 0;
}

footer nav {
  justify-content: flex-start;
  gap: var(--e3);
}

@media (min-width: 768px) {
  footer {
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: var(--e5);
    padding: var(--e5);
  }
}