/*
 * Così Contact — form styling per the Così Digital styleguide, §23 Forms
 * and §13 Alert: https://cosidigital.com/styleguide/v0.2/index.html#s-23
 *
 * Colors and fonts reference the theme's own presets (theme.json), which
 * already define the exact tokens the styleguide specifies (ink, paper,
 * cyan, deep-cyan, vermillion, muted, field-border, error).
 */

.cosi-contact__field {
	display: grid;
	gap: 8px;
	margin: 0 0 28px;
}

.cosi-contact__label {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/* Most of this form is required, so only the exception (an optional field)
   gets a tag — per the styleguide: "Required is written in the label. No
   asterisks." */
.cosi-contact__field-tag {
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--muted);
}

.cosi-contact__control {
	width: 100%;
	max-width: 32em;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: 0; /* fields are square; only the submit button is round */
	padding: 14px 16px;
}

textarea.cosi-contact__control {
	resize: vertical;
}

/*
 * The theme's own global CSS includes a generic reset for any <form>'s
 * submit control (`form [type="submit"]`), which has slightly higher
 * specificity than the theme's global button style
 * (`:root :where(.wp-element-button, .wp-block-button__link)`) because it
 * adds the `form` element to the selector. Our submit button is a real
 * <button type="submit"> inside a real <form> — unlike the Button block,
 * which renders a plain <a> and is never inside a form — so it gets caught
 * by that reset and shrinks (0.5rem/1.5rem padding instead of 16px/34px).
 * Restore the theme's intended button values here, scoped to just this
 * button, at higher specificity than both of those rules.
 */
.cosi-contact__submit .wp-block-button__link {
	appearance: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--size-16);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 16px 34px;
	border-radius: 999px;
}

.cosi-contact__control:focus {
	outline: 2px solid var(--wp--preset--color--cyan);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--ink);
	box-shadow:
		0 0 0 4px var(--wp--preset--color--paper),
		0 0 0 5px var(--wp--preset--color--ink);
}

.cosi-contact__control:disabled {
	color: #8b8b86;
	background: #f2f2ef;
	border-color: var(--wp--preset--color--border);
}

/* Alert component (§13): full-bleed tone block, square corners, an
   uppercase eyebrow label over the message. */
.cosi-contact__notice {
	padding: 24px 28px;
	margin-bottom: 28px;
	color: var(--wp--preset--color--ink);
	border-radius: 0;
}

.cosi-contact__notice-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.cosi-contact__notice-message {
	font-size: 17px;
	line-height: 1.7;
	max-width: 62ch;
}

.cosi-contact__notice--success {
	background: var(--wp--preset--color--cyan);
}

.cosi-contact__notice--error {
	background: var(--wp--preset--color--vermillion);
}

/* Honeypot: hidden off-screen rather than display:none/visibility:hidden,
   since some spam bots specifically skip fields hidden that way. */
.cosi-contact__field--honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}