/* Evolution Questionnaire campaign overrides — build 1.11.2
 * Loaded after frontend-gradient.css with a separate WordPress handle.
 */

@font-face {
	font-family: "EVQ Montserrat";
	src: local("Montserrat Italic"), local("Montserrat-Italic"),
		url("./fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
}

/* The supplied Didot file is a TTC collection. Browser support varies, so
 * the local Didot name is tried first and Bodoni Moda remains the web fallback.
 */
@font-face {
	font-family: "EVQ Didot";
	src: local("Didot Bold"), local("Didot-Bold"), local("Didot"),
		url("./fonts/Didot.ttc") format("collection");
	font-style: normal;
	font-weight: 700;
	font-display: swap;
}

body .cq-gradient-shell {
	--evq-yellow: #fefd01;
	--evq-purple: #291749;
	--evq-white: #ffffff;
	--evq-heading: "EVQ Didot", Didot, "Bodoni Moda", "Bodoni 72", "Bodoni MT", serif;
	--evq-copy: "EVQ Montserrat", Montserrat, Arial, sans-serif;
	background-color: #b40047 !important;
	background-image: none !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	font-family: var(--evq-copy) !important;
	font-style: italic;
	font-weight: 400;
}

body .cq-gradient-shell::before {
	content: "" !important;
	position: fixed !important;
	inset: 0 !important;
	z-index: 0 !important;
	background-color: transparent !important;
	background-image:
		linear-gradient(180deg, rgba(41, 23, 73, 0.01), rgba(41, 23, 73, 0.18)),
		url("./evolution-background.png") !important;
	background-position: center bottom !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	pointer-events: none !important;
}

body .cq-gradient-shell::after,
body .cq-gradient-shell__blobs,
body .cq-gradient-shell__blob,
body .cq-gradient-shell__interactive {
	display: none !important;
	animation: none !important;
}

/* Semantic typography: the copy may change, but the element role determines
 * the font treatment. */
body .cq-gradient-shell .cq-main-screen__heading,
body .cq-gradient-shell .cq-final-screen__heading,
body .cq-gradient-shell .cq-thank-screen__heading,
body .cq-gradient-shell .cq-millionaire-question-bar,
body .cq-gradient-shell .cq-main-screen__text h1,
body .cq-gradient-shell .cq-main-screen__text h2,
body .cq-gradient-shell .cq-final-screen__text h1,
body .cq-gradient-shell .cq-final-screen__text h2,
body .cq-gradient-shell .cq-thank-screen__text h1,
body .cq-gradient-shell .cq-thank-screen__text h2 {
	font-family: var(--evq-heading) !important;
	font-style: normal !important;
	font-weight: 700 !important;
	color: var(--evq-yellow) !important;
	letter-spacing: -0.025em !important;
	text-shadow: 0 3px 18px rgba(41, 23, 73, 0.46) !important;
}

body .cq-gradient-shell .cq-question-card__subtitle,
body .cq-gradient-shell .cq-millionaire-answer__title,
body .cq-gradient-shell .cq-final-screen__label,
body .cq-gradient-shell .cq-main-screen__btn,
body .cq-gradient-shell .cq-questionnaire__nav,
body .cq-gradient-shell :is(h3, h4, h5, h6, strong, b) {
	font-family: var(--evq-copy) !important;
	font-style: italic !important;
	font-weight: 600 !important;
}

body .cq-gradient-shell .cq-main-screen__text,
body .cq-gradient-shell .cq-final-screen__text,
body .cq-gradient-shell .cq-thank-screen__text,
body .cq-gradient-shell .cq-millionaire-answer__text,
body .cq-gradient-shell .cq-millionaire-answer__meta,
body .cq-gradient-shell .cq-questionnaire__eyebrow,
body .cq-gradient-shell .cq-question-card__eyebrow,
body .cq-gradient-shell .cq-questionnaire__progress-copy,
body .cq-gradient-shell .cq-question-card__footer-progress-title,
body .cq-gradient-shell .cq-question-card__footer-progress-label,
body .cq-gradient-shell .cq-final-screen__check,
body .cq-gradient-shell .cq-questions-screen__alert,
body .cq-gradient-shell .cq-final-screen__error {
	font-family: var(--evq-copy) !important;
	font-style: italic !important;
	font-weight: 400 !important;
}

body .cq-gradient-shell .cq-millionaire-answer__letter,
body .cq-gradient-shell .cq-xp-burst__icon {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
	font-style: normal !important;
	font-weight: 400 !important;
}

/* Artwork-friendly glass panels. */
body .cq-gradient-shell .cq-main-screen__card,
body .cq-gradient-shell .cq-final-screen__card,
body .cq-gradient-shell .cq-thank-screen__card,
body .cq-gradient-shell .cq-question-card__header {
	background: linear-gradient(180deg, rgba(41, 23, 73, 0.42), rgba(41, 23, 73, 0.22)) !important;
	border-color: rgba(255, 255, 255, 0.48) !important;
	box-shadow: 0 28px 64px rgba(22, 7, 36, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

/* Buttons and answer cards: #291749 at 60%, white-to-yellow 1px stroke. */
body .cq-gradient-shell .cq-main-screen__btn,
body .cq-gradient-shell .cq-questionnaire__nav,
body .cq-gradient-shell .cq-millionaire-answer__label {
	color: var(--evq-white) !important;
	border: 1px solid transparent !important;
	background:
		linear-gradient(rgba(41, 23, 73, 0.60), rgba(41, 23, 73, 0.60)) padding-box,
		linear-gradient(105deg, var(--evq-white), var(--evq-yellow)) border-box !important;
	box-shadow: 0 16px 38px rgba(20, 6, 34, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body .cq-gradient-shell .cq-main-screen__btn:hover,
body .cq-gradient-shell .cq-main-screen__btn:focus,
body .cq-gradient-shell .cq-questionnaire__nav:hover:not(:disabled),
body .cq-gradient-shell .cq-questionnaire__nav:focus-visible:not(:disabled),
body .cq-gradient-shell .cq-millionaire-answer__label:hover,
body .cq-gradient-shell .cq-millionaire-answer__input:checked + .cq-millionaire-answer__label {
	background:
		linear-gradient(rgba(41, 23, 73, 0.78), rgba(41, 23, 73, 0.78)) padding-box,
		linear-gradient(105deg, var(--evq-white), var(--evq-yellow)) border-box !important;
	border-color: transparent !important;
}

body .cq-gradient-shell .cq-millionaire-answer__input:checked + .cq-millionaire-answer__label {
	box-shadow: 0 18px 42px rgba(20, 6, 34, 0.40), 0 0 0 2px rgba(254, 253, 1, 0.20) !important;
}

body .cq-gradient-shell .cq-millionaire-answer__input:checked + .cq-millionaire-answer__label .cq-millionaire-answer__check {
	border-color: var(--evq-yellow) !important;
	background-color: var(--evq-yellow) !important;
}

/* Final form fields: white at 15% with white 1px stroke. */
body .cq-gradient-shell .cq-final-screen__input {
	font-family: var(--evq-copy) !important;
	font-style: italic !important;
	color: var(--evq-white) !important;
	background: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(255, 255, 255, 0.95) !important;
	box-shadow: none !important;
}

body .cq-gradient-shell .cq-final-screen__input:focus {
	border-color: var(--evq-yellow) !important;
	box-shadow: 0 0 0 3px rgba(254, 253, 1, 0.17) !important;
}

body .cq-gradient-shell .cq-questionnaire__progress-fill,
body .cq-gradient-shell .cq-question-card__footer-progress-fill {
	background: linear-gradient(90deg, var(--evq-yellow), #ffffff) !important;
}

body .cq-gradient-shell .cq-xp-burst__score {
	font-family: var(--evq-copy) !important;
	font-style: italic !important;
	font-weight: 600 !important;
	color: var(--evq-yellow) !important;
}

/* Hidden screens must not reserve height. */
body .cq-gradient-shell [hidden] {
	display: none !important;
}

@media (max-width: 900px) {
	body .cq-gradient-shell,
	body .cq-gradient-shell::before {
		background-attachment: scroll !important;
		background-position: center bottom !important;
	}
}


/* Build 1.11.1: one visual card for the optional subscription consent.
 * The previous outer wrapper and inner label both had glass styling, which
 * created the unnecessary double box shown in testing. */
body .cq-gradient-shell .cq-final-screen__field--marketing {
	margin-top: 0.2rem !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* The artwork remains full-bleed. Desktop prioritizes the upper yellow/orange
 * gradient; tablets keep the dunes visible lower in the composition. */
body .cq-gradient-shell::before {
	background-color: #b40047 !important;
	background-size: cover !important;
}

@media (min-width: 1200px) {
	body .cq-gradient-shell::before {
		background-size: cover !important;
		background-position: center top !important;
	}
}

/* Tablet-first layout. */
@media (min-width: 768px) and (max-width: 1199px) {
	body .cq-gradient-shell__content {
		padding-left: clamp(1.5rem, 4vw, 3.5rem) !important;
		padding-right: clamp(1.5rem, 4vw, 3.5rem) !important;
	}

	body .cq-gradient-shell .cq-question-card,
	body .cq-gradient-shell .cq-final-screen__card,
	body .cq-gradient-shell .cq-main-screen__card,
	body .cq-gradient-shell .cq-thank-screen__card {
		width: min(100%, 920px) !important;
	}
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
	body .cq-gradient-shell::before {
		background-size: cover !important;
		background-position: center 62% !important;
	}
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
	body .cq-gradient-shell::before {
		background-size: cover !important;
		background-position: center bottom !important;
	}
}

@media (max-width: 767px) {
	body .cq-gradient-shell::before {
		background-size: cover !important;
		background-position: center bottom !important;
	}
}

/* Build 1.11.7: prevent delayed mobile taps from selecting an answer during the intro transition. */
.cq-questions-screen--input-locked .cq-millionaire-answers {
	pointer-events: none !important;
}


/* Build 1.11.9: standalone progress indicators must not inherit the
 * question-round entrance state (opacity: 0 / translateY). */
body .cq-gradient-shell .cq-final-screen .cq-question-card__footer-progress--form,
body .cq-gradient-shell .cq-thank-screen .cq-question-card__footer-progress--thank {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	animation: none !important;
}

/* Build 1.12.1: mobile-only progress layout correction.
 * In the stacked mobile layout, flex: 1 on the track changes from horizontal
 * width growth to vertical height growth and can collapse the 10px track.
 * Keep the desktop/tablet layout untouched and give mobile tracks an explicit
 * width and height, while centering the percentage labels. */
@media (max-width: 759px) {
	body .cq-gradient-shell .cq-question-card__footer-progress {
		align-items: center !important;
		gap: 0.65rem !important;
	}

	body .cq-gradient-shell .cq-question-card__footer-progress-title,
	body .cq-gradient-shell .cq-question-card__footer-progress-label {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
	}

	body .cq-gradient-shell .cq-question-card__footer-progress-bar {
		display: block !important;
		flex: 0 0 10px !important;
		width: 100% !important;
		height: 10px !important;
		min-height: 10px !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	body .cq-gradient-shell .cq-question-card__footer-progress-fill {
		display: block !important;
		height: 10px !important;
		min-height: 10px !important;
	}
}