/* Theme System - CSS Custom Properties */
:root {
	border: 0px;
	
	/* Default Theme: Dark Blue */
	--bg-primary: #121C26;
	--bg-secondary: #1a2634;
	--bg-header: #28415b;
	--bg-button: #1E2A35;
	--bg-button-disabled: #2a2b42;
	
	--text-primary: #FFFFFF;
	--text-secondary: #c0c0c0;
	--text-faded: rgba(255, 255, 255, 0.6);
	--text-disabled: #777777;
	
	--accent-primary: #7195b0;
	--accent-secondary: #6ca5c0;
	--border-primary: #7195b0;
	--border-secondary: #28415b;
	--border-disabled: #444444;
}

/* Light Mode Theme */
[data-theme="light"] {
	--bg-primary: #f5f5f5;
	--bg-secondary: #ffffff;
	--bg-header: #e0e7ed;
	--bg-button: #d0d8e0;
	--bg-button-disabled: #e8e8e8;
	
	--text-primary: #1a1a1a;
	--text-secondary: #4a4a4a;
	--text-faded: rgba(0, 0, 0, 0.5);
	--text-disabled: #999999;
	
	--accent-primary: #4a6b85;
	--accent-secondary: #2b7a9e;
	--border-primary: #b0c4d4;
	--border-secondary: #d0dce6;
	--border-disabled: #cccccc;
}

/* True Dark (OLED) Theme */
[data-theme="true-dark"] {
	--bg-primary: #000000;
	--bg-secondary: #0f0f0f;
	--bg-header: #1a1a1a;
	--bg-button: #0f0f0f;
	--bg-button-disabled: #1f1f1f;
	
	--text-primary: #e0e0e0;
	--text-secondary: #b0b0b0;
	--text-faded: rgba(255, 255, 255, 0.5);
	--text-disabled: #666666;
	
	--accent-primary: #5a8aa8;
	--accent-secondary: #4a9ac0;
	--border-primary: #3a3a3a;
	--border-secondary: #2a2a2a;
	--border-disabled: #333333;
}

/* Sepia/Warm Theme */
[data-theme="sepia"] {
	--bg-primary: #f4ecd8;
	--bg-secondary: #faf6eb;
	--bg-header: #d9c9a8;
	--bg-button: #d4c5a8;
	--bg-button-disabled: #e5dcc8;
	
	--text-primary: #3a2f1f;
	--text-secondary: #5a4f3f;
	--text-faded: rgba(58, 47, 31, 0.5);
	--text-disabled: #999988;
	
	--accent-primary: #8b7355;
	--accent-secondary: #a67c52;
	--border-primary: #bfaa8d;
	--border-secondary: #d9c9a8;
	--border-disabled: #ccbb99;
}

/* High Contrast Theme */
[data-theme="high-contrast"] {
	--bg-primary: #000000;
	--bg-secondary: #000000;
	--bg-header: #000000;
	--bg-button: #000000;
	--bg-button-disabled: #1a1a1a;
	
	--text-primary: #FFFFFF;
	--text-secondary: #FFFFFF;
	--text-faded: rgba(255, 255, 255, 0.8);
	--text-disabled: #888888;
	
	--accent-primary: #FFFF00;
	--accent-secondary: #00FF00;
	--border-primary: #FFFFFF;
	--border-secondary: #FFFFFF;
	--border-disabled: #666666;
}

body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	max-width: none;
	padding: 0px;
}

header {
	font-size: 1.1em;
	background-color: var(--bg-header);
	padding: 10px;
	border-bottom: 3px solid var(--border-primary);
}

nav {
	font-size: 1.25em;
	margin-top: 10px;
	margin-bottom: 10px;
}

select {
	background-color: var(--bg-button);
	color: var(--text-primary);
	border: 1px solid var(--border-primary);
	padding: 2px 5px;
	border-radius: 3px;
	cursor: pointer;
}

select:focus {
	outline: 2px solid var(--accent-secondary);
	outline-offset: 1px;
}

main {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

h1 {
	text-align: center;
}

a {
	color: var(--accent-secondary);
}

button {
	background-color: var(--bg-button);
	color: var(--text-primary);
	border: 1px solid var(--border-primary);
	padding: 5px;
}

button + button {
	margin-left: 2px;
}

button:disabled {
	background-color: var(--bg-button-disabled);
	color: var(--text-disabled);
	border: 1px solid var(--border-disabled);
}

hr {
	margin: 0px;
}

.faded {
	opacity: 0.6;
}

.content {
	margin: 20px;
	padding-bottom: 10px;
}

.main-title {
	margin-bottom: 5px;
}

.main-subtitle {
	margin: 0px;
}

.padded-sides {
	padding-left: 10px;
	padding-right: 10px;
}

.snug {
	margin-top: 5px;
	margin-bottom: 5px;
}

/* Blog Sort Bar */
.blog-sort-bar {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-secondary);
	padding: 10px 5px;
	margin-bottom: 0;
}

.blog-sort-bar label {
	margin-right: 10px;
	font-weight: 500;
}

/* Layout with Sidebar */
.page-container {
	display: flex;
	max-width: 1200px;
	margin: 0 auto;
	gap: 20px;
	padding: 0 10px;
}

.main-content {
	flex: 1;
	min-width: 0; /* Prevents flex item from overflowing */
}

.sidebar {
	width: 250px;
	flex-shrink: 0;
	background-color: var(--bg-secondary);
	padding: 15px;
	border-radius: 5px;
	border: 1px solid var(--border-secondary);
	height: fit-content;
	position: sticky;
	top: 20px;
}

.sidebar-section {
	margin-bottom: 25px;
}

.sidebar-section:last-child {
	margin-bottom: 0;
}

.sidebar-section h3 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 1.1em;
	color: var(--accent-primary);
	border-bottom: 1px solid var(--border-secondary);
	padding-bottom: 5px;
}

.sidebar-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.sidebar-list li {
	margin-bottom: 8px;
}

.sidebar-post {
	margin-bottom: 10px;
	font-size: 0.95em;
	line-height: 1.4;
}

/* Theme Switcher in Sidebar */
#theme-selector {
	width: 100%;
	padding: 8px;
	font-size: 1em;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	border: 1px solid var(--border-secondary);
	border-radius: 4px;
	cursor: pointer;
}

#theme-selector:hover {
	border-color: var(--link-color);
}

#theme-selector:focus {
	outline: 2px solid var(--link-color);
	outline-offset: 2px;
}

.sidebar-note {
	font-size: 0.85em;
	margin-top: 8px;
	margin-bottom: 0;
}

/* Responsive: Stack sidebar on mobile */
@media (max-width: 768px) {
	.page-container {
		flex-direction: column;
	}
	
	.sidebar {
		width: 100%;
		position: static;
		margin-top: 20px;
	}
}