/*
Theme Name: ChillaSmoke Pro
Theme URI: https://chillasmoke.com
Author: Carlton + ChatGPT
Author URI: https://chillasmoke.com
Description: Custom retro-modern storefront theme for ChillaSmoke (awareness-focused, non-ecommerce).
Version: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chillasmoke
Tags: custom, one-page, business, dark, retro
*/

:root{--bg:#0b0d10;--panel:#0f131a;--panel2:#121824;--text:#e9eef6;--muted:#a8b3c7;--brand:#2dd4bf;--brand2:#f97316;--lime:#a3e635;--shadow:0 18px 50px rgba(0,0,0,.55);--radius:22px;--radius2:16px;--max:1160px;--ring:0 0 0 2px rgba(45,212,191,.22),0 0 0 6px rgba(249,115,22,.12)}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";background:radial-gradient(1200px 700px at 20% 0%, rgba(45,212,191,.15), transparent 60%),radial-gradient(900px 600px at 70% 10%, rgba(249,115,22,.14), transparent 55%),var(--bg);color:var(--text);line-height:1.5}
a{color:inherit}
img{max-width:100%;height:auto}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;color:#000;padding:10px 12px;border-radius:10px;z-index:9999}

.site-header{position:sticky;top:0;z-index:999;background:rgba(10,12,16,.72);backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-badge{width:40px;height:40px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 10px 30px rgba(0,0,0,.45);display:grid;place-items:center}
.brand-badge svg{width:22px;height:22px;opacity:.95}
.brand-name{font-weight:900;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}

.nav{display:flex;align-items:center;gap:18px}
.nav a{font-weight:650;font-size:14px;color:rgba(233,238,246,.92);text-decoration:none;padding:10px 12px;border-radius:12px;transition:.18s}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav .current-menu-item>a,.nav .current_page_item>a{background:rgba(45,212,191,.12);box-shadow:inset 0 0 0 1px rgba(45,212,191,.20)}
.nav-cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:14px;text-decoration:none;font-weight:750;font-size:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);transition:.18s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,rgba(45,212,191,.95),rgba(249,115,22,.92));border:none;color:#071014}
.btn.ghost{background:transparent}
.hamburger{display:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);border-radius:14px;padding:10px 12px;cursor:pointer}
.hamburger svg{width:18px;height:18px}
.mobile-panel{display:none}

.hero{position:relative;padding:64px 0 22px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}
.hero-card{background:linear-gradient(180deg,rgba(18,24,36,.88),rgba(12,16,24,.78));border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;position:relative;overflow:hidden}
.hero-card:before{content:"";position:absolute;inset:-2px;background:radial-gradient(800px 260px at 18% 0%, rgba(45,212,191,.28), transparent 60%),radial-gradient(700px 280px at 75% 10%, rgba(249,115,22,.26), transparent 55%);pointer-events:none}
.hero-card>*{position:relative}
.kicker{display:inline-flex;gap:10px;align-items:center;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:rgba(233,238,246,.85)}
.kicker .dot{width:10px;height:10px;border-radius:99px;background:var(--lime);box-shadow:0 0 0 4px rgba(163,230,53,.12)}
h1{font-size:46px;line-height:1.05;margin:14px 0 14px;font-weight:950}
.lead{font-size:16px;color:rgba(233,238,246,.86);max-width:58ch}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px}
.pill{font-size:13px;font-weight:650;color:rgba(233,238,246,.88);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);padding:8px 10px;border-radius:999px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero-note{margin-top:16px;color:var(--muted);font-size:13px}
.hero-media{background:linear-gradient(180deg,rgba(18,24,36,.60),rgba(12,16,24,.70));border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.hero-media .media-top{padding:18px 18px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:750;color:rgba(233,238,246,.85);padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.tag svg{width:14px;height:14px}
.media-figure{position:relative;flex:1;min-height:300px;background:
    url(assets/img/hero.png) center/cover no-repeat,
    radial-gradient(600px 300px at 20% 10%, rgba(45,212,191,.22), transparent 55%),
    radial-gradient(600px 300px at 70% 0%, rgba(249,115,22,.22), transparent 55%),
    #0a0d13;
}
.media-figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%, rgba(7,10,14,.86));}
.media-bottom{padding:16px 18px 18px;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:12px}
.stat b{display:block;font-size:16px}
.stat span{display:block;color:var(--muted);font-size:12px;margin-top:2px}

.section{padding:52px 0}
.section h2{font-size:30px;margin:0 0 10px}
.section p{color:rgba(233,238,246,.84)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:rgba(18,24,36,.72);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius2);padding:18px;box-shadow:0 12px 34px rgba(0,0,0,.38)}
.card h3{margin:10px 0 8px;font-size:18px}
.card p{margin:0;color:rgba(233,238,246,.82);font-size:14px}
.icon{width:40px;height:40px;border-radius:14px;background:rgba(45,212,191,.10);display:grid;place-items:center;border:1px solid rgba(45,212,191,.20)}
.icon.orange{background:rgba(249,115,22,.10);border-color:rgba(249,115,22,.20)}
.icon svg{width:18px;height:18px;opacity:.9}

.banner{background:linear-gradient(135deg,rgba(45,212,191,.18),rgba(249,115,22,.14));border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;box-shadow:var(--shadow)}
.banner b{font-size:18px}
.banner span{color:rgba(233,238,246,.86);font-size:14px}
.banner .btn{box-shadow:none}

.location{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;align-items:stretch}
.map{border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.map iframe{width:100%;height:100%;min-height:340px;border:0;filter:contrast(1.05) saturate(1.1)}
.hours{display:grid;gap:12px}
.hours .row{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);font-size:14px}
.hours .row span{color:var(--muted)}

.form{display:grid;gap:12px}
.input{width:100%;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,16,.55);color:var(--text);outline:none}
.input:focus{box-shadow:var(--ring);border-color:rgba(45,212,191,.35)}
textarea.input{min-height:120px;resize:vertical}
.form .btn{width:fit-content}

.site-footer{padding:42px 0;border-top:1px solid rgba(255,255,255,.10);margin-top:34px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start}
.small{color:var(--muted);font-size:13px}
.footer-links{display:flex;flex-wrap:wrap;gap:10px}
.footer-links a{color:rgba(233,238,246,.88);text-decoration:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:8px 10px;border-radius:999px;font-size:13px}
.footer-links a:hover{background:rgba(255,255,255,.07)}

.content{padding:38px 0}
.prose{max-width:820px}
.prose h1,.prose h2,.prose h3{line-height:1.15}
.prose a{color:var(--brand)}
.post-meta{color:var(--muted);font-size:13px;margin-top:6px}
.post-card{display:block;text-decoration:none}
.post-card:hover{transform:translateY(-1px)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.post-card .thumb{height:160px;border-radius:18px;background:linear-gradient(135deg,rgba(45,212,191,.12),rgba(249,115,22,.12)),url(assets/img/thumb.svg) center/cover no-repeat;border:1px solid rgba(255,255,255,.10)}

@media (max-width: 980px){
  h1{font-size:40px}
  .hero-grid,.location{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .nav{display:none}
  .hamburger{display:inline-flex}
  .mobile-panel{display:none;border-top:1px solid rgba(255,255,255,.10);padding:12px 0}
  .mobile-panel a{display:block;padding:12px 16px;border-radius:14px;text-decoration:none;color:rgba(233,238,246,.92)}
  .mobile-panel a:hover{background:rgba(255,255,255,.06)}
}