/*
Theme Name: BloxStorm Ultra
Description: Medium-light lightning BG + lighter overlay + background shifted upward
Version: 1.4.2
Text Domain: bloxstorm-ultra-1-4-2
*/

:root{
  --overlay-dark: rgba(10,12,18,.38);   /* lighter than 1.4.1 */
  --overlay-radial: rgba(0,166,255,.08);
  --text: #e9f1ff;
  --muted: #a7baff;
  --brand: #00a6ff;
  --accent: #ffd166;
  --card: rgba(15,20,34,.82);
  --border: rgba(28,36,58,.85);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; min-height:100%; color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--accent); }

/* Background container - shifted up to avoid old logo area */
#bs-bg{
  position: fixed; inset:0; z-index:-2;
  background-image: url('assets/bg.jpg');
  background-position: center 20%; /* move up */
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 768px){
  #bs-bg{
    background-image: url('assets/bg-mobile.jpg');
    background-position: center 25%;
  }
}

/* Overlay */
#bs-overlay{
  position: fixed; inset:0; z-index:-1;
  background: radial-gradient(1100px 520px at 50% 0%, var(--overlay-radial), transparent),
              var(--overlay-dark);
}

.container { width: min(1100px, 92vw); margin: 0 auto; padding: 20px; }

/* Utility bar */
.utility-bar { position:sticky; top:0; z-index:100; backdrop-filter: blur(10px); background: rgba(10,12,18,.55); border-bottom: 1px solid var(--border); }
.utility-inner{ display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 12px; flex-wrap:wrap; }
.util-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; border:1px solid var(--border); box-shadow: var(--shadow); background: linear-gradient(180deg, rgba(0,166,255,.18), rgba(255,122,0,.12)); color:var(--text); font-weight:600; }
.util-btn:hover{ transform: translateY(-1px); }

/* Header */
.header { position:sticky; top:48px; backdrop-filter: blur(8px); background: rgba(11,14,22,.55); border-bottom:1px solid var(--border); z-index:90; }
.nav { display:flex; align-items:center; gap:20px; padding: 10px 0; position:relative; }
.brand { display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.5px; }
.brand img { max-height: 96px; height:auto; width:auto; filter: drop-shadow(0 0 30px rgba(255,122,0,.45)); }
.brand span { font-size: 24px; text-transform: uppercase; }

/* Desktop menu */
.menu { margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; }
.menu a { padding:12px 16px; border:1px solid var(--border); border-radius: 999px; background: linear-gradient(180deg, rgba(0,166,255,.15), rgba(255,122,0,.12)); box-shadow: var(--shadow); }
.menu .current-menu-item a { border-color: var(--brand); }

/* Mobile hamburger & dropdown */
.hamburger { display:none; margin-left:auto; width:44px; height:44px; border-radius:12px; border:1px solid var(--border); background: rgba(20,24,38,.85); align-items:center; justify-content:center; }
.hamburger span, .hamburger::before, .hamburger::after { content:""; display:block; width:22px; height:2px; background:#e9f1ff; margin:3px 0; border-radius:2px; }

@media (max-width: 1024px){
  .menu { display:none; position:fixed; left:0; right:0; padding:12px 14px; background: rgba(11,14,22,.975); border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0 0 16px 16px; flex-direction:column; z-index:110; }
  .menu.open { display:flex; }
  .menu li { list-style:none; }
  .menu a { display:flex; align-items:center; gap:12px; padding:18px 16px; margin:6px 0; border-radius:14px; font-size:16px; line-height:1.45; }
  .hamburger { display:flex; }
}

/* Gamey neon hover */
@keyframes neonPulse { 0%,100% { box-shadow: 0 0 0 rgba(0,166,255,0); } 50% { box-shadow: 0 0 22px rgba(0,166,255,.40), inset 0 0 10px rgba(255,122,0,.25); } }
.menu a:hover { animation: neonPulse 1.2s ease-in-out; }

/* Content */
.hero { display:grid; place-items:center; text-align:center; padding: 160px 0 36px; }
.hero h1 { font-size: clamp(32px, 6vw, 56px); margin: 10px 0; }

.button, .wp-block-button__link { display:inline-block; padding:12px 18px; border-radius:12px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(0,166,255,.2), rgba(255,122,0,.16)); color:var(--text); box-shadow: var(--shadow); }
.button:hover, .wp-block-button__link:hover { transform: translateY(-1px); }

.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:20px; margin: 24px 0; }
.card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); }
.card h3 { margin-top:0; }

.footer { margin-top:40px; border-top:1px solid var(--border); opacity:.95; background: rgba(10,12,18,.50); }
.footer-inner { display:flex; gap:20px; align-items:center; justify-content:space-between; padding:20px 0; flex-wrap:wrap; }
.footer nav a { margin-right: 12px; color: var(--muted); }
small { color: var(--muted); }