/* =====================================================================
   ADELE THEME — CYBERPUNK / GLITCH DESIGN SYSTEM
   High-Tech, Low-Life. Digital Dystopia. Neon-drenched megacity aesthetic.
   ===================================================================== */

/* --- Fonts: Orbitron + JetBrains Mono + Share Tech Mono --- */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Share+Tech+Mono&display=swap');

/* =====================================================================
   CYBERPUNK DESIGN TOKENS
   ===================================================================== */
:root {
  /* Core Palette */
  --cyber-bg:               #0a0a0f;
  --cyber-card:             #12121a;
  --cyber-muted:            #1c1c2e;
  --cyber-fg:               #e0e0e0;
  --cyber-fg-muted:         #6b7280;

  /* Neon Accents */
  --cyber-accent:           #00ff88;   /* Electric green */
  --cyber-accent-secondary: #ff00ff;   /* Hot magenta */
  --cyber-accent-tertiary:  #00d4ff;   /* Cyan/electric blue */
  --cyber-destructive:      #ff3366;   /* Danger red */

  /* Borders */
  --cyber-border:           #2a2a3a;
  --cyber-border-accent:    rgba(0, 255, 136, 0.35);

  /* Typography */
  --font-display:  'Orbitron', 'Share Tech Mono', monospace;
  --font-body:     'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-label:    'Share Tech Mono', monospace;

  /* Neon Glows */
  --glow-sm:       0 0 3px #00ff88, 0 0 6px #00ff8830;
  --glow-md:       0 0 5px #00ff88, 0 0 10px #00ff8840, 0 0 20px #00ff8820;
  --glow-lg:       0 0 10px #00ff88, 0 0 20px #00ff8860, 0 0 40px #00ff8830;
  --glow-magenta:  0 0 5px #ff00ff, 0 0 20px #ff00ff60;
  --glow-cyan:     0 0 5px #00d4ff, 0 0 20px #00d4ff60;
  --glow-text:     0 0 10px rgba(0,255,136,0.5), 0 0 20px rgba(0,255,136,0.3);

  /* Chamfered corner clip-path */
  --chamfer: polygon(
    0 10px, 10px 0,
    calc(100% - 10px) 0, 100% 10px,
    100% calc(100% - 10px), calc(100% - 10px) 100%,
    10px 100%, 0 calc(100% - 10px)
  );
  --chamfer-sm: polygon(
    0 6px, 6px 0,
    calc(100% - 6px) 0, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 0 calc(100% - 6px)
  );
}

/* =====================================================================
   KEYFRAME ANIMATIONS
   ===================================================================== */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes glitch {
  0%, 100% { transform: translate(0); clip-path: none; }
  20%       { transform: translate(-2px, 2px) skew(-1deg); }
  40%       { transform: translate(2px, -2px) skew(0.5deg); }
  60%       { transform: translate(-1px, -1px); }
  80%       { transform: translate(1px, 1px); }
}

@keyframes rgbShift {
  0%, 100% { text-shadow: -2px 0 #ff00ff, 2px 0 #00d4ff, var(--glow-text); }
  50%       { text-shadow:  2px 0 #ff00ff, -2px 0 #00d4ff, var(--glow-text); }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes neonPulse {
  0%, 100% { box-shadow: var(--glow-sm); }
  50%       { box-shadow: var(--glow-lg); }
}

@keyframes borderGlow {
  0%   { border-color: var(--cyber-accent); }
  50%  { border-color: var(--cyber-accent-tertiary); }
  100% { border-color: var(--cyber-accent); }
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.4; }
}

/* =====================================================================
   GLOBAL SCANLINES + BASE RESET
   ===================================================================== */
html {
  background-color: var(--cyber-bg) !important;
  color: var(--cyber-fg) !important;
  font-family: var(--font-body) !important;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

/* Full-page scanline overlay */
html::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
}

body {
  background-color: var(--cyber-bg) !important;
  color: var(--cyber-fg) !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  position: relative;
  min-height: 100vh;
}

/* Circuit grid background on the main content */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 255, 136, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 136, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Radial accent glows in corners */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 10% 10%, rgba(0,255,136,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(255,0,255,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 10%, rgba(0,212,255,0.03) 0%, transparent 40%);
}

/* Everything above fixed overlays */
#page, #wrapper, .header, .footer, main, #main, #content {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   LAYOUT
   ===================================================================== */
#page {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

#wrapper {
  padding-inline: 1rem !important;
}

