/*
Theme Name: Retro CRT (Old Computer Blog)
Theme URI: https://example.com/retro-crt
Author: ChatGPT
Author URI: https://openai.com/
Description: A lightweight, classic WordPress theme with vintage terminal aesthetics (green/amber monochrome, scanlines, pixel fonts) designed for an old-computer blog. Accessible, fast, and SEO-friendly.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: retro-crt
*/

/* ---- Base Reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 16px; }
body {
  margin: 0;
  color: #a7ff9b; /* phosphor green */
  background: #0b0f0c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

/* Optional pixel font (if "Press Start 2P" loaded) */
.pixel { font-family: "Press Start 2P", ui-monospace, monospace; }

/* ---- Layout ---- */
.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.25rem;
}

.site-header {
  position: relative;
  border: 2px solid #0f3;
  border-top: 0;
  margin: 0;
  background: #051006;
  box-shadow: 0 0 0 4px #031a05 inset;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: 1rem 1.25rem 0.5rem 1.25rem;
}

.brand a {
  color: #a7ff9b;
  text-decoration: none;
}

.site-title {
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.site-description {
  opacity: .85;
  font-size: .95rem;
}

.crt-frame {
  border: 2px solid #0f3;
  border-radius: 6px;
  padding: 0;
  margin: 1rem 0;
  position: relative;
  background: #071208 radial-gradient(ellipse at center, rgba(35, 90, 35, .18), rgba(0,0,0,0) 60%);
  overflow: hidden;
}

/* Scanlines + glow */
.crt-frame::before,
.crt-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crt-frame::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 128, 0.06),
    rgba(0, 255, 128, 0.06) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: screen;
}

.crt-frame::after {
  background: radial-gradient(ellipse at center, rgba(130, 255, 170, .12), rgba(0,0,0,0) 60%);
  filter: blur(0.5px);
}

nav.primary {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.25rem;
  padding: .75rem 1.25rem 1rem 1.25rem;
  border-top: 2px solid #0f3;
}

nav.primary a {
  color: #a7ff9b;
  text-decoration: none;
  border-bottom: 1px dashed #0f3;
}

header .controls {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-left: auto;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 2px solid #0f3;
  padding: .35rem .6rem;
  background: #031a05;
  color: #a7ff9b;
  text-decoration: none;
  font-size: .9rem;
  cursor: pointer;
}

.button:hover { filter: brightness(1.1); }

/* ---- Main ---- */
main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 960px) {
  main {
    grid-template-columns: 2fr 1fr;
  }
}

.sidebar { position: sticky; top: 1rem; height: fit-content; }

.widget {
  border: 2px solid #0f3;
  padding: .9rem;
  margin-bottom: 1rem;
  background: #061107;
}

.widget-title {
  margin-top: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---- Posts ---- */
.post-card, .single-post {
  border: 2px solid #0f3;
  padding: 1rem 1.2rem;
  background: #061107;
}

.post-card + .post-card { margin-top: 1rem; }

.post-title a, .post-title {
  color: #a7ff9b;
  text-decoration: none;
}

.post-meta {
  font-size: .9rem;
  opacity: .9;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  border-top: 1px dashed #0f3;
  padding-top: .5rem;
  margin-top: .5rem;
}

.post-tags a { color: #7dffcf; text-decoration: none; }

.read-more {
  display: inline-block;
  margin-top: .75rem;
}

/* Code block terminal look */
pre, code, kbd, samp {
  font-family: ui-monospace, Menlo, Monaco, monospace;
}

pre {
  background: #021703;
  color: #b3ffc0;
  padding: .9rem;
  border: 2px solid #0f3;
  overflow: auto;
}

/* ---- Footer ---- */
.site-footer {
  margin-top: 2rem;
  padding: 1.5rem 1.25rem 3rem 1.25rem;
  border-top: 2px solid #0f3;
  text-align: center;
  background: #051006;
}

/* ---- Links & Accents ---- */
a { color: #7dffcf; }
a:hover { text-decoration: underline; }

hr {
  border: 0;
  border-top: 2px dashed #0f3;
  margin: 1rem 0;
}

/* ---- Forms ---- */
input, select, textarea, button {
  background: #041b05;
  color: #a7ff9b;
  border: 2px solid #0f3;
  padding: .5rem .6rem;
  width: 100%;
}

.search-form { display: flex; gap: .5rem; }
.search-form input[type="search"] { flex: 1; }
.search-form input[type="submit"] { width: auto; cursor: pointer; }

/* ---- Accessibility ---- */
:focus { outline: 3px dashed #0f3; outline-offset: 2px; }

/* ---- Color schemes (green default / amber / grayscale) ---- */
:root {
  --crt-border: #0f3;
  --crt-text: #a7ff9b;
  --crt-accent: #7dffcf;
  --crt-bg: #0b0f0c;
}

body.scheme-amber {
  color: #ffd27d;
  background: #0f0a02;
}
body.scheme-amber .widget,
body.scheme-amber .post-card,
body.scheme-amber .single-post,
body.scheme-amber .site-header { background: #1a1206; }
body.scheme-amber a { color: #ffe0a9; }
body.scheme-amber .crt-frame,
body.scheme-amber .post-card,
body.scheme-amber .widget,
body.scheme-amber .site-header,
body.scheme-amber .site-footer { border-color: #f7a81f; }
body.scheme-amber pre { border-color: #f7a81f; background: #1d1404; color: #ffe9bf; }

body.scheme-gray {
  color: #e7e7e7;
  background: #111;
}
body.scheme-gray .widget,
body.scheme-gray .post-card,
body.scheme-gray .single-post,
body.scheme-gray .site-header { background: #151515; }
body.scheme-gray a { color: #cfcfcf; }
body.scheme-gray .crt-frame,
body.scheme-gray .post-card,
body.scheme-gray .widget,
body.scheme-gray .site-header,
body.scheme-gray .site-footer { border-color: #999; }
body.scheme-gray pre { border-color: #999; background: #0f0f0f; color: #e7e7e7; }

/* ---- Pagination ---- */
.pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 1.2rem; }
.pagination a, .pagination span {
  border: 2px solid #0f3;
  padding: .35rem .6rem;
  text-decoration: none;
}
.pagination .current { background: #031a05; }