/* Black Canvas — menu. Top-right multicolour trigger, fullscreen overlay. */

/* Move it: swap `right` for `left`, `top` for `bottom`. */
.bc-trigger {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100;

	width: 44px;
	height: 44px;
	padding: 12px 9px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	background: none;
	border: 0;
	cursor: pointer;
}

/* Clear the admin bar when logged in */
.admin-bar .bc-trigger { top: 52px; }

/* Three bars, three colours — each one reads on black and on white */
.bc-trigger span {
	display: block;
	height: 3px;
	width: 100%;
	border-radius: 3px;
	transition: transform 0.25s, opacity 0.2s;
}

.bc-trigger span:nth-child(1) { background: #E8B84B; } /* gold */
.bc-trigger span:nth-child(2) { background: #FF3D7F; } /* hot pink */
.bc-trigger span:nth-child(3) { background: #00C2D1; } /* cyan */

.bc-trigger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.bc-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bc-trigger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

.bc-nav {
	position: fixed;
	inset: 0;
	z-index: 99;

	display: flex;
	align-items: center;
	justify-content: center;

	background: #000;
}

.bc-nav[hidden] { display: none; }

.bc-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.bc-nav-list li { margin: 0 0 20px; }

.bc-nav-list a {
	font-size: 1.8rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: #fff;
	opacity: 0.75;
	transition: opacity 0.2s;
}

.bc-nav-list a:hover,
.bc-nav-list a:focus,
.bc-nav-list .current-menu-item > a { opacity: 1; }

@media (max-width: 600px) {
	.bc-nav-list a { font-size: 1.5rem; }
}