/* Custom CSS improvements for paulefou.com */

/* Dark theme only - softer colors for reduced eye strain */
:root {
  --bgcolor: #1e1e1e;  /* Softer than pure black */
  --fontcolor: #d4d4d4;  /* Slightly dimmed white */
  --linkcolor: #69b7ff;  /* Softer blue */
  --visitedcolor: #c9a0dc;  /* Softer purple */
  --precolor: #d4d4d4;
  --prebgcolor: #2d2d30;  /* Slightly warmer */
  --bordercolor: #3e3e42;
  --mutedcolor: #9d9d9d;
}

/* Improved typography */
body {
  font-size: 16px;
  line-height: 1.7;  /* Slightly more line height for easier reading */
  letter-spacing: 0.01em;  /* Tiny bit of letter spacing */
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 30px;
}

/* Better content width for readability */
article .content {
  max-width: 100%;  /* Use full width on desktop */
}

/* Better heading hierarchy */
h1 { 
  font-size: 2em; 
  margin: 1em 0 0.5em 0;
  font-weight: bold;
}

h2 { 
  font-size: 1.5em; 
  margin: 1.5em 0 0.5em 0;
  border-bottom: 1px solid var(--bordercolor);
  padding-bottom: 0.3em;
}

h3 { 
  font-size: 1.2em; 
  margin: 1.2em 0 0.5em 0;
}

/* Better link styling */
a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

a:hover {
  border-bottom-color: currentColor;
}

/* Navigation improvements */
header nav {
  border-bottom: 1px solid var(--bordercolor);
  padding-bottom: 1em;
  margin-bottom: 2em;
}

header nav a {
  margin-right: 1em;
  font-weight: bold;
}

header nav a:hover {
  border-bottom-color: currentColor;
}

/* Footer styling */
footer {
  border-top: 1px solid var(--bordercolor);
  padding-top: 1em;
  margin-top: 3em;
}

/* Post list improvements */
.posts {
  list-style: none;
  padding: 0;
}

.posts li {
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--bordercolor);
}

.posts li:last-child {
  border-bottom: none;
}

/* Post metadata styling */
.post-date, .post-meta {
  color: var(--mutedcolor);
  font-size: 0.9em;
}

/* Post summary styling */
.post-summary {
  margin-bottom: 2em;
}

.post-summary h2 {
  margin: 0.5em 0;
  border: none;
}

.post-summary .description {
  margin: 0.5em 0;
}

.post-summary .read-more {
  font-weight: bold;
  font-size: 0.9em;
}

.separator {
  margin: 0 0.5em;
  color: var(--mutedcolor);
}

/* Article styling */
article {
  padding: 2em 0;
}

article p {
  margin: 1em 0;
}

/* Blockquote styling */
blockquote {
  border-left: 3px solid var(--bordercolor);
  padding-left: 1em;
  margin: 1em 0;
  font-style: italic;
  color: var(--mutedcolor);
}

/* List improvements */
ul, ol {
  margin: 1em 0;
  padding-left: 2em;
}

li {
  margin: 0.5em 0;
}

/* Code block improvements */
pre {
  border-radius: 6px;
  line-height: 1.5;
  font-size: 0.9em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

code {
  border-radius: 3px;
  padding: 0.2em 0.4em;
  font-size: 0.9em;
}

/* Inline code contrast adjustment */
p > code, li > code {
  background: var(--prebgcolor);
  color: var(--fontcolor);
  opacity: 0.9;
}

/* Tag and category styling */
.tags, .categories {
  margin: 1em 0;
}

.tags a, .categories a {
  display: inline-block;
  padding: 0.2em 0.6em;
  margin: 0.2em;
  background: var(--prebgcolor);
  border-radius: 3px;
  font-size: 0.9em;
}

.tags a:hover, .categories a:hover {
  opacity: 0.8;
}

/* Pagination */
.pagination {
  margin: 2em 0;
  text-align: center;
}

.pagination a {
  padding: 0.5em 1em;
  margin: 0 0.2em;
}

/* About page styling */
.about-section {
  margin: 2em 0;
}

/* Responsive improvements */
@media (max-width: 768px) {
  body {
    font-size: 15px;
    margin: 20px auto;
    padding: 0 15px;
  }
  
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.3em; }
  h3 { font-size: 1.1em; }
  
  /* Narrower content on mobile */
  article .content {
    max-width: 100%;
  }
}

/* Selection highlighting */
::selection {
  background: var(--linkcolor);
  color: var(--bgcolor);
}

/* Focus styling for accessibility */
a:focus, button:focus {
  outline: 2px solid var(--linkcolor);
  outline-offset: 2px;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Single post styling */
article header h1 {
  margin-bottom: 0.3em;
}

.tags-line {
  margin-top: 0.5em;
}

.tags-label {
  color: var(--mutedcolor);
}

/* Post navigation */
.post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 3em;
  padding-top: 2em;
  border-top: 1px solid var(--bordercolor);
}

.prev-post, .next-post {
  max-width: 45%;
}

.next-post {
  text-align: right;
}

/* Content improvements */
.content h2:first-child {
  margin-top: 0;
}

.content > *:last-child {
  margin-bottom: 0;
}