/* ===================================================================
   VANCO BAB | PERSIAN KEBAB FOOD TRUCK
   Design tokens
   =================================================================== */
:root{
  --bg:            #0b0b0b;
  --bg-alt:        #161311;
  --bg-panel:      #1c1815;
  --line:          #2c2622;

  --red:           #e2231a;
  --red-deep:      #9c1610;
  --red-glow:      rgba(226,35,26,0.35);

  --cream:         #f3ede1;
  --cream-dim:     #cfc7b6;

  --gold:          #d1a054;
  --gold-dim:      #9c7a41;

  --accent:        var(--red);
  --accent-glow:   var(--red-glow);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --display: "Anton", "Arial Narrow", sans-serif;
  --body: "Work Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --maxw: 1180px;
}

/* Catering pages read gold instead of the default red brand accent */
body[data-section="catering"]{
  --accent:      var(--gold);
  --accent-glow: rgba(209,160,84,0.35);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.05;
  margin:0 0 0.4em;
  color:var(--cream);
}
p{ margin:0 0 1em; color:var(--cream-dim); }
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}
.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--gold);
  display:inline-block;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Skewer divider (signature motif) ---------------- */
.skewer-divider{
  display:flex; align-items:center; gap:0;
  margin:0 auto;
  max-width:var(--maxw);
  padding:0 24px;
}
.skewer-divider::before, .skewer-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.skewer-divider .skewer-dots{
  display:flex; gap:10px; padding:0 16px;
}
.skewer-divider .skewer-dots span{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold-dim);
}
.skewer-divider .skewer-dots span:nth-child(2){ background:var(--red); width:8px; height:8px; }

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,11,11,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:48px; width:auto; }
.nav-links{
  display:flex;
  gap:28px;
  align-items:center;
  font-family:var(--display);
  font-size:0.95rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.nav-links a{
  color:var(--cream-dim);
  position:relative;
  padding:6px 2px;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--cream); }
.nav-links a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:3px; background:var(--accent);
  border-radius:2px;
}
.nav-cta{
  background:var(--red);
  color:var(--cream) !important;
  padding:10px 20px;
  border-radius:999px;
  font-family:var(--display);
  letter-spacing:0.03em;
  box-shadow:0 6px 18px var(--red-glow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.nav-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 24px var(--red-glow); }

/* ---------------- Bottom tab bar (mobile only) ---------------- */
.bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(11,11,11,0.94);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.bottom-nav a{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:9px 4px calc(9px + env(safe-area-inset-bottom));
  color:var(--cream-dim);
  font-family:var(--mono);
  font-size:0.68rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  transition:color .18s ease;
}
.bottom-nav a svg{ width:21px; height:21px; }
.bottom-nav a.active{ color:var(--accent); }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .nav-wrap{ justify-content:center; }
  .bottom-nav{ display:flex; }
  body{ padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display);
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size:0.95rem;
  padding:14px 28px;
  border-radius:999px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{
  background:var(--red); color:var(--cream);
  box-shadow:0 8px 22px var(--red-glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px var(--red-glow); }
.btn-outline{
  background:transparent; color:var(--cream); border-color:var(--line);
}
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-gold{
  background:var(--gold); color:#181310;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(209,160,84,0.35); }

/* ---------------- Footer ---------------- */
.site-footer{
  border-top:1px solid var(--line);
  padding:56px 0 28px;
  margin-top:100px;
  background:linear-gradient(180deg, transparent, rgba(226,35,26,0.05));
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
.footer-grid h4{ font-size:0.95rem; color:var(--gold); margin-bottom:14px; }
.footer-grid p, .footer-grid a{ color:var(--cream-dim); font-size:0.95rem; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a:hover{ color:var(--cream); }
.footer-bottom{
  text-align:center;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:0.82rem;
  color:var(--cream-dim);
  font-family:var(--mono);
}
@media (max-width:760px){
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
}

/* ---------------- Page hero (inner pages) ---------------- */
.page-hero{
  padding:64px 0 40px;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(600px 260px at 85% -10%, var(--accent-glow), transparent 70%);
  pointer-events:none;
}
.page-hero h1{ font-size:clamp(2.4rem, 6vw, 4rem); }
.page-hero p{ max-width:560px; font-size:1.05rem; }

/* ---------------- Coming soon ---------------- */
.coming-soon{
  position:relative; overflow:hidden;
  min-height:64vh; display:flex; align-items:center; padding:64px 0;
}
.coming-soon::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(680px 360px at 50% 0%, var(--accent-glow), transparent 65%);
  pointer-events:none;
}
.coming-soon-inner{ position:relative; text-align:center; max-width:560px; margin:0 auto; }
.coming-soon-icon{ width:46px; height:46px; margin:0 auto 6px; color:var(--accent); }
.coming-soon-badge{
  display:inline-flex; align-items:center; gap:8px;
  margin:20px 0 26px; padding:10px 24px; border-radius:999px;
  border:1.5px solid var(--accent); background:rgba(255,255,255,0.04);
  color:var(--accent); font-family:var(--mono); font-weight:700;
  font-size:0.85rem; text-transform:uppercase; letter-spacing:0.12em;
}
.coming-soon-badge svg{ width:16px; height:16px; flex-shrink:0; }
.coming-soon-inner p{ color:var(--cream-dim); font-size:1.05rem; margin-bottom:28px; }
.coming-soon-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------------- Intro loader (homepage only) ---------------- */
#intro-loader{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(700px 340px at 12% 0%, var(--red-glow), transparent 65%),
    var(--bg);
  transition:opacity .45s ease;
}
html.intro-skip #intro-loader{ display:none; }
#intro-loader.intro-hidden{ opacity:0; pointer-events:none; }
#intro-loader .intro-logo{
  width:clamp(200px, 34vw, 320px);
  will-change:transform;
  animation:intro-drive-in .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes intro-drive-in{
  0%{ transform:translateX(-130vw); }
  72%{ transform:translateX(3vw) scale(1.02); }
  100%{ transform:translateX(0) scale(1); }
}
.brand img{ transition:opacity .3s ease; }
html.intro-playing .brand img{ opacity:0; }

/* ---------------- Cards ---------------- */
.card{
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px;
}

/* Utility */
.mt-0{margin-top:0}
.text-center{text-align:center}
section{ padding:80px 0; }
@media (max-width:760px){ section{ padding:56px 0; } }