/*
Theme Name: Worktop Child
Theme URI: https://worktop.keydesign.xyz/
Description: Handyman & Repair Elementor WordPress Theme
Author: Key-Design
Author URI: http://themeforest.net/user/Key-Design
Template: worktop
Version: 1.0
License: Envato Standard License
License URI: https://themeforest.net/licenses/standard
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-menu, featured-images, flexible-header, post-formats, sticky-post, translation-ready
Text Domain: worktop-child
*/

/* =========================================================================
   AMS Group — Contact Form 7 enquiry form
   Scope: .ams-form (and the CF7 chrome that sits around it)

   Notes:
   - Set the two brand colours in section 1 and everything else follows.
   - Section 2 undoes wpautop's stray <br> tags, which are what's pushing
     your labels onto their own lines.
   - Deliberately generous type sizes and hit areas — a fair slice of the
     stairlift audience is older and/or on a phone.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */

.wpcf7-form,
.ams-form {
	--ams-accent:        #00756F;   /* ← your brand colour */
	--ams-accent-hover:  #00211f;   /* ← ~12% darker than the above */
	--ams-accent-soft:   rgba(11, 92, 171, 0.10);

	--ams-ink:           #14181d;
	--ams-muted:         #59636f;
	--ams-line:          #e2e7ee;

	--ams-card-bg:       #ffffff;
	--ams-field-bg:      #f6f8fb;
	--ams-field-border:  #cfd7e2;

	--ams-error:         #c62828;
	--ams-success:       #14804a;

	--ams-radius:        10px;
	--ams-radius-lg:     16px;
	--ams-row-gap:       1.4rem;   /* vertical breathing room per question */
	--ams-col-gap:       1.75rem;  /* gutter between paired fields */
}


/* -------------------------------------------------------------------------
   2. wpautop clean-up + resets
   ------------------------------------------------------------------------- */

/* CF7 runs wpautop over the form template, which injects a <br> before every
   label and between the two consent checkboxes. Killing them here is the
   no-PHP fix; see the note at the bottom of this file for the cleaner one. */
.ams-form br { display: none; }

.ams-form p { margin: 0; }

.ams-form .wpcf7-form-control-wrap { display: block; }

.wpcf7-form .hidden-fields-container {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
}


/* -------------------------------------------------------------------------
   3. The card
   ------------------------------------------------------------------------- */

.ams-form {
	position: relative;
	overflow: hidden;                 /* keeps the accent rail inside the radius */
	padding: 2rem;
	color: var(--ams-ink);
	background: var(--ams-card-bg);
	border: 1px solid var(--ams-line);
	border-radius: var(--ams-radius-lg);
	box-shadow:
		0 1px 2px rgba(16, 24, 40, 0.04),
		0 18px 40px -20px rgba(16, 24, 40, 0.30);
}

/* Accent rail across the top — the one bit of decoration in here. */
.ams-form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: var(--ams-accent);
}


/* -------------------------------------------------------------------------
   4. Heading
   ------------------------------------------------------------------------- */

.ams-form__head { margin-bottom: 1.75rem; }

.ams-form__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--ams-ink);
}

.ams-form__intro {
	font-size: 0.975rem;
	line-height: 1.6;
	color: var(--ams-muted);
}


/* -------------------------------------------------------------------------
   5. Row rhythm — a hairline between every question
   ------------------------------------------------------------------------- */

.ams-form > .ams-grid,
.ams-form > .ams-field,
.ams-form > .ams-consent,
.ams-form > .ams-submit {
	padding-top: var(--ams-row-gap);
	padding-bottom: var(--ams-row-gap);
	border-top: 1px solid var(--ams-line);
}

.ams-form > .ams-submit { padding-bottom: 0; }

/* Paired fields, with a vertical hairline sitting in the gutter.
   Delete this whole block if you'd rather the pairs ran together. */
.ams-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--ams-col-gap);
}

.ams-grid > .ams-field + .ams-field {
	padding-left: var(--ams-col-gap);
	border-left: 1px solid var(--ams-line);
}


