/*
 * W1Network Pro — SEO Structural Enhancements v8.0
 * File: css/seo-schema.css
 *
 * Breadcrumb, reading progress, TOC, and meta visual styles
 * that complement the schema markup in functions-seo.php
 */

/* ─── BREADCRUMB ─────────────────────────────────────────────────────────── */
.post-breadcrumb {
  margin-bottom: 1.25em;
  font-size:     var(--fs-sm);
}
.breadcrumb-list {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         0.3em 0.4em;
  list-style:  none;
  padding:     0;
  margin:      0;
  color:       var(--tx-2);
}
.breadcrumb-list a {
  color:       var(--tx-2);
  transition:  color var(--dur-fast) ease;
}
.breadcrumb-list a:hover { color: var(--clr-primary); }
.breadcrumb-list li[aria-hidden="true"] { color: var(--tx-3); }
.breadcrumb-current {
  color:       var(--tx-1);
  font-weight: 500;
  /* Truncate very long titles on mobile */
  max-width:   28ch;
  overflow:    hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* ─── TABLE OF CONTENTS ──────────────────────────────────────────────────── */
.post-toc {
  background:    var(--bg-2);
  border:        1px solid var(--bd-2);
  border-radius: var(--radius-lg);
  padding:       1.25em 1.5em;
  margin:        2em 0;
  font-size:     var(--fs-sm);
}
.post-toc summary,
.post-toc-title {
  font-family:   var(--ff-heading);
  font-size:     0.9375rem;
  font-weight:   700;
  color:         var(--tx-0);
  cursor:        pointer;
  list-style:    none;
  display:       flex;
  align-items:   center;
  gap:           0.5em;
  user-select:   none;
}
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary::before {
  content:     '📋';
  font-size:   1em;
}
.post-toc[open] summary::before { content: '📋'; }

.post-toc ol {
  margin:      0.8em 0 0;
  padding-left: 1.4em;
  list-style:  decimal;
}
.post-toc ol ol { list-style: lower-alpha; margin-top: 0.3em; }
.post-toc li {
  margin-bottom: 0.4em;
  line-height:   1.45;
}
.post-toc a {
  color:           var(--tx-1);
  text-decoration: none;
  transition:      color var(--dur-fast) ease;
}
.post-toc a:hover { color: var(--clr-primary); text-decoration: underline; }

/* ─── ESTIMATED READ TIME BADGE ──────────────────────────────────────────── */
.read-time-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           0.35em;
  font-size:     var(--fs-xs);
  font-weight:   600;
  color:         var(--tx-2);
  background:    var(--bg-3);
  border:        1px solid var(--bd-1);
  border-radius: var(--radius-full);
  padding:       3px 10px;
  letter-spacing: 0.03em;
}

/* ─── POST META ROW ──────────────────────────────────────────────────────── */
.single-post-meta {
  display:      flex;
  flex-wrap:    wrap;
  align-items:  center;
  gap:          0.5em 1em;
  font-size:    var(--fs-sm);
  color:        var(--tx-2);
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--bd-1);
}
.single-post-meta .post-category {
  font-weight:   700;
  font-size:     0.75rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--clr-primary);
  background:     rgba(255, 0, 80, 0.1);
  border:         1px solid rgba(255, 0, 80, 0.25);
  border-radius:  var(--radius-full);
  padding:        3px 10px;
}
.single-post-meta .post-date,
.single-post-meta .post-views,
.single-post-meta .post-read-time,
.single-post-meta .post-author {
  display:     flex;
  align-items: center;
  gap:         4px;
}
.single-post-meta svg { flex-shrink: 0; }

/* ─── TAGS ───────────────────────────────────────────────────────────────── */
.post-tags {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.4em;
  margin:        2em 0;
}
.post-tags-label {
  font-size:     var(--fs-sm);
  font-weight:   600;
  color:         var(--tx-2);
  align-self:    center;
  margin-right:  0.2em;
}
.post-tag {
  padding:       4px 12px;
  background:    var(--bg-2);
  border:        1px solid var(--bd-1);
  border-radius: var(--radius-full);
  font-size:     var(--fs-sm);
  font-weight:   600;
  color:         var(--tx-1);
  transition:    background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  min-height:    30px;
  display:       inline-flex;
  align-items:   center;
}
.post-tag:hover {
  background:    rgba(255, 0, 80, 0.1);
  border-color:  rgba(255, 0, 80, 0.35);
  color:         var(--clr-primary);
}

/* ─── AUTHOR BIO CARD ────────────────────────────────────────────────────── */
.author-bio-card {
  display:       flex;
  gap:           1.25em;
  align-items:   flex-start;
  background:    var(--bg-2);
  border:        1px solid var(--bd-2);
  border-radius: var(--radius-lg);
  padding:       1.5em;
  margin:        2.5em 0;
}
.author-bio-avatar {
  width:         64px;
  height:        64px;
  border-radius: var(--radius-full);
  border:        2px solid var(--clr-primary);
  object-fit:    cover;
  flex-shrink:   0;
}
.author-bio-body { flex: 1; min-width: 0; }
.author-bio-name {
  font-family:    var(--ff-heading);
  font-size:      1rem;
  font-weight:    700;
  color:          var(--tx-0);
  margin-bottom:  0.2em;
}
.author-bio-label {
  font-size:   var(--fs-xs);
  font-weight: 600;
  color:        var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: 0.5em;
}
.author-bio-text {
  font-size:   var(--fs-sm);
  color:       var(--tx-1);
  line-height: 1.6;
}
@media (max-width: 479px) {
  .author-bio-card { flex-direction: column; }
  .author-bio-avatar { width: 52px; height: 52px; }
}

/* ─── RELATED POSTS SECTION ──────────────────────────────────────────────── */
.related-posts {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bd-1);
}
.related-posts-header {
  font-family:    var(--ff-heading);
  font-size:      var(--fs-h2);
  font-weight:    800;
  letter-spacing: -0.03em;
  margin-bottom:  1.5em;
  color:          var(--tx-0);
}