/* ══════════════════════════════════════════════════════
   artmap-nav.css — Shared topnav for all artmap pages
   ══════════════════════════════════════════════════════ */

/* ── Container ── */
#topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3000;
  height: 56px;
  background: #faf7f0;
  border-bottom: 1px solid #e0d8cc;
  display: grid;
  grid-template-columns: auto minmax(120px, 480px) auto;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-sizing: border-box;
}

/* ── Left slot ── */
#nav-left {
  display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden;
}

/* ── Brand (logo) ── */
#nav-brand {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  min-width: 0; cursor: pointer;
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
#nav-brand img {
  flex-shrink: 0;
  display: block;
}
#nav-title {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; color: #3a3028;
  line-height: 1.2;
}
#nav-sub {
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.06em;
  margin-top: 2px; white-space: nowrap; color: #b0a89a;
  line-height: 1.2;
}

/* ── Separator ── */
.nav-sep {
  width: 1px; height: 18px; background: #e0d8cc; flex-shrink: 0;
}

/* ── Back link ── */
#nav-back {
  display: flex; align-items: center; gap: 4px;
  text-decoration: none;
  font-family: var(--font-body, 'Space Grotesk', sans-serif);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap; color: #9a8e82;
}
#nav-back svg { width: 13px; height: 13px; flex-shrink: 0; }
#nav-back:hover { background: #f0e8dc; color: #3a3028; }

/* ── Center slot ── */
#nav-center {
  justify-self: center;
  display: flex; align-items: center; gap: 10px;
  min-width: 0; overflow: hidden;
  width: 100%;
}

/* ── Right slot ── */
#nav-right {
  justify-self: end;
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}

/* ── Icon buttons ── */
.nav-btn {
  width: 28px; height: 28px;
  border: none; background: transparent; cursor: pointer;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #9a8e82;
  transition: background 0.12s, color 0.12s;
}
.nav-btn svg { width: 15px; height: 15px; }
.nav-btn:hover  { background: #f0e8dc; color: #3a3028; }
.nav-btn.active { background: #ede5d8; color: #3a3028; }

/* ── Mode divider (between icon groups) ── */
.nav-divider {
  width: 1px; height: 18px;
  background: #e0d8cc;
  margin: 0 4px; flex-shrink: 0;
}

/* ── Iframe: hide nav ── */
body.in-iframe #topnav { display: none; }

/* ══════════════════════════════════════
   MODE BUTTONS — labeled variant
   Used on all pages for Map / Routes / Magazine
   ══════════════════════════════════════ */
.mode-btn {
  gap: 5px;
  padding: 0 10px 0 8px;
  width: auto;
}
.mode-btn .nav-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  white-space: nowrap; line-height: 1;
  display: inline-block; overflow: hidden;
  max-width: 80px; opacity: 1;
  transition: max-width 0.2s ease, opacity 0.15s ease;
}

/* Below 960px: hide labels, revert to icon-only sizing */
@media (max-width: 959px) {
  .mode-btn { padding: 0 7px; gap: 0; }
  .mode-btn .nav-label { max-width: 0; opacity: 0; }
}

/* ════════════════════════════════
   MOBILE NAV — shared elements
   Hidden on desktop, shown at ≤768px
   ════════════════════════════════ */

#nav-mobile {
  display: none; /* shown via media query */
  width: 100%; align-items: center; gap: 8px;
}
.nav-mobile-left {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.nav-mobile-tabs {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: #f0e8dc; border-radius: 8px; padding: 3px; gap: 2px;
}
.mtab {
  padding: 5px 12px; border-radius: 6px;
  border: none; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  color: #9a8e82; transition: all 0.15s; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.mtab.active { background: #faf7f0; color: #3a3028; box-shadow: 0 1px 3px rgba(58,48,40,0.1); }
.mtab:not(.active):hover { color: #3a3028; }

/* Mobile search panel — overlayt de volledige topnav */
#mobile-search-panel {
  display: none; position: fixed;
  top: 0; left: 0; right: 0; z-index: 4500;
  height: 56px;
  background: #faf7f0; border-bottom: 1px solid #e0d8cc;
  padding: 0 6px 0 14px;
  align-items: center; gap: 8px;
  box-shadow: 0 4px 12px rgba(58,48,40,0.08);
}
#mobile-search-panel.open { display: flex; }
#mobile-search-panel input {
  flex: 1; padding: 9px 12px;
  border: 1px solid #e0d8cc; border-radius: 10px;
  font-size: 16px; font-family: inherit; /* 16px prevents iOS zoom */
  background: #fefcf5; color: #3a3028; outline: none;
  -webkit-appearance: none;
}
#mobile-search-panel input:focus { border-color: #8bbda0; }
#mobile-search-panel input::placeholder { color: #bbb0a5; }
#mob-search-close {
  flex-shrink: 0; width: 32px; height: 32px;
  background: #ede7de; border: none; border-radius: 50%; cursor: pointer;
  color: #5a5048; display: flex; align-items: center; justify-content: center;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#mob-search-close:active { background: #e0d8cc; }
#mob-search-close svg { width: 14px; height: 14px; }

/* Mobile settings dropdown */
#mobile-settings-dd {
  display: none; position: fixed;
  top: 56px; right: 12px; z-index: 2900;
  background: #fefcf5; border: 1px solid #e0d8cc;
  border-radius: 10px; box-shadow: 0 6px 20px rgba(100,80,60,0.13);
  padding: 6px; min-width: 172px;
}
#mobile-settings-dd.open { display: block; }
.mobile-dd-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 7px;
  width: 100%; border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 500; font-family: inherit;
  color: #3a3028; text-align: left; transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.mobile-dd-btn:hover, .mobile-dd-btn:active { background: #f0e8dc; }
