/*
Theme Name: Jeff The Old Ghost
Theme URI: https://jefftoldghost.wpenginepowered.com/
Author: Jersey Devil Web
Description: Dark, gothic art-collection theme for Jeff The Old Ghost. Flickering old-TV static hero, glowing frames, WooCommerce-ready.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: jeff-the-old-ghost
*/

/* ---------- Tokens ---------- */
:root {
  --bg: #000000;
  --bg-raised: #0a0a0a;
  --fg: #f2f2f2;
  --muted: #8f8f8f;
  --border: #1e1e1e;
  --accent: #7fffd4;
  --accent-dim: rgba(127, 255, 212, 0.35);
  --font-display: 'UnifrakturMaguntia', 'Old English Text MT', serif;
  --font-body: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'EB Garamond', Georgia, serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul.jtog-plain { list-style: none; margin: 0; padding: 0; }

.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; overflow: hidden; position: absolute !important;
  word-wrap: normal !important;
}

.jtog-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Site header / hero with old-TV static ---------- */
.jtog-hero {
  position: relative;
  text-align: center;
  padding: 70px 20px 60px;
  background: #000;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border);
}

.jtog-hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 110px 110px;
  opacity: 0.35;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: jtog-static-jitter .15s steps(4) infinite, jtog-static-buzz .1s steps(2) infinite;
}

.jtog-hero__noise-2 {
  position: absolute;
  inset: -30%;
  z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n2'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n2)'/></svg>");
  background-size: 260px 260px;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: jtog-static-jitter-slow .22s steps(5) infinite reverse;
}

.jtog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.07) 0px,
    rgba(255,255,255,0.07) 1px,
    rgba(0,0,0,0.28) 2px,
    rgba(0,0,0,0.28) 3px
  );
  pointer-events: none;
  animation: jtog-scanline-drift 3s linear infinite;
}

@keyframes jtog-static-jitter {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-6%,4%); }
  40%  { transform: translate(5%,-5%); }
  60%  { transform: translate(-4%,-6%); }
  80%  { transform: translate(6%,3%); }
  100% { transform: translate(0,0); }
}
@keyframes jtog-static-jitter-slow {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(4%,-3%); }
  50%  { transform: translate(-3%,4%); }
  75%  { transform: translate(-4%,-4%); }
  100% { transform: translate(0,0); }
}
@keyframes jtog-static-buzz { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }
@keyframes jtog-scanline-drift { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } }

.jtog-hero__inner { position: relative; z-index: 3; }

.jtog-brand {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0.03em;
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 20px rgba(255,255,255,0.25);
  animation: jtog-flicker 2.5s infinite;
  margin: 0;
}

.jtog-brand img { display: inline-block; max-height: 90px; width: auto; }

@keyframes jtog-flicker {
  0%,100% { opacity: 1; }
  50% { opacity: 0.96; }
  72% { opacity: 0.7; }
  73% { opacity: 1; }
  74% { opacity: 0.85; }
  75% { opacity: 1; }
  88% { opacity: 1; }
  89% { opacity: 0.6; }
  90% { opacity: 1; }
}

.jtog-tagline {
  position: relative;
  z-index: 3;
  margin: 14px 0 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-style: italic;
  letter-spacing: 0.04em;
}

/* ---------- Nav ---------- */
.jtog-nav-toggle {
  position: relative;
  z-index: 3;
  display: none;
  margin: 20px auto 0;
  background: transparent;
  border: 1px solid var(--accent-dim);
  color: var(--fg);
  padding: 8px 14px;
  border-radius: 3px;
  cursor: pointer;
}

.jtog-nav {
  position: relative;
  z-index: 3;
  margin-top: 26px;
}

.jtog-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.jtog-nav a {
  color: var(--fg);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}

.jtog-nav a:hover { color: var(--accent); text-decoration: none; text-shadow: 0 0 8px var(--accent-dim); }

