/* Shared mobile responsiveness for Cheoma redesign preview.
   Pages use inline styles + the dc runtime, so overrides use !important. */

#mobile-nav-toggle {
  display: none;
}

/* Icon swap driven by CSS (React-safe — no direct textContent writes) */
#mobile-nav-toggle .mnv-close {
  display: none;
}
body.nav-open #mobile-nav-toggle .mnv-open {
  display: none;
}
body.nav-open #mobile-nav-toggle .mnv-close {
  display: inline;
}

/* ---------- Backdrop for open drawer ---------- */
body.nav-open::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.42);
  z-index: 54;
}

@media (max-width: 880px) {
  /* Show the hamburger button */
  #mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid var(--line, rgba(16, 18, 24, .07));
    background: var(--card, #FFFFFF);
    color: var(--text, #14161C);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    margin-right: 6px;
  }

  /* Hide app-only header controls (Live/Testnet toggle + network) on mobile */
  .hd-net {
    display: none !important;
  }

  /* Keep the header (and its ✕ close button) above the drawer backdrop.
     The backdrop is z-index 54, so header must beat it or the ✕ is unclickable. */
  body.nav-open header {
    z-index: 58 !important;
  }

  /* ---------- Sidebar → off-canvas drawer ---------- */
  aside {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 284px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 56 !important;
    transform: translateX(-104%) !important;
    transition: transform .26s cubic-bezier(.22, .7, .3, 1) !important;
    box-shadow: none !important;
    overflow-y: auto !important;
  }
  body.nav-open aside {
    transform: translateX(0) !important;
    box-shadow: 0 0 48px rgba(0, 0, 0, .34) !important;
    /* Clear the sticky header so the drawer's own logo isn't hidden under it. */
    padding-top: 150px !important;
  }

  /* ---------- Home header nav → dropdown ---------- */
  header nav {
    display: none !important;
  }
  body.nav-open header nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    position: fixed !important;
    top: 62px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 10px !important;
    background: var(--card, #FFFFFF) !important;
    border: 1px solid var(--line, rgba(16, 18, 24, .07)) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .28) !important;
    z-index: 56 !important;
  }
  body.nav-open header nav a,
  body.nav-open header nav button {
    width: 100% !important;
    text-align: left !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }

  /* ---------- Layout tightening ---------- */
  main {
    width: 100% !important;
  }
  section[style*="max-width"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  div[style*="padding:26px 28px"],
  div[style*="padding:22px 26px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  header[style*="padding:16px 28px"],
  header[style*="padding:14px 24px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}