/**
 * Hainsworth & Vow — Wedding Budget Calculator
 * Mobile-first styles, scoped to .hv-bc, using the site brand palette.
 */

.hv-bc {
	--hv-cocoa: #5A3D32;
	--hv-ink: #2B211D;
	--hv-clay: #9B6F5B;
	--hv-cream: #EFE4D7;
	--hv-ivory: #F8F3EC;
	--hv-white: #ffffff;
	--hv-line: #e3d6c7;
	--hv-shadow: 0 6px 24px rgba(43, 33, 29, 0.08);
	--hv-radius: 14px;
	--hv-radius-sm: 9px;
	--hv-gap: 1.25rem;

	max-width: 720px;
	margin: 0 auto;
	color: var(--hv-ink);
	font-size: 1rem;
	line-height: 1.6;
}

.hv-bc *,
.hv-bc *::before,
.hv-bc *::after {
	box-sizing: border-box;
}

/* ---------- State visibility ---------- */
.hv-bc__notice--nojs {
	display: block;
}
.hv-bc--ready .hv-bc__notice--nojs {
	display: none;
}
.hv-bc__notice {
	background: var(--hv-ivory);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	padding: 1.5rem;
}
.hv-bc__notice--error {
	background: var(--hv-cream);
}
.hv-bc__notice-title {
	margin-top: 0;
}

/* ---------- App shell ---------- */
.hv-bc__app {
	background: var(--hv-ivory);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
	padding: 1.5rem 1.25rem 1.25rem;
}

/* ---------- Progress ---------- */
.hv-bc__progress {
	margin-bottom: 1.5rem;
}
.hv-bc__progress-label {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hv-clay);
}
.hv-bc__progress-track {
	height: 6px;
	background: var(--hv-cream);
	border-radius: 999px;
	overflow: hidden;
}
.hv-bc__progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--hv-clay);
	border-radius: 999px;
	transition: width 0.3s ease;
}

/* ---------- Steps ---------- */
.hv-bc__form {
	margin: 0;
}
.hv-bc__step {
	display: none;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.hv-bc__step.is-active {
	display: block;
}
.hv-bc__step-title {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--hv-cocoa);
	margin: 0 0 0.5rem;
	padding: 0;
}
.hv-bc__step-title:focus {
	outline: none;
}
.hv-bc__lede {
	margin: 0 0 1.25rem;
	color: var(--hv-ink);
}
.hv-bc__reassure {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.hv-bc__reassure li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.4rem;
}
.hv-bc__reassure li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hv-clay);
}

/* ---------- Fields ---------- */
.hv-bc__field {
	margin-bottom: var(--hv-gap);
}
.hv-bc__field--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}
.hv-bc__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
	color: var(--hv-ink);
}
.hv-bc__label--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.hv-bc__req {
	color: var(--hv-clay);
}
.hv-bc__optional {
	font-weight: 400;
	color: var(--hv-clay);
	font-size: 0.9rem;
}
.hv-bc__hint {
	display: block;
	font-size: 0.9rem;
	color: var(--hv-clay);
	margin-top: 0.35rem;
}
.hv-bc__field--inline .hv-bc__hint {
	margin-top: 0;
	flex: 1 1 12rem;
}

.hv-bc__input {
	width: 100%;
	font-size: 1rem;
	font-family: inherit;
	color: var(--hv-ink);
	background: var(--hv-white);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius-sm);
	padding: 0.7rem 0.85rem;
	-webkit-appearance: none;
	appearance: none;
}
.hv-bc__input:focus-visible {
	outline: 3px solid var(--hv-clay);
	outline-offset: 1px;
	border-color: var(--hv-clay);
}
.hv-bc__input--narrow {
	max-width: 9rem;
}
.hv-bc__input-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
}
.hv-bc__prefix {
	display: flex;
	align-items: center;
	padding: 0 0.7rem;
	background: var(--hv-cream);
	border: 1px solid var(--hv-line);
	border-right: 0;
	border-radius: var(--hv-radius-sm) 0 0 var(--hv-radius-sm);
	color: var(--hv-cocoa);
	font-weight: 600;
}
.hv-bc__input-wrap .hv-bc__input--money {
	border-radius: 0 var(--hv-radius-sm) var(--hv-radius-sm) 0;
}
.hv-bc__suffix-note {
	display: inline-block;
	margin-left: 0.4rem;
	color: var(--hv-cocoa);
	font-weight: 600;
}

.hv-bc__error {
	display: none;
	margin-top: 0.4rem;
	font-size: 0.9rem;
	color: var(--hv-cocoa);
	font-weight: 600;
}
.hv-bc__error.is-visible {
	display: block;
}
.hv-bc__input.is-error {
	border-color: var(--hv-cocoa);
	background: #fdf6f0;
}

