/* ==========================================================================
   catsitter.com blog styles
   The site loads the standalone Tailwind CDN (Preflight resets content tags)
   with no typography plugin, so article bodies need explicit styling here.
   Sizes are in px on purpose where it aids predictability; the reading measure
   is in em so it tracks the font size as it scales down on mobile.
   ========================================================================== */

/* ---------- Category pill (one token across every surface) ---------- */
.blog-meta .cat,
.blog-list-meta .cat,
.article-meta .cat {
  background: rgba(84, 90, 250, 0.1);
  color: #3f44d6;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}

/* ---------- Featured article (blog index) ---------- */
.featured-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #545afa;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.featured-title {
  font-size: 44px;
  line-height: 1.12;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  max-width: 100%;
  overflow-wrap: break-word;
  transition: color 0.15s ease;
}

.featured-link:hover .featured-title {
  color: #545afa;
}

.featured-excerpt {
  font-size: 19px;
  line-height: 1.6;
  color: #4b5563;
  margin: 0 0 18px;
  max-width: 100%;
}

/* ---------- Shared meta row (featured) ---------- */
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: #4b5563;
}

.blog-meta .sep {
  color: #cbd5e1;
}

/* ---------- Blog index list (one row per article) ---------- */
.blog-list-item {
  padding: 30px 0;
  border-bottom: 1px solid #e5e7eb;
}

.blog-list-item:first-child {
  padding-top: 4px;
}

.blog-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 10px;
}

.blog-list-meta .sep {
  color: #cbd5e1;
}

.blog-list-title {
  font-size: 25px;
  line-height: 1.25;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  overflow-wrap: break-word;
  transition: color 0.15s ease;
}

.blog-list-item a:hover .blog-list-title {
  color: #545afa;
}

.blog-list-excerpt {
  font-size: 16px;
  line-height: 1.65;
  color: #4b5563;
  margin: 0 0 12px;
  max-width: 64ch;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #545afa;
}

.blog-read-more svg {
  transition: transform 0.15s ease;
}

.blog-list-item a:hover .blog-read-more svg {
  transform: translateX(3px);
}

/* ---------- Keyboard focus (was invisible) ---------- */
.featured-link:focus-visible,
.blog-back-link:focus-visible,
.blog-read-more:focus-visible {
  outline: 2px solid #545afa;
  outline-offset: 3px;
  border-radius: 6px;
}

.blog-list-item:has(a:focus-visible) {
  outline: 2px solid #545afa;
  outline-offset: 4px;
  border-radius: 10px;
}

/* ---------- Article page (post) ---------- */
.blog-back-link {
  display: inline-block;
  color: #545afa;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 22px;
  text-decoration: none;
}

.blog-back-link:hover {
  text-decoration: underline;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 16px;
}

.article-meta .sep {
  color: #cbd5e1;
}

.article-title {
  font-size: 42px;
  line-height: 1.14;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 780px;
  overflow-wrap: break-word;
}

.article-rule {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 0 0 30px;
}

/* The reading surface itself */
.article-body {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  color: #374151;
  max-width: 38em;
  overflow-wrap: break-word;
}

.article-body > *:first-child {
  margin-top: 0;
}

.article-body p {
  margin: 0 0 24px;
}

/* Lede: the opening paragraph leads with confidence */
.article-body > p:first-of-type {
  font-size: 21px;
  line-height: 1.6;
  color: #1f2937;
}

.article-body h2 {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
  margin: 48px 0 12px;
}

.article-body h3 {
  font-size: 23px;
  line-height: 1.4;
  font-weight: 600;
  color: #1f2937;
  margin: 36px 0 8px;
}

.article-body h2 + p,
.article-body h3 + p {
  margin-top: 0;
}

.article-body ul,
.article-body ol {
  margin: 0 0 24px;
  padding-left: 26px;
}

.article-body ul {
  list-style: disc;
}

.article-body ol {
  list-style: decimal;
}

.article-body li {
  margin: 0 0 10px;
  padding-left: 6px;
  line-height: inherit;
}

.article-body li::marker {
  color: #545afa;
}

.article-body strong {
  font-weight: 600;
  color: #111827;
}

.article-body a {
  color: #545afa;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  overflow-wrap: break-word;
}

.article-body a:hover {
  color: #3f44d6;
}

/* One deliberate warm accent so the page is not monochrome indigo */
.article-body blockquote {
  margin: 32px 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--color-primary, #faaf19);
  color: #4b5563;
  font-style: italic;
}

.article-body img {
  border-radius: 10px;
  margin: 28px 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .featured-title {
    font-size: 31px;
  }
  .featured-excerpt {
    font-size: 17px;
  }
  .article-title {
    font-size: 30px;
  }
  .article-body {
    font-size: 17px;
  }
  .article-body > p:first-of-type {
    font-size: 19px;
  }
  .article-body h2 {
    font-size: 25px;
    margin-top: 40px;
  }
  .article-body h3 {
    font-size: 20px;
  }
  .blog-list-title {
    font-size: 21px;
  }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .featured-title,
  .blog-list-title,
  .blog-read-more svg {
    transition: none;
  }
  .blog-list-item a:hover .blog-read-more svg {
    transform: none;
  }
}