#sidebar {
  background-color: #2c2c2c;
  width: 250px;
  padding: 2rem 1.5rem 0rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 1rem;
  color: #fff;
  height: 100%;
  flex-shrink: 0;
  position: relative; /* no more fixed! */
  z-index: 1;
  overflow-y: auto;
}


@media (max-width: 768px) {
  #sidebar {
    display: none;
  }
}



/* Tablet: full-width stacked sidebar */
@media (max-width: 1024px) {
  #sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }
}


.sidebar-section {
    margin-bottom: 1.5rem;
}


/* -------------------------------------------------------------*/
/* Name display */
.site-sidebar img {
  width: 100%;
  /* max-width: px; */
  height: auto;
  border-radius: 8px;
  margin: 0 auto 1rem auto;
  display: block;
}  

.sidebar-section .avatar_name {
    margin-top: 0.5rem;
    font-size: 1.5rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    /* margin-bottom: 1px; */
}

.sidebar-section .avatar_title {
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    /* margin-bottom: 0.2rem; */
}

.sidebar-section .current_company {
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    /* margin-bottom: 0.3rem; */
}

/* -------------------------------------------------------------*/


.sidebar-section h2 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #fff;
    padding-left: 3rem;
}

.sidebar-links {
    list-style: none;
    padding-left: 0;
    margin: 0;
    padding-left: 3rem;
}

.sidebar-links li {
    margin-bottom: 0.5rem;
}

.sidebar-links a {
    text-decoration: none;
    color:  #f1f5f9;
      display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s;
}

.sidebar-links a:hover {
    text-decoration: underline;
      color: #38bdf8;
}

.sidebar-links i {
  font-style: normal;
  font-weight: 400;
  display: inline-block;
  width: 1.2rem;
  text-align: center;
  color: #f1f5f9;
}

/* Stronger icons (solid/regular) get higher weight */
.sidebar-links i.fas,
.sidebar-links i.fa-solid {
  font-weight: 900;
}

/* Brand icons still default */
.sidebar-links i.fab,
.sidebar-links i.fa-brands {
  font-weight: 400;
}


@media (min-width: 1025px) {
  #sidebar {
    /* position: sticky; */
    /* top: 5rem; header height offset */
    height: stretch;
    /* align-self: stretch; ensure sidebar stretches to fill height */
  }
}