/* Product menu in the primary nav. Shared by every page.
   Markup: .nav-menu > button.nav-menu-btn + .nav-menu-panel > a.nav-menu-item
   Selectors are prefixed with `nav .nav-menu` so they outrank each page's
   own `nav a` / `nav.tacit-nav a` rules. */

.nav-menu{ position:relative; display:inline-flex; }

nav .nav-menu .nav-menu-btn{
  appearance:none; -webkit-appearance:none;
  margin:0; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  background:transparent;
  color:#f4d9b0;
  font-family:"Open Sans",system-ui,sans-serif;
  font-size:12px; line-height:normal; letter-spacing:.02em;
  padding:8px 10px 8px 12px;
  border-radius:999px;
  text-transform:lowercase;
  transition:color .2s ease, background .2s ease;
}
/* index.html sets its nav type in Söhne/Inter rather than Open Sans */
nav#nav .nav-menu .nav-menu-btn{ font-family:"Söhne","Söhne Web","Inter",system-ui,sans-serif; }

nav .nav-menu .nav-menu-btn:hover,
nav .nav-menu.is-open .nav-menu-btn{ color:#ffe4b8; background:rgba(255,255,255,.08); }
nav .nav-menu .nav-menu-btn.current{ color:#ffe4b8; background:rgba(168,50,70,.42); }
nav .nav-menu .nav-menu-btn:focus-visible{
  outline:none; color:#ffe4b8;
  box-shadow:0 0 0 2px #ffe9c6;
}
/* Same legible focus ring for the other nav items on every page (the pages'
   own rules turn focused link text maroon, which is hard to read on the pill) */
nav.tacit-nav > a:focus-visible,
nav#nav > a:focus-visible{ outline:none; color:#ffe4b8; box-shadow:0 0 0 2px #ffe9c6; }
nav .nav-menu .chev{ width:9px; height:9px; flex:0 0 auto; opacity:.8; transition:transform .2s ease; }
nav .nav-menu.is-open .chev{ transform:rotate(180deg); }

/* Panel */
.nav-menu-panel{
  position:absolute; z-index:60;
  top:calc(100% + 30px); left:50%;
  width:min(300px, calc(100vw - 32px));
  padding:8px;
  text-align:left;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    #283012;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 48px rgba(0,0,0,.34);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,-4px);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
/* The pill is taller than the button (orb + padding), so drop the panel clear of
   the pill; index.html's pill is a little taller again */
nav#nav .nav-menu-panel{ top:calc(100% + 27px); }
/* Invisible bridge so the pointer can cross the gap between button and panel */
.nav-menu-panel::before{ content:""; position:absolute; left:0; right:0; top:-32px; height:32px; }

.nav-menu.is-open .nav-menu-panel,
html:not(.nav-js) .nav-menu:hover .nav-menu-panel,
html:not(.nav-js) .nav-menu:focus-within .nav-menu-panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%,0);
  transition:opacity .16s ease, transform .16s ease, visibility 0s;
}

nav .nav-menu .nav-menu-item{
  display:block;
  padding:12px 14px;
  border-radius:12px;
  text-decoration:none;
  text-transform:none;
  letter-spacing:0;
  color:#f4d9b0;
  background:transparent;
  box-shadow:none;
  font-family:"Inter",system-ui,sans-serif;
  font-size:12.5px;
  transition:background .15s ease;
}
nav .nav-menu .nav-menu-item + .nav-menu-item{ margin-top:2px; }
nav .nav-menu .nav-menu-item:hover{ color:#ffe4b8; background:rgba(255,255,255,.08); }
nav .nav-menu .nav-menu-item:focus-visible{ outline:none; color:#ffe4b8; box-shadow:0 0 0 2px #ffe9c6; }
nav .nav-menu .nav-menu-item[aria-current="page"]{ background:rgba(168,50,70,.38); }

.nav-menu .nm-title{
  display:block;
  font-family:"Newsreader",Georgia,serif;
  font-size:17px; font-weight:500; line-height:1.2; letter-spacing:-.005em;
  color:#ffe9c6;
}
.nav-menu .nm-sub{
  display:block; margin-top:3px;
  font-size:12px; line-height:1.4;
  color:rgba(244,217,176,.8);
}

@media (max-width:780px){
  nav .nav-menu .nav-menu-btn{ font-size:11px; padding:6px 8px 6px 10px; }
  nav#nav .nav-menu .nav-menu-btn{ font-size:10px; padding:6px 7px 6px 8px; }
  /* On phones the pill may wrap and sits near the screen edge: centre the panel
     under the whole pill instead of under the button */
  nav.tacit-nav, nav#nav{ position:relative; }
  .nav-menu{ position:static; }
  .nav-menu-panel,
  nav#nav .nav-menu-panel{ top:calc(100% + 8px); }
  .nav-menu-panel::before{ top:-10px; height:10px; }
  /* keep a mouse path from the button down through the pill's padding to the panel */
  nav .nav-menu .nav-menu-btn{ position:relative; }
  nav .nav-menu .nav-menu-btn::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px; }
}

/* Small phones: tighten the pill so the items stay on one row down to ~360px */
@media (max-width:420px){
  nav.tacit-nav > a{ padding:6px 8px; }
  nav .nav-menu .nav-menu-btn{ padding:6px 6px 6px 8px; gap:4px; }
  nav .nav-menu .chev{ width:8px; height:8px; }
}
@media (max-width:380px){
  nav.tacit-nav, nav#nav{ gap:0; }
  nav.tacit-nav > a, nav#nav > a{ padding:6px 6px; }
  nav .nav-menu .nav-menu-btn{ padding:6px 4px 6px 6px; }
}

@media (prefers-reduced-motion: reduce){
  .nav-menu-panel, nav .nav-menu .chev{ transition:none; }
}