/*!
 * 2 Hour Assistant - multi-step contact wizard
 *
 * Palette is taken from the brand assets rather than invented:
 *   #009AF1  brand blue   - the "2" and "ASSISTANT" in the logo
 *   #FA4241  brand red    - the "Hour" in the logo, the SINCE 2003 badge
 *   #2946A2  heading navy - homepage section headings (Roboto 800)
 *   #FFFF00  hero yellow  - hero headlines and the header phone number
 * Display type is Archivo Black to match the hero headlines, with Roboto 900
 * as the fallback so the layout holds if the webfont has not loaded.
 *
 * Everything is scoped to .tha-wizard so it cannot leak into other forms.
 */

.tha-wizard {
	--tha-blue: #009af1;
	--tha-blue-deep: #2946a2;
	--tha-red: #fa4241;
	--tha-yellow: #ffff00;
	--tha-ink: #16233d;
	--tha-radius: 6px;

	position: relative;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	color: #ffffff;
	background: linear-gradient(180deg, rgba(11, 24, 46, .88), rgba(8, 17, 33, .94));
	border: 1px solid rgba(0, 154, 241, .28);
	border-radius: 12px;
	padding: 34px 32px 30px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

/* Brand rule across the top of the card. */
.tha-wizard::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	border-radius: 12px 12px 0 0;
	background: linear-gradient(90deg, var(--tha-blue) 0%, var(--tha-blue-deep) 55%, var(--tha-red) 100%);
}

.tha-wizard *,
.tha-wizard *::before,
.tha-wizard *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- progress */

.tha-wizard__progress { display: none; margin: 6px 0 26px; }
.tha-wizard.is-ready .tha-wizard__progress { display: block; }

.tha-wizard__steps {
	display: flex;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.tha-wizard__steps li {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .09em;
	text-align: center;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
	transition: color .25s ease;
}

/* connector rail between the circles */
.tha-wizard__steps li::before {
	content: "";
	position: absolute;
	top: 15px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: rgba(255, 255, 255, .15);
	transition: background .3s ease;
}

.tha-wizard__steps li em { font-style: normal; }   /* <em> is italic by default */
.tha-wizard__steps li:first-child::before { display: none; }
.tha-wizard__steps li.is-done::before,
.tha-wizard__steps li.is-active::before { background: var(--tha-blue); }

.tha-wizard__steps b {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 2px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: #0b182e;
	font-size: 13px;
	font-weight: 800;
	color: rgba(255, 255, 255, .55);
	transition: all .25s ease;
}

.tha-wizard__steps li.is-done { color: rgba(255, 255, 255, .75); }
.tha-wizard__steps li.is-done b {
	border-color: var(--tha-blue);
	background: #0b182e;
	color: var(--tha-blue);
	font-size: 0;
}
.tha-wizard__steps li.is-done b::after {
	content: "\2713";
	font-size: 15px;
	line-height: 1;
}

.tha-wizard__steps li.is-active { color: #ffffff; }
.tha-wizard__steps li.is-active b {
	border-color: var(--tha-blue);
	background: var(--tha-blue);
	color: #ffffff;
	box-shadow: 0 0 0 5px rgba(0, 154, 241, .18);
}

.tha-wizard__bar {
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
}

.tha-wizard__bar i {
	display: block;
	height: 100%;
	width: 25%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--tha-blue), #2891fb);
	transition: width .35s cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------------- steps */

.tha-step {
	border: 0;
	margin: 0 0 10px;
	padding: 0;
	min-inline-size: 0;
}

/* Steps only collapse once JS has built the nav. With JS off the form stays
   one long page that still submits normally - nothing becomes unreachable. */
.tha-wizard.is-ready .tha-step { display: none; margin: 0; }
.tha-wizard.is-ready .tha-step.is-active { display: block; animation: tha-fade .3s ease; }

@keyframes tha-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tha-wizard.is-ready .tha-step.is-active { animation: none; }
	.tha-wizard__bar i, .tha-wizard__steps b, .tha-wizard__steps li::before { transition: none; }
}

.tha-step__eyebrow {
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tha-blue);
}

.tha-step > legend {
	display: block;
	float: left;      /* legend + width:100% is unreliable; float restores it */
	width: 100%;
	padding: 0;
	margin: 0 0 6px;
	font-family: "Archivo Black", Roboto, sans-serif;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #ffffff;
}

/* Focused programmatically on step change so screen readers announce the new
   heading. That is not a visual affordance, so suppress the ring. */
.tha-step > legend:focus { outline: 0; }

.tha-step__intro {
	clear: both;
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .6);
}

/* ------------------------------------------------------------------ fields */

.tha-field { margin: 0 0 16px; }

.tha-field > label {
	display: block;
	margin: 0 0 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .88);
}

.tha-field > label .req {
	color: var(--tha-red);
	font-weight: 800;
}

.tha-field .hint {
	display: block;
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .45);
}

.tha-wizard .wpcf7-form-control-wrap,
.tha-wizard .wpcf7-span { display: block; }

