/**
 * Estilos base do tema: reset leve, layout global, cabeçalho, rodapé, grid
 * responsivo (mobile-first). Depende de tokens.css.
 *
 * @package valquiria-ramos
 */

/* ---------- Reset leve ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul[class] { list-style: none; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

html { -webkit-text-size-adjust: 100%; background: var(--vr-cream); }

body {
	font-family: var(--vr-font-ui);
	color: var(--vr-text);
	background: var(--vr-cream);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

/* Fade suave a cada carregamento/troca de página (respeita prefers-reduced-motion) */
@keyframes vrPageIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	body { animation: vrPageIn .5s ease both; }
}

h1, h2, h3, .vr-display { font-family: var(--vr-font-display); font-weight: 600; line-height: 1.15; }

/* ---------- Utilidades ---------- */
.vr-container {
	max-width: var(--vr-container);
	margin-inline: auto;
	padding-inline: var(--vr-gutter);
}

/* Acessibilidade: skip-link (RN-14) */
.vr-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--vr-dark);
	color: var(--vr-cream);
	padding: var(--vr-space-3) var(--vr-space-4);
	z-index: 1000;
}
.vr-skip-link:focus { left: var(--vr-space-4); top: var(--vr-space-4); }

:focus-visible { outline: 2px solid var(--vr-gold); outline-offset: 2px; }

/* Honeypot anti-spam: fica escondido em qualquer formulário */
.vr-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Cabeçalho ---------- */
.vr-header { width: 100%; z-index: 100; }
.vr-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vr-space-5);
	min-height: var(--vr-header-h);
}

