/* ============================================
   RETRO-TERMINAL THEME — patricknelson-devops.net
   ============================================ */

/* --- Color Palette --- */
:root {
  --terminal-bg: #0a0a0a;
  --terminal-green: #33ff33;
  --terminal-green-dim: #1a9e1a;
  --terminal-green-bright: #66ff66;
  --terminal-amber: #ffb000;
  --terminal-cyan: #00e5ff;
  --terminal-text: #c0ffc0;
  --terminal-muted: #2a6e2a;
  --terminal-border: #1a5c1a;
  --terminal-link: #33ff33;
  --terminal-link-hover: #66ff66;
  --terminal-selection-bg: #1a5c1a;
  --terminal-selection-text: #66ff66;
}

/* --- Base Reset & Body --- */
body {
  background-color: var(--terminal-bg) !important;
  color: var(--terminal-text) !important;
  font-family: 'IBM Plex Mono', 'Fira Code', 'Courier New', monospace !important;
  line-height: 1.7;
}

::selection {
  background: var(--terminal-selection-bg);
  color: var(--terminal-selection-text);
}

/* --- Links --- */
a {
  color: var(--terminal-link) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed var(--terminal-muted);
  transition: all 0.2s ease;
}

a:hover {
  color: var(--terminal-link-hover) !important;
  border-bottom-style: solid;
  text-shadow: 0 0 8px var(--terminal-green);
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--terminal-text) !important;
  text-shadow:
    0 0 4px rgba(51, 255, 51, 0.2);
}

h1 {
  font-family: 'Press Start 2P', cursive !important;
  font-size: 1.2rem !important;
  line-height: 1.8 !important;
}

h2 {
  font-family: 'Press Start 2P', cursive !important;
  font-size: 0.9rem !important;
  line-height: 1.8 !important;
}

h3 {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

/* --- Pixel Font Utility --- */
.pixel-font {
  font-family: 'Press Start 2P', cursive;
  letter-spacing: 1px;
}

/* --- CRT Scanline Overlay --- */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* --- Subtle Screen Flicker --- */
@keyframes flicker {
  0%   { opacity: 0.97; }
  50%  { opacity: 1.00; }
  100% { opacity: 0.98; }
}

.crt-container {
  animation: flicker 4s infinite;
}

/* --- Blinking Cursor --- */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  background: var(--terminal-green);
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}

/* --- Container Override --- */
.container {
  background-color: var(--terminal-bg) !important;
}

/* --- Navigation Override --- */
nav a, .menu a, header a {
  color: var(--terminal-green) !important;
  border-bottom: none !important;
  font-family: 'IBM Plex Mono', monospace;
}

nav a:hover, .menu a:hover, header a:hover {
  color: var(--terminal-amber) !important;
  text-shadow: 0 0 8px var(--terminal-amber);
}

/* --- Mobile Dropdown Menu --- */
/* Tailwind's compiled CSS lacks the arbitrary bg-[#0a0a0a] class,
   so we apply terminal-black and z-index here instead. */
@media not all and (min-width: 1024px) {
  .dropdown-menu {
    background-color: var(--terminal-bg) !important;
    z-index: 40;
  }
}

/* --- Code Blocks --- */
pre, code {
  background-color: #111 !important;
  color: var(--terminal-green) !important;
  border: 1px solid var(--terminal-border) !important;
  font-family: 'IBM Plex Mono', monospace !important;
}

pre {
  padding: 1rem !important;
  border-radius: 0 !important;
}

/* --- Borders & Dividers --- */
hr {
  border-color: var(--terminal-border);
}

/* --- Lists --- */
ul, ol {
  color: var(--terminal-text);
}

li::marker {
  color: var(--terminal-green-dim);
}

/* --- Blockquotes --- */
blockquote {
  border-left: 3px solid var(--terminal-green-dim);
  color: var(--terminal-muted);
  padding-left: 1rem;
}

/* --- Strong / Bold --- */
strong, b {
  color: var(--terminal-green-bright);
}

/* --- Emphasis / Italic --- */
em, i {
  color: var(--terminal-amber);
}

/* ============================================
   HOME PAGE
   ============================================ */

/* Matrix canvas */
.matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: #0a0a0a;
  cursor: pointer;
}

/* Home page layout */
.home-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  max-width: 720px;
  margin: 0 auto;
}

.site-title {
  font-size: 1.4rem !important;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px var(--terminal-green), 0 0 20px rgba(51,255,51,0.2);
}

.tagline {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--terminal-amber);
  font-size: 1rem;
  margin-bottom: 2rem;
}

