/*
 * Phia EnergyFit - survey page layout.
 * Loaded only on the "EnergyFit Survey" template. The plugin stylesheet owns
 * everything inside #energy-app; this file only provides the page frame and
 * the page title (the plugin expects the theme to style .survey-main-title).
 */

.site-main--survey {
	background: var(--phia-paper);
}

.survey-shell {
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding: 1.5rem var(--phia-gutter) 3rem;
}

/* The plugin stylesheet sets #fit { margin-top: 150px } to clear the old
   sticky header. The kiosk survey has no header by default, so reset it with
   a higher-specificity selector (no !important). */
.site-main--survey #fit {
	margin-top: 0;
}

.survey-content-container {
	text-align: center;
}

#energy-app .survey-main-title {
	margin: 0 0 1.5rem;
	font-family: var(--phia-font);
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	color: var(--phia-gold); /* large text */
}

.survey-inner {
	width: 100%;
}

.survey-notice {
	max-width: 32rem;
	margin: 2rem auto;
	color: var(--phia-ink-soft);
}

@media (min-width: 768px) {
	.survey-shell {
		padding-top: 2.5rem;
	}

	#energy-app .survey-main-title {
		margin-bottom: 2.5rem;
		font-size: 3rem;
	}
}