/* Site navbar in the map tools' look (2026-10-19 redesign, "Expedition").
 *
 * Same tokens as interactive-map.css (.im-root): navy ground, dark glass panels, white-alpha lines,
 * one yellow accent. Loaded by base.html AFTER its inline <style>, and every rule is scoped under
 * #navbar / #mobile-menu so it outranks the Tailwind utility classes on the markup
 * (`hover:bg-gray-700/50` is 0-2-0, `#navbar .nav-button:hover` is 1-2-0) without touching them.
 * Only the navbar is restyled here; page bodies keep their own styles until they are redesigned.
 */
:root {
    --dz-bg: #000027;
    --dz-panel: rgba(10, 14, 28, .96);
    --dz-chrome: rgba(10, 14, 28, .92);
    --dz-surface: #0a0e1c;
    --dz-field: #0f1424;
    --dz-raised: #151b2e;
    --dz-hover: rgba(255, 255, 255, .06);
    --dz-line: rgba(255, 255, 255, .08);
    --dz-line-strong: rgba(255, 255, 255, .14);
    --dz-text: #e5e7eb;
    --dz-text-2: #c3c9d4;
    --dz-muted: #8b95a8;
    --dz-accent: #facc15;
    --dz-accent-hover: #fde047;          /* text links only */
    --dz-accent-press: #eab308;          /* yellow BUTTON hover: one step deeper, never the paler lemon */
    --dz-accent-glass: rgba(250, 204, 21, .14);        /* see-through yellow: Sign in, Join via DZSA */
    --dz-accent-glass-hover: rgba(250, 204, 21, .24);
    --dz-accent-glass-line: rgba(250, 204, 21, .5);
    --dz-accent-glass-ink: #fde047;
    --dz-accent-ink: #0a0e1c;
    --dz-accent-soft: rgba(250, 204, 21, .12);
    --dz-shadow-2: 0 6px 20px rgba(0, 0, 0, .45);
    --dz-shadow-3: 0 20px 48px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
    --dz-ease: cubic-bezier(.2, .8, .2, 1);
}

.scroll-progress { background: var(--dz-accent); }

/* ---- bar ---- */
#navbar {
    background: var(--dz-chrome);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dz-line);
    box-shadow: var(--dz-shadow-2);
    transition: background-color .24s var(--dz-ease), border-color .24s var(--dz-ease),
                box-shadow .24s var(--dz-ease), transform .3s ease-in-out;
}
#navbar.scrolled {
    background: var(--dz-panel);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--dz-shadow-3);
}
#navbar .navbar-logo-enhanced::after { display: none; }
#navbar .navbar-logo-enhanced img { border-color: transparent; }

/* ---- tablet / small laptop: the full link row needs ~980 px signed out and ~1190 px with My Account + Admin Tools,
   so below 1240 px (scroll bar included) the bar uses the phone menu. base.html's markup switches at Tailwind md (768 px); these rules move
   that switch to 1240 px. ---- */
@media (min-width: 768px) and (max-width: 1239.98px) {
    #navbar .hidden.md\:flex { display: none; }
    #navbar .md\:hidden:not(#mobile-menu) { display: flex; }
    #mobile-menu:not(.hidden) { display: block; }
}

/* ---- layout: links sit right after the logo, account / admin / sign-in stay at the right edge ---- */
@media (min-width: 1240px) {
    #navbar .flex.justify-between { gap: 24px; }
    #navbar .hidden.md\:flex { flex: 1; min-width: 0; }
    #nav-content { flex: 1; }
    #nav-content > a[href="/signin"],
    #nav-content > div.relative:has(> #account-dropdown-btn) { margin-left: auto; }
    #nav-content > div.relative:has(> #admin-dropdown-btn) { margin-left: 8px; }
}

/* ---- links ---- */
#navbar .nav-button { color: var(--dz-text-2); }
#navbar .nav-button:hover,
#navbar .nav-button[aria-current="page"] { color: #fff; background: var(--dz-hover); }
#navbar .nav-button:hover { transform: none; }
#navbar .nav-button > span.absolute {
    background: var(--dz-accent) !important;   /* replaces the blue/cyan gradient utility */
    height: 2px;
}
/* The yellow underline is a hover cue only: the page you are on gets no permanent underline (owner). */
#navbar .nav-button[aria-current="page"]:not(:hover) > span.absolute { width: 0 !important; }
#navbar .vip-button-enhanced { color: var(--dz-text); }
#navbar .vip-button-enhanced:hover { color: var(--dz-accent-hover); }
#navbar .nav-button:focus-visible,
#account-dropdown-btn:focus-visible,
#admin-dropdown-btn:focus-visible {
    outline: 2px solid var(--dz-accent);
    background: var(--dz-accent-soft);
}
#navbar .social-icon { color: var(--dz-text-2); }
#navbar .social-icon:hover { background: var(--dz-hover); }

