/* ==========================================================================
1. CSS Custom Properties (Variables)
========================================================================== */

:root {
	/* Page colors */
	--page-background-light: #fff;
	--page-background-dark: #222;
	
	/* Text colors */
	--default-text-light: #666666;  
	--default-text-dark: #b8b8b8;  
	--header-description-light: #888888;  /* lighter than default text */
	--header-description-dark: #888888;   /* lighter than dark mode text */
	--ui-subtle-light: #767676;  /* used for secondary text */
	--ui-subtle-dark: #999;      /* used for secondary text dark */
	--header-color-light: #333;     /* darker than body text for emphasis */
	--header-color-dark: #e0e0e0;   /* lighter than body text for emphasis */
	--post-title-light: #444;       /* darker than body, but not as dark as header */
	--post-title-dark: #d3d3d3;     /* lighter than body, but not as light as header */
	
	/* Border Colors */
	--border-color-light: #e0e0e0;  /* much lighter, subtle border for light mode */
	--border-color-dark: #444;      /* slightly lighter than background for dark mode */
	
	/* Button Colors */
	--button-color-light: #efefef;
	--button-color-dark: #333;
	
	/* Link Colors */
	--link-color-light: #2962ff;      /* bright blue */
	--link-color-dark: #82b1ff;       /* light blue for dark mode */
	--link-visited-light: #5829ff;    /* distinctly purple but still web-friendly */
	--link-visited-dark: #a374ff;     /* lighter purple for dark mode */
	--link-active-light: #0039cb;
	--link-active-dark: #448aff;
	--header-link-light: #4285f4;     /* lighter blue for header links */
	--header-link-dark: #8ab4f8;      /* even lighter blue for header links in dark mode */
	
	/* Spacing */
	--space-xs: 5px;
	--space-sm: 10px;
	--space-md: 1em;
	--space-lg: 2em;
	--space-xl: 7rem;
	--space-base: 1rem;
	
	/* Typography */
	--font-size-small: 0.8em;
	--font-size-base: 16px;
	--font-size-base-mobile: 14px;
	--font-size-h1: 1.3em;
	--font-size-h2: 1.1em;
	--font-size-h3: 1em;
	--font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	
	/* Font Weights */
	--font-weight-normal: 400;
	--font-weight-bold: 600;
	
	/* Line Heights */
	--line-height-tight: 100%;
	--line-height-base: 1.7;
	
	/* Borders */
	--border-radius: 8px;
	--border-width: 1px;
	--border-style: solid;
	
	/* Layout */
	--container-max-width: 75ch;
	--breakpoint-mobile: 640px;
	--aspect-ratio-video: 56.25%;  /* 16:9 aspect ratio */
	--width-full: 100%;
	--height-full: 100%;
	--align-baseline: baseline;
	--align-center: center;
	--align-start: flex-start;
}

/* ==========================================================================
2. Base Typography
========================================================================== */

body {
	background-color: var(--page-background-light);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--default-text-light);
	font-weight: var(--font-weight-normal);
	font-family: var(--font-family-system);
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--page-background-dark);
		color: var(--default-text-dark);
	}
}

/* Default link styles */
a {
	text-decoration: underline;
	color: inherit;
	transition: opacity 0.2s ease-in-out;
}

a:hover, a:active {
	text-decoration: underline;
	color: inherit;
	opacity: 0.7;
}

/* Post link styles */
.post a {
	color: var(--link-color-light);
	text-decoration: none;
	border-bottom: var(--border-width) var(--border-style) var(--link-color-light);
	transition: opacity 0.2s ease-in-out;
}

.post a:visited {
	color: var(--link-visited-light);
	border-bottom-color: var(--link-visited-light);
}

.post a:hover,
.post a:active {
	color: var(--link-active-light);
	border-bottom-color: var(--link-active-light);
	opacity: 0.7;
}

/* Short link styles */
.index-short-link .short-link-title {
	margin-bottom: var(--space-xs);
	font-weight: var(--font-weight-bold);
}

.index-short-link .short-link-title .short-link-domain {
	font-weight: var(--font-weight-normal);
	color: var(--ui-subtle-light);
	font-size: var(--font-size-small);
}

.index-short-link .title,
.index-short-link .post {
	display: inline;
}

