/* Explore ▾ menu in the main site navigation (Free Tools + Odd$ Chess).
   Uses the site tokens (--ink, --ink-soft, --border, --white, --accent) with fallbacks. */
.nav-explore { position: relative; }
.nav-explore-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;
  color: var(--ink-soft, #3a3a40); background: none; border: 0; padding: 6px 0; cursor: pointer;
  transition: color .2s;
}
.nav-explore-btn:hover, .nav-explore-btn[aria-expanded="true"] { color: var(--ink, #0d0d0f); }
.nav-explore-btn.is-active { color: var(--ink, #0d0d0f); font-weight: 700; }
.nav-explore-btn:focus-visible { outline: 2px solid var(--accent, #1a6bff); outline-offset: 4px; border-radius: 4px; }
.nav-explore-caret { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.nav-explore-btn[aria-expanded="true"] .nav-explore-caret { transform: rotate(180deg); }

.nav-explore-menu {
  position: absolute; top: 100%; left: 50%; z-index: 150;
  min-width: 270px; margin-top: 10px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--white, #fff); border: 1px solid var(--border, rgba(13,13,15,.1)); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(13,13,15,.14), 0 2px 6px rgba(13,13,15,.06);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* invisible bridge so the pointer can travel from the button to the menu */
.nav-explore-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-explore-btn[aria-expanded="true"] + .nav-explore-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .16s ease, transform .16s ease, visibility 0s; }
@media (hover: hover) and (pointer: fine) {
  .nav-explore:hover .nav-explore-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .16s ease, transform .16s ease, visibility 0s; }
  .nav-explore:hover .nav-explore-caret { transform: rotate(180deg); }
}
.nav-links .nav-explore-menu a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px;
  white-space: normal; text-decoration: none; color: var(--ink, #0d0d0f);
  transition: background-color .15s;
}
.nav-explore-menu a strong { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.nav-explore-menu a span { font-size: 13px; font-weight: 400; color: var(--ink-muted, #7a7a84); }
.nav-explore-menu a:hover, .nav-explore-menu a:focus-visible { background: var(--accent-soft, #e8f0ff); outline: none; }
.nav-explore-menu a[aria-current="page"] { background: var(--accent-soft, #e8f0ff); }
.nav-explore-menu a[aria-current="page"] strong::after { content: ' ·  you are here'; font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 12px; color: var(--accent, #1a6bff); }

@media (prefers-reduced-motion: reduce) {
  .nav-explore-menu, .nav-explore-caret, .nav-explore-btn { transition: none !important; }
}