/*
Theme Name: Demmons.net Arcade
Theme URI: https://www.demmons.net
Description: Custom child theme of Frost — dark arcade aesthetic with a Flynn's-Arcade-style neon-tube title frame, sporadic flicker on the frame and cabinets, and Pac-Man-curve arcade-cabinet decorations flanking the header. Built for personal blogging.
Author: Dan Demmons
Author URI: https://www.demmons.net
Template: frost
Version: 0.2.0
Requires at least: 6.1
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: demmons-arcade-frost-child
Tags: blog, dark, neon, full-site-editing
*/

/* =================================================================
   Color tokens — match the existing palette + a couple of additions
   ================================================================= */
:root {
	--da-bg-deep:  #090022;
	--da-bg-core:  #0b0033;
	--da-bg-floor: #030012;
	--da-fg:       #e6e6ff;
	--da-muted:    #7a7a8e;
	--da-cyan:     #00f0ff;
	--da-magenta:  #ff2bd6;
	--da-yellow:   #ffd400;
}

/* =================================================================
   Page surface — deep purple radial gradient (no header→body shift)
   ================================================================= */
html,
body,
.wp-site-blocks {
	background: radial-gradient(
		circle at 50% -10%,
		var(--da-bg-core) 0%,
		var(--da-bg-deep) 70%,
		var(--da-bg-floor) 100%
	) !important;
	color: var(--da-fg);
}

/* Subtle grid overlay — fades out away from the header */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		linear-gradient(rgba(0, 240, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 240, 255, 0.06) 1px, transparent 1px);
	background-size: 50px 50px;
	-webkit-mask-image: radial-gradient(circle at 50% 20%, rgba(0, 0, 0, 0.7), transparent 80%);
	        mask-image: radial-gradient(circle at 50% 20%, rgba(0, 0, 0, 0.7), transparent 80%);
}
.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* =================================================================
   Body typography — Inter, comfortable line-height
   ================================================================= */
body,
.wp-block-post-content,
.wp-block-post-content p,
.entry-content,
.entry-content p,
p {
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--da-fg);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	color: var(--da-fg);
}

a {
	color: var(--da-cyan);
	text-decoration: none;
	transition: color .2s ease, text-shadow .2s ease;
}
a:hover,
a:focus-visible {
	color: var(--da-magenta);
	text-shadow:
		0 0 4px rgba(255, 43, 214, 0.9),
		0 0 12px rgba(255, 43, 214, 0.55);
}

::selection {
	background: var(--da-cyan);
	color: var(--da-bg-deep);
}

/* =================================================================
   Site header — outer flex container
   ================================================================= */
.demmons-arcade-header {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: clamp(20px, 4vw, 36px) !important;
	padding: clamp(2rem, 5vw, 4rem) 1rem clamp(1.5rem, 4vw, 3rem) !important;
}

/* =================================================================
   Title FRAME — Flynn's-Arcade-style neon tube
   ================================================================= */
.demmons-arcade-frame {
	position: relative;
	border: 4px solid var(--da-cyan) !important;
	border-radius: 22px !important;
	padding: 26px 44px 18px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	background: transparent !important;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.55),
		0 0 10px rgba(0, 240, 255, 0.95),
		0 0 24px rgba(0, 240, 255, 0.75),
		0 0 52px rgba(0, 240, 255, 0.5),
		0 0 100px rgba(0, 240, 255, 0.3),
		0 0 180px rgba(0, 240, 255, 0.15),
		inset 0 0 6px rgba(255, 255, 255, 0.4),
		inset 0 0 18px rgba(0, 240, 255, 0.25);
}

/* Site title — Orbitron, white core with cyan→magenta glow */
.demmons-arcade-frame .wp-block-site-title,
.demmons-arcade-frame .wp-block-site-title a {
	font-family: "Orbitron", "Eurostile", "Avant Garde", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(2.2rem, 5vw, 3rem) !important;
	line-height: 1 !important;
	letter-spacing: 0.05em !important;
	color: #ffffff !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	text-shadow:
		0 0 4px #ffffff,
		0 0 9px var(--da-cyan),
		0 0 20px var(--da-cyan),
		0 0 36px var(--da-magenta);
}

