/* Don Town — site-specific overrides. Loaded after base.css. */
:root{--charcoal:#2b2d30;--cream:#f4f1e6}

/* Display type: condensed, uppercase like the DON TOWN wordmark */
h1,h2,h3{font-weight:600;letter-spacing:0;text-transform:uppercase}
h2{font-size:var(--fs-2xl)}
.eyebrow{color:var(--brand)}

/* Header: dark like the original, white logo */
.site-header{background:var(--charcoal);border-bottom:0}
.site-header .brand{color:#fff;font-size:1.6rem;font-weight:600;text-transform:uppercase}
.site-header .brand img{height:44px;width:auto}
.site-header .nav a{color:#e6e6e6}
.site-header .nav a:hover,.site-header .nav a[aria-current="page"]{color:var(--accent)}
.site-header .nav a.btn-primary{color:#fff}
.site-header .nav-toggle{color:#fff}
.header-cta{display:none}
@media(max-width:860px){
  .site-header .nav{background:var(--charcoal);border-bottom-color:#444}
  .site-header .nav a{border-bottom-color:#444}
  .site-header .container{gap:var(--s-3)}
  .header-cta{display:inline-flex;margin-left:auto;padding:.7em 1em;min-height:44px;font-size:var(--fs-sm)}
  .nav .btn-primary{display:none}
}

/* Hero: full-bleed food photo with dark overlay (as the original), left-aligned copy */
.hero.photo{background:var(--charcoal);color:#fff;padding-block:clamp(4rem,12vw,8.5rem);isolation:isolate}
.hero.photo .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.hero.photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(25,26,28,.88) 0%,rgba(25,26,28,.65) 55%,rgba(25,26,28,.35) 100%)}
.hero.photo h1{font-size:var(--fs-3xl);color:#fff;max-width:14ch;margin-bottom:var(--s-5)}
.hero.photo .eyebrow{color:var(--accent)}
.hero.photo .lede{color:#eceae3;max-width:46ch}
.hero.photo .lede strong{color:#fff}
.hero.photo .proof{color:#d8d6cf}
.hero.photo .proof strong{color:#fff}
.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-light:hover{background:#fff;color:var(--charcoal)}

/* Steps with icons */
.step{padding-top:0}
.step::before{position:static;display:block;margin-bottom:var(--s-3)}
.step .icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:var(--cream);color:var(--brand);margin-bottom:var(--s-4)}
.step .icon svg{width:28px;height:28px}

/* Menu category cards with image */
.cat{padding:0;overflow:hidden;display:flex;flex-direction:column}
.cat .media{aspect-ratio:4/3;background:var(--cream);display:grid;place-items:center}
.cat .media img{width:100%;height:100%;object-fit:contain;padding:var(--s-4)}
.cat .body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.cat .body h3{margin:0}
.cat .body p{margin:0}
.cat .body .link{margin-top:auto;padding-top:var(--s-3);font-weight:650;color:var(--brand);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.cat .body .link:hover{text-decoration:underline}

/* Promise / photo split */
.photo-frame{border-radius:calc(var(--radius) * 1.6);overflow:hidden;aspect-ratio:4/3;background:var(--cream);box-shadow:var(--shadow)}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-3)}
.ticks li{display:flex;gap:.6em;align-items:flex-start}
.ticks svg{flex:none;width:22px;height:22px;color:var(--brand);margin-top:.15em}

/* CTA band in charcoal so it reads as "the original, sharpened" */
.cta-band{background:var(--charcoal)}
.cta-band .btn-primary{background:var(--accent);color:var(--accent-ink)}

/* Price list (menu page) */
.price-list{list-style:none;padding:0;margin:0}
.price-list li{display:flex;justify-content:space-between;gap:var(--s-4);padding:.75em 0;border-bottom:1px dashed var(--line)}
.price-list li span:last-child{font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Floating WhatsApp (sits above the demo badge) */
.wa-float{position:fixed;right:14px;bottom:54px;z-index:150;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:scale(1.05)}

.site-footer{background:var(--charcoal)}
.site-footer .brand img{height:40px;width:auto}
.pt-0{padding-top:0}