/* ---------------------------------------------------------------------------
   Header navigation: groups, flyouts, folding (ported from the source fork,
   Otis 2026-10-11). Pairs with nav.js and _nav.php; loaded after style.css,
   which dresses `.nav a` (the panel rows on a phone, the links on the desktop
   row). This adds the group buttons, the accordion, the flyouts and More.
   Without JavaScript the buttons go away and plain links stand in.
   Colours are the theme's own variables (style.css :root).
--------------------------------------------------------------------------- */
.nav-dd-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:6px;margin:0;border:0;background:none;color:var(--ink);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;text-align:left}
.nav-chev{flex:none;transition:transform .22s ease}
.nav-dd.is-open>.nav-dd-btn .nav-chev{transform:rotate(180deg)}
.nav-dd-panel ul{list-style:none;margin:0;padding:0}
html.js .nav-dd:not(.is-open):not(.is-closing)>.nav-dd-panel{display:none}
.nav-go{flex:none;margin-left:8px;opacity:.6;transition:transform .2s ease,opacity .2s ease}
.nav-dd-top a:hover .nav-go,.nav-dd-top a:focus-visible .nav-go{opacity:1;transform:translateX(2px)}
html.js .nav-nojs,html:not(.js) .nav-dd{display:none}
.nav-more-h{display:block;font:600 11.5px/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}

/* ---------- phones: rows in the slide-down panel, groups as accordions ---------- */
@media (max-width:920px){
  .nav-more{display:none!important}
  .nav>.is-folded{display:flex}
  .nav>.nav-dd.is-folded{display:block}
  .nav-dd-btn{display:flex;width:100%;justify-content:space-between;min-height:52px;padding:0;border-bottom:1px solid var(--rule-soft);font:500 1.05rem/1.3 var(--sans);letter-spacing:0}
  .nav-dd-btn .nav-chev{width:16px;height:16px;margin-right:4px}
  .nav-dd.is-current>.nav-dd-btn{color:var(--plum);font-weight:600}
  /* a section slides: nav.js runs the height from 0 to the list's own; the
     padding and rule live on the list so a shut section is truly 0 tall */
  .nav .nav-dd-panel{overflow:hidden;transition:height .34s cubic-bezier(.2,.8,.25,1)}
  .nav .nav-dd-panel>ul{padding:6px 0 12px 6px;border-bottom:1px solid var(--rule-soft);opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.25,1)}
  .nav .nav-dd.is-open>.nav-dd-panel>ul{opacity:1;transform:none;transition-delay:.06s}
  .nav-dd.is-open>.nav-dd-btn{color:var(--plum)}
  .nav .nav-dd-top a{justify-content:space-between;padding-right:8px}
  /* the drawer scrolls on its own and never hands the scroll to the page */
  html.js .nav[data-menu-panel]{overscroll-behavior:contain;padding-bottom:0}
  /* the Book pill stays in reach: pinned to the drawer's foot however long
     the open section is, the list fading out under it */
  html.js .nav-foot{position:-webkit-sticky;position:sticky;bottom:0;z-index:1;margin:0 calc(-1 * var(--menu-pad,20px));padding:14px var(--menu-pad,20px) 18px;background:var(--menu-bg,var(--white))}
  html.js .nav-foot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--menu-bg,var(--white)));pointer-events:none}
  html.js .nav-foot .nav-book{margin-top:0}
  .nav .nav-dd-panel a{min-height:44px;padding:0 0 0 14px;border:0;border-left:1px solid var(--rule);font:400 1rem/1.25 var(--sans);color:var(--ink)}
  .nav .nav-dd-panel a[aria-current="page"]{border-left:2px solid var(--plum);padding-left:13px;color:var(--plum);font-weight:600}
  .nav .nav-dd-top a{font-weight:500}
  /* the button climbs in with the links (core/assets/menu.css ladders only <a>) */
  html.js [data-menu-panel] .nav-dd-btn{opacity:0;transform:translateY(12px);transition:opacity .22s ease,transform .22s ease}
  html.js body.menu-open [data-menu-panel] .nav-dd-btn{opacity:1;transform:none;transition:opacity .42s ease,transform .5s cubic-bezier(.2,.8,.3,1);transition-delay:calc(120ms + var(--i,0) * 42ms)}
  /* the accordion's own links arrive with it, not on the ladder */
  html.js body.menu-open [data-menu-panel] .nav-dd-panel a{transition-delay:0s}
}