.vr-brand { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.vr-brand img { display: block; }
.vr-brand__logo img { max-height: 50px; width: auto; }
/* escala proporcional: nunca comprime só na horizontal */
.vr-brand__full { max-height: 50px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* Navegação */
/* menu + botão Contato agrupados à direita, logo à esquerda (Figma 4:448) */
.vr-nav { margin-left: auto; }
.vr-nav__list { display: flex; align-items: center; gap: var(--vr-space-6); }
.vr-nav__list a {
	font-size: 14px;
	padding: 8px 2px;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
.vr-nav__list a:hover { color: var(--vr-gold); }
.vr-nav__list .current-menu-item > a,
.vr-nav__list .current_page_item > a,
.vr-nav__list a[aria-current="page"] {
	color: var(--vr-gold);
	border-bottom-color: var(--vr-gold);
}

/* Botão Contato / WhatsApp */
.vr-contato {
	display: inline-flex;
	align-items: center;
	gap: var(--vr-space-2);
	padding: 10px 22px;
	border-radius: var(--vr-radius-pill);
	background: linear-gradient(90deg, var(--vr-gold-grad-1), var(--vr-gold-grad-2));
	color: var(--vr-cream);
	font-weight: 700;
	font-size: 16px;
	white-space: nowrap;
}
.vr-contato:hover { color: var(--vr-cream); filter: brightness(1.05); }
.vr-contato svg { width: 22px; height: 22px; fill: currentColor; }

/* Variante sólida (páginas internas) */
.vr-header--solid {
	position: relative;
	background: var(--vr-cream);
	border-bottom: 1px solid var(--vr-line);
}
.vr-header--solid .vr-nav__list a { color: var(--vr-text); }

/* Variante transparente (home, sobre o hero) */
.vr-header--transparent {
	position: absolute;
	top: 0; left: 0;
	background: linear-gradient(180deg, rgba(38, 32, 28, .55), rgba(38, 32, 28, 0));
}
.vr-header--transparent .vr-nav__list a { color: var(--vr-cream); }
.vr-header--transparent .vr-nav__list a:hover,
.vr-header--transparent .vr-nav__list .current-menu-item > a { color: var(--vr-gold-light); border-bottom-color: var(--vr-gold-light); }

/* Ícone de menu (mobile) — lucide align-justify */
.vr-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	background: transparent;
	border: 0;
	padding: 8px;
}
.vr-nav-toggle svg { width: 26px; height: 26px; }
.vr-header--transparent .vr-nav-toggle { color: var(--vr-cream); }
.vr-header--solid .vr-nav-toggle { color: var(--vr-text); }

/* Fechar (x) e Contato dentro do popup — só no mobile */
.vr-nav__fechar { display: none; }
.vr-nav__contato { display: none; }

/* ---------- Rodapé ---------- */
.vr-footer { background: var(--vr-dark); color: var(--vr-text-muted); padding: var(--vr-space-8) 0; }
.vr-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: var(--vr-space-6);
}
/* Coluna "Sobre": logo à esquerda do conteúdo (desktop), com 44px de gap */
.vr-footer__col--sobre { display: flex; gap: 44px; align-items: flex-start; }
.vr-footer__logo { flex: none; }
.vr-footer__logo img { max-height: 64px; width: auto; }
.vr-footer h2 { font-family: var(--vr-font-ui); font-weight: 400; font-size: 20px; color: var(--vr-cream); margin-bottom: var(--vr-space-4); }
.vr-footer a { color: var(--vr-text-muted); }
.vr-footer a:hover { color: var(--vr-cream); }
.vr-footer__links { display: flex; flex-direction: column; gap: var(--vr-space-2); font-size: 14px; }
.vr-footer__sobre { font-size: 14px; max-width: 34ch; }
.vr-footer__creci { font-size: 14px; margin-top: var(--vr-space-4); }
.vr-footer__contato-item { display: flex; align-items: center; gap: var(--vr-space-2); font-size: 14px; margin-bottom: var(--vr-space-3); }
.vr-footer__contato-item svg { width: 24px; height: 24px; fill: var(--vr-gold); flex: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
	.vr-footer__grid { grid-template-columns: 1fr 1fr; row-gap: var(--vr-space-7); }
	/* no mobile o logo fica acima do "Sobre", com 32px de espaçamento */
	.vr-footer__col--sobre { flex-direction: column; gap: 32px; }
}

@media (max-width: 782px) {
	.vr-nav-toggle { display: inline-flex; }
	.vr-header .vr-nav-toggle { color: var(--vr-gold); } /* ícone do menu em dourado (#C59346) */
	.vr-header__actions .vr-contato { display: none; } /* Contato some do topo, vai pro popup */
	.vr-brand__full { max-height: 42px; }

	/* Popup de menu em tela cheia (escuro), como no Figma */
	.vr-nav {
		position: fixed;
		inset: 0;
		z-index: 200;
		background: var(--vr-dark);
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: var(--vr-space-6);
		padding: var(--vr-space-6);
	}
	.vr-nav.is-open { display: flex; }
	.vr-nav__fechar {
		display: block;
		position: absolute;
		top: 28px; right: 24px;
		background: none; border: 0;
		color: var(--vr-cream);
		font-size: 32px; line-height: 1; cursor: pointer;
	}
	.vr-nav__list { flex-direction: column; align-items: center; gap: var(--vr-space-5); }
	.vr-nav__list a,
	.vr-header .vr-nav__list a { color: var(--vr-cream); font-size: 18px; border-bottom: 0; padding: 0; }
	.vr-nav__list .current-menu-item > a { color: var(--vr-gold); }
	.vr-nav__contato { display: block; margin-top: var(--vr-space-4); }
	.vr-nav__contato .vr-contato { width: 232px; justify-content: center; }
	.vr-nav__contato .vr-contato span { display: inline; }
}

@media (max-width: 560px) {
	.vr-footer__grid { grid-template-columns: 1fr; }
	.vr-contato span { display: none; } /* no mobile bem estreito, só o ícone */
}

/* Grid de cards (base; colunas/gap definidos por página). */
.vr-cards-grid { display: grid; }

/* ---------- Card do imóvel (reutilizável: home + catálogo) ---------- */
/* Em grid/flex com align-items:stretch os cards ficam com a mesma altura;
   o corpo cresce (flex:1) e o botão vai para o rodapé (margin-top:auto),
   deixando os botões "Ver detalhes" alinhados mesmo com endereços de 2 linhas. */
.vr-card { display: flex; flex-direction: column; gap: var(--vr-space-4); color: var(--vr-text); }
.vr-card__img { border-radius: 20px; overflow: hidden; aspect-ratio: 394 / 226; background: var(--vr-border); }
.vr-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.vr-card:hover .vr-card__img img { transform: scale(1.04); }
.vr-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--vr-space-4); }
.vr-card__tipo { color: var(--vr-text-muted); font-size: 14px; }
.vr-card__preco { font-size: 20px; color: var(--vr-black); font-weight: 600; margin: 2px 0; }
.vr-card__end { color: var(--vr-text-muted); font-size: 14px; }
.vr-card__specs { display: flex; flex-wrap: wrap; gap: var(--vr-space-4); }
.vr-card__spec { display: flex; align-items: center; gap: var(--vr-space-2); color: var(--vr-text-muted); font-size: 14px; }
.vr-card__spec svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.vr-card__btn {
	display: block;
	text-align: center;
	margin-top: auto;
	border: 1px solid var(--vr-gold);
	color: var(--vr-gold);
	border-radius: var(--vr-radius-pill);
	padding: 10px;
	font-weight: 600;
	transition: background .15s, color .15s;
}
.vr-card:hover .vr-card__btn { background: var(--vr-gold); color: var(--vr-cream); }

/* ---------- Botões (detalhe, sobre, formulários) ---------- */
.vr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--vr-space-2); width: 100%; border: 0; border-radius: var(--vr-radius-pill); padding: 14px; font-weight: 700; font-size: 16px; }
.vr-btn--escuro { background: var(--vr-dark); color: var(--vr-cream); }
.vr-btn--escuro:hover { filter: brightness(1.1); color: var(--vr-cream); }
.vr-btn--whats { background: linear-gradient(90deg, var(--vr-gold-grad-1), var(--vr-gold-grad-2)); color: var(--vr-cream); }
.vr-btn--whats:hover { filter: brightness(1.05); color: var(--vr-cream); }
.vr-btn--whats svg { width: 24px; height: 24px; fill: currentColor; }
.vr-btn--auto { width: auto; padding-inline: var(--vr-space-6); }