/* NoxusMu — FINAL mobile layout:
   - Sidebar fixed on the left
   - Content pushed right (wide enough to stop single-letter wrapping)
   - Mobile drawer/overlay fully disabled so nothing duplicates/overlaps
   - Right TOC hidden to save width
*/

:root { --nox-mobile-sidebar: 13.5rem; } /* tweak width; try 13–14.5rem */

/* Phones & tablets */
@media (max-width: 1024px) {
  /* Kill off-canvas drawer behavior entirely */
  #__drawer { display: none !important; }                  /* hide the checkbox */
  .md-overlay { display: none !important; }                /* no dark overlay */
  .md-header__button[for="__drawer"] { display: none !important; } /* hide burger */

  /* Stop the theme grid from reflowing things under the drawer */
  .md-main__inner { display: block !important; }
  .md-grid { max-width: none !important; }                 /* let it span full width */

  /* Fix (pin) the primary sidebar on the left */
  .md-sidebar--primary {
    display: block !important;
    position: fixed !important;
    left: 0;
    top: var(--md-header-height, 3.2rem);
    bottom: 0;
    width: var(--nox-mobile-sidebar) !important;
    height: calc(100vh - var(--md-header-height, 3.2rem));
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 3;
    background: var(--md-default-bg-color, #111) !important;
    border-right: 1px solid rgba(255,255,255,.08);
  }
  .md-sidebar--primary .md-sidebar__scrollwrap {
    height: 100%;
    overflow: auto;
  }

  /* Hide the secondary (right) sidebar to make room */
  .md-sidebar--secondary { display: none !important; }

  /* Push the main content to the right of the fixed sidebar and give it real width */
  .md-content {
    margin-left: var(--nox-mobile-sidebar) !important;
    width: calc(100vw - var(--nox-mobile-sidebar)) !important;
  }
  .md-content__inner { padding: .6rem .8rem !important; }

  /* Prevent letters stacking vertically when width gets tight */
  .md-typeset,
  .md-typeset p,
  .md-typeset li,
  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset h4 {
    word-break: normal !important;
    overflow-wrap: break-word !important;  /* wrap only long words/URLs */
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.25 !important;
  }

  /* Keep media/tables sane on phones */
  .md-typeset img,
  .md-typeset video { display: block; max-width: 100%; height: auto; }
  .md-typeset table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; }
  .md-typeset table th, .md-typeset table td { white-space: nowrap; }
  .md-typeset pre > code { white-space: pre-wrap; word-break: break-word; }

  /* If any custom "glow/rotate/vertical" title effects exist, neutralize on mobile */
  .title-vertical, .vertical-title, .rotate-title, [style*="writing-mode"] {
    writing-mode: horizontal-tb !important;
    transform: none !important;
  }
}

/* Smaller phones: narrow the sidebar slightly to give content more space */
@media (max-width: 420px) {
  :root { --nox-mobile-sidebar: 12.25rem; }
}