/* CLAMPING!!! */
/* 1) clamp LEFT arrow so it never goes under the sidebar + arrow-sidebar-gap */
body.left-sidebar-open .nav-arrow-left {
  left: max(
    calc((100vw - var(--content-w)) / 2 - var(--arrow-off)),
    calc(var(--sidebar-w) + var(--arrow-sidebar-gap))
  );
}

/* 2) clamp RIGHT arrow so it never goes under the window edge + arrow-window-gap */
body.left-sidebar-open .nav-arrow-right {
  right: max(
    calc((100vw - var(--content-w)) / 2 - var(--arrow-off)),
    var(--arrow-window-gap)
  );
}

/* 3) clamp BOTH sides of the main content so it never crosses:
      • left  = sidebar + arrow-sidebar-gap + body-gap-left
      • right = arrow-window-gap + body-gap-right */
/* ————————————————
   ONLY CLAMP WHEN vw ≤ 1760px
   ———————————————— */
@media (max-width: 1760px) {
  body.left-sidebar-open .w3-main {
    margin: 43px auto 20px;

    margin-left: max(
      calc((100vw - var(--content-w)) / 2),
      calc(
        var(--sidebar-w)
        + var(--arrow-sidebar-gap)
        + var(--body-gap-left)
      )
    );

    margin-right: max(
      calc((100vw - var(--content-w)) / 2),
      calc(
        var(--arrow-window-gap)
        + var(--body-gap-right)
      )
    );
  }
}
/* ————————————————
   OTHERWISE (vw > 1760px) ALWAYS CENTER
   ———————————————— */
@media (min-width: 1761px) {
  body.left-sidebar-open .w3-main {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 4) hide side arrows & show bottom nav below threshold (1180px) */
@media (max-width: 1180px) {
  .nav-arrow-left,
  .nav-arrow-right {
    display: none !important;
  }
  .nav-bottom {
    display: flex !important;
  }
  
  /* 1) bottom‐nav normal (sidebar closed) → center content */
  .w3-main {
    margin: 43px auto 20px !important;
  }
  /* 2) bottom‐nav + sidebar‐open → push content right */
  body.left-sidebar-open .w3-main {
    /* shorthand: top right bottom left */
    margin: 43px auto 20px 
      calc(var(--sidebar-w)) !important;
  }

  body.left-sidebar-open .w3-main {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}