/* Tagline / subtitle */
.demmons-arcade-frame .wp-block-site-tagline {
	font-family: "Orbitron", "Eurostile", system-ui, sans-serif !important;
	font-weight: 400 !important;
	font-size: clamp(0.85rem, 1.5vw, 1rem) !important;
	color: var(--da-cyan) !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	text-shadow:
		0 0 4px rgba(0, 240, 255, 0.65),
		0 0 10px rgba(0, 240, 255, 0.35);
}

/* =================================================================
   Power button — toggles .demmons-arcade-off on the header
   ================================================================= */
.demmons-arcade-power {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 8px 0 4px;
	cursor: pointer;
	color: var(--da-cyan);
	width: 1.85rem;
	height: 1.85rem;
	filter:
		drop-shadow(0 0 3px rgba(0, 240, 255, 0.9))
		drop-shadow(0 0 8px rgba(0, 240, 255, 0.5));
}
.demmons-arcade-power:hover {
	color: var(--da-magenta);
	filter:
		drop-shadow(0 0 3px rgba(255, 43, 214, 0.9))
		drop-shadow(0 0 8px rgba(255, 43, 214, 0.5));
}
.demmons-arcade-power:focus-visible {
	outline: 2px solid var(--da-cyan);
	outline-offset: 4px;
	border-radius: 50%;
}
.demmons-arcade-power svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* =================================================================
   Arcade cabinets — Pac-Man waist SVGs flanking the title
   80% scale (~92px) on small/mid; bumps to 110px on wide screens.
   ================================================================= */
.demmons-arcade-cabinet {
	width: 92px;
	height: auto;
	aspect-ratio: 220 / 400;
	flex-shrink: 0;
	color: var(--da-cyan);
	filter:
		drop-shadow(0 0 3px rgba(0, 240, 255, 0.9))
		drop-shadow(0 0 10px rgba(0, 240, 255, 0.55))
		drop-shadow(0 0 22px rgba(255, 43, 214, 0.28));
}
.demmons-arcade-cabinet--right {
	transform: scaleX(-1);
}
@media (min-width: 1024px) {
	.demmons-arcade-cabinet { width: 110px; }
}
@media (max-width: 600px) {
	.demmons-arcade-cabinet { display: none; }
}

/* =================================================================
   Flicker animations — sporadic, only frame + cabinets.
   Title and tagline burn steady.
   ================================================================= */
@keyframes da-frame-flicker {
	0%, 16.5%, 17.4%, 22%, 22.4%, 78%, 78.7%, 100% { opacity: 1; }
	17%   { opacity: 0.55; }
	17.15%{ opacity: 1; }
	17.25%{ opacity: 0.7; }
	22.2% { opacity: 0.78; }
	78.4% { opacity: 0.5; }
}
@keyframes da-cab-flicker {
	0%, 21.6%, 22.4%, 67%, 67.6%, 100% { opacity: 1; }
	22%   { opacity: 0.78; }
	67.3% { opacity: 0.55; }
	67.45%{ opacity: 1; }
	67.55%{ opacity: 0.75; }
}
.demmons-arcade-frame          { animation: da-frame-flicker 14s infinite; }
.demmons-arcade-cabinet--left  { animation: da-cab-flicker 18s infinite; }
.demmons-arcade-cabinet--right { animation: da-cab-flicker 18s infinite; animation-delay: -7.4s; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.demmons-arcade-frame,
	.demmons-arcade-cabinet--left,
	.demmons-arcade-cabinet--right {
		animation: none;
	}
}

/* =================================================================
   Power-OFF state — header de-energized
   ================================================================= */
.demmons-arcade-off .wp-block-site-title,
.demmons-arcade-off .wp-block-site-title a {
	color: #2a2a3a !important;
	text-shadow: none !important;
}
.demmons-arcade-off .wp-block-site-tagline {
	color: #2a2a3a !important;
	text-shadow: none !important;
}
.demmons-arcade-off .demmons-arcade-frame {
	border-color: #2a2a3a !important;
	box-shadow: none !important;
	animation: none !important;
}
.demmons-arcade-off .demmons-arcade-cabinet {
	color: #2a2a3a !important;
	filter: none !important;
	animation: none !important;
}
.demmons-arcade-off .demmons-arcade-power {
	color: #4a4a5a;
	filter: none;
}

