/* Contact page — the site's dark navy blue for the whole page. A short
   title band up top, then a two-column section: contact form on the left
   (submits via wp_mail(), see template-contact.php), the existing
   lightbulb video set inside the rotating ring graphic on the right. */

.th-contact-hero {
	padding: 170px 0 30px; text-align: center;
}
.th-contact-title {
	font-family: "Italiana", serif; font-weight: 400; letter-spacing: 0.035em;
	font-size: clamp(38px, 5.6vw, 64px); margin: 10px 0 0;
}

.th-contact-content { padding: 30px 0 130px; }
.th-contact-grid {
	display: grid; grid-template-columns: 1fr 1.1fr; gap: 6vw; align-items: center;
}
/* Graphic on the left, form on the right — swap visual order while keeping
   the form first in the markup (source/tab order unaffected). */
.th-contact-left  { order: 2; }
.th-contact-right { order: 1; }

/* ── Form ── */
.th-contact-success {
	font-size: 18px; line-height: 1.7; background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 24px 28px;
}
.th-contact-errors {
	background: rgba(220,60,50,0.14); border: 1px solid rgba(220,60,50,0.4);
	border-radius: 4px; padding: 16px 20px; margin: 0 0 24px;
}
.th-contact-errors p { margin: 0 0 4px; font-size: 14px; }
.th-contact-errors p:last-child { margin-bottom: 0; }

.th-contact-form { display: flex; flex-direction: column; gap: 18px; }
.th-contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.th-contact-field { display: flex; flex-direction: column; gap: 8px; }
.th-contact-field label {
	font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.th-contact-optional { text-transform: none; font-weight: 400; opacity: 0.65; letter-spacing: 0; }
.th-contact-field input[type="text"],
.th-contact-field input[type="email"],
.th-contact-field input[type="tel"] {
	font-family: "Montserrat", sans-serif; font-size: 15px;
	background: var(--th-white); color: var(--th-black);
	border: 1px solid transparent; border-radius: 2px; padding: 13px 16px;
}
.th-contact-field input:focus { outline: 2px solid var(--th-cta); outline-offset: 1px; }

.th-contact-radios { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.th-contact-radios legend {
	font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	padding: 0; margin: 0 0 4px;
}
.th-contact-radio-group { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.th-contact-radio {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: normal;
	cursor: pointer;
}
/* The theme applies a global reset to input[type=radio] for its own
   custom-styled widgets elsewhere on the site (display/appearance/opacity
   knocked out) — force ours back to a normal, clickable native radio. */
.th-contact-radio input[type="radio"] {
	all: revert !important;
	-webkit-appearance: radio !important;
	appearance: radio !important;
	display: inline-block !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	position: static !important;
	accent-color: var(--th-cta);
	width: 16px; height: 16px; margin: 0; flex: none;
}

button.th-btn {
	border: none; cursor: pointer; font-family: "Montserrat", sans-serif;
	align-self: flex-start; margin-top: 6px;
}

/* ── Ring graphic + circular video (same rig as the rest of the site —
   see contact.js) ── */
.th-contact-right { display: flex; align-items: center; justify-content: center; }
.th-contact-ring-graphic {
	position: relative; width: min(92%, 560px); aspect-ratio: 1 / 1;
}
.th-contact-rings-svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.th-contact-ring-outer, .th-contact-ring-middle, .th-contact-ring-inner {
	fill: none; stroke: var(--th-accent);
	transform-box: fill-box; transform-origin: 50% 50%;
	opacity: 0; transition: opacity 0.5s ease;
	/* Continuous rotation driven from contact.js, same rig as the hero rings. */
}
.th-contact-ring-middle { stroke: var(--th-accent-light); }
.th-contact-ring-inner  { stroke: var(--th-cta); }
.th-contact-ring-graphic.th-contact-in .th-contact-ring-outer  { opacity: 1; }
.th-contact-ring-graphic.th-contact-in .th-contact-ring-middle { opacity: 1; transition-delay: 0.35s; }
.th-contact-ring-graphic.th-contact-in .th-contact-ring-inner  { opacity: 1; transition-delay: 0.7s; }

.th-contact-photo {
	position: absolute; top: 50%; left: 50%; width: 70%; height: 70%;
	transform: translate(-50%, -50%); border-radius: 50%;
	object-fit: cover; object-position: center;
	box-shadow: 0 20px 44px rgba(0,0,0,0.35);
	opacity: 0; transition: opacity 0.6s ease 0.9s;
}
.th-contact-ring-graphic.th-contact-in .th-contact-photo { opacity: 1; }

@media (max-width: 860px) {
	.th-contact-grid { grid-template-columns: 1fr; }
	.th-contact-right { margin-top: 40px; }
	.th-contact-ring-graphic { max-width: 320px; }
	.th-contact-field-row { grid-template-columns: 1fr; }
}