/**
 * CD Contact - front-end form styles.
 *
 * Everything is driven by CSS custom properties set per form instance on the
 * wrapper, so one cached stylesheet serves every form on the site regardless of
 * how differently each one is themed.
 *
 * @package CD_Contact
 */

.cd-contact-wrap {
	--cdc-primary: #2563eb;
	--cdc-text: #0f172a;
	--cdc-label: #0f172a;
	--cdc-border: #cbd5e1;
	--cdc-bg: #ffffff;
	--cdc-error: #dc2626;
	--cdc-success: #059669;
	--cdc-btn-text: #ffffff;
	--cdc-radius: 8px;
	--cdc-gap: 18px;
	--cdc-font-size: 15px;
	--cdc-input-height: 46px;
	--cdc-max-width: none;

	max-width: var( --cdc-max-width );
	font-size: var( --cdc-font-size );
	color: var( --cdc-text );
	/* Contain layout so a wide field can never push the page sideways. */
	box-sizing: border-box;
	width: 100%;
}

.cd-contact-wrap *,
.cd-contact-wrap *::before,
.cd-contact-wrap *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ layout */

.cd-contact-fields {
	display: flex;
	flex-wrap: wrap;
	/* The gutter is half the configured spacing on each side of a field. */
	margin: 0 calc( var( --cdc-gap ) / -2 );
}

.cd-contact-field {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0 calc( var( --cdc-gap ) / 2 );
	margin-bottom: var( --cdc-gap );
	min-width: 0; /* Allows flex children to shrink instead of overflowing. */
}

.cd-contact-field--w-half { flex-basis: 50%; max-width: 50%; }
.cd-contact-field--w-third { flex-basis: 33.3333%; max-width: 33.3333%; }
.cd-contact-field--w-two-thirds { flex-basis: 66.6666%; max-width: 66.6666%; }
.cd-contact-field--w-quarter { flex-basis: 25%; max-width: 25%; }

/* Single column below the tablet breakpoint: multi-column form fields are
   unusable on a phone, and this is what stops horizontal scrolling. */
@media ( max-width: 782px ) {
	.cd-contact-field[class*="cd-contact-field--w-"] {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------ labels */

.cd-contact-field__label,
.cd-contact-legend {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --cdc-label );
	padding: 0;
}

.cd-contact-required {
	color: var( --cdc-error );
	margin-left: 2px;
}

.cd-contact-field__description {
	margin: 0 0 6px;
	font-size: 0.9em;
	opacity: 0.75;
	line-height: 1.5;
}

.cd-contact-field__help,
.cd-contact-field__hint {
	display: block;
	margin: 6px 0 0;
	font-size: 0.85em;
	opacity: 0.7;
	line-height: 1.5;
}

.cd-contact-field__sublabel {
	display: block;
	margin: 0 0 4px;
	font-size: 0.85em;
	opacity: 0.8;
}

/* Beside-the-field labels, wide screens only. */
@media ( min-width: 783px ) {
	.cd-contact-form--labels-left .cd-contact-field {
		display: grid;
		grid-template-columns: minmax( 120px, 28% ) 1fr;
		gap: 4px 16px;
		align-items: start;
	}

	.cd-contact-form--labels-left .cd-contact-field__label {
		grid-column: 1;
		padding-top: 12px;
		margin: 0;
	}

	.cd-contact-form--labels-left .cd-contact-field__control,
	.cd-contact-form--labels-left .cd-contact-field__description,
	.cd-contact-form--labels-left .cd-contact-field__help,
	.cd-contact-form--labels-left .cd-contact-field__error {
		grid-column: 2;
	}
}

/* ------------------------------------------------------------------ inputs */

.cd-contact-input {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: var( --cdc-input-height );
	padding: 10px 14px;
	font-size: inherit;
	font-family: inherit;
	line-height: 1.5;
	color: var( --cdc-text );
	background-color: var( --cdc-bg );
	border: 1px solid var( --cdc-border );
	border-radius: var( --cdc-radius );
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cd-contact-textarea {
	min-height: calc( var( --cdc-input-height ) * 2.4 );
	resize: vertical;
}

.cd-contact-select {
	/* Room for the native arrow, plus a drawn one for consistency. */
	padding-right: 38px;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 11px;
}

.cd-contact-select--multiple {
	min-height: calc( var( --cdc-input-height ) * 2.4 );
	background-image: none;
	padding-right: 14px;
}

.cd-contact-input:focus,
.cd-contact-checkbox:focus,
.cd-contact-radio:focus,
.cd-contact-submit:focus {
	outline: none;
	border-color: var( --cdc-primary );
	/* A visible ring, not just a colour change, so focus is obvious. */
	box-shadow: 0 0 0 3px rgba( 37, 99, 235, 0.28 );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --cdc-primary ) 28%, transparent );
}

/* Keyboard users always get a ring even where the design suppresses it. */
.cd-contact-wrap :focus-visible {
	outline: 2px solid var( --cdc-primary );
	outline-offset: 2px;
}

.cd-contact-input::placeholder {
	color: #94a3b8;
	color: color-mix( in srgb, var( --cdc-text ) 45%, transparent );
	opacity: 1;
}

