/* =====================
   layout.css — header, nav, grid, footer, responsive
   ===================== */
.site-header{position:sticky; top:0; z-index:50; background:var(--bg); background-image:var(--texture); border-bottom:1px solid color-mix(in oklab, var(--ink) 10%, white)}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:.5rem}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:900}
.brand img{width:28px; height:28px}
.nav-links{display:flex; gap:1rem; align-items:center}
.nav-links a{padding:.4rem .5rem; border-radius:8px}
.nav-links a[aria-current="page"]{background:color-mix(in oklab, var(--brand) 18%, white); color:#3b2b1f}

.hero{padding:3rem 1rem; background-image:url(/assets/images/coffeeheader.gif);}
.hero-inner{display:grid; gap:1rem; place-items:center; text-align:center}
.hero .actions{display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center}

.section{padding:2rem 1rem}

.specials-grid{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.menu-grid{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.locations-grid{grid-template-columns:1fr; gap:1.2rem}

.map-wrap{border-radius:var(--radius); overflow:hidden; border:1px solid color-mix(in oklab, var(--ink) 12%, white)}
.hours{background:#fff; border-radius:var(--radius); border:1px solid color-mix(in oklab, var(--ink) 10%, white); overflow:hidden}

.site-footer{border-top:1px solid color-mix(in oklab, var(--ink) 10%, white); background:var(--bg); background-image:var(--texture)}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:1rem 0; flex-wrap:wrap}

.sticky-order{
  position:fixed; right:1rem; bottom:1rem; z-index:60;
  animation: pop .2s ease-out;
}
@keyframes pop{from{transform:scale(.98); opacity:.6} to{transform:scale(1); opacity:1}}

/* Breakpoints */
@media (min-width: 768px){
  .hero{padding:4rem 1rem}
  .hero-inner{grid-template-columns:1.2fr .8fr; text-align:left; place-items:start}
  .locations-grid{grid-template-columns:1fr 1fr}
}
@media (min-width: 1024px){
  .nav-links{gap:1.25rem}
}