/*
Theme Name: Minimal Me
Theme URI: https://jamiebutler.com
Description: Ultra-minimal theme
Version: 2.8.9
Author: Jamie Butler
License: GNU General Public License v2 or later
Text Domain: minimal-me
*/

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Cutive+Mono&family=Domine:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Vollkorn+SC:wght@400;600;700;900&display=swap');

@font-face {
    font-family: 'CommitMono400';
    src: url('./assets/fonts/CommitMono-400-Regular.woff2') format('woff2');
  	font-display: swap;
    font-weight: 400;
    font-style: normal;
}

:root {
	--color-black: 			#111111;
	--color-black-2: 		#222222;
	--color-black-3: 		#333333;
	--color-black-4: 		#444444;
	--color-black-5: 		#555555;
	--color-black-6: 		#666666;
	--color-black-7: 		#777777;
	--color-black-8: 		#888888;
	--color-black-9: 		#999999;
	--color-grey-dk: 		#B1B1B1;
	--color-grey-lt: 		#E0DEDC;
	--color-grey-md: 		#CCCCCC;
	--color-pink: 			#DA5556;
	--color-pink-md: 		#DB9388;
	--color-white: 			#FFFFFF; /* #FFFDFB */
	--color-off-white: 		#c7c7c9;
	--font-courier: 		'Courier Prime', monospace;
	--font-crimson: 		'Crimson Text', serif;
	--font-cutive: 			'Cutive Mono', monospace;
	--font-domine:			'Domine', serif; /* magazine font */
	--font-garamond: 		'EB Garamond', serif;
	--font-lato: 			'Lato', sans-serif;
	--font-opens: 			'Open Sans', sans-serif;
	--font-spectral:		'Spectral', serif; /* palatino copy */
	--font-times: 			'Times New Roman', serif;
	--font-vollkorn: 		'Vollkorn SC', serif;
  	--font-commitmono400: 	'CommitMono400', monospace;
	--weight-thin: 			100;
	--weight-extra-light:	200;
	--weight-light: 		300;
	--weight-regular: 		400;
	--weight-medium: 		500;
	--weight-semi-bold: 	600;
	--weight-bold: 			700;
	--weight-extra-bold: 	800;
	--weight-black: 		900;
}

/* Core Base & Typography */
body {
    background-color: var(--color-white);
    color: var(--color-black);
    /* font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */
  	font-family: "CommitMono400", monospace;
    font-size: 12px;
    line-height: 1.9;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5 {
  	font-size: 12px;
  	line-height: 0.9;
  	margin: 3px 0;
}
::selection { 
  	background: var(--color-black-2); 
  	color: var(--color-white);
}

/* Two-Column Master Grid Layout */
.site-wrapper {
    max-width: 900px;
    margin: 0 40px;
    padding: 80px 40px;
    display: grid;
    grid-template-columns: 120px 1fr;
    column-gap: 60px;
}

/* Left Sidebar Area */
.site-sidebar {
    position: sticky;
    top: 80px;
  	align-self: start;
  	border-right: 0.5px solid var(--color-grey-md);
  	text-transform: lowercase;
  	font-style: oblique;
}

.site-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 24px 0;
}
.site-title a {
    color: var(--color-black);
    text-decoration: none;
}

/* Sidebar Custom Navigation Menu */
.sidebar-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sidebar-navigation li {
    padding: 4px 0;
}
.sidebar-navigation a {
  	letter-spacing: 0.15px;
    color: var(--color-black-8);
    text-decoration: none;
    transition: color 0.15s ease;
}
.sidebar-navigation a:hover,
.sidebar-navigation .current-menu-item a {
    color: var(--color-black);
}

/* Right Side Content Feed Area */
.site-main {
    max-width: 600px;
}

/* Post Index List Views */
/* Index Post List (Home Layout) */
.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-item {
    padding: 4px 0;
}

.post-item-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-decoration: none;
    color: var(--color-black-5);
    width: 100%;
}

.post-item-title {
    order: 1;
    transition: color 0.15s ease;
}

.post-item-date {
    order: 2;
    color: var(--color-black-8);
  	font-family: var(--font-commitmono400);
    font-size: 12px;
    white-space: nowrap;
    padding-left: 16px;
}

.post-item-link:hover .post-item-title {
    color: var(--color-black);
}

/* Single Post Entry Typographic Hierarchies */
.single-post-title {
    font-size: 12px;
    font-weight: 700;
  	line-height: 0.8;
    margin-top: 0;
    color: var(--color-black);
}
.single-post-meta {
    color: var(--color-black-8);
    font-size: 12px;
    margin-bottom: 32px;
}
.entry-content {
  	padding-bottom: 32px;
 	border-bottom: 0.5px solid var(--color-grey-md); 
}
.entry-content p {
    margin-top: 0;
    margin-bottom: 24px;
}
.entry-content a, 
.read-next-container a, 
.read-next-link {
  	color: var(--color-black); 
    text-decoration: underline;
  	text-underline-offset: 3px;
  	text-decoration-style: dotted;
}
.read-next-container p {
  	margin: 0;
}

/* Global */
.secure-email {
	direction: rtl;
    unicode-bidi: bidi-override;
    display: inline-block; 
}
.label-break, 
.secure-email {
  	line-height: 1 !important;
  	margin: 0 !important;
  	margin-block-start: 10px !important;
    margin-block-end: 10px !important;
}
.break-end {
  	margin-bottom: 32px !important;
}
.highlight-lt {
  	color: var(--color-black-8) !important;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .site-wrapper {
        grid-template-columns: 1fr; 
        row-gap: 40px;
        padding: 40px;
      	margin: 0;
        column-gap: 40px;
    }
    .site-sidebar {
        position: relative;
        top: 0;
      	border-right: 0;
    }
    .sidebar-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    .sidebar-navigation li {
        margin-bottom: 0;
    } 
}

/* System Native Dark Mode Support */
/*
@media (prefers-color-scheme: dark) {
    body {
        background-color: #111;
        color: #eaeaea;
    }
    .site-sidebar { border-right: 0.5px solid #555; }
    .site-title a { color: #eaeaea; }
  	.sidebar-navigation a:hover, 
  	.current-menu-item a, 
  	.current_page_item a { color: #FFF !important; }
    .post-item-link { color: #eaeaea; } 
    .post-item-link:hover .post-item-title { color: #FFF !important; }
    .single-post-title { color: #eaeaea; }
}
*/