.tha-wizard .wpcf7-form-control:not([type="submit"]) {
	width: 100%;
	max-width: 100%;
	font-family: inherit;
	font-size: 15px;
	color: var(--tha-ink);
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--tha-radius);
	padding: 10px 14px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.tha-wizard input.wpcf7-form-control:not([type="submit"]) { height: 46px; }

/* CF7 emits rows="10" by default, which renders a ~250px box. Pin the height
   here rather than in the form template; users can still drag to enlarge. */
.tha-wizard textarea.wpcf7-form-control {
	height: 92px;
	min-height: 92px;
	padding: 11px 14px;
	line-height: 1.5;
	resize: vertical;
}

.tha-wizard select.wpcf7-form-control {
	height: 46px;
	padding-right: 42px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23009af1' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
}

.tha-wizard .wpcf7-form-control:not([type="submit"])::placeholder {
	color: #9aa4b5;
	opacity: 1;
}

.tha-wizard .wpcf7-form-control:not([type="submit"]):focus {
	outline: 0;
	border-color: var(--tha-blue);
	box-shadow: 0 0 0 4px rgba(0, 154, 241, .3);
}

/* error state */

.tha-field.has-error .wpcf7-form-control:not([type="submit"]) {
	border-color: var(--tha-red);
	box-shadow: 0 0 0 4px rgba(250, 66, 65, .22);
}

.tha-field__error {
	display: none;
	margin: 7px 0 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	color: #ff8d8c;
}

.tha-field__error::before {
	content: "\26A0";
	margin-right: 6px;
	color: var(--tha-red);
}

.tha-field.has-error .tha-field__error { display: block; }

/* CF7 injects its own per-field tip; ours replaces it */
.tha-wizard .wpcf7-not-valid-tip { display: none !important; }

/* -------------------------------------------------------------- navigation */

.tha-wizard__nav {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.tha-btn,
.tha-wizard input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	font-family: Roboto, inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 15px 22px;
	border: 2px solid transparent;
	border-radius: var(--tha-radius);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .08s ease;
}

.tha-btn--next,
.tha-wizard input[type="submit"] {
	flex: 1 1 auto;
	width: auto;
	background: var(--tha-blue);
	border-color: var(--tha-blue);
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(0, 154, 241, .25);
}

.tha-btn--next:hover,
.tha-btn--next:focus-visible,
.tha-wizard input[type="submit"]:hover,
.tha-wizard input[type="submit"]:focus-visible {
	background: var(--tha-blue-deep);
	border-color: var(--tha-blue-deep);
	color: #ffffff;
	outline: 0;
}

.tha-btn--next:active,
.tha-wizard input[type="submit"]:active { transform: translateY(1px); }

.tha-btn--back {
	flex: 0 0 auto;
	background: transparent;
	color: rgba(255, 255, 255, .7);
	border-color: rgba(255, 255, 255, .25);
}

.tha-btn--back:hover,
.tha-btn--back:focus-visible {
	color: #ffffff;
	border-color: rgba(255, 255, 255, .6);
	outline: 0;
}

/* Hiding the submit must be gated on .is-ready exactly like the steps are.
   Hiding it unconditionally left the no-JS fallback unsubmittable: every step
   was visible but there was no way to send the form. */
.tha-wizard__submit { position: relative; flex: 1 1 auto; }
.tha-wizard.is-ready .tha-wizard__submit { display: none; }
.tha-wizard.is-ready .tha-wizard__submit.is-visible { display: block; }
.tha-wizard input[type="submit"] { width: 100%; display: block; }

/* Absolutely positioned so it cannot add height to the nav row. */
.tha-wizard .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 16px;
	margin: 0;
	transform: translateY(-50%);
}

/* ---------------------------------------------------------- CF7 response */

.tha-wizard .wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 13px 15px !important;
	border-width: 1px !important;
	border-radius: var(--tha-radius);
	font-size: 14px;
	line-height: 1.5;
	color: #ffffff;
	background: rgba(255, 255, 255, .05);
}

.tha-wizard .wpcf7-form.invalid .wpcf7-response-output,
.tha-wizard .wpcf7-form.unaccepted .wpcf7-response-output { border-color: var(--tha-red) !important; }

.tha-wizard .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--tha-blue) !important;
	color: #ffffff;
}

/* screen-reader-only helper */
.tha-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------- narrow screens */

@media (max-width: 640px) {
	.tha-wizard { padding: 26px 20px 24px; border-radius: 10px; }
	.tha-wizard__steps li { font-size: 0; gap: 0; letter-spacing: 0; }
	.tha-wizard__steps li em { display: none; }
	.tha-wizard__steps b { width: 28px; height: 28px; font-size: 12px; }
	.tha-wizard__steps li::before { top: 13px; }
	.tha-step > legend { font-size: 20px; }
	.tha-wizard__nav { flex-wrap: wrap; }
	.tha-btn--back { flex: 1 1 100%; order: 2; }
	.tha-btn--next, .tha-wizard__submit { flex: 1 1 100%; order: 1; }
}

