/*
Theme Name: Lovia Healthy Home Cleaning
Theme URI: https://loviacleaning.com
Description: Custom child theme for Lovia Healthy Home Cleaning — a single-page site for residential and commercial cleaning across South Florida.
Author: Lovia Healthy Home Cleaning
Template: twentytwentyfive
Version: 2.6.2
Requires at least: 6.7
Tested up to: 7.1
License: GNU General Public License v2 or later
Text Domain: lovia
*/

/* ============================================================
   1. Tokens
   A white site. Colour is used only where it carries meaning —
   icons, buttons, the map. Everything else is space and type.
   ============================================================ */
:root {
	--lovia-green:      #3f7320;
	--lovia-green-dark: #2f5717;
	--lovia-leaf:       #7ecd43;
	--lovia-ink:        #23291f;
	--lovia-body:       #3a4433;
	--lovia-line:       #e6e9e2;
	--lovia-tint:       #f6f9f2;

	--lovia-ico-a: #b3df8d;
	--lovia-ico-b: #3f7320;

	--lovia-radius: 14px;
	--lovia-shadow: 0 1px 2px rgba(35, 41, 31, .04), 0 8px 24px rgba(35, 41, 31, .05);

	--lovia-header-h: 84px;
	--lovia-section-y: clamp(3.5rem, 8vw, 6.5rem);
	--lovia-gap: clamp(1rem, 2.2vw, 1.6rem);
}

/* ============================================================
   2. Base
   ============================================================ */
body {
	background: #fff;
	color: var(--lovia-body);
}
h1, h2, h3, h4 { color: var(--lovia-ink); text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { max-width: 100%; }

/* Anchor targets must clear the sticky header or the heading hides behind it. */
:where([id]) { scroll-margin-top: calc(var(--lovia-header-h) + 16px); }

/* ============================================================
   3. Section rhythm
   Sections are separated by white space and a hairline, not by
   alternating colour blocks.
   ============================================================ */
.lovia-section { padding-block: var(--lovia-section-y); }
.lovia-section + .lovia-section { border-top: 1px solid var(--lovia-line); }
.lovia-tinted { background: var(--lovia-tint); }

.lovia-eyebrow {
	display: block;
	margin: 0 0 .7rem;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--lovia-green);
}
.lovia-section h2 {
	margin: 0 0 .8rem;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
}
.lovia-lead {
	max-width: 60ch;
	margin-inline: auto;
	font-size: clamp(1.08rem, 1.7vw, 1.22rem);
	line-height: 1.65;
}

/* ============================================================
   4. Header — sticky, white, hairline bottom
   ============================================================ */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	border-bottom: 1px solid var(--lovia-line);
}
.admin-bar .wp-site-blocks > header { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header { top: 46px; } }

.wp-block-navigation .wp-block-navigation-item__content {
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lovia-ink);
	text-decoration: none;
	padding-block: .4rem;
}
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--lovia-green); }

/* ============================================================
   5. Buttons
   ============================================================ */