/* ---------- desktop: one line, flyouts ---------- */
@media (min-width:921px){
  .nav{flex:none;gap:4px}
  .nav-foot{display:none}
  /* sentence case on the desktop row: the WP menu's seven items need the room */
  .nav>a,.nav-dd-btn{min-height:44px;padding:0 10px;border-radius:999px;font:500 14.5px/1 var(--sans);letter-spacing:.005em;text-transform:none;color:var(--ink-soft)}
  .nav-dd-btn{padding:0 8px 0 10px}
  .nav>a:hover,.nav-dd-btn:hover,.nav-dd.is-open>.nav-dd-btn{color:var(--plum)}
  .nav>a[aria-current="page"]{box-shadow:none;text-decoration:underline;text-decoration-color:var(--plum);text-decoration-thickness:2px;text-underline-offset:.5em}
  .nav-dd.is-current>.nav-dd-btn{color:var(--plum);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.5em}
  .nav>.is-folded{display:none}
  .nav-more:not(.is-needed){display:none}
  .nav-more .nav-dd-panel>ul>li:not(.is-shown){display:none}
  .nav-dd{position:relative;display:flex}
  .nav-dd-panel{position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:260px;padding:8px;background:var(--white);border:1px solid var(--rule);border-radius:var(--radius-sm);box-shadow:0 24px 36px -26px rgba(36,23,34,.45);transform:translateX(var(--dd-shift,0px))}
  /* a bridge over the gap, so the pointer can travel from button to list */
  .nav-dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .nav-more .nav-dd-panel{left:auto;right:0;max-height:calc(100vh - var(--head) - 40px);overflow-y:auto}
  .nav .nav-dd-panel a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:8px;font:400 14.5px/1.2 var(--sans);letter-spacing:.005em;text-transform:none;color:var(--ink);text-decoration:none;white-space:nowrap;box-shadow:none}
  .nav .nav-dd-panel a:hover,.nav .nav-dd-panel a:focus-visible{background:var(--lilac);color:var(--plum);text-decoration:none}
  .nav .nav-dd-panel a[aria-current="page"]{color:var(--plum);font-weight:600}
  .nav-dd-top{margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
  .nav .nav-dd-top a{font-weight:500}
  .nav-more-g{padding:6px 0}
  .nav-more .nav-dd-panel>ul>li.is-shown~li.is-shown{border-top:1px solid var(--rule-soft)}
  .nav-more-h{padding:8px 14px 4px}
  .nav-more-g ul{margin:0}
}
@media (min-width:921px) and (max-width:1120px){.nav>a,.nav-dd-btn{padding:0 7px}}
/* nav.js measures the row at its natural width for one synchronous moment
   (never painted): nothing shrinks, an auto margin counts as nothing */
.head-row.is-measuring{width:-webkit-max-content!important;width:max-content!important;max-width:none!important}
.head-row.is-measuring>*{flex-shrink:0!important}
/* the last step when even a folded row will not fit (large text, a zoomed
   page): the Book pill drops to its one word */
@media (min-width:921px){.head-row.is-tight .head-book .hb-long{display:none}.head-row.is-tight .head-book .hb-short{display:inline}}
/* without JavaScript nothing folds into More, so the desktop row carries the
   first two items only; every page is still in the footer */
@media (min-width:921px){html:not(.js) .nav>[data-prio]:not([data-prio="0"]):not([data-prio="1"]){display:none}}

/* ---------- the footer's brand: white logo home, the tagline under it ---------- */
.foot-home{display:inline-flex;align-items:center;min-height:44px;color:var(--white);text-decoration:none;border-radius:6px}
.foot-home:focus-visible{outline:2px solid var(--white);outline-offset:4px}
.foot-logo{display:block;width:clamp(150px,44vw,200px);height:auto}
.foot-logo-tint{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1)}
.foot-tag{max-width:30ch;margin:8px 0 0;font:400 .82rem/1.5 var(--sans);letter-spacing:.01em;color:rgba(255,255,255,.72)}

@media (prefers-reduced-motion:reduce){
  .nav-chev,.nav-go,.nav .nav-dd-panel,.nav .nav-dd-panel>ul,html.js [data-menu-panel] .nav-dd-btn,html.js body.menu-open [data-menu-panel] .nav-dd-btn{transition:none}
}
@media print{.nav-dd-panel{display:none!important}}