/**
 * sidebar.css
 *
 * Copyright (c) 2000-2012 John Willinsky
 * Distributed under the GNU GPL v2. For full terms see the file docs/COPYING.
 *
 * Site-wide shared elements for pages including sidebar(s).
 *
 * Responsive refresh: #body becomes a flex row with #sidebar unwrapped
 * (display:contents) so #leftSidebar/#rightSidebar and #main all become
 * direct flex siblings that can be reliably ordered left/main/right
 * regardless of which sidebar(s) are present. leftSidebar.css/
 * rightSidebar.css set each column's width; this file sets the shared
 * flex behavior and stacks everything on mobile.
 */

#body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2em;
}

#sidebar {
	display: contents;
}

#main {
	order: 2;
	flex: 1 1 0%;
	min-width: 0;
}

/**
 * Sidebar block styling
 */

#developedBy {
	text-transform: uppercase;
	font-size: 0.8em;
	color: var(--color-text-muted, #5b6473);
}

#sidebar div.block {
	font-size: 0.95em;
	padding-bottom: 1.5em;
}

#sidebar div.block span.blockTitle {
	display: block;
	padding: 0.5em 0;
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-muted, #5b6473);
	border-bottom: 2px solid var(--color-border, #dde1e7);
}

#sidebar div.block span.blockSubtitle {
	display: block;
	padding: 0;
}

#sidebar input.textField, #sidebar select.selectMenu, #sidebar input.button {
	font-size: 0.95em;
}

@media (max-width: 768px) {
	#body {
		flex-direction: column;
		gap: 0;
	}

	#main {
		order: 1;
		width: 100%;
	}

	#leftSidebar, #rightSidebar {
		order: 2;
		width: 100% !important;
		flex-basis: auto !important;
		margin: 0 !important;
	}
}