/* 

Custom CSS for the /dev-journal section of the website.

Font: Fira Code
Background color: #253132
Text color: #dcd4b0
Selected text color: #74fbe3

*/

:root {
	--terminal-bg: #253132;
	--terminal-bg-light: #2a3738;
	--terminal-bg-dark: #1e2829;
	--terminal-text: #dcd4b0;
	--terminal-text-muted: #b8b096;
	--terminal-accent: #74fbe3;
	--terminal-border: #3a4a4b;
	--terminal-code-text: #f5f5f5;
}

/* Fira Code fonts now loaded globally via Tailwind - no need to duplicate here */

/* Override entire page styling for terminal look */
body {
	background-color: var(--terminal-bg) !important;
	color: var(--terminal-text) !important;
	font-family: 'Fira Code', 'Monaco', 'Menlo', monospace !important;
}

/* Header styling */
header {
	background-color: var(--terminal-bg) !important;
}

header a {
	color: var(--terminal-text) !important;
}

header a:hover {
	color: var(--terminal-accent) !important;
}

/* Navigation links */
nav a {
	color: var(--terminal-text) !important;
}

nav a:hover,
nav a.text-accent {
	color: var(--terminal-accent) !important;
}

/* Main content */
main {
	background-color: var(--terminal-bg) !important;
	color: var(--terminal-text) !important;
}

h1 {
	color: var(--terminal-accent) !important;
	font-family: 'Fira Code', monospace !important;
}

/* Intro text - using blockquote color for subtle text */
.intro-text,
.intro-text a {
	color: var(--terminal-text-muted) !important;
}

/* Journal entries styling */
details {
	border: 1px solid #3a4a4b;
	border-radius: 4px;
	padding: 6px 8px 4px 8px;
	background-color: #2a3738;
}

details summary {
	color: #74fbe3 !important;
	font-weight: bold;
	padding: 4px 0;
}

details summary:hover {
	color: #ffffff !important;
}

details[open] summary {
	border-bottom: 1px solid #3a4a4b;
	margin-bottom: 8px;
	padding-bottom: 8px;
}

details div {
	color: #dcd4b0 !important;
	line-height: 1;
}

/* Markdown content styling */
details h1,
details h2,
details h3,
details h4,
details h5,
details h6 {
	color: #74fbe3 !important;
	font-weight: bold !important;
	margin: 24px 0 4px 0;
	font-size: larger;
}

/* Add fake markdown # symbols */
details h1::before {
	content: "# ";
	color: #74fbe3;
}

details h2::before {
	content: "## ";
	color: #74fbe3;
}

details h3::before {
	content: "### ";
	color: #74fbe3;
}

details h4::before {
	content: "#### ";
	color: #74fbe3;
}

details h5::before {
	content: "##### ";
	color: #74fbe3;
}

details h6::before {
	content: "###### ";
	color: #74fbe3;
}

details p {
	margin: 4px 0;
	line-height: 1.6;
}

/* Reduce gap specifically between paragraphs and lists */
details p+ul,
details p+ol {
	margin-top: 0;
}

details ul,
details ol {
	margin: 0;
	padding-left: 20px;
	list-style-type: disc;
}

details li {
	margin: 0;
	list-style-type: disc;
	line-height: 1.6;
}

details code {
	background-color: #1e2829;
	padding: 2px 4px;
	border-radius: 2px;
	color: #f5f5f5;
	line-height: 1.4;
}

details pre {
	background-color: #1e2829;
	padding: 12px;
	border-radius: 4px;
	overflow-x: auto;
	margin: 8px 0;
	color: #f5f5f5;
}

details blockquote {
	border-left: 3px solid #74fbe3;
	padding-left: 12px;
	margin: 8px 0;
	color: #b8b096;
}

/* Selection color */
::selection {
	background-color: #74fbe3;
	color: #253132;
}

/* Footer styling */
footer {
	background-color: #253132 !important;
	color: #dcd4b0 !important;
}

footer ul,
footer li {
	color: #dcd4b0 !important;
}

footer a {
	color: #dcd4b0 !important;
}

footer a:hover {
	color: #74fbe3 !important;
}