/*
 * nsemm/impact-calculator frontend + editor styles.
 *
 * A donation impact calculator: a white card with a £ amount field, four
 * quick-pick pills, a live hours-funded result, and a gold Donate button.
 * Visual language matches the other branded section blocks (feature-panel /
 * accordion card chrome: 16px radius, soft shadow) so this block drops into
 * any page without looking like a foreign widget.
 *
 * Per-block CSS loads independently, so the :root map that ties local names
 * to the WP presets lives at the top of this file (Brand-Sync recolours
 * everything through the presets). No raw brand hex is hard-coded; shades
 * derive from color-mix on the brand vars. Every selector is scoped under
 * .nsemm-impact-calc so nothing leaks onto WordPress body or template-part
 * elements.
 */
:root {
	--blue: var(--wp--preset--color--university-blue);
	--gold: var(--wp--preset--color--knowledge-gold);
	--teal: var(--wp--preset--color--discovery-teal);
	--brown: var(--wp--preset--color--foundational-brown);
	--sandy: var(--wp--preset--color--sandy-brown);
	--midnight: var(--wp--preset--color--midnight);
	--bg: var(--wp--preset--color--white);
	--gold-dark: #D4AC00;
	--r-pill: 9999px;
	--r-card: 16px;
	--body: var(--wp--preset--font-family--readex-pro);
	--head: var(--wp--preset--font-family--sora);
}

/* Page container: mirrors the other blocks' gutters; reads best at a
   narrower measure, similar to the accordion's FAQ card. */
.nsemm-impact-calc {
	padding: 0 40px;
	max-width: 760px;
	margin: 0 auto;
}

/* The card: white panel on the sandy ground, matching the accordion/
   feature-panel card chrome. */
.nsemm-impact-calc .calc-panel {
	background: var(--bg);
	border: 1px solid color-mix(in srgb, var(--midnight) 6%, transparent);
	border-radius: var(--r-card);
	box-shadow: 0 10px 36px color-mix(in srgb, var(--midnight) 8%, transparent);
	padding: 40px 44px;
}

.nsemm-impact-calc .calc-label {
	display: block;
	font-family: var(--head);
	font-size: 15px;
	font-weight: 700;
	color: var(--blue);
	margin: 0 0 10px;
}

/* Amount field: a £-prefixed number input, brand-rounded like the rest of
   the theme's form chrome. */
.nsemm-impact-calc .calc-input-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: color-mix(in srgb, var(--blue) 4%, transparent);
	border: 2px solid color-mix(in srgb, var(--midnight) 10%, transparent);
	border-radius: 12px;
	padding: 4px 18px;
	transition: border-color .18s, background .18s;
}
.nsemm-impact-calc .calc-input-row:focus-within {
	border-color: var(--gold);
	background: var(--bg);
}

.nsemm-impact-calc .calc-prefix {
	font-family: var(--head);
	font-size: 22px;
	font-weight: 700;
	color: var(--midnight);
	opacity: .55;
}

.nsemm-impact-calc .calc-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	border: 0;
	background: transparent;
	font-family: var(--head);
	font-size: 26px;
	font-weight: 700;
	color: var(--midnight);
	padding: 14px 0;
	-moz-appearance: textfield;
}
.nsemm-impact-calc .calc-input:focus {
	outline: none;
}
.nsemm-impact-calc .calc-input::-webkit-outer-spin-button,
.nsemm-impact-calc .calc-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Clear keyboard focus ring in the brand gold on the field row itself, so
   tabbing into the input is obvious even though the visible border belongs
   to the row, not the input. */
.nsemm-impact-calc .calc-input:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Quick-pick pills. */
.nsemm-impact-calc .calc-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.nsemm-impact-calc .calc-quick-btn {
	font-family: var(--head);
	font-size: 14px;
	font-weight: 700;
	color: var(--blue);
	background: color-mix(in srgb, var(--blue) 8%, transparent);
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	padding: 9px 20px;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.nsemm-impact-calc .calc-quick-btn:hover {
	background: color-mix(in srgb, var(--blue) 16%, transparent);
	transform: translateY(-1px);
}
.nsemm-impact-calc .calc-quick-btn:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}
.nsemm-impact-calc .calc-quick-btn[aria-pressed="true"] {
	background: var(--blue);
	color: var(--bg);
	border-color: var(--blue);
}

/* Result line: the live hours-funded sentence. aria-live="polite" on the
   wrapper (see render.php) announces updates without being assertive. */
.nsemm-impact-calc .calc-result {
	margin-top: 28px;
	padding: 20px 24px;
	background: color-mix(in srgb, var(--gold) 10%, transparent);
	border-radius: 12px;
	border-left: 4px solid var(--gold);
}

.nsemm-impact-calc .calc-result-line {
	margin: 0;
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.55;
	color: var(--midnight);
}

.nsemm-impact-calc .calc-hours {
	font-family: var(--head);
	color: var(--blue);
	font-weight: 700;
}

/* A brief highlight pulse when the result updates, purely decorative.
   Removed entirely under reduced motion below. */
.nsemm-impact-calc.calc-pulse .calc-result {
	animation: nsemm-calc-pulse .5s ease;
}
@keyframes nsemm-calc-pulse {
	0% {
		background: color-mix(in srgb, var(--gold) 22%, transparent);
	}
	100% {
		background: color-mix(in srgb, var(--gold) 10%, transparent);
	}
}

/* Donate CTA. */
.nsemm-impact-calc .calc-cta {
	margin-top: 24px;
	text-align: center;
}

.nsemm-impact-calc .calc-donate-btn {
	display: inline-block;
	background: var(--gold);
	color: var(--brown);
	font-family: var(--head);
	font-size: 16px;
	font-weight: 700;
	padding: 15px 38px;
	border: 0;
	border-radius: var(--r-pill);
	text-decoration: none;
	transition: background .18s, transform .18s, box-shadow .18s;
	box-shadow: 0 2px 12px color-mix(in srgb, var(--gold) 22%, transparent);
}
.nsemm-impact-calc .calc-donate-btn:hover {
	background: var(--gold-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--gold) 38%, transparent);
}
.nsemm-impact-calc .calc-donate-btn:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}

/* Scroll-reveal initial state (theme global JS adds .visible). Scoped here. */
.nsemm-impact-calc .reveal {
	opacity: 0.08;
	transform: translateY(28px);
	transition: opacity .65s ease, transform .65s ease;
}
.nsemm-impact-calc .reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 600px) {
	.nsemm-impact-calc {
		padding: 0 20px;
	}
	.nsemm-impact-calc .calc-panel {
		padding: 28px 24px;
	}
	.nsemm-impact-calc .calc-input {
		font-size: 22px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nsemm-impact-calc .calc-input-row,
	.nsemm-impact-calc .calc-quick-btn,
	.nsemm-impact-calc .calc-donate-btn,
	.nsemm-impact-calc .reveal {
		transition: none;
	}
	.nsemm-impact-calc.calc-pulse .calc-result {
		animation: none;
	}
}

/* Editor carve-out (2026-06-21): the scroll-reveal `.visible` class is added by
   the theme’s FRONTEND JS, which does not run in the block editor — so `.reveal`
   would sit at its hidden initial opacity and the block looks "disappeared"
   while editing (e.g. when adding a button link). Force it fully visible inside
   the editor canvas only; the frontend animation is unchanged. */
.editor-styles-wrapper .reveal { opacity: 1 !important; transform: none !important; }