/*
 * site-custom.css — project styles layered on top of the theme.
 *
 * Contains:
 *   1. Accessibility utilities (screen-reader text, visible focus, skip link)
 *   2. Layout rules for the neighbourhood / area page content blocks
 *   3. The estimate request form
 */

/* ==========================================================================
   1. Accessibility utilities
   ========================================================================== */

/* Visually hidden but available to screen readers. */
.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The skip link must become visible when it receives keyboard focus. */
.skip-link:focus,
.sr-only-focusable:focus,
.screen-reader-text:focus {
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: #ffffff;
	color: #17324f;
	font-weight: 700;
	text-decoration: underline;
	border-radius: 4px;
	box-shadow: 0 0 0 3px #17324f;
}

/* A consistently visible focus indicator (WCAG 2.4.7 / 2.4.11). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #17324f;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Dark backgrounds need a light ring to stay visible. */
.main-section-10 a:focus-visible,
.main-section-10 button:focus-visible,
footer a:focus-visible,
.navbar-dark a:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

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

/* ==========================================================================
   2. Area page content blocks
   These wrappers sit directly inside `.container-fluid.p-0`, so without a
   width and gutters here the copy runs edge to edge.
   ========================================================================== */

.unique-content,
.services-content,
.choose-us-content,
.contact-us-content {
	max-width: 1320px;
	margin-inline: auto;
	padding: 25px 15px;
}

.unique-content {
	padding-top: 50px;
}

.contact-us-content {
	padding-bottom: 50px;
}

.unique-content > *:first-child,
.services-content > *:first-child,
.choose-us-content > *:first-child,
.contact-us-content > *:first-child {
	margin-top: 0;
}

/* These headings carry inch-based inline margins from a word-processor export. */
.services-content h2.western,
.choose-us-content h2.western,
.contact-us-content h2.western {
	margin-top: 0.5rem !important;
}

@media (max-width: 575.98px) {
	.unique-content,
	.services-content,
	.choose-us-content,
	.contact-us-content {
		padding: 20px 15px;
	}
}

/* ==========================================================================
   3. Estimate request form
   ========================================================================== */

.quote-form-wrap {
	width: 100%;
}

.quote-form {
	max-width: 34rem;
	margin-inline: auto;
	padding: 1.75rem 1.5rem 1.5rem;
	background: #ffffff;
	border: 1px solid #d3d9e0;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(23, 50, 79, 0.08);
}

.quote-form-title {
	margin: 0 0 0.4rem;
	font-size: 1.4rem;
	line-height: 1.25;
	color: #17324f;
}

.quote-form-intro {
	margin: 0 0 1.15rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: #46505c;
}

.quote-form-status:not(:empty) {
	margin-bottom: 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: 6px;
	background: #eaf4ec;
	border: 1px solid #2b6a45;
	color: #1d4a2f;
	font-size: 0.95rem;
}

.quote-form-status.is-error:not(:empty) {
	background: #fdeceb;
	border-color: #a32218;
	color: #8a1d15;
}

.qf-field {
	margin-bottom: 1.05rem;
}

.qf-label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: #22303d;
}

.qf-input {
	display: block;
	width: 100%;
	padding: 0.6rem 0.75rem;
	font-size: 1rem;
	line-height: 1.4;
	color: #1d2733;
	background-color: #ffffff;
	border: 1px solid #7a8899;
	border-radius: 6px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.qf-input:hover {
	border-color: #55647a;
}

.qf-input:focus {
	border-color: #17324f;
	box-shadow: 0 0 0 3px rgba(23, 50, 79, 0.18);
	outline: none;
}

/* Keep a visible indicator for Windows High Contrast / forced colors. */
@media (forced-colors: active) {
	.qf-input:focus,
	.qf-submit:focus {
		outline: 3px solid Highlight;
	}
}

.qf-input[aria-invalid="true"] {
	border-color: #a32218;
	box-shadow: 0 0 0 3px rgba(163, 34, 24, 0.15);
}

.qf-hint,
.qf-error {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	line-height: 1.4;
}

.qf-hint {
	color: #55606d;
}

.qf-error {
	color: #8a1d15;
	font-weight: 600;
}

select.qf-input {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2346505c' d='M4.5 6.2 8 9.7l3.5-3.5 1 1L8 11.7 3.5 7.2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.65rem center;
	background-size: 1.05rem;
	padding-right: 2.3rem;
}

textarea.qf-input {
	min-height: 6.5rem;
	resize: vertical;
}

/* Honeypot — hidden from sight and from assistive tech, but not display:none,
   which some bots detect. */
.qf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.qf-submit {
	display: inline-block;
	width: 100%;
	padding: 0.8rem 1.25rem;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	/* 5.6:1 against white text — meets WCAG AA */
	background-color: #2b6a45;
	border: 1px solid #2b6a45;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.qf-submit:hover {
	background-color: #235739;
	border-color: #235739;
}

.qf-submit[aria-disabled="true"],
.qf-submit:disabled {
	background-color: #5c6b7a;
	border-color: #5c6b7a;
	cursor: not-allowed;
}

.qf-privacy {
	margin: 0.9rem 0 0;
	font-size: 0.82rem;
	line-height: 1.5;
	color: #55606d;
}

.qf-privacy a {
	color: #17324f;
	text-decoration: underline;
}

/* In the narrow sidebar the form should fill the column. */
#right-sidebar .quote-form {
	max-width: none;
	border: 0;
	box-shadow: none;
	padding: 1.25rem 1rem;
}