.index-short-link .title a,
.index-short-link .content a {
	color: var(--link-color-light);
	text-decoration: none;
	border-bottom: var(--border-width) var(--border-style) var(--link-color-light);
	transition: opacity 0.2s ease-in-out;
}

.index-short-link .title a:visited,
.index-short-link .content a:visited {
	color: var(--link-visited-light);
	border-bottom-color: var(--link-visited-light);
}

.index-short-link .title a:hover,
.index-short-link .title a:active,
.index-short-link .content a:hover,
.index-short-link .content a:active {
	color: var(--link-active-light);
	border-bottom-color: var(--link-active-light);
	opacity: 0.7;
}

/* Archive link styles */
.archive-months a {
	color: var(--link-color-light);
	text-decoration: none;
	border-bottom: var(--border-width) var(--border-style) var(--link-color-light);
	transition: opacity 0.2s ease-in-out;
}

.archive-months a:visited {
	color: var(--link-visited-light);
	border-bottom-color: var(--link-visited-light);
}

.archive-months a:hover,
.archive-months a:active {
	color: var(--link-active-light);
	border-bottom-color: var(--link-active-light);
	opacity: 0.7;
}

/* Dark mode link overrides */
@media (prefers-color-scheme: dark) {
	.post a {
		color: var(--link-color-dark);
		border-bottom-color: var(--link-color-dark);
	}
	
	.post a:visited {
		color: var(--link-visited-dark);
		border-bottom-color: var(--link-visited-dark);
	}
	
	.post a:hover,
	.post a:active {
		color: var(--link-active-dark);
		border-bottom-color: var(--link-active-dark);
		opacity: 0.7;
	}
	
	.index-short-link .title a,
	.index-short-link .content a {
		color: var(--link-color-dark);
		border-bottom-color: var(--link-color-dark);
	}
	
	.index-short-link .title a:visited,
	.index-short-link .content a:visited {
		color: var(--link-visited-dark);
		border-bottom-color: var(--link-visited-dark);
	}
	
	.index-short-link .title a:hover,
	.index-short-link .title a:active,
	.index-short-link .content a:hover,
	.index-short-link .content a:active {
		color: var(--link-active-dark);
		border-bottom-color: var(--link-active-dark);
		opacity: 0.7;
	}
	
	.archive-months a {
		color: var(--link-color-dark);
		border-bottom-color: var(--link-color-dark);
	}
	
	.archive-months a:visited {
		color: var(--link-visited-dark);
		border-bottom-color: var(--link-visited-dark);
	}
	
	.archive-months a:hover,
	.archive-months a:active {
		color: var(--link-active-dark);
		border-bottom-color: var(--link-active-dark);
		opacity: 0.7;
	}
}

p, ul, ol {
	margin-bottom: var(--space-md);
}

li {
	margin-top: var(--space-sm);
	margin-bottom: var(--space-sm);
}

blockquote {
	margin-top: 0;
	margin-bottom: var(--space-md);
	padding-top: 0;
	padding-bottom: 0;
	margin-left: var(--space-sm);
	padding-left: var(--space-sm);
	border-left: var(--border-width) var(--border-style) var(--border-color-light);
	font-size: inherit;
}

@media (prefers-color-scheme: dark) {
	blockquote {
		border-left: var(--border-width) var(--border-style) var(--border-color-dark);
	}
}

/* ==========================================================================
3. Layout & Grid
========================================================================== */

.container {
	width: auto;
	max-width: var(--container-max-width);
	padding: 0 var(--space-md);
	padding-bottom: var(--space-xl);
}

.container .text-muted {
	margin: var(--space-lg) 0;
}

/* ==========================================================================
4. Components
========================================================================== */

/* Header */
.site-header {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xl);
	border-bottom: none;
}

.site-header h1 {
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-h1);
	color: var(--header-color-light);
	line-height: 1.5;
	margin-bottom: 0;
	display: inline-block;
	margin-right: -0.15em;
}

.site-header h1 a {
	text-decoration: none;
	color: var(--link-color-light);
	border-bottom: var(--border-width) var(--border-style) var(--link-color-light);
	transition: opacity 0.2s ease-in-out;
}

.site-header h1 a:hover {
	opacity: 0.7;
}

.header-content {
	display: inline;
	font-size: var(--font-size-h1);
	color: var(--header-color-light);
	line-height: 1.5;
	font-weight: var(--font-weight-bold);
	margin-left: 0;
}

