/*
  base.css — carrega em todas as páginas.
  Fonte, tokens de design, tipografia base, foco, utilitários e os poucos
  componentes que aparecem nas duas páginas (pílula de status, botões, logo).
*/

/* ---------- Fonte: Nunito variável (400–800), self-hosted ---------- */

@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/nunito-latin-var.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
	--bege-100: #FDF1DA;   /* fundos quentes, rodapé */
	--bege-200: #F6E8CE;
	--bege-300: #E9D5AF;   /* texto secundário sobre marrom */
	--branco: #FFFFFF;     /* fundo principal do cardápio */
	--laranja: #E63314;    /* destaque, chip ativo, selo de ranking */
	--laranja-escuro: #B8280F;  /* estado pressionado */
	--marrom: #381E15;     /* texto principal, fundo do rodapé */
	--marrom-claro: #8A6A5B;    /* ingredientes, texto secundário */
	--marrom-medio: #7D5F50;    /* texto secundário sobre fundos cinza/bege (contraste AA) */
	--verde-whatsapp: #25D366;
	--verde-whatsapp-escuro: #1DB954;
	--linha: #EFE9E0;      /* divisórias e bordas */
	--cinza-foto: #E4DCD1; /* placeholder de imagem */
	--cinza-100: #F4F3F1;  /* fundo da página de links e laterais do cardápio no desktop */
	--cinza-200: #ECEAE6;  /* card "Quer pedir?" do cardápio */
	--cinza-500: #8A8782;  /* texto do botão "ver todos" */

	--fonte: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;

	--raio-card: 16px;
	--raio-pilula: 100px;

	--largura-max: 480px;  /* container no desktop */
	--raio-bento: 24px;    /* raio e gap dos blocos no desktop */
	--gutter: 20px;        /* margem lateral no cardápio */

	--transicao: 180ms ease;
}

/* ---------- Base ---------- */

html {
	font-family: var(--fonte);
	font-size: 100%;
	line-height: 1.4;
	color: var(--marrom);
	background: var(--branco);
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	font-size: 15px;
	overflow-wrap: anywhere;
}

[hidden] {
	display: none !important;
}

a {
	text-decoration: none;
}

/* Foco visível só no teclado, com contorno laranja em tudo. */
:focus-visible {
	outline: 2px solid var(--laranja);
	outline-offset: 2px;
	border-radius: 4px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
	outline: none;
}

/* ---------- Utilitários ---------- */

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

/* Rótulo em caixa alta (PREÇO POR TAMANHO, HORÁRIO, FUNCIONAMENTO...). */
.rotulo {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--marrom-claro);
}

/* ---------- Componentes comuns ---------- */

/* Pílula de status: bolinha verde + horário. */
.status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 30px;
	padding: 6px 13px 6px 11px;
	border-radius: var(--raio-pilula);
	background: var(--linha);
	font-size: 12px;
	font-weight: 600;
	color: var(--marrom);
	white-space: nowrap;
}

.status--branco {
	background: var(--branco);
}

.status__bolinha {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--verde-whatsapp);
}

/* Botões grandes de ação (WhatsApp, Instagram, voltar ao cardápio). */
.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 50px;
	padding: 13px 18px;
	border: 0;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.botao:active {
	transform: scale(0.985);
}

.botao--whatsapp {
	background: var(--verde-whatsapp);
	color: var(--branco);
}

.botao--whatsapp:hover {
	background: var(--verde-whatsapp-escuro);
}

.botao--contorno {
	min-height: 47px;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	background: transparent;
	color: var(--bege-100);
	font-size: 14px;
	font-weight: 600;
}

.botao--contorno:hover {
	border-color: rgba(255, 255, 255, 0.5);
}

.botao--laranja {
	width: auto;
	background: var(--laranja);
	color: var(--branco);
}

.botao--laranja:hover {
	background: var(--laranja-escuro);
}

/* Logo circular (imagem) e a versão vazia (só a inicial), se não houver arquivo. */
.hero__logo,
.rodape__logo,
.links__logo {
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	background: var(--cinza-foto);
}

.logo-vazio {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--logo-tamanho, 54px);
	height: var(--logo-tamanho, 54px);
	background: var(--laranja);
	color: var(--branco);
	font-weight: 800;
	font-size: calc(var(--logo-tamanho, 54px) * 0.42);
	line-height: 1;
}

/* Ícones SVG inline. */
.icone {
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

/* ---------- Páginas genéricas (index.php e 404.php) ---------- */

.alt-generico {
	background: var(--cinza-100);
}

.generico {
	max-width: var(--largura-max);
	min-height: 100vh;
	margin: 0 auto;
	padding: 64px 24px 40px;
	text-align: center;
}

.generico__codigo {
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	color: var(--laranja);
}

.generico__titulo {
	margin-top: 12px;
	font-size: 22px;
	font-weight: 800;
}

.generico__texto,
.generico__conteudo {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--marrom-claro);
}

.generico__conteudo {
	text-align: left;
}

.generico__conteudo p {
	margin: 0 0 1em;
}

.generico__voltar {
	margin-top: 28px;
}

/* ---------- Movimento reduzido ---------- */

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

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

.generico__inicio {
	display: inline-block;
	margin-left: 18px;
	min-height: 44px;
	line-height: 44px;
	font-size: 14px;
	font-weight: 700;
	color: var(--marrom-claro);
}

.generico__inicio:hover {
	color: var(--laranja);
}