/*
Theme Name: Chroma Entertainment
Theme URI: https://chromaentertainment.com
Author: Chroma Entertainment
Author URI: https://chromaentertainment.com
Description: Premium dark landing-page theme for Chroma Entertainment — exclusive fantasy, science fiction and horror gaming accessories. Drives traffic to Etsy, grows the Chroma Guild mailing list via Sender, and is built for SEO with semantic HTML and schema markup.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chroma-entertainment
Tags: dark, one-column, custom-menu, featured-images
*/

/* =========================================================
   Chroma Entertainment — Design Tokens
   ========================================================= */
:root {
  --ce-ink: #0d0f1f;          /* near black */
  --ce-navy: #171a33;         /* deep navy — primary background (from banner) */
  --ce-navy-2: #1e2242;       /* raised navy */
  --ce-charcoal: #242844;     /* card surface */
  --ce-line: rgba(255, 255, 255, 0.09);
  --ce-white: #f4f5fa;
  --ce-muted: #a7adc9;
  --ce-cyan: #35d6f4;
  --ce-magenta: #e94ba8;
  --ce-pink: #ff5fa2;
  --ce-orange: #ff7a3c;
  --ce-gold: #ffb547;
  --ce-grad: linear-gradient(100deg, var(--ce-cyan), var(--ce-magenta) 55%, var(--ce-orange));
  --ce-font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --ce-font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ce-max: 1180px;
  --ce-radius: 14px;
}

/* =========================================================
   Base
   ========================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ce-navy);
  color: var(--ce-white);
  font-family: var(--ce-font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ce-cyan); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--ce-white); }

h1, h2, h3, .ce-display {
  font-family: var(--ce-font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.08;
  margin: 0 0 0.4em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); letter-spacing: 0.06em; }
p { margin: 0 0 1.2em; }

.ce-wrap { max-width: var(--ce-max); margin: 0 auto; padding: 0 24px; }
.ce-wrap--wide { max-width: 1400px; }
.ce-section { padding: 72px 0; }
.ce-section--tight { padding: 48px 0; }
.ce-kicker {
  font-family: var(--ce-font-display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: var(--ce-gold);
  display: block;
  margin-bottom: 10px;
}
.ce-lead { font-size: 1.15rem; color: var(--ce-muted); max-width: 46em; }
.ce-center { text-align: center; }
.ce-center .ce-lead { margin-left: auto; margin-right: auto; }

::selection { background: var(--ce-magenta); color: #fff; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ce-ink); color: var(--ce-white); padding: 10px 16px; z-index: 200;
}
.skip-link:focus { left: 0; }

/* =========================================================
   Buttons
   ========================================================= */
