* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 18px;
}

:root {
	--color-bg: #0f1115;           /* app background */
	--color-fg: #77849e /*#12151b*/;           /* main app surface wrapper */
	--color-surface: #171b22;      /* cards / panels */
	--color-surface-2: #1f2530;    /* inset/secondary surfaces */
	--color-brand: #d6a015; /* keep brand; reads well on dark */
	--color-brand-lighter: hsl(from var(--color-brand) h s calc(l + 20));
	--color-brand-darker: hsl(from var(--color-brand) h s calc(l - 20));
	--color-trim: #6b7280;         /* borders/dividers (muted gray) */
	--color-trim-hightlight: #8b93a3;

	/* Semantic colors tuned for dark backgrounds */
	--color-primary: #4da3ff;      /* lighten for contrast on dark */
	--color-primary-fg: #0b0e12;   /* dark text on bright primary */

	--color-secondary: #8b96a3;
	--color-secondary-fg: #0b0e12;

	--color-success: #45c16b;
	--color-success-fg: #08100a;

	--color-info: #34b3c7;
	--color-info-fg: #071013;

	--color-warning: #ffd166;
	--color-warning-fg: #0b0a07;

	--color-danger: #ff5b6b;       /* slightly brighter than #dc3545 for dark */
	--color-danger-fg: #10080a;

	/* Shadows: use softer, larger-radius shadows on dark */
	--subtle-shadow: 0 1px 2px #00000066, 0 6px 18px #00000033;

	--card-min-width: 366;


	--text-strong: #e6e9ef;      /* headings */
	--text: #cfd6df;             /* body text */
	--text-muted: #9aa3af;       /* secondary text */
	--color-link: #8cb9ff;             /* links on dark */
	--color-link-hover: #b7d2ff;


	--callout-note-fg: #e0f7ff;
	--callout-note-bg: #004a6e;

	--callout-warning-fg: #fff4e5;
	--callout-warning-bg: #663c00;

	--callout-info-fg: #e6ffed;
	--callout-info-bg: #004214;

	--callout-error-fg: #ffe6e6;
	--callout-error-bg: #660000;

	/*
	--callout-note-rgb: 0, 176, 255;
	--callout-success-rgb: 0, 200, 83;
	--callout-warning-rgb: 255, 145, 0;
	--callout-error-rgb: 255, 0, 0;
	--callout-quote-rgb: 158, 158, 158;
*/
}



body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";

    background-color: var(--color-bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

h1 {
    font-size: 2rem;
    color: var(--text-strong);
}

h2 {
	font-size: 1.75rem;
	color: var(--text-strong);
}

h3 {
	font-size: 1.5rem;
	color: var(--text-strong);
}

h4 {
	font-size: 1.25rem;
	color: var(--text-strong);
}

h5 {
	font-size: 1rem;
	color: var(--text-strong);
}

a {
	color: var(--color-link);
	text-decoration: none;
	transition: color 0.3s ease;
	&:hover {
	    color: var(--color-link-hover);
	}
	&.action-link {
	    cursor: pointer;
	    display: inline-block;
	    padding: 0.25rem 0.75rem 1.25rem 0.25rem;
	}
}

.site-header {
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-trim);
	box-shadow: var(--subtle-shadow);
	padding: 0.5rem 1rem;
	margin-bottom: 1rem;

	display: flex;
	flex-direction: row;
	align-items: left;
	position: relative;
	.logo {
		display: block;
		padding: 0;
		margin: 0;
		width: 45px;
	}
	h1 {
		color: var(--color-brand);
		font-size: 1.7rem;
	}
	.hamburger-menu {
		display: none;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		color: var(--color-brand);
		background: transparent;
		border: none;
		cursor: pointer;
		padding: 0;
	}
	/*
	.hamburger-menu span {
		width: 100%;
		height: 3px;
		background-color: var(--color-brand);
		border-radius: 10px;
		transition: all 0.3s linear;
	}
	*/
}


.empty-state {
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
}

.overall-container {
	display: flex;
	flex-direction: row;
	min-height: calc(100vh - 85px);
	container-type: layout;
}

.site-menu-container {
	flex: 0 0 250px;
}

.site-menu {
	width: 250px;
	background-color: var(--color-surface);
	border: 1px solid var(--color-trim);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	
	section {
		padding: .5rem;
		header {
			font-size: 1.1rem;
			font-weight: bold;
			color: var(--color-brand);
			margin-bottom: 0.5rem;
			padding-bottom: 0.25rem;
		}
		ul {
			list-style: none;
			padding-left: .5rem;
			li {
				margin: 0.5rem 0;
				a {
					display: block;
					color: var(--text);
					&:hover {
						color: var(--text-strong);
					}
				}
			}
		}
	}
}

