/**
 * PrettyCoolApp — contact form, the [prettycool_contact] shortcode.
 *
 * Ported from PrettyCool's contact.css. The app has no sticker class and no
 * global field styles (WooCommerce's forms get theirs from woocommerce.css,
 * scoped to .woocommerce), so the card, labels and fields are drawn here in
 * the same language. The button is .app-button (style.css §6). Loaded on
 * pages that use the shortcode (see inc/contact-form.php).
 */

.pc-contact {
	display: grid;
	gap: var(--pc-space-sm);
	margin-block: 2rem;
	padding: clamp(1.25rem, 4vw, 2rem);
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-lg);
	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; }
}

.pc-contact label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

.pc-contact input[type="text"],
.pc-contact input[type="email"],
.pc-contact textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0.65rem 0.85rem;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-sm);
	box-shadow: none;
	color: var(--pc-ink);
	/* 16px or more stops iOS zooming into the field. */
	font-size: 1rem;
	line-height: 1.4;
	transition: box-shadow 0.15s var(--pc-ease);
	-webkit-appearance: none;
	appearance: none;
}

.pc-contact textarea {
	min-height: 9rem;
	resize: vertical;
}

.pc-contact input:focus,
.pc-contact textarea:focus {
	outline: 2px solid transparent;
	box-shadow: var(--pc-shadow-sky);
}

/* 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: var(--pc-shadow-pink); }

.pc-contact__error {
	display: block;
	margin-top: 0.25rem;
	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 card 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 .app-button { width: 100%; }

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