.ce-btn {
  display: inline-block;
  font-family: var(--ce-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 13px 34px 11px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  line-height: 1.2;
}
.ce-btn:hover { transform: translateY(-2px); }
.ce-btn--primary {
  background: var(--ce-grad);
  color: #10122a;
  box-shadow: 0 6px 26px rgba(233, 75, 168, 0.28);
}
.ce-btn--primary:hover { color: #10122a; box-shadow: 0 10px 34px rgba(53, 214, 244, 0.35); }
.ce-btn--ghost {
  background: transparent;
  color: var(--ce-white);
  border-color: rgba(255, 255, 255, 0.35);
}
.ce-btn--ghost:hover { border-color: var(--ce-cyan); color: var(--ce-cyan); }
.ce-btn--wide { padding-left: 54px; padding-right: 54px; }

/* =========================================================
   Header
   ========================================================= */
.ce-header {
  background: rgba(13, 15, 31, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ce-line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.ce-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
}
.ce-brand { display: flex; align-items: center; gap: 14px; color: var(--ce-white); }
.ce-brand img { height: 52px; width: auto; }
.ce-brand__text { display: flex; flex-direction: column; }
.ce-brand__name {
  font-family: var(--ce-font-display);
  font-size: 1.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}
.ce-brand__tag { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ce-muted); margin-top: 4px; }

.ce-nav ul { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.ce-nav a {
  font-family: var(--ce-font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-white);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.ce-nav a:hover { color: var(--ce-cyan); }
.ce-nav .current-menu-item > a, .ce-nav .current_page_item > a { border-bottom-color: var(--ce-magenta); }
.ce-nav .ce-nav__cta a {
  border: 1px solid var(--ce-gold);
  border-radius: 999px;
  padding: 7px 20px 5px;
  color: var(--ce-gold);
}
.ce-nav .ce-nav__cta a:hover { background: var(--ce-gold); color: #10122a; }

.ce-nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ce-line);
  border-radius: 8px;
  color: var(--ce-white);
  font-size: 1.5rem;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
}

@media (max-width: 1280px) {
  .ce-nav-toggle { display: block; }
  .ce-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ce-ink);
    border-bottom: 1px solid var(--ce-line);
    padding: 18px 24px 26px;
  }
  .ce-nav.is-open { display: block; }
  .ce-nav ul { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* =========================================================
   Hero
   ========================================================= */
.ce-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(53, 214, 244, 0.16), transparent 60%),
    radial-gradient(900px 500px at 12% 110%, rgba(233, 75, 168, 0.17), transparent 60%),
    radial-gradient(700px 420px at 95% 90%, rgba(255, 122, 60, 0.10), transparent 60%),
    var(--ce-ink);
  text-align: center;
  padding: 96px 0 104px;
}
.ce-hero__banner { max-width: min(1040px, 92vw); margin: 0 auto 36px; }
.ce-hero h1 { max-width: 15em; margin-left: auto; margin-right: auto; }
.ce-hero .ce-lead { margin: 0 auto 2em; }
.ce-hero__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* Rotating banner backdrop */
.ce-hero--rotator { padding: 0; text-align: center; }
.ce-hero__slides { position: absolute; inset: 0; }
.ce-hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.ce-hero__slide.is-active { opacity: 0.34; }
.ce-hero__content { position: relative; padding: 120px 24px 128px; }

/* =========================================================
   Product grid
   ========================================================= */
.ce-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  margin-top: 44px;
}
.ce-card {
  background: var(--ce-charcoal);
  border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.ce-card:hover {
  transform: translateY(-5px);
  border-color: rgba(53, 214, 244, 0.45);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.ce-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ce-navy-2); }
.ce-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ce-card:hover .ce-card__media img { transform: scale(1.05); }
.ce-card__media--empty {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ce-font-display);
  font-size: 2.2rem; letter-spacing: 0.1em; text-transform: uppercase;
  background:
    radial-gradient(340px 200px at 70% 20%, rgba(53, 214, 244, 0.18), transparent 65%),
    radial-gradient(300px 200px at 20% 90%, rgba(233, 75, 168, 0.2), transparent 65%),
    var(--ce-navy-2);
  color: rgba(244, 245, 250, 0.85);
}
.ce-card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.ce-card__body h3 a { color: var(--ce-white); }
.ce-card__body h3 a:hover { color: var(--ce-cyan); }
.ce-card__body p { color: var(--ce-muted); font-size: 0.98rem; flex: 1; }
.ce-card__link {
  font-family: var(--ce-font-display);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ce-gold);
}
.ce-card__link:hover { color: var(--ce-white); }

/* =========================================================
   Product landing pages
   ========================================================= */
.ce-page-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-color: var(--ce-ink);
}
.ce-page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13, 15, 31, 0.25) 0%, rgba(13, 15, 31, 0.55) 55%, var(--ce-navy) 100%);
}
.ce-page-hero__inner { position: relative; z-index: 1; width: 100%; padding: 120px 0 34px; }
.ce-page-hero h1 { margin-bottom: 0.1em; }
.ce-page-hero .ce-lead { margin-bottom: 0; }

.ce-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .ce-split { grid-template-columns: 1fr; } }

.ce-checklist { list-style: none; margin: 0 0 1.4em; padding: 0; }
.ce-checklist li { padding: 10px 0 10px 36px; position: relative; border-bottom: 1px solid var(--ce-line); }
.ce-checklist li:last-child { border-bottom: none; }
.ce-checklist li::before {
  content: "";
  position: absolute; left: 4px; top: 18px;
  width: 14px; height: 14px; border-radius: 4px;
  background: var(--ce-grad);
}

.ce-panel {
  background: var(--ce-charcoal);
  border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
  padding: 30px 32px;
}
.ce-panel h3 { color: var(--ce-gold); }

