/* --- MOBILE RESPONSIVE STYLES (< 1200px) --- */

/* Default: Hide the mobile menu on desktop */
.mobile-category-nav {
  display: none;
}



@media screen and (max-width: 1200px) {


  .category-about {
      padding-top: 30px !important;
    }

  html,
    body {
      font-size: 11px !important;
      line-height: 14px !important;
    }

    .projekt-frame-panel {
      width: 100%;
    }

    .projekt-frame {
      pading-top: 60px !important;
      /* pointer-events: none; */
    }



  /* =========================================
     PART 1: THE CATEGORY MENU (FIXED TOP)
     ========================================= */

  .mobile-category-nav {
    display: block;
    box-sizing: border-box;
    /* Ensures padding is included in height */
    height: 50px;
    /* Defined height to push other content down */
    width: 100%;
    padding: 5px;
    text-align: center;
    background-color: transparent;
    /* border-bottom: 1px solid #eee; */

    color: black !important;

    /* Fixed positioning: Stays visible above everything else */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    /* Highest layer: Above sidepanel and close button */
  }

  .mobile-category-nav select {
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    max-width: 100%;
    width: 100%;
    color: black !important
  }

  /* Add padding to the main frame so the first project isn't hidden behind the menu */
  .main-frame {
    /* padding-top: 60px; */
  }

  /* B. Hide ALL category columns by default on mobile */
  .category-column {
    display: none;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 50px;

    padding-top: 0px;
  }

  /* C. Only show the column that has the 'mobile-visible' class */
  .category-column.mobile-visible {
    display: block !important;
  }


  /* =========================================
     PART 2: THE SIDEPANEL (BELOW MENU)
     ========================================= */

  .sidepanel {
    width: 100% !important;
    /* Height is screen minus menu height */
    height: calc(100vh - 0px) !important;

    /* Start positioning exactly below the menu */
    top: 0px !important;
    left: 0;

    /* Layer: Above content, but below the menu */
    z-index: 2000;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    padding-top: 30px !important;

    padding-bottom: 50px;
  }

  /* Reset the wrapper to stack vertically */
  .panel-wrapper {
    display: block !important;
    height: auto !important;
    padding-bottom: 50px;
  }

  /* Stack the columns */
  .panel-column-text,
  .panel-column-media {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }

  .panel-column-text {
    /* Top padding ensures text doesn't hit the close button */
    /* padding: 30px 20px 40px 20px; */
    margin-top: 0;
  }

  /* =========================================
     PART 3: CLOSE BUTTON ADJUSTMENT
     ========================================= */

  .close-btn {
position: sticky;
  /* top: 75px; */
  right: 15px;
  top: 35px;
  float: right;
  z-index: 2001;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  
  display: none;
  }

  /* Adjust image/video sizing for mobile */
  .projektbilder {
    max-width: 100% !important;
    height: auto !important;
  }

  .webvideo-wrapper {
    margin-bottom: 20px;
  }
}









                .mobile-category-nav select {
                  padding: 6px 12px;
                  font-size: 11px;
                  border: 1px solid #ccc;
                  border-radius: 4px;
                  background: white;
                  max-width: 100%;
                  width: 100%;
                  color: black !important;
                }
        
                /* NEW: Indent the subpages using CSS */
                .dropdown-subpage {
                  padding-left: 20px;
                  /* Or however much space you want */
                  font-size: 13px;
                  /* Ensure font size matches */
                }
        
                /* Optional: Make the main categories bold to distinguish them further */
                .opt-category {
                  font-weight: bold;
                }