/* ---------------------------------------------------------------------------
 * Global Protect – Converged Security Assessment
 * Visual direction: a calm diagnostic instrument. Deep slate, generous space,
 * restrained type. Red/amber/yellow/green appear ONLY on scores, so colour
 * always carries meaning. Set inline by JS from the config's bandColours.
 * ------------------------------------------------------------------------- */

.gpa {
	--gpa-ink:      #10213f;   /* Global Protect brand navy   */
	--gpa-ink-soft: #4a5a6e;   /* secondary text              */
	--gpa-line:     #d7dee6;   /* hairline borders            */
	--gpa-surface:  #ffffff;   /* cards                       */
	--gpa-bg:       #f4f6f8;   /* page wash                   */
	--gpa-accent:   #1c3a63;   /* brand navy, lifted for CTAs */
	--gpa-accent-d: #10213f;
	--gpa-focus:    #2f80ed;

	--gpa-radius: 6px;
	--gpa-max: 640px;

	color: var(--gpa-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.gpa * { box-sizing: border-box; }

/* ---- Focus -------------------------------------------------------------
 * Keyboard users must always be able to see where they are. :focus-visible
 * means mouse users never see a ring, so there is no reason to remove it. */
.gpa :focus-visible {
	outline: 3px solid var(--gpa-focus);
	outline-offset: 2px;
	border-radius: var(--gpa-radius);
}
/* Never leave a keyboard user without a focus indicator, even if a theme
 * or the host site tries to strip outlines. */
.gpa button:focus-visible,
.gpa a:focus-visible,
.gpa input:focus-visible,
.gpa select:focus-visible {
	outline: 3px solid var(--gpa-focus);
	outline-offset: 2px;
}

/* ---- Motion ------------------------------------------------------------
 * Respect the OS "reduce motion" setting (WCAG 2.3.3 / prefers-reduced-motion). */
@media (prefers-reduced-motion: reduce) {
	.gpa *,
	.gpa *::before,
	.gpa *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

.gpa-screen {
	max-width: var(--gpa-max);
	margin: 0 auto;
	padding: 28px 20px 40px;
	animation: gpa-fade .28s ease;
}

@keyframes gpa-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Progress ---------------------------------------------------------- */
.gpa-progress {
	position: relative;
	height: 6px;
	background: var(--gpa-line);
	border-radius: 999px;
	margin-bottom: 32px;
}
.gpa-progress__bar {
	height: 100%;
	background: var(--gpa-accent);
	border-radius: 999px;
	transition: width .35s ease;
}
.gpa-progress__label {
	position: absolute;
	right: 0;
	top: 12px;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gpa-ink-soft);
}

/* ---- Start ------------------------------------------------------------- */
.gpa-logo { display: block; height: 44px; width: auto; margin: 0 auto 28px; }
.gpa-logo--sm { height: 32px; margin-bottom: 18px; }
.gpa-start { text-align: center; padding-top: 48px; }
.gpa-start__headline {
	font-size: clamp(26px, 6vw, 40px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}
.gpa-start__subhead {
	font-size: 18px;
	color: var(--gpa-ink-soft);
	max-width: 520px;
	margin: 0 auto 28px;
}
.gpa-start__micro {
	font-size: 13px;
	color: var(--gpa-ink-soft);
	margin-top: 14px;
}

/* ---- Intro & questions -------------------------------------------------
 * Hierarchy, strongest to weakest:
 *   1. Question      — bold, largest. What you must answer.
 *   2. Category      — bold, accent colour. Which domain you are in.
 *   3. Domain intro  — regular, muted. Context, read once per section.
 * ---------------------------------------------------------------------- */
.gpa-intro__eyebrow,
.gpa-question__eyebrow {
	font-size: clamp(14px, 3.2vw, 15px);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--gpa-accent);
	font-weight: 700;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}
/* Short accent rule so the category reads as a section marker, not a label. */
.gpa-question__eyebrow::after {
	content: "";
	flex: 1;
	height: 2px;
	background: var(--gpa-line);
	border-radius: 2px;
}
.gpa-intro__text {
	font-size: clamp(20px, 4.5vw, 26px);
	line-height: 1.3;
	margin: 0 0 28px;
	font-weight: 500;
}
/* Domain intro, shown above the first question of each domain. */
.gpa-question__intro {
	font-size: clamp(15px, 3vw, 16px);
	line-height: 1.5;
	font-weight: 400;
	color: var(--gpa-ink-soft);
	margin: 0 0 18px;
	padding-left: 14px;
	border-left: 3px solid var(--gpa-line);
}
.gpa-question__text {
	font-size: clamp(20px, 4.2vw, 25px);
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	font-weight: 700;
	text-wrap: balance;
}

/* ---- Options ----------------------------------------------------------- */
.gpa-options { display: flex; flex-direction: column; gap: 10px; }
.gpa-options--binary { flex-direction: row; gap: 12px; }
.gpa-options--binary .gpa-option { flex: 1; text-align: center; }

.gpa-option {
	appearance: none;
	background: var(--gpa-surface);
	border: 1.5px solid var(--gpa-line);
	border-radius: var(--gpa-radius);
	min-height: 52px;          /* comfortably above the 44px touch minimum */
	padding: 15px 18px;
	font-size: 16px;
	font-family: inherit;
	color: var(--gpa-ink);
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .05s;
}
.gpa-option:hover { border-color: var(--gpa-accent); }
.gpa-option:active { transform: scale(.995); }
.gpa-option.is-selected {
	border-color: var(--gpa-accent);
	background: #eef4fa;
	box-shadow: inset 0 0 0 1px var(--gpa-accent);
	font-weight: 600;          /* selection is not signalled by colour alone */
}
.gpa-option--notsure {
	color: var(--gpa-ink-soft);
	font-style: italic;
}

/* ---- Buttons ----------------------------------------------------------- */
.gpa-btn {
	appearance: none;
	display: inline-block;
	border: none;
	border-radius: var(--gpa-radius);
	padding: 14px 26px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s, opacity .15s;
}
.gpa-btn--primary { background: var(--gpa-accent); color: #fff; }
.gpa-btn--primary:hover { background: var(--gpa-accent-d); }
.gpa-btn--primary:disabled { opacity: .6; cursor: default; }
.gpa-btn--lg { padding: 17px 32px; font-size: 17px; }
.gpa-btn--ghost {
	background: transparent;
	color: var(--gpa-accent);
	border: 1.5px solid var(--gpa-line);
}
.gpa-btn--ghost:hover { border-color: var(--gpa-accent); }

.gpa-back {
	display: inline-block;
	margin-top: 22px;
	background: none;
	border: none;
	color: var(--gpa-ink-soft);
	font-size: 14px;
	cursor: pointer;
	padding: 4px 0;
}
.gpa-back:hover { color: var(--gpa-ink); }

/* ---- Capture ----------------------------------------------------------- */
.gpa-capture__heading { font-size: 26px; margin: 0 0 8px; letter-spacing: -0.01em; }
.gpa-capture__subhead { color: var(--gpa-ink-soft); margin: 0 0 26px; }
.gpa-form { display: flex; flex-direction: column; gap: 16px; }
.gpa-field { display: flex; flex-direction: column; gap: 6px; }
/* Conditional "please specify" field revealed by a dropdown choice. The
 * [hidden] rule is explicit because `display: flex` above would otherwise
 * override the browser default for the hidden attribute. */
.gpa-field--other[hidden] { display: none; }
.gpa-field--other {
	padding-left: 12px;
	border-left: 2px solid var(--gpa-line);
	animation: gpa-fade .2s ease;
}
.gpa-field__label { font-size: 14px; font-weight: 600; }
.gpa-field__input {
	border: 1.5px solid var(--gpa-line);
	border-radius: var(--gpa-radius);
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	color: var(--gpa-ink);
	background: #fff;
}
.gpa-field__input:focus { border-color: var(--gpa-accent); }
.gpa-field.has-error .gpa-field__input { border-color: #c0392b; }
.gpa-field__error { color: #c0392b; font-size: 13px; min-height: 0; }
.gpa-field.has-error .gpa-field__error { min-height: 18px; }

.gpa-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--gpa-ink-soft);
	cursor: pointer;
}
.gpa-consent input { margin-top: 3px; }
.gpa-capture__reassurance { font-size: 13px; color: var(--gpa-ink-soft); margin: 4px 0 0; }

/* ---- Results ----------------------------------------------------------- */
.gpa-score { text-align: center; padding: 12px 0 8px; }
.gpa-score__label {
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--gpa-ink-soft); margin: 0 0 8px;
}
.gpa-score__number { font-size: clamp(52px, 15vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.gpa-score__max { font-size: .34em; font-weight: 500; color: var(--gpa-ink-soft); letter-spacing: 0; }
.gpa-score__band { font-size: 20px; font-weight: 600; margin: 8px 0 0; }
.gpa-results__summary {
	text-align: center; font-size: 17px; color: var(--gpa-ink-soft);
	max-width: 520px; margin: 6px auto 34px;
}

/* Chart */
.gpa-chart { border-top: 1px solid var(--gpa-line); padding-top: 26px; }
.gpa-chart__heading, .gpa-gaps__heading {
	font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--gpa-ink-soft); margin: 0 0 18px;
}
.gpa-bars { display: flex; flex-direction: column; gap: 14px; }
.gpa-bar { display: grid; grid-template-columns: 1fr; gap: 5px; }
.gpa-bar__label { font-size: 14px; font-weight: 500; }
.gpa-bar__track { position: relative; height: 12px; background: var(--gpa-line); border-radius: 999px; }
.gpa-bar__fill { height: 100%; border-radius: 999px; transition: width .5s ease; }
.gpa-bar__value { font-size: 13px; color: var(--gpa-ink-soft); }
@media (min-width: 520px) {
	.gpa-bar { grid-template-columns: 160px 1fr 42px; align-items: center; gap: 12px; }
	.gpa-bar__value { text-align: right; }
}

.gpa-chart__table { margin-top: 20px; font-size: 14px; }
.gpa-chart__table summary { cursor: pointer; color: var(--gpa-accent); }
.gpa-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.gpa-table th, .gpa-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gpa-line); }
.gpa-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gpa-ink-soft); }