.ce-etsy-cta {
  text-align: center;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(255, 181, 71, 0.10), transparent 70%),
    var(--ce-ink);
  border-top: 1px solid var(--ce-line);
  border-bottom: 1px solid var(--ce-line);
}

/* =========================================================
   Guild / signup
   ========================================================= */
.ce-guild {
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(53, 214, 244, 0.12), transparent 60%),
    radial-gradient(900px 420px at 85% 100%, rgba(233, 75, 168, 0.14), transparent 60%),
    var(--ce-ink);
  border-top: 1px solid var(--ce-line);
}
.ce-guild__benefits {
  list-style: none;
  margin: 26px auto 34px;
  padding: 0;
  max-width: 520px;
  text-align: left;
}
.ce-guild__benefits li {
  padding: 12px 0 12px 40px;
  position: relative;
  border-bottom: 1px solid var(--ce-line);
  font-size: 1.05rem;
}
.ce-guild__benefits li:last-child { border-bottom: none; }
.ce-guild__benefits li::before {
  content: "★";
  position: absolute; left: 8px; top: 10px;
  color: var(--ce-gold);
}
.ce-signup { max-width: 560px; margin: 0 auto; }
.ce-signup .sender-form-field { text-align: left; }
.ce-signup__note { font-size: 0.85rem; color: var(--ce-muted); margin-top: 14px; }
.ce-signup__admin-note {
  border: 1px dashed rgba(255, 181, 71, 0.6);
  border-radius: var(--ce-radius);
  padding: 20px 24px;
  color: var(--ce-gold);
  font-size: 0.95rem;
  text-align: left;
}

/* =========================================================
   About
   ========================================================= */
.ce-about { display: grid; grid-template-columns: 300px 1fr; gap: 52px; align-items: start; }
.ce-about__portrait img { border-radius: var(--ce-radius); border: 1px solid var(--ce-line); }
@media (max-width: 780px) { .ce-about { grid-template-columns: 1fr; } .ce-about__portrait { max-width: 320px; } }

/* =========================================================
   Footer
   ========================================================= */
.ce-footer { background: var(--ce-ink); border-top: 1px solid var(--ce-line); padding: 64px 0 34px; }
.ce-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  gap: 40px;
}
@media (max-width: 960px) { .ce-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ce-footer__grid { grid-template-columns: 1fr; } }
.ce-footer h3 { font-size: 1.15rem; letter-spacing: 0.14em; color: var(--ce-white); margin-bottom: 14px; }
.ce-footer ul { list-style: none; margin: 0; padding: 0; }
.ce-footer li { margin-bottom: 9px; }
.ce-footer a { color: var(--ce-muted); }
.ce-footer a:hover { color: var(--ce-cyan); }
.ce-footer__brandname { font-family: var(--ce-font-display); font-size: 1.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ce-footer__tagline { color: var(--ce-muted); font-size: 0.95rem; }

.ce-skyquake {
  background: var(--ce-navy-2);
  border: 1px solid var(--ce-line);
  border-radius: var(--ce-radius);
  padding: 24px 26px;
}
.ce-skyquake h3 { color: var(--ce-cyan); font-size: 1.2rem; }
.ce-skyquake p { color: var(--ce-muted); font-size: 0.93rem; margin-bottom: 0.8em; }
.ce-skyquake a { font-family: var(--ce-font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ce-gold); }
.ce-skyquake a:hover { color: var(--ce-white); }

.ce-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ce-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--ce-muted);
  font-size: 0.88rem;
}
.ce-social { display: flex; gap: 16px; }
.ce-social a { color: var(--ce-muted); display: inline-flex; }
.ce-social a:hover { color: var(--ce-cyan); }
.ce-social svg { width: 20px; height: 20px; fill: currentColor; }

/* =========================================================
   Generic content / entry
   ========================================================= */
.ce-entry { max-width: 780px; margin: 0 auto; }
.ce-entry h2, .ce-entry h3 { margin-top: 1.4em; }
.ce-entry img { border-radius: var(--ce-radius); }
.ce-entry blockquote {
  border-left: 3px solid var(--ce-magenta);
  margin: 1.5em 0; padding: 0.2em 0 0.2em 1.2em;
  color: var(--ce-muted); font-style: italic;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}