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

.accordion-header {
	font-size: 1rem;
	width: 100%;
	text-align: left;
	cursor: pointer;
	outline: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*border-top-left-radius: var(--nav-edge-button-radius);
    border-top-right-radius: var(--nav-edge-button-radius);*/
	border-radius: var(--accordion-title-radius);
	transition: 0.3s ease;
    background-color: var(--accordion-title-bg-default);
    color: var(--accordion-title-text);
}

/* remove bottom rounded corners when content is showing */
.accordion-header.active { 
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.accordion-header.emphasize {
    background-color: var(--accordion-title-bg-emphasis);
    color: var(--accordion-title-text-emphasis);
}

.accordion-header:hover,
.accordion-header.emphasize:hover {
    background-color: var(--button-bg-default-hover);
    color: var(--button-text-hover);
}


.accordion-content {
	overflow: hidden;
	padding-right: 20px;
	padding-left: 20px;
	max-height: 0;
	transition: max-height 0.3s ease;
	border-bottom-left-radius: var(--accordion-title-radius);
    border-bottom-right-radius: var(--accordion-title-radius);
}

/* only sets these properties when header has been clicked (is active). This is required because otherwise the border would show below the button with rounded corners as a solid line */
.accordion-header.active + .accordion-content { 
	border-bottom-left-radius: var(--accordion-title-radius);
    border-bottom-right-radius: var(--accordion-title-radius);
	background-color: var(--accordion-content-bg);
	border: 1px solid var(--accordion-title-bg-default);
	border-top: 0px solid transparent;
}


.accordion-content .team-profile {
    display: flex;
    gap: 20px;
}

.accordion-content-wrapper {
	padding-top: 14px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

.accordion-content h3 {
    color: var(--accordion-answer-title);
    padding-top: 20px;
    font-size: var(--font-size-mobile_accordion-header);
}
.accordion-content p {
	color: var(--accordion-answer-text);
	font-size: var(--font-size-mobile_accordion);
}

.accordion-content li {
	color: var(--accordion-answer-text);
	font-size: var(--font-size-mobile_accordion);
}

.accordion-content img {
	border-radius: 6px;
	margin: 0;
	padding: 0;
}

.accordion-content a {
	margin: 0;
	padding: 0;
}

.accordion-content ul {
	margin-left: 7px;
}

.icon {
    transition: transform 0.3s ease;
}

.active .icon {
    transform: rotate(45deg);
}


@media (min-width: 660px) {
	.accordion-content h3 {
		padding-top: 20px;
		font-size: var(--font-size-large_accordion-header);
	}
	.accordion-content p {
		font-size: var(--font-size-large_accordion);
	}

	.accordion-content li {
		font-size: var(--font-size-large_accordion);
	}
}