/**
 * iBreathe — Contact Form
 * Section: ibr-contact-form
 *
 * Structural rules only. Per-site values come from WP Admin → Contact Form
 * as CSS custom properties on .ibr-contact-form-wrapper; each has a fallback
 * so anything left blank uses the default look.
 */

/* Wrapper and panel
 * ----------------------------------------------------------------------
 * Two layers:
 * - .ibr-contact-form-wrapper is a plain block. It has no width or side
 *   margins of its own, so Blocksy's constrained layout keeps it inside the
 *   page container exactly like a paragraph.
 * - .ibr-cf-panel does the max width, look and alignment INSIDE that container.
 *
 * Only the top/bottom margins are reset on the wrapper (logical properties,
 * higher specificity) to avoid the known .is-layout-constrained phantom gaps.
 */

.ibr-contact-form-wrapper,
.is-layout-constrained > .ibr-contact-form-wrapper {
	margin-block-start: 0;
	margin-block-end: 0;
	scroll-margin-top: 120px; /* keeps the form clear of a sticky header after redirect */
}

.ibr-contact-form-wrapper *,
.ibr-contact-form-wrapper *::before,
.ibr-contact-form-wrapper *::after {
	box-sizing: border-box;
}

.ibr-contact-form-wrapper .ibr-cf-panel {
	width: 100%;
	max-width: var(--ibr-cf-width, 640px);
	margin-block: 0;
	padding: var(--ibr-cf-panel-padding, 0);
	background: var(--ibr-cf-panel-bg, transparent);
	border-radius: var(--ibr-cf-panel-radius, 0);
	font-size: var(--ibr-cf-font-size, inherit);
}

.ibr-contact-form-wrapper .ibr-cf-panel.ibr-cf-align-left {
	margin-inline: 0 auto;
}

.ibr-contact-form-wrapper .ibr-cf-panel.ibr-cf-align-centre {
	margin-inline: auto;
}

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

.ibr-contact-form-wrapper .ibr-cf-field {
	margin: 0 0 1.1em;
}

.ibr-contact-form-wrapper .ibr-cf-field label {
	display: block;
	margin: 0 0 0.35em;
	font-weight: 600;
	color: var(--ibr-cf-label, inherit);
}

.ibr-contact-form-wrapper .ibr-cf-req {
	color: var(--ibr-cf-error, #b3261e);
}

.ibr-contact-form-wrapper .ibr-cf-field input,
.ibr-contact-form-wrapper .ibr-cf-field select,
.ibr-contact-form-wrapper .ibr-cf-field textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0.65em 0.75em;
	font: inherit;
	font-size: 1em;
	line-height: 1.4;
	color: inherit;
	background: var(--ibr-cf-field-bg, #ffffff);
	border: 1px solid var(--ibr-cf-field-border, #c4c4c4);
	border-radius: var(--ibr-cf-field-radius, 4px);
	box-shadow: none;
}

.ibr-contact-form-wrapper .ibr-cf-field textarea {
	min-height: 9em;
	resize: vertical;
}

.ibr-contact-form-wrapper .ibr-cf-field input:focus,
.ibr-contact-form-wrapper .ibr-cf-field select:focus,
.ibr-contact-form-wrapper .ibr-cf-field textarea:focus {
	outline: none;
	border-color: var(--ibr-cf-field-focus, #222222);
	box-shadow: 0 0 0 1px var(--ibr-cf-field-focus, #222222);
}

/* Privacy line and button
 * ---------------------------------------------------------------------- */

.ibr-contact-form-wrapper .ibr-cf-privacy {
	margin: 0 0 1.2em;
	font-size: 0.875em;
	opacity: 0.8;
}

.ibr-contact-form-wrapper .ibr-cf-button {
	display: inline-block;
	margin: 0;
	padding: 0.75em 1.6em;
	font: inherit;
	font-size: 1em;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	color: var(--ibr-cf-button-text, #ffffff);
	background: var(--ibr-cf-button-bg, #222222);
	border: 0;
	border-radius: var(--ibr-cf-field-radius, 4px);
}

.ibr-contact-form-wrapper .ibr-cf-button:hover {
	background: var(--ibr-cf-button-hover, var(--ibr-cf-button-bg, #000000));
}

.ibr-contact-form-wrapper .ibr-cf-button:focus-visible {
	outline: 2px solid var(--ibr-cf-field-focus, #222222);
	outline-offset: 2px;
}

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

.ibr-contact-form-wrapper .ibr-cf-notice {
	margin: 0 0 1.2em;
	padding: 0.9em 1em;
	border-inline-start: 4px solid currentColor;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.03);
}

.ibr-contact-form-wrapper .ibr-cf-notice p,
.ibr-contact-form-wrapper .ibr-cf-notice ul {
	margin: 0;
}

.ibr-contact-form-wrapper .ibr-cf-notice ul {
	padding-inline-start: 1.2em;
}

.ibr-contact-form-wrapper .ibr-cf-notice li + li {
	margin-top: 0.3em;
}

.ibr-contact-form-wrapper .ibr-cf-success {
	color: var(--ibr-cf-success, #1e6b34);
}

.ibr-contact-form-wrapper .ibr-cf-error {
	color: var(--ibr-cf-error, #b3261e);
}

/* Honeypot — hidden from people, visible to bots.
 * ---------------------------------------------------------------------- */

.ibr-contact-form-wrapper .ibr-cf-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Mobile
 * ---------------------------------------------------------------------- */

@media (max-width: 767px) {
	.ibr-contact-form-wrapper,
	.is-layout-constrained > .ibr-contact-form-wrapper {
		margin-block-start: 0;
		margin-block-end: 0;
	}

	/* 16px minimum stops iPhones zooming in when a field is tapped. */
	.ibr-contact-form-wrapper .ibr-cf-field input,
	.ibr-contact-form-wrapper .ibr-cf-field select,
	.ibr-contact-form-wrapper .ibr-cf-field textarea {
		font-size: max(1em, 16px);
	}

	.ibr-contact-form-wrapper .ibr-cf-button {
		width: 100%;
	}
}