/* Maya Dahlia, the Collections dropdown in the masthead.
   Shared by every public page. Opens on hover with a mouse, and on tap or
   Enter with nav.js. On narrow screens the other text links hide, but the
   Collections button stays beside the Enquire pill. */

.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--body);font-weight:500;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cocoa);background:none;border:0;border-bottom:1px solid transparent;border-radius:0;
  padding:4px 0;margin:0;cursor:pointer;transition:color .4s ease,border-color .4s ease;
}
.nav-drop-btn svg{width:9px;height:9px;flex:none;transition:transform .35s ease}
.nav-drop-btn:hover,.nav-drop-btn:focus-visible,
.nav-drop.open .nav-drop-btn,.nav-drop-btn.is-current{border-bottom-color:var(--gold)}
.nav-drop.open .nav-drop-btn svg{transform:rotate(180deg)}

.nav-drop-menu{
  position:absolute;top:100%;left:50%;z-index:50;
  min-width:236px;margin:0;padding:18px 0 0;list-style:none;
  transform:translate(-50%,6px);opacity:0;visibility:hidden;
  transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s;
}
.nav-drop-menu::before{
  content:"";position:absolute;inset:18px 0 0;z-index:-1;
  background:var(--ivory-warm);border:1px solid rgba(197,161,104,.42);box-shadow:var(--lift);
}
.nav-drop.open .nav-drop-menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .3s ease,transform .3s ease,visibility 0s;
}
@media(hover:hover) and (pointer:fine){
  .nav-drop:hover .nav-drop-menu{
    opacity:1;visibility:visible;transform:translate(-50%,0);
    transition:opacity .3s ease,transform .3s ease,visibility 0s;
  }
  .nav-drop:hover .nav-drop-btn{border-bottom-color:var(--gold)}
}
.nav-drop-menu li{margin:0}
.nav-drop-menu li:first-child{padding-top:8px}
.nav-drop-menu li:last-child{padding-bottom:8px}
.nav .nav-drop .nav-drop-menu a{
  display:block;white-space:nowrap;text-align:center;
  padding:12px 26px;border-bottom:0;
}
.nav .nav-drop .nav-drop-menu a:hover,
.nav .nav-drop .nav-drop-menu a:focus-visible{color:#3E2C28;background:rgba(197,161,104,.1)}
.nav .nav-drop .nav-drop-menu a[aria-current]{
  color:var(--cocoa);font-weight:600;background:var(--blush-wash);
}

/* phones: the menu drops from the whole masthead, not from the button */
@media(max-width:900px){
  .nav-drop{position:static}
  .nav-drop-menu{left:var(--gutter);right:var(--gutter);min-width:0;transform:translateY(6px)}
  .nav-drop.open .nav-drop-menu{transform:none}
  .nav .nav-drop .nav-drop-menu a{padding:15px 22px}
}
/* small phones: the wordmark, Collections and the Enquire pill do not fit on
   one line, so the wordmark sits above and the two controls centre beneath */
@media(max-width:560px){
  .masthead{flex-wrap:wrap;justify-content:center;row-gap:10px;padding-top:14px;padding-bottom:14px}
  .masthead .nav{width:100%;justify-content:center;gap:28px}
  .masthead .nav .pill{white-space:nowrap}
}

@media(prefers-reduced-motion:reduce){
  .nav-drop-menu,.nav-drop-btn svg{transition:none}
}