/**
 * IT Security Readiness Quiz — front-end styles.
 *
 * Sized from ONE px variable, never rem. The theme sets
 * html { font-size: 62.5% }, so any rem value would render at ~62% of
 * intent. Everything below is calc() against --it365sq-fs.
 */

.it365sq-root {
	/* Brand colours are injected inline by the shortcode; these are fallbacks. */
	--it365sq-primary: #102231;
	--it365sq-secondary: #265998;
	--it365sq-accent: #bfdcff;
	--it365sq-dark: #102231;
	--it365sq-hover: #d01e1e;
	--it365sq-track: #e4eaf2;
	--it365sq-paper: #ffffff;
	--it365sq-line: #dfe6f0;
	--it365sq-muted: #5b6b7d;
	--it365sq-radius: 14px;
	/* Default vertical gap between the blocks of a screen. */
	--it365sq-gap: calc(var(--it365sq-fs) * 1.5);
	--it365sq-shadow: 0 18px 44px rgba(16, 34, 49, 0.13);
	--it365sq-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/*
	 * The single sizing anchor. Change this one value to scale the whole
	 * widget; do not reintroduce rem anywhere below it.
	 */
	--it365sq-fs: 16px;

	font-family: var(--it365sq-font);
	font-size: var(--it365sq-fs);
	line-height: 1.55;
	color: var(--it365sq-dark);
	max-width: calc(var(--it365sq-fs) * 46);
	margin: 0 auto;
}

/* The theme forces its own family onto descendants; win it back. */
.it365sq-root *,
.it365sq-root *::before,
.it365sq-root *::after {
	font-family: var(--it365sq-font);
	box-sizing: border-box;
}

.it365sq-card {
	background: var(--it365sq-paper);
	border: 1px solid var(--it365sq-line);
	border-radius: var(--it365sq-radius);
	box-shadow: var(--it365sq-shadow);
	padding: calc(var(--it365sq-fs) * 2);
}

/*
 * Vertical rhythm.
 *
 * Every block below carries `margin: 0` to neutralise theme styles, so this
 * flow rule has to out-rank those resets. A bare `.it365sq-step > * + *` is
 * specificity (0,1,0), which loses to `.it365sq-root h2` (0,1,1) and to any
 * later (0,1,0) reset such as `.it365sq-options` — the gaps collapsed to
 * nothing and the headings sat flush against the text above and below them.
 * Scoping to the root makes this (0,2,0), which wins cleanly.
 */
.it365sq-root .it365sq-step > * + * {
	margin-top: var(--it365sq-gap);
}

/*
 * An eyebrow and the heading beneath it are one unit — the topic labels the
 * question — so they sit closer together than the surrounding blocks.
 */
.it365sq-root .it365sq-eyebrow + h2 {
	margin-top: calc(var(--it365sq-fs) * 0.375);
}

.it365sq-eyebrow {
	display: block;
	font-size: calc(var(--it365sq-fs) * 0.75);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--it365sq-secondary);
}

.it365sq-root h2 {
	font-size: calc(var(--it365sq-fs) * 1.5);
	line-height: 1.32;
	font-weight: 700;
	margin: 0;
	color: var(--it365sq-primary);
}

.it365sq-root h2:focus {
	outline: none;
}

.it365sq-lead {
	font-size: calc(var(--it365sq-fs) * 1);
	line-height: 1.6;
	color: var(--it365sq-muted);
	margin: 0;
}

/* ---------------- progress + counters ---------------- */

.it365sq-progress {
	margin-bottom: var(--it365sq-gap);
}

.it365sq-progress__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc(var(--it365sq-fs) * 0.75);
	flex-wrap: wrap;
	font-size: calc(var(--it365sq-fs) * 0.8125);
	color: var(--it365sq-muted);
	margin-bottom: calc(var(--it365sq-fs) * 0.5);
}

.it365sq-counters {
	display: inline-flex;
	gap: calc(var(--it365sq-fs) * 0.5);
	align-items: center;
}

.it365sq-counter {
	background: var(--it365sq-accent);
	color: var(--it365sq-primary);
	border-radius: calc(var(--it365sq-fs) * 1);
	padding: calc(var(--it365sq-fs) * 0.15) calc(var(--it365sq-fs) * 0.6);
	font-size: calc(var(--it365sq-fs) * 0.8125);
	white-space: nowrap;
}

.it365sq-counter--streak {
	background: var(--it365sq-primary);
	color: #fff;
}

