/**
 * FUNKHEAD Quiz Engine - shared stylesheet
 * ---------------------------------------------------------------------
 * Used by every quiz (Depression, Anxiety, ADHD, Stress, Autism...).
 * Only the CONTENT differs per quiz (via config); this file never needs
 * to change when a new quiz is added.
 *
 * Colours below are matched by eye to the existing FUNKHEAD Anxiety Quiz
 * for visual consistency. If you have exact brand hex codes, update the
 * variables in :root and every quiz updates automatically.
 * ---------------------------------------------------------------------
 */

.fqe-quiz {
	--fqe-font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--fqe-font-body: 'Lexend', 'Helvetica Neue', Arial, sans-serif;

	/* Calm FUNKHEAD indigo/navy + soft blue palette */
	--fqe-navy: #2b2660;
	--fqe-navy-soft: #3c3878;
	--fqe-blue: #3b4fcb;
	--fqe-blue-light: #eaf2fb;
	--fqe-blue-selected: #d7e6f5;
	--fqe-blue-selected-border: #3b6fd6;
	--fqe-lavender: #dcd6f5;
	--fqe-peach: #fbe9e3;
	--fqe-peach-border: #e2a37c;
	--fqe-red: #fdecec;
	--fqe-red-border: #d64545;
	--fqe-red-text: #9a2323;
	--fqe-border: #e2e5ec;
	--fqe-text: #33334a;
	--fqe-text-muted: #6b6b85;
	--fqe-radius: 16px;
	--fqe-radius-sm: 10px;
	--fqe-shadow: 0 10px 30px rgba(43, 38, 96, 0.08);

	max-width: 700px;
	margin: 0 auto;
	font-family: var(--fqe-font-body);
	color: var(--fqe-text);
	-webkit-font-smoothing: antialiased;
}

.fqe-quiz *,
.fqe-quiz *::before,
.fqe-quiz *::after {
	box-sizing: border-box;
}

.fqe-screen {
	background: #fff;
	border-radius: var(--fqe-radius);
	box-shadow: var(--fqe-shadow);
	padding: 32px 36px 28px;
	position: relative;
}

@media (max-width: 600px) {
	.fqe-screen {
		padding: 24px 20px 20px;
		border-radius: 12px;
	}
}

/* ---------------------------------------------------------------------
   Header row: eyebrow label (top-left) + badge pill (top-right)
   ------------------------------------------------------------------- */
.fqe-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.fqe-eyebrow {
	font-family: var(--fqe-font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fqe-navy);
	margin: 0;
}

