/*
Theme Name: FungiLogic
Theme URI: https://fungilogicllc.com/
Author: FungiLogic LLC
Author URI: https://fungilogicllc.com/
Description: The FungiLogic studio site. Neon line art on night blue, matching the studio logo. After activating, use the "Set up pages" button at the top of the dashboard to create the Home, Support and Privacy Policy pages.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fungilogic
*/

/* Most colours, fonts and sizes live in theme.json (editable under
   Appearance > Editor > Styles). This file adds the pieces theme.json can't
   express: the sticky header, the starfield, framed screenshots, chips, steps
   and the footer. Class names start with "fl-". */

:root {
	--fl-glow: 0 0 0.5rem rgba(111, 184, 255, 0.35), 0 0 2rem rgba(111, 184, 255, 0.12);
	--fl-radius: 18px;
	--fl-header-h: 4.25rem;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--fl-header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	background-color: var(--wp--preset--color--night);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: rgba(111, 184, 255, 0.35);
	color: var(--wp--preset--color--ink);
}

:where(a, button, summary, input):focus-visible {
	outline: 2px solid var(--wp--preset--color--rock);
	outline-offset: 3px;
	border-radius: 4px;
}

.wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1;
}

/* Remove the default gap between header, main and footer. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ---------- header ---------- */

.fl-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(13, 15, 28, 0.82);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	backdrop-filter: blur(12px) saturate(140%);
	border-bottom: 1px solid rgba(39, 48, 79, 0.7);
}

.admin-bar .fl-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar .fl-header {
		top: 0;
	}
}

.fl-header__inner {
	min-height: var(--fl-header-h);
	gap: 0.5rem 1.25rem;
}

.fl-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.3rem;
	letter-spacing: -0.02em;
	line-height: 1;
}

.fl-brand a {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: inherit;
	text-decoration: none;
}

.fl-brand img {
	height: 2.3rem;
	width: auto;
	display: block;
	filter: drop-shadow(0 0 6px rgba(207, 230, 255, 0.25));
}

.fl-logic {
	color: var(--wp--preset--color--well);
}

.fl-nav {
	gap: 0.25rem 1.5rem;
}

.fl-nav .wp-block-navigation-item__content {
	padding: 0.35rem 0;
	position: relative;
}

.fl-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--well);
	box-shadow: var(--fl-glow);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.fl-nav .wp-block-navigation-item__content:hover::after,
.fl-nav .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

@media (max-width: 480px) {
	.fl-brand {
		font-size: 1.15rem;
	}

	.fl-brand img {
		height: 2rem;
	}

	.fl-nav {
		gap: 0.25rem 1rem;
		font-size: 0.95rem;
	}
}

/* ---------- shared bits ---------- */

.fl-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rock);
	margin-bottom: 0;
}

.fl-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--text);
	max-width: 36em;
}

.fl-muted {
	color: var(--wp--preset--color--muted);
}

.fl-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.fl-band {
	background:
		linear-gradient(180deg, rgba(19, 24, 51, 0) 0%, rgba(19, 24, 51, 0.85) 18%, rgba(19, 24, 51, 0.85) 82%, rgba(19, 24, 51, 0) 100%);
}

/* A faint starfield, like the game's background. */
.fl-stars {
	position: relative;
	isolation: isolate;
}

