/* Simply MBBS — v20. The header, and the last of the wrapping.

   The menu went from eleven top-level items to seven, which fixes most of
   it. The rest is here: the nav and the call-to-action button were fighting
   for one row, so on a 1280-wide laptop four labels wrapped onto two lines
   and one dropdown caret ended up on a line of its own — which reads as a
   broken empty menu item, and is what he was actually looking at.

   The rule: menu labels never wrap. If the row cannot hold them, the
   type steps down, then the CTA drops, then the whole thing becomes the
   mobile menu. A label broken across two lines is worse than any of those. */

/* Labels stay on one line, always. */
.smcc-nav__link,
.smcc-nav > ul > li > a,
.smcc-header a {
  white-space: nowrap;
}

/* Give the nav the room and let the CTA shrink first.

   NOTE: the nav must NOT flex-grow. .smcc-brand already carries
   margin-right:auto, so it is the brand that absorbs the slack and pushes
   the nav to the right edge. Making the nav grow as well put two elements
   in competition for the same space and opened a dead band between the last
   link and the theme toggle — which is what "the menu is more on the left"
   was describing. */
.smcc-nav { flex: 0 1 auto; min-width: 0; }
.smcc-nav__list { flex-wrap: nowrap; }

/* Between roughly a small laptop and a desktop the type steps down rather
   than the row wrapping. */
@media (min-width: 981px) and (max-width: 1400px) {
  .smcc-nav__link, .smcc-nav > ul > li > a { font-size: 14px; }
  .smcc-header__inner { gap: 12px; }
}
@media (min-width: 981px) and (max-width: 1200px) {
  .smcc-nav__link, .smcc-nav > ul > li > a { font-size: 13.5px; }
  /* The CTA is the least important thing in the row — the same links are in
     the menu — so it goes before a single label is allowed to wrap. */
  .smcc-header .smcc-btn--solid { display: none; }
}

/* A dropdown caret must never be able to separate from its label. */
.smcc-nav__link { display: inline-flex; align-items: center; gap: 5px; }
.smcc-nav__caret, .smcc-nav__link svg { flex: 0 0 auto; }

/* Long labels in the dropdowns get room instead of wrapping mid-word. */
.smcc-nav__sub, .smcc-nav ul ul { min-width: 220px; }
.smcc-nav__sub a { white-space: nowrap; }