/* ================================================================
   KK VET & Feed Supplies — Blog Stylesheet (v1.1.0)
   Loaded only on blog pages via inc/enqueue.php
   ================================================================ */

/* ── Blog hero (short variant) ─────────────────────────────────── */
.blog-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: 3rem;
  min-height: 280px;
  display: flex;
  align-items: center;
}
.blog-hero__inner { position: relative; }
.blog-hero h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: #fff;
  margin-bottom: .75rem;
}
.blog-hero p { color: rgba(255,255,255,.8); font-size: 1.0625rem; }

/* ── Breadcrumb ─────────────────────────────────────────────────── */
.breadcrumb {
  font-size: .8125rem;
  color: rgba(255,255,255,.65);
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .375rem;
  align-items: center;
}
.breadcrumb a { color: rgba(255,255,255,.8); transition: color .2s; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb__sep { opacity: .5; }

/* ── Blog layout ────────────────────────────────────────────────── */
.blog-layout {
  padding-block: 3.5rem;
}
.blog-layout__inner {
  display: grid;
  gap: 3rem;
}
@media (min-width: 64rem) {
  .blog-layout__inner { grid-template-columns: 1fr 18rem; }
}

/* ── Blog grid ──────────────────────────────────────────────────── */
.blog-grid { display: grid; gap: 2rem; }
@media (min-width: 40rem) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .blog-grid { grid-template-columns: 1fr; }
}
@media (min-width: 80rem) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Blog card ──────────────────────────────────────────────────── */
.blog-card {
  background: var(--color-white);
  border: 1px solid rgba(213,216,232,.6);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .3s, transform .3s;
}
.blog-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }

.blog-card__image {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}
.blog-card__image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.blog-card:hover .blog-card__image img { transform: scale(1.06); }

.blog-card__image-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card__image-placeholder svg { opacity: .4; }

.read-time-badge {
  position: absolute;
  bottom: .75rem;
  right: .75rem;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  padding: .25rem .6rem;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}

.blog-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.blog-card__category {
  display: inline-block;
  padding: .25rem .75rem;
  background: rgba(31,58,140,.08);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  align-self: flex-start;
}
.blog-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.blog-card__title a { color: var(--color-foreground); transition: color .2s; }
.blog-card__title a:hover { color: var(--color-primary); }
.blog-card__excerpt { font-size: .875rem; color: var(--color-muted-fg); line-height: 1.65; }

.blog-card__footer {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.blog-card__avatar {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-muted-bg);
  flex-shrink: 0;
}
.blog-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__meta { font-size: .8125rem; color: var(--color-muted-fg); }
.blog-card__meta strong { color: var(--color-foreground); }
.blog-card__read-more {
  margin-left: auto;
  color: var(--color-accent);
  font-size: .8125rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color .2s;
}
.blog-card__read-more:hover { color: var(--color-accent-dark); }

/* ── Pagination ─────────────────────────────────────────────────── */
.kkvet-pagination {
  margin-top: 2.5rem;
  display: flex;
  justify-content: center;
}
.kkvet-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  align-items: center;
}
.kkvet-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem; height: 2.5rem;
  padding: 0 .75rem;
  border-radius: var(--radius-lg);
  font-size: .875rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
  color: var(--color-foreground);
  background: var(--color-white);
  transition: all .2s;
}
.kkvet-pagination .page-numbers:hover,
.kkvet-pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.kkvet-pagination .page-numbers.dots { border: none; background: none; }

/* ── Sidebar ────────────────────────────────────────────────────── */
.blog-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.blog-sidebar__widget {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(213,216,232,.6);
}
.blog-sidebar__widget-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-accent);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid rgba(234,107,16,.2);
}
.blog-sidebar__widget ul { display: flex; flex-direction: column; gap: .5rem; }
.blog-sidebar__widget li a {
  font-size: .9375rem;
  color: var(--color-foreground);
  transition: color .2s;
  padding-block: .25rem;
  display: block;
  border-bottom: 1px solid var(--color-border);
}
.blog-sidebar__widget li:last-child a { border-bottom: none; }
.blog-sidebar__widget li a:hover { color: var(--color-primary); }
.widget_search .search-form { display: flex; gap: .5rem; }
.widget_search input[type="search"] {
  flex: 1; padding: .6rem .875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: .9375rem;
}
.widget_search input[type="submit"] {
  padding: .6rem 1rem;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--radius-lg);
  font-weight: 700; font-size: .875rem;
  cursor: pointer; transition: background .2s;
}
.widget_search input[type="submit"]:hover { background: #16306e; }

/* ── Single post ────────────────────────────────────────────────── */
.single-post-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: 3rem;
}
.single-post-hero h1 {
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  color: #fff;
  max-width: 52rem;
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
.single-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: .875rem;
  color: rgba(255,255,255,.8);
  align-items: center;
}
.single-post-meta a { color: rgba(255,255,255,.9); transition: color .2s; }
.single-post-meta a:hover { color: var(--color-accent); }
.post-category-pill {
  display: inline-block;
  padding: .2rem .75rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Entry content ──────────────────────────────────────────────── */
.entry-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(14,26,56,.85);
  max-width: 760px;
  margin-inline: auto;
}
.entry-content p      { margin-bottom: 1.5rem; }
.entry-content h2     { font-size: clamp(1.25rem, 2.5vw, 1.75rem); margin-block: 2.5rem 1rem; color: var(--color-primary); }
.entry-content h3     { font-size: clamp(1.1rem, 2vw, 1.375rem); margin-block: 2rem .875rem; }
.entry-content h4     { font-size: 1.0625rem; margin-block: 1.75rem .75rem; }
.entry-content ul,
.entry-content ol     { margin-bottom: 1.5rem; padding-left: 1.75rem; }
.entry-content li     { margin-bottom: .5rem; line-height: 1.7; }
.entry-content a      { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.entry-content a:hover { color: var(--color-accent); }
.entry-content img    {
  border-radius: var(--radius-xl);
  margin-block: 1.5rem;
  display: block;
  max-width: 100%;
}
.entry-content blockquote {
  border-left: 4px solid var(--color-accent);
  padding: 1.25rem 1.5rem;
  margin-block: 2rem;
  background: rgba(234,107,16,.04);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-style: italic;
  color: var(--color-muted-fg);
}
.entry-content blockquote p { margin-bottom: 0; }
.entry-content code {
  font-family: monospace;
  font-size: .9em;
  background: rgba(31,58,140,.07);
  padding: .125rem .4rem;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
}
.entry-content pre {
  background: var(--color-foreground);
  color: rgba(255,255,255,.9);
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  overflow-x: auto;
  margin-block: 1.5rem;
  font-size: .875rem;
}
.entry-content pre code { background: none; padding: 0; color: inherit; }
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.5rem;
  font-size: .9375rem;
}
.entry-content th {
  background: var(--color-primary);
  color: #fff;
  padding: .75rem 1rem;
  text-align: left;
  font-weight: 700;
}
.entry-content td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.entry-content tr:nth-child(even) td { background: rgba(31,58,140,.03); }

