/* =====================================================================
 * GamePress Chroma — bundle skin
 * The widget bundle (bundle.css) uses its own --bg / --cyan / --magenta
 * / --cream / --muted / --border / --display / --sans / --mono :root
 * tokens for its component rules. This file re-binds those tokens to
 * Chroma's ice-cyan + holo-violet palette so every `.gpg-widget-*`,
 * `.gpg-home-*`, `.gpg-author-*`, `.page`, `.lightbox`, `.vid-modal`
 * etc. rule in bundle.css re-renders in Chroma colours.
 *
 * Chroma's own chrome (topbar / nav / footer / body holo grid) lives
 * in main.css and reads from --geekui-* — it isn't touched here.
 * ===================================================================== */
:root {
  --bg:          #070912;
  --bg2:         #0e1224;
  --surface:     #11152a;
  --elev:        #181c36;
  --cyan:        #5cf0ff;   /* primary accent */
  --cyan-dim:    #1a8aa0;
  --magenta:     #a06bff;   /* holo-violet */
  --magenta-dim: #6b3eb0;
  --lime:        #6ee7b7;
  --cream:       #ecf0ff;
  --muted:       #5f6890;
  --border:       rgba(92, 240, 255, 0.30);
  --border-soft:  rgba(160, 107, 255, 0.18);
  --display:     "Chakra Petch", "Eurostile", "Inter", system-ui, sans-serif;
  --sans:        "Inter", system-ui, -apple-system, sans-serif;
  --mono:        "JetBrains Mono", "Space Mono", ui-monospace, monospace;
}
body[data-theme="light"],
html[data-theme="light"] {
  --bg:          #eef2fa;
  --bg2:         #e2e7f2;
  --surface:     #ffffff;
  --elev:        #f5f7fc;
  --cyan:        #066b80;
  --cyan-dim:    #034a5a;
  --magenta:     #7a4ec8;
  --magenta-dim: #4f2e8a;
  --lime:        #1a8e57;
  --cream:       #0a0e1a;
  --muted:       #7a829a;
  --border:       rgba(6, 107, 128, 0.32);
  --border-soft:  rgba(122, 78, 200, 0.18);
}

/* Bundle's body rule uses `background: var(--bg)` (shorthand) which
 * wipes out Chroma's holo-grid body painting from main.css.
 * Re-apply Chroma's deep-space canvas with !important so it wins
 * the cascade no matter what the bundle ships. */
body {
  background-color: var(--geekui-bg) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(160,107,255,0.12), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 30%, rgba(92,240,255,0.06), transparent 55%),
    linear-gradient(var(--chroma-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--chroma-grid) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px !important;
  background-attachment: fixed !important;
}
body[data-theme="light"],
html[data-theme="light"] body {
  background-color: var(--geekui-bg) !important;
}

