/* Base spacing + section title */
section{padding:64px 0}
.section-title{display:flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--naija-green);font-weight:700}
.dot{width:14px;height:14px;border-radius:50%;background:conic-gradient(var(--naija-green), var(--jamaica-gold), var(--jamaica-green));box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(0,0,0,.06)}

/* HERO */
.hero{position:relative;min-height:68vh;display:grid;place-items:center;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;background:
  linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.15)),
  url('/assets/img/owambe_1.jpg') center/cover no-repeat;
  filter:saturate(1.05);
}
.hero .inner{position:relative;text-align:center;color:#fff;padding:80px 16px}
.hero h2{font-family:"Playfair Display",serif;font-size:clamp(2rem,4vw,3.5rem);margin:0 0 10px}
.hero p{max-width:800px;margin:0 auto 16px;color:#f4f4f4}
.hero .badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.chip{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);padding:8px 12px;border-radius:999px}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}

/* VIBES STRIP */
.container{width:min(1200px,92%);margin-inline:auto}
.vibes{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.vibe{grid-column:span 12;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;gap:14px;align-items:center;border:2px solid #f0f0f0}
@media(min-width:900px){.vibe{grid-column:span 4}}
.vibe i{font-size:1.2rem;color:var(--jamaica-green)}

/* FOOD GRID */
.foodgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.card{grid-column:span 12;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:2px solid #fff}
@media(min-width:700px){.card{grid-column:span 6}}
@media(min-width:1024px){.card{grid-column:span 3}}
.card img{width:100%;height:220px;object-fit:cover}
.card .body{padding:14px}
.price{font-weight:700;color:var(--naija-green)}

/* CTA BAR */
.cta-bar{background:linear-gradient(90deg,#101010,#008751,#fed100,#009b3a);border-radius:18px;padding:22px;color:#fff;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-bar strong{font-size:1.2rem}

/* MASONRY GALLERY */
.gallery{columns:1;column-gap:12px}
@media(min-width:700px){.gallery{columns:2}}
@media(min-width:1100px){.gallery{columns:3}}
.shot{break-inside:avoid;background:#fff;border-radius:14px;overflow:hidden;margin:0 0 12px;box-shadow:var(--shadow);border:2px solid #fff}
.shot img{width:100%;height:auto;display:block}
.shot .cap{padding:10px;font-size:.9rem;color:#444}

/* Utility */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #ddd;background:#fff;cursor:pointer;transition:.2s}
.btn.primary{background:var(--grad);border-color:transparent;color:#101010;font-weight:600}
.btn.alt{background:#101010;border-color:#101010;color:#fff}
.btn:hover{transform:translateY(-2px)}
.muted{color:#666}

/* Header buttons: black “outer border” without layout shift */
header .navlinks a,
header .pill,
header .cta {
  color: #000 !important;
  background: #fff;                 /* keep the clean white pill */
  border: none !important;          /* remove real border */
  box-shadow: 0 0 0 2px #000;       /* outer ring that doesn't affect layout */
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 500;
  transition: all .3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Hover + active: invert, keep ring the same thickness */
header .navlinks a:hover,
header .pill:hover,
header .cta:hover,
header .navlinks a.active,
header .pill.active,
header .cta.active,
header .navlinks a[aria-current="page"] {
  background: #000 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px #000;       /* same ring -> no reflow */
}