/* COLOR SCHEME /*

/* Default (dark mode) */
:root {
	--bg: #2a2a2a;
	--fg: #ccc;
	--grey1: #999;
	--black: #1a1a1a;
	--red: #a66966;
	--green: #91a666;
	--yellow: #a69c66;
	--blue: #6677a6;
	--magenta: #9a66a6;
	--cyan: #66a6aa;
	--accent: var(--green);
	--accentfg: var(--bg);
	--accenthv: var(--grey1);
	font-size: 16px;
}

/* Light mode overrides */
@media (prefers-color-scheme: light) {
	:root {
		--bg: #eee;
		--fg: #2a2a2a;
		--black: #a1a1a1;
		/* No need to redefine colors that remain the same */
	}
}

/* PAGE CONTENTS */

body {
	background-color: var(--bg);
	color: var(--fg);
	margin: 0;
	padding: 0;
	padding-bottom: 3rem;
	font-family:"Sans";
}

html, body {
	min-height: 99vh;
	position: relative;
}

a {
	text-decoration: none;
	color: var(--accent);
}
a:hover {
	text-decoration: none;
	color: var(--accenthv);
}

table {
	margin: 0 auto;
	width: 95%;
	border-collapse: collapse;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

th, td {
	padding: 12px 15px;
	border: 1px solid var(--grey1);
	text-align: left;
}

thead {
	background-color: var(--accent);
	color: var(--accentfg);
}

tbody tr:nth-child(even) {
	background-color: var(--black);
}

/*-*/


/* TOP PANEL STYLES */

.toppanel {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background-color: var(--black);
	height: 3rem;
	position: relative;
}

.tp-banner {
	height: 1.3rem;
}

.tp-left {
	display: flex;
	align-items: center;
	padding-left: 1vw;
}

.tp-right {
	display: flex;
	align-items: center;
	padding-right: 1vw;
}

/* Navigation styles */
/* Hide checkbox */
.burger-checkbox, .dropdown-checkbox {
	display: none;
}

/* Burger menu styles */
.burger-menu {
	display: none;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 22px;
	margin-right: 15px;
	z-index: 2;
}

.burger-menu span {
	display: block;
	height: 3px;
	width: 100%;
	background-color: var(--fg);
	border-radius: 2px;
	transition: all 0.3s ease;
}

/* Desktop styles */

.tp-nav {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tp-nav a {
	text-decoration: none;
	color: var(--fg)
}

.tp-nav a:hover {
	color: var(--accent)
}

.tp-nav li {
	display: inline-block;
	text-align: left;
	margin: 0 1vw 0 1vw;
}

.tp-dropdown {
	position: relative;
}

.tp-dropdown-elements {
	display: none;
	position: absolute;
	background-color: var(--black);
	min-height:1.3rem;
	z-index: 1;
	list-style: none;
	padding: 0;
}

.tp-dropdown-elements li {
	margin: 0 0px;
	min-height: 2rem;
}

.tp-dropdown-elements li a{
	margin: 0 10px;

}


.tp-dropdown:hover .tp-dropdown-elements {
	display: block;
}

/*-*/


/* SEARCHBOX */


input[type="text"] {
	flex: 1 1 auto;
	font-size: 1.1rem;
	min-width: 0;
	background-color: var(--black);
	color: var(--fg);
	border-radius: 9px 9px 9px 9px;
	border: none;
	height: 3rem;
}

.search-box
{
	display:flex;
	width: 90%;
	margin: 0 auto;
	flex-direction: column;
	margin: 0 auto 0 0;
}


/*-*/


/* MAIN CONTAINER */

#main-container {
	display: flex;
	padding-top: 2rem;
	width: 100%;

	justify-content: center;
}


/*-*/


/*LEFT SIDE*/

#left-container {
	width: 10%;
	padding: 0 0vw 0;
	margin-left: 0vw;
}

.leftpane-portraitscreen {
	display: none;
}


/*-*/


/*CENTER SIDE (POST CONTENT)*/

.post {
	text-align: justify;
	display: flex;
	flex-wrap: wrap;
	overflow: auto;
	word-wrap: break-word;
	word-break: break-word;
	flex-direction: column;
	align-items: start;
	align-self: stretch;
	width:100%;
	box-sizing: border-box;
}

.post figcaption {
	display: flex;
	margin: 0 auto;
	justify-content: space-evenly;
	color: var(--grey1);
}

blockquote {
	color: var(--accenthv);
	border-left: 4px solid var(--accenthv);
	background-color: var(--black);
	border-radius: 6px;
	padding: 0 1rem 0 1rem;
}

.post-postdate h3 {
	position: relative;
	top: -1rem;
	margin-bottom: 1rem;
	color: var(--grey1);
}
.post-postcontent {
	max-width: 95%;
	text-align: justify;
}

