/*
 * Contact Form 7 — drawing-sheet treatment (Carta Tecnica §3 / §4.8).
 * Owner: pages. Restyles the EXISTING CF7 markup (04-contact-form.php) to the
 * "Scrivici / Modulo di contatto" board: IBM Plex Mono field labels with an
 * F-NN plate code, hairline-underline inputs (no boxes), a square ink submit
 * with a trailing arrow, and a mono privacy row. The CF7 shortcode + field set
 * are untouched (no reseed); everything here is CSS over the seeded structure.
 *
 * Tokens come from theme.json presets and the base.css :root ramp (--pc-*).
 * Brand hex appears only inside the enumerated focus-ring rgba() string. Tabs.
 */

/* ---- Form shell ------------------------------------------------------------
   The form sits inside the seeded .pc-form drawing-sheet column; strip CF7's
   default card framing so the fields read directly on paper as a drawing sheet.
   A counter drives the F-01.. plate codes prepended to each label. */
.pc-form .wpcf7 form,
.pc-form-slot .wpcf7 form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	counter-reset: pc-f;
}

/* Standalone CF7 (outside the slot) keeps a quiet hairline card so it never
   reads as unstyled, but in the warm drawing-sheet register (square, hairline). */
.wpcf7 form {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--pc-hairline);
	border-radius: 0;
	box-shadow: none;
	counter-reset: pc-f;
}

/* ---- Fields ----------------------------------------------------------------
   Each control is a .pc-field wrapper. The label (.pc-field__label) becomes a
   mono caps plate label sitting ABOVE the underline input (the board shows a
   resting label, not a floating one). The input is a hairline-underline only. */
.pc-field {
	position: relative;
	display: grid;
	gap: 0.45rem;
	counter-increment: pc-f;
}

.pc-field .wpcf7-form-control-wrap {
	display: block;
	order: 2;
}

/* The label: F-NN plate code (orange) + mono caps name. The plate code is the
   counter rendered as F-01, F-02… The required * stays orange. */
.pc-field__label {
	order: 1;
	position: static;
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	transform: none;
	pointer-events: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wp--preset--color--ink);
}

.pc-field__label::before {
	content: "F-0" counter(pc-f);
	font-weight: 600;
	letter-spacing: var(--pc-ls-mono);
	color: var(--wp--preset--color--primary-strong);
}

/* The label is a fixed mono plate; it never floats. (The board shows a resting
   caps label above the underline with the field's hint placeholder shown inside
   the input — §4.8.) Pin it static across focus/filled so no v1 lift survives. */
.pc-field:focus-within .pc-field__label,
.pc-field:has(input:not(:placeholder-shown)) .pc-field__label,
.pc-field:has(textarea:not(:placeholder-shown)) .pc-field__label {
	transform: none;
	color: var(--wp--preset--color--ink);
}

.pc-field__req {
	color: var(--wp--preset--color--primary-strong);
}

/* Underline inputs: no box, hairline bottom rule, mono-mute placeholder. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: 0.4rem 0 0.55rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--pc-hairline);
	border-radius: 0;
	transition: border-color var(--pc-dur-fast) var(--pc-ease);
}

.wpcf7 textarea {
	min-height: 6rem;
	resize: vertical;
	line-height: 1.55;
}

.wpcf7 ::placeholder {
	color: var(--pc-mute);
	opacity: 1;
}

/* Focus: the underline thickens to the text-bearing accent + a soft glow.
   No box outline (the field has no box); keep a visible non-colour cue too. */
.wpcf7 input[type="text"]:focus-visible,
.wpcf7 input[type="email"]:focus-visible,
.wpcf7 input[type="tel"]:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: none;
	border-bottom-color: var(--wp--preset--color--primary-strong);
	box-shadow: 0 1px 0 0 var(--wp--preset--color--primary-strong);
}

/* ---- Two-up row (email F-02 + telefono F-03, the board's paired line) ------
   CF7 wraps the pair in .pc-form-row; flatten its auto-<p> so the two fields
   become grid items. The seeded markup keeps this structure intact. */
.pc-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.pc-form-row > p {
	display: contents;
}

.pc-form-row > p > br {
	display: none;
}

@media (max-width: 600px) {
	.pc-form-row {
		grid-template-columns: 1fr;
	}
}

/* ---- Privacy + submit row --------------------------------------------------
   The acceptance line reads as a mono privacy plate; the submit is the square
   ink button with a trailing arrow. They share the final row, justified apart. */
.wpcf7-acceptance .wpcf7-list-item {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.5;
}

.wpcf7-acceptance .wpcf7-list-item-label {
	max-width: 24rem;
}

.wpcf7-acceptance input[type="checkbox"] {
	margin-top: 0.15em;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--wp--preset--color--ink);
	border-radius: 0;
}

/* Submit: square ink fill, white mono caps label, primary arrow. */
.wpcf7 input[type="submit"] {
	justify-self: start;
	padding: 0.875rem 1.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: var(--pc-fs-mono-md);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color var(--pc-dur-fast) var(--pc-ease);
}

.wpcf7 input[type="submit"]:hover {
	background: #2a2622;
}

.wpcf7 input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 2px;
}

/* Pair the acceptance + submit on one baseline row when there is room. The
   seeded CF7 output puts the acceptance line then the submit; this lays the two
   final blocks side by side via a grid on the form, falling back to stacked. */
.pc-form .wpcf7 form,
.pc-form-slot .wpcf7 form {
	align-items: start;
}

/* ---- Validation + response feedback ---------------------------------------- */
.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	letter-spacing: var(--pc-ls-mono);
	color: #b3261e;
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 0.875rem 1.25rem;
	border: 1px solid var(--pc-hairline);
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--primary-strong);
	color: var(--wp--preset--color--primary-strong);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #b3261e;
	color: #b3261e;
}

/* ---- Drawing-sheet form chrome (Scrivici header + top rule) ----------------
   The seeded .pc-form column carries a serif title + a mono "§ A — DATI
   RICHIEDENTE" meta on one row, then a top hairline before the fields. */
.pc-form__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--ink);
	margin-bottom: var(--wp--preset--spacing--40);
}

.pc-form__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.625rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.pc-form__meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	color: var(--pc-mute);
}

/* ---- Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wpcf7 input,
	.wpcf7 textarea,
	.wpcf7 input[type="submit"] {
		transition: none;
	}
}