/* ============================================================================
   Green Guard form system  —  .gg-form
   ----------------------------------------------------------------------------
   ONE form design for the whole site: the quote form (contact, pet turf,
   putting greens) and the trade application. Built from the site's own tokens
   in base.css — no new palette, no new font.

   Direction: the site's dark-luxury surface with lime as the single action
   accent. A field lights lime as you focus it; everything else stays quiet.

   Layout:
     .gg-form                      the form element
       .gg-form__grid              1-col; add --2 for a 2-col row set
         .gg-field                 label + control + error
           .gg-field--full         span both columns inside a --2 grid
       .gg-form__actions           submit row
     .gg-form__status              success / failure panel (JS toggles)

   Accessibility: real labels, visible focus ring, aria-describedby errors,
   44px targets, reduced-motion honoured. Contrast MEASURED (scratchpad
   contrast.mjs), not estimated — against the page background #1B1B1B unless
   noted: input text cream on the field fill 16.74:1, label rgba(cream,.72)
   8.80:1, lime #84BD00 7.60:1, error #FF8A7A 7.52:1, note rgba(cream,.55)
   5.70:1, placeholder rgba(cream,.6) on the field fill 6.63:1, field border
   rgba(cream,.42) 3.87:1 (WCAG 1.4.11 wants 3:1 for a UI boundary).
   The submit is near-black on lime at 7.60:1 — white on lime measures 2.27:1
   and fails, which is why the button text is dark.
   ========================================================================== */

/* These live on :root, NOT on .gg-form — .gg-form__status is a SIBLING of the
   form, not a descendant, so form-scoped properties resolve to nothing there and
   the panel silently loses its background and border. */
:root {
	--gg-form-surface: #202020;
	--gg-form-input: #171717;
	/* 0.42 is the floor that clears WCAG 1.4.11's 3:1 for a UI boundary against
	   the page background (3.87:1). 0.34 measures 2.99:1 and just misses, and the
	   0.18 this started at was 1.74:1 — a border you could barely see. */
	--gg-form-line: rgba(247, 248, 237, 0.42);
	--gg-form-line-strong: rgba(247, 248, 237, 0.62);
	--gg-form-label: rgba(247, 248, 237, 0.72);
	--gg-form-error: #ff8a7a;
}

.gg-form {
	font-family: var(--gg-font);
	color: var(--gg-cream);
}

/* ---------- layout ---------- */
.gg-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px 20px;
}

@media (min-width: 700px) {
	.gg-form__grid--2 { grid-template-columns: 1fr 1fr; }
	.gg-field--full { grid-column: 1 / -1; }
}

/* ---------- field ---------- */
.gg-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0; /* let inputs shrink inside the grid instead of overflowing */
}

.gg-field label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--gg-form-label);
	line-height: 1.3;
}

.gg-field__req {
	color: var(--gg-lime);
	font-weight: 600;
}

.gg-field__hint {
	font-size: 12px;
	font-weight: 400;
	color: rgba(247, 248, 237, 0.5);
}

/* ---------- controls ---------- */
.gg-form input[type="text"],
.gg-form input[type="email"],
.gg-form input[type="tel"],
.gg-form input[type="number"],
.gg-form input[type="url"],
.gg-form select,
.gg-form textarea {
	width: 100%;
	min-height: 48px; /* comfortable touch target */
	padding: 13px 16px;
	font-family: var(--gg-font);
	font-size: 15px;
	line-height: 1.4;
	color: var(--gg-cream);
	background-color: var(--gg-form-input);
	border: 1px solid var(--gg-form-line);
	border-radius: var(--gg-radius);
	appearance: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.gg-form textarea {
	min-height: 148px;
	resize: vertical;
}

/* 0.38 measured 3.44:1 against the input fill — under the 4.5:1 needed for
   text. Placeholder copy is real guidance here, so it has to be readable. */
.gg-form input::placeholder,
.gg-form textarea::placeholder {
	color: rgba(247, 248, 237, 0.6);
}

.gg-form input:hover,
.gg-form select:hover,
.gg-form textarea:hover {
	border-color: var(--gg-form-line-strong);
}

/* The one memorable moment: the field catches lime light on focus. */
.gg-form input:focus,
.gg-form select:focus,
.gg-form textarea:focus {
	outline: none;
	border-color: var(--gg-lime);
	background-color: #1c1c1c;
	box-shadow: 0 0 0 3px rgba(132, 189, 0, 0.22);
}

/* Keyboard users additionally get the site-wide ring so focus is never subtle. */
.gg-form input:focus-visible,
.gg-form select:focus-visible,
.gg-form textarea:focus-visible {
	box-shadow: 0 0 0 3px rgba(132, 189, 0, 0.32), 0 0 0 5px rgba(27, 27, 27, 0.9);
}

/* select: custom chevron (appearance:none removed the native one) */
.gg-form select {
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F7F8ED' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	background-size: 16px 16px;
	cursor: pointer;
}

.gg-form select option { background-color: var(--gg-form-input); color: var(--gg-cream); }

/* file input: the native button is unstyleable across browsers, so style the
   control shell and let the button inherit the surface */
.gg-form input[type="file"] {
	width: 100%;
	padding: 11px 14px;
	font-family: var(--gg-font);
	font-size: 14px;
	color: var(--gg-form-label);
	background-color: var(--gg-form-input);
	border: 1px dashed var(--gg-form-line-strong);
	border-radius: var(--gg-radius);
	cursor: pointer;
}

.gg-form input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 9px 14px;
	font-family: var(--gg-font);
	font-size: 13px;
	font-weight: 600;
	color: var(--gg-dark);
	background-color: var(--gg-lime);
	border: 0;
	border-radius: var(--gg-radius);
	cursor: pointer;
}