/* ---------- Buttons ---------- */
.hv-bc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 999px;
	padding: 0.8rem 1.6rem;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	min-height: 44px;
}
.hv-bc__btn:focus-visible {
	outline: 3px solid var(--hv-clay);
	outline-offset: 2px;
}
.hv-bc__btn--primary {
	background: var(--hv-cocoa);
	color: var(--hv-ivory);
}
.hv-bc__btn--primary:hover {
	background: var(--hv-ink);
	color: var(--hv-ivory);
}
.hv-bc__btn--ghost {
	background: transparent;
	color: var(--hv-cocoa);
	border-color: var(--hv-line);
}
.hv-bc__btn--ghost:hover {
	background: var(--hv-cream);
}
.hv-bc__btn--soft {
	background: var(--hv-cream);
	color: var(--hv-cocoa);
	border-color: var(--hv-line);
}
.hv-bc__btn--soft:hover {
	background: var(--hv-clay);
	color: var(--hv-ivory);
}
.hv-bc__btn--remove {
	background: transparent;
	color: var(--hv-cocoa);
	border-color: var(--hv-line);
	padding: 0;
	width: 44px;
	min-width: 44px;
	height: 44px;
	font-size: 1.4rem;
	flex: 0 0 auto;
}
.hv-bc__btn--remove:hover {
	background: var(--hv-cream);
}

/* ---------- Step navigation ---------- */
.hv-bc__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
.hv-bc__nav [data-hv-next] {
	margin-left: auto;
}
.hv-bc__nav--results {
	margin-top: 1.5rem;
}

/* ---------- Subtotals ---------- */
.hv-bc__subtotal {
	background: var(--hv-cream);
	border-radius: var(--hv-radius-sm);
	padding: 0.75rem 1rem;
	margin: 1rem 0 0;
	font-size: 0.95rem;
}
.hv-bc__subtotal strong {
	color: var(--hv-cocoa);
	font-size: 1.1rem;
}

/* ---------- Collapsible cost groups ---------- */
.hv-bc__group {
	background: var(--hv-white);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius-sm);
	margin-bottom: 0.75rem;
	overflow: hidden;
}
.hv-bc__group-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--hv-white);
	border: 0;
	padding: 0.95rem 1rem;
	cursor: pointer;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: var(--hv-cocoa);
	text-align: left;
}
.hv-bc__group-toggle:focus-visible {
	outline: 3px solid var(--hv-clay);
	outline-offset: -3px;
}
.hv-bc__group-sub {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--hv-ink);
	font-weight: 400;
}
.hv-bc__group-caret {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--hv-clay);
	transition: transform 0.2s ease;
}
.hv-bc__group-toggle[aria-expanded="true"] .hv-bc__group-caret {
	transform: rotate(180deg);
}
.hv-bc__group-body {
	padding: 0.25rem 1rem 1rem;
	border-top: 1px solid var(--hv-line);
}

/* ---------- Custom items ---------- */
.hv-bc__custom {
	margin-top: 1.5rem;
}
.hv-bc__custom-title {
	font-size: 1.05rem;
	color: var(--hv-cocoa);
	margin: 0 0 0.75rem;
}
.hv-bc__custom-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: flex-end;
	background: var(--hv-white);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius-sm);
	padding: 0.85rem;
	margin-bottom: 0.75rem;
}
.hv-bc__custom-row .hv-bc__field {
	margin-bottom: 0;
	flex: 1 1 8rem;
}

/* ---------- Results ---------- */
.hv-bc__hero {
	background: var(--hv-cocoa);
	color: var(--hv-ivory);
	border-radius: var(--hv-radius);
	padding: 1.75rem 1.25rem;
	text-align: center;
}
.hv-bc__hero-label {
	margin: 0 0 0.25rem;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hv-cream);
}
.hv-bc__hero-figure {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 2.75rem;
	line-height: 1.1;
	margin: 0;
}
.hv-bc__hero-sub {
	margin: 0.5rem 0 0;
	color: var(--hv-cream);
}
.hv-bc__hero-sub strong {
	color: var(--hv-white);
}
.hv-bc__shortfall {
	margin: 0.75rem 0 0;
	color: var(--hv-cream);
}

.hv-bc__bracket {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-align: center;
	margin: 1.25rem 0;
}
.hv-bc__bracket-label {
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hv-clay);
}
.hv-bc__bracket-badge {
	display: inline-block;
	background: var(--hv-cream);
	color: var(--hv-cocoa);
	font-weight: 700;
	font-size: 1.15rem;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
}

