/* Contact page (Template Name: Contact Page) ------------------------
   Mirrors homesavers.ie: "CONTACT US" / "Send us your enquiry", a single
   column enquiry form, then the store-finder prompt — restyled with this
   theme's tokens. Contact Form 7 emits the controls, so most rules target
   CF7's classes rather than theme ones.

   Note on CF7 6.x: its HTML formatter wraps loose inline content in <p>, so
   selectors here avoid depending on a control being a direct child. */

.hs-contact__head { padding: 40px 0 0; }
.hs-contact__title {
	margin: 0 0 8px;
	font-family: var(--hs-font-bold);
	font-size: clamp(30px, 3.4vw, 45px);
	line-height: 1.05;
	color: var(--hs-red);
	text-transform: uppercase;
}
.hs-contact__sub {
	margin: 0 0 32px;
	font-family: var(--hs-font-semibold);
	font-size: 20px;
	line-height: 1.3;
	color: var(--hs-ink);
}
.hs-contact__missing { margin: 0 0 60px; font-size: 16px; color: var(--hs-muted); }

/* Form -------------------------------------------------------------- */
.hs-contact__form-wrap { max-width: 720px; }

.hs-field { margin: 0 0 18px; }
/* Not `> label`: CF7 can wrap a label in its own <p>, which would drop it out
   of a direct-child selector and lose the spacing below. */
.hs-contact .hs-field label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--hs-font-semibold);
	font-size: 15px;
	line-height: 1.2;
	color: var(--hs-ink);
}
/* ...and that generated <p> carries a default margin, which would double the
   label-to-control gap. */
.hs-contact .hs-field > p { margin: 0; }
.hs-req { color: var(--hs-red); }

/* First/Last name sit two-up on desktop, as on the existing site. */
.hs-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
}

.hs-contact .wpcf7-form-control.wpcf7-text,
.hs-contact .wpcf7-form-control.wpcf7-email,
.hs-contact .wpcf7-form-control.wpcf7-tel,
.hs-contact .wpcf7-form-control.wpcf7-select,
.hs-contact .wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid var(--hs-input-border);
	border-radius: 6px;
	font-family: var(--hs-font);
	font-size: 15px;
	line-height: 22px;
	color: var(--hs-ink);
}
.hs-contact .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--hs-green);
	box-shadow: 0 0 0 3px rgba(36, 140, 46, .15);
}
.hs-contact .wpcf7-form-control.wpcf7-textarea { min-height: 160px; resize: vertical; }
.hs-contact .wpcf7-form-control.wpcf7-select { appearance: auto; }
.hs-contact ::placeholder { color: var(--hs-muted); opacity: 1; }

/* Prefix is a short field, not a full-width one. */
.hs-field--prefix .wpcf7-form-control.wpcf7-select { max-width: 170px; }

.hs-field--submit { margin: 26px 0 0; }
.hs-contact .wpcf7-form-control.wpcf7-submit {
	display: inline-block;
	min-width: 190px;
	padding: 13px 32px;
	background: var(--hs-red);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-family: var(--hs-font-bold);
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
}
.hs-contact .wpcf7-form-control.wpcf7-submit:hover,
.hs-contact .wpcf7-form-control.wpcf7-submit:focus-visible { background: var(--hs-red-dark); }

/* CF7 validation + response messages, themed. */
.hs-contact .wpcf7-not-valid-tip { margin-top: 5px; font-size: 13px; line-height: 1.3; color: var(--hs-red); }
.hs-contact .wpcf7-form-control.wpcf7-not-valid { border-color: var(--hs-red); }
.hs-contact .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
	border-radius: 6px;
	border-width: 1px;
	font-size: 15px;
	line-height: 1.4;
}
.hs-contact .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--hs-green);
	background: #f1f8f2;
	color: #1d7526;
}
.hs-contact .wpcf7-form.invalid .wpcf7-response-output,
.hs-contact .wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--hs-red);
	background: #fdf2f3;
	color: var(--hs-red);
}
.hs-contact .wpcf7-spinner { vertical-align: middle; }

/* "Find A Store Near You!" ------------------------------------------- */
.hs-contact__stores {
	margin: clamp(44px, 6vw, 70px) 0 clamp(48px, 7vw, 90px);
	padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px);
	background: var(--hs-bg-soft);
	border-radius: var(--hs-radius);
	text-align: center;
}
.hs-contact__stores-title {
	margin: 0 0 8px;
	font-family: var(--hs-font-bold);
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.2;
	color: var(--hs-red);
}
.hs-contact__stores-text {
	margin: 0 0 20px;
	font-family: var(--hs-font-semibold);
	font-size: clamp(16px, 1.8vw, 19px);
	line-height: 1.4;
	color: var(--hs-ink);
}
/* Label pinned white across every link state — style.css carries the
   Underscores default `a:hover, a:focus, a:active { color: #191970 }`. */
.hs-contact__stores-btn,
.hs-contact__stores-btn:link,
.hs-contact__stores-btn:visited,
.hs-contact__stores-btn:hover,
.hs-contact__stores-btn:focus,
.hs-contact__stores-btn:active {
	display: inline-block;
	padding: 12px 32px;
	background: var(--hs-green);
	color: #fff;
	border-radius: 999px;
	font-family: var(--hs-font-bold);
	font-size: 16px;
	line-height: 1.2;
	text-decoration: none;
}
.hs-contact__stores-btn:hover,
.hs-contact__stores-btn:focus-visible { background: #1d7526; }

@media (max-width: 560px) {
	.hs-contact__head { padding-top: 24px; }
	.hs-contact__sub { font-size: 17px; margin-bottom: 24px; }
	.hs-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.hs-contact .wpcf7-form-control.wpcf7-submit { width: 100%; }
	.hs-contact__stores-btn { width: 100%; text-align: center; }
}