/* /pi-theme/assets/css/front-page.css */

/* Front Page Layout */
.site-main .container .post-front-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--pi-space-lg);
}

.post-front-page .entry-header {
	text-align: center;
	margin-bottom: var(--pi-space-xl);
}

.post-front-page .entry-title {
	font-size: var(--pi-h1);
	color: var(--pi-color-text);
	margin: 0;
	font-weight: bold;
}

.post-front-page .entry-content {
	color: var(--pi-color-text);
	line-height: var(--pi-line-height);
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* Showcase Section */
.showcase {
	background: var(--pi-color-bg);
	margin: var(--pi-space-xl) 0;
	overflow: hidden;
}

.showcase canvas {
	display: block;
	margin: 0 auto;
}

#instructions {
	background: var(--pi-color-panel);
	color: var(--pi-color-text);
	padding: var(--pi-space-md);
	margin: var(--pi-space-md) 0;
	font-family: var(--pi-font-family);
	text-align: center;
}

/* Logo Styling */
.post-front-page .entry-content img.aligncenter {
	width: 300px;
	height: 300px;
	image-rendering: pixelated;
}

/* CTA Button Styling */
.post-front-page .btn-cta {
	width: 210px;
}

/* Showcase Section Override */
.post-front-page .showcase {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 600px;
}

/* Canvas Styling */
.post-front-page .showcase canvas {
	background-color: black;
	position: static;
	image-rendering: pixelated;
	width: 900px;
	height: 600px;
	margin-left: 83px;
	margin-top: 0px;
}

/* Text Center Utility */
.text-center {
	text-align: center;
}

/* Subtitle Color Classes */
.subtitle-retro {
	color: var(--pi-accent-light-red);
}

.subtitle-js {
	color: var(--pi-accent-blue);
}

/* Responsive Design */
@media (max-width: 768px) {
	.post-front-page {
		padding: var(--pi-space-md);
	}

	.showcase canvas {
		width: 100% !important;
		height: auto !important;
		margin-left: 0 !important;
	}
}