/**
 * PrettyCool contact form — the [prettycool_contact] shortcode.
 *
 * Fields and the button come from style.css §6–7; this only lays the form out
 * as a sticker and styles its notices and errors. Loaded on pages that use the
 * shortcode (see inc/contact-form.php).
 */

.pc-contact {
	display: grid;
	gap: var(--pc-space-sm);
	margin-block: var(--pc-space-lg);
	padding: clamp(1.25rem, 4vw, 2.25rem);
}

/* The sticker lifts on :focus-within everywhere else; a form the visitor is
 * typing into should hold still. */
.pc-contact.pc-sticker:focus-within {
	transform: none;
	box-shadow: var(--pc-shadow);
}

.pc-contact > *,
.pc-contact__field { margin: 0; }

.pc-contact__field--name,
.pc-contact__field--email { min-width: 0; }

@media (min-width: 40rem) {
	.pc-contact { grid-template-columns: 1fr 1fr; column-gap: var(--pc-space-md); }
	.pc-contact > * { grid-column: 1 / -1; }
	.pc-contact > .pc-contact__field--name { grid-column: 1; }
	.pc-contact > .pc-contact__field--email { grid-column: 2; }
}

/* Invalid fields keep the ink outline but take a pink shadow, so the error
 * reads at a glance without leaning on colour alone — each has a message. */
.pc-contact [aria-invalid="true"] { box-shadow: 4px 4px 0 var(--pc-pink); }
.pc-contact [aria-invalid="true"]:focus { box-shadow: var(--pc-shadow-pink); }

.pc-contact__error {
	display: block;
	margin-top: var(--pc-space-2xs);
	font-size: var(--pc-step--1);
	font-weight: 600;
	color: var(--pc-pink-darker);
}

.pc-contact__notice {
	margin: 0;
	padding: var(--pc-space-sm) var(--pc-space-md);
	border: var(--pc-line);
	border-left-width: 10px;
	border-radius: var(--pc-radius);
	font-weight: 600;
	color: var(--pc-ink);
}

.pc-contact__notice--error { background: var(--pc-white); border-left-color: var(--pc-pink-dark); }
.pc-contact__notice--success { background: var(--pc-sky-50); border-left-color: var(--pc-sky-darker); }

/* The success message replaces the form, so the sticker is all notice. */
div.pc-contact { display: block; }

/* Off-screen rather than display:none, which some bots check for. */
.pc-contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pc-contact__submit .pc-button { width: 100%; }

@media (min-width: 40rem) {
	.pc-contact__submit .pc-button { width: auto; }
}