.header-byline {
	color: var(--header-color-light);
	font-weight: var(--font-weight-bold);
	margin-left: 0;
}

.header-byline::before {
	content: ",";
	margin-right: 0.3em;
}

.header-description {
	color: var(--header-description-light);
	font-weight: var(--font-weight-bold);
}

.header-description a {
	color: var(--header-description-light);
	text-decoration: none;
	border-bottom: var(--border-width) var(--border-style) rgba(136, 136, 136, 0.7);
	transition: opacity 0.2s ease-in-out;
	font-weight: var(--font-weight-bold);
}

.header-description a:hover {
	opacity: 0.7;
}

@media (prefers-color-scheme: dark) {
	.site-header h1 {
		color: var(--header-color-dark);
	}
	
	.site-header h1 a {
		color: var(--link-color-dark);
		border-bottom-color: var(--link-color-dark);
	}
	
	.header-content {
		color: var(--header-color-dark);
	}
	
	.header-byline {
		color: var(--header-color-dark);
	}
	
	.header-description {
		color: var(--header-description-dark);
	}
	
	.header-description a {
		color: var(--header-description-dark);
		border-bottom-color: rgba(136, 136, 136, 0.7);
	}
}


/* Posts and Content */
.page-content .date-line {
	display: flex;
	align-items: var(--align-center);
	font-size: var(--font-size-small);
	color: var(--ui-subtle-light);
	font-weight: normal;
	line-height: var(--line-height-tight);
	text-transform: lowercase;
	justify-content: flex-end;
	margin-bottom: var(--space-lg);
}

.page-content .date-line::after {
	content: "";
	flex: 1;
	border-bottom: var(--border-width) var(--border-style) var(--border-color-light);
	margin-left: var(--space-sm);
}

.page-content .date-line span {
	white-space: nowrap;
}

.page-content .date-line a {
	text-decoration: none;
}

.page-content h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-bold);
	margin-bottom: var(--space-sm);
	margin-top: var(--space-sm);
	color: var(--post-title-light);
}

.page-content h2 a {
	text-decoration: none;
	color: var(--post-title-light);
}

.page-content h2 a:hover {
	border-bottom: var(--border-width) var(--border-style) var(--border-color-light);
}

.page-content h3 {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-bold);
	margin-top: var(--space-lg);
}

.published-on {
	color: var(--ui-subtle-light);
	margin-top: var(--space-lg);
	font-size: var(--font-size-small);
	font-style: italic;
}

/* Short Links Groups */
.short-links-group {
	margin-bottom: var(--space-xl);
}

.short-links-group .index-short-link {
	margin-bottom: var(--space-xl);
}

.short-links-group .index-short-link:last-child {
	margin-bottom: 0;
}

.short-link-permalink a,
.short-link-permalink a:visited,
.short-link-permalink a:hover,
.short-link-permalink a:active {
	font-size: var(--font-size-small);
	color: var(--ui-subtle-dark);
	text-decoration: none;
	border-bottom: none;
}


/* Search */
.search-post {
	padding-top: var(--space-md);
	padding-bottom: var(--space-md);
	margin-bottom: var(--space-md);
}

.ais-search-box input {
	font-size: var(--font-size-base) !important;
}

.links .meta, 
.index-links .meta {
	margin-bottom: var(--space-md);
}

.index-links .meta a {
	text-decoration: none;
	color: inherit;
}

/* Monthly archive pages */

.date-header {
	padding-bottom: var(--space-md);
}



/* Media (Images & YouTube) */
img {
	width: var(--width-full);
	height: auto;
	border-radius: var(--border-radius);
}

.youtube-embed {
	position: relative;
	padding-bottom: var(--aspect-ratio-video);
	height: 0;
	margin-bottom: var(--space-base);
}

.youtube-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--width-full);
	height: var(--height-full);
	border-radius: var(--border-radius);
}



/* ==========================================================================
5. Utilities
========================================================================== */

.archive-number {
	white-space: nowrap;
}

.archive-months {
	margin-bottom: var(--space-lg);
}

.divider {
	color: var(--ui-subtle-light);
}

.divider-index-0 {
	display: none;
}

.index-short-link,
.index-links,
.index-post {
	margin-bottom: var(--space-xl);
}

.nav {
	margin-top: var(--space-xl);
	text-transform: lowercase;
	font-size: var(--font-size-small);
}

.nav a {
	text-decoration: none;
	color: var(--link-color-light);
}

