/* Posh Fall Mystery. Structure only. Visual design is Andrew's. */

/*
 * Fixed backdrop layer. The wallpaper is a single image, not a tile, so it
 * never repeats. A fixed layer is used rather than background-attachment fixed,
 * which is unreliable on iOS Safari. The background-color matches the black the
 * JPEG fallback was composited onto, so the WebP and JPEG render identically
 * even though only the WebP carries an alpha channel.
 */
.posh-fm__bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: #000000;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	pointer-events: none;
}

.posh-fm {
	position: relative;
	z-index: 0;
	padding: 48px 16px 96px;
	min-height: 70vh;
}

.posh-fm__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
}

.posh-fm__intro,
.posh-fm__clue {
	margin: 0 0 48px;
	text-align: center;
}

.posh-fm__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}

.posh-fm__copy,
.posh-fm__clue-body {
	max-width: 640px;
	margin: 20px auto 0;
	text-align: center;
}

.posh-fm__pending {
	text-align: center;
	margin-top: 40px;
}

/* Parchment panel. Used for FAQ and any other text block on this page. */

.posh-fm .posh-fm-panel {
	background-color: #d6c8a9;
	color: #38271b;
	border-radius: 14px;
	padding: 32px 36px;
	max-width: 720px;
	margin: 0 auto 48px;
	text-align: left;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.posh-fm .posh-fm-panel,
.posh-fm .posh-fm-panel p,
.posh-fm .posh-fm-panel li,
.posh-fm .posh-fm-panel strong,
.posh-fm .posh-fm-panel em,
.posh-fm .posh-fm-panel h1,
.posh-fm .posh-fm-panel h2,
.posh-fm .posh-fm-panel h3,
.posh-fm .posh-fm-panel h4,
.posh-fm .posh-fm-panel h5,
.posh-fm .posh-fm-panel h6 {
	color: #38271b;
	font-family: 'Poppins', sans-serif;
}

.posh-fm .posh-fm-panel a {
	color: #38271b;
	text-decoration: underline;
}

.posh-fm .posh-fm-panel a:hover,
.posh-fm .posh-fm-panel a:focus {
	opacity: 0.75;
}

.posh-fm .posh-fm-panel__title {
	margin: 0 0 16px;
	text-align: center;
}

.posh-fm .posh-fm-panel > *:first-child {
	margin-top: 0;
}

.posh-fm .posh-fm-panel > *:last-child {
	margin-bottom: 0;
}

/* Text blocks that borrow the parchment panel. The panel class is added in the
 * template so these match the posh_panel shortcode exactly. */

.posh-fm .posh-fm__clue-body,
.posh-fm .posh-fm__pending {
	margin-top: 20px;
}

.posh-fm .posh-fm__clue-body {
	margin-bottom: 0;
}

.posh-fm .posh-fm__pending {
	text-align: center;
}

@media (max-width: 600px) {
	.posh-fm {
		padding: 24px 12px 64px;
	}
	.posh-fm__intro,
	.posh-fm__clue {
		margin-bottom: 32px;
	}
	.posh-fm .posh-fm-panel {
		padding: 24px 22px;
		border-radius: 12px;
		margin-bottom: 32px;
	}
}