/* Responsive layer for the Forge-branded site: the scrape kept the desktop
   header/footer but lost the working mobile menu and footer column swap.
   This restores a drill-down hamburger nav + footer links on tablet/phone. */

html, body { max-width: 100%; }
@media (max-width: 1023px) { html, body { overflow-x: hidden; } }

/* ---------- Hamburger button ---------- */
#mNavBtn { display: none; }
@media (max-width: 1023px) {
  #mNavBtn {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 1002;
  }
  #mNavBtn span { display: block; height: 2px; width: 24px; background: #1a1d22; border-radius: 2px; transition: transform .25s, opacity .2s; }
  body.mnav-open #mNavBtn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mnav-open #mNavBtn span:nth-child(2) { opacity: 0; }
  body.mnav-open #mNavBtn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  header.c-topnav .right-area, header .right-area { padding-right: 56px; }
}

/* ---------- Slide-in panel ---------- */
#mNavPanel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(90vw, 420px);
  background: #fff; z-index: 1001; box-shadow: -8px 0 30px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .28s ease; visibility: hidden;
}
body.mnav-open #mNavPanel { transform: translateX(0); visibility: visible; }
#mNavBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity .28s; }
body.mnav-open #mNavBackdrop { opacity: 1; visibility: visible; }
body.mnav-open { overflow: hidden; }

/* views: main + one detail per section, slide horizontally */
.mnav-views { position: absolute; top: 0; left: 0; right: 0; bottom: 82px; overflow: hidden; }
.mnav-view {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; padding: 62px 0 12px; transform: translateX(100%);
  transition: transform .25s ease; visibility: hidden;
}
.mnav-view.active { transform: translateX(0); visibility: visible; }
.mnav-main { transform: translateX(0); visibility: visible; }
.mnav-main.tucked { transform: translateX(-22%); visibility: hidden; }

/* top-level rows (main view) */
.mnav-drill {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: none; border: 0; border-bottom: 1px solid #ededed; padding: 17px 22px;
  font-family: inherit; font-size: 17px; font-weight: 600; color: #1a1d22; cursor: pointer; text-align: left;
}
.mnav-chev { color: #b0b5ba; font-size: 18px; }

/* detail back button */
.mnav-back {
  display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0;
  border-bottom: 1px solid #ededed; padding: 14px 18px; font-family: inherit; font-size: 16px;
  font-weight: 600; color: #1a1d22; cursor: pointer; text-align: left;
}
.mnav-back .mnav-chev { font-size: 20px; }

/* collapsible category (Trading / Data / Individual Investors …) */
.mnav-cat { border-bottom: 1px solid #ededed; }
.mnav-cat-h {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: none; border: 0; padding: 16px 22px; font-family: inherit; font-size: 18px;
  font-weight: 600; color: #1a1d22; cursor: pointer; text-align: left;
}
.mnav-caret { transition: transform .2s; color: #b0b5ba; font-size: 12px; }
.mnav-cat:not(.open) .mnav-caret { transform: rotate(-90deg); }
.mnav-cat-body { display: none; padding: 0 0 14px; }
.mnav-cat.open .mnav-cat-body { display: block; }

.mnav-grp-h { padding: 12px 22px 4px; font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a9097; }
.mnav-item { display: block; padding: 9px 22px; text-decoration: none; }
.mnav-item-t { display: block; color: #1a1d22; font-size: 16px; font-weight: 600; }
.mnav-item-d { display: block; color: #6b7177; font-size: 13px; margin-top: 2px; line-height: 1.35; }
.mnav-item:hover .mnav-item-t, .mnav-item:active .mnav-item-t { color: #ff5a36; }

/* plain link rows (About items, simple entries) */
.mnav-link { display: block; padding: 16px 22px; border-bottom: 1px solid #ededed; color: #1a1d22; font-size: 16px; font-weight: 600; text-decoration: none; }
.mnav-link:hover, .mnav-link:active { color: #ff5a36; }

/* sticky Log In / Sign Up */
.mnav-auth { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; padding: 15px 18px; background: #fff; border-top: 1px solid #ededed; }
.mnav-auth a { flex: 1; text-align: center; padding: 13px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 15px; }
.mnav-login { border: 1px solid #d7dadd; color: #ff5a36; }
.mnav-signup { background: #ff5a36; color: #fff; }

/* ---------- Footer: reveal link columns on tablet/phone ---------- */
@media (max-width: 1199px) {
  footer .d-lg-flex { display: block !important; }
  footer .mobile-title { display: none !important; }
  footer ul { display: block !important; list-style: none; margin: 0; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); }
  footer ul:first-of-type { border-top: 0; }
  footer ul li { margin: 0; }
  footer ul a { display: block; padding: 7px 0; }
  footer .d-none.d-xl-block { display: block !important; }
  footer .right.flex-shrink-0 { margin-top: 20px; }
}