/* KingDome Klub — Static Bar Website */
:root{
  --brand:#6b0f14;        /* deep maroon */
  --brand-2:#8f1b22;      /* accent */
  --ink:#1b1b1b;
  --muted:#666;
  --bg:#fff;
  --bg-alt:#f8f6f6;
  --radius:16px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--ink); background:var(--bg);
}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;padding:.5rem 1rem;border-radius:8px;box-shadow:var(--shadow)}

.topbar{
  background:var(--brand);
  color:#fff; padding:.4rem 1rem;
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  font-size:.9rem;
}
.topbar a{color:#fff; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.6)}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem 1rem; position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom:1px solid #eee;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-weight:700;}
.brand img{width:42px;height:42px;object-fit:contain}
.menu-btn{display:none; background:var(--brand); color:#fff; border:0; padding:.5rem .8rem; border-radius:10px;}
.links{display:flex; gap:1rem; align-items:center}
.links a{color:var(--ink); text-decoration:none; padding:.45rem .8rem; border-radius:999px;}
.links a:hover{background:#eee}
.links .cta{background:var(--brand); color:#fff}
.links .cta:hover{background:var(--brand-2)}

.hero{
  min-height:68vh; display:grid; place-items:center; position:relative;
  background:radial-gradient(1800px 500px at 50% -100px, rgba(107,15,20,.25), transparent 60%);
}
.hero .overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.0) 40%),
    url('assets/kingdome-logo.jpg') center/200px no-repeat;
  opacity:.25;
}
.hero-inner{position:relative; text-align:center; padding:2rem; max-width:900px;}
.hero h1{font-size:clamp(2.2rem, 4vw, 3.6rem); margin:.2rem 0; color:var(--brand)}
.hero p{font-size:clamp(1rem, 2vw, 1.25rem); color:#333}
.actions{display:flex; gap:1rem; justify-content:center; margin-top:1rem}
.btn{background:var(--brand); color:#fff; padding:.8rem 1.1rem; border-radius:999px; text-decoration:none; display:inline-block; box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.btn-outline{background:#fff; color:var(--brand); border:1px solid var(--brand)}

.section{padding:64px 16px}
.section.alt{background:var(--bg-alt)}
.container{max-width:1100px; margin:auto}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
@media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }

.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width: 1000px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .cards{grid-template-columns:1fr} }

.card{
  background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.card img{width:100%; height:100%; object-fit:contain; border-radius:12px}

.badges{display:flex; flex-wrap:wrap; gap:.6rem; padding:0; list-style:none}
.badges li{background:#eee; border-radius:999px; padding:.4rem .7rem}

.card h3{margin:.2rem 0}
.price{margin-top:.35rem; display:inline-block; font-weight:700; color:var(--brand)}
.note{color:var(--muted); margin-top:.6rem}

.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.gallery img{width:100%; height:180px; object-fit:cover; border-radius:12px; box-shadow:var(--shadow)}
@media (max-width: 900px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 560px){ .gallery{grid-template-columns:1fr} }

.form{display:grid; gap:.75rem}
.form label{display:grid; gap:.3rem; font-size:.95rem}
.form input,.form textarea{
  border:1px solid #ddd; padding:.7rem .8rem; border-radius:10px; font:inherit;
}
.form button{justify-self:start}

.footer{background:#120607; color:#eee; padding:28px 16px}
.footer-inner{display:grid; gap:16px; align-items:center}
.brandline{display:flex; gap:.8rem; align-items:center}
.brandline img{width:38px;height:38px;object-fit:contain}
.foot-links{display:flex; flex-wrap:wrap; gap:1rem}
.foot-links a{color:#ddd; text-decoration:none}
.copy{color:#aaa; font-size:.9rem}

@media (max-width: 780px){
  .menu-btn{display:inline-flex}
  .links{display:none; flex-direction:column; align-items:flex-start; background:#fff; position:absolute; right:1rem; top:64px; padding:1rem; box-shadow:var(--shadow); border-radius:12px}
  .links.show{display:flex}
}