/* ==============================================
   Collapsible About Section
   ============================================== */

/* Style for the toggle link */
.about-toggle {
    cursor: pointer;
    color: #0066cc;
    user-select: none;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0.5em;
    font-size: 0.9em;
}

.about-toggle:hover {
    text-decoration: underline;
}

/* Add expand/collapse indicator arrow */
.about-toggle::before {
    content: '▼ ';
    display: inline-block;
    transition: transform 0.2s ease;
    margin-right: 0.3em;
}

.about-toggle.collapsed::before {
    transform: rotate(-90deg);
}

/* About content states */
#about-section-content.about-collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
}

#about-section-content.about-expanded {
    max-height: 2000px; /* Arbitrary large value for smooth animation */
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
}