.fl-stars::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(1.5px 1.5px at 6% 14%, rgba(207, 230, 255, 0.7) 50%, transparent 51%),
		radial-gradient(1px 1px at 18% 62%, rgba(207, 230, 255, 0.55) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 29% 31%, rgba(207, 230, 255, 0.45) 50%, transparent 51%),
		radial-gradient(1px 1px at 41% 84%, rgba(207, 230, 255, 0.6) 50%, transparent 51%),
		radial-gradient(1px 1px at 52% 9%, rgba(207, 230, 255, 0.5) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 63% 47%, rgba(207, 230, 255, 0.35) 50%, transparent 51%),
		radial-gradient(1px 1px at 74% 76%, rgba(207, 230, 255, 0.55) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 86% 22%, rgba(207, 230, 255, 0.6) 50%, transparent 51%),
		radial-gradient(1px 1px at 93% 58%, rgba(207, 230, 255, 0.45) 50%, transparent 51%),
		radial-gradient(1px 1px at 11% 91%, rgba(207, 230, 255, 0.4) 50%, transparent 51%),
		radial-gradient(1px 1px at 35% 5%, rgba(207, 230, 255, 0.5) 50%, transparent 51%),
		radial-gradient(1px 1px at 81% 93%, rgba(207, 230, 255, 0.45) 50%, transparent 51%),
		radial-gradient(ellipse 60% 55% at 72% 45%, rgba(111, 184, 255, 0.10), transparent 70%);
	background-size: 520px 420px, 520px 420px, 520px 420px, 520px 420px, 520px 420px, 520px 420px,
		520px 420px, 520px 420px, 520px 420px, 520px 420px, 520px 420px, 520px 420px, 100% 100%;
	background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
		repeat, repeat, no-repeat;
}

/* ---------- home hero ---------- */

.fl-hero {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

.fl-hero h1 {
	margin-top: 0.6rem;
	max-width: 12em;
	text-wrap: balance;
}

.fl-hero-art {
	margin: 0;
}

.fl-hero-art img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 781px) {
	.fl-hero .wp-block-columns {
		flex-direction: column-reverse;
	}

	.fl-hero-art img {
		max-width: 520px;
		margin-inline: auto;
	}
}

/* ---------- a framed game screen ---------- */

.fl-screen {
	margin: 0;
	padding: 10px;
	border-radius: var(--fl-radius);
	border: 2px solid rgba(207, 230, 255, 0.8);
	background: var(--wp--preset--color--deep);
	box-shadow: var(--fl-glow), inset 0 0 0 6px var(--wp--preset--color--deep), inset 0 0 0 7px rgba(207, 230, 255, 0.35);
}

.fl-screen img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 9px;
}

.fl-screen figcaption {
	margin: 0.6rem 0.25rem 0.1rem;
	text-align: left;
}

/* ---------- lists ---------- */

ul.fl-checks {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0.7rem;
}

ul.fl-checks li {
	position: relative;
	padding-left: 1.75rem;
}

ul.fl-checks li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.55em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--well);
	box-shadow: var(--fl-glow);
}

ul.fl-chips {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

ul.fl-chips li {
	margin: 0;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	background: rgba(19, 24, 51, 0.8);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
}

ul.fl-chips li strong {
	color: var(--wp--preset--color--green);
	font-weight: 600;
}

ul.fl-facts {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

ul.fl-facts li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

ul.fl-facts li strong {
	display: inline-block;
	min-width: 7.5rem;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
}

/* ---------- cards and steps ---------- */

.fl-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--fl-radius);
	background: rgba(19, 24, 51, 0.7);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.fl-card > :first-child {
	margin-top: 0;
}

.fl-card h3 {
	margin-bottom: 0.4rem;
}

.fl-card p {
	margin-top: 0;
}

.fl-steps {
	counter-reset: fl-step;
}

.fl-step {
	counter-increment: fl-step;
}

.fl-step figure {
	margin: 0 0 1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--deep);
	border: 1px solid var(--wp--preset--color--line);
	overflow: hidden;
}

.fl-step figure img {
	display: block;
	width: 100%;
	height: auto;
}

.fl-step h3::before {
	content: counter(fl-step);
	display: inline-grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	margin-right: 0.6rem;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--well);
	color: var(--wp--preset--color--well);
	font-size: 0.9rem;
	vertical-align: 0.15em;
	box-shadow: var(--fl-glow);
}

/* ---------- game page ---------- */

.fl-game-hero {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}

.fl-game-title {
	align-items: center;
	gap: 1.25rem;
}

.fl-icon {
	margin: 0;
	flex: 0 0 auto;
}

