/**
 * Contact page — izebuy design system.
 *
 * A short message form alongside the site's contact details. Research-backed:
 * a single-column 3-field form (Name · Email · Message) kept prominent, with the
 * contact details (clickable phone/email, address with a directions link) and
 * social links listed separately for visitors who'd rather not use the form.
 *
 * Template: page-tpl_contact.php.
 * Depends on: tokens.css, socials.css (the .ize-social pills in the details panel).
 */

.ize-contact {
	background: var(--ize-surface-2);
	padding: var(--ize-5) 0 var(--ize-7);
}
.ize-contact__wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--ize-4);
}

/* Layout: one column by default (a lone form is capped for readability); the
 * --split modifier puts the details panel beside the form on tablet and up. */
.ize-contact__grid {
	display: grid;
	gap: var(--ize-5);
	grid-template-columns: minmax(0, 680px);
	align-items: start;
}
@media (min-width: 768px) {
	.ize-contact__grid--split {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		gap: var(--ize-6);
	}
}

/* Cards */
.ize-contact__card {
	background: var(--ize-surface);
	border-radius: var(--ize-radius-lg);
	padding: var(--ize-6);
	box-shadow: var(--ize-shadow-sm);
}
@media (max-width: 575px) {
	.ize-contact__card {
		padding: var(--ize-5) var(--ize-4);
	}
}
.ize-contact__title {
	margin: 0 0 var(--ize-2);
	font-size: var(--ize-fs-xl);
	line-height: var(--ize-lh-heading);
	color: var(--ize-ink);
}
.ize-contact__lead {
	margin: 0 0 var(--ize-3);
	color: var(--ize-ink-2);
	font-size: var(--ize-fs-sm);
}

/* Anti-spam / "what this form is for" note — a soft, bordered aside so it reads
 * as guidance, not an error. */
.ize-contact__note {
	display: flex;
	gap: var(--ize-2);
	align-items: flex-start;
	margin: 0 0 var(--ize-5);
	padding: var(--ize-3) var(--ize-4);
	border: 1px solid var(--ize-line);
	border-left: 3px solid var(--ize-brand);
	border-radius: var(--ize-radius);
	background: var(--ize-surface-2);
	color: var(--ize-ink-2);
	font-size: var(--ize-fs-xs);
	line-height: 1.5;
}
.ize-contact__note i {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--ize-brand);
}

/* ── Form fields ─────────────────────────────────────────────────────────── */

.ize-contact__field {
	margin-bottom: var(--ize-4);
}
.ize-contact__label {
	display: block;
	margin-bottom: var(--ize-1);
	font-size: var(--ize-fs-sm);
	font-weight: 600;
	color: var(--ize-ink);
}
/* Required-field asterisk + the "* Required fields" note. */
.ize-contact__req {
	color: var(--ize-danger, #d33);
	font-weight: 700;
}
.ize-contact__required-note {
	margin: 0 0 var(--ize-4);
	font-size: var(--ize-fs-xs);
	color: var(--ize-ink-3);
}
.ize-contact__input,
.ize-contact__textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--ize-line);
	border-radius: var(--ize-radius);
	background: var(--ize-surface);
	color: var(--ize-ink);
	font-family: var(--ize-font);
	font-size: var(--ize-fs-base);
	transition: border-color 0.15s var(--ize-ease, ease), box-shadow 0.15s var(--ize-ease, ease);
}
.ize-contact__input:focus,
.ize-contact__textarea:focus {
	outline: none;
	border-color: var(--ize-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ize-brand) 18%, transparent);
}
.ize-contact__input::placeholder,
.ize-contact__textarea::placeholder {
	color: var(--ize-ink-3);
}
.ize-contact__textarea {
	min-height: 150px;
	resize: vertical;
}

/* Cloudflare Turnstile (rendered before the button when enabled). */
.ize-contact__form .cf-turnstile {
	margin-bottom: var(--ize-4);
}

/* Submit — uses the site button colours (Appearance → Buttons). */
.ize-contact__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--ize-radius);
	background: var(--ize-btn-bg);
	color: var(--ize-btn-ink);
	font-family: var(--ize-font-btn);
	font-size: var(--ize-fs-sm);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s var(--ize-ease, ease);
}
.ize-contact__submit:hover,
.ize-contact__submit:focus {
	background: var(--ize-btn-bg-hover);
	color: var(--ize-btn-ink);
}
.ize-contact__submit.disabled {
	opacity: 0.7;
	pointer-events: none;
}

/* AJAX success/error message (markup supplied by the handler). */
.ize-contact__response:not(:empty) {
	margin-top: var(--ize-4);
}

/* ── Details panel ───────────────────────────────────────────────────────── */

.ize-contact__details {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ize-contact__details li {
	display: flex;
	gap: var(--ize-3);
	align-items: flex-start;
	padding: var(--ize-3) 0;
	color: var(--ize-ink-2);
	font-size: var(--ize-fs-sm);
	line-height: 1.5;
}
.ize-contact__details li + li {
	border-top: 1px solid var(--ize-line);
}
.ize-contact__details i {
	flex: 0 0 auto;
	width: 20px;
	margin-top: 2px;
	color: var(--ize-brand);
	text-align: center;
}
.ize-contact__details a {
	color: var(--ize-ink-2);
	text-decoration: none;
}
.ize-contact__details a:hover {
	color: var(--ize-brand);
}
.ize-contact__directions {
	display: block;
	margin-top: 2px;
	font-size: var(--ize-fs-xs);
	color: var(--ize-brand);
}

/* Small label above the social row. */
.ize-contact__sublabel {
	margin: var(--ize-5) 0 var(--ize-2);
	font-size: var(--ize-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ize-ink-3);
}