/* ============================================================
   SHARED SITE NAVIGATION
   Used on every page: the top nav bar, the "Consumers"/"Businesses"
   dropdowns, the mobile hamburger + full-screen accordion overlay.
   Edit nav behaviour/styling HERE, not per-page. Every page links
   this file instead of carrying its own copy.

   z-index reference for this site (keep dropdown above everything
   but the mobile overlay and the age gate):
     nav + dropdown ......... 500
     mobile full-screen nav . 9000
     age-gate modal .......... 99999
   Page-level elements (breadcrumb bars, hero sections, modals, the
   register page's map panels) must all stay below 500.
   ============================================================ */

nav {
  position: sticky; top: 0; z-index: 500;
  background: rgba(255,248,238,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(26,22,18,0.12);
  padding: 0 1.25rem;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.nav-logo img { height:40px; width:auto; object-fit:contain; display:block; }
.nav-logo-text { display:flex; flex-direction:column; gap:1px; }
.nav-logo-name { font-family:'Archivo Black','Archivo Black Fallback',sans-serif; font-size:16px; text-transform:uppercase; color:#1A1612; letter-spacing:-0.01em; line-height:1; }
.nav-logo-name span { font-family:'Permanent Marker',cursive; font-size:18px; color:#E8430A; }
.nav-logo-tag { font-family:'Space Mono',monospace; font-size:8px; letter-spacing:0.14em; text-transform:uppercase; color:#2D5A27; }

.nav-links { display:flex; align-items:center; gap:1.75rem; }
.nav-link {
  font-family:'Archivo Black','Archivo Black Fallback',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:0.02em;
  color:#1A1612; text-decoration:none; transition:color .15s;
}
.nav-link:hover { color:#E8430A; }

.nav-dropdown { position:relative; height:64px; display:flex; align-items:center; }
.nav-dropdown-trigger {
  display:flex; align-items:center; gap:6px; height:64px;
  font-family:'Archivo Black','Archivo Black Fallback',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:0.02em;
  color:#1A1612; background:none; border:none; cursor:pointer; padding:0; transition:color .15s;
}
.nav-dropdown-trigger:hover, .nav-dropdown-trigger[aria-expanded="true"] { color:#E8430A; }
.nav-chev { transition:transform .18s; flex-shrink:0; }
.nav-dropdown-trigger[aria-expanded="true"] .nav-chev { transform:rotate(180deg); }

.nav-dropdown-menu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:230px; background:#FFF8EE; border:1px solid rgba(26,22,18,0.12); border-radius:8px;
  box-shadow:0 12px 32px rgba(26,22,18,0.16);
  padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 10;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu.show {
  opacity:1; pointer-events:auto; visibility:visible; transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  font-family:'DM Sans','DM Sans Fallback',sans-serif; font-weight:500; font-size:14px; color:#1A1612;
  text-decoration:none; padding:10px 14px; border-radius:5px; transition:background .15s, color .15s;
}
.nav-dropdown-menu a:hover { background:rgba(232,67,10,0.08); color:#E8430A; }

.nav-hamburger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; }
.nav-hamburger span { display:block; width:24px; height:2px; background:#1A1612; border-radius:2px; }

.nav-overlay {
  position:fixed; inset:0; z-index:9000; background:#FFF8EE;
  display:flex; flex-direction:column; opacity:0; pointer-events:none; visibility:hidden;
  transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.nav-overlay.open { opacity:1; pointer-events:auto; visibility:visible; transform:translateY(0); }
.nav-overlay-header { display:flex; align-items:center; justify-content:space-between; padding:0 1.5rem; height:64px; border-bottom:1px solid rgba(26,22,18,0.12); flex-shrink:0; }
.nav-overlay-close { display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:none; font-size:22px; color:#1A1612; cursor:pointer; padding:0; line-height:1; }

.nav-overlay-links { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1.25rem 1.5rem 2rem; display:flex; flex-direction:column; gap:0; }

.nav-overlay-direct {
  font-family:'Archivo Black','Archivo Black Fallback',sans-serif; font-size:clamp(1.15rem,6vw,1.5rem); text-transform:uppercase;
  color:#1A1612; text-decoration:none; padding:0.85rem 0; letter-spacing:-0.01em; border-bottom:1px solid rgba(26,22,18,0.08);
  transition:color .15s; display:block;
}
.nav-overlay-direct:hover { color:#E8430A; }

.nav-accordion { border-bottom:1px solid rgba(26,22,18,0.08); }
.nav-accordion-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  font-family:'Archivo Black','Archivo Black Fallback',sans-serif; font-size:clamp(1.15rem,6vw,1.5rem); text-transform:uppercase;
  color:#1A1612; background:none; border:none; cursor:pointer; padding:0.85rem 0; letter-spacing:-0.01em;
}
.nav-accordion-trigger .nav-chev { transition:transform .2s; flex-shrink:0; margin-left:12px; }
.nav-accordion-trigger[aria-expanded="true"] .nav-chev { transform:rotate(180deg); }
.nav-accordion-trigger[aria-expanded="true"] { color:#E8430A; }

.nav-accordion-panel {
  max-height:0; overflow:hidden; transition:max-height .28s ease;
  display:flex; flex-direction:column;
}
.nav-accordion-panel.open { max-height:320px; }
.nav-accordion-panel a {
  font-family:'DM Sans','DM Sans Fallback',sans-serif; font-weight:400; font-size:1.05rem; color:#1A1612;
  text-decoration:none; padding:0.6rem 0 0.6rem 0.25rem; transition:color .15s; display:block;
}
.nav-accordion-panel a:hover { color:#E8430A; }

@media (max-width:900px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .nav-logo img { height:28px !important; }
  .nav-logo-name { font-size:13px !important; }
  .nav-logo-name span { font-size:15px !important; }
  .nav-logo-tag { display:none; }
}
@media (min-width:901px) { .nav-overlay { display:none !important; } }