/* Contact Form 7 styling for the IDM Tech theme.
 *
 * The forms used to carry their Tailwind utility classes in the markup. Contact
 * Form 7 builds its own inputs, and its `class:` option rejects any class
 * containing a colon or a bracket, so `focus:ring-2` and `border-[#D2D2D2]`
 * cannot travel through a form tag. These rules reproduce the same appearance
 * from the theme's own colour tokens instead, which means the form keeps
 * following the brand palette and the form-tag editor stays readable.
 *
 * Three variants, matching the three field styles the site already used:
 *   .idmtech-cf7              the contact page (crimson focus ring)
 *   .idmtech-cf7--compact     the sidebar card (smaller type and padding)
 *   .idmtech-cf7--careers     the job and application forms (brand focus ring)
 */

/* --- Layout ------------------------------------------------------------- */

.idmtech-cf7 .wpcf7-form {
	display: grid;
	gap: 1.25rem;
}

.idmtech-cf7--compact .wpcf7-form,
.idmtech-cf7--careers .wpcf7-form {
	gap: 1rem;
}

/* The two application forms and the sidebar card sit directly under a heading
   and stood clear of it, which the markup did with a top margin on the form
   itself. */
.idmtech-cf7--careers .wpcf7-form {
	margin-top: 1.5rem;
}

.idmtech-cf7--compact .wpcf7-form {
	margin-top: 1.25rem;
}

/* A field's wrapper must not introduce a box of its own: the label above it
   already provides the spacing, and the grid above provides the rhythm. */
.idmtech-cf7 .wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