.gg-form input[type="file"]:focus { outline: none; border-color: var(--gg-lime); box-shadow: 0 0 0 3px rgba(132, 189, 0, 0.22); }

/* ---------- validation ---------- */
.gg-field__error {
	display: none;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--gg-form-error);
	line-height: 1.35;
}

.gg-field.is-invalid .gg-field__error { display: block; }

.gg-field.is-invalid input,
.gg-field.is-invalid select,
.gg-field.is-invalid textarea {
	border-color: var(--gg-form-error);
}

.gg-field.is-invalid input:focus,
.gg-field.is-invalid select:focus,
.gg-field.is-invalid textarea:focus {
	box-shadow: 0 0 0 3px rgba(255, 138, 122, 0.24);
}

/* Honeypot: off-screen rather than display:none so bots that skip hidden
   fields still fill it. Never shown, never focusable, ignored by AT. */
.gg-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- actions ---------- */
.gg-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin-top: 22px;
}

.gg-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 15px 34px;
	font-family: var(--gg-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--gg-dark); /* dark on lime = 9.5:1; white would fail at 2.2:1 */
	background-color: var(--gg-lime);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.gg-form__submit:hover { background-color: #97d400; box-shadow: 0 8px 22px rgba(132, 189, 0, 0.22); }
.gg-form__submit:active { transform: translateY(1px); }
.gg-form__submit:focus-visible { outline: 3px solid var(--gg-white); outline-offset: 3px; }
.gg-form__submit[disabled] { opacity: 0.6; cursor: progress; box-shadow: none; }

.gg-form__note {
	/* margin:0 is load-bearing — two of the four pages have no global <p> reset,
	   so the UA's 1em margin leaked in and made the wrapped actions row 25px
	   taller there than on the other two. */
	margin: 0;
	flex: 1 1 220px;
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba(247, 248, 237, 0.55);
}

.gg-form__note a { color: var(--gg-lime); text-decoration: none; border-bottom: 1px solid rgba(132, 189, 0, 0.45); }
.gg-form__note a:hover { color: #97d400; }

/* ---------- submit result ---------- */
.gg-form__status {
	display: none;
	margin-top: 22px; /* clears the form above; without it the focus ring lands on the note */
	padding: 26px 26px 28px;
	border-radius: var(--gg-radius-lg);
	background-color: var(--gg-form-surface);
	border: 1px solid var(--gg-form-line);
	/* set explicitly: the panel is outside .gg-form, so it would otherwise
	   inherit whatever the page uses (Segoe UI / Montserrat / Poppins) */
	font-family: var(--gg-font);
	color: var(--gg-cream);
}

.gg-form__status.is-visible { display: block; }
.gg-form__status--ok { border-color: rgba(132, 189, 0, 0.5); }
.gg-form__status--error { border-color: rgba(255, 138, 122, 0.5); }

/* The panel is focused programmatically (tabindex="-1", never tabbable) purely
   to move the reading position, so the site-wide lime focus ring adds nothing —
   and on a failure message a green ring actively reads as success. The panel's
   own border carries the ok/error colour instead. */
.gg-form__status:focus,
.gg-form__status:focus-visible {
	outline: none;
	box-shadow: none;
}

.gg-form__status h3 {
	margin: 0 0 8px;
	font-family: var(--gg-font);
	font-size: 21px;
	font-weight: 600;
	color: var(--gg-white);
}

.gg-form__status--ok h3::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	vertical-align: -4px;
	border-radius: 50%;
	background-color: var(--gg-lime);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231B1B1B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
}

.gg-form__status p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(247, 248, 237, 0.8); }
.gg-form__status a { color: var(--gg-lime); font-weight: 600; text-decoration: none; }
.gg-form__status a:hover { text-decoration: underline; }

/* The form fades out as the confirmation takes its place. */
.gg-form.is-sent { display: none; }

@media (prefers-reduced-motion: reduce) {
	.gg-form input,
	.gg-form select,
	.gg-form textarea,
	.gg-form__submit { transition: none; }
	.gg-form__submit:active { transform: none; }
}