/* LAYOUT */
:root {
    --modus-themes-color-black:       #000000;
    --modus-themes-color-black-alt:   #333333;
    --modus-themes-color-red:         #ff5f59;
    --modus-themes-color-red-alt:     #ff6b55;
    --modus-themes-color-green:       #44bc44;
    --modus-themes-color-green-alt:   #70b900;
    --modus-themes-color-yellow:      #d0bc00;
    --modus-themes-color-yellow-alt:  #fec43f;
    --modus-themes-color-blue:        #2fafff;
    --modus-themes-color-blue-alt:    #79a8ff;
    --modus-themes-color-magenta:     #f78fe7;
    --modus-themes-color-magenta-alt: #b6a0ff;
    --modus-themes-color-cyan:        #00d3d0;
    --modus-themes-color-cyan-alt:    #6ae4b9;
    --modus-themes-color-white-alt:   #989898;
    --modus-themes-color-white:       #d0d0d0;
    --modus-themes-color-red-bg:      #35070f;
    --modus-themes-color-green-bg:    #172a12;
    --modus-themes-color-yellow-bg:   #2f270f;
    --modus-themes-color-blue-bg:     #1f2a43;
    --modus-themes-color-magenta-bg:  #291230;
    --modus-themes-color-cyan-bg:     #19323f;
    --modus-themes-color-calm:        #fbd6f4;
    --modus-themes-color-cold:        #c6eaff;
    --modus-themes-color-mild:        #bfebe0;
    --modus-themes-color-warm:        #f8dec0;
    --modus-themes-color-bgdim:       #181A1B;
    --modus-themes-color-brandbg:     #121212;
    --modus-themes-color-brandfg:     #b2a2a2;
    --modus-themes-color-brandlink:   #c8d4df;
    --modus-themes-color-basebg:      var(--modus-themes-color-black);
    --modus-themes-color-basebgalt:   var(--modus-themes-color-black-alt);
    --modus-themes-color-basefg:      var(--modus-themes-color-white);
    --modus-themes-color-basefgalt:   var(--modus-themes-color-white-alt);
    --modus-themes-color-baselinkfg:         var(--modus-themes-color-blue);
    --modus-themes-color-baselinkfgalt:      var(--modus-themes-color-cyan);
    --modus-themes-color-baselinkfghover:    var(--modus-themes-color-blue-alt);
    --modus-themes-color-baselinkfgalthover: var(--modus-themes-color-cyan-alt);
    --modus-themes-color-inlinecodefg:       var(--modus-themes-color-magenta);
    --modus-themes-color-inlinecodefgalt:    var(--modus-themes-color-cyan);
    --modus-themes-color-codeblockbg:        var(--modus-themes-color-bgdim);
    --modus-themes-color-codeblockfg:        var(--modus-themes-color-basefg);
}

body {
    background-color: var(--modus-themes-color-bgdim);
    color: var(--modus-themes-color-basefg);
    font-family: "Libre Baskerville", serif;
    font-size: 125%;
    line-height: 1.5;
    /* max-width: 45rem; */
    max-width: 750px;
    margin: 0 auto;
    padding: 0 auto;
}

a {
    color: var(--modus-themes-color-baselinkfg);
    text-decoration: underline;
}
  a:hover, a:focus {
      background: var(--modus-themes-color-baselinkfghover);
      color: var(--modus-themes-color-basebg);
      /* outline: none; */
      /* text-decoration: none; */
  }
  a:visited {
      background: var(--modus-themes-color-baselinkfgalthover);
      color: var(--modus-themes-color-baselinkfgalt); }
    a:visited:hover, a:visited:focus {
	background: var(--modus-themes-color-baselinkfgalthover);
	color: var(--modus-themes-color-basebg);
    }

.content {
    margin-bottom: 2rem;
}

.highlight code {
    font-family: 'Aporetic Sans Mono', monospace;
    font-size: 0.9rem;
}

/* Code overflow, from https://www.veriphor.com/articles/code-block-line-numbers/#the-problem */
/* Applies when there are no line numbers, or when line numbers are inline. */
.highlight > pre {
    padding: 1em 0 1em 1em;
}

/* Applies when line numbers are in a table cell. */
.highlight div {
    padding: 0 0 0 1em;
}

