@charset "UTF-8";
/* CSS Document */

#recommendations {

	.mirror {
		display: block;
		height: auto;
	}
	h2 {
		margin-bottom: 30px;
		color: white;
	}

	.background {
		/* padding-top:100px; */
		background-color: var(--brand_purple);
	}
	h3 {
		font-family: NunitoSans;
		font-size: var(--copy_size_bigger);
		line-height: var(--copy_line_height_bigger);
		margin: 0 0 0 0;
	}
	.columns {
		/* position: relative; */
		/* top: 50%; */
		/* transform:translateY(-50%); */
		/* margin: auto; */
		color: white;
		position: relative;
		padding-top: 90px;
		padding-bottom: 25px;
	}
	.columns[data-split="1/1"] {
		display: flex;
		flex-flow: row;
		column-gap: 100px;
		margin-top: 20vh;
	}
	.columns[data-split="1/1"] .column {

	}
	.columns[data-split="1/1"] .column:nth-child(1) { background-color: rgba(245,245,220,0.0); }
	.columns[data-split="1/1"] .column:nth-child(2) { background-color: rgba(250,235,215,0.0); }

	.accordion > ul,
	.accordion > ul > li > label > ul {
		margin: 0;
		padding: 0;
	}
	.accordion > ul > li,
	.accordion > ul > li > label > ul > li {
		list-style: none;
		margin: 0; padding: 0;
	}
	.accordion > ul > li > label > ul {
		/* margin-bottom: 20px; */
	}
	.accordion > ul > li > label > ul > li,
	.accordion > ul > li,
	.accordion > li > p {
		list-style: disc;
		padding: 0 0 0 0.25em;
		margin: 0 0 0 1.5em;
		font-size: var(--copy_size_bigger);
		line-height: var(--copy_line_height_bigger);
		font-weight: 300;
		color: white;
	}
	.accordion > ul > li > label > h3 {
		color: var(--brand_blue);
	}
	.accordion > ul > li {
		list-style: none;
		margin: 0; padding: 0;
	}

	.accordion {
		& > ul > li > label {
			display: block;
			position: relative;
		}
		& input {
			position: absolute;
			inset: 0;
			width: 1px;
			height: 1px;
			margin: -1px;
			padding: 0;
			border: 0;
			overflow: hidden;
			clip: rect(0 0 0 0);
			clip-path: inset(50%);
			white-space: nowrap;
			opacity: 0;
			pointer-events: none;
		}
		& .question {
			display: block;
			box-sizing: border-box;
			margin: 0 0 0 0;
			/*
			display:flex;
			align-items:center;
			justify-content:space-between;
			gap: 20px;
			*/
			padding: 10px 15px;
			border:1px solid rgba(0,0,0,.12);
			border-radius: 15px 15px 5px 5px;
			background:#fff;
			box-shadow: 0 5px 5px 0 #00000014;
		}
		& .question h3 { 
			display: block;
			white-space: nowrap;
			color:var(--brand_blue);
		}
		& .question h3 i {
			display: inline-block;
			vertical-align: middle;
			position: relative;
			width: 40px;
			height: 40px;
			border-radius: 40px;
			margin-right: 10px;
			background-color: var(--brand_purple);
			background-image: url("../../images/assets/white/checked.webp");
			background-repeat: no-repeat;
			background-position: center;
			background-size: 80%;
		}
		& .question h3 em {
			display: inline-block;
			vertical-align: middle;
			position: relative;
			width: calc(100% - 60px);
			margin: 0 0 0 5px;
			font-style: normal;
			color: inherit;
			white-space: normal;
			outline: 1px dotted orange;
			outline: none;
		}			
		& .question h3 em:before {
			float: right;
			content:"+"; 
			font-weight:700; 
			line-height:1 
		}			
		& .answer {
			margin:10px 0; 
			max-height:0; 
			overflow:hidden; 
			opacity:0; 
			transform:translateY(-4px); 
			padding:0 16px; 
			transition:max-height .48s ease, opacity .4s ease, transform .4s ease, padding .4s ease;
		}
		& input:checked ~ .question h3 { border-bottom-left-radius:0;border-bottom-right-radius:0 }
		& input:checked ~ .question h3 em:before { content:"−" }
		& input:checked ~ .answer {
			max-height:60vh;
			opacity:1;
			transform:translateY(0);
			padding: 0 15px 10px 15px;
			margin: 15px 0;
		}
		& .answer > ul {
			margin: 0;
			padding: 0 0 0 0.25em;
		}
		& .answer > ul > li {
			list-style: disc;
		}
		& .answer > ul > li + li {/* margin-top:10px; */}
		& .answer > ul ul { margin-top:10px }
		& .answer > ul ul > li + li { margin-top:10px }

	}
}