.wp-element-button,
.wp-block-button__link {
	border-radius: 999px;
	font-weight: 600;
	padding: .85rem 1.9rem;
	transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.wp-block-button:not(.is-style-outline) > .wp-element-button {
	background: var(--lovia-green);
	color: #fff;
	border: 2px solid var(--lovia-green);
}
.wp-block-button:not(.is-style-outline) > .wp-element-button:hover {
	background: var(--lovia-green-dark);
	border-color: var(--lovia-green-dark);
	color: #fff;
}
.wp-block-button.is-style-outline > .wp-element-button {
	background: transparent;
	color: var(--lovia-green);
	border: 2px solid var(--lovia-green);
}
.wp-block-button.is-style-outline > .wp-element-button:hover {
	background: var(--lovia-green);
	color: #fff;
}

/* ============================================================
   6. Hero
   ============================================================ */
.lovia-hero { padding-block: clamp(3.5rem, 9vw, 7rem); }
.lovia-hero h1 {
	margin: 0 0 1.1rem;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -.015em;
}
.lovia-hero .lovia-lead { font-size: clamp(1.05rem, 1.9vw, 1.28rem); }

/* Quick facts under the hero buttons — plain text, no boxes. */
.lovia-facts {
	list-style: none;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem clamp(1.2rem, 4vw, 2.6rem);
	font-size: 1.03rem;
}
.lovia-facts li { display: inline-flex; align-items: center; gap: .5rem; }
.lovia-facts .lovia-svg { width: 1.5rem; height: 1.5rem; flex: none; }

/* ============================================================
   7. Icon tiles — the core building block
   ============================================================ */
.lovia-grid {
	display: grid;
	gap: var(--lovia-gap);
	margin-top: clamp(2rem, 5vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.lovia-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Six tiles read best as two rows of three rather than 4+2. */
.lovia-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (min-width: 900px) {
	.lovia-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.lovia-tile {
	background: #fff;
	border: 1px solid var(--lovia-line);
	border-radius: var(--lovia-radius);
	padding: clamp(1.4rem, 3vw, 1.8rem);
	text-align: left;
	transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.lovia-tile:hover {
	border-color: #cfe0bd;
	box-shadow: var(--lovia-shadow);
	transform: translateY(-2px);
}
.lovia-tile .lovia-svg {
	width: 2.9rem;
	height: 2.9rem;
	display: block;
	margin-bottom: .95rem;
}
.lovia-tile h3 { margin: 0 0 .45rem; font-size: 1.18rem; line-height: 1.25; }
.lovia-tile p { margin: 0; font-size: 1.02rem; line-height: 1.62; }

/* ============================================================
   8. Steps
   ============================================================ */
.lovia-steps {
	list-style: none;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	padding: 0;
	display: grid;
	gap: var(--lovia-gap);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	counter-reset: lovia-step;
	text-align: left;
}
.lovia-step { padding-top: .25rem; }
.lovia-step::before {
	counter-increment: lovia-step;
	content: counter(lovia-step);
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: .9rem;
	border-radius: 999px;
	background: var(--lovia-green);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
}
.lovia-step h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.lovia-step p { margin: 0; font-size: 1.02rem; line-height: 1.62; }

/* ============================================================
   9. Service area
   ============================================================ */
.lovia-map {
	box-sizing: border-box;
	/* Leaflet gives its panes and controls z-index values up to 1000, and its
	   container is position:relative with z-index:auto — so those values compete
	   with the page instead of staying inside the map, and the map rode over the
	   sticky header on scroll. An explicit stacking context traps them here. */
	position: relative;
	z-index: 0;
	isolation: isolate;
	height: clamp(300px, 46vw, 440px);
	width: 100%;
	border-radius: var(--lovia-radius);
	border: 1px solid var(--lovia-line);
	margin-top: clamp(1.6rem, 4vw, 2.4rem);
}
.lovia-counties {
	display: grid;
	gap: var(--lovia-gap);
	margin-top: var(--lovia-gap);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	text-align: left;
}
.lovia-county h3 {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 .35rem;
	font-size: 1rem;
}
.lovia-county h3 .lovia-svg { width: 1.3rem; height: 1.3rem; flex: none; }
.lovia-county p { margin: 0; font-size: .99rem; line-height: 1.65; }

/* ============================================================
   10. Contact strip
   ============================================================ */
.lovia-contact {
	display: grid;
	gap: var(--lovia-gap);
	margin-top: clamp(1.6rem, 4vw, 2.4rem);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.lovia-contact > div { display: flex; gap: .8rem; align-items: flex-start; text-align: left; }
.lovia-contact > div > div { display: block; }
.lovia-contact .lovia-svg { width: 2.1rem; height: 2.1rem; flex: none; }
.lovia-contact strong { display: block; color: var(--lovia-ink); font-size: 1.02rem; margin-bottom: .2rem; }
.lovia-contact span, .lovia-contact a { font-size: 1.02rem; line-height: 1.55; }
.lovia-contact a { color: var(--lovia-green); font-weight: 600; text-decoration: none; }
.lovia-contact a:hover { text-decoration: underline; }

/* ============================================================
   11. Quote form
   ============================================================ */
.lovia-formwrap {
	max-width: 720px;
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	text-align: left;
}
.fluentform .ff-el-input--label label {
	font-weight: 600;
	font-size: .9rem;
	color: var(--lovia-ink);
}
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform select,
.fluentform textarea {
	border: 1px solid var(--lovia-line) !important;
	border-radius: 10px !important;
	padding: .8rem .95rem !important;
	font-size: 1rem !important;
	background: #fff !important;
	color: var(--lovia-ink) !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
	border-color: var(--lovia-leaf) !important;
	box-shadow: 0 0 0 3px rgba(126, 205, 67, .22) !important;
	outline: none !important;
}
.fluentform .ff-btn-submit {
	background: var(--lovia-green) !important;
	border: 2px solid var(--lovia-green) !important;
	color: #fff !important;
	border-radius: 999px !important;
	padding: .9rem 2.2rem !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	width: auto !important;
	transition: background-color .16s ease;
}
.fluentform .ff-btn-submit:hover {
	background: var(--lovia-green-dark) !important;
	border-color: var(--lovia-green-dark) !important;
}
.ff-message-success {
	background: var(--lovia-tint) !important;
	border: 1px solid #cfe0bd !important;
	border-radius: var(--lovia-radius) !important;
	color: var(--lovia-ink) !important;
	padding: 1.2rem !important;
}

/* ============================================================
   12. Footer + sticky mobile call bar
   ============================================================ */
.wp-site-blocks > footer { border-top: 1px solid var(--lovia-line); }

.lovia-callbar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 900;
	display: none;
	background: #fff;
	border-top: 1px solid var(--lovia-line);
	box-shadow: 0 -4px 18px rgba(35, 41, 31, .07);
}
.lovia-callbar a {
	flex: 1;
	padding: .95rem .5rem;
	text-align: center;
	font-weight: 600;
	font-size: 1.03rem;
	text-decoration: none;
}
.lovia-callbar a:first-child { color: var(--lovia-green); }
.lovia-callbar a:last-child { background: var(--lovia-green); color: #fff; }
@media (max-width: 781px) {
	.lovia-callbar { display: flex; }
	body { padding-bottom: 3.6rem; }
}

/* ============================================================
   13. Accessibility
   ============================================================ */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--lovia-leaf);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.lovia-tile:hover { transform: none; }
}

/* ============================================================
   14. Site logo
   Inlined vector, so it stays sharp at any size. The exported
   artwork carries a wide empty margin, cropped via the viewBox
   in lovia_logo_svg() — that lets the mark read larger without
   the header growing to match.
   ============================================================ */
.lovia-logo-link {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}
.lovia-logo {
	display: block;
	height: clamp(54px, 7.5vw, 78px);
	width: auto;
}

/* ============================================================
   15. Phone layout
   Section headings are centred, so on a single-column phone
   layout the left-aligned card text reads as misaligned against
   them. Centre the card content to match. Above 600px the grids
   are multi-column and left alignment reads better, so this is
   deliberately scoped to phones.
   ============================================================ */
@media (max-width: 600px) {
	.lovia-tile,
	.lovia-steps,
	.lovia-step,
	.lovia-county { text-align: center; }

	.lovia-tile .lovia-svg,
	.lovia-step::before { margin-left: auto; margin-right: auto; }

	.lovia-county h3 { justify-content: center; }

	.lovia-contact > div {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: .5rem;
	}

	.wp-site-blocks > footer .wp-block-column { text-align: center; }

	/* The form stays left-aligned: centred labels and inputs are measurably
	   harder to scan and fill than a left-aligned column. */
	.lovia-formwrap,
	.lovia-formwrap .fluentform { text-align: left; }
}

/* ============================================================
   16. Price callout
   A published rate converts better than "get a quote", so give
   it room to be read rather than burying it in a paragraph.
   ============================================================ */
.lovia-pricetag {
	display: block;
	max-width: 620px;
	margin: clamp(1.6rem, 3vw, 2.2rem) auto 0;
	padding: 1.15rem 1.5rem;
	border: 1px solid #cfe0bd;
	border-radius: var(--lovia-radius);
	background: var(--lovia-tint);
	text-align: center;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--lovia-ink);
}
.lovia-pricetag strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 3.4vw, 1.9rem);
	line-height: 1.15;
	color: var(--lovia-green);
	margin-bottom: .3rem;
}
.lovia-pricetag span {
	display: block;
	margin-top: .35rem;
	font-size: .95rem;
	color: var(--lovia-body);
}

/* The hero facts strip is a horizontal band rather than body copy, so let it
   run wider than the hero's reading column — at 900px the fourth item wrapped
   onto a line of its own by about 8px, which read as a mistake. */
.lovia-hero .lovia-facts {
	max-width: 1060px !important;
	column-gap: clamp(1rem, 3vw, 2.1rem);
}

/* Map legend — two rings need labelling or the inner one just looks like a blob. */
.lovia-maplegend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .4rem 1.6rem;
	margin: .9rem 0 0;
	font-size: .93rem;
	color: var(--lovia-body);
}
.lovia-key {
	display: inline-block;
	width: 1.1rem;
	height: .75rem;
	margin-right: .45rem;
	vertical-align: -1px;
	border-radius: 3px;
}
.lovia-key--clean   { background: rgba(126,205,67,.4);  border: 1px solid var(--lovia-green); }
.lovia-key--laundry { background: rgba(63,115,32,.42); border: 1px dashed var(--lovia-green-dark); }

/* ============================================================
   17. Footer
   A short, centred, full-width bar. Deliberately minimal: the
   sticky header carries the logo and the nav, so the footer only
   needs the contact details and the legal line.
   ============================================================ */
.lovia-footer {
	background: var(--lovia-tint);
	padding-block: 1.7rem 1.3rem;
	text-align: center;
}
.lovia-footer p { margin: 0; }

.lovia-footer-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .3rem .8rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--lovia-body);
}
.lovia-footer-contact a { color: var(--lovia-green); text-decoration: none; }
.lovia-footer-contact a:hover { text-decoration: underline; }
.lovia-footer-contact > span[aria-hidden] { color: #b9c7ad; }
.lovia-footer-hours { font-weight: 400; }

.lovia-footer-copy {
	margin-top: 1.05rem !important;
	padding-top: .9rem;
	border-top: 1px solid #dbe4d2;
	font-size: .86rem;
	color: #66715e;
}

@media (max-width: 600px) {
	.lovia-footer-contact > span[aria-hidden] { display: none; }
	.lovia-footer-hours { flex-basis: 100%; }
}