/*
Theme Name: LensGeeks Amber Terminal (TEST)
Theme URI: https://lensgeeks.com/
Description: TEST ONLY - a wildly different vintage amber computer terminal look for LensGeeks. Not the live theme. Preview only, do not activate on the live site without the owner's approval.
Version: 1.1
Author: Matthew Duclos
License: GNU General Public License v2 or later
Text Domain: lensgeeks-amber-terminal
*/

/* ========== AMBER TERMINAL ========== */
:root {
  --term-bg: #0d0a04;
  --term-panel: #141004;
  --term-amber: #ffb000;
  --term-amber-bright: #ffc93c;
  --term-amber-soft: #d9a441;
  --term-amber-dim: #8a5a00;
  --term-amber-faint: #5c430f;
  --term-line: #3a2c08;
}

* { box-sizing: border-box; }

html { background: var(--term-bg); }

body {
  margin: 0;
  background: var(--term-bg);
  color: var(--term-amber-soft);
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* CRT scanlines + vignette, non-interactive, subtle */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.22) 3px, rgba(0,0,0,0.22) 4px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.35) 100%);
  transition: opacity 0.25s ease;
}

/* Hovering any image hides the scanline/vignette overlay, so the image
   itself is shown clean while the cursor is over it. Moving off restores it. */
body:has(img:hover)::after,
body:has(figure:hover)::after { opacity: 0; }

a { color: var(--term-amber); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }
a:hover, a:focus { color: var(--term-amber-bright); text-shadow: 0 0 8px rgba(255,176,0,0.7); }

.term-wrap { max-width: 920px; margin: 0 auto; padding: 0 24px 80px; }

.site-header { border-bottom: 2px solid var(--term-amber-dim); padding: 32px 0 20px; margin-bottom: 32px; }
.site-title { font-family: "VT323", "Share Tech Mono", monospace; font-size: 64px; line-height: 1; letter-spacing: 4px; margin: 0; text-transform: uppercase; }
.site-title a { color: var(--term-amber); text-decoration: none; text-shadow: 0 0 14px rgba(255,176,0,0.55); }
.site-title .prompt { color: var(--term-amber-bright); }
.site-tagline { color: var(--term-amber-dim); font-size: 16px; letter-spacing: 1px; margin: 8px 0 0; text-transform: uppercase; }
.site-tagline::before { content: "> "; color: var(--term-amber); }

.main-nav { margin-top: 24px; border-top: 1px dashed var(--term-line); border-bottom: 1px dashed var(--term-line); padding: 10px 0; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.main-nav a { text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; }
.main-nav a::before { content: "[ "; color: var(--term-amber-dim); }
.main-nav a::after { content: " ]"; color: var(--term-amber-dim); }
.main-nav .current-menu-item a, .main-nav .current_page_item a { color: var(--term-amber-bright); text-shadow: 0 0 8px rgba(255,176,0,0.7); }

h1, h2, h3, h4, h5, h6 {
  font-family: "VT323", "Share Tech Mono", monospace;
  color: var(--term-amber);
  text-shadow: 0 0 10px rgba(255,176,0,0.45);
  line-height: 1.15;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h1 { font-size: 48px; }
h2 { font-size: 40px; }
h3 { font-size: 32px; }
.entry-title a { text-decoration: none; }
.entry-title a:hover { color: var(--term-amber-bright); }

.post-card, .entry {
  border: 1px solid var(--term-line);
  background: var(--term-panel);
  padding: 28px;
  margin-bottom: 32px;
}
.post-meta, .entry-meta { color: var(--term-amber-dim); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 16px; }
.post-meta::before, .entry-meta::before { content: "> "; color: var(--term-amber); }

img { max-width: 100%; height: auto; border: 1px solid var(--term-line); }
.wp-block-image img, .wp-block-gallery img { border: 1px solid var(--term-line); }
figure { margin: 24px 0; }
figcaption { color: var(--term-amber-dim); font-size: 15px; text-align: left; margin-top: 8px; }
figcaption::before { content: "// "; }

table { border-collapse: collapse; width: 100%; margin: 24px 0; font-size: 17px; }
th, td { border: 1px solid var(--term-line); padding: 10px 12px; text-align: left; }
th { color: var(--term-amber); text-transform: uppercase; letter-spacing: 1px; background: #1a1405; }
tr:nth-child(even) td { background: #100c03; }

blockquote { border-left: 3px solid var(--term-amber); margin: 24px 0; padding: 4px 0 4px 20px; color: var(--term-amber-bright); }
hr { border: none; border-top: 1px dashed var(--term-line); margin: 32px 0; }
code, pre { background: #1a1405; color: var(--term-amber-bright); }
pre { padding: 20px; overflow-x: auto; border: 1px solid var(--term-line); }
ul, ol { padding-left: 28px; }
li::marker { color: var(--term-amber-dim); }
.hero-image { margin: 0 0 24px; }
.hero-image img { width: 100%; border: 1px solid var(--term-line); }


button, .button, input[type="submit"], .wp-block-button__link {
  background: #000; color: var(--term-amber); border: 1px solid var(--term-amber);
  font-family: "Share Tech Mono", monospace; font-size: 16px; text-transform: uppercase;
  letter-spacing: 1px; padding: 10px 18px; cursor: pointer; border-radius: 0; text-decoration: none;
}
button:hover, .button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
  background: var(--term-amber); color: #000; text-shadow: none;
}
input[type="text"], input[type="email"], input[type="search"], textarea {
  background: #000; color: var(--term-amber-bright); border: 1px solid var(--term-amber-dim);
  font-family: "Share Tech Mono", monospace; font-size: 17px; padding: 10px 12px; border-radius: 0; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--term-amber-dim); }

.post-nav { display: flex; justify-content: space-between; gap: 20px; margin: 32px 0; }
.post-nav a { text-decoration: none; }
.site-footer { border-top: 2px solid var(--term-amber-dim); margin-top: 48px; padding-top: 24px; color: var(--term-amber-dim); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
.site-footer .cursor::after { content: "█"; color: var(--term-amber); animation: termblink 1.2s steps(1) infinite; margin-left: 6px; }
@keyframes termblink { 50% { opacity: 0; } }

.wp-block-gallery { display: flex; flex-wrap: wrap; gap: 16px; }
.wp-block-gallery figure { margin: 0; flex: 1 1 40%; }

@media (max-width: 640px) {
  .site-title { font-size: 44px; }
  h1 { font-size: 36px; }
  .post-card, .entry { padding: 18px; }
  body { font-size: 17px; }
}