/* ==========================================
   BLOG HERO SECTION - Simple left-aligned heading
   ========================================== */

.blog-hero {
  width: 100%;
  background: #fff;
  position: relative;
  padding: 4rem 0 3rem 0; /* Increased padding for prominence */
  box-sizing: border-box;
  overflow: hidden;
}

/* Remove background shapes */
.blog-hero-shapes {
  display: none;
}

/* Blog hero content container - LEFT ALIGNED */
.blog-hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px; /* Match blog listing width */
  margin: 0 auto;
  padding: 0 4rem; /* Match blog listing padding */
}

.blog-hero-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blog-hero-title {
  font-size: 3.5rem; /* Increased for more impact */
  font-family: var(--font-family-serif);
  color: var(--color-text-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}

/* Remove the badge completely */
.blog-hero-badge {
  display: none;
}

.blog-hero-subtitle {
  font-family: var(--font-family-sans);
  color: #aaa; /* Slightly lighter but more substantial with heavier weight */
  font-size: 1.125rem;
  margin: 0.5rem 0 0 0; /* Removed left nudge for cleaner alignment */
  font-weight: 400; /* Increased from 300 for better presence */
  text-align: left;
}

/* Remove all color variations */
.blog-hero.color-red,
.blog-hero.color-orange,
.blog-hero.color-green,
.blog-hero.color-blue,
.blog-hero.color-purple,
.blog-hero.color-tan {
  background: transparent;
}

.blog-hero.color-tan .blog-hero-title,
.blog-hero.color-tan .blog-hero-subtitle {
  color: var(--color-text-primary);
}

/* ==========================================
   BLOG LISTING PAGE
   ========================================== */

.blog-listing-page {
  width: 100%;
  margin: 0;
  padding: 0 2rem 8rem 2rem;
  background: #fff; /* Changed to white */
  min-height: 100vh;
  position: relative;
  z-index: 100;
}

.blog-listing {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 3rem 4rem 8rem 4rem; /* Match individual post padding */
  position: relative;
  z-index: 100;
}

.blog-listing-post {
  margin-bottom: 4rem;
  padding-bottom: 3rem;
  border-bottom: 1.5px solid #e8e8e8; /* Match content box border styling */
}

.blog-listing-post:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.blog-listing-header {
  margin-bottom: 2rem;
}

.blog-listing-date {
  color: var(--color-coral); /* Coral red to match individual posts */
  font-size: 0.875rem; /* Match individual post size */
  font-weight: 400; /* Match individual post weight */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 1rem;
}

.blog-listing-post-title {
  font-family: var(--font-family-serif);
  font-size: 2rem; /* Smaller than individual post 3.5rem */
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.blog-listing-post-title a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-listing-post-title a:hover {
  color: var(--color-coral);
}

.blog-listing-content {
  font-family: var(--font-family-sans);
  font-size: 1.125rem; /* Smaller than individual post 1.25rem */
  line-height: 1.65; /* Match individual post tighter spacing */
  color: var(--color-text-primary); /* Darker for better readability */
  font-weight: 400; /* Medium weight for easier reading */
}

.blog-listing-content p {
  margin-bottom: 1.5rem; /* Slightly tighter than individual post 1.75rem */
}

.blog-listing-content h2 {
  font-family: var(--font-family-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
}

.blog-listing-content h3 {
  font-family: var(--font-family-serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: var(--color-text-secondary);
}

.blog-listing-content a {
  color: var(--color-text-primary); /* Same as body text */
  text-decoration: none;
  font-weight: 500; /* Slightly bolder than body text */
  transition: color 0.3s ease; /* Smooth transition */
}

.blog-listing-content a:hover {
  color: var(--color-coral); /* Coral on hover */
}

.blog-listing-content ul,
.blog-listing-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.blog-listing-content li {
  margin-bottom: 0.5rem;
}

/* Permalink at bottom */
.blog-listing-footer {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-start;
}

.permalink-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.permalink-icon {
  width: 20px;
  height: 20px;
  display: block;
  transition: filter 0.2s ease;
}

.permalink-link:hover .permalink-icon {
  filter: brightness(0.7); /* Darken on hover */
}

/* Pagination */
.blog-pagination {
  margin-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.older-posts,
.newer-posts {
  color: var(--color-coral);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.2s ease;
  padding: 0.75rem 1.5rem;
  border: 1px solid #F0EEE7;
  border-radius: 8px;
  background: #fff;
}

.older-posts:hover,
.newer-posts:hover {
  color: var(--color-coral-darker);
  border-color: var(--color-coral);
}

/* ==========================================
   INDIVIDUAL BLOG POST PAGE
   ========================================== */

.blog-post-page {
  background: #fff; /* Changed to white */
  min-height: 100vh;
  margin: 0;
  padding: 100px 2rem 8rem 2rem; /* Increased top padding by 100px */
  position: relative;
  z-index: 100;
}

.blog-post-page article {
  max-width: 900px;
  margin: 0 auto; /* Removed negative margin overlap */
  background: #fff;
  padding: 3rem 4rem 8rem 4rem; /* Reduced horizontal padding from 6rem to 4rem */
  position: relative;
  z-index: 100;
}

.blog-post-date {
  color: var(--color-coral); /* Coral red brand color */
  font-size: 0.875rem; /* Smaller from 0.9rem */
  font-weight: 400; /* Reduced from 500 */
  margin-bottom: 1.25rem;
  display: block; /* Ensure it's a block element */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.blog-post-title {
  font-family: var(--font-family-serif);
  font-size: 3.5rem; /* Increased from 3rem to 3.5rem */
  font-weight: 700;
  line-height: 1.1; /* Tightened from 1.2 for more impact */
  margin-top: 0; /* Add this to prevent margin collapse */
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
}

.blog-post-author {
  color: #999; /* Lighter gray */
  font-size: 0.9rem; /* Smaller from 1rem */
  font-weight: 400; /* Added lighter weight */
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem; /* Add padding before the line */
  border-bottom: 1.5px solid #e8e8e8; /* Match content box border styling */
}

.blog-post-content {
  font-family: var(--font-family-sans);
  font-size: 1.25rem; /* 20px for better readability */
  line-height: 1.65; /* Tighter spacing inspired by SimpleBits */
  color: var(--color-text-primary); /* Darker for better readability */
  font-weight: 400; /* Medium weight for easier reading */
}

.blog-post-content p {
  margin-bottom: 1.75rem; /* Increased from 1.5rem to 1.75rem */
}

.blog-post-content h2 {
  font-family: var(--font-family-serif);
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  color: var(--color-text-secondary);
}

.blog-post-content h3 {
  font-family: var(--font-family-serif);
  font-size: 1.375rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--color-text-secondary);
}

.blog-post-content a {
  color: var(--color-text-primary); /* Same as body text */
  text-decoration: none;
  font-weight: 500; /* Slightly bolder than body text */
  transition: color 0.3s ease; /* Smooth transition */
}

.blog-post-content a:hover {
  color: var(--color-coral); /* Coral on hover */
}

.blog-post-content ul,
.blog-post-content ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.blog-post-content li {
  margin-bottom: 0.5rem;
}

.blog-post-footer {
  margin-top: 4rem; /* Increased from 3rem for more space */
  padding-top: 0; /* Removed padding since no border */
}

.back-to-blog {
  color: var(--color-coral); /* Coral red */
  text-decoration: none;
  font-size: 0.95rem; /* Slightly smaller */
  font-weight: 400; /* Reduced from 500 */
  transition: color 0.2s ease;
  display: inline-block;
}

.back-to-blog:hover {
  color: var(--color-coral-darker); /* Darker red on hover */
  text-decoration: none; /* Removed underline on hover */
}

/* ==========================================
   KIRBY BLOCKS STYLING (for both listing and posts)
   ========================================== */

/* Quote blocks - ENHANCED PULL QUOTE STYLING */
.blog-post-content blockquote,
.blog-listing-content blockquote {
  margin: 3rem 0;
  padding: 2.5rem 3rem;
  border-left: 5px solid var(--color-coral);
  background: #FAF9F6;
  font-family: var(--font-family-serif);
  font-style: italic;
  font-size: 1.375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  position: relative;
}

.blog-post-content blockquote::before,
.blog-listing-content blockquote::before {
  content: '"';
  font-family: var(--font-family-serif);
  font-size: 5rem;
  color: var(--color-coral);
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 1rem;
  line-height: 1;
}

.blog-post-content blockquote p,
.blog-listing-content blockquote p {
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

/* Citation styling for quotes */
.blog-post-content blockquote cite,
.blog-listing-content blockquote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-size: 1rem;
  color: #888;
  font-family: var(--font-family-sans);
}

/* Code blocks */
.blog-post-content pre,
.blog-listing-content pre {
  background: var(--color-text-primary);
  color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 2rem 0;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
}

.blog-post-content code,
.blog-listing-content code {
  background: #f4f4f4;
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--color-coral);
}

.blog-post-content pre code,
.blog-listing-content pre code {
  background: transparent;
  padding: 0;
  color: #fff;
}

/* Images - ENHANCED STYLING */
.blog-post-content img,
.blog-listing-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 2.5rem 0;
  box-shadow: none;
  display: block;
  pointer-events: none; /* Prevent images from being clickable */
}

/* Disable any links wrapping images */
.blog-post-content a[href*="jpg"] img,
.blog-post-content a[href*="jpeg"] img,
.blog-post-content a[href*="png"] img,
.blog-post-content a[href*="gif"] img,
.blog-post-content a[href*="webp"] img,
.blog-listing-content a[href*="jpg"] img,
.blog-listing-content a[href*="jpeg"] img,
.blog-listing-content a[href*="png"] img,
.blog-listing-content a[href*="gif"] img,
.blog-listing-content a[href*="webp"] img {
  cursor: default;
}

.blog-post-content figure a,
.blog-listing-content figure a {
  pointer-events: none;
  cursor: default;
}

/* Special styling for baseball card or featured images */
.blog-post-content figure,
.blog-listing-content figure {
  margin: 3rem 0;
  text-align: center;
}

.blog-post-content figure img,
.blog-listing-content figure img {
  margin: 0 auto;
}

.blog-post-content figcaption,
.blog-listing-content figcaption {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #888;
  font-style: italic;
  text-align: center;
}

/* Gallery */
.blog-post-content .gallery,
.blog-listing-content .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

/* Line separator */
.blog-post-content hr,
.blog-listing-content hr {
  border: none;
  border-top: 1px solid #F0EEE7;
  margin: 3rem 0;
}

/* Video */
.blog-post-content video,
.blog-listing-content video {
  max-width: 100%;
  border-radius: 8px;
  margin: 2rem 0;
}

/* ==========================================
   RESPONSIVE STYLES
   ========================================== */

@media screen and (max-width: 768px) {
  /* Blog hero mobile - simpler style */
  .blog-hero {
    padding: 2rem 0 1.5rem 0;
  }
  
  .blog-hero-shapes {
    display: none; /* Keep hidden on mobile */
  }
  
  .blog-hero-content {
    padding: 0 2.5rem; /* Match total padding of blog listing (1.25rem page + 1.25rem listing) */
  }
  
  .blog-hero-title-wrapper {
    gap: 0.25rem; /* Tighter on mobile */
  }
  
  .blog-hero-title {
    font-size: 2.75rem; /* Increased for better hierarchy vs post titles */
  }
  
  .blog-hero-subtitle {
    font-size: 0.95rem;
  }
  
  .blog-hero-badge {
    display: none;
  }
  
  /* Blog listing page */
  .blog-listing-page {
    padding: 0 1.25rem 2rem 1.25rem; /* Increased horizontal padding */
  }
  
  .blog-listing {
    padding: 2rem 1.25rem; /* Match individual post padding */
    margin: 0 auto;
  }
  
  .blog-listing-post-title {
    font-size: 1.75rem; /* Increased from 1.5rem for better hierarchy */
  }
  
  .blog-listing-content {
    font-size: 1.0625rem; /* Slightly larger than 1rem (17px) */
    line-height: 1.65; /* Match desktop tighter spacing */
  }
  
  .blog-listing-post {
    margin-bottom: 3rem; /* Reduced from 4rem to save vertical space */
    padding-bottom: 2.5rem; /* Reduced from 3rem */
  }
  
  .blog-listing-date,
  .blog-post-date {
    font-size: 0.8125rem; /* Smaller on mobile (13px) */
  }
  
  .blog-post-author {
    font-size: 0.875rem; /* Smaller on mobile */
  }
  
  /* Individual blog post page */
  .blog-post-page {
    padding: 0 1.25rem 2rem 1.25rem; /* Increased horizontal padding */
    margin: 0;
  }
  
  .blog-post-page article {
    padding: 2rem 1.25rem; /* Increased horizontal padding */
    margin: 0 auto; /* Removed negative margin */
  }
  
  .blog-post-title {
    font-size: 2.5rem; /* Increased from 2.25rem to maintain drama */
  }
  
  .blog-post-content {
    font-size: 1.125rem; /* Increased from 1rem for better readability */
    line-height: 1.65; /* Match desktop tighter spacing */
  }
  
  /* Pull quotes responsive */
  .blog-post-content blockquote,
  .blog-listing-content blockquote {
    padding: 1.5rem 1.5rem;
    font-size: 1.125rem;
    margin: 2rem 0;
  }
  
  .blog-post-content blockquote::before,
  .blog-listing-content blockquote::before {
    font-size: 3.5rem;
    left: 0.5rem;
  }
}