/**
 * Menu styles
 */

/* Web, Tablet Screen */
.container .menu-bar div.hits {
	padding: 12px 15px 0px 15px;
	text-align: right;
}

.container .menu-bar div.profile {
	padding: 40px 70px 25px 70px;
	border-bottom: 1px solid var(--primary-border);
}

.container .menu-bar div.profile .home,
.container .menu-bar div.profile .link {
	text-decoration: none;
	color: var(--primary-text);
}

.container .menu-bar div.profile .home:hover,
.container .menu-bar div.profile .link:hover {
	filter: opacity(0.6);
}

.container .menu-bar div.profile .profile-image {
	margin-bottom: 5px;
}

.container .menu-bar div.profile .profile-image img {
	width: 100%;
	border-radius: 250px;
	box-shadow: 1px 1px 8px #7f7f7f;
}

.container .menu-bar div.profile .site-title {
	margin-bottom: 6px;
	text-align: center;
}

.container .menu-bar div.profile .site-title p {
	font-size: 1.6em;
	font-weight: 600;
}

.container .menu-bar div.profile .profile-name {
	display: flex;
	justify-content: center;
	margin-bottom: 26px;
	text-align: center;
	color: var(--secondary-text);
}

.container .menu-bar div.profile .profile-name img {
	width: 16px;
	height: 16px;
	margin-right: 4px;
}

.container .menu-bar div.profile .profile-name p {
	font-size: 0.9em;
	font-weight: 500;
}

.container .menu-bar div.profile .profile-link {
	display: flex;
	justify-content: center;
}

.container .menu-bar div.profile .profile-link a {
	width: 25px;
	height: 25px;
	margin: 0 4px;
	cursor: pointer;
}

.container .menu-bar div.profile .profile-link a:hover {
	filter: opacity(0.6);
}

/* Mobile Screen */
.container .menu-bar .nav {
	display: none;
	justify-content: space-between;
	align-items: center;
	width: stretch;
	padding: 15px 22px;
}

.container .menu-bar .nav .site-title {
	width: 100%;
	max-width: fit-content;
	font-size: 1.4em;
	font-weight: 700;
	text-decoration: none;
	color: var(--primary-text);
}

.container .menu-bar .nav .site-title:hover {
	filter: opacity(0.6);
}

.container .menu-bar .nav .nav-icon {
	display: flex;
	justify-content: right;
	width: 100%;
}

.container .menu-bar .nav .nav-icon .menu-icon {
	width: 16px;
	height: 16px;
	padding: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23333333' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	transition: 0.3s;
	cursor: pointer;
}

.container .menu-bar .nav .nav-icon .menu-icon.active {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23333333' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E");
}

.container .menu-bar .nav .nav-icon .menu-icon svg {
	vertical-align: middle;
}

/* Menu */
.container .menu-bar .menu {
	animation: fade-in 0.4s ease-out;
}

.container .menu-bar .menu {
	height: 100%;
	padding: 20px 20px;
}

.container .menu-bar .menu div.menu-box {
	margin-bottom: 5px;
}

.container .menu-bar .menu div.menu-box::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--secondary-border);
	margin-top: 5px;
}

.container .menu-bar .menu div.menu-box .menu-link {}

.container .menu-bar .menu div.menu-box .menu-all,
.container .menu-bar .menu div.menu-box .menu-subject {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	border-radius: 10px;
	cursor: pointer;
	transition: 0.1s;
}

.container .menu-bar .menu div.menu-box .menu-subject::after {
	content: "";
	display: inline-block;
	width: 10px;
	min-width: 10px;
	height: 7px;
	margin-left: 20px;
	background-image: url("../images/icon/down-icon.png");
	background-size: contain;
	background-repeat: no-repeat;
}

.container .menu-bar .menu div.menu-box .menu-all:hover,
.container .menu-bar .menu div.menu-box .menu-subject:hover {
	background-color: var(--primary-btn-hover);
	color: var(--primary-btn-hover-text);
}

.container .menu-bar .menu div.menu-box .menu-all.active {
	background-color: var(--primary-btn-active);
	color: var(--primary-btn-active-text);
}

.container .menu-bar .menu div.menu-box .menu-subject:hover::after {
	filter: invert(1);
}

.container .menu-bar .menu div.menu-box .menu-subject.active::after {
	background-image: url("../images/icon/up-icon.png");
}

.container .menu-bar .menu div.menu-box .menu-subject h3 {
	word-break: break-all;
}

.container .menu-bar .menu div.menu-box .menu-item-box {
	display: none;
	flex-direction: column;
	padding: 5px 20px;
}

.container .menu-bar .menu div.menu-box .menu-item-box.visible {
	animation: fade-in 0.4s ease-out;
}

.container .menu-bar .menu div.menu-box .menu-item-box.invisible {
	animation: fade-out 0.4s ease-out;
}

.container .menu-bar .menu div.menu-box .menu-item-box .menu-item {
	padding: 8px 10px;
	font-size: 1.12em;
	font-weight: 500;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.container .menu-bar .menu div.menu-box .menu-item-box .menu-item:hover,
.container .menu-bar .menu div.menu-box .menu-item-box .menu-item.active {
	color: var(--primary-text-hover);
	font-weight: 700;
	transform: translateX(-8px);
}