/* ============================================================
   craigperler.com — Additional CSS
   Seedlet theme. Medium-style left-aligned layout.
   Sections: 1 Fonts · 2 Tokens · 3 Header/Nav ·
             4 Single post · 5 Homepage list · 6 Mobile
   ============================================================ */

/* ============================================================
   1. FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */
:root {
  --global--font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --global--font-secondary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-headings: var(--global--font-primary);
  --font-base: var(--global--font-primary);

  --global--color-primary: #1e1b4b;     /* text / headings */
  --global--color-secondary: #4338ca;   /* accent: links, active states */
  --global--color-background: #fbfbfa;  /* warm off-white */
  --global--color-border: #e8e8ec;
  --color-meta: #6b6b6b;                /* muted byline */
  --color-excerpt: #555;                /* muted excerpt */

  --wp--preset--color--primary: #4338ca;
  --wp--preset--color--foreground: #1e1b4b;
  --wp--preset--color--background: #fbfbfa;

  --read-width: 720px;
}

body, p, li, .entry-content, .entry-content p,
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .page-title {
  font-family: var(--global--font-primary) !important;
}
body, .entry-content, .entry-content p {
  color: var(--global--color-primary) !important;
  background-color: var(--global--color-background) !important;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .page-title {
  letter-spacing: -0.015em !important;
}
a { color: var(--global--color-secondary) !important; }
.entry-content a {
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  text-decoration-thickness: 1px !important;
}

/* ============================================================
   3. HEADER + NAV  (left-aligned, tight)
   ============================================================ */
.site-header {
  padding-top: 1.25rem !important;
  padding-bottom: 1rem !important;
  margin-bottom: 1.25rem !important;
  border-bottom: 1px solid var(--global--color-border) !important;
  display: block !important;
  text-align: left !important;
}
.site-header .site-branding,
.site-header .primary-navigation {
  max-width: var(--read-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  width: 100% !important;
  float: none !important;
  text-align: left !important;
}
.site-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem) !important;
  font-weight: 800 !important;
  margin: 0 !important;
  text-align: left !important;
}
.site-title a { color: var(--global--color-primary) !important; }

