/*
Theme Name: Mini Fun Games
Theme URI: https://minifun.games
Author: Mini Fun Games
Author URI: https://minifun.games
Description: Custom theme for minifun.games.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: minifun
Update URI: false
*/

/* ==========================================================================
   Tokens
   Fonts and font sizes live in theme.json. Colours live here so they can
   follow the visitor's light/dark setting via light-dark().
   ========================================================================== */

:root {
	color-scheme: light dark;

	/* Surfaces: Steam-style dark slate blue. */
	--mf-bg: light-dark(#f4f5f8, #10141c);
	--mf-surface: light-dark(#ffffff, #19202c);
	--mf-surface-2: light-dark(#eceef3, #222b3a);
	--mf-border: light-dark(#d8dce5, #2e3a4d);
	--mf-text: light-dark(#161a22, #e8ecf3);
	--mf-muted: light-dark(#5a6170, #9aa6b8);

	/* Brand colours from the logo (assets/brand/): purple #8238b0, red #ff4740,
	   yellow #ffc81e. Light-mode values are darker so text on white stays readable. */
	--mf-accent: light-dark(#8238b0, #8f45c4); /* button backgrounds (white text) */
	--mf-link: light-dark(#7330a0, #c79bf0); /* text links */
	--mf-red: light-dark(#d42a22, #ff4740);
	--mf-gold: light-dark(#8a5a00, #ffc81e);
	--mf-sale: var(--mf-red);
	--mf-upcoming: light-dark(#0b6ea8, #66c0f4); /* Steam blue */
	/* Big gradient titles: red → yellow on dark; purple → red on light (yellow is too pale there). */
	--mf-gradient-from: light-dark(#8238b0, #ff4740);
	--mf-gradient-to: light-dark(#d42a22, #ffc81e);
	--mf-gradient: linear-gradient(90deg, var(--mf-gradient-from), var(--mf-gradient-to));

	--mf-glow: light-dark(0 10px 30px rgb(130 56 176 / 0.15), 0 0 40px rgb(143 69 196 / 0.35));
	--mf-radius: 14px;
	--mf-radius-sm: 8px;
	--mf-wide: 1200px;
	--mf-gutter: clamp(1rem, 4vw, 2rem);
	--mf-heading: var(--wp--preset--font-family--heading, system-ui, sans-serif);
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
	margin: 0;
	background: var(--mf-bg);
	color: var(--mf-text);
	-webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--mf-link);
	text-underline-offset: 0.2em;

	&:hover {
		color: var(--mf-text);
	}
}

:focus-visible {
	outline: 2px solid var(--mf-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   Site header / footer
   ========================================================================== */

.site-header,
.site-main,
.site-footer {
	width: min(100% - 2 * var(--mf-gutter), var(--mf-wide));
	margin-inline: auto;
}

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: 1.25rem;

	/* Menu and Steam button sit on the right; on phones the menu drops to its own row. */
	& > nav {
		margin-inline-start: auto;

		@media (max-width: 40rem) {
			order: 1;
			flex-basis: 100%;
		}
	}

	& ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	& nav a {
		color: var(--mf-muted);
		font-family: var(--mf-heading);
		font-weight: 600;
		text-decoration: none;
		letter-spacing: 0.02em;

		&:hover,
		&[aria-current] {
			color: var(--mf-text);
		}
	}
}

/* Logo, then the site name with the tagline below it. */
.site-brand {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	color: var(--mf-text);
	text-decoration: none;

	&:hover {
		color: var(--mf-text);

		& .site-brand__logo {
			transform: rotate(-3deg) scale(1.05);
		}
	}

	/* Phones: shrink (the name may wrap) so the Follow button stays on the same row. */
	@media (max-width: 40rem) {
		flex: 1 1 0;
		min-width: 0;
		gap: 0.6rem;
	}
}

.site-brand__logo {
	flex: none;
	line-height: 0;
	transition: transform 0.15s ease;

	& img {
		width: auto;
		height: 4rem;

		@media (max-width: 40rem) {
			height: 3rem;
		}
	}
}

.site-brand__text {
	display: grid;
	gap: 0.15rem;
}

.site-brand__name {
	margin: 0;
	font-family: var(--mf-heading);
	font-size: clamp(1.15rem, 3vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

.site-brand__tagline {
	color: var(--mf-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;

	/* No room next to the logo and button on phones. */
	@media (max-width: 40rem) {
		display: none;
	}
}

.site-main {
	padding-bottom: 4rem;
}

.site-footer {
	padding-block: 2rem;
	border-top: 1px solid var(--mf-border);
	color: var(--mf-muted);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__copy {
	margin: 0;
}

/* ==========================================================================
   Community band (template-parts/community.php): newsletter, Steam, socials
   ========================================================================== */

.community {
	display: grid;
	align-items: center;
	gap: 2rem 3rem;
	margin-bottom: 2rem;
	padding: clamp(1.25rem, 4vw, 2.25rem);
	border: 1px solid var(--mf-border);
	border-radius: var(--mf-radius);
	background:
		radial-gradient(circle at 0 0, color-mix(in srgb, var(--mf-accent) 16%, transparent), transparent 55%),
		radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--mf-gold) 10%, transparent), transparent 50%),
		var(--mf-surface);
	color: var(--mf-text);
	font-size: var(--wp--preset--font-size--medium);
	text-align: start;

	@media (min-width: 48rem) {
		grid-template-columns: 1fr auto;
	}

	/* Only the follow links: centre them. */
	&:not(:has(.newsletter)) {
		grid-template-columns: 1fr;
		justify-items: center;
	}
}

.community__follow {
	display: grid;
	justify-items: start;
	gap: 1rem;

	@media (min-width: 48rem) {
		justify-items: end;
	}

	& .steam-follow {
		padding: 0.85em 1.5em;
		font-size: 1.125rem;
	}
}

.newsletter__title {
	margin: 0 0 0.25rem;
	font-family: var(--mf-heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.newsletter__text {
	margin: 0 0 1rem;
	color: var(--mf-muted);
}

.newsletter__form {
	max-width: 32rem;
}

.newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;

	& input[type="email"] {
		flex: 1 1 14rem;
		min-width: 0;
		padding: 0.75em 1em;
		border: 2px solid var(--mf-border);
		border-radius: var(--mf-radius-sm);
		background: var(--mf-bg);
		color: var(--mf-text);
		font: inherit;

		&::placeholder {
			color: var(--mf-muted);
		}

		&:focus-visible {
			border-color: var(--mf-accent);
			outline: none;
		}
	}

	& .button {
		cursor: pointer;
		font-size: inherit;

		&:disabled {
			cursor: progress;
			opacity: 0.7;
		}
	}
}

/* Google's "I'm not a robot" box: fixed 304px wide, so scale it down on narrow screens. */
.newsletter__captcha {
	height: 78px;
	margin-top: 0.75rem;

	@media (max-width: 22rem) {
		transform: scale(0.85);
		transform-origin: 0 0;
	}

	&[hidden] {
		display: none;
	}

	/* Google's iframe doesn't declare a color-scheme. On our dark scheme the
	   browser would paint an opaque white backdrop behind it (the white edge
	   around the box), so match its default scheme to keep it transparent. */
	& iframe {
		color-scheme: light;
	}
}

.newsletter__msg {
	margin: 0.5rem 0 0;
	color: var(--mf-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);

	&:empty {
		display: none;
	}

	&.is-error {
		color: var(--mf-red);
	}
}

.newsletter__success:focus {
	outline: none;
}

/* "Follow me on Steam": Steam-blue so it stands apart from the purple buttons. */
.steam-follow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.55em 1em;
	border-radius: var(--mf-radius-sm);
	background: linear-gradient(135deg, #1a6fd0, #3a47d8);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
	color: #fff;
	font-family: var(--mf-heading);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s, box-shadow 0.15s;

	& .icon {
		flex: none;
		width: 1.35em;
		height: 1.35em;
	}

	&:hover {
		color: #fff;
		transform: translateY(-2px);
		box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25), 0 0 28px rgb(40 110 255 / 0.45);
	}

	/* Header on phones: just "Follow" (the rest stays for screen readers). */
	&.is-compact .steam-follow__more {
		@media (max-width: 40rem) {
			position: absolute;
			width: 1px;
			height: 1px;
			overflow: hidden;
			clip-path: inset(50%);
			white-space: nowrap;
		}
	}
}

.social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;

	& a {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		border: 1px solid var(--mf-border);
		border-radius: var(--mf-radius-sm);
		background: var(--mf-surface-2);
		color: var(--mf-muted);
		transition: color 0.15s, border-color 0.15s, transform 0.15s;

		&:hover {
			color: var(--brand, var(--mf-text));
			border-color: currentColor;
			transform: translateY(-2px);
		}
	}

	& .icon {
		width: 1.25rem;
		height: 1.25rem;
	}
}

/* ==========================================================================
   Buttons and badges
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.75em 1.25em;
	border: 2px solid var(--mf-accent);
	border-radius: var(--mf-radius-sm);
	background: var(--mf-accent);
	color: #fff;
	font-family: var(--mf-heading);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;

	/* Store logo before the label. */
	& .icon {
		flex: none;
		width: 1.2em;
		height: 1.2em;
	}

	&:hover {
		color: #fff;
		transform: translateY(-2px);
		box-shadow: var(--mf-glow);
	}

	&.is-secondary {
		background: transparent;
		color: var(--mf-text);
		border-color: var(--mf-border);

		&:hover {
			border-color: var(--mf-accent);
		}
	}
}

/* Store logos: links on feature cards, plain icons on tiles (the tile is the link). */
.store-icons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--mf-muted);

	& > * {
		display: grid;
	}

	& a {
		display: grid;
		color: inherit;
		transition: color 0.15s, transform 0.15s;

		&:hover {
			color: var(--mf-text);
			transform: translateY(-2px);
		}
	}

	& .icon {
		width: 1.15rem;
		height: 1.15rem;
	}
}

.game-feature .store-icons .icon {
	width: 1.4rem;
	height: 1.4rem;
}

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.badge {
	--badge: var(--mf-gold);
	display: inline-block;
	padding: 0.2em 0.7em;
	border: 1px solid var(--badge);
	border-radius: 999px;
	background: color-mix(in srgb, var(--badge) 14%, transparent);
	color: var(--badge);
	font-family: var(--mf-heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;

	&.is-upcoming {
		--badge: var(--mf-upcoming);
	}

	&.is-sale {
		--badge: var(--mf-sale);
	}
}

/* ==========================================================================
   Block editor content
   ========================================================================== */

.entry-content {
	& > * {
		margin-block: 0 1.25em;
	}

	& h2,
	& h3 {
		margin-top: 1.75em;
	}

	& img {
		border-radius: var(--mf-radius-sm);
	}

	& figure {
		margin-inline: 0;
	}

	& figcaption {
		color: var(--mf-muted);
		font-size: var(--wp--preset--font-size--small);
	}

	& .wp-block-embed iframe {
		border-radius: var(--mf-radius-sm);
	}
}

/* ==========================================================================
   Game page (single-game.php)
   ========================================================================== */

.game-hero {
	position: relative;
	margin-bottom: 2.5rem;
}

.game-hero__art {
	position: relative;
	overflow: hidden;
	border-radius: var(--mf-radius);
	box-shadow: var(--mf-glow);

	& img {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		max-height: 62vh; /* keep the title above the fold on laptop screens */
		object-fit: cover;
	}

	/* Fade the bottom of the art into the page so the title can overlap it. */
	&::after {
		content: "";
		position: absolute;
		inset: 40% 0 0;
		background: linear-gradient(to bottom, transparent, var(--mf-bg));
	}
}

.game-hero__text {
	position: relative;
	z-index: 1;
	padding-inline: clamp(0rem, 3vw, 2.5rem);

	.game-hero__art + & {
		margin-top: clamp(-7rem, -10vw, -2.5rem);
	}
}

.game-title {
	margin: 0.4rem 0 0.25rem;
	font-size: clamp(2rem, 5.5vw, 3.75rem);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.game-tagline {
	margin: 0;
	max-width: 60ch;
	color: var(--mf-muted);
	font-size: var(--wp--preset--font-size--large);
}

.game-layout {
	display: grid;
	gap: 2.5rem;
	grid-template-areas:
		"card"
		"content";

	@media (min-width: 860px) {
		grid-template-columns: minmax(0, 1fr) 320px;
		grid-template-areas: "content card";
		align-items: start;
	}
}

/* Trailer, screenshots, then the description. */
.game-main {
	grid-area: content;
	display: grid;
	gap: 2rem;
	min-width: 0;
}

.game-content {
	max-width: 72ch;
}

.game-trailer {
	overflow: hidden;
	border-radius: var(--mf-radius);
	background: var(--mf-surface-2);
	box-shadow: var(--mf-glow);

	& iframe {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 9;
		border: 0;
	}
}

.game-shots {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;

	@media (min-width: 540px) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	& a {
		display: block;
		overflow: hidden;
		border: 1px solid var(--mf-border);
		border-radius: var(--mf-radius-sm);
		background: var(--mf-surface-2);
		transition: border-color 0.15s, box-shadow 0.15s;

		&:hover,
		&:focus-visible {
			border-color: var(--mf-accent);
			box-shadow: var(--mf-glow);
		}
	}

	& img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
		transition: scale 0.25s;
	}

	& a:hover img {
		scale: 1.04;
	}
}

/* Full-size screenshot overlay (assets/js/lightbox.js). */
.lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(0.5rem, 6vw, 5rem);
	border: 0;
	background: rgb(5 6 12 / 0.94);
	color: #fff;

	&[open] {
		display: grid;
		place-items: center;
	}

	&::backdrop {
		background: transparent;
		backdrop-filter: blur(8px);
	}

	& button {
		position: absolute;
		display: grid;
		place-items: center;
		width: 3rem;
		height: 3rem;
		padding: 0;
		border: 1px solid rgb(255 255 255 / 0.25);
		border-radius: 50%;
		background: rgb(255 255 255 / 0.08);
		color: #fff;
		font-size: 2rem;
		line-height: 1;
		cursor: pointer;

		&:hover {
			background: rgb(255 255 255 / 0.2);
		}
	}

	&.is-single :is(.lightbox__prev, .lightbox__next, .lightbox__count) {
		display: none;
	}
}

.lightbox__img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--mf-radius-sm);
}

.lightbox__count {
	position: absolute;
	top: 1rem;
	left: 50%;
	margin: 0;
	translate: -50% 0;
	font-family: var(--mf-heading);
	font-variant-numeric: tabular-nums;
}

.lightbox .lightbox__close {
	top: 0.75rem;
	right: 0.75rem;
}

.lightbox .lightbox__prev,
.lightbox .lightbox__next {
	top: 50%;
	translate: 0 -50%;
}

.lightbox .lightbox__prev {
	left: 0.75rem;
}

.lightbox .lightbox__next {
	right: 0.75rem;
}

/* Small screens: arrows go to the bottom so they don't cover the image. */
@media (max-width: 600px) {
	.lightbox .lightbox__prev,
	.lightbox .lightbox__next {
		top: auto;
		bottom: 0.75rem;
		translate: none;
	}
}

.game-card {
	grid-area: card;
	display: grid;
	gap: 1.25rem;
	padding: 1.5rem;
	border: 1px solid var(--mf-border);
	border-radius: var(--mf-radius);
	background: var(--mf-surface);

	@media (min-width: 860px) {
		position: sticky;
		top: 1.5rem;
	}

	& h2 {
		margin: 0 0 0.25rem;
		color: var(--mf-muted);
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	& p {
		margin: 0;
	}
}

.game-card__sale {
	padding: 1rem;
	border: 1px solid var(--mf-sale);
	border-radius: var(--mf-radius-sm);
	background: color-mix(in srgb, var(--mf-sale) 10%, transparent);

	& strong {
		display: block;
		color: var(--mf-sale);
		font-family: var(--mf-heading);
		font-size: 2.25rem;
		font-weight: 800;
		line-height: 1;
	}
}

.game-card__stores {
	display: grid;
	gap: 0.6rem;
}

.game-card__press {
	padding-top: 1rem;
	border-top: 1px solid var(--mf-border);
	font-family: var(--mf-heading);
	font-weight: 600;

	& a {
		text-decoration: none;
	}
}

/* Live countdown to an upcoming game's release (assets/js/countdown.js). */
.countdown {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.back-link {
	display: inline-block;
	margin-top: 3rem;
	font-family: var(--mf-heading);
	font-weight: 600;
	text-decoration: none;
}

/* ==========================================================================
   Page headings (archives)
   ========================================================================== */

.page-header {
	margin-block: 1.5rem 2rem;
}

.page-title {
	margin: 0;
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 800;
}

/* ==========================================================================
   Home page (front-page.php)
   ========================================================================== */

.home-section {
	margin-bottom: clamp(3rem, 7vw, 5rem);

	/* Breathing room below the header (there's no intro block). */
	&:first-child {
		margin-top: clamp(1rem, 4vw, 2.5rem);
	}
}

.home-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;

	& a {
		font-family: var(--mf-heading);
		font-weight: 600;
		text-decoration: none;
	}
}

.home-section__title {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
}

/* ==========================================================================
   Tiles (game-tile, post-tile)
   ========================================================================== */

.tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 1.5rem;
}

/* Centred variant (home page rows): same tile widths as .tile-grid, but a
   short or partial row sits in the middle instead of on the left. Column
   count follows the grid's rule (340px minimum, 1.5rem gap). */
.tile-grid--center {
	container-type: inline-size;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	& > * {
		flex: 0 0 100%;
		min-width: 0;
	}

	@container (min-width: 704px) {
		& > * {
			flex-basis: calc((100% - 1.5rem) / 2);
		}
	}

	@container (min-width: 1068px) {
		& > * {
			flex-basis: calc((100% - 3rem) / 3);
		}
	}
}

.game-tile,
.post-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mf-border);
	border-radius: var(--mf-radius);
	background: var(--mf-surface);
	color: var(--mf-text);
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;

	&:hover {
		color: var(--mf-text);
		border-color: var(--mf-accent);
		box-shadow: var(--mf-glow);
		transform: translateY(-4px);
	}
}

.game-tile__art,
.post-tile__art {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--mf-surface-2), var(--mf-accent));

	& img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.3s;
	}

	:hover > & img {
		transform: scale(1.04);
	}
}

.game-tile__art,
.post-tile__art {
	overflow: hidden;
}

.game-tile__body,
.post-tile__body {
	display: grid;
	gap: 0.5rem;
	padding: 1.1rem 1.25rem 1.4rem;
	align-content: start;
}

/* Badges on the left, store logos on the right. */
.game-tile__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;

	& .store-icons {
		margin-left: auto;
	}
}

.game-tile__title,
.post-tile__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.game-tile__text,
.post-tile__text {
	margin: 0;
	color: var(--mf-muted);
	font-size: 0.95rem;
}

.post-tile time {
	color: var(--mf-gold);
	font-family: var(--mf-heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ==========================================================================
   Feature cards (game-feature): featured / sale / upcoming promos on the home page
   ========================================================================== */

.feature-list {
	display: grid;
	gap: 1.5rem;
}

.game-feature {
	--feature: var(--mf-sale);
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--feature) 55%, var(--mf-border));
	border-radius: var(--mf-radius);
	background:
		radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--feature) 16%, transparent), transparent 60%),
		var(--mf-surface);

	&.is-upcoming {
		--feature: var(--mf-upcoming);
	}

	&.is-featured {
		--feature: var(--mf-gold);
	}
}