/* ==========================================================================
   Premium Addons for Elementor interop
   --------------------------------------------------------------------------
   The contact page renders this form through the "Premium Contact Form 7"
   widget, whose generated stylesheet (pafe-<template-id>.css) is enqueued
   AFTER this file and targets the same elements:

     .premium-cf7-container .wpcf7-form div, p  { margin: 0 }      (0,2,1)
     .premium-cf7-container label               { color/size/... } (0,1,1)
     .premium-cf7-container input.wpcf7-submit  { blue button }    (0,2,1)
     .premium-cf7-container .wpcf7-form         { display: flex }

   Several of those tie with our selectors on specificity and win purely on
   source order. Doubling the root class (.tha-wizard.tha-wizard) adds one
   class to the score without changing what the selector matches, which beats
   them without resorting to !important.
   ========================================================================== */

/* The form is a flex container, so the wizard is a flex item and would
   shrink-wrap to its content instead of filling the available width. */
.tha-wizard {
	flex: 1 1 100%;
	width: 100%;
}

/* No max-width: the card should span the widget container so it reads as
   filling the translucent panel behind it. The gutter comes from that
   container's own responsive padding (set per breakpoint in Elementor),
   which keeps one source of truth for the spacing at every screen size. */

/* Restore the vertical rhythm that ".wpcf7-form div { margin: 0 }" flattens. */
.tha-wizard.tha-wizard .tha-wizard__progress { margin: 6px 0 26px; }
.tha-wizard.tha-wizard .tha-wizard__steps    { margin: 0 0 16px; }
.tha-wizard.tha-wizard .tha-field            { margin: 0 0 16px; }
.tha-wizard.tha-wizard .tha-wizard__nav      { margin: 26px 0 0; }
.tha-wizard.tha-wizard .tha-step__eyebrow    { margin: 0 0 6px; }
.tha-wizard.tha-wizard .tha-step__intro      { margin: 0 0 22px; }
.tha-wizard.tha-wizard .tha-field__error     { margin: 7px 0 0; }
.tha-wizard.tha-wizard .tha-field .hint      { margin: 6px 0 0; }

/* Labels: out-specify both .premium-cf7-container label and the
   .elementor-widget-premium-contact-form label padding rule. */
.tha-wizard.tha-wizard .tha-field > label {
	display: block;
	margin: 0 0 7px;
	padding-top: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .88);
}

.tha-wizard.tha-wizard .tha-field > label .req {
	color: var(--tha-red);
	font-weight: 800;
}

/* Submit button: Premium repaints it in its own blue (#4d7bfb). */
.tha-wizard.tha-wizard .tha-wizard__submit input[type="submit"] {
	width: 100%;
	margin: 0;   /* pafe sets margin-top:10px, which desyncs the Back button height */
	font-family: Roboto, inherit;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 15px 22px;
	background: var(--tha-blue);
	border: 2px solid var(--tha-blue);
	border-radius: var(--tha-radius);
	color: #ffffff;
	box-shadow: 0 6px 18px rgba(0, 154, 241, .25);
}

.tha-wizard.tha-wizard .tha-wizard__submit input[type="submit"]:hover,
.tha-wizard.tha-wizard .tha-wizard__submit input[type="submit"]:focus-visible {
	background: var(--tha-blue-deep);
	border-color: var(--tha-blue-deep);
	color: #ffffff;
}

/* Placeholders and spinner. */
.tha-wizard.tha-wizard .wpcf7-form-control::placeholder { color: #9aa4b5; opacity: 1; }

.tha-wizard.tha-wizard .wpcf7-spinner {
	position: absolute;
	top: 50%;
	right: 16px;
	margin: 0;
	transform: translateY(-50%);
}

/* ==========================================================================
   Container queries
   --------------------------------------------------------------------------
   The wizard lives in an Elementor *inner* column set to col-50. Elementor
   stacks top-level columns on tablet but not inner ones, so at a 768px
   viewport the card gets only ~332px - narrower than on a 375px phone, while
   viewport media queries still think there is desktop room available.

   Querying the card's own inline size fixes that, and keeps the layout correct
   wherever the form is later placed (popup, sidebar, narrower column). The
   viewport @media block above is retained as a fallback for browsers without
   @container support.
   ========================================================================== */

.tha-wizard { container-type: inline-size; }

@container (max-width: 560px) {
	.tha-wizard__steps li { font-size: 0; gap: 0; letter-spacing: 0; }
	.tha-wizard__steps li em { display: none; }
	.tha-wizard__steps b { width: 28px; height: 28px; font-size: 12px; }
	.tha-wizard__steps li.is-done b::after { font-size: 13px; }
	.tha-wizard__steps li::before { top: 13px; }

	.tha-step > legend { font-size: 20px; }

	.tha-wizard.tha-wizard .tha-wizard__nav { flex-wrap: wrap; }
	.tha-btn--back { flex: 1 1 100%; order: 2; }
	.tha-btn--next, .tha-wizard__submit { flex: 1 1 100%; order: 1; }
}

@container (max-width: 400px) {
	.tha-step > legend { font-size: 18px; }
	.tha-wizard.tha-wizard .tha-field { margin: 0 0 13px; }
	.tha-btn, .tha-wizard.tha-wizard .tha-wizard__submit input[type="submit"] {
		font-size: 13px;
		padding: 13px 16px;
	}
}