/* Trivia Flashcards — page wrapper.
 * Sits inside the active theme (header/footer rendered by the template) but
 * BREAKS OUT of the theme's constrained/offset content column to span the full
 * viewport width (full-bleed), then re-centres its own inner content.
 * Clean monochrome: white surfaces, black accents, dark text.
 */

/* Border-box for the whole wrapper so padding never causes overflow
 * (this wrapper lives OUTSIDE .tflash-app, so it needs its own reset). */
.tflash-page,
.tflash-page *,
.tflash-page *:before,
.tflash-page *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.tflash-page {
	/* Full-bleed (WordPress alignfull technique): escape the theme content
	 * column and fill the viewport width WITHOUT triggering horizontal scroll. */
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 50px 20px 64px;
	background: #ffffff;
}

.tflash-page-inner {
	width: 94%;
	max-width: 1280px;
	margin: 0 auto;
}

.tflash-page-head {
	text-align: center;
	margin-bottom: 32px;
}

.tflash-page-head:before {
	content: "EXAM PREP";
	display: inline-block;
	font-family: "Hanken Grotesk", -apple-system, Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	color: #8a8a8a;
	margin-bottom: 14px;
}

.tflash-page-title {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-size: 46px;
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 12px;
	color: #111111;
}

.tflash-page-sub {
	font-family: "Hanken Grotesk", -apple-system, Helvetica, Arial, sans-serif;
	font-size: 18px;
	color: #5f5f5f;
	max-width: 620px;
	margin: 0 auto;
	line-height: 1.55;
}

/* On the landing, let the app fill the full content width so option grids,
 * match tiles and the terms list have room to breathe. */
.tflash-page .tflash-app {
	max-width: 100%;
	margin-top: 6px;
}

@media (max-width: 782px) {
	.tflash-page-inner { width: 100%; }
}

@media (max-width: 600px) {
	.tflash-page {
		padding: 26px 0 40px;        /* edge-to-edge on phones */
	}
	.tflash-page-inner { width: 100%; padding: 0 12px; }
	.tflash-page-head { margin-bottom: 22px; }
	.tflash-page-head:before { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 10px; }
	.tflash-page-title { font-size: 29px; }
	.tflash-page-sub { font-size: 15.5px; padding: 0 6px; }
}