.game-feature__art {
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--mf-surface-2), var(--feature));

	& img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.game-feature__body {
	display: grid;
	gap: 0.75rem;
	align-content: center;
	padding: 1.5rem;
}

/* Art left, text right once the card itself is wide enough. */
@container (min-width: 700px) {
	.game-feature__art {
		position: absolute;
		inset: 0 45% 0 0;
		aspect-ratio: auto;
	}

	.game-feature__body {
		margin-left: 55%;
		min-height: 320px;
		padding: 2rem 2.5rem;
	}
}

.game-feature__deal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0;

	& strong {
		color: var(--mf-sale);
		font-family: var(--mf-heading);
		font-size: clamp(2.5rem, 7cqi, 3.5rem);
		font-weight: 900;
		line-height: 1;
	}

	& span {
		color: var(--mf-muted);
		font-weight: 600;
	}
}

.game-feature__when {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0;
	color: var(--feature);
	font-family: var(--mf-heading);
	font-weight: 700;
}

.game-feature__title {
	margin: 0;
	font-size: clamp(1.6rem, 5cqi, 2.25rem);
	font-weight: 800;

	& a {
		color: var(--mf-text);
		text-decoration: none;

		&:hover {
			color: var(--mf-link);
		}
	}
}

.game-feature__text {
	margin: 0;
	color: var(--mf-muted);
}

