/**
 * Contact page (page-contact.php). Loaded only on that page (functions.php).
 *
 * Moved unchanged from the template's inline <style> block. Section layout
 * stays in the template's inline styles, except the closing contact band
 * (.vac-cta), styled below. The estimate form rules cover both
 * the Contact Form 7 markup and the theme's built-in form, which uses the
 * same wrappers (.vac-cf7-form, .vac-form-row, .vac-form-group).
 */

html, body { margin: 0; padding: 0; background: #ffffff; }
.vac-page { font-family: var(--font-body); color: #1a1a1a; -webkit-font-smoothing: antialiased; }

/* Defensive reset: neutralize the theme's own global spacing rules
   (margins/padding on headings, paragraphs, lists) so only OUR
   inline styles control spacing on this page. */
.vac-page h1, .vac-page h2, .vac-page h3, .vac-page h4,
.vac-page p, .vac-page ul, .vac-page li, .vac-page div {
	margin: 0;
	padding: 0;
	line-height: normal;
	box-sizing: border-box;
}
.vac-page * { box-sizing: border-box; }
/* Card titles wrap evenly, like the theme's H1/H2 (style.css). */
.vac-page h3 { text-wrap: balance; }
.vac-page section { padding-left: 0; padding-right: 0; }

.vac-page a { color: #cc0000; text-decoration: none; }
.vac-page a:hover { color: #a30000; }
.vac-page input, .vac-page select, .vac-page textarea, .vac-page button { font-family: var(--font-body); }
.vac-page input:focus, .vac-page select:focus, .vac-page textarea:focus { outline: 2px solid #cc0000; outline-offset: 1px; }

/* Button hover animation - lift + deepen shadow */
.vac-page .vac-btn,
.vac-page .vac-btn-white,
.vac-page .vac-btn-dark-outline {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.vac-page .vac-btn:hover {
	background: #a30000 !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(204,0,0,0.45);
}
.vac-page .vac-btn-white:hover {
	background: #f0f0f0 !important;
	color: #111111 !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
/* Outline button for light sections: same fill-on-hover as the homepage's insurance button. */
.vac-page .vac-btn-dark-outline:hover {
	background: var(--color-dark) !important;
	color: var(--color-white) !important;
	transform: translateY(-2px);
}
.vac-page .vac-link-red { transition: color 0.2s ease; }
.vac-page .vac-link-red:hover { color: #a30000 !important; }

/* Keyboard focus: red ring on light sections, white ring on the navy CTA band. */
.vac-page a:focus-visible { outline: 2px solid #cc0000; outline-offset: 3px; }
.vac-page .vac-btn-dark-outline:focus-visible { outline-color: var(--color-dark); }
.vac-page .vac-cta a:focus-visible { outline-color: var(--color-white); }

/* Service + review card hover animation */
.vac-page .vac-card,
.vac-page .vac-review-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.vac-page .vac-card:hover {
	transform: translateY(-4px);
	border-color: #cc0000;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--color-dark) 14%, transparent);
}
.vac-page .vac-review-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--color-dark) 12%, transparent);
}

/* Fixed select dropdown styling - stop text cropping, match other inputs */
.vac-page select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
	padding: 13px 36px 13px 14px !important;
	height: auto !important;
	line-height: 1.4 !important;
	white-space: normal;
}

/* Services grid: even 3-per-row on desktop, 1-per-row on mobile */
.vac-services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 640px) {
	.vac-services-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== Estimate form styling - force single column regardless of
   whether the markup renders as our div structure OR wpautop's
   <p> structure, and override the theme's own .form-row grid. ===== */
.vac-page .vac-cf7-form { width: 100%; }

/* Force single column: covers div wrappers, wpautop <p>, and the
   theme's grid rule on .form-row / .vac-form-row. */
.vac-page .vac-cf7-form .vac-form-row,
.vac-page .vac-cf7-form .form-row,
.vac-page .vac-cf7-form p {
	display: block !important;
	grid-template-columns: none !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	gap: 0 !important;
	margin: 0 0 12px 0 !important;
}
.vac-page .vac-cf7-form .vac-form-group,
.vac-page .vac-cf7-form .form-group,
.vac-page .vac-cf7-form .wpcf7-form-control-wrap,
.vac-page .vac-cf7-form .vac-field {
	display: block !important;
	width: 100% !important;
	float: none !important;
	margin: 0 0 12px 0 !important;
}
/* wpautop <p> spacing to match test site exactly */
.vac-page .vac-cf7-form p { margin: 0 0 12px 0 !important; }

/* Hide the visible labels - placeholders carry the text. */
.vac-page .vac-cf7-form label {
	position: absolute !important;
	width: 1px !important; height: 1px !important;
	padding: 0 !important; margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.vac-page .vac-cf7-form br { display: none !important; }

/* Inputs + textarea */
.vac-page .vac-cf7-form input.vac-input,
.vac-page .vac-cf7-form textarea.vac-textarea,
.vac-page .vac-cf7-form input.wpcf7-form-control,
.vac-page .vac-cf7-form textarea.wpcf7-form-control {
	border: 1px solid #cccccc !important;
	border-radius: 6px !important;
	padding: 13px 14px !important;
	font-size: 1rem !important;
	font-family: var(--font-body) !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background: #ffffff !important;
	color: #1a1a1a !important;
	display: block !important;
	margin: 0 !important;
}
.vac-page .vac-cf7-form input:focus,
.vac-page .vac-cf7-form textarea:focus,
.vac-page .vac-cf7-form select:focus {
	outline: 2px solid #cc0000 !important;
	outline-offset: 1px;
}
.vac-page .vac-cf7-form textarea {
	resize: vertical !important;
	min-height: 90px !important;
	height: 90px !important;
}

/* Select dropdown - no custom arrow, matching test site */
.vac-page .vac-cf7-form select {
	background-image: none !important;
	padding: 13px 14px !important;
	border: 1px solid #cccccc !important;
	border-radius: 6px !important;
	font-size: 1rem !important;
	font-family: var(--font-body) !important;
	width: 100% !important;
	box-sizing: border-box !important;
	background-color: #ffffff !important;
	color: #1a1a1a !important;
	display: block !important;
	margin: 0 !important;
	height: auto !important;
}

/* Submit button */
.vac-page .vac-cf7-form .vac-submit,
.vac-page .vac-cf7-form input.wpcf7-submit {
	background: #cc0000 !important;
	color: #ffffff !important;
	border: none !important;
	font-family: var(--font-body) !important;
	font-weight: 650 !important;
	font-size: 1.0625rem !important;
	line-height: 1.2 !important;
	padding: 15px !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	width: 100% !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
.vac-page .vac-cf7-form .vac-submit:hover,
.vac-page .vac-cf7-form input.wpcf7-submit:hover {
	background: #a30000 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 20px rgba(204,0,0,0.45) !important;
}
/* From the live site's Customizer "Additional CSS", which is saved per theme
   and so does not carry over: uppercase label, resting shadow, gap above. */
.vac-page .vac-cf7-form .vac-submit,
.vac-page .vac-cf7-form input.wpcf7-submit {
	text-transform: uppercase;
	box-shadow: 0 4px 10px rgba(217, 0, 0, 0.25);
}
.vac-page .vac-cf7-form .vac-submit-wrap { margin-top: 8px; }
.vac-page .vac-cf7-form .wpcf7-spinner { display: block; margin: 10px auto 0; }
.vac-page .vac-cf7-form .vac-submit:disabled {
	cursor: wait !important;
	opacity: 0.75;
	transform: none !important;
}
.vac-page .wpcf7-not-valid-tip {
	color: #cc0000 !important;
	font-size: 0.875rem !important;
	margin-top: -8px;
	margin-bottom: 10px;
	display: block;
}
.vac-page .vac-field-error {
	color: #cc0000 !important;
	font-size: 0.875rem !important;
	margin-top: 4px;
	display: block;
}
.vac-page .vac-field-error[hidden] { display: none; }
.vac-page .vac-cf7-form [aria-invalid="true"] { border-color: #cc0000 !important; }
.vac-page .wpcf7-response-output,
.vac-page .vac-form-status {
	border-radius: 6px !important;
	font-size: 0.875rem !important;
	padding: 10px 14px !important;
	margin: 12px 0 0 !important;
}

/* Built-in form status, in Contact Form 7's colors. */
.vac-page .vac-form-status { border: 2px solid #dc3232; line-height: 1.5; }
.vac-page .vac-form-status--success { border-color: #46b450; }
.vac-page .vac-form-status[hidden] { display: none; }

/* Spam trap: off screen, never shown to visitors. */
.vac-page .vac-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ===== Closing contact band (.vac-cta): heading, actions and email,
   then the map with the address under it, then the hours panel.
   Two columns from 900px (map on the right, spanning both rows);
   below that the DOM order applies: actions, map, hours. ===== */
.vac-page .vac-cta {
	background: var(--color-dark);
	color: var(--color-white);
	padding: 56px 20px 72px;
}
.vac-page .vac-cta__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main" "map" "hours";
	gap: 32px;
}
.vac-page .vac-cta__main { grid-area: main; }
.vac-page .vac-cta__map { grid-area: map; }
.vac-page .vac-cta__hours { grid-area: hours; }
@media (min-width: 900px) {
	.vac-page .vac-cta__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "main map" "hours map";
		grid-template-rows: auto 1fr;
		gap: 32px 48px;
	}
	.vac-page .vac-cta__hours { align-self: start; }
}

.vac-page .vac-cta__title {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--h2-size);
	line-height: var(--h2-line-height);
	letter-spacing: -0.02em;
	margin: 0 0 24px;
	color: #ffffff;
}

/* Buttons: one row when the column is wide enough, otherwise Call on its
   own row with Text and WhatsApp sharing the next; stacked under 420px. */
.vac-page .vac-cta__main { container-type: inline-size; }
.vac-page .vac-cta__buttons {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}
@container (min-width: 420px) {
	.vac-page .vac-cta__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vac-page .vac-cta__btn--call { grid-column: 1 / -1; }
}
@container (min-width: 640px) {
	.vac-page .vac-cta__buttons { grid-template-columns: auto auto auto; justify-content: start; }
	.vac-page .vac-cta__btn--call { grid-column: auto; }
}
.vac-page .vac-cta__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	font-family: var(--font-body);
	font-weight: 650;
	font-size: 1.0625rem;
	line-height: 1.2;
	white-space: nowrap;
}
.vac-page .vac-cta__btn svg { flex: none; }
.vac-page .vac-cta__btn--call { background: #cc0000; color: #ffffff; }
.vac-page .vac-cta__btn--text { background: #ffffff; color: #111111; }
/* WhatsApp brand green with navy text and icon: 9.6:1, where white on #25D366 is 1.9:1. */
.vac-page .vac-cta__btn--whatsapp {
	background: #25d366;
	color: var(--color-dark);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.vac-page .vac-cta__btn--whatsapp:hover {
	background: #1ebe5b;
	color: var(--color-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.vac-page .vac-cta__email {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 12px;
	font-size: var(--font-size-md);
	font-weight: 500;
	color: #ffffff;
	overflow-wrap: anywhere;
	text-underline-offset: 4px;
}
.vac-page .vac-cta__email:hover {
	color: #ffffff;
	text-decoration: underline;
}

.vac-page .vac-cta__address {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0 0;
	font-style: normal;
	font-size: var(--font-size-md);
	line-height: 1.5;
	color: #ffffff;
}
.vac-page .vac-cta__address svg { flex: none; margin-top: 2px; color: #ff6b60; }
.vac-page .vac-cta__address-link { color: #ffffff; text-underline-offset: 4px; }
.vac-page .vac-cta__address-link:hover { color: #ffffff; text-decoration: underline; }
.vac-page .vac-cta__street { font-weight: 600; }
.vac-page .vac-cta__note {
	display: block;
	margin-top: 4px;
	font-size: var(--font-size-sm);
	color: color-mix(in srgb, var(--color-white) 75%, transparent);
}

.vac-page .vac-cta__hours-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--h3-size);
	line-height: var(--h3-line-height);
	color: #ffffff;
}
.vac-page .vac-cta__hours-list {
	margin: 0;
	padding: 6px 0;
	background: color-mix(in srgb, var(--color-white) 6%, var(--color-dark));
	border: 1px solid color-mix(in srgb, var(--color-white) 14%, transparent);
	border-radius: 12px;
}
.vac-page .vac-cta__hours-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 12px 18px;
	font-size: var(--font-size-base);
	line-height: 1.4;
}
.vac-page .vac-cta__hours-row + .vac-cta__hours-row {
	border-top: 1px solid color-mix(in srgb, var(--color-white) 10%, transparent);
}
.vac-page .vac-cta__hours-row dt { font-weight: 600; color: #ffffff; }
.vac-page .vac-cta__hours-row dd { margin: 0; color: #ffffff; }
.vac-page .vac-cta__hours-row--closed dd { color: color-mix(in srgb, var(--color-white) 70%, transparent); }
/* Today's row, marked by contact.js (aria-current="date"). */
.vac-page .vac-cta__hours-row[aria-current="date"] {
	background: color-mix(in srgb, var(--color-white) 6%, transparent);
	box-shadow: inset 3px 0 0 #cc0000;
}

/* Sticky mobile CTA bar: hidden by default, shown only under 720px */
#vac-sticky-bar { display: none; }
@media (max-width: 720px) {
	#vac-sticky-bar { display: flex !important; }
	/* Room for the sticky bar; navy so it reads as part of the CTA band, not a white gap above the footer. */
	.vac-page { padding-bottom: 60px; background: var(--color-dark); }
}