/*
 * 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; }

/* "More Pets" has no page of its own (Dean, 2026-10-03), so it is a button that
   opens its list, drawn like the links beside it with a chevron that says it
   expands, and turns over when the list is open. Hover and focus open it on a
   desktop (site.css); site.js adds click and tap, Escape and click-away. */
.nav__expander { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: .96rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.nav__expander::after { content: ""; width: .42rem; height: .42rem; margin-top: -.22rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.nav__expander:hover, .nav__item.is-open > .nav__expander { background: var(--bg); color: var(--brand); }
.nav__expander.is-current { color: var(--brand); background: var(--brand-soft); }
.nav__item.is-open > .nav__expander::after, .nav__item--has-children:hover > .nav__expander::after { transform: translateY(.2rem) rotate(-135deg); }
.nav__item.is-open > .nav__sub { display: block; }
/* site.css also opens the list while anything in it has focus. A clicked button
   keeps focus, so a second click could never close it; once site.js is there to
   open it, focus alone does not hold it open (hover still does). */
.has-expanders .nav__item--has-children:focus-within:not(.is-open):not(:hover) > .nav__sub { display: none; }
@media (prefers-reduced-motion: reduce) { .nav__expander::after { transition: none; } }

@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; }
  /* In the drawer the list folds under its button too, once site.js can open it. */
  .has-expanders .nav__item--has-children .nav__sub { display: none; }
  .has-expanders .nav__item--has-children.is-open .nav__sub { display: block; }
  .nav__expander { width: 100%; justify-content: space-between; }
  .navsearch { margin: .75rem 0 0; width: 100%; }
  .navsearch input, .navsearch input:focus { width: 100%; }
}