/* ======================== */
/* GENERIC STYLING          */
/* ======================== */

#sidebar {
	display:flex;
	flex-shrink:0;
	flex-direction:column;
	gap:16px;
	background:url("/images/sidebar/bottom.png") bottom center no-repeat, var(--colPrimaryDark);
	padding:16px;
	width:var(--sidebarWidth);
	min-height:900px;
}

.sidebarDivider {
	display:flex;
	align-items:center;
	gap:8px;
	width:100%;
	color:var(--colSecondaryDarker);
	font-weight:bold;
	font-size:20px;
	font-family:var(--fontSecondary);
	text-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
	text-transform:uppercase;
}

.sidebarDivider:after {
	flex:1;
	background:var(--colSecondaryLighter);
	height:2px;
	content:"";
}

.sidebarSection {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.sidebarSection .button {
	width:100%;
}

@media (max-width: 1000px) {
	#sidebar {
		background:linear-gradient(180deg, var(--colPrimaryMid), var(--colPrimaryDark) 8px) !important;
		width:100% !important;
		min-height:unset !important;
	}
}

/* Fix harsh text shadows on Safari */
@supports (-webkit-touch-callout: none) {
	.sidebarDivider {
		text-shadow:1px 1px 2px rgba(0, 0, 0, 0.15) !important;
	}
}

/* ======================== */
/* FEATURE                  */
/* ======================== */

#sidebarFeature {
	position:relative;
	z-index:1;
	margin-top:-70px;
	box-shadow:0px 3px 5px rgba(0,0,0,0.5);
	border-radius:5px;
	overflow:hidden;
	line-height:0;
}

#sidebarFeature:before {
	position:absolute;
	inset:0;
	box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(0, 0, 0, 0.2);
	background:radial-gradient(ellipse 75% 50% at 40% 0%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 95%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255, 255, 255, 0.1) 100%);
	content:"";
}

#sidebarFeature:after {
	position:absolute;
	inset:0;
	content:"";
}

#sidebarFeature:hover:after, #sidebarFeature:focus:after {
	background:rgba(255, 255, 255, 0.15);
}

#sidebarFeature:active:after {
	background:rgba(0, 0, 0, 0.15);
}

#sidebarFeature img {
	width:100%;
}

@media (max-width: 1000px) {
	#sidebarFeature {
		margin-top:unset !important;
	}
}

/* ======================== */
/* SOCIAL BUTTONS           */
/* ======================== */

.socialButton {
	display:flex;
	position:relative;
	flex:1 1 40%;
	align-items:center;
	box-shadow:0px 3px 5px rgba(0,0,0,0.5);
	border-radius:5px;
	padding:8px;
	min-width:120px;
	height:40px;
	overflow:hidden;
	color:var(--colTFLighter);
	font-size:16px;
	font-family:var(--fontBuild);
	text-decoration:none;
	text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}

.socialButton:before {
	position:absolute;
	inset:0;
	box-shadow:inset 2px 2px 3px rgba(255, 255, 255, 0.2), inset -2px -2px 3px rgba(0, 0, 0, 0.2);
	background:radial-gradient(ellipse 75% 50% at 40% 0%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 95%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255, 255, 255, 0.15) 100%);
	content:"";
}

.socialButton:after {
	position:absolute;
	inset:0;
	content:"";
}

.socialButton:hover:after, .socialButton:focus:after {
	background:rgba(255, 255, 255, 0.15);
}

.socialButton:active:after {
	background:rgba(0, 0, 0, 0.15);
}

.socialButton .icon {
	vertical-align:middle;
	filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
	width:20px;
}

/* ======================== */
/* SOCIAL BUTTON COLORS     */
/* ======================== */

.socialButton.forums {
	background:#145285;
}

.socialButton.discord {
	background:#5560D9;
}

.socialButton.twitter {
	background:#2B93D9;
}

.socialButton.bluesky {
	background:#235AEC;
}

.socialButton.youtube {
	background:#D5101F;
}

.socialButton.reddit {
	background:#E54D00;
}