/* =============================================================
   KM BLOG STYLES — /blog/ index and single post pages
   Depends on km-core/km-global.css for all tokens and shared
   component styles (buttons, header, nav, footer).
   ============================================================= */

/* ── Override Twenty Twenty-Five on our template ───────────── */

.km-page body,
body.km-page {
  background-color: var(--km-bg-base);
  margin: 0;
  padding: 0;
}

.km-page .wp-site-blocks,
.km-page .site,
.km-page main,
.km-page .entry {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}


/* ════════════════════════════════════════════════════════════
   PAGE BANNER — shared by index and single post
   ════════════════════════════════════════════════════════════ */

.km-blog-banner {
  position: relative;
  /* Min-height gives the smoke room to breathe.
     padding-top clears the fixed header (88px) + WP admin bar (32px).
     Flexbox centers the inner content within that full height. */
  min-height: 340px;
  display: flex;
  align-items: center;
  padding-top: calc(var(--km-header-height, 88px) + 32px);
  padding-bottom: var(--km-space-xl);
  overflow: hidden;
  border-bottom: 1px solid var(--km-border-subtle);
}

.km-blog-banner__smoke {
  position: absolute;
  inset: 0;
  background-image: var(--km-img-smoke);
  background-size: cover;
  background-position: center 40%;
  opacity: 0.45;
  z-index: 0;
}

/* Featured image as banner background on single posts */
.km-blog-banner__featured-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.km-blog-banner__featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.4);
}

.km-blog-banner__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(14,17,17,0.55) 0%,
      rgba(14,17,17,0.1) 50%,
      rgba(14,17,17,0.75) 100%);
  z-index: 1;
}

.km-blog-banner__inner {
  position: relative;
  z-index: 2;
  animation: km-fade-up 0.6s ease both;
}

/* Index page: "Blog" heading */
.km-blog-banner__title {
  font-family: var(--km-font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--km-gold-mid);
  text-shadow: 0 0 1px var(--km-burgundy);
  line-height: 1;
  margin: 0 0 var(--km-space-xs);
}

.km-blog-banner__sub {
  font-family: var(--km-font-display);
  font-size: var(--km-size-lg);
  font-style: italic;
  font-weight: 300;
  color: var(--km-text-muted);
  margin: 0;
}

