/**
 * ☆=========================================☆
 * Resources Page Css Styles
 * ☆=========================================☆
*/

body {
	margin: 0;
	margin-top: 1%;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.results {
	width: 95%;
	height: 85vh;
	border-style: solid;
	border-width: 1px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1%;
	scrollbar-color: var(--pink) var(--bg-color);
	scrollbar-width: medium;
}

.results::-webkit-scrollbar {
	width: 8px;
}
.results::-webkit-scrollbar-thumb {
	background-color: var(--cyan);
	border-radius: 4px;
}
.results::-webkit-scrollbar-track {
	background-color: var(--bg-color);
}

blockquote {
	margin: 6px 0;
	padding: 0;
	line-height: 1.4;
	transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

blockquote:hover {
	background-color: rgba(255, 0, 153, 0.12);
	transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

blockquote::before {
	content: '- ';
	margin-right: 6px;
}

h4 {
	font-size: 1rem;
}

a {
	color: rgb(255, 255, 255);
	font-weight: 500;
}

a:visited {
	color: rgb(255, 245, 153);
}

.project::before {
	content: '> ';
}

input[type='search'] {
	width: 100%;
	padding: 6px 8px;
	background-color: rgba(255, 255, 255, 0.03);
	color: inherit;
	outline: transparent;
}
input[type='search']::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

/* Two-column layout */
.container {
	width: 95%;
	height: 90vh;
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
}

.sidebar {
	width: 28%;
	min-width: 180px;
	max-width: 340px;
}

.content {
	flex: 1 1 80%;
}

.search-wrap {
	margin-bottom: 0.8rem;
}

.guide {
	border-color: white;
	border-style: solid;
	border-width: 1px;
	padding: 8px;
	height: 80vh;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-color: var(--pink) var(--bg-color);
}

.guide-title {
	font-size: 0.9rem;
	margin: 0 0 6px 0;
}

#guide-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#guide-list .guide-item {
	padding: 6px 8px;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s;
	min-height: 36px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#guide-list .guide-item:hover {
	background-color: rgba(255, 255, 255, 0.03);
}
#guide-list .guide-item.active {
	background-color: rgba(100, 203, 255, 0.12);
}

.section {
	margin-bottom: 12px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.section-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 6px;
	cursor: pointer;
	min-height: 36px;
}
.section-header:focus {
	outline: 2px solid rgba(100, 203, 255, 0.18);
}
.section-title {
	font-size: 1rem;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.section-body {
	padding-left: 8px;
}

/* small chevron indicator */
.section-header::before {
	content: '▾';
	display: inline-block;
	width: 1.2em;
	text-align: center;
	transform-origin: center;
	transition: transform 0.15s;
	font-size: 0.9rem;
}
.section-header[aria-expanded='false']::before {
	transform: rotate(-90deg);
}

/* search match highlight */
.search-match {
	background-color: rgba(255, 255, 153, 0.22);
	color: #111;
	border-radius: 0;
	padding: 0;
}

.match {
	background-color: rgba(255, 255, 153, 0.08);
}

@media (max-width: 800px) {
	.container {
		flex-direction: column;
	}
	.sidebar {
		display: none;
	}
	.results {
		height: 85vh;
		width: 100%;
	}
}