/*--------------------------------------------------------------
  Accordion Block Styles
  Compiled from LESS — @primary-color: #e95095, breakpoint: 1024px

  Required HTML structure:
    details.accordion-container
      summary.accordion-container-header-wrapper
      div.accordion-container-content-wrapper

  Note: Height is controlled entirely by accordion.js to enable
  smooth open/close animation. Do NOT set a fixed height here.
--------------------------------------------------------------*/

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

details.accordion-container {
	display: block;
	overflow: hidden;
	margin: 0;
	border-bottom: 2px solid var(--color-header-top-bg);
	transition: height 0.5s ease-in-out;
}

details.accordion-container summary.accordion-container-header-wrapper {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 16px 2rem 16px 0;
	user-select: none;
}

details.accordion-container summary.accordion-container-header-wrapper::-webkit-details-marker {
	display: none;
}

details.accordion-container summary.accordion-container-header-wrapper .plus {
	position: absolute;
	right: 1rem;
	top: 50%;
	width: 1.5rem;
	height: 1.5rem;
	transform: translate(0, -50%);
	transition: all 0.3s ease-in-out;
}

details.accordion-container summary.accordion-container-header-wrapper .plus .border-top,
details.accordion-container summary.accordion-container-header-wrapper .plus .border-left {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--color-header-top-bg);
	transition: all 0.3s ease-in-out;
}

details.accordion-container summary.accordion-container-header-wrapper .plus .border-top {
	width: 1.25rem;
	height: 0.25rem;
}

details.accordion-container summary.accordion-container-header-wrapper .plus .border-left {
	width: 0.25rem;
	height: 1.25rem;
}

details.accordion-container > div.accordion-container-content-wrapper {
	padding: 0 0 48px 0;
}

/* Open state */

details.accordion-container[open] summary.accordion-container-header-wrapper .plus {
	transform: translate(0, -50%) rotate(90deg);
}

details.accordion-container[open] summary.accordion-container-header-wrapper .plus .border-top {
	transform: translate(-50%, -50%) rotate(90deg);
}

details.accordion-container[open] > div.accordion-container-content-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
	animation: fadeIn 0.5s ease-in-out;
}

details.accordion-container[open] > div.accordion-container-content-wrapper .accordion-container-content-wrapper {
	width: 100%;
	margin-top: 24px;
}

@media screen and (min-width: 1024px) {
	details.accordion-container[open] > div.accordion-container-content-wrapper .accordion-container-content-wrapper {
		width: unset;
	}
}