.idmtech-cf7__row {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.idmtech-cf7__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.idmtech-cf7--careers .idmtech-cf7__row {
	gap: 1rem;
}

/* --- Labels ------------------------------------------------------------- */

.idmtech-cf7__label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: var(--text-sm, 0.875rem);
	font-weight: 600;
	color: var(--color-ink, #000);
}

.idmtech-cf7--compact .idmtech-cf7__label {
	font-size: var(--text-xs, 0.75rem);
}

.idmtech-cf7__hint {
	font-weight: 400;
	color: var(--color-muted, #3d3d3d);
}

/* --- Fields ------------------------------------------------------------- */

.idmtech-cf7 .wpcf7-form-control.wpcf7-text,
.idmtech-cf7 .wpcf7-form-control.wpcf7-email,
.idmtech-cf7 .wpcf7-form-control.wpcf7-tel,
.idmtech-cf7 .wpcf7-form-control.wpcf7-url,
.idmtech-cf7 .wpcf7-form-control.wpcf7-number,
.idmtech-cf7 .wpcf7-form-control.wpcf7-date,
.idmtech-cf7 .wpcf7-form-control.wpcf7-select,
.idmtech-cf7 .wpcf7-form-control.wpcf7-textarea,
.idmtech-cf7 .wpcf7-form-control.wpcf7-file {
	width: 100%;
	border-radius: var(--radius-xl, 0.75rem);
	border: 1px solid var(--color-graylight, #d2d2d2);
	background-color: var(--color-white, #fff);
	padding: 0.75rem 1rem;
	color: var(--color-ink, #000);
	font: inherit;
	line-height: 1.5;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.idmtech-cf7 .wpcf7-form-control::placeholder {
	color: #94a3b8;
}

.idmtech-cf7--compact .wpcf7-form-control.wpcf7-text,
.idmtech-cf7--compact .wpcf7-form-control.wpcf7-email,
.idmtech-cf7--compact .wpcf7-form-control.wpcf7-tel,
.idmtech-cf7--compact .wpcf7-form-control.wpcf7-select,
.idmtech-cf7--compact .wpcf7-form-control.wpcf7-textarea {
	padding: 0.625rem 1rem;
	font-size: var(--text-sm, 0.875rem);
}

.idmtech-cf7--careers .wpcf7-form-control::placeholder {
	color: var(--color-muted, #3d3d3d);
}

/* Focus: the contact form rings crimson, the careers forms ring brand, exactly
   as the two Tailwind variants did. */
.idmtech-cf7 .wpcf7-form-control:focus {
	border-color: var(--color-crimson-400, #e2453f);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-crimson-500, #b90000) 20%, transparent);
}

.idmtech-cf7--careers .wpcf7-form-control:focus {
	border-color: var(--color-brand-500, #b90000);
	box-shadow: 0 0 0 2px var(--color-brand-100, #fbd2d2);
}

/* Browsers without color-mix still get a ring, just a flat one. */
@supports not (color: color-mix(in oklab, red, red)) {
	.idmtech-cf7 .wpcf7-form-control:focus {
		box-shadow: 0 0 0 2px rgba(185, 0, 0, 0.2);
	}
}

.idmtech-cf7 .wpcf7-form-control.wpcf7-textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Selects reuse the theme's own chevron, so a Contact Form 7 select is
   indistinguishable from the ones the theme draws elsewhere. */
.idmtech-cf7 .wpcf7-form-control.wpcf7-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D3D3D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 16px 16px;
	padding-right: 44px;
}

.idmtech-cf7 .wpcf7-form-control.wpcf7-select::-ms-expand {
	display: none;
}

/* The file button matches the brand pill the markup used to set inline. */
.idmtech-cf7 .wpcf7-form-control.wpcf7-file::file-selector-button {
	margin-right: 0.75rem;
	border: 0;
	border-radius: 9999px;
	background-color: var(--color-brand-500, #b90000);
	padding: 0.375rem 0.75rem;
	font-size: var(--text-xs, 0.75rem);
	font-weight: 600;
	color: var(--color-white, #fff);
	cursor: pointer;
}

/* --- Phone group -------------------------------------------------------- */

/* Contact Form 7 wraps every control in a span, so the wrapper is the flex
   child here, not the input. Sizing the wrappers keeps the country code at a
   fixed width whichever country is selected, as it did before. */
.idmtech-cf7 .idmtech-phone-group {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

.idmtech-cf7 .idmtech-phone-group > .wpcf7-form-control-wrap[data-name="phone_code"] {
	flex: 0 0 auto;
	width: 7.5rem;
}

.idmtech-cf7 .idmtech-phone-group > .wpcf7-form-control-wrap[data-name="phone"] {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 400px) {
	.idmtech-cf7 .idmtech-phone-group > .wpcf7-form-control-wrap[data-name="phone_code"] {
		width: 6.25rem;
	}
}

/* --- Submit button ------------------------------------------------------ */

/* The same pill the rest of the site uses: label, then the round arrow badge.
   Contact Form 7 renders a bare <input type="submit">, which cannot hold the
   badge as a child element, so the badge is drawn as a background on the
   button's right-hand pill instead and the padding leaves room for it. */
.idmtech-cf7 .wpcf7-form-control.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	border-radius: 9999px;
	background-color: var(--color-brand-500, #b90000);
	padding: 0.75rem 3rem 0.75rem 1.5rem;
	font: inherit;
	font-weight: 600;
	color: var(--color-white, #fff);
	cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba(185, 0, 0, 0.2);
	transition: background-color 0.15s ease, background-position 0.15s ease;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23ffffff'/%3E%3Cpath d='M7 12h10m0 0-4-4m4 4-4 4' stroke='%238f0000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 1.75rem 1.75rem;
}

.idmtech-cf7 .wpcf7-form-control.wpcf7-submit:hover {
	background-color: var(--color-brand-600, #8f0000);
	background-position: right 0.625rem center;
}

.idmtech-cf7 .wpcf7-form-control.wpcf7-submit:disabled {
	opacity: 0.65;
	cursor: default;
}

/* --- Messages ----------------------------------------------------------- */

/* Per-field error. Contact Form 7 appends this inside the field wrapper. */
.idmtech-cf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-size: var(--text-sm, 0.875rem);
	font-weight: 500;
	color: var(--color-brand-500, #b90000);
}

.idmtech-cf7 .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--color-brand-500, #b90000);
}

/* Form-level response. Contact Form 7 reuses one element for every outcome and
   marks it with a status class, so each state is coloured from that class. */
.idmtech-cf7 .wpcf7-response-output {
	margin: 0;
	border-radius: var(--radius-xl, 0.75rem);
	border: 1px solid var(--color-graylight, #d2d2d2);
	padding: 0.875rem 1.25rem;
	font-size: var(--text-sm, 0.875rem);
	font-weight: 500;
}

.idmtech-cf7 .wpcf7 form.sent .wpcf7-response-output,
.idmtech-cf7 form.sent .wpcf7-response-output {
	border-color: #a7f3d0;
	background-color: #ecfdf5;
	color: #047857;
}

.idmtech-cf7 form.invalid .wpcf7-response-output,
.idmtech-cf7 form.unaccepted .wpcf7-response-output,
.idmtech-cf7 form.payment-required .wpcf7-response-output {
	border-color: var(--color-brand-300, #f08a86);
	background-color: var(--color-brand-50, #fdecec);
	color: var(--color-brand-600, #8f0000);
}

.idmtech-cf7 form.failed .wpcf7-response-output,
.idmtech-cf7 form.aborted .wpcf7-response-output {
	border-color: var(--color-brand-300, #f08a86);
	background-color: var(--color-brand-50, #fdecec);
	color: var(--color-brand-600, #8f0000);
}

/* The spinner sits beside the button rather than pushing the layout. */
.idmtech-cf7 .wpcf7-spinner {
	margin: 0 0 0 0.75rem;
	vertical-align: middle;
}

/* The honeypot must never be visible or reachable by keyboard. */
.idmtech-cf7__trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Inline success panel ----------------------------------------------- */

/* Shown in place of the form once a submission is accepted, matching the panel
   the custom forms used to reveal. */
.idmtech-cf7__sent {
	border-radius: 1rem;
	border: 1px solid #a7f3d0;
	background-color: #ecfdf5;
	padding: 2rem 1.5rem;
	text-align: center;
}

.idmtech-cf7__sent-icon {
	margin: 0 auto 1rem;
	display: flex;
	height: 3.5rem;
	width: 3.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: #d1fae5;
	color: #059669;
}

.idmtech-cf7__sent-icon svg {
	height: 1.75rem;
	width: 1.75rem;
}

.idmtech-cf7__sent-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-ink, #000);
}

.idmtech-cf7__sent-text {
	margin-top: 0.5rem;
	color: var(--color-muted, #3d3d3d);
}

/* --- Consent checkbox --------------------------------------------------- */

/* The general-application form asks for consent before it will accept a
   resume. Contact Form 7 wraps a checkbox and its label in one <span>, so the
   row is laid out from that wrapper. */
.idmtech-cf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item {
	margin: 0;
	display: block;
}

.idmtech-cf7 .wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item-label {
	display: block;
}

.idmtech-cf7 .wpcf7-form-control.wpcf7-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: var(--text-sm, 0.875rem);
	color: var(--color-muted, #3d3d3d);
	cursor: pointer;
}

.idmtech-cf7 .wpcf7-form-control.wpcf7-checkbox input[type="checkbox"] {
	margin-top: 0.25rem;
	height: 1rem;
	width: 1rem;
	flex-shrink: 0;
	accent-color: var(--color-brand-500, #b90000);
}

/* --- Careers variant ---------------------------------------------------- */

/* Both application forms sit in a narrow column, where the button has always
   run the full width of the card. */
.idmtech-cf7--careers .wpcf7-form-control.wpcf7-submit {
	width: 100%;
	font-size: var(--text-sm, 0.875rem);
	background-image: none;
	padding: 0.75rem 1.5rem;
}

.idmtech-cf7--careers .wpcf7-form-control.wpcf7-submit:hover {
	background-position: center;
}