/* Desktop-first: min width 1200px */
body {
  min-width: 1200px;
  overflow-x: auto; /* Horizontal scroll if smaller */
  padding-top: 60px !important; /* Add padding to account for fixed header */
}

/* Hide on mobile/small screens */
@media (max-width: 1199px) {
  body::before {
    content: "This site is desktop-only (minimum 1200px width). Please view on a larger screen.";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 24px;
    text-align: center;
    padding: 20px;
    background: #f0f0f0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
  }
  body > *:not(script):not(style) {
    display: none !important;
  }
}

/* Header and search bar positioning - fixed at top, always visible */
.site-header,
header,
.main-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
  background: white !important; /* Ensure it has a background */
  border-bottom: 1px solid #eeebee !important; /* Add subtle border */
}

/* Ensure the search container within header is also fixed */
.search,
.search-input-wrap,
.search-input,
.search-results {
  z-index: 100 !important; /* Ensure search bar is above sidebar */
}

/* Main content wrapper should not have fixed positioning */
.main-content-wrap {
  position: static !important;
}

/* Sidebar width set to 210px */
.side-bar {
  width: 210px !important;
  min-width: 210px !important;
  flex: 0 0 210px !important;
  padding-left: 10px !important; /* Add left padding to prevent text cutoff */
  padding-top: 60px !important; /* Add padding to account for fixed header, aligns with body */
  z-index: 10 !important; /* Lower z-index so search bar can appear above it */
}

/* Site title padding adjustment - increased for more rightward shift */
.side-bar .site-title {
  padding-left: 20px !important; /* Shift "IBDP Resources" more to the right */
  margin-left: 40px !important; /* Additional margin for more rightward shift - increased by 20px more */
}

/* Navigation list padding adjustment - reduced from 65px to 30px */
.side-bar .nav-list {
  padding-left: 30px !important; /* Shift other sidebar items 30px to the right */
}



/* Main content positioning - use margin to place it after sidebar */
#main-content,
.main-content {
  margin-left: 210px !important; /* Position immediately after 210px sidebar */
  max-width: none !important;
  width: calc(100% - 210px) !important; /* Take remaining space */
  padding-left: 30px !important;
  padding-right: 30px !important;
}

/* Remove ALL container constraints */
.main-content-wrap,
.main,
.page-content,
.main-header,
body > div,
#site-wrapper,
.site {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Specifically target the main content wrapper to remove any theme margins */
.main-content-wrap > * {
  margin-left: 0 !important;
}

/* Ensure page content starts at the left edge of its container */
.page-content > *:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Group colors */
.group1 { color: purple; }   /* Group 1 */
.group2 { color: teal; }
.group3 { color: orange; }
.group4 { color: blue; }
.group5 { color: green; }

/* HL/SL badges */
.hl-badge { background: var(--group-color); color: white; padding: 2px 8px; border-radius: 4px; }
.sl-badge { border: 2px solid var(--group-color); color: var(--group-color); padding: 2px 8px; border-radius: 4px; }