/* === Jordi's ML Blog: Compact & Modern === */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&family=Crimson+Pro:wght@400;500;700&family=Fira+Code&display=swap');

/* --- General layout --- */
body {
  font-family: 'Crimson Pro', serif;
  background-color: #0e0e0c;
  color: #e6dfcf;
  line-height: 1.7;
  font-size: 16px; /* Slightly smaller for a cleaner look */
  margin: 0;
}

/* --- Centered Container (Prevents lines from extending to the end) --- */
.wrapper, main.content {
  max-width: 800px !important;   /* Restricted width for better readability */
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px;               /* Side gutters */
}

/* --- Headings --- */
h1, h2, h3, h4 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  color: #f0e8d2;
  letter-spacing: -0.01em;
}

h1 { font-size: 2rem; margin-top: 2rem; }
h2 { font-size: 1.6rem; margin-top: 1.8rem; color: #d2c4a1; }
h3 { font-size: 1.2rem; margin-top: 1.5rem; }

/* --- Vibrant Links --- */
a {
  color: #0070f3; /* Bright Action Blue */
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: #ff0080; /* Bright Pink Hover */
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Compact Post List --- */
.post-link {
  font-size: 0.95rem;
  font-weight: 600;
}

.post-date {
  font-family: 'Fira Code', monospace;
  font-size: 0.75rem;
  color: #666;
  min-width: 90px;
  display: inline-block;
}

/* --- Refined Code Blocks --- */
code {
  background-color: #1a1a18 !important;
  color: #c5a96d; /* Warm gold for code */
  border-radius: 4px;
  padding: 0.2em 0.4em;
  font-family: 'Fira Code', monospace;
  font-size: 0.85em;
}

pre.syntax, div.highlight {
  background-color: #161614 !important;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #252522 !important;
  overflow-x: auto;
  max-width: 100%; /* Ensures code doesn't break the container */
}

/* --- Blockquotes --- */
blockquote {
  border-left: 2px solid #0070f3; /* Use the accent blue for the quote bar */
  padding-left: 1.2rem;
  margin: 1.5rem 0;
  color: #cfc7b0;
  font-style: italic;
}

/* --- Header Styling --- */
.site-title {
  color: #837769 !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-header {
  border-bottom: 1px solid #1d1d1b;
  margin-bottom: 3rem;
}

/* --- Fix for the wide bottom line --- */
.site-footer, 
footer,
.site-footer .wrapper {
  max-width: 800px !important; /* Matches your main content width */
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 2rem 40px;          /* Adds some breathing room at the bottom */
  border-top: 1px solid #1d1d1b; /* The line itself */
}