/* Responsive styles */
@media (max-width: 768px) {
	.site-header .hamburger-menu {
		display: flex;
	}
	
	.site-menu-container {
		position: fixed;
		top: 85px;
		left: -250px;
		width: 250px;
		height: calc(100vh - 85px);
		background-color: var(--color-surface);
		border-right: 1px solid var(--color-trim);
		transition: left 0.3s ease;
		z-index: 1000;
	}
	
	.site-menu-container.active {
		left: 0;
	}
	
	.overall-container {
		flex-direction: column;
	}
	
	#main {
		width: 100%;
	}
}

#main {
	flex: 1 1 auto;
	min-height: calc(100vh - 85px);
	container-type: inline-size;
}

.article-roll {
	padding: 1rem;
	margin: 0 1rem 1rem 1rem;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	background-color: var(--color-surface);
	border: 1px solid var(--color-trim);
	border-radius: 4px;
	img {
		flex: 0 0 150px;
		border: 1px solid var(--color-trim);
		width: 150px;
		height: auto;
	}
	.summary {
		flex: 1 1 auto;
		margin-left: 1rem;
		header {
			font-size: 1.25rem;
			font-weight: bold;
			a {
				color: var(--color-brand);
				transition: color 0.3s ease;
				&:hover {
				    color: var(--color-brand-lighter);
				}
			}

		}
		p {
		}
	}

	.byline {
		font-size: 0.8rem;
		font-style: italic;
		color: var(--text-muted);
	}
}


@container (max-width: 635px) {
	.article-roll {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}


.article-view {
	padding: 1rem;
	margin: 0 1rem 1rem 1rem;
	background-color: var(--color-surface); 
	border: 1px solid var(--color-trim);
	border-radius: 4px;
	min-height: calc(100vh - 150px);
	.content {
		max-width: 800px;
		margin: 0 auto;

		header {
			margin-bottom: 0.5rem;
			font-size: 1.8rem;
			color: var(--color-brand);
			font-weight: bold;
		}
		.byline {
			font-size: 0.9rem;
			font-style: italic;
			color: var(--text-muted);
			margin-bottom: 1rem;
		}
		img.featured-image {
			max-width: 100%;
			border: 1px solid var(--color-trim);
			margin-bottom: 1rem;
		}
		p {
			margin-bottom: 1rem;
			line-height: 1.6;
		}

		ul {
			margin-bottom: 1rem;
			padding-left: 1.5rem;
		}
		li {
			margin-bottom: 0.5rem;
		}

		ol {
			margin-bottom: 1rem;
			padding-left: 1.5rem;
		}

		h2 {
			font-size: 1.5rem;
			margin-top: 1.5rem;
			margin-bottom: 0.5rem;
			color: yellow;
		}

		h3 {
			font-size: 1.25rem;
			margin-top: 1.5rem;
			margin-bottom: 0.5rem;
			color: green;
		}

		h4 {
			font-size: 1.1rem;
			margin-top: 1.5rem;
			margin-bottom: 0.5rem;
			color: cornflowerblue;

		}

		h5 {
			font-size: 1rem;
			margin-top: 1.5rem;
			margin-bottom: 0.5rem;
			color: var(--text-strong);
		}

		blockquote {
			border-left: 4px solid var(--color-trim);
			margin-left: 0;
			margin-right: 0;
			padding-left: 1rem;
			color: var(--text-muted);
			font-style: italic;
			background-color: var(--color-surface-2);
			margin-bottom: 1rem;
		}


	}

	code { 
		font-family: "Sans Mono", "Consolas", "Courier", monospace;
		span {
			font-family: "Sans Mono", "Consolas", "Courier", monospace;
		}
	}
}

details {
	padding: 0.8rem;
	border: 1px solid var(--color-trim);
	border-radius: 4px;
	margin: 1rem 0 1rem 0;

	summary {
		font-weight: bold;
		cursor: pointer;
	}


	p {
		margin-top: 0.5rem;
	}
	
	&[data-callout=info] {
		&>summary::before {
			content: "ⓘ ";
		}
		color: var(--callout-info-fg);
		background-color: var(--callout-info-bg);
	}

	&[data-callout=warning] {
		&>summary::before {
			content: "⚠ ";
		}
		color: var(--callout-warning-fg);
		background-color: var(--callout-warning-bg);
	}

	&[data-callout=danger] {
		&>summary::before {
			content: "⛔ ";
		}
		color: var(--callout-error-fg);
		background-color: var(--callout-error-bg);
	}

	&[data-callout=note] {
		&>summary::before {
			content: "🖉 ";
		}
		color: var(--callout-note-fg);
		background-color: var(--callout-note-bg);
	}
}

.home-link {
	display: flex;
	flex-direction: row;
	align-items: left;
	justify-content: center;
}

pre {
	margin: 1rem 0 1rem 0;
}