/*********************************************************************
	accordion.css
	Copyright 2021-2022 Derek Erb Solutions
	https://derekerb.solutions

	Styles for accordion function for Menu SubSections
/*********************************************************************

/*********************************************************************
	BREAKPOINTS
*********************************************************************/

/*
	Wide smartphones:	 480px;
	Tablets:			 800px;
	Desktops:			1200px;
 */

/**********************
	MENU SUBSECTION
**********************/

.menusubsecttit {
	border: 2px solid var(--PgFore);
	padding: 8% 13%;
	position: relative;
	transition: background-color 0.4s, color 0.1s;
	box-shadow: 2px 2px 5px grey;
	background-color: var(--PgFore);
	color: var(--PgBack);
	border-radius: 10px;
	inline-size: 100%;
	appearance: none;
}

	/************ DESKTOP VERSION **********/
	@media screen and (min-width: 1200px) {
		.menusubsecttit {
			padding: 2% 4% 2% 4%;
		}
	}

.menusubsecttit:active {
	border: 3px solid var(--PgFore);
}

.menusubsecttit:after,
.menusubsecttit.active:after {
	position: absolute;
	inline-size: auto;
	block-size: auto;
	right: 2%;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2em;
	font-weight: 600;
}

.menusubsecttit:after {
	content: '▼';
}

.menusubsecttit.active {
	background-color: var(--PgBack);
	color: var(--PgFore);
	transition: background-color 0.3s, color 0.1s;
}

.menusubsecttit.active:after {
	content: '▲';
}

.menusubsecttit.active ~ .menusubsubsect {
	display: block;
}

	/********** PHONE VERSION ******/
	@media screen and (max-width: 480px) {
		.menusubsecttit.active ~ .menusubsubsect:nth-child(3) {
			margin-inline-start: 8%;
		}
	}

.menusubsectsupps,
.menusubsectmsmts {
	display: none;
	flex-wrap: wrap;
	align-items: flex-end;
	font-weight: bold;
}

.menusubsecttit.active > .menusubsectsupps,
.menusubsecttit.active > .menusubsectmsmts {
	display: flex;
}

.menusubsectsupps {
	margin-block-start: 1%;
}

.msstSpecial {
	background-color: var(--Specials);
	color: var(--SpecialsText);
	border: solid 0.125em var(--Specials);
}

.msstSpecial:hover,
.msstSpecial:focus {
	color: var(--SpecialsText);
	border: solid 0.125em var(--Specials);
}

.msstSpecial.active {
	color: var(--SpecialsText);
	transition: border 0.3s, background-color 0.3s;
}

.msstSpecial.active:hover,
.msstSpecial.active:focus {
	border: solid 0.125em var(--Specials);
}

/**********************
	MENU ITEMS
**********************/

.menuitems {
	display: none;
}

.menusubsecttit.active ~ .menuitems,
.menusubsecttit.active ~ .menusubsubsect .menuitems {
	display: flex;
}

.menusubsecttit > h5{
	display: none;
}

.menusubsecttit.active > h5 {
	display: block;
}