/* --- Accordion Styles for Activities Page --- */

.accordion-controls {
    margin-bottom: 20px;
    text-align: right;
}

.accordion-item {
    margin-bottom: 10px;
}

.accordion-header {
    background-color: #333;
    color: var(--text-color);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.2em;
    font-family: var(--header-font);
    transition: background-color 0.4s ease;
    border-left: 5px solid #555;
}

.accordion-header:hover, .accordion-header.active {
    background-color: #444;
    border-left-color: var(--primary-color);
}

/* Style for the expand/collapse icon */
/* Style for the expand/collapse SVG icon */
.accordion-header::after {
    content: ''; /* Remove the text character */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2300a8ff' d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.2em;
    height: 1.5em;
    float: right;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.accordion-header.active::after {
    transform: rotate(-180deg); /* Flips the icon upward */
}

.accordion-content {
    padding: 0 18px 18px;
    background-color: #2a2a2a;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content p {
    padding: 15px 5px 5px 5px;
}