/* =====================================================================
   GLOBAL LINKS
   ===================================================================== */
a, a:link, a:visited {
  color: var(--cyber-accent) !important;
  text-decoration: none !important;
  border: none !important;
  transition: color 150ms cubic-bezier(0.4,0,0.2,1),
              text-shadow 150ms cubic-bezier(0.4,0,0.2,1) !important;
  font-family: var(--font-body) !important;
}

a:hover {
  color: var(--cyber-accent) !important;
  text-shadow: var(--glow-text) !important;
  border: none !important;
}

a:focus-visible {
  outline: 2px solid var(--cyber-accent) !important;
  outline-offset: 3px !important;
  box-shadow: var(--glow-sm) !important;
}

/* =====================================================================
   HEADER & BANNER
   ===================================================================== */
.header {
  position: relative;
  overflow: hidden;
}

/* Scanline pass animation on header */
.header::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 40px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,255,136,0.06),
    transparent
  );
  animation: scanline 4s linear infinite;
}

.banner {
  background: rgba(18, 18, 26, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--cyber-accent) !important;
  border-radius: 0 !important;
  clip-path: var(--chamfer) !important;
  margin: 1rem !important;
  padding: 1.5rem 2rem 1.25rem !important;
  box-shadow: var(--glow-md), inset 0 0 40px rgba(0,255,136,0.025) !important;
  transition: box-shadow 300ms !important;
  animation: neonPulse 4s ease-in-out infinite !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Corner accent marks */
.banner::before,
.banner::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--cyber-accent-tertiary);
  border-style: solid;
  opacity: 0.7;
}
.banner::before {
  top: 6px; right: 6px;
  border-width: 2px 2px 0 0;
}
.banner::after {
  bottom: 6px; left: 6px;
  border-width: 0 0 2px 2px;
}

.site-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(1.5rem, 4vw, 2.8rem) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
  color: var(--cyber-accent) !important;
  animation: rgbShift 4s ease-in-out infinite !important;
}

.site-title a,
.site-title__link,
.site-title__link:link,
.site-title__link:visited {
  color: var(--cyber-accent) !important;
  border: none !important;
  text-decoration: none !important;
  -webkit-text-fill-color: var(--cyber-accent) !important;
}

.site-title a:hover {
  text-shadow: var(--glow-lg) !important;
}

/* Blinking cursor after title */
.site-title::after {
  content: '_';
  animation: blink 1s step-end infinite;
  color: var(--cyber-accent);
  font-weight: 400;
}

.site-baseline {
  font-family: var(--font-label) !important;
  color: var(--cyber-fg-muted) !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  margin-top: 0.5rem !important;
}

/* Terminal prefix on baseline */
.site-baseline::before {
  content: '> ';
  color: var(--cyber-accent-tertiary);
}

.skip-links {
  font-family: var(--font-label) !important;
  font-size: 0.75rem !important;
}