.fl-icon img {
	width: clamp(84px, 12vw, 120px);
	height: auto;
	border-radius: 24%;
	box-shadow: 0 0 0 1px rgba(207, 230, 255, 0.25), 0 0 2.5rem rgba(111, 184, 255, 0.25);
}

.fl-game-title h1 {
	margin: 0;
}

.fl-tagline {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	color: var(--wp--preset--color--rock);
	letter-spacing: -0.01em;
	margin: 0.25rem 0 0;
}

.fl-gallery {
	gap: 1rem;
}

@media (max-width: 781px) {
	/* Screenshots scroll sideways on phones instead of stacking. */
	.fl-gallery.wp-block-columns {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: 0.75rem;
		margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
		padding-inline: clamp(1rem, 4vw, 2rem);
		scrollbar-width: thin;
	}

	.fl-gallery.wp-block-columns > .wp-block-column {
		flex: 0 0 82% !important;
		scroll-snap-align: center;
	}
}

/* ---------- contact band ---------- */

.fl-contact {
	text-align: center;
}

.fl-contact .wp-block-buttons {
	justify-content: center;
}

.fl-contact .fl-lead {
	margin-inline: auto;
}

.fl-email .wp-block-button__link {
	font-size: clamp(1rem, 2.6vw, 1.25rem);
	padding: 0.9rem 1.6rem;
	overflow-wrap: anywhere;
}

/* Outline buttons follow the palette. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--ink);
	border: 2px solid rgba(207, 230, 255, 0.55);
	background: transparent;
	padding: calc(0.75rem - 2px) calc(1.4rem - 2px);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--ink);
	background: rgba(207, 230, 255, 0.08);
	color: var(--wp--preset--color--ink);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	box-shadow: 0 0 1.25rem rgba(111, 184, 255, 0.3);
}

/* ---------- reading pages (support, privacy) ---------- */

.fl-page-head {
	padding-top: var(--wp--preset--spacing--50);
}

.fl-page-head .wp-block-post-title {
	margin-bottom: 0;
}

.fl-prose h2 {
	font-size: 1.5rem;
	margin-top: 2.5rem;
}

.fl-prose h3 {
	margin-top: 1.75rem;
}

.fl-prose li + li {
	margin-top: 0.35rem;
}

.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	list-style-position: outside;
}

.wp-block-details[open] summary {
	margin-bottom: 0.5rem;
}

.wp-block-details > :last-child {
	margin-bottom: 0;
}

.wp-block-details + .wp-block-details {
	margin-top: 0.75rem;
}

/* ---------- footer ---------- */

.fl-footer {
	background: var(--wp--preset--color--deep);
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.fl-footer a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.fl-footer a:hover,
.fl-footer a:focus {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}

.fl-footer h2 {
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.6rem;
}

.fl-footer ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: grid;
	gap: 0.4rem;
}

.fl-footer .fl-brand {
	font-size: 1.15rem;
}

.fl-footer .fl-brand img {
	height: 2rem;
}

.fl-footer-bottom {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------- blog fallbacks ---------- */

.fl-post-list .wp-block-post {
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* ---------- page spacing ---------- */

.fl-page {
	padding-bottom: var(--wp--preset--spacing--60);
}

.fl-footer-top {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--40);
}

.fl-footer-top .wp-block-columns {
	gap: 2rem;
}

.fl-footer-bottom {
	padding-top: 1.1rem;
	padding-bottom: 1.4rem;
}

.fl-footer-bottom p {
	margin: 0;
}

.fl-values {
	margin-top: var(--wp--preset--spacing--40);
}

.fl-values > .wp-block-column > .fl-card {
	height: 100%;
}

/* Constrained sections centre every child; a lead in a wide (1160px)
   section should line up with the heading above it instead. */
.is-layout-constrained > .fl-lead {
	margin-left: max(0px, calc((100% - 1160px) / 2)) !important;
}

.fl-contact.is-layout-constrained > .fl-lead {
	margin-left: auto !important;
}

.fl-card h2 {
	margin-bottom: 0.6rem;
}