/*
 * Hero quick-calc card — dark glass, DESIGN.md §12.
 */

.hero-form {
	position: relative;
	background: var(--ark-surface-glass);
	border: 1px solid var(--ark-border-medium);
	border-radius: var(--ark-radius-md);
	padding: 26px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	/* Lifts the card off the hero media so it reads as a floating panel,
	   not a flat sticker glued onto the background. */
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.hero-form__title {
	font-size: 1.2rem;
	margin-bottom: 8px;
}

.hero-form__subtitle {
	font-size: 0.88rem;
	color: var(--ark-text-secondary);
	margin-bottom: 20px;
}

.hero-form__field {
	margin-bottom: 14px;
}

.hero-form__field label {
	display: block;
	font-size: 0.78rem;
	color: var(--ark-text-muted);
	margin-bottom: 6px;
}

.hero-form__field select,
.hero-form__field input {
	width: 100%;
	height: 48px;
	padding-inline: 14px;
	background: var(--ark-surface-700);
	border: 1px solid var(--ark-border-soft);
	border-radius: var(--ark-radius-sm);
	color: var(--ark-text-primary);
	font-family: var(--ark-font-sans);
	font-size: 0.92rem;
	transition: border-color 150ms var(--ark-ease), box-shadow 150ms var(--ark-ease);
}

.hero-form__field select:focus-visible,
.hero-form__field input:focus-visible {
	outline: none;
	border-color: var(--ark-border-titanium);
	box-shadow: 0 0 0 3px rgba(166, 159, 147, 0.18);
}

/* Error state only after interaction, not on initial empty/required load. */
.hero-form__field input:user-invalid,
.hero-form__field select:user-invalid {
	border-color: var(--ark-accent-heating);
}

/* assets/js/hero-form.js sets aria-invalid for checks native constraint
   validation can't express (e.g. a phone that's non-empty but implausible),
   so :user-invalid alone would miss those — same visual treatment either way. */
.hero-form__field input[aria-invalid="true"],
.hero-form__field select[aria-invalid="true"] {
	border-color: var(--ark-accent-heating);
}

.hero-form__error {
	margin: 0 0 12px;
	padding: 8px 14px;
	border-radius: var(--ark-radius-sm);
	border: 1px solid rgba(181, 106, 69, 0.5);
	background: rgba(181, 106, 69, 0.1);
	color: var(--ark-text-primary);
	font-size: 0.82rem;
}

.hero-form__submit {
	width: 100%;
	margin-top: 6px;
}

.hero-form__legal {
	font-size: 0.72rem;
	color: var(--ark-text-muted);
	margin: 14px 0 0;
}

.hero-form__legal a {
	color: var(--ark-text-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
}