/*
 * GAS Risk Assessments front end styling. Everything is scoped under
 * .gasra so it never leaks into the surrounding Kadence theme, and never
 * inherits page styles it should not. Fonts are intentionally left
 * unset here so the theme's own font stack is inherited, per the design
 * brief (no external fonts are loaded).
 */

.gasra {
	--gasra-color-text: #1d2433;
	--gasra-color-primary: #007e4e;
	--gasra-color-secondary: #9facd5;
	--gasra-color-hover: #00bbcc;
	--gasra-color-border: #d7dbe3;
	--gasra-color-surface: #f6f7fa;
	--gasra-radius: 8px;
	--gasra-max-width: 1200px;
	--gasra-side-padding: clamp(20px, 4vw, 48px);

	box-sizing: border-box;
	max-width: var(--gasra-max-width);
	margin-inline: auto;
	padding-inline: var(--gasra-side-padding);
	color: var(--gasra-color-text);
}

.gasra *,
.gasra *::before,
.gasra *::after {
	box-sizing: inherit;
}

.gasra-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gasra-screen {
	padding-block: 24px;
}

/* ---------------------------------------------------------------------
 * Motion: screen transitions, staggered card reveal, and the score ring's
 * animated fill. Every animation/transition here is neutralized under
 * prefers-reduced-motion at the bottom of this file; nothing here is
 * load-bearing for function, only for feel.
 * ------------------------------------------------------------------- */

@keyframes gasraFadeInUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Runs every time a screen's [hidden] attribute is removed: unlike a CSS
   transition, a CSS animation restarts on its own the moment an element
   goes from display:none to visible, so this needs no JS beyond the
   existing hidden-attribute toggling in showScreen(). */
.gasra-screen:not([hidden]) {
	animation: gasraFadeInUp 0.35s ease both;
}

/* A light stagger across the results screen's own cards so they read as a
   cascade rather than one flat block appearing at once. */
.gasra-screen-results.gasra-screen:not([hidden]) .gasra-card {
	animation: gasraFadeInUp 0.4s ease both;
}

.gasra-screen-results .gasra-card:nth-of-type(1) {
	animation-delay: 0.05s;
}

.gasra-screen-results .gasra-card:nth-of-type(2) {
	animation-delay: 0.12s;
}

.gasra-screen-results .gasra-card:nth-of-type(3) {
	animation-delay: 0.19s;
}

.gasra-screen-results .gasra-card:nth-of-type(4) {
	animation-delay: 0.26s;
}

.gasra-screen-results .gasra-card:nth-of-type(5) {
	animation-delay: 0.33s;
}

/* Boxed "card" look for the intro, each question, the email gate, and every
   section of the results screen, so the assessment reads as a set of
   distinct panels rather than bare page content. Declared after
   .gasra-screen so its padding shorthand wins over padding-block above. */
.gasra-card {
	background: #fff;
	border: 1px solid var(--gasra-color-border);
	border-radius: var(--gasra-radius);
	padding: 1.5em clamp(1.25em, 4vw, 2em);
	margin-bottom: 1.25em;
	box-shadow: 0 1px 3px rgba(29, 36, 51, 0.06);
}

.gasra-card > h3:first-child {
	margin-top: 0;
}

.gasra-title {
	font-size: 1.5rem;
	line-height: 1.3;
	margin: 0 0 0.5em;
}

.gasra-description {
	margin: 0 0 1.5em;
	max-width: 60ch;
}

/* ---------------------------------------------------------------------
 * Intro screen: domain grid, time estimate, disclaimer
 * ------------------------------------------------------------------- */

.gasra-domain-grid-heading {
	font-weight: 600;
	margin: 0 0 0.75em;
}

.gasra-domain-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 1em;
}

.gasra-domain-card {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.9em 1em;
	border: 1px solid var(--gasra-color-border);
	border-radius: var(--gasra-radius);
	background: var(--gasra-color-surface);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.gasra-domain-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(29, 36, 51, 0.08);
	border-color: var(--gasra-color-primary);
}

.gasra-domain-icon {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	color: var(--gasra-color-primary);
}

