/* ============================================================
   SLIMESTRONAUTS: BURST STRIKE - TEMP C64 SKIN
   Placeholder look until final game visuals are done.
   To revert: in includes/header.php swap c64.css back to style.css
   ============================================================ */

@font-face {
	font-family: 'C64';
	src: url('../C64/c64.TTF') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	/* C64 PALETTE */
	--c64-frame: #a4a3ff;
	--c64-screen: #4140e4;
	--c64-dark: #2828b9;
	--c64-grey: #a4a4a4;
	--c64-white: #ffffff;

	--c64-slime-grn: #007823;
	--c64-slime-org: #d0551a;
	--c64-slime-pnk: #ff2e79;

	/* --c64-slime-grn:  #9ae29b;
  --c64-slime-org:  #e0a060;
  --c64-slime-pnk:    #ff7777; */

	/* LEGACY VARS (used by inline styles in pages) */
	--green: var(--c64-white);
	--orange: var(--c64-slime-org);
	--pink: var(--c64-slime-pnk);
	--green-bright: var(--c64-white);
	--orange-bright: #ffc890;
	--green-muted: var(--c64-frame);
	--green-dim: var(--c64-frame);
	--green-border: var(--c64-frame);
	--green-nav: var(--c64-frame);
	--bg: var(--c64-screen);

	--font: 'C64', monospace;
	--frame: 48px;
}

/* BASE -------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	background: var(--c64-frame);
}

body {
	min-height: 100vh;
	background: var(--c64-screen);
	border: var(--frame) solid var(--c64-frame);
	color: var(--c64-frame);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	text-transform: uppercase;
	overflow-x: hidden;
}

button,
input {
	font-family: var(--font);
	text-transform: uppercase;
}

a {
	color: inherit;
	text-decoration: none;
}

:focus-visible {
	outline: 4px solid var(--c64-white);
	outline-offset: 2px;
}

/* HIDE OLD EFFECTS -------------------------------------------- */

#stars {
	display: none;
}
body::after {
	content: none;
}

/* LAYOUT ------------------------------------------------------ */

.site-wrap {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 24px;
}

/* NAV --------------------------------------------------------- */

.site-nav {
	border-bottom: 4px solid var(--c64-frame);
	padding: 16px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.nav-brand {
	display: flex;
	align-items: center;
}

.nav-logo {
	display: block;
	height: 32px;
	width: auto;
	image-rendering: pixelated;
}

.nav-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.nav-links > a {
	color: var(--c64-frame);
	padding: 4px 8px;
}

.nav-links > a:hover,
.nav-links > a[aria-current='page'] {
	background: var(--c64-frame);
	color: var(--c64-screen);
}

.nav-links a.nav-steam {
	color: var(--c64-slime-org);
}
.nav-links a.nav-steam:hover {
	background: var(--c64-slime-org);
	color: var(--c64-screen);
}

/* HERO -------------------------------------------------------- */

.hero {
	padding: 48px 0 32px;
	text-align: center;
}

.hero::before {
	content: '**** SLIMESTRONAUTS SLIME_OS V0.7 ****';
	display: block;
	color: var(--c64-frame);
	margin-bottom: 32px;
}

.hero-title {
	font-size: 48px;
	line-height: 1.2;
	font-weight: normal;
	color: var(--c64-white);
	margin-bottom: 8px;
}

.hero-sub {
	font-size: 24px;
	line-height: 1.3;
	font-weight: normal;
	color: var(--c64-slime-pnk);
	margin-bottom: 24px;
}

.hero-tagline {
	color: var(--c64-slime-grn);
	margin-bottom: 32px;
}

.hero-ctas {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.hero-meta {
	color: var(--c64-frame);
}

/* "READY." PROMPT WITH BLINKING BLOCK CURSOR BENEATH */
@keyframes c64-blink {
	50% {
		background-size: 0 0;
	}
}

.hero::after {
	content: 'ARE YOU READY?';
	display: block;
	text-align: left;
	margin-top: 32px;
	padding-bottom: 24px;
	color: var(--c64-frame);
	background: linear-gradient(var(--c64-frame), var(--c64-frame)) left bottom / 16px 16px no-repeat;
	animation: c64-blink 1s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.hero::after {
		animation: none;
	}
}

/* BUTTONS ----------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 8px 16px;
	font-family: var(--font);
	border: 4px solid var(--c64-dark);
	background: var(--c64-grey);
	color: var(--c64-dark);
	cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
	background: var(--c64-white);
	color: #000;
}

.btn-orange {
	background: var(--c64-slime-org);
}
.btn-green {
	background: var(--c64-slime-grn);
}

/* CONTENT GRID ------------------------------------------------ */

.content-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 4px solid var(--c64-frame);
}

.content-col {
	padding: 24px 0;
}

.content-col + .content-col {
	border-left: 4px solid var(--c64-frame);
	padding-left: 24px;
}

/* PAGE SECTIONS ----------------------------------------------- */

.page-section {
	padding: 32px 0;
	border-top: 4px solid var(--c64-frame);
}

/* SECTION LABEL ----------------------------------------------- */

.section-label {
	font-size: 24px;
	line-height: 1.3;
	color: var(--c64-white);
	margin-bottom: 16px;
}

/* BODY TEXT --------------------------------------------------- */

.body-text {
	color: var(--c64-frame);
	line-height: 1.75;
	margin-bottom: 16px;
}

/* SLIME TAGS -------------------------------------------------- */

.slime-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tag {
	font-family: var(--font);
	font-size: 16px;
	color: var(--c64-dark);
	padding: 4px 8px;
}

.tag-green {
	background: var(--c64-slime-grn);
}
.tag-orange {
	background: var(--c64-slime-org);
}
.tag-pink {
	background: var(--c64-slime-pnk);
}
.tag-light {
	background: var(--c64-frame);
}

/* LOG / NEWS ENTRIES ------------------------------------------ */

.log-entry {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 4px dashed var(--c64-frame);
}

.log-entry:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.log-date {
	color: var(--c64-white);
	margin-bottom: 8px;
}

.log-title {
	display: block;
	color: var(--c64-white);
	margin-bottom: 8px;
}

.log-summary,
.log-body {
	color: var(--c64-frame);
	line-height: 1.75;
}

.log-body a {
	color: var(--c64-white);
	text-decoration: underline;
}

.all-news-link {
	display: inline-block;
	margin-top: 16px;
	color: var(--c64-white);
}

.all-news-link:hover {
	background: var(--c64-white);
	color: var(--c64-screen);
}

/* FOOTER ------------------------------------------------------ */

.site-footer {
	border-top: 4px solid var(--c64-frame);
	padding: 16px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.footer-text {
	color: var(--c64-frame);
}
.site-footer a:hover {
	color: var(--c64-white);
	text-decoration: underline;
}

/* TXT */
.txt-wht {
	color: var(--c64-white);
}

/* HAMBURGER BUTTON -------------------------------------------- */

.nav-mobile-btn,
.nav-overlay-close {
	background: var(--c64-grey);
	border: 4px solid var(--c64-dark);
	color: var(--c64-dark);
	font-size: 20px;
	padding: 4px 12px;
	line-height: 1;
	cursor: pointer;
}

.nav-mobile-btn {
	display: none;
}

.nav-mobile-btn:hover,
.nav-overlay-close:hover {
	background: var(--c64-white);
	color: #000;
}

/* MOBILE OVERLAY ---------------------------------------------- */

.nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--c64-screen);
	border: 12px solid var(--c64-frame);
	z-index: 200;
	flex-direction: column;
	padding: 16px 20px 40px;
	overflow-y: auto;
}

