/*
 * Astra + Elementor reset around the Asheville Vacation Villas design. HAND-WRITTEN.
 *
 * The design itself is avv-core/assets/css/avv.css (the plugin). This file only undoes what Astra and
 * Elementor add around it, so the WordPress pages match the static preview. Each rule names what it
 * beats. When something looks off, measure the winning rule before adding one here.
 */

/* Astra paints the page background through a layout class as well as body. */
body.avv,
body.avv.ast-page-builder-template,
body.avv.ast-plain-container,
body.avv .site-content {
	background-color: var(--ivory-100);
}

body.avv {
	color: var(--ink);
	font-family: var(--avv-body);
	font-size: 16px;
	line-height: 1.6;
}

/* Astra's content wrappers: no padding, no max-width, and never a flex row. */
body.avv #content > .ast-container,
body.avv .site-content > .ast-container {
	max-width: none;
	padding: 0;
	margin: 0;
	display: block;
}

body.avv .entry-content,
body.avv .entry-content > .elementor {
	margin: 0;
}

/* The Elementor wrapper: one full-width container per section, holding one avv-* widget, no gap or padding. */
.e-con.avv-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--container-max-width: none;
	--content-width: 100%;
	padding: 0;
	gap: 0;
}

.e-con.avv-con > .elementor-widget {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* Elementor ships .elementor img { height: auto } after the design, which defeats object-fit crops. */
.elementor .hero-media img,
.elementor .cta-media img,
.elementor .vf-media img,
.elementor .gallery-item img,
.elementor .octagon img,
.elementor img.pg-img {
	height: 100%;
}

/*
 * Astra's base typography, found by measuring against the static preview (check_site.py):
 *   html { font-size: 91.2% } on phones            -> every rem in the design shrank below 544px
 *   p { margin-bottom: 1.75em } + a margin reset   -> paragraphs spaced wider than the design
 *   .entry-content :where(h2), h2 { line-height: 1.3 } -> headings tighter than the design, whose
 *                                                        headings inherit body's 1.6 (not "normal")
 * Restored at matching specificity (0,0,1 / 0,1,0), so the design's own class rules still win.
 */
html:root {
	font-size: 100%;
}

:where(body.avv) p {
	margin-top: 1em;
	margin-bottom: 1em;
}

:where(body.avv) .elementor :where(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
	margin-bottom: 0;
	line-height: inherit;
}

/* The footer column titles (h5) set their own margin, so restore only their line-height. */
body.avv .footer-col h5 {
	line-height: inherit;
}

/* Astra gives buttons and labels fixed line-heights; the design's use the browser default / body 1.6. */
body.avv .avv-form button.btn {
	line-height: normal;
}

body.avv .avv-form .field label {
	line-height: inherit;
}

body.avv .entry-content a {
	text-decoration: none;
}

/* Astra colours a:hover/a:focus; single-class link buttons would lose their own colour on hover. */
body.avv a.btn-primary:hover,
body.avv a.btn-primary:focus {
	color: var(--green-950);
}

body.avv a.btn-ghost:hover,
body.avv a.btn-ghost:focus,
body.avv a.btn-dark:hover,
body.avv a.btn-dark:focus {
	color: var(--ivory-50);
}

body.avv a.plan-link:hover,
body.avv a.plan-link:focus {
	color: var(--green-900);
}

body.avv #site-header:not(.scrolled) a.nav-phone:hover {
	color: var(--ivory-50);
}

body.avv #site-header.scrolled a.nav-phone:hover {
	color: var(--green-900);
}

/* Astra fills any <button> with its accent colour on hover/focus; pin every button's own look. */
body.avv .menu-btn,
body.avv .menu-btn:hover,
body.avv .menu-btn:focus,
body.avv .mobile-close,
body.avv .mobile-close:hover,
body.avv .mobile-close:focus,
body.avv .pg-open,
body.avv .pg-open:hover,
body.avv .pg-open:focus {
	background: none;
	box-shadow: none;
}

body.avv .pg-filter:hover,
body.avv .pg-filter:focus {
	background: transparent;
	color: var(--green-900);
	box-shadow: none;
}

body.avv .pg-filter.is-active,
body.avv .pg-filter.is-active:hover,
body.avv .pg-filter.is-active:focus {
	background: var(--green-700);
	color: var(--ivory-50);
}

body.avv .lb-btn:hover,
body.avv .lb-btn:focus {
	background: rgba(251, 248, 241, 0.16);
	color: var(--ivory-50);
	box-shadow: none;
}

body.avv .avv-form button.btn-dark,
body.avv .avv-form button.btn-dark:focus {
	background: var(--green-700);
	color: var(--ivory-50);
	border: 0;
	box-shadow: none;
}

body.avv .avv-form button.btn-dark:hover {
	background: var(--green-800);
	color: var(--ivory-50);
}