.hv-bc__guidance {
	border-radius: var(--hv-radius-sm);
	padding: 1rem 1.1rem;
	margin: 1.25rem 0;
	background: var(--hv-cream);
	border-left: 4px solid var(--hv-clay);
}
.hv-bc__guidance.is-healthy {
	background: #eef2e6;
	border-left-color: #7d8c5c;
}
.hv-bc__guidance.is-tight {
	background: #f7ede1;
	border-left-color: var(--hv-clay);
}
.hv-bc__guidance.is-attention {
	background: #f6e7df;
	border-left-color: var(--hv-cocoa);
}
.hv-bc__guidance.is-sense-check {
	background: var(--hv-ivory);
	border-left-color: var(--hv-clay);
}

.hv-bc__breakdown {
	background: var(--hv-white);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius-sm);
	padding: 1.1rem 1.25rem;
	margin: 1.25rem 0;
}
.hv-bc__breakdown-title {
	font-size: 1.05rem;
	color: var(--hv-cocoa);
	margin: 0 0 0.75rem;
}
.hv-bc__breakdown-list {
	margin: 0;
}
.hv-bc__breakdown-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--hv-cream);
}
.hv-bc__breakdown-row:last-child {
	border-bottom: 0;
}
.hv-bc__breakdown-row dt,
.hv-bc__breakdown-row dd {
	margin: 0;
}
.hv-bc__breakdown-row dd {
	font-weight: 600;
	white-space: nowrap;
}
.hv-bc__breakdown-row--sum {
	border-top: 1px solid var(--hv-line);
	margin-top: 0.25rem;
	padding-top: 0.6rem;
}
.hv-bc__breakdown-row--total dt,
.hv-bc__breakdown-row--total dd {
	font-size: 1.1rem;
	color: var(--hv-cocoa);
	font-weight: 700;
}
.hv-bc__blank-note {
	margin: 0.85rem 0 0;
	font-size: 0.9rem;
	color: var(--hv-clay);
}

.hv-bc__cta-wrap {
	text-align: center;
	margin: 1.5rem 0;
}
.hv-bc__cta {
	width: 100%;
}

/* ---------- Lead capture ---------- */
.hv-bc__lead {
	background: var(--hv-white);
	border: 1px solid var(--hv-line);
	border-radius: var(--hv-radius-sm);
	padding: 1.25rem;
	margin-top: 1.5rem;
}
.hv-bc__lead-title {
	font-size: 1.1rem;
	color: var(--hv-cocoa);
	margin: 0 0 0.5rem;
}
.hv-bc__lead-intro {
	margin: 0 0 1rem;
	font-size: 0.95rem;
}
.hv-bc__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.95rem;
	cursor: pointer;
}
.hv-bc__consent input {
	margin-top: 0.25rem;
	width: 1.1rem;
	height: 1.1rem;
	flex: 0 0 auto;
}
.hv-bc__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.hv-bc__lead-success {
	display: none;
	background: #eef2e6;
	border-left: 4px solid #7d8c5c;
	border-radius: var(--hv-radius-sm);
	padding: 0.75rem 1rem;
	margin: 0.5rem 0;
	font-weight: 600;
	color: var(--hv-ink);
}
.hv-bc__lead-success.is-visible {
	display: block;
}
.hv-bc__lead-privacy {
	font-size: 0.85rem;
	color: var(--hv-clay);
	margin: 0.5rem 0 0;
}
.hv-bc__lead-privacy a {
	color: var(--hv-cocoa);
}

/* ---------- Larger screens ---------- */
@media (min-width: 600px) {
	.hv-bc__app {
		padding: 2rem 2rem 1.75rem;
	}
	.hv-bc__step-title {
		font-size: 1.75rem;
	}
	.hv-bc__cta {
		width: auto;
		min-width: 16rem;
	}
	.hv-bc__custom-row .hv-bc__field {
		flex: 1 1 10rem;
	}
}

/* ---------- Mobile sticky navigation ---------- */
@media (max-width: 599px) {
	.hv-bc__nav:not(.hv-bc__nav--results) {
		position: sticky;
		bottom: 0;
		background: var(--hv-ivory);
		padding: 0.75rem 0 0.25rem;
		margin-left: -0.25rem;
		margin-right: -0.25rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
		border-top: 1px solid var(--hv-line);
		z-index: 2;
	}
	.hv-bc__hero-figure {
		font-size: 2.25rem;
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.hv-bc__progress-fill,
	.hv-bc__group-caret,
	.hv-bc__btn {
		transition: none;
	}
}