/**
 * gwt-calculator — styles
 * FluentSnippets → CSS snippet, or /assets/gwt-calculator.css
 *
 * COLOUR TOKENS
 * The Global Colors exist in Elementor Site Settings with explicit IDs
 * (gwtGreen, gwtGreenDeep, …), so --e-global-color-gwtGreen resolves for
 * real. The hex values remain only as fallbacks for the editor canvas and
 * any context where the kit CSS has not loaded; Elementor is the source of
 * truth and a palette change there propagates here automatically.
 *
 * Palette sampled from the logo (#2EA836) and contrast-verified:
 *   Brand Green #2EA836 · Green Deep #1E7A28 · Green Wash #EAF7EC
 *   Ink #101312 · Slate #5A6360 · Line #E3E7E5 · Surface Alt #F5F7F6
 */

.calc {
	--calc-green:      var(--e-global-color-gwtGreen,     #2EA836);
	--calc-green-deep: var(--e-global-color-gwtGreenDeep, #1E7A28);
	--calc-wash:       var(--e-global-color-gwtGreenWash, #EAF7EC);
	--calc-ink:        var(--e-global-color-gwtInk,       #101312);
	--calc-slate:      var(--e-global-color-gwtSlate,     #5A6360);
	--calc-line:       var(--e-global-color-gwtLine,      #E3E7E5);
	--calc-surface:    var(--e-global-color-gwtSurfaceAlt,#F5F7F6);

	display: grid;
	gap: var(--space-md);
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--space-lg);
	background: var(--calc-surface);
	border: var(--hairline) solid var(--calc-line);
	border-radius: var(--radius-lg);
}

.calc__title {
	font-family: var(--e-global-typography-gwtHeading-font-family, "Lexend Deca", sans-serif);
	color: var(--calc-ink);
	margin-block-end: var(--space-2xs);
}

.calc__lede {
	color: var(--calc-slate);
	max-width: var(--wrap-narrow);
}

/* ---------------------------------------------------------------
   Form
   Single column on mobile by default; the grid only changes structure
   at a breakpoint, which is exactly what clamp() cannot do (Rule 14).
   --------------------------------------------------------------- */

.calc__form {
	display: grid;
	gap: var(--space-sm);
}

@media (min-width: 48em) {
	.calc__form {
		grid-template-columns: repeat(2, 1fr);
	}
}

.calc__field {
	display: grid;
	gap: var(--space-3xs);
}

.calc__label {
	font-weight: 500;
	color: var(--calc-ink);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs);
	align-items: baseline;
}

.calc__hint {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--calc-slate);
}

.calc__input {
	inline-size: 100%;
	padding: var(--space-2xs) var(--space-xs);
	/* 16px floor prevents iOS Safari zooming the page on focus */
	font-size: max(1rem, 16px);
	color: var(--calc-ink);
	background: #fff;
	border: var(--hairline) solid var(--calc-line);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur) var(--ease);
}

.calc__input:hover {
	border-color: var(--calc-green);
}

/* ---------------------------------------------------------------
   Results
   --------------------------------------------------------------- */

.calc__results {
	display: grid;
	gap: var(--space-sm);
}

.calc__result {
	display: grid;
	gap: var(--space-3xs);
	padding: var(--space-sm);
	background: #fff;
	border: var(--hairline) solid var(--calc-line);
	border-radius: var(--radius);
}

.calc__result--headline {
	background: var(--calc-ink);
	border-color: var(--calc-ink);
	text-align: center;
	padding-block: var(--space-md);
}

.calc__result-label {
	font-size: 0.875rem;
	color: var(--calc-slate);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Brand green measures 6.02:1 on ink — passes AA (Rule 17).
   On white it is only 3.10:1, so body-weight text uses the deep green. */
.calc__result--headline .calc__result-label { color: #B9C2BE; }

.calc__result--headline .calc__result-value {
	color: var(--calc-green);
	font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
	line-height: 1.1;
}

.calc__result-value {
	font-family: var(--e-global-typography-gwtHeading-font-family, "Lexend Deca", sans-serif);
	font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
	font-weight: 700;
	color: var(--calc-green-deep);
}

.calc__result--headline .calc__result-unit { color: #B9C2BE; }

.calc__grid {
	display: grid;
	gap: var(--space-sm);
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.calc__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------
   Comparison table — the no-JS fallback
   Scrolls inside its own container so the page body never scrolls
   sideways. This is the class of bug that breaks the current site
   at 375px in 31 places.
   --------------------------------------------------------------- */

.calc__table {
	inline-size: 100%;
	border-collapse: collapse;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
}

.calc__caption {
	text-align: start;
	padding-block-end: var(--space-2xs);
	color: var(--calc-slate);
	font-size: 0.875rem;
}

.calc__table th,
.calc__table td {
	padding: var(--space-2xs) var(--space-xs);
	text-align: start;
	border-block-end: var(--hairline) solid var(--calc-line);
}

.calc__table thead th {
	background: var(--calc-wash);
	color: var(--calc-ink);
	font-weight: 600;
	white-space: nowrap;
}

.calc__table-total th,
.calc__table-total td {
	font-weight: 700;
	color: var(--calc-ink);
	border-block-end: none;
}

.calc__note {
	font-size: 0.8125rem;
	color: var(--calc-slate);
}

/* ---------------------------------------------------------------
   CTAs
   --------------------------------------------------------------- */

.calc__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

/* `.calc a.calc__button` (0,2,1) rather than `.calc__button` (0,1,0):
   Hello Elementor's theme.css sets `.page-content a { text-decoration:
   underline }` at 0,2,0 and was winning, underlining both buttons. */
.calc a.calc__button,
.calc__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 2.75rem; /* 44px — minimum comfortable touch target */
	padding: var(--space-2xs) var(--space-md);
	/* Green Deep, not Brand Green. White on #2EA836 is 3.10:1, which fails
	   AA for button text at this size/weight. White on #1E7A28 is 5.43:1
	   and passes. Brand Green stays for large display text on ink (6.02:1),
	   borders and focus rings, where 3:1 is sufficient (6.02:1 on ink). */
	background: var(--calc-green-deep);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border: var(--hairline) solid var(--calc-green-deep);
	border-radius: var(--radius-pill);
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.calc a.calc__button:hover,
.calc a.calc__button:focus-visible,
.calc__button:hover,
.calc__button:focus-visible {
	/* Darkens on hover, so contrast only ever improves. */
	background: var(--calc-ink);
	border-color: var(--calc-ink);
	color: #fff;
}

.calc a.calc__button--ghost,
.calc__button--ghost {
	background: transparent;
	color: var(--calc-green-deep);
	border-color: var(--calc-line);
}

.calc a.calc__button--ghost:hover,
.calc a.calc__button--ghost:focus-visible,
.calc__button--ghost:hover,
.calc__button--ghost:focus-visible {
	background: var(--calc-wash);
	color: var(--calc-green-deep);
	border-color: var(--calc-green);
}

/* ---------------------------------------------------------------
   Compact variant — homepage teaser
   --------------------------------------------------------------- */

.calc--compact { padding: var(--space-md); }
.calc--compact .calc__table,
.calc--compact .calc__lede { display: none; }

/* Edge case: if the rider's inputs produce no saving, say so plainly
   rather than showing a misleading negative. */
.calc.is-negative .calc__result--headline .calc__result-value {
	font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
}