/*
Theme Name: LulzSec Cloud
Theme URI: https://lulzsec.cloud
Description: Dark cyberpunk terminal theme for lulzsec.cloud — black/charcoal with neon green accents, CRT styling, restrained matrix backdrop. Hand-authored CSS (no build step).
Version: 1.0.0
Author: JediSec
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: lulzsec-cloud
WPVibe: yes
*/

:root {
	--bg: #050806;
	--surface: #0a0f0a;
	--panel: #0d140d;
	--line: #163a20;
	--green: #00ff5f;
	--green-bright: #5bff93;
	--green-dim: #1f7a3d;
	--amber: #ffb000;
	--ink: #c3e8cb;
	--ink-dim: #6d8a74;
	--font-display: "VT323", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background-color: var(--bg);
	background-image:
		radial-gradient(ellipse 80% 55% at 50% -10%, rgba(0,255,95,0.10), transparent 60%),
		radial-gradient(ellipse 70% 60% at 100% 110%, rgba(0,255,95,0.06), transparent 60%);
	background-attachment: fixed;
	color: var(--ink);
	font-family: var(--font-mono);
	letter-spacing: 0.01em;
	line-height: 1.5;
}
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 60;
	pointer-events: none;
	background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px, rgba(0,0,0,0) 4px);
	mix-blend-mode: multiply;
	animation: crt-flicker 4s infinite steps(60);
}
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0.02em;
	margin: 0;
}
p { margin: 0; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-bright); }
img { max-width: 100%; height: auto; }
::selection { background: var(--green); color: #00140a; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #050806; }
::-webkit-scrollbar-thumb { background: var(--green-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

@keyframes crt-flicker {
	0%, 100% { opacity: 0.55; }
	48% { opacity: 0.55; }
	50% { opacity: 0.42; }
	52% { opacity: 0.55; }
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	body::after { animation: none; }
	html { scroll-behavior: auto; }
}

/* ---------- components ---------- */
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }
.above { position: relative; z-index: 1; }

.tag {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: var(--green-dim);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 0.7rem 1.5rem;
	border: 1px solid var(--green);
	color: var(--green);
	background: transparent;
	transition: all 0.15s ease;
}
.btn:hover { background: var(--green); color: #00140a; box-shadow: 0 0 20px rgba(0,255,95,0.45); }
.btn-solid { background: var(--green); color: #00140a; }
.btn-solid:hover { background: var(--green-bright); color: #00140a; }

.panel {
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 1.75rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.panel:hover { border-color: var(--green-dim); box-shadow: 0 0 24px rgba(0,255,95,0.08); }

.hero-title { text-shadow: 0 0 26px rgba(0,255,95,0.45); }
.spaced { letter-spacing: 0.3em; }

.cursor::after { content: "_"; margin-left: 2px; color: var(--green); animation: blink 1.1s steps(1) infinite; }

.brand::before { content: "\003E_"; margin-right: 0.5rem; color: var(--green); font-family: var(--font-mono); font-size: 1.1rem; }

.ico { position: relative; display: inline-block; width: 2.25rem; height: 2.25rem; border: 1px solid var(--green-dim); }
.ico::after { content: ""; position: absolute; inset: 0.55rem; background: var(--green); box-shadow: 0 0 12px rgba(0,255,95,0.5); }

header nav a { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; color: var(--ink); position: relative; }
header nav a:hover { color: var(--green); }
header nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--green); transition: width 0.2s ease; }
header nav a:hover::after { width: 100%; }
header nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }

#matrix { position: fixed; inset: 0; z-index: 0; opacity: 0.12; pointer-events: none; }

/* ---------- layout utilities ---------- */
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.min-h-screen { min-height: 100vh; }

.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-7 { gap: 1.75rem; }
.gap-10 { gap: 2.5rem; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-xs { max-width: 20rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }

.pt-24 { padding-top: 6rem; }
.pb-28 { padding-bottom: 7rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-16 { margin-top: 4rem; }
.mt-24 { margin-top: 6rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }
.ml-2 { margin-left: 0.5rem; }

.space-y-1 div { margin-top: 0.25rem; }
.space-y-1 div:first-child { margin-top: 0; }
.space-y-4 p { margin-top: 1rem; }
.space-y-4 p:first-child { margin-top: 0; }

/* ---------- type utilities ---------- */
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.leading-none { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.tracking-wide { letter-spacing: 0.025em; }
.no-underline { text-decoration: none; }
.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
.font-bold { font-weight: 700; }

.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.85rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.9rem; }
.text-4xl { font-size: 2.4rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.text-8xl { font-size: 6rem; }

/* ---------- color utilities ---------- */
.text-ink { color: var(--ink); }
.text-ink-dim { color: var(--ink-dim); }
.text-green { color: var(--green); }
.text-amber { color: var(--amber); }
.text-neutral { color: var(--ink); }
.text-primary { color: var(--green); }
.text-secondary-500 { color: var(--ink-dim); }
.text-secondary-600 { color: #8aa891; }
.hover\:text-primary:hover { color: var(--green); }

.bg-bg { background-color: var(--bg); }
.bg-surface { background-color: var(--surface); }
.bg-panel { background-color: var(--panel); }
.bg-background { background-color: var(--bg); }
.bg-bg\/80 { background-color: rgba(5,8,6,0.8); }
.bg-surface\/50 { background-color: rgba(10,15,10,0.5); }
.bg-gradient-to-br { background-color: var(--surface); }

.border { border: 1px solid var(--line); }
.border-t { border-top: 1px solid var(--line); }
.border-b { border-bottom: 1px solid var(--line); }
.border-line { border-color: var(--line); }
.border-secondary-200 { border-color: var(--line); }

.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }

/* ---------- position / effect ---------- */
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-30 { z-index: 30; }
.backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.transition-colors { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
.group:hover .group-hover\:text-green { color: var(--green); }

/* ---------- prose (post/page content) ---------- */
.prose { color: var(--ink); line-height: 1.7; max-width: 65ch; }
.prose p { margin: 0 0 1rem; }
.prose a { color: var(--green); text-decoration: underline; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.1; margin: 1.75rem 0 0.75rem; }
.prose ul, .prose ol { margin: 0 0 1rem 1.25rem; }
.prose li { margin: 0.25rem 0; }
.prose code { font-family: var(--font-mono); color: var(--green); }
.prose blockquote { border-left: 2px solid var(--green-dim); padding-left: 1rem; color: var(--ink-dim); margin: 1rem 0; }

/* ---------- responsive ---------- */
@media (min-width: 640px) {
	.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
	.md\:block { display: block; }
	.md\:flex-row { flex-direction: row; }
	.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.md\:text-2xl { font-size: 1.5rem; }
	.md\:text-5xl { font-size: 3rem; }
	.md\:text-8xl { font-size: 6rem; }
}
@media (min-width: 1024px) {
	.lg\:inline { display: inline; }
	.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}