.home-grid {
  margin: 1.5rem 0;
}

.grid-item {
  padding: 0.4rem 0;
  font-family: 'IBM Plex Mono', monospace;
}

.grid-item .prompt {
  color: var(--terminal-green);
  margin-right: 0.5rem;
}

.grid-item .desc {
  color: var(--terminal-muted);
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.social-bar {
  margin: 1.5rem 0;
  padding: 0.8rem 0;
  border-top: 1px solid var(--terminal-border);
  border-bottom: 1px solid var(--terminal-border);
}

.social-bar .prompt {
  color: var(--terminal-green-dim);
  margin-right: 0.75rem;
}

.social-bar a {
  margin-right: 1rem;
  font-size: 0.85rem;
}

.home-footer-text {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--terminal-text);
}

.muted {
  color: var(--terminal-muted);
}

/* ============================================
   RESUME PAGE — Apple II–style CRT Monitor
   ============================================ */

/* Beige plastic palette */
:root {
  --beige:        #c8b88a;
  --beige-light:  #d9ccaa;
  --beige-dark:   #a89868;
  --beige-shadow: #8a7c56;
  --beige-edge:   #b5a67a;
  --plastic-hi:   rgba(255, 255, 255, 0.15);
  --plastic-lo:   rgba(0, 0, 0, 0.12);
}

.crt-monitor {
  max-width: 820px;
  margin: 2rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Case top: chunky beige slab --- */
.crt-case-top {
  width: 100%;
  height: 28px;
  background: linear-gradient(180deg, var(--beige-light) 0%, var(--beige) 40%, var(--beige-dark) 100%);
  border-radius: 14px 14px 0 0;
  border: 2px solid var(--beige-shadow);
  border-bottom: none;
  box-shadow:
    inset 0 2px 0 var(--plastic-hi),
    0 -2px 8px rgba(0, 0, 0, 0.3);
}

/* --- Case middle: holds the screen --- */
.crt-case-middle {
  width: 100%;
  background: linear-gradient(180deg, var(--beige) 0%, var(--beige-dark) 100%);
  border-left: 2px solid var(--beige-shadow);
  border-right: 2px solid var(--beige-shadow);
  padding: 0 1rem;
  box-shadow:
    inset 2px 0 0 var(--plastic-hi),
    inset -2px 0 0 var(--plastic-lo);
}

/* Dark inset bezel around the glass */
.crt-screen-bezel {
  background: #1a1a1a;
  border-radius: 10px;
  padding: 6px;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.8),
    inset 0 0 12px rgba(0, 0, 0, 0.5),
    0 1px 0 var(--plastic-hi);
}

/* The green phosphor glass */
.crt-screen {
  position: relative;
  overflow-y: auto;
  height: 65vh;
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  background: #020402;
  background-image:
    radial-gradient(ellipse at 50% 50%, #0a0f0a 0%, #040804 60%, #010201 100%);
  box-shadow:
    inset 0 0 80px rgba(51, 255, 51, 0.04),
    inset 0 0 6px rgba(51, 255, 51, 0.1),
    0 0 2px #000;
}

/* Scrollbar — thin green */
.crt-screen::-webkit-scrollbar { width: 5px; }
.crt-screen::-webkit-scrollbar-track { background: #020402; }
.crt-screen::-webkit-scrollbar-thumb {
  background: var(--terminal-green-dim);
  border-radius: 3px;
}

/* Scanlines on the glass */
.crt-scanlines {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  border-radius: 6px;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Phosphor bloom — faint green haze over the whole screen */
.crt-phosphor {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 3;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 50%, rgba(51, 255, 51, 0.02) 0%, transparent 70%);
}

/* Screen warm-up flicker on first load */
.crt-warmup {
  animation: warmup 1.2s ease-out;
}

@keyframes warmup {
  0%   { opacity: 0; filter: brightness(0); }
  20%  { opacity: 0.3; filter: brightness(2); }
  25%  { opacity: 0; filter: brightness(0); }
  45%  { opacity: 0.6; filter: brightness(1.5); }
  50%  { opacity: 0.1; filter: brightness(0.3); }
  70%  { opacity: 0.8; filter: brightness(1.2); }
  100% { opacity: 1; filter: brightness(1); }
}

/* Terminal content */
.crt-terminal {
  position: relative;
  z-index: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--terminal-text);
}

/* --- Case bottom: beige slab with LED --- */
.crt-case-bottom {
  width: 100%;
  background: linear-gradient(180deg, var(--beige-dark) 0%, var(--beige) 30%, var(--beige-light) 100%);
  border-left: 2px solid var(--beige-shadow);
  border-right: 2px solid var(--beige-shadow);
  border-bottom: 2px solid var(--beige-shadow);
  border-radius: 0 0 10px 10px;
  padding: 0.6rem 1.25rem 0.75rem;
  box-shadow:
    inset 0 -2px 0 var(--plastic-hi),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.crt-badge-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.crt-power-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terminal-green);
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow:
    0 0 4px var(--terminal-green),
    0 0 10px rgba(51, 255, 51, 0.4);
  animation: ledPulse 3s ease-in-out infinite;
}

