/*
 * jvpng-plaque-overrides.css v1.1
 *
 * Sits ON TOP of the cyberfix base plaque CSS (https://cyberfix.pro/assets/cyberfix-home.css).
 * The base CSS scopes everything to body[data-p="dark"|"light"] — we follow the same convention.
 * This file only does what's JVPNG-specific:
 *   - swap logo URL to JVPNG's existing 2022 logo
 *   - shift the green tactical glow toward forest (matches JVPNG live screen + email theme)
 *   - light/dark mirror tweaks
 *   - accessibility branches (prefers-reduced-motion / prefers-contrast)
 *   - TV-mode lock (hide palette toggle on lobby/spotlight TVs)
 */

/* ─── 1. Logo medallion uses JVPNG 2022 logo ─── */
:root {
  --logo-src: url("/wp-content/uploads/2022/01/jvpng-2022.jpg");
}

/* ─── 2. JVPNG dark palette tweaks — forest-green tactical glow ─── */
body[data-p="dark"].jvpng-plaque {
  --tactical-glow: #27ae60;
  --gr-1: #27ae60;
  --gr-2: #1b5e20;
  --gr-3: #062b1f;
  --strip: #062b1f;
  --gold-2: #c9a54d;     /* matches JVPNG existing gold from member cards */
}

/* Make sure body picks up the dark background even if base CSS race-loads */
html[data-p="dark"] body, body[data-p="dark"] {
  background: #020302;
}

/* ─── 2a. CRITICAL: let matrix rain show through .plaque + .strip + .hero ─── */
/* The base cyberfix CSS gives .plaque a solid dark gradient that completely hides
   the matrix-canvas behind it. We swap to rgba so the rain reads through. Same
   fix on .strip (top nav band) and .hero so the whole page breathes. */
body[data-p="dark"].jvpng-plaque .plaque {
  background: linear-gradient(180deg,
    rgba(10, 20, 16, 0.55) 0%,
    rgba(4, 7, 4, 0.65)  50%,
    rgba(2, 3, 2, 0.75)  100%) !important;
}
body[data-p="dark"].jvpng-plaque .strip {
  background: linear-gradient(180deg, rgba(6, 43, 31, 0.85), rgba(0, 0, 0, 0.55)) !important;
}
body[data-p="dark"].jvpng-plaque .hero::before {
  /* Soften the green radial glow so it doesn't dominate */
  opacity: 0.6;
}
body[data-p="dark"].jvpng-plaque .proclaim {
  background: linear-gradient(180deg, rgba(10, 20, 16, 0.55), rgba(2, 3, 2, 0.7)) !important;
}
body[data-p="dark"].jvpng-plaque .footstrip {
  background: linear-gradient(180deg, rgba(6, 43, 31, 0.92), rgba(0, 0, 0, 0.7)) !important;
}

/* Light-mode mirror — keep some opacity for legibility */
body[data-p="light"].jvpng-plaque .plaque {
  background: linear-gradient(180deg,
    rgba(244, 236, 212, 0.85) 0%,
    rgba(240, 230, 191, 0.85) 100%) !important;
}

/* Boost the rain so it's clearly visible */
body[data-p="dark"] #matrix-canvas { opacity: 0.45 !important; }

/* ─── 3. Light palette mirror — readable on white ─── */
body[data-p="light"].jvpng-plaque {
  --tactical-glow: #1b5e20;
  --gr-1: #66bb6a;
  --gr-2: #1b5e20;
  --strip: #1b5e20;
}

/* ─── 4. Logo image inside medallion — center, contain ─── */
.logo-medallion .logo-img {
  border-radius: 50%;
  object-fit: cover;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6);
}

/* ─── 5. Hero body paragraph — extra polish ─── */
.hero .hero-text { color: var(--ivory); }
.hero .hero-body { font-family: "Cormorant Garamond", Georgia, serif; }

/* ─── 6. Foot strip — JVPNG flavor ─── */
.footstrip {
  background: linear-gradient(180deg, var(--strip), rgba(0,0,0,.65));
  color: var(--ivory);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  letter-spacing: .22em;
  font-size: 11px;
  text-transform: uppercase;
  border-top: 1px solid var(--gold-3);
}

/* ─── 7. Chapter scaffolding — body[data-chapter] hook for multi-chapter rollout ─── */
body[data-chapter="kingwood"] {
  /* default — no overrides needed */
}

/* Future chapters drop in here — 5 lines per chapter, no DB, no admin UI:
body[data-chapter="cypress"] {
  --tactical-glow: #c9a54d;
  --strip: #2c1810;
  --logo-src: url("/wp-content/uploads/2022/jvpng-cypress-logo.png");
}
*/

/* ─── 8. TV mode lock — hide palette toggle on TVs ─── */
body[data-mode="tv"] .switch { display: none !important; }
body[data-mode="tv"] #matrix-canvas { opacity: 0.45; }

/* ─── 9. Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  #matrix-canvas, #dust-canvas { display: none !important; }
  .sheen-anim, .ribbon { animation: none !important; transition: none !important; }
}

@media (prefers-contrast: more) {
  body[data-p="dark"].jvpng-plaque {
    --gold-2: #ffd700;
    --tactical-glow: #00ff7f;
    --ivory: #ffffff;
  }
  .plaque, .cap, .strip { border-width: 3px !important; }
}

/* ─── 10. Hand mode — phone-friendly tweaks for /check-in/, /conductor/, etc. ─── */
body[data-mode="hand"] #matrix-canvas { opacity: .15; }
body[data-mode="hand"] .btn-gilt { min-height: 48px; font-size: 1.05rem; }
body[data-mode="hand"][data-surface="checkin"] #matrix-canvas,
body[data-mode="hand"][data-surface="checkin"] #dust-canvas { display: none; }

/* ─── 11. WP admin scope ─── */
body.wp-admin[class*="arkos-jvpng-"] .wrap {
  padding: 1.5rem;
  background: var(--bg-1);
  color: var(--ivory);
  border: 2px solid var(--gold-2);
  border-radius: 8px;
}
body.wp-admin[class*="arkos-jvpng-"] h1,
body.wp-admin[class*="arkos-jvpng-"] h2 {
  color: var(--gold-1);
  text-shadow: 0 0 8px rgba(201,165,77,.4);
}

/* End jvpng-plaque-overrides.css v1.1 */