/*
Theme Name: GamerEX — Game Hub
Theme URI: https://czonestar.com
Author: C Zone Star
Author URI: https://czonestar.com
Description: Custom WordPress theme for GamerEX — Discover. Play. Conquer. A cinematic dark PC game discovery platform with a Games custom post type, fully editable pages, and full SEO/AEO/GEO control.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: gamerex-hub
*/

/* =====================================================
   GamerEX — Premium Cinematic Gaming Platform
   Tokens: bg near-black, ember accent, steel-blue secondary, gold rating
   Display: Bebas Neue (condensed cinematic) / Body: Inter / Mono: JetBrains Mono
   ===================================================== */
:root{
  --bg: #08090c;
  --bg-elevated: #131519;
  --bg-card: #16181d;
  --line: #21242b;
  --ember: #e8482c;
  --ember-dim: #a8371f;
  --steel: #3f8cf3;
  --gold: #d4af37;
  --text: #eef0f3;
  --text-dim: #8b8e96;
  --text-faint: #565a63;
  --radius: 8px;
}
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter', sans-serif;
  min-height:100vh; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.mono{font-family:'JetBrains Mono', monospace;}
.display{font-family:'Bebas Neue', sans-serif; letter-spacing:0.5px;}

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

header.topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 4%;
  background:rgba(8,9,12,0.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:'Bebas Neue', sans-serif; font-size:28px; letter-spacing:2px; cursor:pointer;
  display:flex; align-items:center; gap:2px;
}
.logo .x{ color:var(--ember); }
.site-branding, .custom-logo-link{ display:flex; align-items:center; }
.site-branding img, .custom-logo-link img{ max-height:42px; width:auto; display:block; }
.footer-brand .site-branding img, .footer-brand .custom-logo-link img{ max-height:34px; margin-bottom:10px; }
.site-strapline{
  font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-faint); margin-left:12px; padding-left:12px; border-left:1px solid var(--line);
  white-space:nowrap; display:none;
}
@media (min-width:900px){ .site-strapline{ display:inline-block; } }
.navlinks{ display:flex; gap:2px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.navlinks::-webkit-scrollbar{ display:none; }
.navlinks a{
  text-decoration:none; color:var(--text-dim); font-size:12px; font-weight:600; white-space:nowrap;
  letter-spacing:0.3px; padding:9px 11px; border-radius:6px; transition:all .18s; text-transform:uppercase;
}
.navlinks a:hover, .navlinks a.active{ color:var(--text); background:var(--bg-elevated); }
.navlinks a:focus-visible{ outline:2px solid var(--ember); }

.nav-right{ display:flex; align-items:center; gap:14px; }
.search-wrap{ position:relative; }
.search-toggle{
  background:var(--bg-elevated); border:1px solid var(--line); color:var(--text-dim);
  width:38px; height:38px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.search-toggle:hover, .search-toggle.active{ border-color:var(--ember); color:var(--ember); }
.search-box{
  position:absolute; right:0; top:48px; width:320px;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,0.5);
  display:none; overflow:hidden;
}
.search-box.open{ display:block; }
.search-box input{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:14px 16px; color:var(--text); font-size:14px; outline:none;
}
.search-results{ max-height:360px; overflow-y:auto; }
.search-result-item{
  display:flex; gap:12px; padding:10px 14px; cursor:pointer; align-items:center; text-decoration:none; color:var(--text);
  border-bottom:1px solid var(--line);
}
.search-result-item:hover{ background:rgba(232,72,44,0.08); }
.search-result-item img{ width:38px; height:52px; object-fit:cover; border-radius:3px; flex-shrink:0; }
.search-result-item .sri-title{ font-size:13.5px; font-weight:600; }
.search-result-item .sri-meta{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.search-empty{ padding:20px 14px; color:var(--text-dim); font-size:13px; text-align:center; }

.hero{
  position:relative; height:min(88vh, 780px); min-height:520px; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero video, .hero .hero-fallback{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero video{ z-index:1; background:#0d0f14; }
.hero .hero-fallback{
  z-index:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(232,72,44,0.22), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(63,140,243,0.18), transparent 50%),
    linear-gradient(135deg, #0d0f14, #08090c 60%);
  animation:heroDrift 14s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  0%{ background-position:0% 0%, 100% 100%, 0 0; }
  100%{ background-position:10% 15%, 85% 80%, 0 0; }
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(8,9,12,1) 0%, rgba(8,9,12,0.65) 35%, rgba(8,9,12,0.25) 65%, rgba(8,9,12,0.55) 100%);
}
.hero-content{ position:relative; z-index:2; padding:0 4% 64px; max-width:820px; }
.hero-content .eyebrow{
  color:var(--ember); font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:3px;
  text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.hero-content .eyebrow::before{ content:''; width:20px; height:1px; background:var(--ember); }
.hero-content h1{
  font-family:'Bebas Neue', sans-serif; font-size:clamp(48px, 8vw, 96px); line-height:0.94; letter-spacing:1px;
}
.hero-content p{ color:var(--text-dim); font-size:17px; max-width:520px; margin-top:18px; line-height:1.6; }
.hero-cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.btn{
  font-weight:700; font-size:13.5px; letter-spacing:0.6px; text-transform:uppercase;
  padding:14px 28px; border-radius:6px; text-decoration:none; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-primary{ background:var(--ember); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(232,72,44,0.35); background:var(--ember-dim); }
.btn-outline{ background:rgba(255,255,255,0.03); color:var(--text); border:1px solid var(--line); backdrop-filter:blur(4px); }
.btn-outline:hover{ border-color:var(--text-dim); transform:translateY(-2px); }
.btn:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }

.rows-wrap{ padding:50px 0 90px; }
.row-block{ margin-bottom:44px; }
.row-head{ display:flex; align-items:baseline; justify-content:space-between; padding:0 4%; margin-bottom:16px; }
.row-head h2{ font-family:'Bebas Neue', sans-serif; font-size:28px; letter-spacing:1px; }
.row-head a{ font-size:12.5px; color:var(--text-dim); text-decoration:none; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; }
.row-head a:hover{ color:var(--ember); }
.row-scroll{
  display:flex; gap:16px; overflow-x:auto; padding:4px 4% 14px; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.row-scroll::-webkit-scrollbar{ height:6px; }
.row-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

.card{
  flex:0 0 200px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; text-decoration:none; color:var(--text);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
  position:relative;
}
.card:hover{ transform:translateY(-8px) scale(1.02); border-color:var(--ember); box-shadow:0 20px 40px rgba(0,0,0,0.5); z-index:2; }
.card .poster{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#1a1d24; }
.card .poster img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.card:hover .poster img{ transform:scale(1.08); }
.card .rating-badge{
  position:absolute; top:8px; right:8px; background:rgba(8,9,12,0.85); border:1px solid rgba(212,175,55,0.4);
  color:var(--gold); font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:600;
  padding:3px 7px; border-radius:4px; display:flex; align-items:center; gap:3px;
}
.card .cat-badge{
  position:absolute; top:8px; left:8px; background:rgba(8,9,12,0.85); border:1px solid var(--line);
  color:var(--steel); font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:0.5px;
  text-transform:uppercase; padding:3px 7px; border-radius:4px;
}
.card .info{ padding:12px 13px 14px; }
.card .info h3{ font-size:14px; font-weight:700; line-height:1.25; margin-bottom:4px; }
.card .info .sub{ font-size:11.5px; color:var(--text-dim); font-family:'JetBrains Mono', monospace; }

.page-header{ padding:110px 4% 30px; border-bottom:1px solid var(--line); }
.page-header .eyebrow{ font-family:'JetBrains Mono', monospace; color:var(--ember); font-size:12px; letter-spacing:3px; text-transform:uppercase; margin-bottom:10px; }
.page-header h1{ font-family:'Bebas Neue', sans-serif; font-size:clamp(36px,6vw,64px); letter-spacing:1px; }
.page-header p{ color:var(--text-dim); margin-top:10px; max-width:560px; }
.grid-wrap{ padding:40px 4% 90px; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:20px; }

.game-hero{ position:relative !important; min-height:62vh !important; height:auto !important; padding-top:60px !important; overflow:visible !important; display:flex !important; align-items:flex-end !important; }
.game-hero img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; filter:brightness(0.55); z-index:0 !important; }
.game-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, var(--bg) 0%, rgba(8,9,12,0.4) 55%, rgba(8,9,12,0.15) 100%); z-index:1; }
.game-hero-content{ position:relative !important; z-index:2 !important; display:flex !important; flex-direction:row !important; align-items:flex-end !important; gap:32px !important; box-sizing:border-box !important; width:100% !important; max-width:1200px !important; margin:0 auto !important; padding:24px 4% 40px !important; padding-left:max(4%, 64px) !important; }
.game-hero-content img.poster-sm{ width:160px !important; height:220px !important; max-width:160px !important; object-fit:cover !important; border-radius:6px; border:2px solid var(--line); box-shadow:0 20px 40px rgba(0,0,0,0.6); flex:0 0 160px !important; margin-left:16px !important; position:relative !important; z-index:1 !important; }
.game-hero-title{ flex:1 1 0% !important; min-width:0 !important; max-width:100% !important; position:relative !important; z-index:2 !important; text-align:left !important; margin-left:120px !important; margin-top:20px !important; }
.game-hero-title h1{ font-family:'Bebas Neue', sans-serif; font-size:clamp(26px,4vw,52px) !important; letter-spacing:1px; line-height:1.15; overflow-wrap:break-word !important; word-break:break-word !important; text-align:left !important; margin:0 !important; max-width:100% !important; }
.meta-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.chip{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; padding:6px 12px; border-radius:20px;
  border:1px solid var(--line); color:var(--text-dim); background:rgba(255,255,255,0.02);
}
.chip.gold{ color:var(--gold); border-color:rgba(212,175,55,0.35); }
.game-hero-cta{ display:flex; gap:12px; margin-top:20px; }

.game-body{ padding:50px 4% 30px; max-width:1200px; }
.game-section{ margin-bottom:46px; }
.game-section h2{ font-family:'Bebas Neue', sans-serif; font-size:24px; letter-spacing:1px; margin-bottom:14px; color:var(--text); }
.game-section h2::before{ content:'// '; color:var(--ember); }
.game-section p{ color:var(--text-dim); line-height:1.75; max-width:760px; font-size:15px; }

.req-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.req-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; }
.req-card h3{ font-family:'JetBrains Mono', monospace; font-size:12.5px; text-transform:uppercase; letter-spacing:1.5px; color:var(--ember); margin-bottom:14px; }
.req-row{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px; }
.req-row:last-child{ border-bottom:none; }
.req-row .label{ color:var(--text-dim); font-family:'JetBrains Mono', monospace; font-size:11.5px; text-transform:uppercase; flex-shrink:0; }
.req-row .value{ color:var(--text); text-align:right; }

.shot-scroll{ display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; scroll-behavior:smooth; }
.shot-scroll img{ flex:0 0 320px; height:180px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }

footer{ border-top:1px solid var(--line); padding:40px 4%; margin-top:20px; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:24px; }
.footer-brand .logo{ margin-bottom:10px; }
.footer-brand p{ color:var(--text-dim); font-size:13px; max-width:280px; line-height:1.6; }
.footer-links{ display:flex; gap:60px; flex-wrap:wrap; }
.footer-col h4{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); margin-bottom:12px; }
.footer-col a{ display:block; color:var(--text-dim); text-decoration:none; font-size:13.5px; margin-bottom:9px; }
.footer-col a:hover{ color:var(--ember); }
.footer-bottom{ border-top:1px solid var(--line); padding-top:20px; color:var(--text-faint); font-size:12px; }

.empty-state{ padding:60px 4%; text-align:center; color:var(--text-dim); }

/* ===== STATIC / PLACEHOLDER PAGES ===== */
.static-page{ padding:150px 4% 100px; max-width:720px; }
.static-page .eyebrow{ font-family:'JetBrains Mono', monospace; color:var(--ember); font-size:12px; letter-spacing:3px; text-transform:uppercase; margin-bottom:14px; }
.static-page h1{ font-family:'Bebas Neue', sans-serif; font-size:clamp(36px,6vw,60px); letter-spacing:1px; margin-bottom:16px; }
.static-page p{ color:var(--text-dim); line-height:1.75; font-size:15.5px; margin-bottom:14px; }
.static-page .note-box{
  margin-top:24px; padding:16px 18px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
  font-family:'JetBrains Mono', monospace; font-size:12.5px; color:var(--text-faint); line-height:1.6;
}

/* ===== COLLECTIONS HUB ===== */
.collections-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px; padding:40px 4% 90px; }
.collection-card{
  position:relative; height:220px; border-radius:12px; overflow:hidden; text-decoration:none; color:#fff;
  display:flex; align-items:flex-end; padding:22px; border:1px solid var(--line);
  transition:transform .25s, border-color .25s;
}
.collection-card:hover{ transform:translateY(-6px); border-color:var(--ember); }
.collection-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.5); z-index:0; }
.collection-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,9,12,0.9), transparent 60%); z-index:1; }
.collection-card .cc-content{ position:relative; z-index:2; }
.collection-card h3{ font-family:'Bebas Neue', sans-serif; font-size:26px; letter-spacing:1px; margin-bottom:4px; }
.collection-card p{ font-size:12.5px; color:var(--text-dim); }

