/*
Theme Name: Memzi Terminal
Theme URI: https://memzi.net
Author: memzi
Description: Dark terminal / homelab theme for memzi.net — phosphor green on void black, grid background, monospace UI.
Version: 1.0.3
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: memzi-terminal
*/

/* ------------------------------------------------------------ base */
:root {
	--mt-green: var(--wp--preset--color--green);
	--mt-cyan: var(--wp--preset--color--cyan);
	--mt-magenta: var(--wp--preset--color--magenta);
	--mt-amber: var(--wp--preset--color--amber);
	--mt-line: var(--wp--preset--color--line);
	--mt-surface: var(--wp--preset--color--surface);
	--mt-surface-2: var(--wp--preset--color--surface-2);
	--mt-muted: var(--wp--preset--color--muted);
	--mt-mono: var(--wp--preset--font-family--mono);
	--mt-glow: 0 0 0 1px rgba(61, 255, 154, .25), 0 0 24px rgba(61, 255, 154, .12);
}

html { scroll-behavior: smooth; }

body {
	background-color: var(--wp--preset--color--bg);
	background-image:
		radial-gradient(1200px 600px at 85% -10%, rgba(34, 211, 238, .10), transparent 60%),
		radial-gradient(900px 500px at -10% 10%, rgba(255, 79, 216, .07), transparent 60%),
		linear-gradient(rgba(28, 40, 54, .35) 1px, transparent 1px),
		linear-gradient(90deg, rgba(28, 40, 54, .35) 1px, transparent 1px);
	background-size: auto, auto, 32px 32px, 32px 32px;
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

/* faint CRT scanlines over everything */
body::after {
	content: "";
	pointer-events: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px);
	mix-blend-mode: overlay;
}

::selection { background: var(--mt-green); color: #06080c; }

:where(code, kbd, samp) {
	font-family: var(--mt-mono);
	font-size: .9em;
	background: var(--mt-surface-2);
	border: 1px solid var(--mt-line);
	border-radius: 4px;
	padding: .1em .35em;
	color: var(--mt-cyan);
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

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

a { transition: color .15s ease, text-shadow .15s ease; }
a:hover { text-shadow: 0 0 12px rgba(34, 211, 238, .45); }

/* ------------------------------------------------------------ header */
.mt-topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: rgba(6, 8, 12, .78);
	border-bottom: 1px solid var(--mt-line);
}
.mt-topbar-inner { padding-top: .8rem; padding-bottom: .8rem; }

.mt-logo, .mt-logo:hover {
	font-family: var(--mt-mono);
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
	text-decoration: none;
	text-shadow: none;
	white-space: nowrap;
}
.mt-logo .mt-user { color: var(--mt-green); }
.mt-logo .mt-at { color: var(--mt-muted); }
.mt-logo .mt-host { color: var(--mt-cyan); }
.mt-logo .mt-path { color: var(--mt-magenta); }

.mt-cursor {
	display: inline-block;
	color: var(--mt-green);
	animation: mt-blink 1.05s steps(1) infinite;
}
@keyframes mt-blink { 50% { opacity: 0; } }

.mt-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--text); padding: .25rem .1rem; }
.mt-nav .wp-block-navigation-item__content:hover { color: var(--mt-green); }
.mt-nav .current-menu-item > .wp-block-navigation-item__content,
.mt-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--mt-green); }
.mt-nav .wp-block-navigation-item__content[aria-current="page"]::before { content: "▸ "; }
.mt-nav .mt-ext .wp-block-navigation-item__label::after { content: " ↗"; color: var(--mt-muted); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--bg) !important; }