/* Single post: article title in the banner */
.km-blog-banner__post-title {
  font-family: var(--km-font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--km-text-light, #f0ece4);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  margin: var(--km-space-sm) 0 0;
  max-width: 800px;
}

/* Single post banner can be taller to accommodate a featured image */
.km-blog-banner--single {
  min-height: 420px;
}


/* ════════════════════════════════════════════════════════════
   BLOG INDEX / SINGLE SHARED SECTION
   ════════════════════════════════════════════════════════════ */

.km-blog-index {
  background: var(--km-bg-base);
  min-height: 40vh;
}

/* Padding at the top so posts don't butt up against the banner */
.km-blog-index .km-container {
  padding-top: var(--km-space-2xl);
}


/* ════════════════════════════════════════════════════════════
   BLOG FEED — single-column full-content index
   ════════════════════════════════════════════════════════════ */

.km-blog-feed {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.km-blog-entry {
  padding-bottom: var(--km-space-2xl);
  margin-bottom: var(--km-space-2xl);
  border-bottom: 1px solid var(--km-border-subtle);
}

.km-blog-entry:last-child {
  border-bottom: none;
}


/* Entry header */
.km-blog-entry__header {
  margin-bottom: var(--km-space-lg);
}

.km-blog-entry__meta {
  display: flex;
  align-items: center;
  gap: var(--km-space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--km-space-sm);
}

.km-blog-entry__category {
  font-size: var(--km-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--km-gold-bright);
  text-decoration: none;
  border: 1px solid var(--km-border-mid);
  border-radius: var(--km-radius-sm);
  padding: 0.15rem 0.5rem;
  background: rgba(138, 91, 24, 0.08);
  transition: all var(--km-transition);
}

.km-blog-entry__category:hover {
  background: rgba(138, 91, 24, 0.18);
  border-color: var(--km-gold-mid);
  color: var(--km-gold-highlight);
}

.km-blog-entry__date {
  font-size: var(--km-size-xs);
  color: var(--km-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Index title links to the post */
.km-blog-entry__title {
  font-family: var(--km-font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 var(--km-space-md);
}

.km-blog-entry__title a {
  color: var(--km-gold-mid);
  text-decoration: none;
  transition: color var(--km-transition);
}

.km-blog-entry__title a:hover {
  color: var(--km-gold-highlight);
}

/* Featured image on index entries */
.km-blog-entry__thumb {
  width: 100%;
  border-radius: var(--km-radius-md);
  overflow: hidden;
  border: 1px solid var(--km-border-subtle);
  margin-bottom: var(--km-space-md);
}

.km-blog-entry__thumb-img {
  width: 100%;
  height: auto;
  display: block;
}


/* Post body content — let WordPress's block styles and our tokens handle it */
.km-blog-entry__content {
  font-size: var(--km-size-md);
  line-height: 1.85;
  color: var(--km-text-body);
}

.km-blog-entry__content p {
  margin-bottom: 1.2em;
}

.km-blog-entry__content h2,
.km-blog-entry__content h3,
.km-blog-entry__content h4 {
  font-family: var(--km-font-display);
  color: var(--km-gold-mid);
  margin: 1.6em 0 0.5em;
  line-height: 1.2;
}

.km-blog-entry__content h2 { font-size: var(--km-size-2xl); font-weight: 700; }
.km-blog-entry__content h3 { font-size: var(--km-size-xl);  font-weight: 600; }
.km-blog-entry__content h4 { font-size: var(--km-size-lg);  font-weight: 600; }

.km-blog-entry__content a {
  color: var(--km-gold-bright);
  text-decoration: underline;
  text-decoration-color: var(--km-border-mid);
  text-underline-offset: 3px;
  transition: all var(--km-transition);
}

.km-blog-entry__content a:hover {
  color: var(--km-gold-highlight);
  text-decoration-color: var(--km-gold-mid);
}

.km-blog-entry__content strong { color: var(--km-gold-mid); }

.km-blog-entry__content blockquote {
  margin: var(--km-space-lg) 0;
  padding: var(--km-space-md) var(--km-space-lg);
  border-left: 3px solid var(--km-gold-mid);
  background: var(--km-bg-surface);
  border-radius: 0 var(--km-radius-sm) var(--km-radius-sm) 0;
  font-family: var(--km-font-display);
  font-style: italic;
  color: var(--km-text-muted);
}

.km-blog-entry__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--km-radius-sm);
}

.km-blog-entry__content pre,
.km-blog-entry__content code {
  font-family: monospace;
  background: var(--km-bg-elevated);
  border: 1px solid var(--km-border-subtle);
  border-radius: var(--km-radius-sm);
}

.km-blog-entry__content code {
  padding: 0.1em 0.4em;
  font-size: 0.9em;
  color: var(--km-gold-bright);
}

.km-blog-entry__content pre {
  padding: var(--km-space-md);
  overflow-x: auto;
}

.km-blog-entry__content pre code {
  border: none;
  padding: 0;
  background: none;
}


/* Tags */
.km-blog-entry__footer {
  margin-top: var(--km-space-lg);
}

.km-blog-entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--km-space-xs);
}

.km-blog-entry__tag {
  font-size: var(--km-size-xs);
  color: var(--km-text-dim);
  text-decoration: none;
  transition: color var(--km-transition);
}

.km-blog-entry__tag:hover {
  color: var(--km-gold-bright);
}


/* ════════════════════════════════════════════════════════════
   SINGLE POST — specific overrides
   ════════════════════════════════════════════════════════════ */

.km-blog-single__container {
  max-width: 780px;
  margin: 0 auto;
}

.km-blog-entry--single {
  border-bottom: none;
  padding-bottom: var(--km-space-xl);
  margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════
   PREV / NEXT POST NAV
   ════════════════════════════════════════════════════════════ */

.km-blog-post-nav {
  display: flex;
  gap: var(--km-space-md);
  flex-wrap: wrap;
  padding: var(--km-space-xl) 0;
  border-top: 1px solid var(--km-border-subtle);
  border-bottom: 1px solid var(--km-border-subtle);
  margin-bottom: var(--km-space-xl);
}

.km-blog-post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 200px;
  text-decoration: none;
  padding: var(--km-space-md);
  background: var(--km-bg-surface);
  border: 1px solid var(--km-border-subtle);
  border-radius: var(--km-radius-md);
  transition: all var(--km-transition);
}

.km-blog-post-nav__link:hover {
  border-color: var(--km-border-mid);
  background: var(--km-bg-elevated);
}

.km-blog-post-nav__link--next {
  text-align: right;
  margin-left: auto;
}

.km-blog-post-nav__dir {
  font-size: var(--km-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--km-gold-bright);
}

.km-blog-post-nav__label {
  font-family: var(--km-font-display);
  font-size: var(--km-size-md);
  font-weight: 600;
  color: var(--km-gold-mid);
  line-height: 1.3;
}


/* ════════════════════════════════════════════════════════════
   COMMENTS — override Twenty Twenty-Five defaults
   ════════════════════════════════════════════════════════════ */

.km-blog-comments {
  padding-top: var(--km-space-xl);
}

/* Comment count heading */
.km-blog-comments .comments-title,
.km-blog-comments #reply-title {
  font-family: var(--km-font-display);
  font-size: var(--km-size-2xl);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--km-gold-mid);
  text-shadow: 0 0 1px var(--km-burgundy);
  margin-bottom: var(--km-space-lg);
}

