/**
 * Mobile menu accordion.
 *
 * Only applies once assets/mobile-menu.js has tagged the Theme Builder header
 * overlay with .smm-mobile-menu, so the original layout stays intact if the
 * script does not run.
 */

/* The overlay was authored as a two-column layout; put every main navigation
   point on its own row instead. The rows are flex containers whose columns have
   flex-basis: 45%, so the basis has to be reset as well - width alone loses
   against flex-basis. */
.smm-mobile-menu .et_pb_row .et_pb_column {
	flex: 0 0 100% !important;
	flex-basis: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-right: 0 !important;
	float: none !important;
}

.smm-mobile-menu .et_pb_column_empty {
	display: none !important;
}

/* Group heading acts as the toggle. */
.smm-mobile-menu .smm-heading {
	cursor: pointer;
}

.smm-mobile-menu .smm-heading a {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.smm-mobile-menu .smm-panel {
	display: none;
}

.smm-mobile-menu .smm-group.is-open > .smm-panel {
	display: block;
}

/* Chevron indicating that the group can be expanded. */
.smm-mobile-menu .smm-arrow {
	flex: none;
	width: 0.5em;
	height: 0.5em;
	margin-left: 0.75em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
}

.smm-mobile-menu .smm-group.is-open .smm-arrow {
	transform: translateY(0.1em) rotate(-135deg);
}