/* Projects Dropdown Styles */

/* Hide the checkbox inputs */
.projects-toggle,
.project-submenu-toggle {
  display: none;
}

/* Make label.nav-link match the exact styling of a.nav-link from Chirpy theme */
#sidebar ul li.nav-item > label.nav-link {
  padding-top: .6rem;
  padding-bottom: .6rem;
  display: flex;
  align-items: center;
  border-radius: .75rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0;
  color: inherit;
}

#sidebar ul li.nav-item > label.nav-link:hover {
  background-color: var(--sidebar-hover-bg);
}

#sidebar ul li.nav-item > label.nav-link i.fa-fw {
  font-size: 95%;
  opacity: .8;
  margin-right: 1.5rem;
}

#sidebar ul li.nav-item > label.nav-link span {
  font-size: 90%;
  letter-spacing: .2px;
}

#sidebar ul li.nav-item.active > label.nav-link {
  color: var(--sidebar-active-color);
  background-color: var(--sidebar-hover-bg);
}

/* Chevron icon styling */
.chevron-icon {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

/* Rotate chevron when expanded */
.projects-toggle:checked + label.nav-link .chevron-icon {
  transform: rotate(180deg);
}

/* Projects list container */
.projects-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.projects-toggle:checked ~ .projects-list {
  max-height: 1000px;
}

/* Individual project item */
.project-item {
  margin: 0;
  padding: 0;
}

/* Project name (clickable label) */
.project-name {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.5rem 0.5rem 2rem;
  cursor: pointer;
  color: var(--sidebar-muted-color, rgba(117, 117, 117, 0.9));
  transition: color 0.15s ease;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
}

.project-name:hover {
  color: var(--sidebar-active-color, #2a408e);
}

/* Project chevron */
.project-chevron {
  font-size: 0.65rem;
  margin-right: 0.5rem;
  transition: transform 0.2s ease;
  opacity: 0.6;
}

.project-submenu-toggle:checked + .project-name .project-chevron {
  transform: rotate(90deg);
}

/* Project pages list */
.project-pages {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 3rem;
}

.project-submenu-toggle:checked ~ .project-pages {
  max-height: 500px;
}

.project-pages li {
  margin: 0.125rem 0;
}

.project-pages a {
  display: block;
  padding: 0.375rem 0.5rem;
  color: var(--sidebar-muted-color, rgba(117, 117, 117, 0.9));
  text-decoration: none;
  font-size: 0.8125rem;
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-pages a:hover {
  color: var(--sidebar-active-color, #2a408e);
  border-left-color: var(--sidebar-active-color, #2a408e);
  background-color: rgba(var(--sidebar-active-color-rgb, 42, 64, 142), 0.05);
}

.project-pages li.active a {
  color: var(--sidebar-active-color, #2a408e);
  border-left-color: var(--sidebar-active-color, #2a408e);
  font-weight: 600;
}

/* Dark mode adjustments */
html[data-mode='dark'] .project-name {
  color: rgba(255, 255, 255, 0.6);
}

html[data-mode='dark'] .project-name:hover {
  color: rgba(255, 255, 255, 0.9);
}

html[data-mode='dark'] .project-pages a {
  color: rgba(255, 255, 255, 0.6);
}

html[data-mode='dark'] .project-pages a:hover {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.05);
}

html[data-mode='dark'] .project-pages li.active a {
  color: rgba(255, 255, 255, 0.9);
}

/* Code block styling for project pages */
.content .sourceCode {
    background-color: rgb(40 45 53);
    box-sizing: border-box;
    color: rgb(240, 246, 252);
    display: inherit;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 16px;
    font-weight: 400;
    justify-content: space-between;
    line-height: 24px;
    margin-bottom: 16px;
    overflow-wrap: break-word;
    overflow-x: auto;
    overflow-y: auto;
    padding: 0.2rem;
    position: relative;
}