/* Footer-above pinned widget bands flush to footer. */
.gpg-global-band--footer { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.gpg-global-band--footer + .chroma-footer { margin-top: 0; border-top: 0; }
.page, .gpg-home { padding-bottom: 24px !important; }

/* WP admin bar pushes the page down 32px (46px on mobile). The
 * sticky Chroma topbar needs to slip under it instead of riding
 * over the admin bar — otherwise its top half is hidden. */
.admin-bar .chroma-topbar { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .chroma-topbar { top: 46px; }
}

/* Session-aware account icons in the topbar actions block
 * (matches .chroma-toggle dimensions so the row stays uniform). */
.chroma-account {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(92, 240, 255, 0.06);
  border: 1px solid var(--geekui-border, rgba(160,107,255,0.22));
  color: var(--geekui-text-dim, #9faad0);
  border-radius: 50%;
  text-decoration: none;
  overflow: hidden;
  transition: background .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.chroma-account:hover {
  background: rgba(92, 240, 255, 0.18);
  color: var(--geekui-accent, #5cf0ff);
  border-color: var(--geekui-accent, #5cf0ff);
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(92, 240, 255, 0.35);
}
/* Profile avatar fills the circle */
.chroma-account--profile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.chroma-account--profile {
  padding: 0;
  border-color: var(--geekui-accent, #5cf0ff);
  box-shadow: 0 0 12px rgba(92, 240, 255, 0.25);
}
.chroma-account--profile:hover {
  box-shadow: 0 0 18px rgba(92, 240, 255, 0.50);
}
/* Register CTA — accent fill to draw signups */
.chroma-account--register {
  background: linear-gradient(135deg, var(--chroma-violet, #a06bff), var(--geekui-accent, #5cf0ff));
  color: #06121d;
  border-color: transparent;
  box-shadow: 0 0 14px rgba(160, 107, 255, 0.40);
}
.chroma-account--register:hover {
  color: #06121d;
  box-shadow: 0 0 22px rgba(160, 107, 255, 0.65);
}
/* Logout — slightly muted */
.chroma-account--logout {
  color: var(--geekui-text-mute, #5f6890);
}
.chroma-account--logout:hover {
  color: var(--chroma-violet, #a06bff);
  border-color: rgba(160, 107, 255, 0.55);
  background: rgba(160, 107, 255, 0.14);
  box-shadow: 0 0 12px rgba(160, 107, 255, 0.30);
}

/* ─────────────────────────────────────────────────────────────────────
 * Hero banner — always on a photo backdrop, so text + accents must
 * stay light regardless of theme. Light-theme `--cream`/`--cyan`
 * remap to near-black / dark teal, which is invisible on the cover
 * image. Lock the hero's tokens to dark-theme light values via
 * scoped overrides on `.gpg-hero`.
 * ───────────────────────────────────────────────────────────────────── */
.gpg-hero {
  --hero-text:        #ecf0ff;
  --hero-text-dim:    rgba(236, 240, 255, 0.78);
  --hero-accent:      #5cf0ff;
  --hero-accent-ink:  #06121d;
  --hero-shadow:      0 4px 18px rgba(0, 0, 0, 0.7);
}
.gpg-hero-content { color: var(--hero-text); }
.gpg-hero-title { color: var(--hero-text); text-shadow: var(--hero-shadow); }
.gpg-hero-meta { color: var(--hero-accent); }
.gpg-hero-meta .gpg-hero-tag,
.gpg-hero-meta .gpg-hero-year { color: var(--hero-text-dim); opacity: 1; }
.gpg-hero-cta {
  background: var(--hero-accent);
  color: var(--hero-accent-ink) !important;
  box-shadow: 0 6px 18px rgba(47, 230, 255, 0.35);
}
.gpg-hero-cta:hover { background: #6cf2ff; box-shadow: 0 10px 22px rgba(47, 230, 255, 0.45); }
.gpg-hero-nav { color: var(--hero-text); background: rgba(8, 14, 22, 0.55); border-color: rgba(255, 255, 255, 0.20); }
.gpg-hero-nav:hover { background: var(--hero-accent); color: var(--hero-accent-ink); border-color: var(--hero-accent); }
.gpg-hero-dot { background: rgba(255, 255, 255, 0.25); }
.gpg-hero-dot:hover { background: rgba(255, 255, 255, 0.50); }
.gpg-hero-dot.is-active { background: var(--hero-accent); }
.gpg-hero-trailer-play { background: var(--hero-accent); color: var(--hero-accent-ink); }

/* Slightly stronger side-vignette in light theme — pages around the
 * hero are bright, so the cover photo can read flatter; this keeps
 * the title block legible against very bright covers. */
body[data-theme="light"] .gpg-hero-slide::after,
html[data-theme="light"] .gpg-hero-slide::after {
  background: linear-gradient(120deg, rgba(2, 8, 16, 0.70) 0%, rgba(2, 8, 16, 0.20) 50%, rgba(2, 8, 16, 0.70) 100%);
}