/* -------------------------------------------------------------------------
   6. Labels
   ------------------------------------------------------------------------- */

.ams-form label,
.ams-form .ams-label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ams-ink);
}

.ams-form .ams-req {
	margin-left: 0.15rem;
	font-weight: 700;
	color: var(--ams-accent);
	display: inline-block!important;
}

.ams-form .ams-hint {
	margin-left: 0.5rem;
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--ams-muted);
}


/* -------------------------------------------------------------------------
   7. Text inputs & textarea
   ------------------------------------------------------------------------- */

.ams-form input.wpcf7-form-control:not([type="checkbox"]):not([type="radio"]):not(.wpcf7-submit),
.ams-form textarea.wpcf7-form-control,
.ams-form select.wpcf7-form-control {
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	padding: 0.85rem 1rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ams-ink);
	background-color: var(--ams-field-bg);
	border: 1px solid var(--ams-field-border);
	border-radius: var(--ams-radius);
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease;
}

.ams-form input.wpcf7-form-control:not(.wpcf7-submit):hover,
.ams-form textarea.wpcf7-form-control:hover {
	border-color: #aab6c6;
}

.ams-form input.wpcf7-form-control:not(.wpcf7-submit):focus,
.ams-form textarea.wpcf7-form-control:focus,
.ams-form select.wpcf7-form-control:focus {
	outline: none;
	background-color: #ffffff;
	border-color: var(--ams-accent);
	box-shadow: 0 0 0 3px var(--ams-accent-soft);
}

.ams-form textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

.ams-form ::placeholder {
	color: #98a3b1;
	opacity: 1;
}

/* Stop Chrome's autofill yellow from fighting the field background */
.ams-form input:-webkit-autofill,
.ams-form input:-webkit-autofill:hover,
.ams-form input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 100px var(--ams-field-bg) inset;
	-webkit-text-fill-color: var(--ams-ink);
}


/* -------------------------------------------------------------------------
   8. "Service required" — checkboxes as tick-cards
   ------------------------------------------------------------------------- */

.ams-field--services .wpcf7-checkbox {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.65rem;
}

.ams-field--services .wpcf7-list-item {
	display: block;
	margin: 0;
}

.ams-field--services .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	padding: 0.75rem 0.9rem;
	font-size: 0.975rem;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	background-color: var(--ams-field-bg);
	border: 1px solid var(--ams-field-border);
	border-radius: var(--ams-radius);
	transition:
		border-color 0.15s ease,
		background-color 0.15s ease,
		box-shadow 0.15s ease;
}

.ams-field--services .wpcf7-list-item label:hover {
	background-color: #ffffff;
	border-color: var(--ams-accent);
}

.ams-field--services .wpcf7-list-item label:has(input:checked) {
	background-color: var(--ams-accent-soft);
	border-color: var(--ams-accent);
	box-shadow: inset 0 0 0 1px var(--ams-accent);
}

.ams-field--services .wpcf7-list-item label:has(input:focus-visible) {
	box-shadow: 0 0 0 3px var(--ams-accent-soft);
}

.ams-field--services input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
	cursor: pointer;
	accent-color: var(--ams-accent);
}


/* -------------------------------------------------------------------------
   9. Consent checkboxes
   ------------------------------------------------------------------------- */

.ams-consent .wpcf7-form-control-wrap ~ .wpcf7-form-control-wrap {
	margin-top: 0.65rem;
}

.ams-consent .wpcf7-list-item {
	display: block;
	margin: 0;
}

.ams-form .ams-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
	font-size: 0.925rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--ams-muted);
	cursor: pointer;
}

.ams-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	cursor: pointer;
	accent-color: var(--ams-accent);
}