.fqe-badge {
	display: inline-block;
	background: var(--fqe-blue-light);
	color: var(--fqe-navy);
	font-family: var(--fqe-font-heading);
	font-weight: 600;
	font-size: 13px;
	padding: 7px 16px;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Headings & body copy
   ------------------------------------------------------------------- */
.fqe-h1 {
	font-family: var(--fqe-font-heading);
	font-weight: 800;
	font-size: 34px;
	line-height: 1.15;
	color: var(--fqe-navy);
	margin: 0 0 18px;
}

@media (max-width: 600px) {
	.fqe-h1 { font-size: 26px; }
}

.fqe-h3 {
	font-family: var(--fqe-font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--fqe-navy);
	margin: 28px 0 10px;
}

.fqe-progress-label {
	font-family: var(--fqe-font-heading);
	font-weight: 600;
	font-size: 13px;
	color: var(--fqe-blue);
	margin: 0 0 6px;
}

.fqe-prompt {
	font-size: 15px;
	color: var(--fqe-text-muted);
	margin: 0 0 20px;
}

.fqe-p {
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0 0 14px;
}

/* ---------------------------------------------------------------------
   Intro screen
   ------------------------------------------------------------------- */
.fqe-info-box {
	background: var(--fqe-blue-light);
	border-left: 4px solid var(--fqe-blue);
	border-radius: var(--fqe-radius-sm);
	padding: 14px 18px;
	font-weight: 600;
	color: var(--fqe-navy);
	margin-bottom: 24px;
}

.fqe-btn {
	font-family: var(--fqe-font-heading);
	font-weight: 700;
	font-size: 15px;
	border: none;
	border-radius: 10px;
	padding: 14px 26px;
	cursor: pointer;
	background: var(--fqe-navy);
	color: #fff;
	transition: transform 0.15s ease, background 0.15s ease;
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

.fqe-btn:hover,
.fqe-btn:focus-visible {
	background: var(--fqe-navy-soft);
	transform: translateY(-1px);
}

.fqe-btn--block {
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------------------
   Question screen: answer options, progress bar, back link
   ------------------------------------------------------------------- */
.fqe-options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

.fqe-option {
	display: block;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1.5px solid var(--fqe-border);
	border-radius: var(--fqe-radius-sm);
	padding: 15px 18px;
	font-family: var(--fqe-font-body);
	font-size: 15.5px;
	color: var(--fqe-text);
	cursor: pointer;
	min-height: 44px;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.fqe-option:hover {
	border-color: var(--fqe-blue-selected-border);
}

.fqe-option:focus-visible {
	outline: 2px solid var(--fqe-blue);
	outline-offset: 2px;
}

.fqe-option.is-selected {
	background: var(--fqe-blue-selected);
	border-color: var(--fqe-blue-selected-border);
	font-weight: 700;
	color: var(--fqe-navy);
}

.fqe-progress-track {
	background: #e6e8ef;
	border-radius: 999px;
	height: 8px;
	width: 100%;
	overflow: hidden;
	margin-bottom: 18px;
}

.fqe-progress-fill {
	background: var(--fqe-blue);
	height: 100%;
	border-radius: 999px;
	transition: width 0.35s ease;
}

.fqe-nav-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.fqe-link {
	font-family: var(--fqe-font-body);
	font-size: 14px;
	color: var(--fqe-navy);
	text-decoration: underline;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* Smooth transition between questions */
.fqe-fade-enter {
	opacity: 0;
	transform: translateY(6px);
}
.fqe-fade-enter-active {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ---------------------------------------------------------------------
   Results screen
   ------------------------------------------------------------------- */
.fqe-score-pill {
	display: inline-block;
	background: var(--fqe-lavender);
	color: var(--fqe-navy);
	font-family: var(--fqe-font-heading);
	font-weight: 700;
	font-size: 14px;
	padding: 8px 18px;
	border-radius: 999px;
	margin-bottom: 20px;
}

.fqe-box {
	border-radius: var(--fqe-radius-sm);
	padding: 18px 20px;
	margin-bottom: 18px;
	font-size: 15px;
	line-height: 1.6;
}

.fqe-box--info {
	background: var(--fqe-blue-light);
	border-left: 4px solid var(--fqe-blue);
}

.fqe-box--warning {
	background: var(--fqe-peach);
	border-left: 4px solid var(--fqe-peach-border);
}

.fqe-box--emergency {
	background: var(--fqe-red);
	border-left: 4px solid var(--fqe-red-border);
	color: var(--fqe-red-text);
}

.fqe-box strong {
	color: inherit;
}

.fqe-box--emergency .fqe-h3 {
	color: var(--fqe-red-text);
	margin-top: 0;
}

.fqe-emergency-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.fqe-emergency-list li {
	margin-bottom: 8px;
}

.fqe-emergency-list strong {
	display: block;
}

.fqe-cta-wrap {
	margin: 24px 0;
	text-align: center;
}

/* Email-capture card (wraps the real, embedded Fluent Form) */
.fqe-capture-form {
	background: var(--fqe-blue-light);
	border-radius: var(--fqe-radius);
	padding: 26px 24px 20px;
	margin-top: 8px;
}

.fqe-capture-form .fqe-h3,
.fqe-capture-form .fqe-capture-subheading {
	text-align: center;
}

.fqe-capture-subheading {
	font-size: 14px;
	color: var(--fqe-blue);
	max-width: 480px;
	margin: 0 auto 18px;
	line-height: 1.5;
}

/* Loosely restyle Fluent Forms' own markup so it matches the card without
   fighting its internal classes - deliberately low-specificity so future
   Fluent Forms updates don't get visually broken by this plugin. */
.fqe-capture-form form.frm-fluent-form input[type="text"],
.fqe-capture-form form.frm-fluent-form input[type="email"] {
	font-family: var(--fqe-font-body);
	border: 1.5px solid var(--fqe-border);
	border-radius: 8px;
	padding: 12px 14px;
	width: 100%;
	background: #fff;
}

.fqe-capture-form form.frm-fluent-form button[type="submit"],
.fqe-capture-form form.frm-fluent-form input[type="submit"] {
	font-family: var(--fqe-font-heading);
	font-weight: 700;
	background: var(--fqe-navy);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px 20px;
	width: 100%;
	cursor: pointer;
}

.fqe-footer-links {
	display: flex;
	justify-content: space-between;
	margin-top: 22px;
}

/* Fluent Forms' own hidden-field inputs never need visual styling -
   type="hidden" is invisible by definition, no extra CSS required. */