/* ═══════════════════════════════════════════════════════════════
   NAV GLOW — hover/tap highlight for nav links
   ═══════════════════════════════════════════════════════════════
   A soft gold glow appears behind a nav item's name when it's
   hovered, focused, or tapped — meant to make it obvious what's
   about to be touched, for readers who have trouble with small
   low-contrast text.

   Works on both nav systems because they share the same class name:
     - Classic pages (.mast .nav-links, built by nav-include.js)
     - Emporium pages (.nav-links, built by nav-include-flat.js)

   To add this to a page: link it in <head>, after any page-specific
   stylesheet, so it can't be overridden by accident:
     <link rel="stylesheet" href="nav-glow.css">

   To change the glow color or strength, edit it here — every linked
   page updates together.

   This file also carries the DROPDOWN styling for the Worlds and
   About submenus. It used to live in a per-page <style> block,
   which meant a page could be built without it and its dropdowns
   would render stuck open. Keeping it here means every page that
   links this file gets working dropdowns automatically.
   ═══════════════════════════════════════════════════════════════ */

/* ── Dropdown submenus (Worlds, About) ── */
.mast .menu{position:relative}
.mast .menu>span{
  font-family:'Playfair Display',Georgia,serif;font-weight:600;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:#155a55;cursor:default;padding-bottom:3px
}
.mast .menu ul{
  visibility:hidden;opacity:0;transition:opacity .2s;position:absolute;top:100%;left:50%;
  transform:translateX(-50%);background:rgba(255,253,247,.98);border:1px solid #dcc37e;
  border-radius:8px;list-style:none;margin:0;padding:.4rem 0;min-width:15rem;text-align:center;
  box-shadow:0 10px 26px rgba(10,53,53,.14);z-index:6
}
.mast .menu:hover ul,.mast .menu:focus-within ul{visibility:visible;opacity:1}
.mast .menu ul li{width:100%}
.mast .menu ul a{display:block;padding:.45rem 1rem;background:none}

@media (max-width:860px){
  .mast .menu{width:100%;text-align:center;border-top:1px solid #f3ead6}
  .mast .menu>span{display:block;padding:.9rem .9rem .3rem;font-size:.8rem;color:#8a6d1f}
  .mast .menu ul{
    visibility:visible;opacity:1;position:static;transform:none;border:0;box-shadow:none;
    background:transparent;min-width:0;padding:0 0 .5rem
  }
  .mast .menu ul li{border-top:0}
  .mast .menu ul a{padding:.55rem;font-size:.8rem}
}

.nav-links a,
.mast .menu > span,
.mast .menu ul a {
  transition: text-shadow .18s ease, color .18s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a:active,
.mast .menu:hover > span,
.mast .menu > span:focus-visible,
.mast .menu ul a:hover,
.mast .menu ul a:focus-visible,
.mast .menu ul a:active {
  text-shadow: 0 0 8px rgba(220, 195, 126, .95), 0 0 18px rgba(184, 145, 47, .6);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-links a,
  .mast .menu > span,
  .mast .menu ul a {
    transition: none;
  }
}