/* ---- account / admin / sign-in buttons ---- */
#account-dropdown-btn {
    background: var(--dz-field);
    border: 1px solid var(--dz-line-strong);
    color: var(--dz-text);
    border-radius: 10px;
    backdrop-filter: none;
}
#account-dropdown-btn:hover {
    background: #161d33;
    border-color: var(--dz-line-strong);
    box-shadow: none;
    transform: none;
}
#admin-dropdown-btn {
    background: rgba(249, 115, 22, .14);
    border: 1px solid rgba(249, 115, 22, .5);
    color: #fdba74;
    border-radius: 10px;
}
#admin-dropdown-btn:hover {
    background: rgba(249, 115, 22, .24);
    border-color: rgba(251, 146, 60, .7);
    color: #fed7aa;
    box-shadow: none;
    transform: none;
}
#navbar a[href="/signin"],
#mobile-menu a[href="/signin"] {
    background: var(--dz-accent-glass);
    border: 1px solid var(--dz-accent-glass-line);
    color: var(--dz-accent-glass-ink);
    font-weight: 700;
    border-radius: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
#navbar a[href="/signin"]:hover,
#mobile-menu a[href="/signin"]:hover {
    background: var(--dz-accent-glass-hover);
    border-color: var(--dz-accent);
    color: var(--dz-accent-glass-ink);
}

/* ---- dropdown panels ---- */
#wiki-dropdown-menu,
#map-dropdown-menu,
#account-dropdown,
#admin-dropdown {
    background: var(--dz-panel);
    border: 1px solid var(--dz-line);
    border-radius: 14px;
    box-shadow: var(--dz-shadow-3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    --tw-ring-shadow: 0 0 #0000;
}
#account-dropdown::before,
#admin-dropdown::before {
    background: var(--dz-panel);
    border-color: var(--dz-line);
}
#wiki-dropdown-menu a,
#map-dropdown-menu a,
#account-dropdown a,
#admin-dropdown a { color: var(--dz-text-2); }
#wiki-dropdown-menu a:hover,
#map-dropdown-menu a:hover,
#account-dropdown a:hover { color: #fff; background: var(--dz-hover); }
#wiki-dropdown-menu .border-t,
#map-dropdown-menu .border-t,
#account-dropdown .border-t { border-color: var(--dz-line); }
#wiki-dropdown-menu .text-gray-500,
#map-dropdown-menu .text-gray-500 { color: var(--dz-muted); letter-spacing: .08em; }

/* ---- phone menu ---- */
#mobile-menu.mobile-menu-container {
    background: var(--dz-panel);
    border-top-color: var(--dz-line);
}
#mobile-menu a,
#mobile-menu button { color: var(--dz-text-2); }
#mobile-menu a:hover,
#mobile-menu button:hover { color: #fff; background: var(--dz-hover); }
#mobile-menu a > span.absolute { background: var(--dz-accent) !important; }
#mobile-menu-button { color: var(--dz-text); border: 1px solid var(--dz-line-strong); border-radius: 10px; background: var(--dz-field); }

/* ---- image lightbox (static/js/lightbox.js): links to an image enlarge it on the page ---- */
dialog.dz-lightbox {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 24px;
    border: 0; background: transparent; display: flex; align-items: center; justify-content: center;
}
dialog.dz-lightbox:not([open]) { display: none; }
dialog.dz-lightbox::backdrop { background: rgba(0, 0, 12, .86); backdrop-filter: blur(4px); }
.dz-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; }
.dz-lightbox__img {
    max-width: min(1400px, 100%); max-height: calc(100dvh - 110px); width: auto; height: auto;
    border-radius: 10px; border: 1px solid var(--dz-line-strong); box-shadow: var(--dz-shadow-3); background: var(--dz-surface);
}
.dz-lightbox__caption { font-size: 13px; color: var(--dz-text-2); text-align: center; max-width: 900px; }
.dz-lightbox__close {
    position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 10px;
    border: 1px solid var(--dz-line-strong); background: var(--dz-field); color: var(--dz-text);
    font-size: 26px; line-height: 1; cursor: pointer;
}
.dz-lightbox__close:hover { background: #161d33; }
.dz-lightbox__close:focus-visible { outline: 2px solid var(--dz-accent); outline-offset: 2px; }