/* Applies to all. */
.highlight div,
.highlight > pre {
    overflow-x: auto;
    /* add border-radius and box-shadow here */
}

/* Applies when using an external style sheet. */
/* https://github.com/alecthomas/chroma/issues/722 */
.highlight .chroma .lntable .lnt,
.highlight .chroma .lntable .hl {
    display: flex;
}

/* Applies when using an external style sheet. */
/* https://github.com/alecthomas/chroma/issues/722 */
.highlight .chroma .lntable .lntd + .lntd {
    width: 100%;
}

/* Color inline code but ignore blocks, taken from https://protesilaos.com/assets/css/style.css */
p code, .post-header-meta code, li code, dd code {
    color: var(--modus-themes-color-inlinecodefg);
    font-size: 0.889rem;
}

p pre code, .post-header-meta pre code,
li pre code,
dd pre code {
    background: none;
    color: var(--modus-themes-color-codeblockfg);
}

dt code {
    color: var(--modus-themes-color-inlinecodefgalt);
}

/* Fonts */

@font-face {
    font-family: "Libre Baskerville", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Aporetic Sans Mono";
    font-optical-sizing: auto;
    font-weight: 100 900; /* variable range */
    font-style: normal;
    src: local('Aporetic Sans Mono'), url('/fonts/aporetic-sans-mono-normalregularupright.woff2') format('woff2');
}

.post-row {
    display: grid;
    grid-template-columns: 7ch 1fr;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.date {
    font-family: monospace;
    color: var(--modus-themes-color-white);
}
.post-entry {
    margin-bottom: 1.5rem; /* Space between different posts */
}

.post-row {
    display: grid;
    grid-template-columns: 7ch 1fr;
    gap: 1.5rem;
    align-items: baseline;
}

.post-summary {
    margin: 0.2rem 0 0 8rem; /* Aligns summary under the title, skipping the date */
    font-size: 0.9rem;
    color: #888; /* Dimmer color for the "first line" */
    line-height: 1.4;
}

/* On mobile, stack them instead of trying to maintain the big margin */
@media (max-width: 600px) {
    .post-summary {
	margin-left: 0;
    }
}

/* Pagefind */
.pagefind-ui {
    /* Change the main text color */
    --pagefind-ui-text: var(--modus-themes-color-basefg);
    
    /* Change the title/link color */
    --pagefind-ui-primary: var(--modus-themes-color-basefg);
    
    /* Change the background of the search results */
    --pagefind-ui-background: var(--modus-themes-color-basebg);
    
    /* Change the color of the "search" text and border */
    --pagefind-ui-border: var(modus-themes-color-basefgalt);
    
}
/* Remove the thumbnail container entirely */
.pagefind-ui__result-thumb {
    display: none !important;
}

/* NAVIGATION */

.site-nav {
    display: flex;
    flex-direction: row; /* Keeps items in a line */
    align-items: center;
    gap: 0px;
    padding: 0px;
}

.site-nav a {
    display: block;
    font-family: 'Aporetic Sans Mono', monospace;
    padding: 10px;
    color: var(--modus-themes-color-basefg);
    text-decoration: none;
}

.site-nav a:hover, a:focus {
    color: var(--modus-themes-color-basebg);
      background: var(--modus-themes-color-basefg);
  }

/* .site-nav .logo { */
/*     font-weight: bold; */
/*     padding-left: 0; */
/* } */


/* Layout */

/* Hide Hamburger on Desktop */
.menu-toggle {
    /* display: flex; */
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    /* cursor: pointer; */
    padding: 0px;
    /* z-index: 1001; /\* Keep above sidebar *\/ */
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--modus-themes-color-basefg);
    transition: 0.3s;
}

/* Mobile Sidebar */
@media (max-width: 768px) {
    .menu-toggle { display: flex; }

    .main-menu {
	position: fixed;
	top: 0;
	left: -250px; /* Hidden off-screen to the left */
	width: 250px;
	height: 100vh;
	background: var(--modus-themes-color-basebgalt);
	flex-direction: column;
	padding: 80px 20px;
	transition: 0.3s ease;
    }

    /* JavaScript will toggle this class */
    .main-menu.active {
	left: 0;
    }
}

.main-menu {
    display: flex;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

/* LISTS */

.post-snippet {
    margin-bottom: 1rem;
}

.post-snippet h3 {
    margin-bottom: 0.25rem;
}