/* The header's menu folded behind the Menu button.
   This sheet is loaded with a media attribute the SERVER works out from the menu itself
   (partials/head.ejs, navFoldAt in server.js): the width under which the links, the wordmark and a
   decent gap no longer fit on one line. The menu's length is set in the site manager (every
   collection ticked "In the menu" adds a link), so a fixed width was wrong the day a seventh link
   came back: at 861px the header wrapped onto two lines (2026-10-05). */
.top nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--blue); padding: 8px var(--pad) 18px; color: #fff; border-top: 1px solid rgba(255,255,255,.18); }
.top nav.open { display: block; }
.top nav ul { flex-direction: column; gap: 0; }
.top nav a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: var(--body); }
/* the page you are on: bold, with a white bar at its left (structure audit, 2026-09-28) */
.top nav a[aria-current="page"], .top.over nav a[aria-current="page"], .hdr-solid .top.over nav a[aria-current="page"] { color: #fff; border-bottom-color: rgba(255,255,255,.18); font-weight: 600; box-shadow: inset 3px 0 0 #fff; padding-left: 14px; }
.menu-btn { display: flex; }
/* On a phone the areas are listed under Interior, indented; nothing to open */
.top nav > ul { align-items: stretch; }
.top nav > ul > li > a { display: block; }
.top nav .has-sub { display: block; }
.sub-btn { display: none; }
.top nav .sub { display: block; position: static; padding: 0 0 0 18px; min-width: 0; }
.top nav .sub::before { display: none; }
.top nav .sub li:first-child, .top nav .sub li:last-child { padding: 0; }
.top nav .sub a { color: #fff; padding: 10px 0; font-size: var(--body); border-bottom: 1px solid rgba(255,255,255,.18); }
.top nav .sub a:hover { color: #fff; }
.top nav .sub a[aria-current="page"] { color: #fff; }
.top nav .has-sub.in > a { color: #fff; border-bottom-color: rgba(255,255,255,.18); }
/* a group's list is always open in the folded menu, whatever the pointer does */
.top nav .has-sub:hover .sub, .top nav .has-sub.open .sub { display: block; }