/*
 * This site's masthead, loaded after site.css, which stays byte for byte the
 * shared file.
 *
 * PainFreeWorking puts its six product hubs straight into the top bar (Dean,
 * 2026-09-26), so it has eight items where WeKnowRice and Shout4Music have four.
 * Eight, with the logo and the search box, need about 1,105px on one line. The
 * shared file lets a label wrap and only folds the bar into the menu button
 * below 60rem, so between 960px and that width the labels broke onto two lines.
 * Here a label never wraps, and the bar folds below 73rem (1,168px) instead.
 * The drawer rules are site.css's own at 60rem (the menu and the search box in it), repeated at the wider width.
 */
.nav__item > a { white-space: nowrap; }

@media (max-width: 73rem) {
  .navtoggle__btn { display: flex; flex-direction: column; gap: 4px; margin-left: auto; padding: .6rem; cursor: pointer; border-radius: var(--radius-sm); }
  .navtoggle__btn span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
  .nav { display: none; position: absolute; inset: 100% 0 auto 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1.25rem; box-shadow: var(--shadow-lg); }
  .navtoggle:checked ~ .nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 .3rem 1rem; }
  .navsearch { margin: .75rem 0 0; width: 100%; }
  .navsearch input, .navsearch input:focus { width: 100%; }
}