.skip-links a {
  color: var(--cyber-fg-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  border: none !important;
  transition: color 150ms !important;
}

.skip-links a:hover {
  color: var(--cyber-accent) !important;
}

/* =====================================================================
   NAVIGATION
   ===================================================================== */
nav, .nav, [role="navigation"] {
  font-family: var(--font-label) !important;
}

nav a, .nav a {
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.85rem !important;
  color: var(--cyber-fg-muted) !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 2px !important;
  transition: all 150ms !important;
}

nav a:hover, .nav a:hover,
nav a.active, .nav a.active {
  color: var(--cyber-accent) !important;
  border-bottom-color: var(--cyber-accent) !important;
  text-shadow: var(--glow-text) !important;
}

/* =====================================================================
   CHAPTER / MONTH SEPARATORS
   ===================================================================== */
.chapter-separator {
  margin-block: 2.5rem 1.5rem !important;
  position: relative;
}

.chapter-title {
  font-family: var(--font-label) !important;
  color: var(--cyber-accent-tertiary) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  text-shadow: var(--glow-cyan) !important;
}

/* Terminal-style chapter separator line */
.chapter-title::before {
  content: '//  ';
  color: var(--cyber-fg-muted);
  letter-spacing: 0;
}

.chapter-title::after {
  background: linear-gradient(
    to right,
    var(--cyber-accent-tertiary),
    transparent
  ) !important;
  height: 1px !important;
  opacity: 0.4 !important;
}

/* =====================================================================
   POSTS GRID (HOME CARDS)
   ===================================================================== */
.posts-group {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 1.5rem !important;
  margin-block: 2rem !important;
  width: 100% !important;
  flex: unset !important;
  flex-wrap: unset !important;
  align-items: unset !important;
}

/* POST CARD */
.posts-group .post {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--cyber-card) !important;
  border: 1px solid var(--cyber-border) !important;
  border-radius: 0 !important;
  clip-path: var(--chamfer) !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: all 200ms cubic-bezier(0.4,0,0.2,1) !important;
  flex: unset !important;
}

/* Corner accent marks on cards */
.posts-group .post::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  clip-path: var(--chamfer);
  border: 1px solid var(--cyber-border);
  z-index: 0;
  pointer-events: none;
  transition: border-color 200ms, box-shadow 200ms;
}

.posts-group .post:hover {
  transform: translateY(-3px) !important;
  border-color: var(--cyber-accent) !important;
  box-shadow: var(--glow-md) !important;
}

.posts-group .post:hover::before {
  border-color: var(--cyber-accent);
  box-shadow: var(--glow-sm);
}

/* Terminal-style header bar */
.posts-group .post-header {
  padding: 0.75rem 1.25rem 0.5rem !important;
  background: rgba(0,255,136,0.03) !important;
  border-bottom: 1px solid var(--cyber-border) !important;
  border-radius: 0 !important;
  min-height: unset !important;
  position: relative;
  z-index: 1;
}

/* Traffic light dots (terminal window style) */
.posts-group .post-header::before {
  content: '● ● ●';
  font-size: 0.5rem;
  color: var(--cyber-fg-muted);
  letter-spacing: 4px;
  display: block;
  margin-bottom: 0.4rem;
  line-height: 1;
}

.posts-group .post-title {
  font-family: var(--font-display) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.3 !important;
  color: var(--cyber-fg) !important;
}

.posts-group .post-title a {
  color: var(--cyber-fg) !important;
  -webkit-text-fill-color: var(--cyber-fg) !important;
  font-weight: 700 !important;
}

.posts-group .post-title a:hover {
  color: var(--cyber-accent) !important;
  -webkit-text-fill-color: var(--cyber-accent) !important;
  text-shadow: var(--glow-text) !important;
}

.posts-group .post-date {
  font-family: var(--font-label) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  color: var(--cyber-accent-tertiary) !important;
  background: transparent !important;
  border: 1px solid rgba(0,212,255,0.25) !important;
  border-radius: 0 !important;
  padding: 1px 8px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  clip-path: var(--chamfer-sm) !important;
}

.posts-group .post-content {
  padding: 1rem 1.25rem !important;
  flex: 1 !important;
  color: var(--cyber-fg-muted) !important;
  font-size: 0.875rem !important;
  line-height: 1.7 !important;
  position: relative;
  z-index: 1;
}

.posts-group .post-content::before {
  content: '$ ';
  color: var(--cyber-accent);
  font-family: var(--font-label);
  font-size: 0.8rem;
}

.posts-group .post-content a:link,
.posts-group .post-content a:visited {
  color: var(--cyber-accent) !important;
  -webkit-text-fill-color: var(--cyber-accent) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0,255,136,0.4) !important;
  text-underline-offset: 3px !important;
}