.cd-contact-input[aria-invalid="true"] {
	border-color: var( --cdc-error );
}

.cd-contact-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ------------------------------------------------------------- choices */

.cd-contact-fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.cd-contact-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cd-contact-choices--inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.cd-contact-choice {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	line-height: 1.5;
}

.cd-contact-choice label,
.cd-contact-consent__label {
	cursor: pointer;
	/* A comfortable tap target without making the row look oversized. */
	padding: 2px 0;
}

.cd-contact-checkbox,
.cd-contact-radio {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	flex: 0 0 auto;
	accent-color: var( --cdc-primary );
	cursor: pointer;
}

.cd-contact-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.55;
}

.cd-contact-consent__label a {
	color: var( --cdc-primary );
}

.cd-contact-composite {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cd-contact-composite__part {
	flex: 1 1 180px;
	min-width: 0;
}

.cd-contact-composite__part--line1,
.cd-contact-composite__part--line2 {
	flex-basis: 100%;
}

.cd-contact-file {
	padding: 10px 14px;
	line-height: 1.4;
}

.cd-contact-heading {
	margin: 8px 0 4px;
	line-height: 1.3;
}

/* -------------------------------------------------------------- messages */

.cd-contact-field__error {
	display: block;
	margin: 6px 0 0;
	color: var( --cdc-error );
	font-size: 0.9em;
	line-height: 1.45;
	font-weight: 500;
}

.cd-contact-field__error[hidden] {
	display: none;
}

.cd-contact-messages:empty {
	display: none;
}

.cd-contact-message {
	padding: 14px 16px;
	margin: 0 0 var( --cdc-gap );
	border-radius: var( --cdc-radius );
	line-height: 1.55;
	border: 1px solid transparent;
}

.cd-contact-message--success {
	color: var( --cdc-success );
	/* Plain fallbacks first: older browsers ignore the color-mix() lines and
	   still get a readable panel rather than a transparent one. */
	background: #ecfdf5;
	border-color: #a7f3d0;
	background: color-mix( in srgb, var( --cdc-success ) 10%, #fff );
	border-color: color-mix( in srgb, var( --cdc-success ) 30%, transparent );
}

.cd-contact-message--error {
	color: var( --cdc-error );
	background: #fef2f2;
	border-color: #fecaca;
	background: color-mix( in srgb, var( --cdc-error ) 8%, #fff );
	border-color: color-mix( in srgb, var( --cdc-error ) 30%, transparent );
}

.cd-contact-message__list {
	margin: 8px 0 0 18px;
	padding: 0;
}

.cd-contact-notice {
	padding: 10px 14px;
	border-radius: var( --cdc-radius );
	background: #fef9c3;
	color: #713f12;
	margin: 0 0 12px;
	font-size: 0.92em;
}

.cd-contact-notice--error {
	background: #fee2e2;
	color: #991b1b;
}

/* --------------------------------------------------------------- actions */

.cd-contact-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.cd-contact-actions--center { justify-content: center; }
.cd-contact-actions--right { justify-content: flex-end; }

.cd-contact-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: var( --cdc-input-height );
	padding: 12px 26px;
	font-size: inherit;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: var( --cdc-btn-text );
	background: var( --cdc-primary );
	border: 2px solid var( --cdc-primary );
	border-radius: var( --cdc-radius );
	cursor: pointer;
	transition: filter 0.15s ease, opacity 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cd-contact-submit:hover { filter: brightness( 0.93 ); }

.cd-contact-submit--outline {
	background: transparent;
	color: var( --cdc-primary );
}

.cd-contact-submit--soft {
	background: #eef2ff;
	background: color-mix( in srgb, var( --cdc-primary ) 14%, #fff );
	border-color: transparent;
	color: var( --cdc-primary );
}

.cd-contact-submit--block {
	width: 100%;
}

.cd-contact-submit[disabled] {
	opacity: 0.72;
	cursor: progress;
}

.cd-contact-spinner {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: cd-contact-spin 0.7s linear infinite;
}

.cd-contact-form.is-submitting .cd-contact-spinner {
	display: inline-block;
}

@keyframes cd-contact-spin {
	to { transform: rotate( 360deg ); }
}

/* Respect a reduced-motion preference: the button still shows a busy state
   through its text and disabled attribute. */
@media ( prefers-reduced-motion: reduce ) {
	.cd-contact-spinner { animation: none; }
	.cd-contact-wrap * { transition: none !important; }
}

.cd-contact-branding {
	font-size: 0.8em;
	opacity: 0.6;
}

.cd-contact-branding a {
	color: inherit;
	text-decoration: underline;
}

.cd-contact-form-title {
	margin: 0 0 16px;
}

/* Screen-reader-only text, in case the theme does not define .screen-reader-text. */
.cd-contact-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Conditionally hidden fields. `hidden` alone loses to a theme's display rule,
   so the state is enforced. */
.cd-contact-field[hidden] {
	display: none !important;
}

.cd-contact-form.is-complete .cd-contact-fields,
.cd-contact-form.is-complete .cd-contact-actions {
	display: none;
}

@media ( max-width: 480px ) {
	.cd-contact-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cd-contact-submit {
		width: 100%;
	}
}