/*
Theme Name: Nutrilite Gut Quiz
Theme URI: https://nutri.test/
Author: Nutrilite Team
Description: WordPress port of the original Nutrilite teammate template, powered by Secure Custom Fields.
Version: 1.1.0
Text Domain: nutrilite-gut-quiz
*/

[hidden] {
	display: none !important;
}

:is(.hero-1, .hero-2, .hero-3, .hero-4, .hero-5, .hero-6) img {
	transition: transform 0.4s ease-out;
}

@media (hover: hover) {
	:is(.hero-1, .hero-2, .hero-3, .hero-4, .hero-5, .hero-6) img:hover {
		transform: scale(1.25);
	}
}

body.admin-bar > header {
	top: 32px;
}

/*
 * The header logos sit above the splash video. The replacement campaign logo
 * is much wider than the original asset, so constrain both dimensions instead
 * of relying on height alone. This keeps the Mac/laptop safe area clear.
 */
body > header .logo-1 img,
body > header .logo-2 img {
	display: block;
	width: auto;
	object-fit: contain;
}

body > header .logo-1 img {
	max-width: 240px;
	max-height: 76px;
}

body > header .logo-2 img {
	max-width: 210px;
	max-height: 30px;
}

@media (min-width: 768px) and (max-height: 900px) {
	body > header {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	body > header .logo-1 img {
		max-width: 210px;
		max-height: 64px;
	}

	body > header .logo-2 img {
		max-width: 190px;
		max-height: 26px;
	}
}

.head-quess .question-block {
	flex: 1 1 auto;
	min-width: 0;
}

.head-quess .question-block .text-note-choose {
	margin-top: 8px;
	padding-left: 40px;
	color: #007441;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

.btn-quesstion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.btn-quesstion.hidden,
.btn-question-prev.hidden,
.btn-question-next.hidden {
	display: none;
}

.btn-question-prev {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 24px;
	border-radius: 999px;
	background: #79b800;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.btn-question-prev span:first-child {
	font-size: 24px;
}

.btn-question-next {
	margin-left: auto;
}

@media (max-width: 1768px) {
	.head-quess .question-block .text-note-choose {
		padding-left: 20px;
	}
}

.result-medal-video {
	display: block;
	margin: 0 auto;
}

/* The mobile result scroller starts 90px below the header. Its relative
 * offset does not contribute to an auto-height section, so reserve the whole
 * screen and clip descendants before translating to the sources screen. */
#nutrilite-quiz-app > .section-result {
	height: 100vh;
	overflow: hidden;
}

/* Background surrounding the medal video. */
.section-result .result-medal-panel {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	padding: 0 !important;
	background-color: #004a2d !important;
}

.section-result .result-medal-panel > .block {
	position: relative;
	width: 100%;
	height: 100%;
}

.section-result .result-medal-panel .hh {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	max-width: none;
	transform: none !important;
}

.section-result .result-medal-panel .result-medal-video {
	width: 88%;
	height: 88%;
	max-height: none;
	object-fit: contain;
	/* Crop the cyan lines encoded at the top and bottom of every HC MP4. */
	clip-path: inset(0.8% 0 0.8% 0);
}

.section-result .result-medal-panel .result-cta {
	position: absolute;
	z-index: 3;
	right: 8%;
	bottom: 6%;
	left: 8%;
}

.result-share-action {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.result-share-cta {
	max-width: 310px;
	margin: 0;
	color: #007441;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.3;
	text-align: right;
}

.text-source .content-single {
	min-width: 0;
	color: #24543b;
	font-size: 16px;
	line-height: 1.7;
	text-align: left;
	overflow-wrap: anywhere;
}

.text-source .content-single ul,
.text-source .content-single ol {
	margin: 0 0 20px;
	padding-left: 24px;
	list-style-position: outside;
}

.text-source .content-single ul {
	list-style-type: disc;
}

.text-source .content-single ol {
	list-style-type: decimal;
}

.text-source .content-single li {
	margin-bottom: 12px;
	padding-left: 4px;
}

.text-source .content-single li::marker {
	color: #007441;
	font-weight: 700;
}

.text-source .content-single li > ul,
.text-source .content-single li > ol {
	margin-top: 12px;
}

.text-source .content-single a {
	color: #007441;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.text-source .content-single a:hover {
	color: #004b2a;
	text-decoration-thickness: 2px;
}

.text-source .content-single a:focus-visible {
	outline: 2px solid #007441;
	outline-offset: 3px;
	border-radius: 2px;
}

.text-source .content-single h2,
.text-source .content-single h3,
.text-source .content-single h4 {
	margin: 24px 0 12px;
	color: #007441;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.4;
}

.text-source .content-single > :first-child {
	margin-top: 0;
}

.text-source .content-single > :last-child,
.text-source .content-single li:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	/* Let result text, video and CTA keep their natural heights inside one
	 * bounded scroller instead of shrinking them into fixed-height grid rows. */
	.section-result > .grid {
		position: absolute;
		top: 90px;
		bottom: 0;
		display: block;
		height: auto;
		max-height: none;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.section-result > .grid > .item,
	.section-result > .grid > .item > .left-result {
		height: auto;
	}

	.section-result > .grid > .result-medal-panel {
		display: block;
	}

	.section-quesstion .scroll-quesstion {
		padding-left: 12px;
		padding-right: 12px;
	}

	.text-source .content-single {
		font-size: 14px;
		line-height: 1.6;
	}

	.text-source .content-single ul,
	.text-source .content-single ol {
		padding-left: 20px;
	}
}

.source-back-button {
	position: absolute;
	right: 32px;
	bottom: 24px;
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: #007441;
	font-size: 14px;
	font-weight: 700;
}

.source-back-button img {
	width: auto;
	max-height: 80px;
	transform: rotate(180deg);
}

@media (max-width: 782px) {
	.section-intro {
		height: 100dvh !important;
	}

	.section-intro > .banner > img {
		height: 100dvh !important;
	}

	.section-intro .intro-content-viewport {
		top: 78px !important;
		height: calc(100dvh - 78px) !important;
		padding-right: 20px !important;
		padding-left: 20px !important;
		overflow: hidden !important;
	}

	body.admin-bar .section-intro .intro-content-viewport {
		top: 124px !important;
		height: calc(100dvh - 124px) !important;
	}

	.section-intro .content-title-main,
	.section-intro .content-title-main > .wrapper {
		height: 100% !important;
		min-height: 0;
	}

	.section-intro .content-title-main > .wrapper {
		display: flex;
		flex-direction: column;
	}

	.section-intro .text-banner {
		flex: 0 0 auto;
		gap: 0 !important;
		padding: 8px 0 0 !important;
	}

	.section-intro .intro-title-art {
		margin-bottom: 8px;
	}

	.section-intro .intro-title-art picture,
	.section-intro .intro-title-art img {
		display: block !important;
		width: auto;
		max-width: 100%;
		max-height: 86px;
	}

	.section-intro .text-banner .desc {
		font-size: 14px;
		line-height: 1.35;
	}

	.section-intro .intro-mascot {
		flex: 0 1 auto;
		width: 52%;
		height: min(42dvh, 300px);
		min-height: 0;
		margin: 14px auto 0;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		overflow: hidden;
	}

	.section-intro .intro-mascot img {
		width: auto !important;
		height: 100%;
		max-height: 100%;
		object-fit: contain;
		object-position: center bottom;
	}

	.section-intro .intro-mobile-action {
		flex: 0 0 auto;
		padding: 6px 0 8px !important;
		text-align: center;
	}

	.section-intro .intro-mobile-action img {
		width: auto;
		max-width: 82vw;
		max-height: 58px;
	}

	body.admin-bar > header {
		top: 46px;
	}

	body > header .logo-1 img {
		max-width: 36vw;
		max-height: 46px;
	}

	body > header .logo-2 img {
		max-width: 38vw;
		max-height: 18px;
	}

	.head-quess .question-block .text-note-choose {
		margin-top: 6px;
		padding-left: 0;
		font-size: 13px;
		text-align: center;
	}

	.btn-question-prev {
		gap: 6px;
		padding: 9px 14px;
		font-size: 12px;
	}

	.btn-question-prev span:first-child {
		font-size: 18px;
	}

	.section-result .result-medal-panel {
		min-height: 0;
		height: auto;
	}

	.section-result .result-medal-panel > .block {
		height: auto;
	}

	.section-result .result-medal-panel .result-medal-video {
		width: 100%;
		height: auto;
		object-position: center top;
	}

	.section-result .result-medal-panel .hh {
		position: relative;
		inset: auto;
		display: block;
		height: auto;
	}

	.section-result .result-medal-panel .result-cta {
		position: relative;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto !important;
		max-width: none !important;
		margin: 10px 16px 24px !important;
		line-height: 1.35;
		text-align: center;
		overflow-wrap: anywhere;
	}

	.result-share-action {
		align-items: center;
	}

	.result-share-cta {
		max-width: 250px;
		font-size: 13px;
		text-align: center;
	}

	.source-back-button {
		right: 16px;
		bottom: 14px;
		font-size: 12px;
	}

	.source-back-button img {
		max-height: 48px;
	}
}