/*
 * Re-skins Contact Form 7's default markup to match the dark contact band
 * (Grenlander Home.dc.html:222-230). CF7 renders each field as
 * <label>...<span class="wpcf7-form-control-wrap"><input/></span></label>
 * — we don't control that markup directly (it's generated from the form's
 * [text* your-name] tags, see inc/cf7-integration.php), so styling targets
 * CF7's own classes rather than ours.
 */

.wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.wpcf7-form p { margin: 0; grid-column: span 2; }
.wpcf7-form p:has(input[name="your-name"]),
.wpcf7-form p:has(input[name="your-email"]) {
	grid-column: span 1;
}

.wpcf7-form label { display: block; font-size: 0; }

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

.wpcf7-form-control {
	width: 100%;
	box-sizing: border-box;
	background: #1b1e22;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	color: var(--gl-text-dark);
	padding: 15px 16px;
	font-family: 'Archivo', sans-serif;
	font-size: 15px;
}
.wpcf7-form-control:focus { border-color: var(--gl-green); outline: none; }
.wpcf7-form-control::placeholder { color: var(--gl-text-dark-3); }
textarea.wpcf7-form-control { resize: vertical; }

.wpcf7-form p:has(input[type="submit"]) {
	display: flex;
	justify-content: center;
}

/* The skewed-button treatment normally counter-skews an inner <span> (see
   .gl-btn in base.css), but CF7's [submit] renders a plain <input> with no
   wrappable child — skewing the input itself is the practical approximation;
   the label text tilts slightly along with it. */
.wpcf7-form input[type="submit"] {
	background: var(--gl-green);
	color: var(--gl-black);
	border: none;
	cursor: pointer;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 14px;
	padding: 16px 40px;
	border-radius: 4px;
	transform: skewX(-8deg);
}
.wpcf7-form input[type="submit"]:hover { background: var(--gl-green-hover); }
.wpcf7-form input[type="submit"]:disabled { opacity: 0.6; cursor: default; }

.wpcf7-not-valid-tip {
	color: #ff8a80;
	font-size: 12px;
	margin-top: 4px;
	display: block;
}
.wpcf7-response-output {
	grid-column: span 2;
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 14px;
	margin: 8px 0 0;
	border: 1px solid rgba(255, 255, 255, 0.15);
}
.wpcf7-mail-sent-ok { border-color: var(--gl-green); color: var(--gl-green); }
.wpcf7-validation-errors, .wpcf7-mail-sent-ng { border-color: #ff8a80; color: #ff8a80; }
.wpcf7-spinner { margin: 0 0 0 12px; }

@media (max-width: 560px) {
	.wpcf7-form,
	.wpcf7-form p:has(input[name="your-name"]),
	.wpcf7-form p:has(input[name="your-email"]) {
		grid-template-columns: 1fr;
		grid-column: span 2;
	}
}