/* ============================================================================
   SIDEBAR COMPONENT
   ============================================================================ */

/* Sidebar - Left/Right columns */
.cv-sidebar {
  background: var(--sidebar-bg);
  padding: 4rem 1.5rem;
  font-size: 0.9rem;
}

/* Sidebar Accordion - Hidden on desktop, visible on mobile */
.sidebar-accordion-header {
  display: none;
}

.sidebar-section {
  margin-bottom: 2rem;

  /* Add margin when section is collapsed */
  &:has(details:not([open])) {
    margin-bottom: 3rem;
    margin-top: 0rem;
  }

  /* Collapsible Details */
  details {
    margin: 0;

    summary ~ * {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(-8px);
      transition: max-height 0.5s ease-in-out,
                  opacity 0.3s ease-in-out,
                  transform 0.3s ease-in-out;
    }

    &[open] summary ~ * {
      max-height: 1500px;
      opacity: 1;
      transform: translateY(0);
    }

    &[open] .sidebar-content {
      margin-top: 0.5rem;
    }
  }

  summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Remove default triangle marker */
    &::-webkit-details-marker,
    &::marker {
      display: none;
    }

    .sidebar-title {
      margin-bottom: 0;
    }

    &:hover .sidebar-title {
      color: var(--accent-blue);
    }

    &:hover::after,
    details:not([open]) &::after {
      opacity: 1;
    }
  }
}

.sidebar-title {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.3em;
  margin-bottom: 10px;
  padding: 0;
  color: rgb(51, 51, 51);
  text-align: left;
}

.sidebar-content {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
}

.skill-item {
  margin-bottom: 0.15rem;
  color: rgb(0, 0, 0);
  font-weight: 400;
}

/* Left Sidebar Specific */
.cv-sidebar-left {
  .sidebar-section summary::after {
    content: '▶';
    font-size: 0.8em;
    color: rgb(100, 100, 100);
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    margin-left: 15px;
    flex-shrink: 0;
  }

  .sidebar-section details[open] summary::after {
    transform: rotate(90deg);
  }

  .sidebar-content,
  .skill-item {
    text-align: left;
  }
}

/* Right Sidebar Specific */
.cv-sidebar-right {
  .sidebar-section summary {
    flex-direction: row-reverse;
    justify-content: space-between;

    .sidebar-title {
      text-align: right;
      width: 100%;
    }

    &::after {
      content: '▶';
      font-size: 0.8em;
      color: rgb(100, 100, 100);
      transition: transform 0.2s ease, opacity 0.2s ease;
      opacity: 0;
      margin-right: 15px;
      flex-shrink: 0;
    }
  }

  .sidebar-section details[open] summary::after {
    transform: rotate(90deg);
  }

  .sidebar-content,
  .skill-item {
    text-align: right;
  }
}