.gasra-domain-card-text {
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.gasra-domain-card-label {
	font-weight: 600;
}

.gasra-domain-card-count {
	font-size: 0.85rem;
	opacity: 0.75;
}

.gasra-meta-line {
	font-weight: 600;
	opacity: 0.75;
	margin: 0 0 1.5em;
}

.gasra-disclaimer {
	font-size: 0.85rem;
	padding: 0.85em 1em;
	border: 1px solid var(--gasra-color-border);
	border-left: 3px solid var(--gasra-color-secondary);
	border-radius: var(--gasra-radius);
	background: var(--gasra-color-surface);
	margin: 0 0 1.5em;
}

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------- */

.gasra-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.7rem 1.4rem;
	font-size: 1rem;
	font-family: inherit;
	font-weight: 600;
	border: none;
	border-radius: var(--gasra-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.gasra-btn:not(:disabled):hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(29, 36, 51, 0.15);
}

.gasra-btn:not(:disabled):active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
}

.gasra-btn::after {
	content: '\2192';
	line-height: 1;
}

.gasra-btn-secondary.gasra-back::after {
	content: none;
}

.gasra-btn-secondary.gasra-back::before {
	content: '\2190';
	line-height: 1;
	margin-inline-end: 0.5em;
}

/* Green is reserved only for the primary CTAs: Start, Submit, Request a demo. */
.gasra-btn-primary {
	background: var(--gasra-color-primary);
	color: #fff;
}

/* White text on the brand's lilac (#9FACD5) fails WCAG AA contrast
   (2.25:1, needs 4.5:1) at this button's font size, so this uses the
   same dark ink text as the rest of the page instead. The lilac
   background itself is unchanged from the brief. */
.gasra-btn-secondary {
	background: var(--gasra-color-secondary);
	color: var(--gasra-color-text);
}

/* Same contrast problem on white text over the brand's cyan hover
   (#00bbcc, 2.34:1): dark ink text here too, on every button variant,
   since this background applies to all of them on hover/focus. */
.gasra-btn:hover,
.gasra-btn:focus-visible {
	background: var(--gasra-color-hover);
	color: var(--gasra-color-text);
}

.gasra-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.gasra-btn:disabled:hover {
	background: var(--gasra-color-secondary);
}

/* ---------------------------------------------------------------------
 * Progress bar
 * ------------------------------------------------------------------- */

.gasra-progress-label {
	font-weight: 600;
	margin: 0 0 0.5em;
}

.gasra-progress-bar {
	height: 8px;
	border-radius: 999px;
	background: var(--gasra-color-border);
	overflow: hidden;
	margin-bottom: 1.5em;
}

.gasra-progress-fill {
	height: 100%;
	background: var(--gasra-color-primary);
	transition: width 0.2s ease;
}

/* ---------------------------------------------------------------------
 * Question / answers
 * ------------------------------------------------------------------- */

.gasra-question-fieldset {
	border: none;
	margin: 0 0 1.5em;
	padding: 0;
}

.gasra-question-text {
	font-size: 1.25rem;
	font-weight: 600;
	padding: 0;
	margin-bottom: 1em;
}

.gasra-option {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	padding: 0.85em 1em;
	margin-bottom: 0.6em;
	border: 1px solid var(--gasra-color-border);
	border-radius: var(--gasra-radius);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.gasra-option:hover {
	border-color: var(--gasra-color-hover);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(29, 36, 51, 0.08);
}

.gasra-option:has(.gasra-radio:checked) {
	border-color: var(--gasra-color-primary);
	background: var(--gasra-color-surface);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 126, 78, 0.12);
}

