/**
 * VRG base layer — typography + primitives built on the token set.
 * Tokens come from the VRG Brand System plugin (--vrg-*).
 */

body,
#et-main-area {
	background: var(--vrg-color-surface);
	color: var(--vrg-color-ink);
	font-family: var(--vrg-font-body);
	font-size: var(--vrg-size-body);
	line-height: var(--vrg-leading-body);
}

h1, h2, h3,
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3 {
	font-family: var(--vrg-font-display);
	color: var(--vrg-color-primary);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }

/* The O Group trick: condensed uppercase eyebrows above serif headlines.
   NOTE: the accent (butter) is only 1.22:1 on cream — never use it for text on a light
   background. Small type uses the text-safe violet (6.64:1); the accent returns on dark. */
.vrg-eyebrow {
	font-family: var(--vrg-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--vrg-tracking-eyebrow);
	font-size: 0.8125rem;
	color: var(--vrg-color-violet-text);
	margin-bottom: 0.75rem;
	display: block;
}

.vrg-section--dark .vrg-eyebrow {
	color: var(--vrg-color-accent);
}

p { max-width: var(--vrg-measure); }

/* Lilac is 2.85:1 on cream — decorative only. Links use the deep anchor. */
a { color: var(--vrg-color-primary); }
a:hover { color: var(--vrg-color-violet-text); }

.vrg-section--dark a { color: var(--vrg-color-accent); }
.vrg-section--dark a:hover { color: var(--vrg-color-primary-light); }

/* Buttons — kill Divi blue everywhere. */
.et_pb_button,
.vrg-button {
	font-family: var(--vrg-font-eyebrow);
	text-transform: uppercase;
	letter-spacing: var(--vrg-tracking-eyebrow);
	background: var(--vrg-color-primary);
	color: var(--vrg-color-surface);
	border: 1px solid var(--vrg-color-primary);
	border-radius: var(--vrg-radius);
	padding: 0.85em 2em;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.et_pb_button:hover,
.vrg-button:hover {
	/* Butter fill with ink text = 13.77:1. */
	background: var(--vrg-color-accent);
	border-color: var(--vrg-color-accent);
	color: var(--vrg-color-ink);
}

.vrg-button--ghost {
	background: transparent;
	color: var(--vrg-color-primary);
}

/* Dark sections (hero overlay, valuation CTA band, footer). */
.vrg-section--dark {
	background: var(--vrg-color-primary);
	color: var(--vrg-color-surface);
}

.vrg-section--dark h1,
.vrg-section--dark h2,
.vrg-section--dark h3 {
	color: var(--vrg-color-surface);
}

.vrg-section {
	padding-block: var(--vrg-section-y);
}

/* Thin rule used as a section divider. Butter is invisible on cream, so the
   light-background version uses lilac and the accent is reserved for dark bands. */
.vrg-rule {
	width: 64px;
	height: 2px;
	background: var(--vrg-color-primary-light);
	border: 0;
	margin: 1.5rem 0;
}

.vrg-section--dark .vrg-rule {
	background: var(--vrg-color-accent);
}

/* Soft lilac wash — for alternating sections and the communities grid. */
.vrg-section--tint {
	background: color-mix(in srgb, var(--vrg-color-primary-light) 18%, var(--vrg-color-surface));
}

/* Butter wash — for the stats strip / quiet CTA bands. */
.vrg-section--warm {
	background: color-mix(in srgb, var(--vrg-color-accent) 45%, var(--vrg-color-surface));
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--vrg-color-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- Logo ---------------------------------------------------------------- */
.vrg-logo {
	display: inline-block;
	line-height: 0;
}

.vrg-logo svg {
	display: block;
	height: auto;
}

.vrg-logo--horizontal svg,
.vrg-logo--horizontal-reversed svg { width: clamp(180px, 22vw, 260px); }
.vrg-logo--stacked svg,
.vrg-logo--stacked-reversed svg { width: clamp(200px, 26vw, 320px); }
.vrg-logo--mark svg { width: 64px; }

/* --- Responsive corrections ---------------------------------------------- */

/* Divi 5 flex rows keep 1_2 columns side by side on phones, which pushed the
   buyer/seller panels ~27px off a 390px viewport. Force our sections to stack. */
@media (max-width: 980px) {
	.vrg-section > .et_pb_row > .et_pb_column,
	.vrg-hero > .et_pb_row > .et_pb_column,
	.vrg-chero > .et_pb_row > .et_pb_column,
	.vrg-footer > .et_pb_row > .et_pb_column {
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
	}

	.vrg-section > .et_pb_row,
	.vrg-footer > .et_pb_row {
		display: block !important;
	}
}

/* Padding must never add to the declared width. */
.vrg-split__panel,
.vrg-cfacts,
.vrg-card,
.vrg-formslot,
.vrg-idx-slot--panel,
.vrg-listing {
	box-sizing: border-box;
	max-width: 100%;
}

/* Tap targets: WCAG 2.5.8 requires 24x24 minimum. Inline text links in the
   footer, community tiles and legal bar were rendering 15–19px tall. */
.vrg-footer__nav a,
.vrg-footer__notices a,
.vrg-footer__contact a,
.vrg-contact a,
.vrg-meet__copy a,
.vrg-communities .vrg-community,
.vrg-cnear a {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

.vrg-footer__notices a {
	padding-block: 0.15rem;
}

/* Reserve space for the header logo so it cannot shift layout while loading. */
.et_pb_menu__logo img,
.vrg-footer__logo {
	aspect-ratio: 1706 / 298;
	height: auto;
}

.vrg-footer__logo {
	aspect-ratio: 968 / 552;
}

/* --- Retire Divi blue (BUILD-SPEC §2) ------------------------------------ */
/* Divi ships `.et_pb_bg_layout_light.et_pb_button { color: #2ea3f2 }` at high
   specificity, which overrode our ghost button and failed contrast at 2.74:1.
   Match Divi's own specificity pattern to win cleanly. */
body #page-container .et_pb_section .et_pb_button,
body #page-container .et_pb_section .et_pb_button:hover,
body .et_pb_bg_layout_light.et_pb_button,
body .et_pb_bg_layout_light .et_pb_button {
	color: var(--vrg-color-surface);
}

body #page-container .et_pb_section .et_pb_button.vrg-button--ghost,
body .et_pb_bg_layout_light.et_pb_button.vrg-button--ghost {
	background: transparent;
	color: var(--vrg-color-primary);
	border-color: var(--vrg-color-primary);
}

body #page-container .et_pb_section .et_pb_button.vrg-button--ghost:hover,
body .et_pb_bg_layout_light.et_pb_button.vrg-button--ghost:hover {
	background: var(--vrg-color-accent);
	border-color: var(--vrg-color-accent);
	color: var(--vrg-color-ink);
}

/* Links inside Divi modules must not fall back to Divi blue either.
   Scoped to light sections: without the :not(.vrg-section--dark) guard this rule also hit the
   footer and every dark band, painting plum links on a plum background — visible in the HTML,
   invisible on screen. */
body #page-container .et_pb_section:not(.vrg-section--dark) a:not(.et_pb_button):not(.vrg-community):not(.vrg-card) {
	color: var(--vrg-color-primary);
}

body .vrg-section--dark a:not(.et_pb_button) {
	color: var(--vrg-color-accent);
}