/* ===== REQUEST FORM ===== */
.request-form{ display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.request-form input, .request-form textarea, .request-form select{
  background:var(--bg-card); border:1px solid var(--line); color:var(--text); padding:12px 14px;
  border-radius:6px; font-family:'Inter'; font-size:14px; outline:none;
}
.request-form textarea{ resize:vertical; min-height:100px; }
.request-form input:focus, .request-form textarea:focus, .request-form select:focus{ border-color:var(--ember); }

@media (max-width:768px){
  .navlinks{ display:none; }
  .req-grid{ grid-template-columns:1fr; }
  .game-hero-content{ flex-direction:column; align-items:flex-start; padding-left:4%; }
  .game-hero-content img.poster-sm{ display:none; }
  .game-hero-title{ margin-left:0 !important; margin-top:0 !important; }
}

/* GamerEX editable Software pages + download controls */
.game-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.game-download-section{text-align:center;border:1px solid var(--line);background:linear-gradient(135deg,rgba(232,72,44,.08),rgba(63,140,243,.06));padding:28px;border-radius:var(--radius)}
.game-download-section p{color:var(--text-dim);margin:10px 0 18px}
.software-hero{min-height:470px;background-color:#0c0e13;background-position:center;background-size:cover;background-repeat:no-repeat;display:flex;align-items:flex-end;padding:0 4% 55px;position:relative}
.software-hero-content{display:flex;align-items:flex-end;gap:28px;max-width:1100px;width:100%}
.software-poster{width:210px;height:280px;object-fit:cover;border-radius:8px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.55)}
.software-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(45px,7vw,82px);line-height:.95;margin:8px 0 16px}
.meta-chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-block;padding:6px 9px;border:1px solid var(--line);border-radius:5px;background:rgba(19,21,25,.82);font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim)}
@media(max-width:700px){.software-hero-content{flex-direction:column;align-items:flex-start}.software-poster{width:160px;height:215px}.software-hero{min-height:600px}.game-hero-cta{width:100%}}



/* ==========================================================================
   Title rendering fixes (cards + single game/software heroes)
   Added: titles were clipping / overflowing on long names.
   ========================================================================== */

/* --- Software hero: poster was shrinking and long titles overflowed --- */
.software-hero-content > *:not(.software-poster){ min-width:0; flex:1 1 auto; }
.software-poster{ flex:0 0 210px; max-width:210px; }
.software-hero h1{
  line-height:1.08;
  padding-bottom:.06em;
  max-width:100%;
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}

/* --- Game hero: descenders were being cut on tall display font --- */
.game-hero-title h1{ line-height:1.18 !important; padding-bottom:.06em !important; }

/* --- Card titles in Games / Software grids and scroll rows --- */
.card{ display:flex; flex-direction:column; }
.card .poster{ flex:0 0 auto; }
.card .info{ flex:1 1 auto; display:block; min-width:0; }
.card .info h3{
  display:block;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  max-height:none;
  -webkit-line-clamp:none;
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
  padding-bottom:1px;
}
.card .info .sub{
  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;
}
.row-scroll{ align-items:stretch; }

@media (max-width:700px){
  .software-poster{ flex:0 0 160px; max-width:160px; }
  .software-hero h1{ font-size:clamp(34px,9vw,52px); }
}