.it365sq-progress__track {
	height: calc(var(--it365sq-fs) * 0.375);
	background: var(--it365sq-track);
	border-radius: calc(var(--it365sq-fs) * 0.25);
	overflow: hidden;
}

.it365sq-progress__bar {
	height: 100%;
	background: var(--it365sq-secondary);
	border-radius: inherit;
	transition: width 0.3s ease;
}

/* ---------------- answer options ---------------- */

.it365sq-options {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: calc(var(--it365sq-fs) * 0.75);
}

.it365sq-options li {
	margin: 0;
	list-style: none;
}

.it365sq-option {
	/*
	 * The theme uppercases every button site-wide. Answer text is a sentence
	 * and must opt out; the CTAs below deliberately stay uppercase.
	 */
	text-transform: none;

	display: flex;
	align-items: center;
	gap: calc(var(--it365sq-fs) * 0.75);
	width: 100%;
	text-align: left;
	background: var(--it365sq-paper);
	border: 1px solid var(--it365sq-line);
	border-radius: calc(var(--it365sq-radius) * 0.7);
	padding: calc(var(--it365sq-fs) * 1.0625) calc(var(--it365sq-fs) * 1.125);
	font-size: calc(var(--it365sq-fs) * 0.9375);
	line-height: 1.45;
	color: var(--it365sq-dark);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.it365sq-option:hover,
.it365sq-option:focus-visible {
	border-color: var(--it365sq-secondary);
	background: #f7faff;
	outline: none;
}

.it365sq-option[aria-pressed="true"] {
	border-color: var(--it365sq-secondary);
	background: var(--it365sq-accent);
}

.it365sq-option__key {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--it365sq-fs) * 1.75);
	height: calc(var(--it365sq-fs) * 1.75);
	border-radius: 50%;
	background: var(--it365sq-primary);
	color: #fff;
	font-size: calc(var(--it365sq-fs) * 0.75);
	font-weight: 700;
}

/* ---------------- buttons ---------------- */

.it365sq-btn {
	display: inline-block;
	background: var(--it365sq-primary);
	color: #fff;
	border: none;
	border-radius: calc(var(--it365sq-radius) * 0.6);
	padding: calc(var(--it365sq-fs) * 0.75) calc(var(--it365sq-fs) * 1.5);
	font-size: calc(var(--it365sq-fs) * 0.875);
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}

.it365sq-btn:hover,
.it365sq-btn:focus-visible {
	background: var(--it365sq-hover);
	color: #fff;
	outline: none;
}

.it365sq-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.it365sq-btn--link {
	background: none;
	color: var(--it365sq-secondary);
	padding: calc(var(--it365sq-fs) * 0.5) 0;
	text-transform: none;
	font-weight: 600;
}

.it365sq-btn--link:hover,
.it365sq-btn--link:focus-visible {
	background: none;
	color: var(--it365sq-hover);
	text-decoration: underline;
}

.it365sq-footer {
	margin-top: calc(var(--it365sq-fs) * 1);
}

/* ---------------- report offer + form ---------------- */

.it365sq-offer {
	background: var(--it365sq-accent);
	border-radius: calc(var(--it365sq-radius) * 0.7);
	padding: calc(var(--it365sq-fs) * 1.125);
}

.it365sq-offer__heading {
	margin: 0;
	font-size: calc(var(--it365sq-fs) * 1.0625);
	font-weight: 700;
	color: var(--it365sq-primary);
}

.it365sq-offer__body {
	margin: calc(var(--it365sq-fs) * 0.375) 0 0;
	font-size: calc(var(--it365sq-fs) * 0.875);
	color: var(--it365sq-primary);
}

.it365sq-fields {
	display: grid;
	gap: calc(var(--it365sq-fs) * 0.875);
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 640px) {
	.it365sq-fields {
		grid-template-columns: 1fr;
	}

	.it365sq-card {
		padding: calc(var(--it365sq-fs) * 1.25);
	}
}

.it365sq-field label {
	display: block;
	font-size: calc(var(--it365sq-fs) * 0.8125);
	font-weight: 600;
	margin-bottom: calc(var(--it365sq-fs) * 0.25);
	color: var(--it365sq-primary);
}

.it365sq-req {
	color: var(--it365sq-hover);
	margin-left: calc(var(--it365sq-fs) * 0.125);
}

.it365sq-field input {
	width: 100%;
	border: 1px solid var(--it365sq-line);
	border-radius: calc(var(--it365sq-radius) * 0.5);
	padding: calc(var(--it365sq-fs) * 0.625) calc(var(--it365sq-fs) * 0.75);
	font-size: calc(var(--it365sq-fs) * 0.875);
	color: var(--it365sq-dark);
	background: var(--it365sq-paper);
}

