/**
 * KISQEA :: Contact Form 7
 *
 * Loaded only on pages that actually contain a form. Everything is scoped to
 * .wpcf7 so no other plugin's markup is touched, and every value comes from
 * the theme's own tokens, so a palette change in Theme Options carries over.
 *
 * The layout follows the shape most contact forms want: labels above their
 * field, the name fields side by side, and a full width submit button.
 */

/* ==========================================================================
   Shell
   ========================================================================== */

.wpcf7 {
	--kq-cf7-gap: 1.25rem;

	/*
	 * A form is a single column of fields. Left to fill a full width section
	 * the inputs stretch to a silly length and the labels drift away from
	 * what they label, so it is capped at a comfortable reading width.
	 * This only ever constrains: dropped into a narrow column or a sidebar
	 * it has no effect.
	 */
	max-width: 42rem;

	color: var(--kq-body-color);
}

/* Centre it in its column instead of sitting against the left edge. */
.wpcf7.kq-cf7-center,
.kq-cf7-center .wpcf7 { margin-inline: auto; }

/* Let it fill the full width again, for a wide multi column form. */
.wpcf7.kq-cf7-wide,
.kq-cf7-wide .wpcf7 { max-width: none; }

.wpcf7 form.wpcf7-form { margin: 0; }

/* CF7 wraps every field in a <p>; the gap is handled on the field itself. */
.wpcf7 form.wpcf7-form > p { margin: 0 0 var(--kq-cf7-gap); }

/* ==========================================================================
   Fields
   ========================================================================== */

.wpcf7 label {
	display: block;
	margin-bottom: .5rem;
	color: var(--kq-heading-color);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/*
 * CF7 runs the template through autop, which drops a <br> between the label
 * text and its field. Both are block level already, so the break only adds a
 * stray gap.
 */
.wpcf7 label br { display: none; }

/* The field itself sits in an inline span, so width: 100% has nothing to
   resolve against until the wrap is block level too. */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: .5rem;
}

/* The asterisk CF7 prints for a required field. */
.wpcf7 label .kq-req,
.wpcf7 .kq-req {
	margin-left: .125rem;
	color: var(--kq-gold);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	padding: .875rem 1rem;
	border: 1px solid var(--kq-border);
	border-radius: var(--kq-radius);
	background: #fff;
	color: var(--kq-body-color);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color var(--kq-speed) var(--kq-ease), box-shadow var(--kq-speed) var(--kq-ease);
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 textarea {
	min-height: 9rem;
	resize: vertical;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border-color: var(--kq-gold);
	box-shadow: 0 0 0 3px rgba(182, 144, 101, .15);
	outline: 0;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: var(--kq-muted-light); }

/* A select needs its own arrow once the native one is removed. */
.wpcf7 select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1rem;
}

/* ==========================================================================
   Two up

   Add the class kq-cf7-row to a wrapper in the form template to put two
   fields side by side, the way a first and last name want to sit.
   ========================================================================== */

.wpcf7 .kq-cf7-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--kq-cf7-gap);
}

@media (min-width: 540px) {
	.wpcf7 .kq-cf7-row { grid-template-columns: 1fr 1fr; }
}

.wpcf7 .kq-cf7-row > p { margin-bottom: var(--kq-cf7-gap); }

/* ==========================================================================
   Checkboxes, radios and acceptance
   ========================================================================== */

.wpcf7 .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-radio .wpcf7-list-item,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item {
	display: block;
	margin: 0 0 .5rem;
}

.wpcf7 .wpcf7-list-item-label {
	margin-left: .5rem;
	color: var(--kq-body-color);
	font-size: .9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"],
.wpcf7 .wpcf7-checkbox input[type="checkbox"],
.wpcf7 .wpcf7-radio input[type="radio"] {
	width: 1rem;
	height: 1rem;
	accent-color: var(--kq-gold);
	vertical-align: middle;
}

/* ==========================================================================
   Submit
   ========================================================================== */

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1rem 2rem;
	border: 1px solid var(--kq-dark);
	border-radius: var(--kq-radius);
	background: var(--kq-dark);
	color: #fff;
	font-family: inherit;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--kq-speed) var(--kq-ease), border-color var(--kq-speed) var(--kq-ease), color var(--kq-speed) var(--kq-ease);
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
	border-color: var(--kq-gold);
	background: var(--kq-gold);
	color: #fff;
}

.wpcf7 input[type="submit"]:disabled,
.wpcf7 button[type="submit"]:disabled {
	opacity: .6;
	cursor: not-allowed;
}

/* The submit sits inside a <p> with the spinner; keep them on one line. */
.wpcf7 .wpcf7-spinner {
	display: inline-block;
	margin: 0 0 0 .75rem;
	vertical-align: middle;
}

/* ==========================================================================
   Messages

   CF7 5.x prints .wpcf7-response-output with a status class; older markup
   used coloured borders. Both are covered.
   ========================================================================== */

.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: .875rem 1.125rem;
	border: 1px solid var(--kq-border);
	border-left-width: 3px;
	border-radius: var(--kq-radius);
	font-size: .9375rem;
	line-height: 1.6;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #15803d;
	background: #f0fdf4;
	color: #14532d;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-color: #b45309;
	background: #fffbeb;
	color: #78350f;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #b91c1c;
	background: #fef2f2;
	color: #7f1d1d;
}

/* Per-field validation message. */
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: .375rem;
	color: #b91c1c;
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
	border-color: #b91c1c;
}

/* ==========================================================================
   On a dark section

   Add kq-cf7-invert to the Elementor section (or any ancestor) when the form
   sits on the dark background.
   ========================================================================== */

.kq-cf7-invert .wpcf7 label { color: #fff; }
.kq-cf7-invert .wpcf7 .wpcf7-list-item-label { color: rgba(255, 255, 255, .85); }

.kq-cf7-invert .wpcf7 input[type="text"],
.kq-cf7-invert .wpcf7 input[type="email"],
.kq-cf7-invert .wpcf7 input[type="tel"],
.kq-cf7-invert .wpcf7 input[type="url"],
.kq-cf7-invert .wpcf7 select,
.kq-cf7-invert .wpcf7 textarea {
	border-color: rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .06);
	color: #fff;
}

.kq-cf7-invert .wpcf7 input::placeholder,
.kq-cf7-invert .wpcf7 textarea::placeholder { color: rgba(255, 255, 255, .45); }

.kq-cf7-invert .wpcf7 input[type="submit"],
.kq-cf7-invert .wpcf7 button[type="submit"] {
	border-color: var(--kq-gold);
	background: var(--kq-gold);
}

.kq-cf7-invert .wpcf7 input[type="submit"]:hover,
.kq-cf7-invert .wpcf7 button[type="submit"]:hover {
	border-color: #fff;
	background: #fff;
	color: var(--kq-dark);
}