/*
 * Contact form — REBUILD-MASTER §1 "Form fields", §4.5, §11.8.
 * Field border #748199 (WCAG 1.4.11, not the mockup's #E2E8F0 = 1.23:1).
 * 10px radius, full-width submit, visible required indicators.
 */

.jjd-contact-layout {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 56px;
	align-items: start;
}

.jjd-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: clamp(24px, 4vw, 40px);
	box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jjd-form:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.14);
}

/* The email card gets the same lift so the two columns read as a matched
   pair, even though it's a flat tint card rather than a bordered one. */
.jjd-card--subtle {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jjd-card--subtle:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	.jjd-form,
	.jjd-card--subtle {
		transition: none;
	}
}
/* Keep width:100% fields (and the submit) inside the card — their padding and
   border must count toward the declared width, not add to it. */
.jjd-form input,
.jjd-form select,
.jjd-form textarea,
.jjd-form button {
	box-sizing: border-box;
}

.jjd-form__legend {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--body-text);
}
.jjd-form__legend span,
.jjd-req { color: var(--wp--preset--color--accent-blue); }

.jjd-field { display: flex; flex-direction: column; gap: 8px; }
.jjd-field label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--heading);
}

.jjd-field input,
.jjd-field select,
.jjd-field textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: 10px;
	font-family: inherit;
	font-size: 0.875rem;
	color: var(--wp--preset--color--heading);
	background: #ffffff;
}
.jjd-field textarea { resize: vertical; min-height: 120px; }

.jjd-field input:focus,
.jjd-field select:focus,
.jjd-field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-blue);
	box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.15);
}
/* Keyboard users still get the ring from style.css :focus-visible. */

/* Invalid field + its inline message (REBUILD-MASTER §11.8) */
.jjd-field input[aria-invalid="true"],
.jjd-field select[aria-invalid="true"],
.jjd-field textarea[aria-invalid="true"] {
	border-color: #b42318;
}
.jjd-field__error {
	font-size: 0.8125rem;
	font-weight: 500;
	color: #b42318;
}

/* Post-submit notice banners */
.jjd-form__notice {
	margin: 0;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 0.875rem;
	line-height: 1.5;
}
.jjd-form__notice--success {
	background: #ecfdf3;
	border: 1px solid #067647;
	color: #05603a;
}
.jjd-form__notice--error {
	background: #fef3f2;
	border: 1px solid #b42318;
	color: #912018;
}

/* Honeypot — hidden from everyone, present for bots */
.jjd-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Cloudflare Turnstile widget sits on its own row. Its iframe is a fixed 300px,
   which is wider than the form card on a narrow phone — scale it down there so
   the card keeps even gutters instead of shoving past the right edge. */
.cf-turnstile { min-height: 65px; }

@media (max-width: 600px) {
	.cf-turnstile {
		width: 270px;   /* 300 × 0.9 — the scaled widget's real footprint */
		min-height: 0;
		height: 59px;
		overflow: hidden;
	}
	.cf-turnstile > * {
		width: 300px;   /* give Cloudflare's node room to render at full size... */
		transform: scale(0.9);   /* ...then shrink the whole thing to fit */
		transform-origin: top left;
	}
}
@media (max-width: 360px) {
	.cf-turnstile { width: 240px; height: 52px; }
	.cf-turnstile > * { transform: scale(0.8); }
	.jjd-form { padding: 24px 16px; }
}

.jjd-form__submit {
	width: 100%;
	padding: 14px 30px;
	border: none;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #ffffff;
	background: var(--wp--preset--color--accent-blue);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.jjd-form__submit:hover { background: var(--wp--preset--color--accent-blue-hover); transform: translateY(-2px); }

.jjd-card--subtle .jjd-contact-email {
	margin: 14px 0 0;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-blue);
	word-break: break-word;
}

/* A divider between the email address and the LinkedIn/Behance links, so the
   "reach me directly" contact info and "find me elsewhere" links don't read
   as one undifferentiated list. */
.jjd-contact-links {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 20px;
}

@media (max-width: 860px) {
	.jjd-contact-layout { grid-template-columns: 1fr; gap: 32px; }
}