/* =============================================================
   Simulação do WordPress para a pré-visualização.
   Reproduz as variáveis que o theme.json gera e as classes de
   bloco do core (group, columns, buttons, image...).
   NÃO faz parte do tema — é só andaime para revisar o design.
   ============================================================= */

@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url("assets/fonts/fraunces-italic.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Karla";
	src: url("assets/fonts/karla.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}

:root {
	/* Paleta — 3 cores: Off White, Grafite, Dourado (detalhe).
	   Os nomes antigos (creme/oliva/marrom) são mantidos como apelidos
	   para não reescrever o site inteiro; agora apontam para a nova paleta. */
	--wp--preset--color--base: #FFFDF4;          /* off white — fundo predominante */
	--wp--preset--color--creme-claro: #FFFDF4;   /* off white */
	--wp--preset--color--creme: #E5D496;         /* dourado — acento em fundo escuro */
	--wp--preset--color--oliva: #E5D496;         /* dourado — detalhes */
	--wp--preset--color--oliva-escuro: #1F1F1F;  /* grafite */
	--wp--preset--color--marrom: #1F1F1F;        /* grafite */
	--wp--preset--color--marrom-escuro: #1F1F1F; /* grafite */
	--wp--preset--color--contraste: #1F1F1F;     /* grafite — texto principal */
	--wp--preset--color--texto-suave: #6f6a5c;   /* grafite suave — texto secundário */

	/* Fontes */
	--wp--preset--font-family--titulo: Fraunces, Georgia, serif;
	--wp--preset--font-family--corpo: Karla, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Tamanhos fluidos */
	--wp--preset--font-size--small: 0.875rem;
	--wp--preset--font-size--medium: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--wp--preset--font-size--large: clamp(1.1875rem, 1.1rem + 0.4vw, 1.5rem);
	--wp--preset--font-size--x-large: clamp(1.875rem, 1.5rem + 1.9vw, 2.75rem);
	--wp--preset--font-size--xx-large: clamp(2.375rem, 1.8rem + 2.9vw, 4rem);

	/* Espaçamentos */
	--wp--preset--spacing--20: clamp(0.75rem, 1.5vw, 1rem);
	--wp--preset--spacing--30: clamp(1.25rem, 2.5vw, 1.75rem);
	--wp--preset--spacing--40: clamp(2rem, 4vw, 3rem);
	--wp--preset--spacing--50: clamp(3rem, 6vw, 4.5rem);
	--wp--preset--spacing--60: clamp(4rem, 8vw, 6.5rem);

	/* Sombras */
	--wp--preset--shadow--suave: 0 4px 16px rgba(31, 31, 31, 0.08);
	--wp--preset--shadow--cartao: 0 10px 30px rgba(31, 31, 31, 0.10);
	--wp--preset--shadow--forte: 0 20px 45px rgba(31, 31, 31, 0.18);

	--largura-conteudo: 760px;
	--largura-ampla: 1200px;
}

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

body {
	margin: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contraste);
	font-family: var(--wp--preset--font-family--corpo);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* --- Títulos --- */
h1, h2, h3, h4 {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--marrom);
	margin: 0;
}

h1 { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.1; }
h2 { font-size: var(--wp--preset--font-size--x-large); }
h3 { font-size: var(--wp--preset--font-size--large); }

p { margin: 0; }

a {
	color: var(--wp--preset--color--oliva-escuro);
	text-decoration: underline;
}

a:hover { color: var(--wp--preset--color--marrom); }

/* --- Layout "constrained" do WordPress --- */
.wp-block-group {
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}

.wp-block-group > * {
	max-width: var(--largura-conteudo);
	margin-left: auto;
	margin-right: auto;
}

.wp-block-group > .alignwide {
	max-width: var(--largura-ampla);
}

.wp-block-group > .alignfull {
	max-width: none;
}

/* Grupo com layout flex (ex.: a barra do cabeçalho): os filhos NÃO herdam
   a largura de conteúdo nem margens automáticas — senão o logo "flutua". */
.shim-flex > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Grupos que declaram um contentSize próprio (layout constrained do bloco).
   O GRUPO continua com a largura ampla (1200px, centralizado); quem fica
   estreito são os FILHOS. Foi confundir essas duas coisas que jogou o
   título para a borda da tela em monitores largos. */
.shim-conteudo-900 > * {
	max-width: 900px;
}

.shim-conteudo-820 > * {
	max-width: 820px;
}

/* justifyContent: left → filhos encostam à esquerda da faixa, não centralizam */
.shim-conteudo-620 > * {
	max-width: 620px;
	margin-left: 0;
	margin-right: auto;
}

.shim-conteudo-760 > * {
	max-width: 760px;
	margin-left: 0;
	margin-right: auto;
}

/* Grupo com layout "default" (flex/livre): os filhos não são
   espremidos pelo contentSize. */
.perfecta-desde > *,
.perfecta-valores {
	max-width: none;
}

/* --- Colunas --- */
.wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	align-items: normal;
}

.wp-block-columns.are-vertically-aligned-center { align-items: center; }

.wp-block-column {
	flex-grow: 1;
	min-width: 0;
	flex-basis: 0;
}

/* Acima de 782px o WordPress força as colunas a não quebrarem. */
@media (min-width: 782px) {
	.wp-block-columns { flex-wrap: nowrap !important; }
}