@keyframes ledPulse {
  0%, 100% { box-shadow: 0 0 4px var(--terminal-green), 0 0 10px rgba(51, 255, 51, 0.4); }
  50%      { box-shadow: 0 0 2px var(--terminal-green), 0 0 4px rgba(51, 255, 51, 0.15); }
}

.crt-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

/* Chunky wedge foot */
.crt-foot {
  width: 60%;
  height: 14px;
  background: linear-gradient(180deg, var(--beige-dark) 0%, var(--beige-shadow) 100%);
  border-radius: 0 0 6px 6px;
  border: 2px solid var(--beige-shadow);
  border-top: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

/* --- Pager Content (inside screen) --- */

.pager-header {
  color: var(--terminal-green);
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--terminal-border);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.pager-header .prompt {
  color: var(--terminal-green-bright);
  margin-right: 0.4rem;
}

.pager-content {
  padding: 0.5rem 0;
}

.pager-line {
  padding: 1px 0;
}

.pager-spacer {
  height: 0.4rem;
}

.pager-h2 {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
  color: var(--terminal-green-bright);
  margin-top: 0.25rem;
  text-shadow: 0 0 10px rgba(51, 255, 51, 0.4);
}

.pager-h3 {
  font-family: 'Press Start 2P', cursive;
  font-size: 0.65rem;
  color: var(--terminal-green-bright);
  margin-top: 0.25rem;
  text-shadow: 0 0 6px rgba(51, 255, 51, 0.3);
}

.pager-h4 {
  color: var(--terminal-green);
  font-weight: 700;
  font-size: 0.85rem;
}

.pager-underline {
  color: var(--terminal-green-dim);
  font-size: 0.75rem;
  line-height: 1;
}

.pager-divider {
  color: var(--terminal-green-dim);
  font-size: 0.75rem;
  line-height: 1;
}

.pager-li {
  padding-left: 1rem;
}

.pager-li .li-marker {
  color: var(--terminal-green-dim);
  margin-right: 0.25rem;
}

/* Pager footer */
.pager-footer {
  padding: 0.5rem 0;
  border-top: 1px solid var(--terminal-border);
  margin-top: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.pager-more {
  color: var(--terminal-green-bright);
  font-weight: 700;
  animation: moreBlink 1.5s step-end infinite;
}

.pager-more.pager-end {
  animation: none;
  color: var(--terminal-muted);
}

.pager-percent {
  color: var(--terminal-green-dim);
  font-size: 0.8rem;
}

@keyframes moreBlink {
  0%, 70% { opacity: 1; }
  71%, 100% { opacity: 0.4; }
}

/* Download link & page info (on the beige bezel) */
.download-link {
  color: #4a4230 !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px dashed #8a7c56 !important;
  transition: all 0.2s ease;
}

.download-link:hover {
  color: #2a2210 !important;
  border-bottom-style: solid !important;
}

.download-link .prompt {
  color: #6a5c3a;
}

.pager-page-info {
  color: #7a6c4a;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 600px) {
  .site-title { font-size: 0.9rem !important; }
  .tagline { font-size: 0.85rem; }
  .grid-item .desc { display: block; margin-left: 1.5rem; }
  h1 { font-size: 0.9rem !important; }
  h2 { font-size: 0.75rem !important; }

  /* CRT monitor mobile */
  .crt-monitor { margin: 1rem 0.5rem; }
  .crt-case-top { height: 20px; border-radius: 10px 10px 0 0; }
  .crt-case-middle { padding: 0 0.5rem; }
  .crt-screen { padding: 0.75rem; height: 55vh; }
  .crt-terminal { font-size: 0.75rem; }
  .crt-case-bottom { padding: 0.5rem 0.75rem; }
  .crt-badge-row { gap: 0.5rem; }
  .crt-controls-row { flex-direction: column; gap: 0.4rem; align-items: flex-start; }
  .pager-h2 { font-size: 0.65rem; }
  .pager-h3 { font-size: 0.55rem; }
  .crt-foot { width: 70%; }
}