/* ------------------------------------------------------------ terminal window */
.mt-term {
	background: linear-gradient(180deg, var(--mt-surface-2), var(--mt-surface));
	border: 1px solid var(--mt-line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), var(--mt-glow);
}
.mt-term-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--mt-line);
	background: rgba(255, 255, 255, .02);
	font-family: var(--mt-mono);
	font-size: .78rem;
	color: var(--mt-muted);
}
.mt-term-bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.mt-term-bar i:nth-child(1) { background: #ff5f57; }
.mt-term-bar i:nth-child(2) { background: #febc2e; }
.mt-term-bar i:nth-child(3) { background: #28c840; }
.mt-term-bar em { margin-left: auto; margin-right: auto; font-style: normal; transform: translateX(-24px); }
.mt-term-body { padding: clamp(18px, 4vw, 40px); font-family: var(--mt-mono); }
.mt-term-body p { margin: .35rem 0; }
.mt-ps { color: var(--mt-green); }
.mt-ps b { color: var(--mt-cyan); font-weight: 400; }
.mt-dim { color: var(--mt-muted); }
.mt-out { color: var(--wp--preset--color--text); }
.mt-ok { color: var(--mt-green); }
.mt-warn { color: var(--mt-amber); }

/* ------------------------------------------------------------ hero */
.mt-hero { padding-top: clamp(40px, 9vw, 110px); padding-bottom: clamp(30px, 6vw, 70px); }
.mt-hero h1 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(3rem, 11vw, 7.5rem);
	line-height: .95;
	margin: .6rem 0 .4rem;
	letter-spacing: -0.04em;
	color: #fff;
}
.mt-hero h1 .mt-tld { color: var(--mt-green); }
.mt-tagline { font-size: clamp(1rem, 2.4vw, 1.25rem); }
.mt-tagline span { color: var(--mt-cyan); }
.mt-tagline span + span::before { content: " // "; color: var(--mt-muted); }

/* glitch on the big name */
.mt-glitch { position: relative; display: inline-block; }
.mt-glitch::before, .mt-glitch::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
}
.mt-glitch::before { color: var(--mt-magenta); transform: translate(2px, 0); }
.mt-glitch::after { color: var(--mt-cyan); transform: translate(-2px, 0); }
.mt-glitch:hover::before, .mt-glitch:hover::after, .mt-glitch.is-glitching::before, .mt-glitch.is-glitching::after {
	opacity: .8;
	animation: mt-glitch .35s steps(2) infinite;
}
@keyframes mt-glitch {
	0% { clip-path: inset(10% 0 70% 0); }
	25% { clip-path: inset(60% 0 10% 0); }
	50% { clip-path: inset(30% 0 40% 0); }
	75% { clip-path: inset(80% 0 5% 0); }
	100% { clip-path: inset(5% 0 85% 0); }
}

/* ------------------------------------------------------------ sections */
.mt-section { padding-top: clamp(28px, 6vw, 64px); padding-bottom: clamp(10px, 3vw, 24px); }
.mt-cmd {
	font-family: var(--mt-mono) !important;
	font-size: clamp(1rem, 2.2vw, 1.25rem) !important;
	font-weight: 500 !important;
	color: #fff;
	letter-spacing: 0 !important;
	margin-bottom: 1.2rem !important;
}
.mt-cmd::before { content: "$ "; color: var(--mt-green); }
.mt-cmd .mt-flag { color: var(--mt-cyan); }
.mt-lede { color: var(--mt-muted); }

/* cards */
.mt-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.mt-card {
	position: relative;
	background: rgba(12, 17, 24, .85);
	border: 1px solid var(--mt-line);
	border-radius: 8px;
	padding: 16px 18px;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mt-card:hover { border-color: rgba(61, 255, 154, .55); box-shadow: var(--mt-glow); transform: translateY(-2px); }
.mt-card h3, .mt-card h4 { margin: 0 0 .35rem; font-size: 1.05rem; color: #fff; }
.mt-card p { margin: 0; color: var(--mt-muted); font-size: .92rem; }
.mt-card .mt-tag {
	font-family: var(--mt-mono);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--mt-cyan);
}

/* game server status rows */
.mt-servers { font-family: var(--mt-mono); font-size: .92rem; }
.mt-servers li { list-style: none; display: flex; gap: .7rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px dashed var(--mt-line); }
.mt-servers ul { padding: 0; margin: 0; }
.mt-servers .dot { color: var(--mt-green); text-shadow: 0 0 10px rgba(61, 255, 154, .8); }
.mt-servers .name { color: #fff; min-width: 15ch; }
.mt-servers .state { color: var(--mt-muted); margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) { .mt-servers li > .mt-dim { display: none; } .mt-servers .name { min-width: 0; } }

/* ------------------------------------------------------------ post lists ("log lines") */
.mt-log { margin: 0; padding: 0; }
.mt-log > li, .mt-log .wp-block-post {
	list-style: none;
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	gap: .2rem 1.2rem;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--mt-line);
}
.mt-log .wp-block-post-date { color: var(--mt-green); padding-top: .2rem; }
.mt-log .wp-block-post-date::before { content: "["; color: var(--mt-muted); }
.mt-log .wp-block-post-date::after { content: "]"; color: var(--mt-muted); }
.mt-log .wp-block-post-title { margin: 0; font-size: 1.25rem !important; line-height: 1.35; letter-spacing: 0; }
.mt-log .wp-block-post-title a { color: #fff; }
.mt-log .wp-block-post-title a:hover { color: var(--mt-green); }
.mt-log .wp-block-post-excerpt { grid-column: 2; margin: 0; color: var(--mt-muted); font-size: .95rem; }
.mt-log .wp-block-post-excerpt__more-text { margin-top: .4rem; }
.mt-log .wp-block-post-excerpt__more-link { font-family: var(--mt-mono); font-size: .85rem; }
@media (max-width: 640px) {
	.mt-log > li, .mt-log .wp-block-post { grid-template-columns: 1fr; }
	.mt-log .wp-block-post-excerpt { grid-column: 1; }
}

.wp-block-query-pagination { font-family: var(--mt-mono); margin-top: 2rem; }

/* ------------------------------------------------------------ single post / page */
.mt-doc-head { padding-top: clamp(32px, 7vw, 80px); }
.mt-doc-head .wp-block-post-title { font-size: clamp(2rem, 5.5vw, 3.4rem); margin-top: .4rem; }
.mt-meta { font-family: var(--mt-mono); font-size: .85rem; color: var(--mt-muted); }
.mt-meta .wp-block-post-terms a { color: var(--mt-cyan); }
.mt-doc .wp-block-post-content > * { margin-block-start: 1.25rem; }
.mt-doc .wp-block-post-content :where(h2, h3, h4)::before {
	content: "# ";
	color: var(--mt-green);
	font-family: var(--mt-mono);
	font-weight: 400;
}
.mt-doc img { border-radius: 8px; border: 1px solid var(--mt-line); }
.mt-doc .wp-block-columns .wp-block-column {
	background: rgba(12, 17, 24, .7);
	border: 1px solid var(--mt-line);
	border-radius: 8px !important;
	padding: 16px 18px !important;
}
.mt-eof { font-family: var(--mt-mono); color: var(--mt-muted); text-align: center; margin-top: 3rem; }
.wp-block-post-navigation-link, .wp-block-post-navigation-link a { font-family: var(--mt-mono); font-size: .9rem; }
.mt-doc :where(.wp-block-preformatted, pre:not(.wp-block-code)) {
	background: var(--mt-surface);
	border: 1px solid var(--mt-line);
	border-left: 3px solid var(--mt-green);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	color: var(--mt-green);
	overflow-x: auto;
}
.mt-doc .wp-block-column p { font-family: var(--mt-mono); font-size: .88rem; line-height: 1.75; }
.mt-doc .wp-block-columns .wp-block-column { border: 1px solid var(--mt-line) !important; }
.mt-doc .wp-block-post-content > .wp-block-heading.has-text-align-center { text-align: left; margin-top: 2.4rem; }

/* ------------------------------------------------------------ footer (vim status line) */
.mt-footer { margin-top: clamp(40px, 8vw, 90px); border-top: 1px solid var(--mt-line); background: rgba(6, 8, 12, .85); }
.mt-status {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	font-family: var(--mt-mono);
	font-size: .78rem;
	color: var(--mt-muted);
}
.mt-status > * { padding: .45rem .9rem; }
.mt-status .mode { background: var(--mt-green); color: #06080c; font-weight: 700; }
.mt-status .branch { background: var(--mt-surface-2); color: var(--mt-cyan); }
.mt-status .fill { flex: 1; }
.mt-status a { color: var(--mt-muted); }
.mt-status a:hover { color: var(--mt-green); }
.mt-footer-links { padding-top: 1.4rem; padding-bottom: 1.4rem; font-family: var(--mt-mono); font-size: .85rem; }
.mt-footer-links a { color: var(--wp--preset--color--text); }

@media (prefers-reduced-motion: reduce) {
	.mt-cursor, .mt-glitch::before, .mt-glitch::after { animation: none !important; }
	html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ about: neofetch + spec sheets */
.mt-nf { display: flex; gap: clamp(16px, 4vw, 44px); align-items: flex-start; flex-wrap: wrap; margin-top: .8rem; }
.mt-nf-logo {
	margin: 0;
	padding: 0;
	background: none !important;
	border: 0 !important;
	color: var(--mt-green);
	font-family: var(--mt-mono);
	font-size: clamp(.7rem, 1.6vw, .95rem);
	line-height: 1.25;
	text-shadow: 0 0 14px rgba(61, 255, 154, .45);
}
.mt-nf-info { margin: 0; font-family: var(--mt-mono); font-size: .9rem; min-width: 260px; flex: 1; }
.mt-nf-info > div { display: flex; gap: .6rem; padding: .12rem 0; }
.mt-nf-info dt { color: var(--mt-cyan); min-width: 10ch; }
.mt-nf-info dt::after { content: ":"; color: var(--mt-muted); }
.mt-nf-info dd { margin: 0; color: var(--wp--preset--color--text); }
.mt-nf-title { font-weight: 700; border-bottom: 1px solid var(--mt-line); padding-bottom: .35rem !important; margin-bottom: .3rem; }
.mt-host-c { color: var(--mt-cyan); }
.mt-nf-colors { gap: 0 !important; padding-top: .7rem !important; }
.mt-nf-colors i { width: 22px; height: 12px; display: inline-block; }
.mt-nf-colors i:nth-child(1) { background: #06080c; border: 1px solid var(--mt-line); }
.mt-nf-colors i:nth-child(2) { background: var(--mt-green); }
.mt-nf-colors i:nth-child(3) { background: var(--mt-cyan); }
.mt-nf-colors i:nth-child(4) { background: var(--mt-magenta); }
.mt-nf-colors i:nth-child(5) { background: var(--mt-amber); }
.mt-nf-colors i:nth-child(6) { background: #ffffff; }
.mt-intro { font-size: 1.1rem; }
.mt-intro:first-of-type { margin-top: 2rem !important; }

.mt-specs { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.mt-specs dl { margin: .7rem 0 0; display: grid; grid-template-columns: 7ch 1fr; gap: .28rem .8rem; font-family: var(--mt-mono); font-size: .85rem; }
.mt-specs dt { color: var(--mt-muted); }
.mt-specs dd { margin: 0; color: var(--wp--preset--color--text); }
.mt-card-accent { border-color: rgba(255, 79, 216, .45); box-shadow: 0 0 0 1px rgba(255, 79, 216, .15), 0 0 26px rgba(255, 79, 216, .10); }
.mt-card-accent .mt-tag { color: var(--mt-magenta); }