/* ============================================================
   xplore-nav.css — shared nav menu (logo hover dropdown)
   Imported by: create_quiz.html, create_slides.html, fit.html,
                create_exp.html (GitHub Pages)
   Hosted at: https://api.data-xplore.com/xplore-nav.css
============================================================ */

/* ── Nav-local CSS variables (light defaults, dark override) ── */
:root {
  --xnav-bg:          #ffffff;
  --xnav-border:      var(--border, #e2e8f0);
  --xnav-text:        var(--text,   #1a1d2e);
  --xnav-text-muted:  var(--text2,  #6b7280);
  --xnav-accent:      var(--accent, #2563eb);
  --xnav-accent-bg:   #eff6ff;
  --xnav-shadow:      rgba(0,0,0,.10);
}

html[data-theme="dark"] {
  --xnav-bg:          var(--bg2,    #1a1d2e);
  --xnav-border:      var(--border, #2e3150);
  --xnav-text:        var(--text,   #e2e8f0);
  --xnav-text-muted:  var(--text2,  #94a3b8);
  --xnav-accent:      var(--accent, #4f7cff);
  --xnav-accent-bg:   rgba(79,124,255,.15);
  --xnav-shadow:      rgba(0,0,0,.35);
}

.xnav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.xnav-logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
  padding: 3px 6px 3px 2px;
  transition: background .15s;
}
.xnav-logo:hover { background: var(--xnav-accent-bg); }

.xnav-logo img.logo-full { height: 32px; width: auto; display: block; }
.xnav-logo img.logo-icon { height: 32px; width: 32px; display: none; border-radius: 4px; }

@media (max-width: 640px) {
  .xnav-logo img.logo-full { display: none; }
  .xnav-logo img.logo-icon { display: block; }
}

/* Dropdown */
.xnav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 192px;
  background: var(--xnav-bg);
  border: 1px solid var(--xnav-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px var(--xnav-shadow);
  z-index: 9999;
  overflow: hidden;
  padding: 6px 0 4px;
}
/* JS adds/removes .open — :hover kept as fallback for no-JS */
.xnav-wrap:hover .xnav-dropdown,
.xnav-wrap.open .xnav-dropdown { display: block; }

.xnav-dropdown a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--xnav-text);
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.xnav-dropdown a:hover {
  background: var(--xnav-accent-bg);
  color: var(--xnav-accent);
}
.xnav-dropdown a svg {
  flex-shrink: 0;
  color: var(--xnav-text-muted);
  transition: color .12s;
}
.xnav-dropdown a:hover svg { color: var(--xnav-accent); }
.xnav-dropdown a.xnav-current {
  color: var(--xnav-accent);
  background: var(--xnav-accent-bg);
  font-weight: 600;
}
.xnav-dropdown a.xnav-current svg { color: var(--xnav-accent); }
.xnav-sep {
  height: 1px;
  background: var(--xnav-border);
  margin: 4px 0;
}