/* ==========================================================================
   Imperium Dei — Contact Form 7 styling
   Loaded only on pages that actually contain a form.
   ========================================================================== */

.wpcf7 {
	max-width: 780px;
}

.id-form-grid {
	display: grid;
	gap: var(--id-s5);
	grid-template-columns: 1fr;
}

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

.id-field {
	display: flex;
	flex-direction: column;
	gap: var(--id-s2);
}

.id-field > label,
.wpcf7 label {
	font-size: var(--id-fs-sm);
	font-weight: 600;
	color: var(--id-ink);
	letter-spacing: 0.01em;
}

.id-field__hint {
	font-size: var(--id-fs-xs);
	color: var(--id-text-muted);
	max-width: none;
}

/* CF7 wraps every control in a <span class="wpcf7-form-control-wrap">. */
.wpcf7-form-control-wrap { display: block; }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--id-s3) var(--id-s4);
	font-family: var(--id-font-body);
	font-size: var(--id-fs-base);
	line-height: 1.5;
	color: var(--id-text);
	background-color: #fff;
	border: 1px solid var(--id-paper-line);
	border-radius: var(--id-radius);
	transition: border-color var(--id-dur) var(--id-ease),
	            box-shadow var(--id-dur) var(--id-ease);
	-webkit-appearance: none;
	appearance: none;
}

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

.wpcf7 select {
	/* Restore a chevron since appearance is reset. */
	background-image: linear-gradient(45deg, transparent 50%, var(--id-text-muted) 50%),
	                  linear-gradient(135deg, var(--id-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-inline-end: var(--id-s7);
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border-color: var(--id-gold);
	box-shadow: 0 0 0 3px rgba(176, 141, 63, 0.18);
	outline: none;
}

.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 2px solid var(--id-focus);
	outline-offset: 2px;
}

.wpcf7 ::placeholder { color: #8d8d95; opacity: 1; }

/* Radio / checkbox groups */
.wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0 0 var(--id-s2) 0;
}

.wpcf7 .wpcf7-list-item-label {
	font-weight: 400;
	font-size: var(--id-fs-sm);
	line-height: 1.55;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	width: 1.15rem;
	height: 1.15rem;
	min-height: 0;
	margin-inline-end: var(--id-s2);
	accent-color: var(--id-gold-deep);
	vertical-align: -0.18em;
}

/* The consent checkbox needs room to breathe and to wrap cleanly. */
.id-consent .wpcf7-list-item-label {
	display: inline;
}

.id-consent {
	background: var(--id-paper-alt);
	border: 1px solid var(--id-paper-line);
	border-radius: var(--id-radius);
	padding: var(--id-s4);
}

/* Required marker */
.id-req {
	color: var(--id-gold-deep);
	font-weight: 700;
}

/* Validation messages */
.wpcf7 .wpcf7-not-valid {
	border-color: #9b2c2c;
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: var(--id-fs-xs);
	color: #9b2c2c;
	margin-top: var(--id-s1);
}

.wpcf7 form .wpcf7-response-output {
	margin: var(--id-s5) 0 0;
	padding: var(--id-s4) var(--id-s5);
	border-width: 1px;
	border-style: solid;
	border-radius: var(--id-radius);
	font-size: var(--id-fs-sm);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--id-gold);
	background: var(--id-gold-wash);
	color: var(--id-text);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #9b2c2c;
	background: #fdf3f3;
	color: #7a2020;
}

.wpcf7 .wpcf7-spinner { margin-inline-start: var(--id-s3); }

.wpcf7 input[type="submit"] {
	width: auto;
	margin-top: var(--id-s5);
}

@media (max-width: 520px) {
	.wpcf7 input[type="submit"] { width: 100%; }
}