.post-postcontent img {
	object-fit: contain;
	width: 75%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.post-posttitle {
	max-width: 95%;
	text-align: justify;
}

.language-plaintext.highlighter-rouge {
	background-color: var(--black);
	font-family: monospace;
	border-radius: 5px;
	padding: 1px;
}

.highlight {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.highlight pre {
	background-color: var(--black);
	font-family: monospace;
	padding: 1em;
	border-radius: 5px;
	overflow-x: auto;
	max-width: 90vw;
	box-sizing: border-box;
}


hr.endseparator {
	background-color: white; /* sets the color of the line */
	width: 95%;
	height: 2.6px;
	margin-left: 0;
	border: none; /* remove default border */
}

.btnshare {
	display: inline-block;
	position: relative;
	width: 100%;
}
#toggleshare {
	display: none;
}
label[for="toggleshare"] {
	display: inline-block;
	padding: 7px 16px;
	margin: 0vw 0vh 0vh 1vw;
	max-width: 95%;
	background: var(--accent);
	color: var(--accentfg);
	cursor: pointer;
	border-radius: 5px;
	user-select: none;
}
.urlshare {
	display: none;
	padding: 8px;
	margin: 0vw 0vh 0vh 1vw;
	max-width: 95%;
}
#toggleshare:checked + label {
	display: none;
}
#toggleshare:checked ~ .urlshare {
	display: inline-block;
	width: 100%;
}

.post-navigation {
	display: flex;
	flex-direction: row;
	width: 95%;
	justify-content: space-between;
	gap: 10vw;
}

.userbox {
	display: flex;
	align-items: flex-start;
	border: 3px solid var(--fg);
	border-radius: 5px;
	margin: 2vw 0vh 0vh 1vw;
	max-width: 95%;
	font-family: sans-serif;
	position: relative;
}

.userpic {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
	margin-right: 16px;
}

.userbox-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.userbox-content h1 {
	margin: 0;
	font-size: 1.5em;
}

.userbox-content h3 {
	margin: 4px 5px 12px 0;
	font-weight: normal;
	color: #666;
}

.userbox a {
	display: block;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--fg);
	text-decoration: none;
	color: var(--accent);
	font-weight: bold;
}
.userbox a:hover {
	color: var(--grey1);
}


/*-*/


/* CENTER SIDE (POST LIST) */

.posts-container {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
	gap: 2vw;
	padding: 0 1vw 0 1vw;
}
.chapters-container {
	width: 90%;
	display: grid;
	gap: 1rem;
	padding: 2vh 2vw 2vh 0vw;
	align-content: start;
	justify-items: center;
}


.post-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
	background-color: var(--black);
}

.post-card:hover {
	transform: translateY(-5px);
	color: var(--accent);
}

.post-card:hover h2 {
	color: var(--acent);
}

.post-image-wrapper {
	position: relative;
	width: 100%;
	/* padding-top: 56.25%; /* 16:9 aspect ratio (9 / 16 * 100%) */
	/* padding-top: 75%; /* 4:3 aspect ratio (9 / 16 * 100%) */
	padding-top: 52.36%; /* 1.91:1 aspect ratio (OG:Image standard) */
	overflow: hidden;
	border-radius: 8px 8px 0 0;
}

.post-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-info {
	padding: 1.5rem;
}

.post-date {
	color: var(--grey1);
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}

.post-title {
	margin: 0;
	font-size: 1.2rem;
	color: var(--fg);
}

.post-labels {
	margin: 0;
	font-size: 0.7rem;
	color: var(--grey1);
}

.post-link {
	text-decoration: none;
}

.pagination-controls {
	grid-column: 1 / -1;
	justify-self: center; 
	width: fit-content;
}

.pagination-controls a {
	text-decoration: none;
	border: 1px solid var(--grey1);
	padding: 4px 8px;
	margin: 0 4px;
	display: inline-block;
	color: var(--fg);
	border-radius: 4px;
}

.pagination-controls a:hover {
	background-color: var(--accent);
	color: var(--accentfg);
}


.error-message {
	color: #d32f2f;
	padding: 1rem;
	text-align: center;
}


/*-*/


/* RIGHT PANE */

#right-container {
	width: 20%;
	padding: 0 0vw 0;
	margin-left: 0vw;
/* Uncomment this if you want sticky behavior
	position: sticky;
	top: 0;
	align-self: flex-start;
*/

}


form {
	width: 100%;
	display: flex;
	overflow: hidden;
	flex-wrap: nowrap;
}

button {
	padding: 10px 20px;
	font-size: 1rem;
	flex-shrink: 0;
	color: #2a2a2a;
	border: none;
	border-radius: 0px 9px 9px 0px;
	background-color: var(--accent);
}

.rightpaneposts {
	width: 75%
}

.rp-post-title {
	margin: 0;
	font-size: 1.1rem;
}

.rp-post-link {
	text-decoration: none;
	color: var(--fg);
}

.rp-post-link:hover {
	text-decoration: none;
	color: var(--accent);
	font-size: 0.9rem;
}


/*-*/


/*BOTTOM PANE (FOOTER)*/


.bottompane {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--black);
	z-index: 1000;
}


.bp-left {
	display: flex;
	align-items: center;
	padding-left: 1vw;
}

.bp-right {
	display: flex;
	align-items: center;
	padding-right: 1vw;
}