.it365sq-field input:focus {
	border-color: var(--it365sq-secondary);
	outline: 2px solid var(--it365sq-accent);
	outline-offset: 1px;
}

.it365sq-field input[aria-invalid="true"] {
	border-color: var(--it365sq-hover);
}

.it365sq-hint {
	margin: calc(var(--it365sq-fs) * 0.25) 0 0;
	font-size: calc(var(--it365sq-fs) * 0.75);
	color: var(--it365sq-muted);
}

.it365sq-hint--active {
	color: var(--it365sq-secondary);
	font-weight: 600;
}

.it365sq-privacy {
	font-size: calc(var(--it365sq-fs) * 0.75);
	color: var(--it365sq-muted);
	margin: calc(var(--it365sq-fs) * 0.75) 0 0;
}

.it365sq-error {
	background: #fdecec;
	border-left: 3px solid var(--it365sq-hover);
	color: #8a1414;
	padding: calc(var(--it365sq-fs) * 0.625) calc(var(--it365sq-fs) * 0.75);
	border-radius: calc(var(--it365sq-radius) * 0.35);
	font-size: calc(var(--it365sq-fs) * 0.8125);
	margin: 0 0 calc(var(--it365sq-fs) * 0.75);
}

.it365sq-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(var(--it365sq-fs) * 0.75);
	margin-top: calc(var(--it365sq-fs) * 1.125);
	flex-wrap: wrap;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
/*
 * The form has no Back button in the spec's flow, so a lone submit would sit
 * left under space-between. Push it to the end instead.
 */
.it365sq-actions--single {
	justify-content: flex-end;
}

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

/* ---------------- result ---------------- */

.it365sq-score__heading {
	text-align: center;
}

.it365sq-dial {
	--it365sq-pct: 0;
	--it365sq-band: var(--it365sq-secondary);

	width: calc(var(--it365sq-fs) * 11);
	height: calc(var(--it365sq-fs) * 11);
	margin: calc(var(--it365sq-fs) * 1.25) auto;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		conic-gradient(
			var(--it365sq-band) calc(var(--it365sq-pct) * 1%),
			var(--it365sq-track) 0
		);
}

.it365sq-dial__inner {
	width: 78%;
	height: 78%;
	border-radius: 50%;
	background: var(--it365sq-paper);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
}

.it365sq-dial__value {
	font-size: calc(var(--it365sq-fs) * 3);
	font-weight: 700;
	color: var(--it365sq-primary);
}

.it365sq-dial__suffix {
	font-size: calc(var(--it365sq-fs) * 0.75);
	color: var(--it365sq-muted);
}

.it365sq-band {
	display: block;
	width: fit-content;
	margin: 0 auto;
	color: #fff;
	font-weight: 700;
	font-size: calc(var(--it365sq-fs) * 0.9375);
	padding: calc(var(--it365sq-fs) * 0.375) calc(var(--it365sq-fs) * 1);
	border-radius: calc(var(--it365sq-fs) * 1.25);
}

.it365sq-band__message {
	text-align: center;
	font-size: calc(var(--it365sq-fs) * 1);
	color: var(--it365sq-dark);
	margin: calc(var(--it365sq-fs) * 0.75) 0 0;
}

.it365sq-note {
	font-size: calc(var(--it365sq-fs) * 0.8125);
	color: var(--it365sq-muted);
	background: #f6f8fb;
	border-radius: calc(var(--it365sq-radius) * 0.5);
	padding: calc(var(--it365sq-fs) * 0.875);
	margin: calc(var(--it365sq-fs) * 1.25) 0 0;
}

.it365sq-done {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--it365sq-fs) * 0.75);
	background: #eef7f0;
	border-radius: calc(var(--it365sq-radius) * 0.5);
	padding: calc(var(--it365sq-fs) * 0.875);
	margin-top: calc(var(--it365sq-fs) * 1);
}

.it365sq-done__tick {
	flex: 0 0 auto;
	width: calc(var(--it365sq-fs) * 1.5);
	height: calc(var(--it365sq-fs) * 1.5);
	border-radius: 50%;
	background: #1e8e3e;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--it365sq-fs) * 0.8125);
	font-weight: 700;
}

.it365sq-done p {
	margin: 0;
	font-size: calc(var(--it365sq-fs) * 0.875);
	color: #16351f;
}

@media (prefers-reduced-motion: reduce) {
	.it365sq-progress__bar {
		transition: none;
	}
}