/* =====================================================
   ONYX DESKTOP SLIDE-OUT COMMUNITY MENU
===================================================== */

@media (min-width: 1024px) {

  /* Allow the community feed to use the full page width */
  #MainContent .tw-drawer.community {
    display: block !important;
  }

  #MainContent .tw-drawer.community > .tw-drawer-content {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Floating button that opens the sidebar */
  #MainContent
  .tw-drawer-content
  label[for="my-drawer-2"] {
    display: flex !important;
    position: fixed !important;
    top: calc(var(--header-height, 90px) + 20px);
    left: 22px;
    z-index: 79;

    align-items: center;
    justify-content: center;
    gap: 9px;
    width: auto !important;
    min-height: 48px;
    padding: 0 18px !important;

    color: #ffffff !important;
    background: linear-gradient(135deg, #7b3418, #b86f32) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;

    box-shadow: 0 10px 28px rgba(13, 20, 17, 0.3);
    cursor: pointer;
    transition: 0.25s ease;
  }

  #MainContent
  .tw-drawer-content
  label[for="my-drawer-2"]::after {
    content: "Community Menu";
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  #MainContent
  .tw-drawer-content
  label[for="my-drawer-2"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(13, 20, 17, 0.38);
  }

  /* Full-screen drawer layer */
  #MainContent .tw-drawer.community > .tw-drawer-side {
    display: block !important;
    position: fixed !important;
    top: var(--header-height, 90px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: auto !important;
    z-index: 80 !important;

    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Dark background behind open drawer */
  #MainContent .tw-drawer-side .tw-drawer-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;

    background: rgba(5, 9, 7, 0.62) !important;
    backdrop-filter: blur(4px);
    opacity: 0;

    transition: opacity 0.3s ease;
  }

  /* Sliding sidebar panel */
  #MainContent .tw-drawer-side .sidebar {
    position: relative !important;
    z-index: 2;

    width: 365px !important;
    max-width: 88vw !important;
    height: 100% !important;

    border-radius: 0 24px 24px 0;
    overflow-y: auto;

    transform: translateX(-105%);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Open state */
  #MainContent
  #my-drawer-2:checked
  ~ .tw-drawer-side {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #MainContent
  #my-drawer-2:checked
  ~ .tw-drawer-side
  .sidebar {
    transform: translateX(0);
  }

  #MainContent
  #my-drawer-2:checked
  ~ .tw-drawer-side
  .tw-drawer-overlay {
    opacity: 1;
  }

  /* Close button inside the drawer */
  #MainContent .back-to-courses-wrapper {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 18px !important;
  }

  #MainContent .back-to-courses-wrapper > label {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;

    color: #ffffff !important;
    background: rgba(184, 111, 50, 0.22) !important;
    border: 1px solid rgba(184, 111, 50, 0.55) !important;
    border-radius: 50% !important;
    cursor: pointer;
  }

  #MainContent .back-to-courses-wrapper > label svg {
    display: none !important;
  }

  #MainContent .back-to-courses-wrapper > label::before {
    content: "×";
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
  }
}
/* Hide Courses and "Back to my courses" inside the community drawer */
#MainContent .tw-drawer.community .tw-menu.courses,
#MainContent .tw-drawer.community .sidebar .tw-menu.courses,
#MainContent .tw-drawer.community .back-to-courses {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}