/* ── TOP NAVIGATION ───────────────────────────────────────────
   Shared by every page; loaded after each page's own <style> so it
   refines the nav rules there. Behaviour (✕ toggle, close on Escape /
   outside tap, compact "Order" button, scroll shadow) lives in
   whatsapp-order.js → initNav().  */

:root { --nav-ink: #1c3a2c; --nav-ease: cubic-bezier(.23, 1, .32, 1); }

body > nav {
  box-shadow: 0 1px 0 rgba(28,58,44,.12);
  transition: box-shadow .3s var(--nav-ease);
}
body > nav.scrolled { box-shadow: 0 8px 28px rgba(0,0,0,.18); }

nav .nav-logo { z-index: 2; flex-shrink: 0; }
nav .nav-logo span { white-space: nowrap; }

nav .nav-links a { text-decoration: none; }
nav .nav-links a:hover, nav .nav-links a.active { text-decoration: none; }
nav .nav-links a.nav-cta { white-space: nowrap; }

/* compact order button that stays in the bar when the links collapse */
.nav-cta-mobile {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(37,211,102,.4);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s var(--nav-ease), background .2s;
}
.nav-cta-mobile:hover { background: #1ebe5d; }
.nav-cta-mobile:active { transform: scale(.95); }

/* ── Desktop: calm sentence-case links with a sliding underline ── */
@media (min-width: 1181px) {
  nav .nav-links { gap: 1.7rem; align-items: center; }
  nav .nav-links a:not(.nav-cta) {
    position: relative;
    display: inline-block;
    padding: 6px 0;
    color: rgba(28,58,44,.8);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: none;
    white-space: nowrap;
    transition: color .2s;
  }
  nav .nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--nav-ink);
    transform: scaleX(0);
    transition: transform .28s var(--nav-ease);
  }
  nav .nav-links a:not(.nav-cta):hover,
  nav .nav-links a.active { color: var(--nav-ink); }
  nav .nav-links a:not(.nav-cta):hover::after,
  nav .nav-links a.active::after { transform: scaleX(1); }
  nav .nav-links a.active::after { height: 3px; background: #25D366; }
  nav .nav-links a.nav-cta { margin-left: .4rem; font-size: .92rem; text-transform: none; letter-spacing: .2px; }
}

/* ── Tablet & phone: ☰ menu with a proper drop-down panel ── */
@media (max-width: 1180px) {
  .nav-cta-mobile { display: inline-flex; }
  nav .hamburger {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    transition: background .2s;
  }
  nav .hamburger:hover { background: rgba(28,58,44,.08); }
  nav .hamburger span { transition: transform .3s var(--nav-ease), opacity .2s; transform-origin: center; }
  nav .hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  nav .hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
  nav .hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  nav .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 1;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 30px 5vw 22px;       /* top room for the logo badge that hangs below the bar */
    background: #F4EFE1;
    border-top: 1px solid rgba(28,58,44,.12);
    box-shadow: 0 18px 36px rgba(0,0,0,.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .22s var(--nav-ease), transform .3s var(--nav-ease), visibility .22s;
  }
  nav .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  nav .nav-links li { border-bottom: 1px solid rgba(28,58,44,.1); }
  nav .nav-links li:last-child { border-bottom: 0; padding-top: 16px; }
  nav .nav-links a:not(.nav-cta) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 4px;
    color: var(--nav-ink);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: none;
  }
  nav .nav-links a:not(.nav-cta)::after { content: '›'; font-size: 1.4rem; line-height: 1; opacity: .35; }
  nav .nav-links a.active { color: #128C7E; }
  nav .nav-links a.active::after { content: '●'; font-size: .6rem; opacity: 1; color: #25D366; }
  nav .nav-links a.nav-cta {
    justify-content: center;
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: .2px;
  }
  /* staggered slide-in of the items */
  nav .nav-links li { opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--nav-ease); }
  nav .nav-links.open li { opacity: 1; transform: none; }
  nav .nav-links.open li:nth-child(2) { transition-delay: .03s; }
  nav .nav-links.open li:nth-child(3) { transition-delay: .06s; }
  nav .nav-links.open li:nth-child(4) { transition-delay: .09s; }
  nav .nav-links.open li:nth-child(5) { transition-delay: .12s; }
  nav .nav-links.open li:nth-child(6) { transition-delay: .15s; }
  nav .nav-links.open li:nth-child(7) { transition-delay: .18s; }
  nav .nav-links.open li:nth-child(8) { transition-delay: .21s; }
}

/* phones: icon-only order button so the name never runs into it */
@media (max-width: 520px) {
  .nav-cta-mobile { width: 40px; height: 40px; padding: 0; justify-content: center; margin-right: 4px; }
  .nav-cta-mobile span { display: none; }
  .nav-cta-mobile svg { width: 20px; height: 20px; }
}
/* small phones: slightly smaller badge + name */
@media (max-width: 420px) {
  nav .nav-logo img { width: 88px; height: 88px; top: -14px; }
  nav .nav-logo span { margin-left: 94px; font-size: .95rem; }
}
/* narrowest phones: the round logo already spells out the name */
@media (max-width: 370px) {
  nav .nav-logo span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  nav .nav-links, nav .nav-links li, nav .hamburger span { transition: none !important; }
}