/*
 * ===================================================================
 * FINAL UNIFIED STYLESHEET FOR JEKYLL BLOG
 * This file combines all styles needed for the Markdown PDF look.
 * ===================================================================
 */

/* --- 1. Main Layout & Site Header Styles --- */

.container {
    max-width: 800px; /* A good readable width for the content */
    margin: 0 auto;   /* This centers the container on the page */
    padding: 20px;    /* Adds some space around the content */
  }
  
  .site-header {
    margin-bottom: 40px; /* Adds space between the site header and post content */
  }
  
  /* Style the main site title in the header differently from post titles */
  .site-header h1 {
    border-bottom: none; /* Remove the bottom border from the main site title */
    font-size: 2em;
    font-weight: bold; /* Make the site title bold */
    margin-bottom: 0.5rem;
  }
  
  /* Make sure the site title link isn't styled like a normal content link */
  .site-header h1 a {
    color: #333;
    text-decoration: none;
  }
  
  /* Style the navigation links */
  .site-header nav a {
    margin-right: 15px;
    color: #555;
  }
  
  
  /* --- 2. "Markdown PDF" Content Styles --- */
  /* These styles apply to the content rendered from your Markdown files. */

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
    /* UPDATED: Using the more conservative Option 1 for font size */
    font-size: clamp(15px, 1rem + 0.4vw, 18px); 
    line-height: 1.6; 
    word-wrap: break-word;
    color: #333;
    background-color: #fff;
    margin: 0;
  }
  
  img {
      max-width: 100%;
      max-height: 100%;
  }
  
  a {
      color: #007acc; /* A standard link color */
      text-decoration: none;
  }
  
  a:hover {
      text-decoration: underline;
  }
  
  hr {
      border: 0;
      height: 2px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.18);
  }
  
  h1, h2, h3, h4, h5, h6 {
      font-weight: normal;
  }
  
  h1 {
    /* UPDATED: Slightly increased the relative size to ensure it still stands out */
    font-size: 2.4em; 
    padding-bottom: 0.3em;
    line-height: 1.2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  }
  
  blockquote {
      margin: 0 7px 0 5px;
      padding: 0 16px 0 10px;
      border-left: 5px solid rgba(0, 122, 204, 0.5);
      background: rgba(127, 127, 127, 0.1);
  }
  
  table {
      border-collapse: collapse;
  }
  
  table > thead > tr > th {
      text-align: left;
      border-bottom: 1px solid rgba(0, 0, 0, 0.69);
  }
  
  table > thead > tr > th,
  table > thead > tr > td,
  table > tbody > tr > th,
  table > tbody > tr > td {
      padding: 5px 10px;
  }
  
  table > tbody > tr + tr > td {
      border-top: 1px solid rgba(0, 0, 0, 0.18);
  }
  
  .emoji {
      height: 1.4em;
  }
  
  /* --- 3. Code Block & Syntax Highlighting Styles --- */
  
  /* Base styles for all code elements */
  code {
    font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
    /* UPDATED: Font size is now slightly smaller than the body text */
    font-size: 0.9em; 
    /* The line-height will be inherited, which is what we want. */
}
  
  /* Style for multi-line code blocks */
  pre {
      background-color: #f8f8f8;
      border: 1px solid #cccccc;
      border-radius: 3px;
      overflow-x: auto;
      padding: 16px;
      line-height: 1.357em;
  }
  
  pre code {
      color: inherit;
      background-color: transparent;
      font-size: 1em;
      border-radius: 0;
      padding: 0;
  }
  
  /* Style for inline code snippets (e.g., `code`) */
  :not(pre) > code {
      color: #C9AE75;
      font-size: 0.9em;
      background-color: #f8f8f8;
      border-radius: 3px;
      padding: 2px 4px;
  }
  
  /* Tomorrow Theme for Highlight.js (used by .hljs class) */
  .hljs {
      display: block;
      overflow-x: auto;
      color: #4d4d4c;
  }
  
  .hljs-comment,
  .hljs-quote {
      color: #8e908