/*  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?v=2");
@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;
	width: auto; /* prosilver hardcodes 65%, which hogs the flex row */
}

/* 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 lives on the breadcrumb (Board index) row, right side
   (moved there in navbar_header.html) */
.nav-breadcrumbs .header-search {
	margin: 0;
}

.nav-breadcrumbs .search-box {
	float: none;
	margin: 0;
}

/* Hide the timestamp lines ("It is currently…", "Last visit was…")
   and the "Mark forums read" line */
p.time {
	display: none;
}

p:has(> a.mark-read) {
	display: none;
}

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

@media (max-width: 700px) {
	/* Phones get prosilver's compact search icon instead of the full box */
	.nav-breadcrumbs .header-search {
		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;
	}
}

/* Site description: full-width band under the header, visible at
   every resolution */
.site-blurb {
	background: #0d0b09;
	border-bottom: 1px solid #2b261e;
	color: #918673;
	font-size: 0.95em;
	line-height: 1.5;
	text-align: center;
}

.site-blurb p {
	max-width: 1000px;
	margin: 0 auto;
	padding: 10px 16px;
}

.site-blurb a {
	color: #d9c9a4;
	font-weight: bold;
	white-space: nowrap;
}

.site-blurb a:hover {
	color: #f0e4c8;
}

/* Forum icons are a 128px PNG (the circle-cropped S logo);
   scale them down to fit the row like the original gifs.
   dl-prefixed to outrank dl.row-item's own background-size */
dl.forum_read, dl.forum_read_locked, dl.forum_read_subforum, dl.forum_link,
dl.forum_unread, dl.forum_unread_locked, dl.forum_unread_subforum {
	background-size: 36px 36px;
}

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

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

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

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