.ams-consent a {
	color: var(--ams-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* -------------------------------------------------------------------------
   10. Submit
   ------------------------------------------------------------------------- */

.ams-submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
}

.ams-form input.wpcf7-submit {
	appearance: none;
	padding: 0.95rem 2.25rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: #ffffff;
	cursor: pointer;
	background-color: var(--ams-accent);
	border: 0;
	border-radius: var(--ams-radius);
	transition:
		background-color 0.15s ease,
		transform 0.15s ease,
		box-shadow 0.15s ease;
}

.ams-form input.wpcf7-submit:hover:not(:disabled) {
	background-color: var(--ams-accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -10px rgba(16, 24, 40, 0.65);
}

.ams-form input.wpcf7-submit:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: none;
}

.ams-form input.wpcf7-submit:focus-visible {
	outline: 3px solid var(--ams-accent);
	outline-offset: 3px;
}

/* reCAPTCHA v3 ships the button disabled until it has a token — give that
   state an honest look so it doesn't read as broken. */
.ams-form input.wpcf7-submit:disabled {
	cursor: not-allowed;
	opacity: 0.5;
	transform: none;
	box-shadow: none;
}


/* -------------------------------------------------------------------------
   11. Validation & response messages
   ------------------------------------------------------------------------- */

.ams-form input.wpcf7-not-valid,
.ams-form textarea.wpcf7-not-valid,
.ams-form select.wpcf7-not-valid {
	background-color: #fdf4f4;
	border-color: var(--ams-error);
}

.ams-form .wpcf7-checkbox.wpcf7-not-valid,
.ams-form .wpcf7-acceptance.wpcf7-not-valid {
	border-radius: var(--ams-radius);
	outline: 2px solid var(--ams-error);
	outline-offset: 6px;
}

.ams-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ams-error);
}

/* If CF7's own border colours win here, double the class up
   (.wpcf7-form.wpcf7-form.sent …) rather than reaching for !important. */
form.wpcf7-form .wpcf7-response-output {
	margin: 1.5rem 0 0;
	padding: 0.9rem 1.15rem;
	font-size: 0.95rem;
	line-height: 1.5;
	border: 1px solid var(--ams-line);
	border-left-width: 4px;
	border-radius: var(--ams-radius);
}

form.wpcf7-form.sent .wpcf7-response-output {
	color: #0e5c34;
	background-color: #f1faf5;
	border-color: var(--ams-success);
}

form.wpcf7-form.invalid .wpcf7-response-output,
form.wpcf7-form.unaccepted .wpcf7-response-output,
form.wpcf7-form.payment-required .wpcf7-response-output {
	color: #7a4d00;
	background-color: #fffaf0;
	border-color: #e0a106;
}

form.wpcf7-form.failed .wpcf7-response-output,
form.wpcf7-form.aborted .wpcf7-response-output,
form.wpcf7-form.spam .wpcf7-response-output {
	color: #8a1f21;
	background-color: #fdf4f4;
	border-color: var(--ams-error);
}


/* -------------------------------------------------------------------------
   12. Mobile
   ------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.ams-grid { grid-template-columns: 1fr; }

	/* Paired fields become their own rows, so swap the vertical hairline
	   for a horizontal one. */
	.ams-grid > .ams-field + .ams-field {
		padding-top: var(--ams-row-gap);
		padding-left: 0;
		border-top: 1px solid var(--ams-line);
		border-left: 0;
	}

	.ams-grid > .ams-field:first-child { padding-bottom: 0; }

	.ams-field--services .wpcf7-checkbox {
		grid-template-columns: 1fr;
	}

	.ams-form input.wpcf7-submit { width: 100%; }
}


/* -------------------------------------------------------------------------
   13. Motion preferences
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ams-form *,
	.ams-form *::before {
		transition: none !important;
	}
	.ams-form input.wpcf7-submit:hover:not(:disabled) {
		transform: none;
	}
}


/* =========================================================================
   Optional: the proper fix for the stray <br> tags

   Drop this in your child theme's functions.php (or a snippets plugin) and
   you can delete the `.ams-form br { display: none; }` rule above:

       add_filter( 'wpcf7_autop_or_not', '__return_false' );

   Caveat: it's site-wide, so any other CF7 form that's relying on wpautop
   for its line breaks will need its markup tidying too.
   ========================================================================= */