.nav a:visited {
	color: var(--link-visited-light);
}

.nav a:hover,
.nav a:active {
	color: var(--link-active-light);
}

@media (prefers-color-scheme: dark) {
	.nav a {
		color: var(--link-color-dark);
	}
	
	.nav a:visited {
		color: var(--link-visited-dark);
	}
	
	.nav a:hover,
	.nav a:active {
		color: var(--link-active-dark);
	}
}

/* ==========================================================================
6. Media Queries
========================================================================== */

@media (max-width: 640px) {
	body {
		font-size: var(--font-size-base-mobile);
	}
	
	.site-header {
		display: block;
		margin-top: var(--space-lg);
		margin-bottom: var(--space-xl);
	}
	
	
	
	.site-header h1,
	.header-content {
		font-size: var(--font-size-h2);
	}
	
	
	.header-title {
		display: block;
		margin-bottom: var(--space-md);
	}
	
	.header-nav {
		display: block;
	}
	
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
	.page-content .date-line {
		color: var(--ui-subtle-dark);
	}
	
	.page-content .date-line::after {
		border-bottom: var(--border-width) var(--border-style) var(--border-color-dark);
	}
	
	.published-on {
		color: var(--ui-subtle-dark);
	}
	
	.divider {
		color: var(--ui-subtle-dark);
	}
	
	.index-short-link .short-link-domain {
		color: var(--ui-subtle-dark);
	}

	#bd-email {
		background-color: inherit;
		color: inherit;
		border-color: var(--border-color-dark);
	}
	
	#bd-button {
		background-color: var(--button-color-dark);
		border: var(--border-width) var(--border-style) var(--border-color-dark);
	}
	
	.page-content h2 {
		color: var(--post-title-dark);
	}
	
	.page-content h2 a {
		color: var(--post-title-dark);
	}
	
	.archive-links {
		color: var(--link-color-dark);
		border-bottom-color: var(--link-color-dark);
	}
	
	.archive-links:visited {
		color: var(--link-visited-dark);
		border-bottom-color: var(--link-visited-dark);
	}
	
	.archive-links:hover,
	.archive-links:active {
		color: var(--link-active-dark);
		border-bottom-color: var(--link-active-dark);
		opacity: 0.7;
	}
}

/* Archive link styles */
.archive-links {
	color: var(--link-color-light);
	text-decoration: none;
	border-bottom: var(--border-width) var(--border-style) var(--link-color-light);
	transition: opacity 0.2s ease-in-out;
}

.archive-links:visited {
	color: var(--link-visited-light);
	border-bottom-color: var(--link-visited-light);
}

.archive-links:hover,
.archive-links:active {
	color: var(--link-active-dark);
	border-bottom-color: var(--link-active-dark);
	opacity: 0.7;
}

/* Forms and Inputs */
.form-container {
	display: flex;
	align-items: var(--align-center);
	gap: var(--space-sm);
	margin: var(--space-lg) 0;
}

#bd-email {
	padding: var(--space-sm);
	border-radius: var(--border-radius);
	border: var(--border-width) var(--border-style) var(--border-color-light);
	flex-grow: 1;
	box-sizing: border-box;
	font-family: var(--font-family-system);
	font-size: var(--font-size-base);
	background-color: var(--page-background-light);
	color: var(--default-text-light);
}

#bd-email::placeholder {
	color: var(--ui-subtle-light);
}

#bd-button {
	padding: var(--space-sm) var(--space-lg);
	color: var(--page-background-light);
	background-color: var(--link-color-light);
	border: none;
	border-radius: var(--border-radius);
	font-family: var(--font-family-system);
	font-size: var(--font-size-base);
	cursor: pointer;
	transition: opacity 0.2s ease-in-out;
}

#bd-button:hover {
	opacity: 0.8;
}

@media (prefers-color-scheme: dark) {
	#bd-email {
		background-color: var(--page-background-dark);
		color: var(--default-text-dark);
		border-color: var(--border-color-dark);
	}
	
	#bd-email::placeholder {
		color: var(--ui-subtle-dark);
	}
	
	#bd-button {
		color: var(--page-background-dark);
		background-color: var(--link-color-dark);
	}
}

@media (max-width: 640px) {
	.form-container {
		flex-direction: column;
	}
	
	#bd-email, #bd-button {
		width: 100%;
	}
}