/* ==========================================================================
   C4 Tuning: Contact Us (page-contact.php only; enqueued via is_page_template)
   Uses the tokens from c4tuning-design.css. Card style mirrors login.css.
   ========================================================================== */

body.c4-design .c4-contact { padding: var(--c4-s-6) 0 var(--c4-s-8); }

/* Hero band: compact sibling of the front-page .c4-hero */
body.c4-design .c4-contact__hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin: 0 0 var(--c4-s-6);
	padding: var(--c4-s-6) var(--c4-s-5);
	border: 1px solid var(--c4-line);
	border-radius: var(--c4-r-lg);
	background:
		radial-gradient(60% 90% at 100% 0%, rgba(255, 105, 0, 0.2), transparent 60%),
		var(--c4-carbon),
		var(--c4-surface);
}
body.c4-design .c4-contact__hero::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: linear-gradient(180deg, var(--c4-accent), transparent 85%);
}
body.c4-design .c4-contact__hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -4%;
	bottom: -40%;
	width: 36%;
	height: 180%;
	background: repeating-linear-gradient(90deg, rgba(255, 105, 0, 0.14) 0 12px, transparent 12px 30px);
	transform: skewX(-18deg);
	mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
	pointer-events: none;
}
body.c4-design .c4-contact__title {
	max-width: 18ch;
	margin: 0 0 var(--c4-s-3);
	font-size: var(--c4-fs-2xl);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
body.c4-design .c4-contact__lede {
	max-width: 56ch;
	margin: 0;
	color: var(--c4-text-muted);
	font-size: var(--c4-fs-md);
	text-wrap: pretty;
}

/* Layout: form first on mobile, info aside alongside from 992px */
body.c4-design .c4-contact__grid { display: grid; gap: var(--c4-s-5); }
body.c4-design .c4-contact__card { order: -1; }

body.c4-design .c4-contact__aside {
	align-self: start;
	padding: var(--c4-s-5);
	background: var(--c4-surface);
	border: 1px solid var(--c4-line);
	border-radius: var(--c4-r-lg);
}
body.c4-design .c4-contact__aside-title {
	margin: 0 0 var(--c4-s-4);
	font-size: var(--c4-fs-md);
	font-weight: 600;
}
body.c4-design .c4-contact__list { margin: 0 0 var(--c4-s-5); padding: 0; list-style: none; }
body.c4-design .c4-contact__list li {
	position: relative;
	margin: 0;
	padding: var(--c4-s-3) 0 var(--c4-s-3) var(--c4-s-5);
	border-bottom: 1px solid var(--c4-line);
	color: var(--c4-text-muted);
	font-size: var(--c4-fs-sm);
}
body.c4-design .c4-contact__list li:last-child { border-bottom: 0; }
body.c4-design .c4-contact__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.15em;
	width: 0.55em;
	height: 0.55em;
	background: var(--c4-accent);
	transform: skewX(-16deg);
}
body.c4-design .c4-contact__list strong { display: block; color: var(--c4-text); font-weight: 600; }

/* Form card (login.css card language) */
body.c4-design .c4-contact__card {
	padding: var(--c4-s-5);
	background: var(--c4-surface);
	border: 1px solid var(--c4-line);
	border-top: 3px solid var(--c4-accent);
	border-radius: var(--c4-r-lg);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.8);
}
body.c4-design .c4-contact__card-title {
	margin: 0 0 var(--c4-s-5);
	font-size: var(--c4-fs-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
}

body.c4-design .c4-contact__row { display: grid; gap: 0 var(--c4-s-4); }
body.c4-design .c4-field { margin: 0 0 var(--c4-s-4); }
body.c4-design .c4-field label {
	display: block;
	margin: 0 0 var(--c4-s-2);
	color: var(--c4-text);
	font-size: var(--c4-fs-sm);
	font-weight: 500;
}
body.c4-design .c4-req { color: var(--c4-accent); }
body.c4-design .c4-opt { color: var(--c4-text-subtle); font-weight: 400; }
body.c4-design .c4-field input[type="text"],
body.c4-design .c4-field input[type="email"],
body.c4-design .c4-field textarea {
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
}
body.c4-design .c4-field textarea { min-height: 10rem; resize: vertical; }
body.c4-design .c4-field.has-error input,
body.c4-design .c4-field.has-error textarea { border-color: var(--c4-danger); }
body.c4-design .c4-field.has-error input:focus,
body.c4-design .c4-field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.18); }
body.c4-design .c4-field__error { margin: var(--c4-s-2) 0 0; color: var(--c4-danger); font-size: var(--c4-fs-sm); }
body.c4-design .c4-field__hint { margin: var(--c4-s-2) 0 0; color: var(--c4-text-subtle); font-size: var(--c4-fs-xs); }

/* Captcha */
body.c4-design .c4-captcha__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c4-s-3); }
body.c4-design .c4-captcha__img {
	display: block;
	width: 168px;
	height: 52px;
	border: 1px solid var(--c4-line-strong);
	border-radius: var(--c4-r-sm);
	image-rendering: pixelated;
}
body.c4-design .c4-captcha input[type="text"] { width: 7rem; text-align: center; font-family: var(--c4-font-display); font-size: var(--c4-fs-md); }

/* Honeypot: off-screen, not display:none, so naive bots still fill it */
body.c4-design .c4-hp {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

body.c4-design .c4-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--c4-s-3) var(--c4-s-4); margin-top: var(--c4-s-5); }
body.c4-design .c4-contact__actions .c4-btn { min-width: 12rem; }
body.c4-design .c4-contact__actions .c4-btn:focus-visible,
body.c4-design .c4-contact a.c4-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--c4-bg), 0 0 0 4px var(--c4-accent);
}
body.c4-design .c4-contact__fine { margin: 0; color: var(--c4-text-subtle); font-size: var(--c4-fs-xs); }

/* Messages */
body.c4-design .c4-contact__alert {
	margin: 0 0 var(--c4-s-5);
	padding: 0.85rem 1rem;
	background: var(--c4-surface-2);
	border: 1px solid var(--c4-line);
	border-left: 4px solid var(--c4-danger);
	border-radius: var(--c4-r-md);
	color: var(--c4-text);
}
body.c4-design .c4-contact__success { padding: var(--c4-s-2) 0; }
body.c4-design .c4-contact__success .c4-contact__card-title { display: flex; align-items: center; gap: 0.5em; margin-bottom: var(--c4-s-3); }
body.c4-design .c4-contact__success .c4-contact__card-title::before {
	content: "";
	flex: none;
	width: 0.6em;
	height: 0.6em;
	background: var(--c4-success);
	transform: skewX(-16deg);
}
body.c4-design .c4-contact__success p { margin: 0 0 var(--c4-s-5); color: var(--c4-text-muted); }
body.c4-design .c4-contact__note { padding-left: var(--c4-s-3); border-left: 3px solid var(--c4-accent); }

@media (min-width: 768px) {
	body.c4-design .c4-contact__hero { padding: var(--c4-s-7); }
	body.c4-design .c4-contact__card { padding: var(--c4-s-6); }
	body.c4-design .c4-contact__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
	body.c4-design .c4-contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
	body.c4-design .c4-contact__card { order: 0; }
	body.c4-design .c4-contact__aside { position: sticky; top: var(--c4-s-5); }
}
@media (forced-colors: active) {
	body.c4-design .c4-contact__card,
	body.c4-design .c4-contact__hero { border: 1px solid CanvasText; }
}