/* ==========================================================================
   FORMS — fields, selects, checkboxes, chips-as-radios, status messages, search form.
   Fields adapt to the surrounding tone (dark glass on dark, white on ivory).
   ========================================================================== */

.form {
	display: grid;
	gap: 1.25rem;
}

.form__row {
	display: grid;
	gap: 1.25rem;
}

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

.field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.field__label,
.form label.field__label {
	margin: 0;
	color: var(--fg);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.field__label .req {
	color: var(--accent);
}

.field__hint {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.82rem;
}

.field__error {
	display: none;
	margin: 0;
	color: #ff9d8c;
	font-size: 0.82rem;
	font-weight: 600;
}

.tone-ivory .field__error {
	color: var(--sindoor-red);
}

.field.is-invalid .field__error {
	display: block;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='date'],
input[type='datetime-local'],
select,
textarea,
.field__input {
	width: 100%;
	min-height: 52px;
	padding: 0.85rem 1rem;
	border: 1px solid var(--line-strong);
	border-radius: 14px;
	background: rgba(246, 235, 221, 0.05);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
	-webkit-appearance: none;
	appearance: none;
}

.tone-ivory input[type='text'],
.tone-ivory input[type='email'],
.tone-ivory input[type='tel'],
.tone-ivory input[type='url'],
.tone-ivory input[type='number'],
.tone-ivory input[type='search'],
.tone-ivory select,
.tone-ivory textarea,
.tone-ivory .field__input {
	background: var(--white);
}

textarea,
textarea.field__input {
	min-height: 150px;
	resize: vertical;
}

select {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F47A1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.9rem center;
	background-repeat: no-repeat;
	background-size: 1.2rem;
}

select option {
	background: var(--charcoal-2);
	color: var(--warm-ivory);
}

.tone-ivory select option {
	background: var(--white);
	color: var(--sanctum-black);
}

::placeholder {
	color: var(--fg-muted);
	opacity: 0.8;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--saffron);
	background-color: rgba(244, 122, 31, 0.06);
	box-shadow: 0 0 0 3px rgba(244, 122, 31, 0.22);
}

.tone-ivory input:focus,
.tone-ivory select:focus,
.tone-ivory textarea:focus {
	background-color: var(--white);
}

.is-invalid input,
.is-invalid select,
.is-invalid textarea,
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
	border-color: var(--sindoor-red);
	box-shadow: 0 0 0 3px rgba(183, 52, 32, 0.2);
}

/* Checkbox / radio */
.check {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	color: var(--fg-soft);
	font-size: 0.92rem;
	line-height: 1.5;
	cursor: pointer;
}

.check input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.check__box {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 1px;
	border: 1.5px solid var(--line-strong);
	border-radius: 7px;
	background: transparent;
	transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.check__box::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 8px;
	width: 6px;
	height: 11px;
	border: solid var(--sanctum-black);
	border-width: 0 2.5px 2.5px 0;
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
	transition: opacity var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}

.check input:checked + .check__box {
	border-color: var(--saffron);
	background: var(--saffron);
}

.check input:checked + .check__box::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.check input:focus-visible + .check__box {
	outline: 2px solid var(--accent-2);
	outline-offset: 3px;
}

.check--radio .check__box {
	border-radius: 50%;
}

.check--radio .check__box::after {
	top: 5px;
	left: 5px;
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background: var(--sanctum-black);
	transform: scale(0.4);
}

.check--radio input:checked + .check__box::after {
	transform: scale(1);
}

/* Honeypot: invisible to humans */
.hp-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Status region */
.form-status {
	display: none;
	padding: 1rem 1.25rem;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	font-weight: 600;
}

.form-status:not(:empty) {
	display: block;
}

.form-status.is-success {
	border-color: rgba(94, 158, 107, 0.6);
	background: rgba(94, 158, 107, 0.14);
}

.form-status.is-error {
	border-color: rgba(183, 52, 32, 0.7);
	background: rgba(183, 52, 32, 0.14);
}

.form.is-loading {
	opacity: 0.75;
	pointer-events: none;
}

/* Search form (searchform.php) */
.search-form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.search-form input[type='search'] {
	padding-right: 3.5rem;
	border-radius: var(--r-pill);
}

.search-form__submit {
	position: absolute;
	top: 50%;
	right: 6px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--saffron);
	color: var(--sanctum-black);
	transform: translateY(-50%);
	transition: background-color var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}

.search-form__submit:hover {
	background: var(--saffron-bright);
	transform: translateY(-50%) scale(1.06);
}

/* Newsletter / compact inline form */
.newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.newsletter-form input[type='email'] {
	flex: 1 1 200px;
	min-height: 48px;
	border-radius: var(--r-pill);
}

/* Donation amount chips / radios share .chip */
.amount-input {
	position: relative;
}

.amount-input__prefix {
	position: absolute;
	top: 50%;
	left: 1rem;
	color: var(--fg-muted);
	font-weight: 700;
	transform: translateY(-50%);
}

.amount-input input {
	padding-left: 2.25rem;
}