/* ============================================================
   Sistema de Cardapio Online - Panificadora da Vila II
   publico/cardapio.css

   Estilo do cardapio que o cliente ve. Escrito a mao, sobre os
   tokens do item 10 do manual da marca.

   Duas regras que mandam no arquivo inteiro:

   1) O cardapio inteiro aparece por padrao. As categorias so
      passam a se revezar depois que o JavaScript confirma que
      esta ligado, marcando a pagina com a classe com-script. E o
      que garante o RF-91: com JavaScript desligado o visitante ve
      os 155 itens, e nao tres itens de cha.

   2) Nada de fonte externa e nada de CDN. A meta e peso abaixo de
      300 KB e carga abaixo de 2 segundos em 4G. RNF-01.

   MT - Manfred Tecnologia
   ============================================================ */

/* ------------------------------------------------------------
   Tokens do manual da marca, item 10
   ------------------------------------------------------------ */
:root {
	--cor-marca:        #8B5E3C;
	--cor-marca-escura: #6F472D;
	--cor-fundo:        #FFFFFF;
	--cor-faixa:        #F7F2ED;
	--cor-acento:       #C36F42;
	--cor-acento-forte: #AF5E33;
	--cor-texto:        #5A4433;
	--cor-texto-suave:  #6B5544;
	--cor-borda:        #E0D8D0;
	--cor-bege:         #C0B0A0;
	--cor-escura:       #3A2A20;
	--cor-alerta:       #B4761A;
	--cor-whatsapp:     #25D366;

	/* Arial, a mesma do cardapio que ja esta no ar desde 2026.
	   Decisao 13, de 31/07/2026: a memoria visual de quem ja usa o
	   cardapio pesou mais do que o par tipografico do manual.

	   O manual da marca, no item 5, pede Forum no titulo e Jost no
	   texto, servidas em WOFF2 a partir da propria pasta, com
	   font-display swap. Sao cerca de 124 KB a mais. Para voltar a
	   elas, troque os dois valores abaixo pelas familias do manual
	   e acrescente o bloco de font-face no topo deste arquivo. */
	--fonte-titulo: Arial, Helvetica, sans-serif;
	--fonte-texto:  Arial, Helvetica, sans-serif;

	--txt-t1:      40px;
	--txt-t2:      32px;
	--txt-t3:      24px;
	--txt-t4:      19px;
	--txt-corpo:   16px;
	--txt-peq:     14px;
	--txt-legenda: 13px;
	--txt-micro:   12px;

	--altura-titulo: 1.3;
	--altura-texto:  1.65;

	--esp-1:  4px;  --esp-2:  8px;  --esp-3: 16px;  --esp-4: 24px;
	--esp-5: 32px;  --esp-6: 48px;  --esp-7: 64px;

	--raio: 4px;
	--sombra: 0 1px 3px rgba(90, 68, 51, 0.10);

	--largura-conteudo: 1120px;
	--altura-toque: 48px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--fonte-texto);
	font-size: var(--txt-corpo);
	line-height: var(--altura-texto);
	color: var(--cor-texto);
	background: var(--cor-fundo);
}

a { color: var(--cor-acento-forte); }

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

/* ------------------------------------------------------------
   Cabecalho
   Nome da casa e titulo do cardapio, do MESMO tamanho, por cima
   da foto quando existe uma.

   O texto sobre foto so funciona com um veu escuro por baixo. A
   foto e enviada pela panificadora e pode ser clara, escura ou
   estourada, entao nao da para confiar no contraste dela: o
   degrade garante 4,5 para 1 seja qual for a imagem, que e o
   minimo do item 11 do manual da marca.

   Sem imagem, o mesmo bloco aparece sobre o fundo da pagina, em
   marrom, e o veu nao chega a existir.
   ------------------------------------------------------------ */
.cabecalho {
	max-width: var(--largura-conteudo);
	margin: 0 auto;
	padding: var(--esp-4) var(--esp-3) var(--esp-3);
}

.assinatura {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--esp-2) var(--esp-3);
}