/* ── Author box ─────────────────────────────────────────────────── */
.author-box {
  display: flex;
  gap: 1.25rem;
  background: var(--color-white);
  border: 1px solid rgba(213,216,232,.6);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  margin-block: 3rem;
  max-width: 760px;
  margin-inline: auto;
}
.author-box__avatar {
  width: 5rem; height: 5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-muted-bg);
}
.author-box__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-box__name { font-weight: 700; font-size: 1.125rem; margin-bottom: .25rem; }
.author-box__bio  { font-size: .9375rem; color: var(--color-muted-fg); line-height: 1.6; }

/* ── Related posts ──────────────────────────────────────────────── */
.related-posts { padding-block: 3rem 2rem; }
.related-posts__heading {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  margin-bottom: 1.5rem;
}
.related-posts__grid { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) {
  .related-posts__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Post navigation ────────────────────────────────────────────── */
.post-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 2.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 2rem;
  max-width: 760px;
  margin-inline: auto;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: .875rem;
  color: var(--color-foreground);
  background: var(--color-white);
  transition: all .2s;
}
.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ── Comments ───────────────────────────────────────────────────── */
.comments-area {
  padding-block: 2.5rem;
  border-top: 1px solid var(--color-border);
  max-width: 760px;
  margin-inline: auto;
}
.comments-title { font-size: 1.375rem; margin-bottom: 2rem; }
.comment-list   { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.comment { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1.5rem; }
.comment-author { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-weight: 700; }
.comment-meta { font-size: .8125rem; color: var(--color-muted-fg); }
.comment-content p { font-size: .9375rem; line-height: 1.7; }
.reply a { font-size: .8125rem; color: var(--color-primary); font-weight: 600; }

.comment-respond { margin-top: 2rem; }
.comment-respond h3 { font-size: 1.25rem; margin-bottom: 1.5rem; }
.comment-form { display: flex; flex-direction: column; gap: 1rem; }
.comment-form label { font-size: .875rem; font-weight: 700; display: block; margin-bottom: .375rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: .75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: .9375rem;
  transition: border-color .2s, box-shadow .2s;
}
.comment-form input:focus,
.comment-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(31,58,140,.15);
  outline: none;
}
.comment-form textarea { resize: vertical; min-height: 8rem; }
.comment-form .submit {
  padding: .75rem 2rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .9375rem;
  cursor: pointer;
  transition: background .2s, transform .15s;
  align-self: flex-start;
}
.comment-form .submit:hover { background: #16306e; transform: scale(1.02); }

/* ── Search page ────────────────────────────────────────────────── */
.search-empty-state {
  text-align: center;
  padding-block: 4rem 2rem;
}
.search-empty-state__icon { font-size: 4rem; line-height: 1; margin-bottom: 1.5rem; opacity: .4; }
.search-empty-state h2 { font-size: 1.5rem; margin-bottom: .75rem; }
.search-empty-state p  { color: var(--color-muted-fg); margin-bottom: 1.75rem; }

/* ── Gutenberg block styles ─────────────────────────────────────── */
.entry-content .wp-block-image { margin-block: 2rem; }
.entry-content .wp-block-quote {
  border-left: 4px solid var(--color-accent);
  padding: 1.25rem 1.5rem;
  font-style: italic;
}
.entry-content .wp-block-pullquote {
  border-top: 4px solid var(--color-primary);
  border-bottom: 4px solid var(--color-primary);
  padding: 2rem;
  text-align: center;
  font-size: 1.25rem;
  font-style: italic;
}
.entry-content .wp-block-separator {
  border: none;
  border-top: 2px solid var(--color-border);
  margin-block: 2.5rem;
}

/* ── 404 branded (Task 11f) ─────────────────────────────────────── */
.kkvet-404-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: 1rem;
}
.kkvet-404__code  { font-size: clamp(5rem, 20vw, 8rem); font-weight: 800; color: var(--color-accent); line-height: 1; font-family: var(--font-display); }
.kkvet-404__title { font-size: clamp(1.25rem, 4vw, 2rem); color: #fff; margin-block: 1rem .75rem; }
.kkvet-404__inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.kkvet-404__inner p { color: rgba(255,255,255,.75); max-width: 32rem; line-height: 1.7; }
.kkvet-404__ctas { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .5rem; }