@media (max-width: 781px) {
	.wp-block-columns { flex-direction: column; }
	.wp-block-column { flex-basis: 100% !important; }
}

/* --- Botões --- */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-button__link {
	display: inline-block;
	padding: 0.95rem 2rem;
	border-radius: 3px;
	background-color: #1F1F1F; /* grafite */
	color: #FFFDF4; /* off white */
	font-family: var(--wp--preset--font-family--corpo);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.wp-block-button__link:hover {
	background-color: #E5D496; /* dourado */
	color: #1F1F1F;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--marrom);
	border: 1px solid currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--marrom);
	color: #FFFDF4;
}

/* --- Imagens ---
   O navegador aplica margem lateral de 40px em <figure> por padrão.
   Zeramos tudo (como o WordPress faz)... */
.wp-block-image {
	margin: 0;
}

/* ...e devolvemos a margem automática só para as imagens de largura ampla,
   que dependem dela para ficarem centralizadas na faixa. */
.wp-block-image.alignwide,
.wp-block-image.alignfull {
	margin-left: auto;
	margin-right: auto;
}

.wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

/* --- Cores utilitárias (as classes que o WP gera) --- */
.has-base-background-color { background-color: var(--wp--preset--color--base); }
.has-creme-claro-background-color { background-color: var(--wp--preset--color--creme-claro); }
.has-creme-background-color { background-color: var(--wp--preset--color--creme); }
.has-oliva-background-color { background-color: var(--wp--preset--color--oliva); }
.has-marrom-background-color { background-color: var(--wp--preset--color--marrom); }
.has-marrom-escuro-background-color { background-color: var(--wp--preset--color--marrom-escuro); }

.has-base-color { color: var(--wp--preset--color--base); }
.has-creme-color { color: var(--wp--preset--color--creme); }
.has-creme-claro-color { color: var(--wp--preset--color--creme-claro); }
.has-oliva-color { color: var(--wp--preset--color--oliva); }
.has-oliva-escuro-color { color: var(--wp--preset--color--oliva-escuro); }
.has-marrom-color { color: var(--wp--preset--color--marrom); }
.has-texto-suave-color { color: var(--wp--preset--color--texto-suave); }

.has-small-font-size { font-size: var(--wp--preset--font-size--small); }
.has-medium-font-size { font-size: var(--wp--preset--font-size--medium); }
.has-large-font-size { font-size: var(--wp--preset--font-size--large); }

/* --- Navegação --- */
.wp-block-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}


.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--marrom);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.wp-block-site-logo img {
	display: block;
	height: auto;
}

/* --- Acordeão (core/details) — vem do theme.json --- */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--creme);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30);
}

/* --- Separador --- */
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--creme);
	margin: 0;
}

/* ================= MENU HAMBÚRGUER =================
   Fica no fim do arquivo de propósito: as regras do menu precisam
   vencer as da navegação padrão, que têm a mesma força.
   ================================================== */
/* --- Menu hambúrguer (só na versão estática) --- */

.menu-abrir,
.menu-fechar {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--marrom);
	cursor: pointer;
}

.menu-abrir svg,
.menu-fechar svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

/* Até 900px o menu vira hambúrguer. Sete itens não cabem numa linha
   abaixo disso — foi o que quebrava no celular. */
@media (max-width: 900px) {
	.menu-abrir {
		display: flex;
	}

	/* O backdrop-filter do cabeçalho cria um "containing block" e prende
	   elementos de posição fixa dentro dele: sem isto, o menu em tela cheia
	   abriria com a altura do cabeçalho (103px) em vez da tela inteira. */
	.perfecta-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background-color: var(--wp--preset--color--base);
	}

	.menu-painel {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: flex;
		flex-direction: column;
		padding: var(--wp--preset--spacing--30);
		background-color: var(--wp--preset--color--creme-claro);
		/* Fica fora da tela até ser aberto — e sai da ordem de foco. */
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), visibility 280ms;
	}

	.menu-painel.is-aberto {
		transform: translateX(0);
		visibility: visible;
	}

	.menu-fechar {
		display: flex;
		align-self: flex-end;
	}

	.menu-painel ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		margin-top: var(--wp--preset--spacing--40);
		padding-left: var(--wp--preset--spacing--20);
	}

	.menu-painel li {
		width: 100%;
		border-bottom: 1px solid var(--wp--preset--color--creme);
	}

	.menu-painel .wp-block-navigation-item__content {
		display: block;
		padding: 1rem 0;
		font-family: var(--wp--preset--font-family--titulo);
		font-size: 1.5rem;
		font-weight: 600;
	}

	/* O sublinhado animado não faz sentido no menu vertical. */
	.menu-painel .wp-block-navigation-item__content::after {
		content: none;
	}

	.menu-painel .wp-block-buttons {
		display: flex !important;
		margin-top: var(--wp--preset--spacing--40);
	}

	.menu-painel .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

@media (min-width: 901px) {
	/* Acima de 900px o painel é só a barra de sempre. */
	.menu-painel {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
	}
}

/* O bloco Missão/Visão/Valores usa grade: os filhos não podem herdar
   a largura de leitura nem margem automática, senão a grade desmonta. */
.perfecta-mvv > *,
.perfecta-mvv-item > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Rodapé: os filhos do bloco flex não herdam a largura de leitura. */
.perfecta-footer-base > *,
.perfecta-footer .wp-block-columns > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}