/* ============================================
   JAMEZ GANG MUSIC GROUP — HEADER + FOOTER
   Shared styles loaded on every page
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;600;700;800&family=Syne+Mono&family=DM+Sans:wght@300;400;500&display=swap');

:root{
  --void:#020202;--deep:#080808;--surface:#0f0505;--card:#130303;--card2:#1a0404;
  --border:rgba(204,26,26,.16);--border2:rgba(204,26,26,.32);
  --r:#cc1a1a;--rl:#e63333;--rd:#991010;
  --glow:rgba(204,26,26,.4);--glow2:rgba(204,26,26,.14);
  --white:#fff5f5;--muted:rgba(255,245,245,.42);--muted2:rgba(255,245,245,.2);
  --text:rgba(255,245,245,.82);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--void);color:var(--white);overflow-x:hidden;padding-top:76px}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:var(--r)}

/* ===== NAVBAR ===== */
#jg-nav{position:fixed;top:0;left:0;right:0;z-index:500;height:76px;padding:0;display:flex;align-items:center;transition:all .4s;background:rgba(2,2,2,.7);backdrop-filter:blur(12px)}
#jg-nav.solid{background:rgba(2,2,2,.95);backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.jg-nav-inner{max-width:1280px;margin:0 auto;padding:0 52px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.jg-nav-logo{display:flex;align-items:center;text-decoration:none}
.jg-nav-logo img{height:48px;width:auto;object-fit:contain;display:block}
.jg-nav-logo .jg-logo-fb{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;color:var(--white)}
.jg-nav-logo .jg-logo-fb span{color:var(--r)}

.jg-nav-links{display:flex;gap:34px;list-style:none}
.jg-nav-links a{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,245,245,.55);text-decoration:none;transition:color .25s;position:relative;padding:6px 0}
.jg-nav-links a:hover,.jg-nav-links a.active{color:var(--white)}
.jg-nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--r)}

.jg-nav-right{display:flex;align-items:center;gap:18px}
.jg-shows-btn{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:11px 22px;background:var(--r);color:#fff;text-decoration:none;border:none;border-radius:1px;cursor:pointer;display:flex;align-items:center;gap:9px;box-shadow:0 0 18px var(--glow);transition:all .3s}
.jg-shows-btn:hover{background:var(--rl);box-shadow:0 0 28px rgba(204,26,26,.6)}
.jg-shows-dot{width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 8px #fff;animation:jg-livepulse 1.5s ease infinite}
@keyframes jg-livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}

.jg-ham{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;cursor:pointer}
.jg-ham span{width:24px;height:2px;background:var(--white);border-radius:2px;transition:all .3s}
.jg-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.jg-ham.open span:nth-child(2){opacity:0}
.jg-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== MOBILE DRAWER ===== */
.jg-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:599;opacity:0;pointer-events:none;transition:opacity .35s ease;backdrop-filter:blur(4px)}
.jg-drawer-overlay.open{opacity:1;pointer-events:all}
.jg-drawer{position:fixed;top:0;right:0;bottom:0;width:340px;max-width:88vw;background:var(--void);border-left:1px solid var(--border2);z-index:600;padding:90px 32px 32px;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;overflow-y:auto}
.jg-drawer.open{transform:translateX(0)}
.jg-drawer-close{position:absolute;top:24px;right:24px;background:rgba(204,26,26,.12);border:1px solid var(--border2);color:var(--white);width:36px;height:36px;border-radius:2px;cursor:pointer;font-size:14px;font-family:monospace;display:grid;place-items:center;transition:all .25s}
.jg-drawer-close:hover{background:var(--r)}
.jg-drawer-logo{margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.jg-drawer-logo img{height:54px;width:auto}
.jg-drawer-logo .jg-logo-fb{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;color:var(--white)}
.jg-drawer-logo .jg-logo-fb span{color:var(--r)}
.jg-dm-link{font-family:'Syne',sans-serif;font-size:13px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,245,245,.55);text-decoration:none;padding:18px 0;border-bottom:1px solid var(--border);transition:color .25s;display:flex;justify-content:space-between;align-items:center}
.jg-dm-link:hover,.jg-dm-link.active{color:var(--white)}
.jg-dm-link .jg-arr{color:var(--r);transition:transform .3s}
.jg-dm-link:hover .jg-arr{transform:translateX(4px)}
.jg-drawer-cta{margin-top:24px;background:var(--r);color:#fff;text-align:center;padding:15px;font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;text-decoration:none;border-radius:1px;box-shadow:0 4px 22px var(--glow);transition:background .25s;display:flex;align-items:center;justify-content:center;gap:9px}
.jg-drawer-cta:hover{background:var(--rl)}
.jg-drawer-socials{display:flex;gap:10px;margin-top:24px;justify-content:center}
.jg-drawer-soc{width:38px;height:38px;border:1px solid var(--border2);border-radius:50%;display:grid;place-items:center;font-size:14px;color:rgba(255,245,245,.5);text-decoration:none;transition:all .3s}
.jg-drawer-soc:hover{border-color:var(--r);color:var(--white);background:rgba(204,26,26,.1)}

/* ===== FOOTER ===== */
.jg-footer{background:var(--deep);border-top:1px solid var(--border);position:relative;overflow:hidden;margin-top:auto}
.jg-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--r),transparent)}
.jg-foot-inner{max-width:1280px;margin:0 auto;padding:72px 52px 36px}
.jg-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:54px;margin-bottom:48px}
.jg-foot-brand img{height:62px;width:auto;margin-bottom:18px}
.jg-foot-brand .jg-logo-fb{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:2px;color:var(--white);margin-bottom:18px;display:block}
.jg-foot-brand .jg-logo-fb span{color:var(--r)}
.jg-foot-desc{font-size:14px;color:var(--muted);line-height:1.75;max-width:340px;margin-bottom:22px}
.jg-foot-socials{display:flex;gap:10px}
.jg-fs{width:38px;height:38px;border:1px solid var(--border2);border-radius:2px;display:grid;place-items:center;font-size:14px;color:rgba(255,245,245,.5);text-decoration:none;transition:all .3s}
.jg-fs:hover{border-color:var(--r);background:rgba(204,26,26,.1);color:var(--white);transform:translateY(-2px)}
.jg-foot-col h4{font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--r);margin-bottom:18px}
.jg-foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.jg-foot-col a{font-size:14px;color:var(--muted);text-decoration:none;transition:color .25s;display:inline-block}
.jg-foot-col a:hover{color:var(--white)}
.jg-foot-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.jg-foot-cr{font-family:'Syne Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted2);text-transform:uppercase}
.jg-foot-meta{display:flex;gap:22px;flex-wrap:wrap}
.jg-foot-meta a{font-family:'Syne Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted2);text-decoration:none;text-transform:uppercase;transition:color .25s}
.jg-foot-meta a:hover{color:var(--r)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .jg-nav-inner{padding:0 28px}
  .jg-nav-links{gap:24px}
  .jg-foot-grid{grid-template-columns:1fr 1fr;gap:40px}
  .jg-foot-brand{grid-column:span 2}
}
@media(max-width:768px){
  body{padding-top:66px}
  #jg-nav{height:66px}
  .jg-nav-inner{padding:0 20px}
  .jg-nav-links,.jg-shows-btn{display:none!important}
  .jg-ham{display:flex}
  .jg-nav-logo img{height:40px}
  .jg-foot-inner{padding:60px 24px 32px}
  .jg-foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .jg-foot-brand{grid-column:span 2}
  .jg-foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:480px){
  .jg-foot-grid{grid-template-columns:1fr}
  .jg-foot-brand{grid-column:span 1}
}