.game-feature__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

/* ==========================================================================
   Articles: dev log post (single.php) and plain pages (page.php)
   ========================================================================== */

.article {
	--article-width: 720px; /* px, not ch: the column holds text in different fonts */
	margin-top: clamp(1rem, 4vw, 2.5rem);
}

.article__header,
.article__content,
.article .post-navigation,
.article .back-link {
	max-width: var(--article-width);
	margin-inline: auto;
}

.article .back-link {
	display: block;
}

.article__date {
	color: var(--mf-gold);
	font-family: var(--mf-heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.article__title {
	margin: 0.4rem 0 2rem;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.article__art {
	max-width: 960px;
	margin: 0 auto 2.5rem;

	& img {
		display: block;
		width: 100%;
		border-radius: var(--mf-radius);
		box-shadow: var(--mf-glow);
	}
}

.article__content {
	font-size: 1.0625rem;

	/* Let wide/full-aligned blocks break out of the text column. */
	& > .alignwide {
		max-width: min(100vw - 2 * var(--mf-gutter), 960px);
		margin-inline: calc(50% - min(50vw - var(--mf-gutter), 480px));
	}
}

.post-navigation {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--mf-border);

	& .nav-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}

	& .nav-next {
		grid-column: 2;
		text-align: right;
	}

	& a {
		display: grid;
		gap: 0.25rem;
		text-decoration: none;
	}

	& .nav-label {
		color: var(--mf-muted);
		font-size: var(--wp--preset--font-size--small);
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	& .nav-title {
		font-family: var(--mf-heading);
		font-weight: 700;
	}
}

/* ==========================================================================
   Pagination (home.php)
   ========================================================================== */

.pagination {
	margin-top: 2.5rem;

	& .nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
	}

	& .page-numbers {
		min-width: 2.5rem;
		padding: 0.5rem 0.9rem;
		border: 1px solid var(--mf-border);
		border-radius: var(--mf-radius-sm);
		color: var(--mf-text);
		font-family: var(--mf-heading);
		font-weight: 600;
		text-align: center;
		text-decoration: none;

		&.current {
			border-color: var(--mf-accent);
			background: var(--mf-accent);
			color: #fff;
		}

		&.dots {
			border-color: transparent;
		}
	}

	& a.page-numbers:hover {
		border-color: var(--mf-accent);
	}
}

/* ==========================================================================
   404
   ========================================================================== */

.not-found {
	margin-block: clamp(2rem, 8vw, 5rem);
	text-align: center;

	& .page-title {
		margin-bottom: 0.75rem;
	}

	& p:not([class]) {
		color: var(--mf-muted);
	}
}

.not-found__code {
	margin: 0;
	font-family: var(--mf-heading);
	font-size: clamp(5rem, 20vw, 9rem);
	font-weight: 900;
	line-height: 1;
	background: var(--mf-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.not-found__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* ==========================================================================
   Maintenance page (inc/maintenance.php)
   ========================================================================== */

.maintenance {
	display: grid;
	place-content: center;
	gap: 1rem;
	min-height: 100vh;
	min-height: 100dvh;
	padding: var(--mf-gutter);
	text-align: center;

	& > p {
		margin: 0;
	}

	& > p:not([class]) {
		color: var(--mf-muted);
	}

	& .community {
		width: min(100%, 52rem);
		margin: 2rem auto 0;
	}

	& .maintenance__logo img {
		width: min(18rem, 70vw);
		height: auto;
	}
}