/* Nav: kill Seedlet's flex centering, pin left */
.primary-navigation {
  display: flex !important;
  justify-content: flex-start !important;
  margin-top: 0.6rem !important;
}
.primary-navigation .primary-menu-container { margin: 0 !important; }
.primary-navigation .menu-wrapper,
.primary-navigation ul {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 1.75rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.primary-navigation .menu-item { margin: 0 !important; }
.primary-navigation a {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: var(--color-meta) !important;
  text-decoration: none !important;
  padding-bottom: 2px !important;
  transition: color 0.15s ease !important;
}
.primary-navigation a:hover { color: var(--global--color-secondary) !important; }
.primary-navigation .current-menu-item a {
  color: var(--global--color-primary) !important;
  border-bottom: 2px solid var(--global--color-secondary) !important;
}

/* ============================================================
   4. SINGLE POST + PAGE  (left-aligned reading column)
   ============================================================ */
.single .entry-header,
.single .entry-content,
.single .post-thumbnail,
.single .entry-footer,
.single .post-navigation,
.single .comments-area,
.page .entry-header,
.page .entry-content {
  max-width: var(--read-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  width: auto !important;
  float: none !important;
  display: block !important;
  grid-column: auto !important;
}
.single .entry-title,
.page .entry-title {
  font-size: clamp(1.7rem, 3vw, 2.1rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
}
.page .entry-content { font-size: 1.05rem !important; line-height: 1.58 !important; }
.single .post-thumbnail img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin-bottom: 1.5rem !important;
}
.single .entry-content { font-size: 1.05rem !important; line-height: 1.58 !important; }
.single .entry-content > * { margin-bottom: 1.5rem !important; }
.single .entry-content h2 {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin-top: 2.25rem !important;
}
.single .entry-content img,
.single .entry-content figure { border-radius: 8px !important; }
.single .entry-content pre,
.single .entry-content code {
  font-family: "SF Mono", "Fira Code", Consolas, monospace !important;
  font-size: 0.9rem !important;
}
.single .entry-content pre {
  background: #1e1b4b !important;
  color: #e5e5e8 !important;
  padding: 1.25rem !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
}
/* Lists: breathe with the body rhythm */
.single .entry-content ul,
.single .entry-content ol,
.page .entry-content ul,
.page .entry-content ol {
  padding-left: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.single .entry-content li,
.page .entry-content li {
  line-height: 1.58 !important;
  margin-bottom: 0.4rem !important;
}
/* Blockquote: editorial left rule */
.single .entry-content blockquote,
.page .entry-content blockquote {
  border-left: 3px solid var(--global--color-secondary) !important;
  margin: 1.75rem 0 !important;
  padding: 0.25rem 0 0.25rem 1.25rem !important;
  color: var(--color-excerpt) !important;
  font-style: italic !important;
}
/* Inline code: tinted chip — but NOT code inside <pre> blocks */
.single .entry-content :not(pre) > code,
.page .entry-content :not(pre) > code {
  background: rgba(67, 56, 202, 0.08) !important;
  color: var(--global--color-primary) !important;
  padding: 0.1em 0.4em !important;
  border-radius: 4px !important;
  font-size: 0.88em !important;
}

/* Single-post footer: muted byline, hide SR labels + modified date */
.single .entry-footer {
  max-width: var(--read-width) !important;
  margin: 2rem auto 0 auto !important;
  padding: 1rem 1.5rem 0 1.5rem !important;
  border-top: 1px solid var(--global--color-border) !important;
  font-size: 0.85rem !important;
  color: var(--color-meta) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
.single .entry-footer a { color: var(--color-meta) !important; text-decoration: none !important; }
.single .entry-footer a:hover { color: var(--global--color-secondary) !important; }
.single .entry-footer .screen-reader-text,
.single .entry-footer .svg-icon,
.single .entry-footer time.updated { display: none !important; }
.single .entry-footer .byline::after { content: "·"; margin-left: 0.5rem; opacity: 0.6; }

/* Post navigation (prev/next): contained, clean */
.post-navigation {
  max-width: var(--read-width) !important;
  margin: 2.5rem auto !important;
  padding: 1.5rem 1.5rem 0 1.5rem !important;
  border-top: 1px solid var(--global--color-border) !important;
}
.post-navigation .nav-links {
  display: flex !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
}
.post-navigation .meta-nav {
  display: block !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--color-meta) !important;
  margin-bottom: 0.25rem !important;
}
.post-navigation .post-title {
  font-weight: 600 !important;
  color: var(--global--color-primary) !important;
  line-height: 1.3 !important;
}
.post-navigation .nav-next { text-align: right !important; }
.post-navigation a:hover .post-title { color: var(--global--color-secondary) !important; }

/* ============================================================
   5. HOMEPAGE LIST  (byline-on-top, thumbnail right)
   ============================================================ */
.home article.post,
.blog article.post {
  max-width: var(--read-width) !important;
  margin: 0 auto !important;
  padding: 2.25rem 1.5rem !important;
  border-bottom: 1px solid var(--global--color-border) !important;
  display: grid !important;
  grid-template-columns: 1fr 160px !important;
  grid-template-areas:
    "byline  image"
    "title   image"
    "excerpt image" !important;
  column-gap: 2rem !important;
  align-items: start !important;
}
/* No image → single column */
.home article.post:not(.has-post-thumbnail),
.blog article.post:not(.has-post-thumbnail) {
  grid-template-columns: 1fr !important;
  grid-template-areas: "byline" "title" "excerpt" !important;
}
/* First card: tighten top spacing, no stray top border */
.home article.post:first-of-type,
.blog article.post:first-of-type {
  padding-top: 1rem !important;
  border-top: 0 !important;
}

/* Byline (moved above title): muted, no links/category/icons/border */
.home article.post .entry-footer,
.blog article.post .entry-footer {
  grid-area: byline !important;
  margin: 0 0 0.75rem 0 !important;
  border-top: 0 !important;
  font-size: 0.85rem !important;
  color: var(--color-meta) !important;
  opacity: 1 !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}
.home article.post .entry-footer a,
.blog article.post .entry-footer a {
  color: var(--color-meta) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}
.home article.post .entry-footer a:hover,
.blog article.post .entry-footer a:hover {
  color: var(--global--color-secondary) !important;
}
.home article.post .entry-footer .cat-links,
.blog article.post .entry-footer .cat-links,
.home article.post .entry-footer .edit-link,
.blog article.post .entry-footer .edit-link,
.home article.post .entry-footer .svg-icon,
.blog article.post .entry-footer .svg-icon {
  display: none !important;
}

/* Title: no underline, weight carries it */
.home article.post .entry-header,
.blog article.post .entry-header {
  grid-area: title !important;
  margin: 0 !important;
}
.home article.post .entry-title,
.blog article.post .entry-title {
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 0.5rem 0 !important;
  text-align: left !important;
}
.home article.post .entry-title a,
.blog article.post .entry-title a {
  color: var(--global--color-primary) !important;
  text-decoration: none !important;
}
.home article.post .entry-title a:hover,
.blog article.post .entry-title a:hover {
  color: var(--global--color-secondary) !important;
}

/* Excerpt: short, muted */
.home article.post .entry-content,
.blog article.post .entry-content {
  grid-area: excerpt !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: var(--color-excerpt) !important;
  display: block !important;
}
.home article.post .entry-content p,
.blog article.post .entry-content p {
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Thumbnail: right column, vertically centered, palette-muted */
.home article.post .post-thumbnail,
.blog article.post .post-thumbnail {
  grid-area: image !important;
  align-self: center !important;
  width: 160px !important;
  margin: 0 !important;
  float: none !important;
}
.home article.post .post-thumbnail img,
.blog article.post .post-thumbnail img {
  width: 160px !important;
  height: 110px !important;
  object-fit: contain !important;
  background: var(--global--color-background) !important;  /* was #f2f2f4 — blends letterbox into page */

  border-radius: 6px !important;
  display: block !important;
  /* Mute neon thumbnails so they sit with the indigo palette.
     Stopgap while backfilling images — remove when assets are cooler-toned. */
  filter: saturate(0.8) contrast(0.97) !important;
  transition: filter 0.2s ease !important;
}
.home article.post:hover .post-thumbnail img,
.blog article.post:hover .post-thumbnail img {
  filter: saturate(1) contrast(1) !important;  /* full color on hover */
}

/* Hide modified date in homepage byline too */
.home article.post .entry-footer time.updated,
.blog article.post .entry-footer time.updated { display: none !important; }

/* ============================================================
   7. PAGINATION + SITE FOOTER + FOCUS
   ============================================================ */
/* Pagination (page numbers under the post list) */
.navigation.pagination {
  max-width: var(--read-width) !important;
  margin: 1rem auto 3rem auto !important;
  padding: 0 1.5rem !important;
}
.navigation.pagination .nav-links {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.4rem !important;
}
.navigation.pagination .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 2rem !important;
  padding: 0.35rem 0.6rem !important;
  font-size: 0.9rem !important;
  color: var(--color-meta) !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.navigation.pagination a.page-numbers:hover {
  background: rgba(67, 56, 202, 0.08) !important;
  color: var(--global--color-secondary) !important;
}
.navigation.pagination .page-numbers.current {
  background: var(--global--color-secondary) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.navigation.pagination .page-numbers.dots { background: none !important; }

/* Site footer */
.site-footer,
.site-info {
  max-width: var(--read-width) !important;
  margin: 3rem auto 0 auto !important;
  padding: 1.5rem !important;
  border-top: 1px solid var(--global--color-border) !important;
  font-size: 0.85rem !important;
  color: var(--color-meta) !important;
  text-align: left !important;
}
.site-footer a,
.site-info a { color: var(--color-meta) !important; }
.site-footer a:hover,
.site-info a:hover { color: var(--global--color-secondary) !important; }

/* Keyboard focus ring (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--global--color-secondary) !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

/* ============================================================
   6. MOBILE
   ============================================================ */
@media (max-width: 700px) {
  .home article.post.has-post-thumbnail .entry-content,
  .blog article.post.has-post-thumbnail .entry-content {
    display: block !important;
  }
  .home article.post .post-thumbnail,
  .blog article.post .post-thumbnail {
    float: none !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
  }
  .home article.post .post-thumbnail img,
  .blog article.post .post-thumbnail img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
  }
  .post-navigation .nav-links { flex-direction: column !important; }
  .post-navigation .nav-next { text-align: left !important; }
}