/* ═══════════════════════════════════════════════════════════════
   Valuation Tool CTA — responsive behaviour, loaded last
   ───────────────────────────────────────────────────────────────
   The navbar's CSS is not in one place. navigation.css carries it
   for the site, but thirteen page stylesheets (home.css, about.css,
   the how-to-* guides, …) each embed their own full copy, and they
   load after it via @yield('header-css'). So a change made only in
   navigation.css is overridden on every one of those pages: the
   hamburger disappeared between 1101 and 1200px because their copy
   still hides it below 1100, and the row overflowed by 8px because
   their .md-nav__actions keeps margin-left: 32px.

   Rather than edit thirteen drifting copies, the rules that have to
   win are gathered here and this sheet is loaded after all of them.
   Only the shared classes need restating - .md-nav__vt is new, so
   its own styling in navigation.css has nothing to collide with.

   Keep the breakpoints in step with navigation.css and with BREAK
   in the navbar's inline script.
═══════════════════════════════════════════════════════════════ */

/* ── Desktop compaction 1201px – 1440px ──
   The inner row is capped at 1440px, so content has to fit 1440
   whatever the viewport is. These apply with no upper bound for
   that reason: at 1600px the container is still 1440 and the row
   overflowed by 8px when they were limited to max-width: 1440. */
.md-nav__logo { margin-right: 20px; }
.md-nav__list { gap: 2px; }
.md-nav__link { padding: 0 10px; }
.md-nav__link::after { left: 10px; right: 10px; }
.md-nav__item--mkt { padding-left: 4px; }
.md-nav__link-pill { padding: 8px 12px; }
.md-nav__vt { margin-left: 16px; }
.md-nav__actions { margin-left: 12px; }

@media (max-width: 1340px) {
  .md-nav__inner { padding: 0 18px; }
  .md-nav__link { font-size: 13px; padding: 0 9px; }
  .md-nav__link::after { left: 9px; right: 9px; }
  .md-nav__vt { padding: 0 14px; }
  .md-nav__vt-badge { display: none; }
}

@media (max-width: 1280px) {
  .md-nav__logo { margin-right: 14px; }
  .md-nav__logo img { height: 26px; }
  .md-nav__link { padding: 0 8px; }
  .md-nav__link::after { left: 8px; right: 8px; }
  .md-nav__link-pill { padding: 8px 10px; }
  .md-nav__link-pill > .bi-grid-3x3-gap-fill { display: none; }
  .md-nav__vt { margin-left: 10px; padding: 0 12px; }
  .md-nav__vt-label-ext { display: none; }
  .md-nav__actions { margin-left: 8px; gap: 6px; }
  .md-nav__btn { padding: 0 13px; }
}

/* ── Mobile: hamburger from 1200px, CTA stays beside it ── */
@media (max-width: 1200px) {
  .md-nav__toggle { display: flex; z-index: 1201; order: 3; }
  .md-nav__list,
  .md-nav__actions { display: none !important; }

  .md-nav__vt {
    order: 2;
    margin-left: auto;
    height: 34px;
    padding: 0 6px 0 12px;
    font-size: 12.5px;
    box-shadow: 0 3px 10px rgba(45, 108, 223, .35);
  }
  .md-nav__vt-label-ext { display: inline; }
  .md-nav__vt-badge { display: inline-flex; height: 19px; padding: 0 7px; }

  .md-nav__toggle { margin-left: 8px; }
  .mob-drawer { display: block; }
}

@media (max-width: 480px) {
  .md-nav__toggle { padding: 6px; margin-left: 4px; }
  .md-nav__vt { height: 32px; padding: 0 11px; font-size: 12px; gap: 6px; }
  .md-nav__vt-badge { display: none; }
}

@media (max-width: 360px) {
  .md-nav__vt { padding: 0 10px; }
  .md-nav__vt-label-ext { display: none; }
}