/* blog.css — version 1.1.1
   Enforces default black text for titles and body when CMS fields are empty.
   Inline styles from Jinja still override cleanly.
*/

.blog-section {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* ---------- Scrollbar styling ---------- */
.blog-list {
  scrollbar-gutter: stable;
}
.blog-list::-webkit-scrollbar { width: 8px; }
.blog-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
}
.blog-list::-webkit-scrollbar-track { background: transparent; }

/* ---------- Item defaults ---------- */
.blog-item { 
  transition: background-color .15s ease; 

  /* Default variables (used when CMS fields are empty) */
  --blog-title-color: #000000;   /* Title Color (black) */
  --blog-title-size: 1.3rem;     /* Title Font Size */

  --blog-text-color: #000000;    /* Blog Text Color (black) */
  --blog-text-size: 1rem;        /* Blog Text Font Size */

  --blog-category-color: #000000;/* Category Color */
  --blog-category-size: 1.5rem;  /* Category Font Size */
}
.blog-item:hover { background-color: rgba(0,0,0,0.02); }

/* ---------- Typography ---------- */

/* Category (left meta column) */
.blog-item .md\:w-64 .title-font {
  color: var(--blog-category-color, #000000);
  font-size: var(--blog-category-size, 1.5rem);
}

/* Title (main content) */
.blog-item h3.title-font {
  color: var(--blog-title-color, #000000);
  font-size: var(--blog-title-size, 1.3rem);
  font-weight: 600;
}

/* Blog body text */
.blog-item .leading-relaxed {
  color: var(--blog-text-color, #000000);
  font-size: var(--blog-text-size, 1rem);
  line-height: 1.6;
}

/* Date: always match title color */
.blog-item .md\:w-64 .text-sm {
  color: var(--blog-title-color, #000000);
}

/* ---------- Links ---------- */
.blog-readmore {
  color: #1e40af; /* indigo-800 fallback */
  font-weight: 600;
}
.blog-readmore:hover { opacity: .9; }

.blog-doclink {
  color: #374151; /* gray-700 fallback */
  text-decoration: underline;
}

/* ---------- Gallery camera icon ---------- */
.blog-camera { font-size: 1.25em; line-height: 1; }

/* ---------- Small screens ---------- */
@media (max-width: 640px) {
  .blog-list { max-height: none; }
}