/* Comment list */
.km-blog-comments .comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--km-space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--km-space-lg);
}

.km-blog-comments .comment-list .children {
  list-style: none;
  padding-left: var(--km-space-xl);
  margin-top: var(--km-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--km-space-md);
}

/* Individual comment */
.km-blog-comments .comment-body {
  background: var(--km-bg-surface);
  border: 1px solid var(--km-border-subtle);
  border-radius: var(--km-radius-lg);
  padding: var(--km-space-md);
  transition: border-color var(--km-transition);
}

.km-blog-comments .comment-body:hover {
  border-color: var(--km-border-mid);
}

.km-blog-comments .comment-author {
  display: flex;
  align-items: center;
  gap: var(--km-space-sm);
  margin-bottom: var(--km-space-sm);
}

.km-blog-comments .comment-author img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  border: 1px solid var(--km-border-subtle);
}

.km-blog-comments .comment-author .fn {
  font-family: var(--km-font-display);
  font-size: var(--km-size-md);
  font-weight: 600;
  color: var(--km-gold-mid);
}

.km-blog-comments .comment-author a {
  color: var(--km-gold-mid);
  text-decoration: none;
}

.km-blog-comments .comment-metadata {
  font-size: var(--km-size-xs);
  color: var(--km-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--km-space-sm);
}

.km-blog-comments .comment-metadata a {
  color: var(--km-text-dim);
  text-decoration: none;
}

.km-blog-comments .comment-content {
  font-size: var(--km-size-sm);
  line-height: 1.75;
  color: var(--km-text-body);
}

.km-blog-comments .comment-content p { margin-bottom: 0.75em; }
.km-blog-comments .comment-content p:last-child { margin-bottom: 0; }

.km-blog-comments .comment-content a {
  color: var(--km-gold-bright);
  text-decoration: underline;
  text-decoration-color: var(--km-border-mid);
}

.km-blog-comments .reply {
  margin-top: var(--km-space-sm);
}

.km-blog-comments .comment-reply-link {
  font-size: var(--km-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--km-gold-bright);
  text-decoration: none;
  transition: color var(--km-transition);
}