/* Navigation styles */
.bp-nav {
	display: flex;
	list-style: none;
	color: var(--fg);
}

.bp-nav li {
	margin-left: 20px;
	color: var(--fg);
}
.bp-nav a {
	color: var(--fg);
	text-decoration: none;
}
.bp-nav a:hover {
	color: var(--accent);
	text-decoration: none;
}

/* Dropdown styles */
.bp-dropdown {
	position: relative;
}

.bp-dropdown-elements {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background-color: var(--background);
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	padding: 10px 0;
	list-style: none;
	min-width: 150px;
}

.bp-dropdown:hover .tp-dropdown-elements {
	display: block;
}

.bp-dropdown-elements li {
	margin: 0;
	background-color: var(--black);
	color: var(--fg);
}

.bp-dropdown-elements li:hover {
	background-color: var(--accentfg);
}

.bp-dropdown-elements a {
	display: block;
	padding: 8px 15px;
}


.search-results {
	list-style: none;
	padding: 0;
	margin: 0.5em 0;
}

.search-results li {
	margin: 0.4em 0;
}

.search-results li a {
	display: block;
	padding: 0.75em 1em;
	background-color: var(--black);
	color: var(--fg);
	text-decoration: none;
	border-radius: 8px;
	font-weight: 500;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.search-results li a:hover {
	background-color: var(--accent);
	color: var(--accentfg);

}

.search-results li a:active {
	transform: scale(0.98);
}


/* PORTRAIT SCREEN CHANGES*/
@media only screen and (max-aspect-ratio: 1/1) {
	body {
		background-color: var(--bg);
		color: var(--fg);
		margin: 0;
		padding: 0;
		padding-bottom: 9rem;
		font-family: "Sans";
	}

	.search-box
	{
		display:flex;
		width: 90%;
		margin: 0 auto;
		flex-direction: column;
		margin: 0 auto;
	}

	.bottompane {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 7rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--black);
		z-index: 1000;
		flex-direction: column;
	}

	.burger-menu {
		display: flex;
	}

	/* Hide menu by default on mobile */
	.tp-right {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--black);
		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		z-index: 1;
	}

	/* Show menu when burger checkbox is checked */
	#burger-toggle:checked ~ .tp-right {
		display: block;
	}

	.tp-nav {
		flex-direction: column;
		width: 100%;
	}


	.tp-nav li {
		width: 100%;
		text-align: left;
		padding: 15px;
		border-bottom: 1px solid var(--bg);
	}

	/* Handle dropdown on mobile */
	.tp-dropdown-elements {
		display: none;
		position: static;
		box-shadow: none;
		padding-left: 15px;
		margin-top: 10px;
	}

	/* Show dropdown when its checkbox is checked */
	#social-toggle:checked ~ .tp-dropdown-elements {
		display: block;
	}

	/* Override hover behavior on mobile */
	.tp-dropdown:hover .tp-dropdown-elements {
		display: none;
	}

	/* Label for dropdown toggle */
	.tp-dropdown label {
		display: block;
		cursor: pointer;
	}

	#main-container {
		display: flex;
		flex-direction: column;
		padding-top: 2rem;
		width: 100vw;
		max-width: 100vw;
		justify-content: space-between;
		align-items: center;
	}

	.post-posttitle {
		max-width: 95%;
		text-align: left;
	}

	.post {
		margin: 0 auto;
		text-align: justify;
		display: flex;
		flex-wrap: wrap;
		overflow: auto;
		word-wrap: break-word;
		word-break: break-word;
		flex-direction: column;
		align-items: start;
		width: 90vw;
		max-width: 90vw;
	/*
		overflow-x: hidden;
	*/
		box-sizing: border-box;
	}
	.post-postcontent {
		max-width: 100%;
		text-align: justify;
	}

	.post-postcontent img {
		object-fit: contain;
		width: 100%;
	}

	.post-postcontent h2 {
		display: block;
		text-align: center;
	}
	.post-postcontent h3 {
		display: block;
		text-align: left;
	}
	.post-postcontent strong {
		text-align: left;
		display: inline-block;
	}

	.post-navigation {
		flex-direction: column;
		gap: 1rem;
	}

	#left-container {
		width: 90%;
		padding: 0 0vw 0;
		margin-left: 0vw;
		padding-bottom: 1rem;
	}

	.leftpane-landscapescreen {
		display: none;
	}

	.leftpane-portraitscreen {
		display: block;
	}

	.posts-container {
		width: 90%;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(60%, 1fr));
		gap: 2vw;
		padding: 0 0 0 0vw;
	}

	.pagination-controls {
		margin-top: 1rem;
		grid-column: 1 / -1;
		justify-self: center; 
		width: fit-content;
	}

	.pagination-controls a {
		font-size: 1.3rem;
		text-decoration: none;
		border: 2px solid var(--grey1);
		padding: 4px 8px;
		margin: 0 4px;
		display: inline-block;
		color: var(--fg);
		border-radius: 4px;
	}

	#right-container {
		width: 90%;
		padding: 0 0vw 0;
		margin-left: 0vw;
	}

}