/* === Base Layout & Typography === */
body {
  font-family: "Menlo", "Meslo LG", monospace;
  font-size: 14px;
  color: #cacaca;
  background-color: #212121;
  line-height: 1.725;
  max-width: 65rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

/* Hide homepage intro and first HR on article pages */
body.single .intro-section,
body.single hr:first-of-type {
  display: none;
}

/* Always reserve vertical scrollbar space to prevent layout shift */
html {
  overflow-y: scroll;
}

/* === Layout Containers === */
.main {
  max-width: 48rem;
  flex: 1 1 auto;
  padding: 2rem 1rem;
}

/* Sidebar styling for desktop */
.sidebar {
  width: 15rem;
  flex: 0 0 15rem;
  padding: 8rem 0 0rem 0rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #cacaca;
  position: sticky;
  top: 2rem;
  height: fit-content;
}

/* Sidebar links */
.sidebar a {
  display: block;
  color: #cacaca;
  text-decoration: none;
  margin-bottom: 0.25rem;
  background-image: linear-gradient(transparent, transparent 5px, #cacaca 5px, #cacaca);
  background-position: bottom;
  background-size: 100% 6px;
  background-repeat: repeat-x;
}

.sidebar a:hover,
.sidebar a:visited {
  color: #cacaca;
  background-image: linear-gradient(transparent, transparent 5px, #cacaca 5px, #cacaca);
}

/* === Post List === */
.post-list {
  padding: 0px 40px 0px 40px;
  list-style-type: none;
}

/* Each post list item */
.post-item {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.post-item .date {
  flex-shrink: 0;
  width: 5.0rem;
  color: #888;
  font-size: 14px;
}

.post-item a {
  text-decoration: none;
  color: #cacaca;
  overflow-wrap: anywhere;
  letter-spacing: -0.01em;
}

.post-item a:hover,
.post-item a:visited {
  color: #cacaca;
}

/* Default link color override */
a {
  color: #15a6d3;
}

/* Meta info below post titles */
.post header .meta {
  display: block;
  margin-top: 0.5rem;
  color: #999;
  font-size: 0.85rem;
}

/* === Header Branding === */
header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 2rem 1rem 0;
}

header .logo {
  background-image: url("/tombstone_transparent.png");
  background-size: 50px 50px;
  width: 50px;
  height: 50px;
  margin-right: 20px;
  filter: grayscale(100%);
  border-radius: 5px;
  flex-shrink: 0;
}

header .title-block {
  display: flex;
  flex-direction: column;
}

header h1 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  color: #cacaca;
}

/* Navigation below blog title */
header .nav-meta {
  font-size: 0.85rem;
  color: #cacaca;
  margin-top: 4px;
  display: flex;
  gap: 0.5rem;
}

header .nav-meta a,
header .nav-meta a:visited,
header .nav-meta a:hover {
  color: #cacaca;
  text-decoration: none;
}

/* === Homepage Intro Quote === */
.intro-section {
  max-width: 48rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}

.intro-quote {
  text-align: left;
  max-width: 48rem;
  margin: 0 auto 0;
  font-style: italic;
  padding: 0 0 0 0;
  color: #cacaca;
}

/* === Footer === */
footer {
  text-align: center;
  font-size: 11px;
  color: #999;
  margin: 2rem 0;
}

/* === Responsive Layout === */
@media (max-width: 768px) {
  body {
    flex-direction: column;
  }

  .main,
  .sidebar {
    width: 100%;
    max-width: 100%;
  }

  .sidebar {
    position: relative;
    top: auto;
    padding: 1rem;
  }
}

/* === Pagination Component === */
.pagination {
  margin-top: 2rem;
  text-align: center;
}

.pagination .page-number,
.pagination .arrow {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  margin: 0 0.25rem;
  color: #cacaca;
  text-decoration: none;
  background: transparent;
  border-radius: 4px;
}

.pagination .page-number.active {
  font-weight: bold;
  border-bottom: 1px solid #cacaca;
}

.postmetas {
    color: #939393;
}

/* === Horizontal Rules === */
hr {
  border: 1px solid rgba(111, 120, 128, 0.1);
  width: 50%;
  margin: 0.2rem auto;
}

/* === Image Content Styling === */
.imgcontent {
  margin: 1rem 0;
  padding: 0;
  background-color: transparent;
}

.imgcontent img {
  width: 100%;
  max-width: 100%;
  border: 1px solid #ffffff;
  padding: 10px;
  display: block;
  margin: 0 auto 10px auto;
  box-sizing: border-box;
}

/* Side-floating images (33% width) */
.imgcontentleft,
.imgcontentright {
  margin: 1rem 0;
  background-color: transparent;
}

.imgcontentleft img,
.imgcontentright img {
  width: 33%;
  max-width: 33%;
  border: 1px solid #ffffff;
  padding: 10px;
  box-sizing: border-box;
}

.imgcontentleft img {
  float: left;
  margin: 0 20px 1rem 0;
}

.imgcontentright img {
  float: right;
  margin: 0 0 1rem 20px;
}

/* === Bottom Section for Article Pages === */
.bottom-article-footer {
  margin-top: 4rem;
  padding: 2rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #aaa;
  text-align: center;
  font-size: 0.9rem;
}

.bottom-article-footer a {
  color: #15a6d3;
  text-decoration: none;
}

.bottom-article-footer a:hover {
  text-decoration: underline;
}

.footer-image {
  display: block;
  max-width: 300px;
  margin: 1rem auto 0 auto;
  border: 1px solid #555;
  border-radius: 5px;
}