/* ============================================================================
   GRAND RAPIDS BARS — SITE STYLES
   One file controls the whole look. Brand colors are at the very top.
   ============================================================================ */

:root{
  /* ---- BRAND COLORS (change these to restyle the whole site) ---- */
  --ink:#0a0710;        /* deep plum-black background */
  --ink-2:#120c1c;      /* slightly lighter panel */
  --ink-3:#1b1326;      /* card background */
  --haze:#2a1f3d;       /* borders / hairlines */
  --bone:#efe9f2;       /* main light text */
  --muted:#9b8fae;      /* secondary text */
  --amber:#ffb347;      /* warm gold accent */
  --neon:#ff3d77;       /* neon pink accent */
  --cyan:#56e0d6;       /* electric cyan accent */
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- HEADER / NAV ---- */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(10,7,16,.94);border-bottom:1px solid var(--haze)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:.04em}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--neon);box-shadow:0 0 12px var(--neon),0 0 4px var(--neon);animation:flicker 4s infinite}
@keyframes flicker{0%,18%,22%,100%{opacity:1}19%,21%{opacity:.35}}
.brand b{color:var(--bone);font-weight:400}
.brand span{color:var(--amber)}
nav ul{display:flex;gap:34px;list-style:none}
nav a{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);transition:color .2s;position:relative}
nav a.cur{color:var(--bone)}
nav a::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:1px;background:var(--amber);transition:width .25s}
nav a:hover{color:var(--bone)}
nav a:hover::after,nav a.cur::after{width:100%}
.nav-cta{font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;font-size:16px;color:var(--ink)!important;background:var(--amber);padding:9px 18px;border-radius:2px;transition:transform .15s,box-shadow .2s}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(255,179,71,.32)}
.burger{display:none;background:none;border:0;color:var(--bone);font-size:24px;cursor:pointer}

/* ---- gradient placeholders for bar images ---- */
.g1{background:linear-gradient(135deg,#3a1a2e,#6e2347 60%,#241326)}
.g2{background:linear-gradient(135deg,#1a2c3a,#235e6e 60%,#13241f)}
.g3{background:linear-gradient(135deg,#3a3018,#6e5a23 60%,#261f13)}
.g4{background:linear-gradient(135deg,#2a1a3a,#4a236e 60%,#1c1326)}
.g5{background:linear-gradient(135deg,#3a1a1a,#6e2323 60%,#261313)}
.g6{background:linear-gradient(135deg,#1a3a2c,#236e52 60%,#132619)}
.g7{background:linear-gradient(135deg,#33163a,#5c236e 60%,#221326)}
.g8{background:linear-gradient(135deg,#1a2336,#234a6e 60%,#131c26)}

/* ---- FOOTER ---- */
footer{border-top:1px solid var(--haze);padding:40px 0;background:var(--ink-2)}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.foot-brand{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.04em}
.foot-brand span{color:var(--amber)}
.foot-row small{font-size:12px;color:var(--muted);letter-spacing:.04em}
.foot-row .social{display:flex;gap:18px}
.foot-row .social a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.foot-row .social a:hover{color:var(--cyan)}

@media(max-width:680px){
  nav ul{display:none}
  .burger{display:block}
  .nav-cta{display:none}
  /* mobile menu: full-screen solid overlay so NO page content shows through */
  nav.open ul{
    display:flex;
    position:fixed;
    top:68px;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:calc(100vh - 68px);
    flex-direction:column;
    gap:0;
    background:#0a0710;
    padding:0;
    z-index:200;
  }
  nav.open ul li{width:100%;list-style:none}
  nav.open ul li a{display:block;padding:20px 24px;font-size:17px;color:var(--bone);border-bottom:1px solid var(--haze);background:#0a0710}
}
@media(max-width:680px){nav.open{position:static}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}