.km-blog-comments .comment-reply-link:hover {
  color: var(--km-gold-highlight);
}

/* Comment form */
.km-blog-comments .comment-respond {
  padding-top: var(--km-space-xl);
  border-top: 1px solid var(--km-border-subtle);
}

.km-blog-comments .comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--km-space-md);
}

.km-blog-comments .comment-form p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.km-blog-comments .comment-form label {
  font-size: var(--km-size-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--km-text-muted);
}

.km-blog-comments .comment-form input[type="text"],
.km-blog-comments .comment-form input[type="email"],
.km-blog-comments .comment-form input[type="url"],
.km-blog-comments .comment-form textarea {
  width: 100%;
  background: var(--km-bg-surface);
  border: 1px solid var(--km-border-subtle);
  border-radius: var(--km-radius-sm);
  color: var(--km-text-body);
  font-family: var(--km-font-body);
  font-size: var(--km-size-sm);
  padding: 0.6rem 0.9rem;
  transition: border-color var(--km-transition);
  box-sizing: border-box;
}

.km-blog-comments .comment-form input:focus,
.km-blog-comments .comment-form textarea:focus {
  outline: none;
  border-color: var(--km-gold-mid);
}

.km-blog-comments .comment-form textarea { min-height: 140px; resize: vertical; }

.km-blog-comments .comment-form .form-submit {
  margin-top: var(--km-space-sm);
}

.km-blog-comments .comment-form #submit {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  font-family: var(--km-font-body);
  font-size: var(--km-size-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--km-bg-base);
  background: var(--km-gold-mid);
  border: none;
  border-radius: var(--km-radius-sm);
  cursor: pointer;
  transition: all var(--km-transition);
}

.km-blog-comments .comment-form #submit:hover {
  background: var(--km-gold-bright);
}

/* Awaiting moderation notice */
.km-blog-comments .comment-awaiting-moderation {
  font-size: var(--km-size-xs);
  color: var(--km-text-dim);
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════
   PAGINATION (index)
   ════════════════════════════════════════════════════════════ */

.km-blog-pagination {
  display: flex;
  justify-content: center;
  max-width: 780px;
  margin: var(--km-space-xl) auto var(--km-space-lg);
}

.km-blog-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: var(--km-space-xs);
  flex-wrap: wrap;
  justify-content: center;
}

.km-blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  font-size: var(--km-size-sm);
  font-weight: 600;
  color: var(--km-text-muted);
  text-decoration: none;
  border: 1px solid var(--km-border-subtle);
  border-radius: var(--km-radius-sm);
  background: var(--km-bg-surface);
  transition: all var(--km-transition);
  white-space: nowrap;
}

.km-blog-pagination .page-numbers:hover {
  color: var(--km-gold-bright);
  border-color: var(--km-border-mid);
  background: var(--km-bg-elevated);
}

.km-blog-pagination .page-numbers.current {
  color: var(--km-gold-highlight);
  border-color: var(--km-gold-mid);
  background: rgba(138, 91, 24, 0.12);
  cursor: default;
}

.km-blog-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--km-text-dim);
  cursor: default;
}

.km-blog-pagination .prev.page-numbers,
.km-blog-pagination .next.page-numbers {
  font-family: var(--km-font-display);
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════ */

.km-blog-empty {
  padding: var(--km-space-2xl) 0;
  text-align: center;
}

.km-blog-empty__text {
  font-family: var(--km-font-display);
  font-size: var(--km-size-xl);
  font-style: italic;
  color: var(--km-text-dim);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .km-blog-banner          { min-height: 280px; }
  .km-blog-banner--single  { min-height: 340px; }
  .km-blog-post-nav__link  { min-width: 0; }
  .km-blog-comments .comment-list .children { padding-left: var(--km-space-md); }
}

@media (max-width: 480px) {
  .km-blog-post-nav        { flex-direction: column; }
  .km-blog-post-nav__link--next { text-align: left; margin-left: 0; }
}