/* Folha comum injetada em todas as páginas geradas pelo servidor (ver src/app.js). */

/* Uma fonte só em todas as telas: a fonte do sistema de cada aparelho (iPhone, Android, Windows).
   Esta folha entra depois do CSS de cada página, então prevalece sobre o font-family do body. */
:root { --pf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body { font-family: var(--pf-font); }
input, select, textarea, button { font-family: inherit; }

/* Banner da loja: estilo-base com especificidade zero (:where), então as páginas
   que têm estilo próprio continuam valendo e as que não tinham deixam de mostrar o topo cru. */
:where(.brand-banner) { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #0f172a 0%, var(--brand-primary, #1d4ed8) 100%); color: white; margin-bottom: 18px; }
:where(.brand-banner-main) { display: contents; }
:where(.brand-banner-mark) { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; overflow: hidden; }
:where(.brand-banner-mark img) { width: 100%; height: 100%; object-fit: cover; }
:where(.brand-banner-mark span) { font-size: 22px; font-weight: 800; letter-spacing: 0.06em; }
:where(.brand-banner-copy) { display: grid; gap: 4px; min-width: 0; }
:where(.brand-banner-eyebrow) { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; }
:where(.brand-banner-copy strong) { font-size: 24px; line-height: 1.1; }
:where(.brand-banner-copy p) { margin: 0; opacity: 0.88; }
/* Regras genéricas da página (como ".hero p") deixavam o subtítulo escuro no fundo escuro. */
.brand-banner .brand-banner-copy p { color: inherit; }
:where(.brand-banner-art) { display: none; }

/* Loja e mesa no celular: o cardápio aparece mais cedo.
   A faixa decorativa do banner some (parecia um elemento quebrado) e as informações
   da loja ficam lado a lado, sem o cartão genérico "Pedido rápido". */
@media (max-width: 720px) {
  .brand-banner-wave { display: none !important; }
  .hero-strip { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .hero-strip .hero-pill { padding: 10px 12px !important; font-size: 13px; }
  .hero-strip .hero-pill-generic { display: none; }
  .hero-strip .hero-pill[style] { grid-column: 1 / -1; }
}

/* Telas estreitas: tabelas e cartões largos não empurram a página para os lados. */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card, section, article, form, .grid, .links, .actions { max-width: 100%; min-width: 0; box-sizing: border-box; }
  img, svg, video, iframe { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  input, select, textarea, button { max-width: 100%; }
  h1, h2, h3, p, td, th, strong, a { overflow-wrap: break-word; }
  /* Formulários em linha e grades de duas colunas viram uma coluna. */
  .form-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .form-grid > * { grid-column: auto !important; min-width: 0; }
  .new-form, .inline-form { flex-wrap: wrap; }
  .new-form > *, .inline-form > * { min-width: 0; flex: 1 1 140px; }
}