.gasra-radio {
	margin-top: 0.2em;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.gasra-radio:checked {
	transform: scale(1.1);
}

.gasra-nav {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
 * Email gate
 * ------------------------------------------------------------------- */

.gasra-field {
	display: block;
	font-weight: 600;
	margin-bottom: 1em;
}

.gasra-field input {
	display: block;
	width: 100%;
	max-width: 420px;
	font-size: 1rem;
	font-family: inherit;
	font-weight: normal;
	padding: 0.6em 0.8em;
	margin-top: 0.4em;
	border: 1px solid var(--gasra-color-border);
	border-radius: var(--gasra-radius);
}

.gasra-checkbox-field {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin-bottom: 1em;
	max-width: 60ch;
}

.gasra-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gasra-error {
	color: #a30000;
	font-weight: 600;
	margin-bottom: 1em;
}

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

.gasra-results-overall {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 0.5em;
}

.gasra-results-overall-text {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	min-width: 200px;
}

/* Registering --gasra-ring-pct as an animatable <number> (default 0) is
   what lets the transition below actually tween the conic-gradient's stop
   position instead of snapping straight to the final value; browsers
   without @property support just skip the transition and render the
   final ring correctly with no animation, which is a fine fallback. */
@property --gasra-ring-pct {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

/* Radial score gauge: a conic-gradient ring colored to the result's tier,
   with an inner white disc so it reads as a gauge rather than a solid pie.
   --gasra-ring-color is set by JS as soon as the tier is known; --gasra-
   ring-pct is set one frame later (see renderResults() in frontend.js) so
   this transition has a real 0 to visible "fill in" to animate. */
.gasra-score-ring {
	--gasra-ring-pct: 0;
	--gasra-ring-color: var(--gasra-color-border);
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: conic-gradient(var(--gasra-ring-color) calc(var(--gasra-ring-pct) * 1%), var(--gasra-color-border) 0);
	transition: --gasra-ring-pct 0.8s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.gasra-score-ring-inner {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gasra-results-pct {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

.gasra-results-tier-description {
	margin: 0;
	max-width: 60ch;
}

.gasra-results-raw-score {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.7;
}

.gasra-card-subhead {
	margin: -0.5em 0 1em;
	opacity: 0.75;
}

/* Tier badge base styling; its background/text color are set inline by JS
   from TIER_COLORS in frontend.js, GAS's own published palette (the same
   colors power the score ring, each domain's result bar, and the risk
   scale legend below, so the whole results screen reads as one system). */
.gasra-tier-badge {
	display: inline-block;
	width: fit-content;
	padding: 0.35em 0.9em;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	background: var(--gasra-color-border);
	color: var(--gasra-color-text);
}

.gasra-domain-row {
	margin-bottom: 0.9em;
}

.gasra-domain-row-head {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.gasra-domain-bar {
	height: 10px;
	border-radius: 999px;
	background: var(--gasra-color-border);
	overflow: hidden;
}

.gasra-domain-bar-fill {
	height: 100%;
	/* Default/fallback only: JS sets the actual color per row from
	   TIER_COLORS, classifying that domain's own percentage against the
	   assessment's risk bands, same scale as the tier badge and legend.
	   The percentage is also always shown as text next to the bar, so the
	   bar's color is never the only way to read the value. */
	background: #5c6370;
	transition: width 0.3s ease;
}

.gasra-top-risks-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 1em 0 2em;
}

.gasra-risk-card {
	border: 1px solid var(--gasra-color-border);
	border-radius: var(--gasra-radius);
	padding: 1em 1.2em;
	background: var(--gasra-color-surface);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gasra-risk-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(29, 36, 51, 0.08);
}

/* Severity uses the same tier palette as the score ring/badge/legend:
   value 3 (highest risk answer) gets the brand's brick red, value 2 its
   highlight orange, each with a matching soft tint so the card itself
   carries the signal, not just the border. */
.gasra-risk-card[data-severity='critical'] {
	border-left: 4px solid #c54630;
	background: #fbeae6;
}

.gasra-risk-card[data-severity='elevated'] {
	border-left: 4px solid #f76a0c;
	background: #fdf1e4;
}

.gasra-risk-domain {
	margin: 0 0 0.35em;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.7;
}

.gasra-risk-question {
	font-weight: 600;
	margin: 0 0 0.3em;
}

.gasra-risk-answer {
	margin: 0 0 0.5em;
	font-style: italic;
}

.gasra-risk-guidance {
	margin: 0 0 0.3em;
}

.gasra-risk-guidance a {
	color: var(--gasra-color-primary);
}

.gasra-risk-source {
	font-size: 0.85rem;
	opacity: 0.75;
}

.gasra-cta-heading {
	margin-bottom: 0.75em;
}

/* ---------------------------------------------------------------------
 * Risk scale legend and results actions
 * ------------------------------------------------------------------- */

.gasra-risk-scale {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.gasra-risk-scale-item {
	padding: 0.75em 0.9em;
	border: 2px solid transparent;
	border-radius: var(--gasra-radius);
	background: var(--gasra-color-surface);
}

/* Soft tints matching the score ring/badge/domain bar palette, so the
   legend visually keys to the rest of the results screen even before a
   band is highlighted as the visitor's own result. */
.gasra-risk-scale-item[data-tier='low'] {
	background: #eaf7f1;
}

.gasra-risk-scale-item[data-tier='moderate'] {
	background: #fff6e0;
}

.gasra-risk-scale-item[data-tier='high'] {
	background: #fef0e5;
}

.gasra-risk-scale-item[data-tier='critical'] {
	background: #fbeae6;
}

.gasra-risk-scale-item.is-current {
	border-color: var(--gasra-color-text);
	box-shadow: 0 0 0 2px rgba(29, 36, 51, 0.08);
	animation: gasraPulseOnce 1.2s ease-out;
}

@keyframes gasraPulseOnce {
	0% {
		box-shadow: 0 0 0 0 rgba(29, 36, 51, 0.25);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(29, 36, 51, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(29, 36, 51, 0);
	}
}

.gasra-risk-scale-item[data-tier='low'].is-current {
	border-color: #2db27f;
}

.gasra-risk-scale-item[data-tier='moderate'].is-current {
	border-color: #ffb100;
}

.gasra-risk-scale-item[data-tier='high'].is-current {
	border-color: #f76a0c;
}

.gasra-risk-scale-item[data-tier='critical'].is-current {
	border-color: #c54630;
}

.gasra-risk-scale-tier {
	display: block;
	font-weight: 700;
	margin-bottom: 0.2em;
}

.gasra-risk-scale-range {
	display: block;
	font-size: 0.85rem;
	opacity: 0.75;
}

.gasra-results-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
 * Focus and keyboard access. Never suppressed without a replacement.
 * ------------------------------------------------------------------- */

.gasra a:focus-visible,
.gasra button:focus-visible,
.gasra input:focus-visible,
.gasra [tabindex]:focus-visible {
	/* Not the hover cyan: that only reaches 2.34:1 against a light page
	   background, short of the 3:1 WCAG needs for a focus indicator.
	   This darker neutral reaches 6.05:1. Covers the results heading
	   too, which JS moves focus to on a tabindex="-1" element. */
	outline: 3px solid #5c6370;
	outline-offset: 2px;
}

.gasra-option:focus-within {
	border-color: var(--gasra-color-hover);
}

/* ---------------------------------------------------------------------
 * Mobile first: the base rules above already stack full width; from
 * tablet width up, question navigation and results widen slightly.
 * ------------------------------------------------------------------- */

@media (min-width: 480px) {
	.gasra-domain-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 600px) {
	.gasra-title {
		font-size: 1.85rem;
	}

	.gasra-score-ring {
		width: 128px;
		height: 128px;
	}

	.gasra-score-ring-inner {
		width: 100px;
		height: 100px;
	}

	.gasra-results-pct {
		font-size: 1.85rem;
	}

	.gasra-risk-scale {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------------------------------------------------------------------
 * Respect prefers-reduced-motion: every animation/transition added above
 * (screen fades, card stagger, ring fill, bar fill, hover lifts, the
 * legend pulse) is purely decorative, never load-bearing for function or
 * for reading content, so this can safely flatten all of it to instant.
 * ------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.gasra,
	.gasra *,
	.gasra *::before,
	.gasra *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
 * Print / "save as PDF": only the results screen is ever visible when
 * this fires (every other .gasra-screen carries the hidden attribute at
 * that point), so this only needs to trim the results screen's own
 * interactive chrome.
 * ------------------------------------------------------------------- */

@media print {
	.gasra-results-actions,
	.gasra-results-cta-card {
		display: none !important;
	}

	.gasra-card {
		box-shadow: none;
		break-inside: avoid;
	}
}