/* rhces.com main menu: "Store" opens a dropdown listing the four stores (markup: li.nav-dd, script: store-menu.js).
   Colours come from the theme.css drafting palette (--cad-*), so it follows light and dark mode. */
.nav-dd{position:relative}            /* the Store link stays inline like its neighbours, so it lines up with them */
.nav-dd-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:24px;margin-left:-12px;padding:0;vertical-align:middle;
  border:0;border-radius:6px;background:none;color:var(--text-muted,#8a96a3);cursor:pointer;transition:color .2s}
.nav-dd-toggle svg{width:12px;height:12px;transition:transform .2s}
.nav-dd-toggle:hover,.nav-dd.open .nav-dd-toggle{color:var(--cad-accent,#5DB8D3)}
.nav-dd.open .nav-dd-toggle svg{transform:rotate(180deg)}
.nav-dd-toggle:focus-visible{outline:2px solid var(--cad-accent,#5DB8D3);outline-offset:1px}

.nav-dd-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:1001;min-width:190px;margin:0;padding:6px;list-style:none;
  background:var(--cad-panel,#171C1E);border:1px solid var(--cad-rule,#2D3538);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility 0s linear .15s}
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}   /* keeps hover alive across the gap */
.nav-dd.open .nav-dd-menu,
html:not(.js-dd) .nav-dd:hover .nav-dd-menu,
html:not(.js-dd) .nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .15s}
.nav-dd-menu li{margin:0}
.nav-dd-menu a{display:block;padding:8px 12px;border-radius:6px;font-size:.875rem;font-weight:500;line-height:1.3;white-space:nowrap;
  color:var(--cad-ink,#E2E7E6);text-decoration:none}
.nav-dd-menu a:hover,.nav-dd-menu a:focus-visible{background:var(--cad-accent-soft,rgba(93,184,211,.14));color:var(--cad-accent,#5DB8D3);outline:none}
.nav-dd-sep{height:1px;margin:6px 6px;background:var(--cad-rule,#2D3538)}

/* phones: the menu is a vertical list; Store keeps its link and the arrow button expands the stores underneath */
@media (max-width:768px){
  .nav-dd{display:flex;flex-wrap:wrap;align-items:center}
  .nav-dd>.nav-link{flex:1 1 auto}
  .nav-dd-toggle{width:44px;height:44px;margin-left:0}
  .nav-dd-toggle svg{width:16px;height:16px}
  .nav-dd-menu{position:static;display:none;flex:1 1 100%;min-width:0;margin:2px 0 6px 16px;padding:2px 0 2px 10px;
    background:none;border:0;border-left:2px solid var(--cad-rule,#2D3538);border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;transition:none}
  .nav-dd-menu::before{display:none}
  .nav-dd.open .nav-dd-menu{display:block}
  html:not(.js-dd) .nav-dd:focus-within .nav-dd-menu{display:block}
  .nav-dd-menu a{padding:10px 12px;font-size:.95rem}
}