/* Os dois textos com o MESMO tamanho e a MESMA fonte. O que
   separa um do outro e a posicao, um em cada ponta, e a cor.
   Nenhum dos dois altera o texto digitado. */
.marca,
.titulo {
	margin: 0;
	font-family: var(--fonte-titulo);
	font-size: var(--txt-t3);
	line-height: var(--altura-titulo);
	font-weight: 400;
}

/* Sem text-transform e sem letter-spacing, de proposito.
   O nome sai exatamente como foi digitado na tela Aparencia: se a
   panificadora escrever "Panificadora da Vila II", e isso que
   aparece. Forcar caixa alta aqui tirava da pessoa o controle do
   proprio texto, e ela nao tinha como desfazer pelo painel.
   Quem quiser tudo em maiuscula digita em maiuscula. */
.marca {
	color: var(--cor-texto-suave);
}

.titulo { color: var(--cor-marca); }

/* ------------------------------------------------------------
   Com foto: a assinatura vai por cima
   ------------------------------------------------------------ */
/* O respiro embaixo separa a foto da fileira de abas, que antes
   ficavam coladas. O padding lateral e o MESMO das abas e da
   busca, para as tres bordas esquerdas cairem na mesma linha
   vertical. Antes a foto ia a zero e as abas a 8 px, e a diferenca
   aparecia como desalinhamento. */
.cabecalho.com-imagem {
	position: relative;
	padding: 0 var(--esp-3);
	max-width: var(--largura-conteudo);
	margin: var(--esp-3) auto var(--esp-4);
}

/* Altura fixa, e nao natural.
   Texto por cima so funciona se a caixa tiver altura garantida.
   A foto de 940 por 217 vira uma tira de 87 px num celular de
   375, e a assinatura nao cabe em 87 px. Com altura fixa e
   object-fit cover, a foto e cortada pelo centro e a assinatura
   sempre tem onde se apoiar.

   O custo e que uma foto mais estreita que a tela e ampliada.
   Por isso a tela Aparencia pede 1600 por 400 px: nesse tamanho
   nao ha ampliacao em tela nenhuma. */
.cabecalho.com-imagem img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: center;
	border-radius: var(--raio-imagem, 6px);
}

/* O left e o right acompanham o padding do pai, e nao zero: com
   zero o veu escuro passava por baixo do padding e ficava mais
   largo que a propria foto. */
.cabecalho.com-imagem .assinatura {
	position: absolute;
	left: var(--esp-3);
	right: var(--esp-3);
	bottom: 0;
	padding: var(--esp-6) var(--esp-3) var(--esp-3);
	border-radius: 0 0 var(--raio-imagem, 6px) var(--raio-imagem, 6px);
	background: linear-gradient(to top, rgba(20, 12, 8, 0.78) 0%, rgba(20, 12, 8, 0.45) 55%, rgba(20, 12, 8, 0) 100%);
}

