/* Cardápio público: layout da página. Componentes do cardápio em menu.css. */

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* --altura-nav é medida por js/category-nav.js; 4rem é a estimativa sem JS. */
  scroll-padding-top: calc(var(--altura-nav, 4rem) + var(--espaco-2));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.15rem);
  line-height: 1.4;
}

:focus-visible {
  outline: 3px solid var(--cor-foco);
  outline-offset: 2px;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular-link {
  position: absolute;
  left: var(--espaco-4);
  top: -3rem;
  padding: var(--espaco-2) var(--espaco-4);
  background: var(--cor-marrom);
  color: var(--cor-fundo);
  z-index: 10;
}

.pular-link:focus {
  top: var(--espaco-4);
}

/* ---------- Aviso de demonstração ---------- */

.aviso-demo {
  margin: 0;
  padding: var(--espaco-2) var(--espaco-4);
  background: #fff3c4;
  border-bottom: 1px solid #e0c867;
  color: #5a4500;
  font-size: var(--texto-sm);
  font-weight: 600;
  text-align: center;
}

/* ---------- Página emoldurada ---------- */

.pagina-publica .moldura {
  --canto: clamp(64px, 15vw, 150px);
  max-width: var(--largura-max);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding:
    calc(48 * var(--u)) calc(41 * var(--u) + clamp(0.75rem, 4vw, 3rem))
    calc(70 * var(--u));
}

.marca-dagua {
  position: fixed;
  left: 50%;
  top: 55%;
  z-index: -1;
  width: min(78vw, 40rem);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.cabecalho {
  padding-inline: calc(var(--canto) * 0.3);
  margin-bottom: var(--espaco-4);
}

/* Celular e tablet: xícara entre os cantos, nome e complemento abaixo dela.
   Lado a lado, a xícara ficaria pequena demais para o texto continuar centralizado. */
@media (max-width: 52rem) {
  .cabecalho {
    padding-inline: 0;
  }

  .marca {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: var(--espaco-1);
  }

  .marca-xicara,
  .marca-nome,
  .marca-complemento {
    grid-column: 1;
  }

  .marca-xicara {
    grid-row: auto;
    justify-self: center;
    width: clamp(4.75rem, 14vw, 7rem);
  }

  .marca-complemento {
    width: 100%;
  }
}

/* ---------- Navegação entre categorias ---------- */

.nav-categorias {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 calc(-1 * var(--espaco-2)) var(--espaco-5);
  padding: var(--espaco-2);
  background: rgb(255 255 255 / 0.95);
  border-bottom: 1px solid var(--cor-bege);
}

/* Celular: uma linha que rola na horizontal, só dentro da barra (sem rolagem da página). */
.nav-categorias ul {
  --esmaecer: 1.75rem;
  display: flex;
  gap: var(--espaco-2);
  margin: 0;
  /* Espaço para o contorno de foco não ser cortado pela rolagem. */
  padding: 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.nav-categorias ul::-webkit-scrollbar {
  display: none;
}

/* Esmaecimento nas bordas indicando que há mais categorias (atributos definidos em js/category-nav.js). */
.nav-categorias[data-mais-fim] ul {
  mask-image: linear-gradient(to right, #000 calc(100% - var(--esmaecer)), transparent);
}

.nav-categorias[data-mais-inicio] ul {
  mask-image: linear-gradient(to left, #000 calc(100% - var(--esmaecer)), transparent);
}

.nav-categorias[data-mais-inicio][data-mais-fim] ul {
  mask-image: linear-gradient(to right, transparent, #000 var(--esmaecer), #000 calc(100% - var(--esmaecer)), transparent);
}

.nav-categorias li {
  flex: 0 0 auto;
}

@media (min-width: 48rem) {
  .nav-categorias ul {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    mask-image: none !important;
  }
}

.nav-categorias a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.3em 0.9em;
  border: 1px solid var(--cor-marrom);
  border-radius: 999px;
  color: var(--cor-marrom);
  font-size: var(--texto-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Alvo de toque confortável em telas sensíveis ao toque. */
@media (pointer: coarse) {
  .nav-categorias a {
    min-height: 2.75rem;
  }
}

.nav-categorias a[aria-current] {
  background: var(--cor-marrom);
  color: var(--cor-creme);
}

@media (hover: hover) {
  .nav-categorias a:hover {
    background: var(--cor-marrom);
    color: var(--cor-creme);
  }
}

.nav-categorias a:focus-visible {
  outline-offset: 1px;
}

/* ---------- Conteúdo ---------- */

.cardapio:focus {
  outline: none;
}

/* Estados: carregando, vazio e erro. */
.estado {
  display: grid;
  justify-items: center;
  gap: var(--espaco-3);
  margin: var(--espaco-6) auto;
  max-width: 28rem;
  text-align: center;
  color: var(--cor-texto-suave);
}

.estado p,
p.estado {
  margin: 0;
}

.estado[data-tone='erro'] {
  color: var(--cor-erro);
  font-weight: 600;
}

.estado-graos {
  display: none;
  gap: 0.5rem;
}

.estado[data-estado='carregando'] .estado-graos {
  display: flex;
}

.estado-graos span {
  width: 0.7rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--cor-marrom-2);
  animation: grao-pulsa 1.2s ease-in-out infinite;
}

.estado-graos span:nth-child(2) { animation-delay: 0.15s; }
.estado-graos span:nth-child(3) { animation-delay: 0.3s; }

@keyframes grao-pulsa {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .estado-graos span {
    animation: none;
    opacity: 0.7;
  }
}

.estado-botao {
  min-height: 2.75rem;
  padding: var(--espaco-2) var(--espaco-5);
  border: 1px solid var(--cor-marrom);
  border-radius: 999px;
  background: var(--cor-marrom);
  color: var(--cor-creme);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (hover: hover) {
  .estado-botao:hover {
    background: var(--cor-marrom-2);
  }
}

.informacoes {
  margin-top: var(--espaco-6);
}

/* ---------- Rodapé ---------- */

.rodape {
  margin-top: var(--espaco-6);
  color: var(--cor-marrom);
  font-size: clamp(1rem, 2.6vw, 1.5rem);
}

.rodape::before,
.rodape::after {
  height: 3px;
}

/* Página 404 (404.html) */
.estado-404 h1 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  color: var(--cor-marrom);
}

.estado-404 a {
  color: var(--cor-marrom);
  font-weight: 600;
}