/* Gaps */
.gpa-gaps { border-top: 1px solid var(--gpa-line); padding-top: 26px; margin-top: 34px; }
.gpa-gap { padding: 14px 0; border-bottom: 1px solid var(--gpa-line); }
.gpa-gap:last-child { border-bottom: none; }
.gpa-gap__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.gpa-gap__name { font-weight: 600; font-size: 16px; }
.gpa-gap__score { font-weight: 700; font-size: 15px; white-space: nowrap; }
.gpa-gap__finding { margin: 6px 0 0; color: var(--gpa-ink-soft); font-size: 15px; }

/* Recommendation */
.gpa-reco {
	margin-top: 34px;
	background: var(--gpa-ink);
	color: #eaf0f6;
	border-radius: 10px;
	padding: 28px 24px;
}
.gpa-reco__heading { font-size: 21px; margin: 0 0 10px; color: #fff; }
.gpa-reco__subhead { font-size: 17px; margin: 16px 0 8px; color: #fff; }
.gpa-reco__intro, .gpa-reco p { color: #c3d0dd; margin: 0 0 12px; }
.gpa-reco__priority { font-size: 18px; font-weight: 600; color: #fff; }
.gpa-reco__stack { font-size: 18px; color: #fff; }
.gpa-reco__products { list-style: none; padding: 0; margin: 14px 0 0; }
.gpa-reco__products li {
	padding: 12px 14px;
	background: rgba(255,255,255,.06);
	border-radius: var(--gpa-radius);
	margin-bottom: 8px;
	font-size: 15px;
	color: #dce5ee;
}
.gpa-reco__products strong { color: #fff; }

/* CTA */
.gpa-cta { text-align: center; margin-top: 30px; }
.gpa-cta .gpa-btn--primary { display: inline-block; }
.gpa-cta__sub { font-size: 13px; color: var(--gpa-ink-soft); margin: 12px 0 20px; }

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

/* ---- Accessibility: focus + reduced motion ---------------------------- */
.gpa button:focus-visible,
.gpa a:focus-visible,
.gpa input:focus-visible,
.gpa select:focus-visible {
	outline: 3px solid var(--gpa-focus);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.gpa-screen, .gpa-progress__bar, .gpa-bar__fill { animation: none; transition: none; }
}

/* ---- Theme isolation ---------------------------------------------------
 * The plugin drops into whatever theme the site runs, and themes style bare
 * <button> and <input> elements with selectors that out-specify a single
 * class. The Global Protect site, for example, paints every button pink
 * (#cc3366) via an Elementor rule, which silently repainted the answer
 * options.
 *
 * These rules are prefixed with #gpa-root so component styling always beats
 * host-theme rules. Values are identical to the component blocks above —
 * this section adds specificity, never new design. Keep the two in sync.
 * ---------------------------------------------------------------------- */
#gpa-root .gpa-option {
	appearance: none;
	-webkit-appearance: none;
	background: var(--gpa-surface);
	border: 1.5px solid var(--gpa-line);
	border-radius: var(--gpa-radius);
	color: var(--gpa-ink);
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	min-height: 52px;
	width: 100%;
	padding: 15px 18px;
	margin: 0;
	box-shadow: none;
	cursor: pointer;
}
#gpa-root .gpa-options--binary .gpa-option { text-align: center; }
#gpa-root .gpa-option:hover { border-color: var(--gpa-accent); background: var(--gpa-surface); color: var(--gpa-ink); }
#gpa-root .gpa-option.is-selected {
	border-color: var(--gpa-accent);
	background: #eef4fa;
	color: var(--gpa-ink);
	box-shadow: inset 0 0 0 1px var(--gpa-accent);
	font-weight: 600;
}
#gpa-root .gpa-option--notsure { color: var(--gpa-ink-soft); font-style: italic; }

#gpa-root .gpa-btn {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
	border-radius: var(--gpa-radius);
	box-shadow: none;
	width: auto;
	cursor: pointer;
}
#gpa-root .gpa-btn--primary { background: var(--gpa-accent); color: #fff; border: none; }
#gpa-root .gpa-btn--primary:hover { background: var(--gpa-accent-d); color: #fff; }
#gpa-root .gpa-btn--ghost { background: transparent; color: var(--gpa-accent); border: 1.5px solid var(--gpa-line); }
#gpa-root .gpa-back {
	background: none;
	border: none;
	color: var(--gpa-ink-soft);
	font-family: inherit;
	font-size: 14px;
	text-transform: none;
	box-shadow: none;
	width: auto;
	padding: 4px 0;
}
#gpa-root .gpa-field__input {
	font-family: inherit;
	font-size: 16px;
	border: 1.5px solid var(--gpa-line);
	border-radius: var(--gpa-radius);
	background: #fff;
	color: var(--gpa-ink);
	box-shadow: none;
	width: 100%;
	padding: 12px 14px;
	margin: 0;
}
#gpa-root .gpa-field.has-error .gpa-field__input { border-color: #c0392b; }