.cabecalho.com-imagem .marca,
.cabecalho.com-imagem .titulo {
	color: #FFFFFF;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------
   Celular
   A foto encolhe, o texto tambem, e o separador some: em 375 px
   um filete entre as duas linhas so atrapalha.
   ------------------------------------------------------------ */
@media (max-width: 599px) {
	.cabecalho { padding: var(--esp-3); }
	.cabecalho.com-imagem { padding: 0 var(--esp-3); margin: var(--esp-2) auto var(--esp-3); }
	.cabecalho.com-imagem img { height: 160px; }
	.cabecalho.com-imagem .assinatura { left: var(--esp-3); right: var(--esp-3); padding: var(--esp-5) var(--esp-3) var(--esp-2); }

	.marca, .titulo { font-size: var(--txt-t4); }

	.assinatura { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* ------------------------------------------------------------
   Topo
   ------------------------------------------------------------ */
.topo {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--cor-fundo);
	border-bottom: 1px solid var(--cor-borda);
}

/* ------------------------------------------------------------
   Abas
   Sao links de ancora de verdade. Sem JavaScript, levam a secao
   correspondente da propria pagina, que ja esta renderizada.
   ------------------------------------------------------------ */
.abas {
	max-width: var(--largura-conteudo);
	margin: 0 auto;
	padding: 0 var(--esp-3) var(--esp-3);
	display: flex;
	gap: var(--esp-1);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	justify-content: flex-start;
}

.aba {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--esp-1);
	min-height: var(--altura-toque);
	padding: var(--esp-2) var(--esp-3);
	border-radius: var(--raio);
	background: var(--cor-faixa);
	color: var(--cor-marca-escura);
	font-size: var(--txt-peq);
	text-decoration: none;
	white-space: nowrap;
}

.aba:hover { background: var(--cor-marca-escura); color: var(--cor-fundo); }
.aba.ativa { background: var(--cor-marca); color: var(--cor-fundo); }

/* ------------------------------------------------------------
   Busca
   ------------------------------------------------------------ */
.busca {
	max-width: 560px;
	margin: 0 auto;
	padding: 0 var(--esp-3) var(--esp-3);
}

/* Escondido do olho, presente para o leitor de tela.
   O clip-path e o tamanho de 1 px sao a receita que funciona nos
   quatro navegadores do RNF-03: display none tiraria o rotulo
   tambem do leitor, que e justamente o que nao se quer. */
.so-leitor {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.busca input {
	width: 100%;
	min-height: var(--altura-toque);
	padding: var(--esp-2) var(--esp-3);
	border: 1px solid var(--cor-borda);
	border-radius: var(--raio);
	font-family: inherit;
	font-size: var(--txt-corpo);
	color: var(--cor-texto);
}

/* ------------------------------------------------------------
   Corpo do cardapio
   ------------------------------------------------------------ */
.cardapio {
	max-width: var(--largura-conteudo);
	margin: 0 auto;
	padding: var(--esp-3) var(--esp-3) var(--esp-6);
}

.categoria { margin-bottom: var(--esp-6); scroll-margin-top: 180px; }

.categoria-titulo {
	font-family: var(--fonte-titulo);
	font-weight: 400;
	font-size: var(--txt-t3);
	line-height: var(--altura-titulo);
	color: var(--cor-marca);
	margin: 0 0 var(--esp-3);
	padding-bottom: var(--esp-2);
	border-bottom: 2px solid var(--cor-marca);
}

/* Sem text-transform: o nome da secao vem da tela Categorias e
   aparece como foi digitado, pelo mesmo motivo do nome da casa. */
.secao-titulo {
	font-size: var(--txt-micro);
	letter-spacing: 0.14em;
	color: var(--cor-texto-suave);
	margin: var(--esp-4) 0 var(--esp-2);
	font-weight: 600;
}

/* ------------------------------------------------------------
   Lista de itens
   Uma coluna no celular, duas a partir do notebook.

   A conta que motivou as duas colunas: na coluna unica de 1120 px
   o item mediano ocupa 264 px e sobravam 856 px de linha
   pontilhada entre o nome e o preco. Um cardapio impresso nunca
   faz isso, porque a coluna dele tem uns 400 px.

   Em duas colunas cada uma fica com cerca de 530 px, o item
   mediano continua com 264 px e o pontilhado cai para uns 260 px,
   que e a proporcao de cardapio de mesa. De quebra, a rolagem dos
   67 sanduiches cai pela metade.

   O manual da marca, item 5.6, pede linha de 60 a 75 caracteres.
   1120 px davam 140. 530 px dao 66.
   ------------------------------------------------------------ */
.itens { list-style: none; margin: 0; padding: 0; }

.item {
	padding: var(--esp-3) 0;
	border-bottom: 1px solid var(--cor-borda);
}

@media (min-width: 900px) {
	.itens {
		column-count: 2;
		column-gap: var(--esp-6);
	}

	/* Sem isso um item se parte no fim da coluna, com o nome
	   embaixo e a descricao na coluna seguinte. */
	.item {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}

/* Nome ligado ao preco por linha pontilhada, como em cardapio
   impresso. Item 5.6 do manual da marca. */
.linha {
	display: flex;
	align-items: baseline;
	gap: var(--esp-2);
	margin: 0;
}

.nome {
	flex: 0 1 auto;
	font-weight: 500;
	font-style: italic;
	color: var(--cor-escura);
}

.codigo {
	font-style: normal;
	font-weight: 400;
	font-size: var(--txt-legenda);
	color: var(--cor-texto-suave);
	font-variant-numeric: tabular-nums;
}

.pontilhado {
	flex: 1 1 auto;
	min-width: var(--esp-3);
	border-bottom: 1px dotted var(--cor-bege);
	transform: translateY(-4px);
}

.preco {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--cor-marca);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.descricao {
	margin: var(--esp-1) 0 0;
	font-size: var(--txt-peq);
	color: var(--cor-texto-suave);
	max-width: 680px;
}

/* ------------------------------------------------------------
   Item em falta
   RF-88 e RN-09: continua visivel, marcado. Isso preserva a
   informacao de preco e evita a pergunta no balcao.
   A marcacao nunca e so por cor: existe a etiqueta escrita.
   ------------------------------------------------------------ */
.item.em-falta { opacity: 0.72; }
.item.em-falta .preco { color: var(--cor-texto-suave); }

.etiqueta {
	display: inline-block;
	font-style: normal;
	font-size: var(--txt-micro);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 1px var(--esp-2);
	border-radius: var(--raio);
	background: var(--cor-acento);
	color: var(--cor-fundo);
	vertical-align: middle;
}

.etiqueta-falta { background: var(--cor-alerta); }

/* ------------------------------------------------------------
   Botao de WhatsApp por categoria
   RF-92.
   ------------------------------------------------------------ */
.acao-whatsapp { margin: var(--esp-4) 0 0; }

.botao-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: var(--esp-2);
	min-height: var(--altura-toque);
	padding: var(--esp-2) var(--esp-4);
	border-radius: var(--raio);
	background: var(--cor-acento-forte);
	color: var(--cor-fundo);
	font-size: var(--txt-peq);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
}

.botao-whatsapp:hover { background: var(--cor-marca-escura); color: var(--cor-fundo); }

/* Deposito do desenho do icone, declarado uma vez e apontado
   pelos botoes com <use>. Nao aparece na tela.

   Nao usa display none: em alguns navegadores isso quebra o
   <use> que aponta para dentro. Tirar do fluxo com tamanho zero
   funciona em todos. */
.svg-simbolos {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* O icone segue a cor do texto, pelo fill currentColor do SVG.
   flex-shrink zero para ele nao amassar quando o nome da
   categoria for comprido. */
.icone-whatsapp {
	flex: 0 0 auto;
	display: block;
}

/* ------------------------------------------------------------
   Resultados da busca
   ------------------------------------------------------------ */
.resultados { margin-bottom: var(--esp-5); }
.resultados .grupo { font-size: var(--txt-micro); letter-spacing: 0.14em; color: var(--cor-texto-suave); margin: var(--esp-4) 0 var(--esp-2); }
.resultados .vazio { text-align: center; color: var(--cor-texto-suave); padding: var(--esp-6) var(--esp-3); }

/* ------------------------------------------------------------
   Aviso de pagina sem JavaScript
   Ele fala com quem esta com JavaScript desligado, entao some
   assim que o script assume a pagina.
   ------------------------------------------------------------ */
.aviso-sem-script {
	background: var(--cor-faixa);
	border-left: 4px solid var(--cor-bege);
	padding: var(--esp-2) var(--esp-3);
	font-size: var(--txt-peq);
	color: var(--cor-texto-suave);
	margin: 0 0 var(--esp-4);
}

.com-script .aviso-sem-script { display: none; }

/* Com o script ligado, so a categoria ativa fica na tela. Sem
   ele, esta regra nunca chega a valer e o cardapio inteiro
   aparece. E a diferenca entre 155 itens e tres itens de cha. */
.com-script .categoria { display: none; }
.com-script .categoria.ativa { display: block; }
.com-script.buscando .categoria { display: none; }

/* ------------------------------------------------------------
   Rodape
   Credito obrigatorio da MT, item 4.8 do CLAUDE.md e RN-11.
   ------------------------------------------------------------ */
.rodape {
	border-top: 1px solid var(--cor-borda);
	background: var(--cor-faixa);
	padding: var(--esp-5) var(--esp-3);
	text-align: center;
}

/* Aviso de preco e data da atualizacao na mesma linha.

   A data saiu do topo e veio para ca porque as duas informacoes
   respondem a mesma pergunta: o quanto dar para confiar neste
   preco. Juntas fazem sentido; no alto da pagina a data so
   empurrava o cardapio para baixo. */
.rodape-linha {
	max-width: var(--largura-conteudo);
	margin: 0 auto var(--esp-3);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--esp-1) var(--esp-2);
	font-size: var(--txt-peq);
	color: var(--cor-texto-suave);
}

.rodape-linha .separador { color: var(--cor-bege); }

/* No celular o separador some e as duas frases empilham. */
@media (max-width: 599px) {
	.rodape-linha { flex-direction: column; }
	.rodape-linha .separador { display: none; }
}

/* Endereco, horario e CNPJ da casa.

   Ficam entre a linha de preco e o credito, na ordem em que o
   cliente precisa deles: onde fica, a que horas abre, e so entao o
   dado fiscal. No monitor cabem lado a lado separados por ponto,
   que e o mesmo desenho da linha de cima; no celular empilham. */
.rodape-casa {
	max-width: var(--largura-conteudo);
	margin: 0 auto var(--esp-2);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--esp-1) var(--esp-2);
	font-size: var(--txt-peq);
	color: var(--cor-texto-suave);
}

/* O ponto separador nasce do CSS e nao do HTML: assim o gerador
   monta so os campos ja respondidos, sem precisar saber qual deles
   ficou sendo o primeiro da fila. */
.rodape-casa span + span::before {
	content: "\00b7";
	color: var(--cor-bege);
	margin-right: var(--esp-2);
}

@media (max-width: 599px) {
	.rodape-casa { flex-direction: column; }
	.rodape-casa span + span::before { content: none; }
}

.rodape-credito {
	max-width: var(--largura-conteudo);
	margin: 0 auto;
	font-size: var(--txt-legenda);
	color: var(--cor-texto-suave);
}

/* ------------------------------------------------------------
   Pontos de quebra
   Item 7.5 do documento mestre.
   ------------------------------------------------------------ */
@media (min-width: 600px) {
	/* As abas ficam centralizadas dentro da coluna de conteudo, a
	   pedido do cliente. A fileira deixa de nascer colada na borda
	   esquerda da foto e passa a ficar no meio, alinhada com o campo
	   de busca logo abaixo.

	   O flex-wrap continua: quando as abas passam de uma linha, a
	   segunda tambem fica centralizada embaixo da primeira. */
	.abas { justify-content: center; flex-wrap: wrap; overflow-x: visible; }

	/* Nome da casa e titulo crescem JUNTOS. A regra antiga subia so
	   o titulo, e era ela que quebrava o mesmo tamanho pedido. */
	.marca, .titulo { font-size: var(--txt-t3); }
}

@media (min-width: 900px) {
	/* O padding lateral fica em esp-3, o mesmo da foto e das abas.
	   Com esp-4 o titulo da categoria caia 8 px adiante da borda da
	   foto e a coluna nao fechava. */
	.cardapio { padding: var(--esp-4) var(--esp-3) var(--esp-7); }
	.categoria-titulo { font-size: var(--txt-t2); }
}

/* No celular o preco cai para a linha de baixo, alinhado a
   direita, porque nome comprido mais preco na mesma linha
   espreme os dois. */
@media (max-width: 599px) {
	.linha { flex-wrap: wrap; }
	.pontilhado { display: none; }
	.nome { flex: 1 1 100%; }
	.preco { flex: 1 1 100%; text-align: right; margin-top: var(--esp-1); }
}

@media print {
	.topo, .busca, .acao-whatsapp, .aviso-sem-script { display: none; }
	.categoria, .com-script .categoria { display: block; }
	body { font-size: 11pt; }
}