/* =========================================================
   Areas dropdown in the main nav, shared by every page.
   It is a <details> menu, so it opens without JS and every
   city link is plain HTML that search engines can crawl.
   /nav-areas.js only adds outside-click / Escape closing and
   the phone menu button on pages built on city.css.
========================================================= */

.nav-areas > summary.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  list-style: none; cursor: pointer; user-select: none;
}
.nav-areas > summary::-webkit-details-marker { display: none; }
/* The chevron. Specific enough to beat the homepage and gallery's
   .nav-link::after hover underline, which would otherwise take it over. */
.nav-areas > summary.nav-link::after {
  content: ""; display: inline-block; flex: none; position: static;
  width: 6px; height: 6px; background: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s ease;
}
.nav-areas[open] > summary { color: #fff; }
.nav-areas[open] > summary.nav-link::after { transform: translateY(1px) rotate(-135deg); }

/* Desktop: a panel that hangs under the nav bar, centered on it */
.nav-areas-panel {
  position: absolute; top: 100%; left: 50%; z-index: 1001;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 2fr 1fr; gap: 22px 44px;
  padding: 26px 32px 20px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.12); border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 28px 60px rgba(0,0,0,0.65);
  text-align: left;
}
.nav-areas-panel--single { grid-template-columns: 1fr; width: min(460px, calc(100vw - 32px)); }

.nav-areas-head {
  margin: 0 0 10px;
  font-family: 'Oswald', sans-serif; font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: #888;
}
.nav-areas-list { list-style: none; margin: 0; padding: 0; }
.nav-areas-col--wide .nav-areas-list { columns: 2; column-gap: 32px; }
.nav-areas-panel--single .nav-areas-list { columns: 2; column-gap: 32px; }
.nav-areas-list li { break-inside: avoid; }
.nav-areas-list a {
  display: block; padding: 5px 0;
  font-size: 0.95rem; font-weight: 400; letter-spacing: 0.01em; text-transform: none;
  color: #ccc; transition: color 0.2s ease;
}
.nav-areas-list a:hover, .nav-areas-list a:focus-visible { color: #fff; }
.nav-areas-list a[aria-current="page"] { color: #fff; font-weight: 600; }
.nav-areas-list a[aria-current="page"]::before { content: "\2022\00a0"; }

.nav-areas-foot {
  grid-column: 1 / -1; margin: 0; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.85rem; letter-spacing: 0.02em; text-transform: none;
}
.nav-areas-foot a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Phone menu button (pages built on city.css hide .nav-links on phones) */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 40px; padding: 0 9px;
  background: transparent; border: 1px solid rgba(255,255,255,0.35); border-radius: 8px;
  cursor: pointer;
}
.nav-burger span {
  display: block; height: 1.5px; background: #fff; border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav.is-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-burger { display: inline-flex; }
  .nav.is-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    /* ends above the sticky call bar city pages pin to the bottom on phones */
    max-height: calc(100vh - 205px); max-height: calc(100dvh - 205px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 22px 18px;
    background: #000; border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 24px 50px rgba(0,0,0,0.6);
  }
  .nav.is-open .nav-links > .nav-link,
  .nav.is-open .nav-links .nav-areas > summary {
    display: flex; padding: 15px 0; font-size: 0.92rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .nav.is-open .nav-links .nav-areas > summary { justify-content: space-between; }
  .nav-links .nav-areas-panel {
    position: static; transform: none; width: auto; max-height: none; overflow: visible;
    grid-template-columns: 1fr; gap: 18px;
    padding: 14px 0 18px; background: transparent;
    border: 0; border-radius: 0; box-shadow: none;
  }
  .nav-links .nav-areas-list { columns: 2; column-gap: 20px; }
}

/* Inside the full-screen phone overlay on the homepage and gallery */
.nav-mobile-overlay .nav-areas { display: flex; flex-direction: column; align-items: center; width: 100%; }
.nav-mobile-overlay .nav-areas-panel {
  position: static; transform: none; width: min(100%, 440px); max-height: none; overflow: visible;
  grid-template-columns: 1fr; gap: 20px; margin-top: 18px; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  text-align: center;
}
.nav-mobile-overlay .nav-areas-list { columns: 2; column-gap: 20px; }
.nav-mobile-overlay .nav-areas-list a { font-size: 1.02rem; padding: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  .nav-areas > summary.nav-link::after, .nav-burger span, .nav-areas-list a { transition: none; }
}