/* =========================================================
   Universal Mobile Sidebar Fix — styles (v2)
   Loaded after page CSS so it safely fills in any folder
   that was missing the mobile drawer styles.
   ========================================================= */
.sidebar-toggle-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e2e5ea);
  color: var(--ink, #1a1c23);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}
.sidebar-toggle-btn i { font-size: 15px; }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 32, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sidebar-overlay.is-open { display: block; opacity: 1; }

/* Close (X) button placed inside the sidebar drawer.
   Visibility is tied to the sidebar's own open state
   (works no matter which breakpoint a course's own CSS uses,
   since course breakpoints differ: 720 / 860 / 1024 etc). */
.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 0 10px auto;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e2e5ea);
  color: var(--ink, #1a1c23);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
.sidebar-close-btn i { pointer-events: none; }

.sidebar-left.is-open .sidebar-close-btn,
.left-sidebar.is-open .sidebar-close-btn,
.sidebar.is-open .sidebar-close-btn,
.sidebar-left.open .sidebar-close-btn,
.left-sidebar.open .sidebar-close-btn,
.sidebar.open .sidebar-close-btn {
  display: flex;
}

/* Fallback drawer behaviour — ONLY for pages that had NO existing
   mobile sidebar styling at all. The fix script tags such sidebars
   with .sb-fix-drawer at runtime; pages that already have their own
   working (possibly differently-breakpointed) mobile CSS never get
   this class, so they are never touched here. */
@media (max-width: 720px) {
  .sidebar-toggle-btn { display: inline-flex; }

  .sb-fix-drawer {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 320px;
    height: 100vh;
    max-height: 100vh;
    z-index: 100;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .sb-fix-drawer.is-open {
    transform: translateX(0);
  }
}

/* =========================================================
   v6 — one single mobile drawer behaviour for EVERY course
   folder, instead of depending on ~30 different stylesheets.

   The script tags the sidebar with .sb-drawer, so below 860px
   every course page gets exactly the same drawer, and the
   "Topics" button becomes a sticky (fixed) pill on the RIGHT.

   Why !important is used here: several folders style their own
   sidebar in ways that fought the drawer, e.g. cloud-computing
   has ".left-sidebar { animation: fadeIn ... both }" whose
   final keyframe (transform: translateY(0)) overrides a plain
   transform declaration - that is exactly why its drawer never
   sat at top:0 and stayed parked under the breadcrumbs.
   ========================================================= */
@media (max-width: 860px) {

  /* ---------- the drawer ---------- */
  .sb-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 86% !important;
    max-width: 340px !important;
    display: block !important;
    z-index: 1000 !important;
    border-radius: 0 !important;
    padding-bottom: 28px !important;
    box-shadow: 0 0 34px rgba(0, 0, 0, 0.28) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    animation: none !important;      /* kills fadeIn transform conflicts */
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .sb-drawer.is-open,
  .sb-drawer.open {
    transform: translateX(0) !important;
  }

  /* no nested inner scroll box -> no dead space at the bottom */
  .sb-drawer .topic-list,
  .sb-drawer .topic-links,
  .sb-drawer > ul {
    max-height: none !important;
    overflow: visible !important;
    flex-shrink: 1 !important;
  }
  /* xml/angular hide their list until ".open" - inside a drawer
     the list must always be visible */
  .sb-drawer .topic-links {
    display: flex !important;
    flex-direction: column !important;
  }

  /* ---------- sticky toggle pill, right side ---------- */
  .sidebar-toggle-btn,
  .mobile-sidebar-toggle {
    position: fixed !important;
    right: 14px !important;
    bottom: 18px !important;
    left: auto !important;
    top: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    max-width: 60vw;
    margin: 0 !important;
    z-index: 1001 !important;
    padding: 11px 17px !important;
    border-radius: 999px !important;
    border: none !important;
    background: var(--primary, #1c56d6) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    line-height: 1.1 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.26) !important;
    cursor: pointer;
  }
  .sidebar-toggle-btn i,
  .mobile-sidebar-toggle i { color: #fff; }

  /* while the drawer is open the pill is redundant (the X is inside) */
  body.sb-drawer-open .sidebar-toggle-btn,
  body.sb-drawer-open .mobile-sidebar-toggle {
    display: none !important;
  }

  /* ---------- close (X) stays reachable while scrolling ---------- */
  .sb-drawer .sidebar-close-btn {
    display: flex !important;
    position: sticky;
    top: 0;
    margin-left: auto;
    background: var(--card, var(--white, #fff));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 5;
  }
}

.sidebar-overlay { z-index: 999; }

/* =========================================================
   v7 — layout + pill placement
   Between 721px and 860px the page grids still reserved a
   ~240-300px column for the sidebar, but the sidebar is now a
   fixed drawer (out of flow), so that column stayed empty and
   the article looked squeezed with a big blank strip. Every
   layout container is collapsed to a single full-width column
   for the whole drawer range.
   ========================================================= */
@media (max-width: 860px) {
  .layout,
  .page-container,
  .page-shell,
  .page-wrap {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    max-width: 100% !important;
  }
  /* children were placed into named grid areas / explicit columns */
  .layout > *:not(.sb-drawer),
  .page-container > *:not(.sb-drawer),
  .page-shell > *:not(.sb-drawer),
  .page-wrap > *:not(.sb-drawer) {
    grid-area: auto !important;
    grid-column: auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .main-content,
  .content,
  .content-card,
  .right-sidebar,
  .sidebar-right {
    width: auto !important;
    max-width: 100% !important;
  }
  /* .layout uses grid gap for spacing; block layout needs margins */
  .right-sidebar,
  .sidebar-right {
    margin-top: 18px !important;
  }

  /* ---- pill moves to the TOP, just under the sticky navbar,
       which also keeps it clear of the floating WhatsApp button ---- */
  .sidebar-toggle-btn,
  .mobile-sidebar-toggle {
     top: calc(var(--navbar-height) + 20px) !important;
    bottom: auto !important;
    right: 14px !important;
  }
}

@media (max-width: 640px){
   .sidebar-toggle-btn,
  .mobile-sidebar-toggle {
top: 15px !important;
}
}

/* =========================================================
   v8 — sticky right sidebar was overlapping the footer/CTA
   Most folders declare ".sidebar-right / .right-sidebar" as
   "position: sticky; top: 84px" and only reset it to static in
   a smaller breakpoint. In the old grid the sidebar sat in its
   own column, so sticking was harmless. Now that the layout is
   a single block column (v7), the sticky card scrolls along and
   paints on top of whatever follows it - which is why cards
   appeared floating over the green footer band on some pages.
   Sticking is disabled for the whole drawer range.
   ========================================================= */
@media (max-width: 860px) {
  .right-sidebar,
  .sidebar-right {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: auto !important;
    animation: none !important;
  }
  /* same trap for the desktop-sticky left column on pages where it
     is NOT the drawer (e.g. a second aside) */
  .content,
  .main-content,
  .content-card {
    position: static !important;
  }
}