@charset "UTF-8";
/* CWBAC CSS Nav Document */
nav {
	background: var(--burgundy);
}
.navigation {
	list-style-type: none;
	display: flex;
	justify-content: center;
}
.navigation > li {
	padding: 8px 20px;
	color: white;
	font-size: clamp(1.2rem, 2.25vw, 1.8rem);
	text-align: center;
	position: relative;
	white-space: nowrap;
}
.navigation > li:hover {
	background: #6b164d;
}
.navigation > li span {
	font-family: 'Noto Sans TC', sans-serif;
	letter-spacing: 1px;
}

.navigation ul {
	max-height: 0;
	overflow: hidden;
	list-style-type: none;
	flex-flow: column;
	background: var(--pink);
	position: absolute;
	z-index: 200;
	top: 63px;
	left: 0;
	transition: all 500ms ease;
}
.navigation li:hover ul {
	max-height: 600px;
}
.navigation ul li {
	width: 160px;
	text-align: center;
	font-size: 0.9em;
	padding: 5px 0;
	border-bottom: solid 1px white;
}
.navigation ul li:hover {
	background: black;
}
.navigation ul li:last-child {
	border-bottom: none;
}

.toggle-label, .toggle {
    display: none;
}

@media (max-width: 700px) {

	nav {
	padding: 8px 5vw 6px 0;
	position: relative;
   }
    .toggle-label {
        display: block;
        cursor: pointer;
        height: 30px;
        width: 45px;
        padding-top:12px;
		margin-left: auto;
        }

    .toggle-label span,
    .toggle-label span::before,
    .toggle-label span::after {
        display: block;
        width: 100%;
        border-radius: 2px;
        height: 4px;
        background: white;
        position: relative;
    }
    .toggle-label span::before {
         content: '';
         position: absolute;
         bottom: 10px;
         }
    .toggle-label span::after {
         content: '';
         position: absolute;
         top: 10px;
         }

    .navigation {
        max-height: 0;
        width: 170px;
        background: var(--burgundy);
        flex-flow: column;
        position: absolute;
        z-index: 200;
        top: 40px;
        right: 0;
        overflow: hidden;
        transition: max-height 1s ease-in-out;
        }
    input:checked + .navigation {
        max-height: 1000px;
        overflow: hidden;
        }
    .navigation > li {
        padding: 5px 0;
        position: relative;
    }

    .navigation > li ~ li {
        border-top: solid 1px antiquewhite;
    }
    .navigation > li:hover {
        background: #6b164d;
    }
    .navigation li a {
        font-size: 1.4rem;
		color: white;
    }
    .navigation > li:hover a {
        color: white;
    }
    .navigation ul {
        position: static;
        max-height: 0;
        background: var(--pink);
        transform: translateY(5px);
        transition: all 1s ease;
    }
    .navigation li:hover ul {
        max-height: 600px;
        width: 100%;
    }
    .navigation ul li {
        padding: 8px 0 8px 10px;
		width: 100%;
    }
	.navigation ul li ~ li {
		border-top: solid 1px antiquewhite;
	}
    .navigation ul li a {
        font-size: 1.2rem;
        text-align: left;
        color: white;
    }
    .navigation ul li:hover {
        background: var(--burgundy);
    }
/*
    .navigation ul li:hover a {
        color: white;
    }
*/
    .navigation ul li:first-child {
        border: none;
    } 

}