/*  Sin and Sandals — dark grunge style for phpBB 3.3
    Layout comes from prosilver's own files; every colour comes from
    colours-dark.css (a complete dark translation of prosilver's
    colours.css). Below the imports: header layout only.
*/

@import url("../../prosilver/theme/normalize.css");
@import url("../../prosilver/theme/base.css");
@import url("../../prosilver/theme/utilities.css");
@import url("../../prosilver/theme/common.css");
@import url("../../prosilver/theme/links.css");
@import url("../../prosilver/theme/content.css");
@import url("../../prosilver/theme/buttons.css");
@import url("../../prosilver/theme/cp.css");
@import url("../../prosilver/theme/forms.css");
@import url("../../prosilver/theme/icons.css");
@import url("colours-dark.css");
@import url("../../prosilver/theme/responsive.css");

/* ==========================================================
   Header: logo left, nav rows tight beside it, search right
   (navbar include was moved inside .headerbar in the template)
   ========================================================== */

.headerbar, .headerbar .inner {
	overflow: visible;
}

.headerbar .inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding: 12px 16px;
}

#site-description {
	order: 1;
	flex: 0 0 auto;
	float: none;
	margin: 0;
}

/* Hide the text site-name/description; the logo carries them */
.site-description h1,
.site-description > p:not(.skiplink) {
	display: none;
}

a.logo, .logo {
	display: block;
	padding: 0;
}

.site_logo {
	display: block;
	margin: 0;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	width: 260px;
	height: 116px;
}

/* Nav sits right next to the logo, not stretched across */
.headerbar .navbar {
	order: 2;
	flex: 0 1 auto;
	min-width: 0;
	background: transparent none;
	margin: 0;
	padding: 0;
}

.headerbar .navbar .inner {
	display: block;
	padding: 0;
}

/* Keep the two nav rows compact and left-aligned: the member links
   (notifications/PMs/profile) follow the quick links instead of
   floating to the far edge */
.headerbar .navbar .linklist > li.rightside {
	float: left;
}

.headerbar .navbar .linklist {
	padding: 2px 0;
}

/* Search goes to the far right on its own */
#search-box.search-header {
	order: 3;
	flex: 0 0 auto;
	float: none;
	position: static;
	margin: 0 0 0 auto;
}

/* Hide the "It is currently <date>" line */
p.time:not(.rightside) {
	display: none;
}

/* ==========================================================
   Small-screen adjustments
   ========================================================== */

@media (max-width: 900px) {
	#search-box.search-header {
		display: none;
	}
}

@media (max-width: 700px) {
	.headerbar .inner {
		display: block;
		padding: 10px;
	}

	#site-description {
		text-align: center;
	}

	.site_logo {
		width: 180px;
		height: 80px;
		margin: 0 auto;
		background-position: center;
	}

	.headerbar .navbar .linklist > li.rightside {
		float: right;
	}
}

/* ==========================================================
   Finishing touches
   ========================================================== */

::selection {
	background: #4a4131;
	color: #f5ecd4;
}

::-webkit-scrollbar {
	width: 12px;
	background: #0a0908;
}

::-webkit-scrollbar-thumb {
	background: #2b261e;
	border-radius: 6px;
}