/* Simply MBBS — v21. One frame for the whole site.

   THE ACTUAL CAUSE of "why is my menu on the left side more".

   The header's container is .smcc-shell, capped at min(1560px, 94vw).
   The page content is capped at min(1180px, 94vw). On a wide laptop that is
   a 380px difference — 190px on each side — so the logo and the first menu
   item begin nearly two hundred pixels to the left of the hero text below
   them. Nothing was broken; the header and the body were simply measuring
   themselves against two different rulers, and had been since long before
   the menu was rebuilt.

   So: one ruler. The header, the footer bar and the page content now share
   a single frame, and every left edge on the site lines up with every other.
   Long-form articles keep their own narrower reading column, because a
   65-character measure is a deliberate choice rather than a misalignment. */

:root {
  /* Wide enough for seven menu items, the theme toggle and the call to
     action on one row without any of them shrinking; narrow enough that the
     homepage grids do not stretch into a wall. */
  --smcc-frame: min(1320px, 94vw);
}

.smcc-header__in,
.smcc-footer__bar .smcc-shell,
.smcc-page,
.smcc-page--full {
  max-width: var(--smcc-frame);
  margin-inline: auto;
}

/* The hero and the sections inside the public homepage sit in that same
   frame rather than the wider shell, so the eyebrow, the heading and the
   logo all start on one line. */
.smcc-page--full .smcc-section > *,
.smcc-page--full .smcc-pf__hero { max-width: none; }

/* ---------- the header row itself ---------- */

.smcc-header__in {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
  min-height: 74px;
}

/* The brand takes the slack. Everything else sits together on the right. */
.smcc-brand { margin-right: auto; flex: 0 1 auto; }
.smcc-nav { flex: 0 0 auto; gap: clamp(12px, 1.4vw, 22px); }
.smcc-nav__list { gap: clamp(12px, 1.5vw, 24px); }

/* The toggle and the call to action are part of the same cluster as the
   links, so the spacing between "About", the moon and the button reads as
   one rhythm instead of three unrelated gaps. */
.smcc-themetoggle { flex: 0 0 auto; }
.smcc-nav .smcc-btn { flex: 0 0 auto; }

/* ---------- narrowing gracefully ---------- */

@media (min-width: 981px) and (max-width: 1439px) {
  .smcc-nav__list { gap: 16px; }
  .smcc-nav__list a { font-size: .9rem; }
  .smcc-brand__txt em { display: none; }   /* the tagline is on the page already */
}

@media (min-width: 981px) and (max-width: 1279px) {
  /* The button goes before a single label is allowed to wrap: every link in
     it is already in the menu, and a label broken over two lines looks
     broken in a way a missing button never does. */
  .smcc-nav > .smcc-btn { display: none; }
  .smcc-nav__list { gap: 14px; }
  .smcc-nav__list a { font-size: .86rem; }
}

/* ---------- the same alignment below the header ---------- */

/* The footer bar was measuring against the wide shell too. */
.smcc-footer__bar .smcc-shell { padding-inline: var(--smcc-gut); }

/* Long-form reading keeps its narrower measure on purpose. */
.smcc-shell--read { max-width: min(760px, 94vw); }