/* Luigi's Pizza — site navigation.
   ONE definition, loaded by every page. This used to be duplicated in
   site.css and menu.css and the two drifted, which broke the call button
   on the menu page. Don't copy it again. */


.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(20,17,16,.97);
  backdrop-filter: blur(10px);
}
.nav-inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-height: 88px; max-width: var(--maxw); margin: 0 auto; padding: .4rem 1.25rem;
  position: relative;
}

/* Logo sits left and leads. */
.nav-logo { flex: none; display: block; }
.nav-logo img { width: 76px; height: 76px; display: block; }

.nav-links {
  flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: .1rem;
}
.nav-group { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; }

.nav-links a {
  display: block; color: rgba(252,247,238,.84); text-decoration: none;
  font-size: .875rem; font-weight: 600; white-space: nowrap;
  padding: .5rem .68rem; border-radius: 8px;
}
.nav-links a:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-links a.is-current { color: #fff; background: rgba(255,255,255,.13); }

/* The call button says what it is rather than relying on an icon. */
.nav-call {
  flex: none; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--red); color: #fff; text-decoration: none;
  padding: .6rem 1.05rem; border-radius: 999px;
  font-weight: 700; font-size: .875rem; white-space: nowrap;
}
.nav-call:hover { background: var(--red-dark); }
.nav-call svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; margin: 5px auto; width: 24px; background: var(--paper); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 68rem) {
  .nav-links a { font-size: .82rem; padding: .5rem .5rem; }
  .nav-logo img { width: 62px; height: 62px; }
  .nav-inner { min-height: 76px; gap: .75rem; }
}

@media (max-width: 56rem) {
  .nav-inner { min-height: 68px; justify-content: space-between; }
  .nav-toggle { display: block; order: -1; }
  .nav-logo img { width: 54px; height: 54px; }
  .nav-call span { display: none; }
  .nav-call { padding: .6rem; width: 42px; height: 42px; justify-content: center; }
  .nav-call svg { width: 18px; height: 18px; }

  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    display: none; flex-direction: column; gap: 0;
    background: rgba(20,17,16,.99); padding: .5rem 1rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,.1);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-group { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-right { border-top: 1px solid rgba(255,255,255,.1); margin-top: .5rem; padding-top: .5rem; }
  .nav-links a { padding: .85rem .5rem; font-size: 1rem; }
}


/* The menu page has its own sticky toolbar, so its nav scrolls away rather
   than stacking two sticky bars on a phone.

   It must stay POSITIONED with a z-index, though. `backdrop-filter` on .nav
   creates a stacking context; with position:static that context painted below
   the masthead that follows it, so the open mobile menu was rendering behind
   a black header of almost the same colour — it looked like the hamburger did
   nothing at all. */
.nav.nav-static { position: relative; z-index: 70; }