html,
body {
  margin: 0;
  padding: 0;
  /*font-size: 14px;
  font-family: var(--sl-font-sans); */
  font-size: 14px;
  font-family: "Times New Roman", Times, serif;
}

.content {
  max-width: 800px;
  margin: 0 auto; /* THIS IS THE KEY! It centers the block */
  padding: 24px;
}

/* === 3. MAIN CONTENT AREA === */
/* === 3. MAIN CONTENT AREA === */
.main-content {
  margin-left: 300px; /* Pushes the whole container over */
}

p {
  text-align: justify;
  font-size: 1.1rem;
}

image-component {
  display: block;     /* Makes it behave like a block, so centering works */
  max-width: 600px; /* Sets a MAXIMUM width (e.g., 700px). Adjust this value as you like. */
  width: 100%;      /* Makes it responsive and shrink on smaller screens */
  margin: 2rem auto;  /* Adds 2rem of space above/below and 'auto' centers it */
}


/* === 2. SIDEBAR NAVIGATION === */
.sidebar-nav {
  height: 100%; /* Make sidebar full-height */
  width: 300px; /* Set a fixed width for the sidebar */
  position: fixed; /* Fix it to the side of the screen */
  z-index: 10; /* Ensure it stays on top of other content */
  top: 0;
  left: 0;
  background-color: #f1f1f1; /* W3Schools light-grey style */
  overflow-y: auto; /* Add a scrollbar if ToC is too long */
  
  /* Use box-sizing so padding is included in the 300px width */
  box-sizing: border-box; 
  padding: 20px;
}

/* === 4. MAKING IT NICER (Optional) === */
/* This makes your Shoelace tree look more like a nav menu */
.sidebar-nav h2 {
  margin-top: 0;
}

.sidebar-nav sl-tree-item::part(item) {
  padding-left: 0; /* Remove default Shoelace indentation */
}

.sidebar-nav sl-tree-item a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
}

.sidebar-nav sl-tree-item a:hover {
  background-color: #e0e0e0;
}


/* === 4B. HAMBURGER (Final Revision for Transparent Background with Highlighted Icon) === */
#hamburger-btn {
  display: none; /* Hidden on desktop */
  position: fixed;
  top: 15px; 
  left: 15px;
  z-index: 1001;
  padding: 0; /* Remove default padding */
  
  /* Force the button's background to be transparent */
  --sl-button-background-color: transparent;
  --sl-button-background-color-hover: transparent;
  --sl-button-background-color-focus: transparent;
  --sl-button-border-color: transparent;
  --sl-button-border-color-hover: transparent;
  --sl-button-border-color-focus: transparent;
  box-shadow: none !important; /* No shadow on the button itself */
}

/* Style the sl-icon component directly to create the background */
#hamburger-btn sl-icon {
  display: flex; /* Make it a flex container to center the icon */
  align-items: center;
  justify-content: center;
  
  width: 48px; /* Size of the visible circle */
  height: 48px;
  border-radius: 50%; /* Make it perfectly round */
  
  background-color: white; /* The background color of the circle */
  color: #333; /* Color of the hamburger lines */
  font-size: 1.5rem; /* Size of the hamburger lines icon */
  
  /* Add a subtle shadow to this white circle */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

/* Ensure the base part of the Shoelace button is also transparent */
#hamburger-btn::part(base) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.sidebar-overlay {
  display: none; /* Hidden on desktop */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  z-index: 999; /* Below sidebar, above content */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* This class will be toggled by JavaScript */
.sidebar-overlay.open {
  display: block;
  opacity: 1;
}


/* === 5. RESPONSIVE (MOBILE) === */
/* When screen is 900px wide or less */
@media (max-width: 900px) {
  
  /* 1. Show the hamburger button */
  #hamburger-btn {
    display: inline-flex; 
  }

  /* 2. Change the sidebar to be a hidden-by-default panel */
  .sidebar-nav {
    /* It's still fixed, but now it's off-screen */
    position: fixed;
    top: 0;
    left: 0;
    width: 300px; /* Use the same fixed width */
    height: 100%;
    z-index: 1000;
    
    /* This hides it off the left side */
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;

    /* Add a shadow to look like a panel */
    /* box-shadow: 0 0 20px rgba(0,0,0,0.2); */
  }

  /* 3. This class will be toggled by JS to slide it in */
  .sidebar-nav.open {
    transform: translateX(0);
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
  }

  /* 4. The main content no longer needs a margin */
  .main-content {
    margin-left: 0;
  }

  .content {
    padding: 16px;
  }
}

/* Add this new rule to hide the hamburger when it has the 'hidden' class */
#hamburger-btn.hidden {
  display: none !important;
}