.nav-overlay.is-open {
	display: flex;
}

.nav-overlay-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32px;
}

.nav-overlay-brand {
	display: flex;
	align-items: center;
}

.nav-overlay-group a {
	display: block;
	font-size: 24px;
	line-height: 1.3;
	color: var(--c64-frame);
	padding: 12px 8px;
	border-bottom: 4px solid var(--c64-frame);
}

.nav-overlay-group a:hover,
.nav-overlay-group a[aria-current='page'] {
	background: var(--c64-frame);
	color: var(--c64-screen);
}

.nav-overlay-group a.nav-steam {
	color: var(--c64-slime-org);
}

/* ABOUT PAGE -------------------------------------------------- */

.about-figure {
	margin: 0 0 16px;
}

.about-figure img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	image-rendering: pixelated;
	border: 4px solid var(--c64-frame);
	background: var(--c64-dark);
}

.about-ph-note {
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--c64-slime-grn);
}

.about-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.about-split {
	border-top: none;
	align-items: start;
}
.about-split .content-col:first-child {
	padding-top: 0;
}
.about-split .content-col + .content-col {
	padding-top: 0;
}

.about-ctas {
	justify-content: flex-start;
	margin-top: 8px;
}

/* RESPONSIVE -------------------------------------------------- */

@media (max-width: 640px) {
	:root {
		--frame: 12px;
	}

	.about-grid {
		grid-template-columns: 1fr;
	}
	.about-split .content-col + .content-col {
		padding-top: 24px;
	}

	.site-wrap {
		padding: 0 12px;
	}

	.hero {
		padding-top: 24px;
	}
	.hero::before {
		content: '**** SLIMESTRONAUTS ****';
	}
	.hero-title {
		font-size: clamp(16px, 5.5vw, 32px);
	}
	.hero-sub {
		font-size: 20px;
	}

	.content-grid {
		grid-template-columns: 1fr;
	}
	.content-col + .content-col {
		border-left: none;
		border-top: 4px solid var(--c64-frame);
		padding-left: 0;
	}

	.nav-brand {
		display: none;
	}
	.nav-links {
		display: none;
	}
	.nav-mobile-btn {
		display: block;
		margin-left: auto;
	}
}