/**
 * Expandable List Items
 * 
 * This stylesheet provides styles for truncating and expanding list items
 * on click without modifying the original HTML content.
 */

/* Container for truncated content */
li.truncated {
  position: relative;
  cursor: pointer;
  overflow: hidden; /* Keep content from flowing outside */
  list-style: none; /* Remove default bullets */
  margin-left: -5px; /* Slight alignment adjustment */
  padding-left: 25px; /* Make room for the chevron */
}

/* The expansion indicator at beginning */
li.truncated::before {
  content: "›";
  color: #555;
  font-weight: normal;
  position: absolute;
  top: -0.1em;
  left: 6px; /* Add space on the left to prevent truncation when rotated */
  transition: transform 0.3s ease;
  width: 14px; /* Ensure fixed width */
  text-align: center; /* Center the chevron in its space */
}

/* Custom bullet point */
li.truncated > .truncated-content::before {
  content: "•";
  position: absolute;
  left: -10px; /* Position for the bullet */
  top: 0;
  color: inherit;
}

/* The truncated text state */
li.truncated .truncated-content {
  display: block;
  width: 100%;
  max-height: 300px; /* A reasonable height that will contain truncated text */
  overflow: hidden;
  transition: max-height 0.4s ease-out, opacity 0.3s ease;
  position: relative; /* For bullet positioning */
}

/* When expanded */
li.truncated.expanded .truncated-content {
  max-height: 2000px; /* A large value that will contain the full content */
  transition: max-height 0.7s ease-in;
}

/* Rotate indicator when expanded */
li.truncated.expanded::before {
  transform: rotate(90deg);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  li.truncated {
    padding-left: 30px; /* Larger touch target for mobile */
  }
  
  li.truncated::before {
    font-size: 16px; /* Larger indicator for mobile */
    left: 8px; /* Position adjustment for mobile */
    width: 18px; /* Wider space for the larger mobile chevron */
    top: 0.05em; /* Adjust vertical position */
  }
  
  li.truncated .truncated-content {
    max-height: 250px; /* Slightly shorter for mobile */
  }
  
  li.truncated.expanded .truncated-content {
    max-height: 3000px; /* Even larger to ensure full content displays */
  }
}