/* =========================
   Page Layout
   ========================= */

/* Make the whole page stretch vertically */
#quarto-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content area grows to push footer down */
#quarto-content {
  flex: 1;
}

/* Sticky footer at bottom */
footer {
  margin-top: auto;
}
/* Flexbox columns for main content */
.columns {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.column {
  flex: 1;
}


/* =========================
   Navigation & Sidebar Styling
   ========================= */


/* Sidebar borders and spacing */
.sidebar {
  border-right: 1px solid #ccc;
  padding-right: 0em;
}

/* Folder icon font (Bootstrap Icons) */
:root {
  --bs-icon-folder: "\f07b";
  --bs-icon-folder-open: "\f07c";
  font-family: "bootstrap-icons";
}

/* Smooth transitions for folder icons */
.sidebar .bi-folder,
.sidebar .bi-folder2-open {
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
  margin-right: 0.5em;
}

/* Rotate folder icon when section is open */
.sidebar .sidebar-item.show > .sidebar-section-header .bi-folder2-open {
  transform: rotate(90deg);
}


/* =========================
   Center-Left Box Styling
   ========================= */

.center-left-box {
  display: flex;
  align-items: flex-start;          /* top alignment */
  justify-content: flex-start;      /* left alignment */
  width: 100%;
  height: auto;
  border-radius: 0.5em;
  margin: 0.5%;
  padding: 1%;
  gap: 10px;                        /* space between image and text */
  background-color: #f5f5f5;
}

/* Text inside center-left box */
.center-left-box p,
.center-left-box span {
  margin: 5px;
  line-height: 1.4;
}

/* Responsive image in center-left box */
.center-left-box img {
  max-width: 250px;
  border-radius: 10px;
}

/* =========================
   Active Sidebar Link Highlighting
   ========================= */
/* --- Persistent highlight for active sidebar links and sections --- */



/* Highlight the currently active page */
.sidebar-item.active > .sidebar-link,
.sidebar-link.active {
  background-color: #40be6a;  /* Flatly hover blue */
  color: #fdfdfd;            /* Flatly primary text color */
  font-weight: 600;
  border-radius: 3px;
}

/* Full-width active highlight */
.sidebar-item a.active {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border-radius: 3px;
  text-decoration: none;
  color: #ffffff !important;
  font-weight: 500;
  
  
  
}

/* Optional: consistent hover color */
.sidebar-link:hover {
  background-color: #bbeac6 !important;
  color: #000000 !important;
  border-radius: 3px;
}

/* Optional: make the section title stand out slightly when active */
.sidebar-section:has(.active) > .sidebar-item-container > .sidebar-link {
  color: #ffffff;
  font-weight: 600;
}