.mobile-dd-btn svg { width: 16px; height: 16px; flex-shrink: 0; color: #9a8e82; }
.mobile-dd-sep { height: 1px; background: #e0d8cc; margin: 4px 0; }

/* ── Activate mobile nav at ≤768px ── */
@media (max-width: 768px) {
  #topnav { display: flex; padding: 0 12px; gap: 0; }
  #nav-left, #nav-center, #nav-right { display: none !important; }
  #nav-mobile { display: flex; }
}

/* ── Dark mode for mobile elements ── */
html.dark .nav-mobile-tabs { background: rgba(255,255,255,0.08); }
html.dark .mtab { color: rgba(255,255,255,0.38); }
html.dark .mtab.active { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); box-shadow: none; }
html.dark #mobile-search-panel { background: #1e1b18; border-color: rgba(255,255,255,0.08); }
html.dark #mobile-search-panel input { background: #252220; border-color: rgba(255,255,255,0.1); color: #e0d8c8; }
html.dark #mobile-search-panel input::placeholder { color: #504840; }
html.dark #mob-search-close { background: #2e2a26; color: rgba(255,255,255,0.6); }
html.dark #mobile-settings-dd { background: #1a1814; border-color: rgba(255,255,255,0.09); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
html.dark .mobile-dd-btn { color: rgba(255,255,255,0.8); }
html.dark .mobile-dd-btn:hover { background: rgba(255,255,255,0.08); }
html.dark .mobile-dd-btn svg { color: rgba(255,255,255,0.4); }
html.dark .mobile-dd-sep { background: rgba(255,255,255,0.08); }

/* ════════════════════════════════
   DARK MODE
   Triggered by:
   - html.dark  (artmap.html / editorial — system toggle)
   - #topnav.dark  (artmap-view.html — diary mood)
   ════════════════════════════════ */

html.dark #topnav,
#topnav.dark {
  background: rgba(6, 6, 8, 0.88);
  border-color: rgba(255, 255, 255, 0.07);
}
html.dark #nav-title,
#topnav.dark #nav-title    { color: rgba(255,255,255,0.88); }
html.dark #nav-sub,
#topnav.dark #nav-sub      { color: rgba(255,255,255,0.3); }
html.dark .nav-sep,
#topnav.dark .nav-sep      { background: rgba(255,255,255,0.12); }
html.dark #nav-back,
#topnav.dark #nav-back     { color: rgba(255,255,255,0.45); }
html.dark #nav-back:hover,
#topnav.dark #nav-back:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.88); }
html.dark .nav-btn,
#topnav.dark .nav-btn      { color: rgba(255,255,255,0.45); }
html.dark .nav-btn:hover,
#topnav.dark .nav-btn:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.88); }
html.dark .nav-btn.active,
#topnav.dark .nav-btn.active { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.88); }
html.dark .nav-divider,
#topnav.dark .nav-divider  { background: rgba(255,255,255,0.1); }