@charset "utf-8";

:root {
	--icon-question: "Q:";
	--icon-category-toggle:"\276F";
	
	.page-section--main-content {
		input {
			position: absolute;
			width: 0;
			height: 0;
			visibility: hidden;
		}
		
		h3 {
			margin-top: 20px;
			position: relative;
			padding-left: 1.5rem;
			
			&:first-child {
				margin-top: 0; 
			}
		}
		
		label {
            cursor: pointer;
			font-size: 1.2rem;
            font-weight: 600;
			
			&:before {
				content: var(--icon-category-toggle);
				display: flex;
				position: absolute;
				align-items: center;
				justify-content: center;
				left: -5px;
				width: 1.5rem;
				height: 1.5rem;
				line-height: 1;
				top: 50%;
				transform: translateY(-50%);
			}
        }
		
		h3:has(+ input:checked) label:before {
				transform: translateY(-50%) rotate(90deg);
		}
		
		dl {
			display: block;
			height: 0;
			overflow: hidden;
		}
		
		input:checked + dl {
			height: auto;
		}
		
		dt {
			font-weight: bolder;
			margin-top: 10px;
			display: flex;
			flex-direction: row;
			
			&:before {
				content: var(--icon-question);
				display: block;
				color: #9a5296;
				width: 1.5rem;
			}
		}
		
		dd {
			margin: 5px 0;
			padding-left: 1.5rem;
			p {
				font-size: 1rem;
			}
		}
		
	}
}