/* Smooth on/off transition */
.wp-block-site-title,
.wp-block-site-title a,
.wp-block-site-tagline,
.demmons-arcade-frame,
.demmons-arcade-cabinet,
.demmons-arcade-power {
	transition:
		color 0.18s ease,
		text-shadow 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		filter 0.18s ease;
}

/* =================================================================
   Post listings — home / archive
   ================================================================= */
.wp-block-post-template { --wp--style--block-gap: 3.5rem; }

.wp-block-post-title {
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.25;
	font-weight: 700;
	margin-top: 0.5em;
}
.wp-block-post-title a { color: var(--da-fg); }
.wp-block-post-title a:hover {
	color: var(--da-cyan);
	text-shadow:
		0 0 4px rgba(0, 240, 255, 0.9),
		0 0 12px rgba(0, 240, 255, 0.55);
}

.wp-block-post-date,
.wp-block-post-date a {
	color: var(--da-muted);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: "Orbitron", "Eurostile", system-ui, sans-serif;
}

.wp-block-post-featured-image { margin-bottom: 1.25rem; }
.wp-block-post-featured-image img {
	border: 1px solid rgba(0, 240, 255, 0.25);
	border-radius: 4px;
	box-shadow:
		0 0 0 1px rgba(0, 240, 255, 0.08),
		0 8px 28px rgba(0, 0, 0, 0.55);
}

/* =================================================================
   Single post — comfortable reading column
   ================================================================= */
.wp-block-post-content { font-size: 1.0625rem; line-height: 1.7; }
.wp-block-post-content h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin-top: 2.25em;
}
.wp-block-post-content h3 {
	font-size: clamp(1.2rem, 2vw, 1.4rem);
	margin-top: 1.75em;
}

.wp-block-post-content blockquote,
.wp-block-quote {
	border-left: 2px solid var(--da-cyan);
	padding: 0.25em 0 0.25em 1.25em;
	color: var(--da-fg);
	opacity: 0.9;
	font-style: italic;
}

.wp-block-post-content code,
code {
	background: var(--da-bg-core);
	border: 1px solid rgba(0, 240, 255, 0.2);
	color: var(--da-cyan);
	padding: 0.1em 0.35em;
	border-radius: 2px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.95em;
}
.wp-block-post-content pre,
.wp-block-code {
	background: var(--da-bg-core);
	border: 1px solid rgba(0, 240, 255, 0.2);
	color: var(--da-cyan);
	padding: 1rem 1.1rem;
	border-radius: 2px;
	overflow-x: auto;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =================================================================
   Buttons — terminal-style outline
   ================================================================= */
.wp-block-button .wp-block-button__link,
.wp-block-button__link {
	background-color: transparent !important;
	color: var(--da-cyan) !important;
	border: 1px solid var(--da-cyan) !important;
	border-radius: 0 !important;
	padding: 0.65rem 1.25rem !important;
	font-family: "Orbitron", "Eurostile", system-ui, sans-serif !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease !important;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	background-color: var(--da-cyan) !important;
	color: var(--da-bg-deep) !important;
	box-shadow:
		0 0 10px rgba(0, 240, 255, 0.85),
		0 0 24px rgba(0, 240, 255, 0.5);
}

/* =================================================================
   Footer
   ================================================================= */
.wp-block-template-part[data-type="footer"],
footer.wp-block-template-part {
	color: var(--da-muted);
	font-size: 0.9rem;
	padding-top: 3rem;
	padding-bottom: 2rem;
}
.wp-block-template-part[data-type="footer"] a { color: var(--da-muted); }
.wp-block-template-part[data-type="footer"] a:hover {
	color: var(--da-cyan);
	text-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
}

/* =================================================================
   Forms (search, comments)
   ================================================================= */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
.wp-block-search__input {
	background-color: var(--da-bg-core);
	color: var(--da-fg);
	border: 1px solid rgba(0, 240, 255, 0.25);
	border-radius: 0;
	padding: 0.55rem 0.75rem;
	font-family: "Inter", system-ui, sans-serif;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
.wp-block-search__input:focus {
	outline: none;
	border-color: var(--da-cyan);
	box-shadow:
		0 0 4px rgba(0, 240, 255, 0.85),
		0 0 12px rgba(0, 240, 255, 0.55);
}

/* =================================================================
   Horizontal rule — neon line
   ================================================================= */
hr,
.wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--da-cyan), transparent);
	opacity: 0.6;
}