.posts-group .go-post {
  margin: 0 !important;
  padding: 0.75rem 1.25rem !important;
  text-align: end !important;
  border-top: 1px solid var(--cyber-border) !important;
  position: relative;
  z-index: 1;
}

.posts-group .go-post a,
.posts-group .arr {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--font-label) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 4px 12px !important;
  border-radius: 0 !important;
  clip-path: var(--chamfer-sm) !important;
  background: transparent !important;
  border: 1px solid var(--cyber-accent) !important;
  color: var(--cyber-accent) !important;
  -webkit-text-fill-color: var(--cyber-accent) !important;
  transition: all 150ms cubic-bezier(0.4,0,0.2,1) !important;
}

.posts-group .go-post a:hover,
.posts-group .arr:hover {
  background: var(--cyber-accent) !important;
  color: var(--cyber-bg) !important;
  -webkit-text-fill-color: var(--cyber-bg) !important;
  box-shadow: var(--glow-md) !important;
}

/* =====================================================================
   SINGLE POST PAGE
   ===================================================================== */
.simple {
  background-color: var(--cyber-card) !important;
  border: 1px solid var(--cyber-border) !important;
  border-radius: 0 !important;
  clip-path: var(--chamfer) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.post-banner .post-header {
  background: rgba(0,255,136,0.03) !important;
  border-bottom: 1px solid var(--cyber-border) !important;
  border-radius: 0 !important;
}

.post-banner .post-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--cyber-fg) !important;
  animation: rgbShift 6s ease-in-out infinite !important;
}

/* =====================================================================
   BLOCKQUOTE
   ===================================================================== */
blockquote {
  background: rgba(0,212,255,0.04) !important;
  border-left: 3px solid var(--cyber-accent-tertiary) !important;
  border-radius: 0 !important;
  padding: 1rem 1.5rem !important;
  color: var(--cyber-fg-muted) !important;
  font-style: normal !important;
  font-family: var(--font-label) !important;
  position: relative;
}

blockquote::before {
  content: '// QUOTE';
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--cyber-accent-tertiary);
  margin-bottom: 0.5rem;
  text-shadow: var(--glow-cyan);
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  font-family: var(--font-label) !important;
  font-weight: 400 !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 0.45rem 1rem !important;
  border-radius: 0 !important;
  clip-path: var(--chamfer-sm) !important;
  border: 1px solid var(--cyber-accent) !important;
  background-color: transparent !important;
  color: var(--cyber-accent) !important;
  cursor: pointer !important;
  transition: all 150ms cubic-bezier(0.4,0,0.2,1) !important;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--cyber-accent) !important;
  color: var(--cyber-bg) !important;
  box-shadow: var(--glow-md) !important;
}

.submit:not(.widget-footer *),
button[type="submit"] {
  background-color: transparent !important;
  border-color: var(--cyber-accent) !important;
  color: var(--cyber-accent) !important;
}

.submit:not(.widget-footer *):hover,
button[type="submit"]:hover {
  background-color: var(--cyber-accent) !important;
  color: var(--cyber-bg) !important;
  box-shadow: var(--glow-lg) !important;
}

/* =====================================================================
   FORM INPUTS
   ===================================================================== */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  font-family: var(--font-body) !important;
  background-color: var(--cyber-card) !important;
  color: var(--cyber-accent) !important;
  border: 1px solid var(--cyber-border) !important;
  border-radius: 0 !important;
  clip-path: var(--chamfer-sm) !important;
  padding: 0.45rem 0.75rem 0.45rem 1.75rem !important;
  transition: all 150ms cubic-bezier(0.4,0,0.2,1) !important;
  font-size: 0.875rem !important;
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"])::placeholder,
textarea::placeholder {
  color: var(--cyber-fg-muted) !important;
  opacity: 0.6 !important;
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--cyber-accent) !important;
  box-shadow: var(--glow-sm) !important;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  margin