@media (max-width: 640px) {
  .jtog-nav-toggle { display: inline-block; }
  .jtog-nav[data-collapsed="true"] { display: none; }
  .jtog-nav ul { flex-direction: column; gap: 14px; }
}

/* ---------- Glow (for photos / product images) ---------- */
.jtog-glow-wrap { position: relative; }

.jtog-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0) 70%);
  filter: blur(30px);
  animation: jtog-pulse 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes jtog-pulse {
  0%,100% { opacity: 0.25; transform: translate(-50%,-50%) scale(0.85); }
  50% { opacity: 0.9; transform: translate(-50%,-50%) scale(1.1); }
}

.jtog-glow-wrap > * { position: relative; z-index: 1; }

/* ---------- Content ---------- */
main { display: block; padding: 60px 0 100px; }

.jtog-section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  text-align: center;
  color: #fff;
  margin: 0 0 40px;
}

.jtog-intro {
  max-width: 640px;
  margin: 0 auto 60px;
  text-align: center;
  color: var(--muted);
  font-size: 1.2rem;
}

/* Gallery / archive grid */
.jtog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
}

.jtog-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.jtog-card__media { aspect-ratio: 4/5; overflow: hidden; background: #0c0c0c; }
.jtog-card__media img { width: 100%; height: 100%; object-fit: cover; }

.jtog-card__body { padding: 18px 20px 22px; text-align: center; }

.jtog-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 0 0 6px;
  color: #fff;
}

.jtog-card__meta { color: var(--muted); font-size: 0.9rem; }

/* Single post/page prose */
.jtog-prose {
  max-width: 720px;
  margin: 0 auto;
}

.jtog-prose h1, .jtog-prose h2, .jtog-prose h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: #fff;
}

.jtog-prose h1 { font-size: 2.4rem; }
.jtog-prose h2 { font-size: 1.9rem; }

.jtog-prose blockquote {
  border-left: 2px solid var(--accent);
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  color: var(--muted);
  font-style: italic;
}

.jtog-page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.6rem;
  text-align: center;
  color: #fff;
  margin: 0 0 40px;
}

.jtog-entry-meta {
  text-align: center;
  color: var(--muted);
  font-family: var(--font-ui);
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  margin-bottom: 40px;
}

/* Buttons */
.jtog-btn {
  display: inline-block;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  padding: 10px 22px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}

.jtog-btn:hover {
  background: rgba(127,255,212,0.12);
  box-shadow: 0 0 12px var(--accent-dim);
  text-decoration: none;
}

/* Search / 404 */
.jtog-search-form { display: flex; justify-content: center; gap: 10px; margin: 0 auto 20px; max-width: 480px; }
.jtog-search-form input[type="search"] {
  flex: 1;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 10px 14px;
  font-family: var(--font-ui);
  border-radius: 3px;
}

/* Comments */
.jtog-comments { max-width: 720px; margin: 60px auto 0; }
.jtog-comments ol { list-style: none; margin: 0; padding: 0; }
.jtog-comments .comment-body { border-top: 1px solid var(--border); padding: 20px 0; }

/* Footer */
.jtog-footer {
  border-top: 1px solid var(--border);
  padding: 50px 0 30px;
  text-align: center;
  color: var(--muted);
}

.jtog-footer__widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
  text-align: left;
}

.jtog-footer__credit {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

/* ---------- WooCommerce ---------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  font-family: var(--font-ui);
}

.woocommerce a.button, .woocommerce button.button.alt, .woocommerce input.button {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--accent-dim);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.woocommerce a.button:hover, .woocommerce button.button.alt:hover {
  background: rgba(127,255,212,0.12);
  box-shadow: 0 0 12px var(--accent-dim);
  color: var(--fg);
}

.woocommerce span.price, .woocommerce ul.products li.product .price { color: var(--accent); }

.woocommerce ul.products li.product {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
}