/*
Theme Name: 8 Ball Headquarters
Theme URI: https://8ballhq.com/
Author: 8 Ball Headquarters
Description: Custom WordPress theme for 8 Ball Headquarters — Everything Billiards. One Place.
Version: 1.0.0
Text Domain: eightballhq
*/

:root{
  --bg:#070807;
  --panel:#101410;
  --green:#54c83f;
  --gold:#d5aa54;
  --muted:#c9c9c9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:#fff;
  font-family:Arial,Helvetica,sans-serif;line-height:1.5;
}
a{color:inherit}
.site-header{
  position:sticky;top:0;z-index:999;background:#050505;
  border-bottom:1px solid #1d1d1d;padding:16px 6%;
}
.site-brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.site-logo{width:88px;height:auto;display:block;border-radius:8px}
.brand-text .logo{font-size:30px;font-weight:800;line-height:1.05}
.brand-text .logo span{color:var(--gold)}
.tag{font-size:13px;color:var(--muted)}
.site-nav{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap}
.site-nav a{color:#fff;text-decoration:none;font-weight:700;font-size:14px}
.site-nav a:hover,.site-nav .current-menu-item>a{color:var(--gold)}
.hero{
  min-height:560px;background-size:cover;background-position:center;
  display:flex;align-items:center;padding:70px 6%;position:relative;
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.90),rgba(0,0,0,.50),rgba(0,0,0,.22));
}
.hero .inner{position:relative;max-width:690px;z-index:1}
.eyebrow{color:var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:1px}
h1{font-size:56px;line-height:1.05;margin:12px 0}
h2{font-size:34px;margin:0 0 18px}
h3{margin:0 0 8px}
p{color:#ddd}
.btn{
  display:inline-block;background:var(--gold);color:#111;text-decoration:none;
  font-weight:800;padding:14px 20px;border-radius:4px;margin:8px 10px 0 0;
}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{background:transparent;color:#fff;border:1px solid #777}
.section{padding:55px 6%;max-width:1500px;margin:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.card{
  background:var(--panel);border:1px solid #242924;border-radius:12px;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-2px);border-color:#6b5731}
.card a{text-decoration:none}
.card img{width:100%;height:190px;object-fit:cover;display:block}
.card .body{padding:20px}
.band{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:stretch}
.band img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:12px}
.panel{background:linear-gradient(135deg,#101410,#080908);border:1px solid #242924;border-radius:12px;padding:32px}
.site-footer{background:#050505;border-top:1px solid #222;padding:35px 6%;color:#bbb}

/* Homepage marketplace section: exact image shown completely instead of being cropped. */
.marketplace-feature{
  max-width:none;margin:0;padding:0;
  border-top:1px solid #1f251f;border-bottom:1px solid #1f251f;
  background:#050505;
}
.marketplace-frame{
  position:relative;max-width:1500px;margin:auto;min-height:620px;overflow:hidden;
  display:flex;align-items:center;
}
.marketplace-frame .marketplace-image{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:block;background:#050505;
}
.marketplace-frame:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.24) 68%,rgba(0,0,0,.08) 100%);
  pointer-events:none;
}
.marketplace-frame .panel{
  position:relative;z-index:2;max-width:620px;margin:70px 6%;
  background:rgba(5,7,5,.76);backdrop-filter:blur(3px);
}
.marketplace-frame h2{font-size:44px}

.wp-content{padding:55px 6%;max-width:1200px;margin:auto}
.wp-content img{max-width:100%;height:auto}
.screen-reader-text{position:absolute;left:-9999px}

@media(max-width:800px){
  h1{font-size:40px}
  .band{grid-template-columns:1fr}
  .hero{min-height:480px}
  .marketplace-frame{min-height:700px;align-items:flex-end}
  .marketplace-frame .marketplace-image{object-fit:contain;object-position:center top}
  .marketplace-frame:after{background:linear-gradient(0deg,rgba(0,0,0,.96),rgba(0,0,0,.38) 70%,rgba(0,0,0,.08))}
  .marketplace-frame .panel{margin:340px 5% 35px}
}
@media(max-width:700px){
  .site-logo{width:70px}
  .site-brand{align-items:flex-start}
  .brand-text .logo{font-size:24px}
}