/* Single blog post — prev/next nav, related articles, comments (new, not in the original static site) */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 3rem; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav-link { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.5rem; background: var(--bg); border-radius: var(--radius-md); transition: background 0.18s; }
.post-nav-link:hover { background: #ececf2; }
.post-nav-next { text-align: right; }
.post-nav-label { font-size: 0.72rem; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: 0.06em; }
.post-nav-title { font-size: 0.9rem; font-weight: 700; color: var(--ink); }

.related-section { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(0,0,0,0.07); }
.related-title { font-size: 1.15rem; font-weight: 900; color: var(--ink); margin-bottom: 1.5rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 700px) { .related-grid { grid-template-columns: 1fr; } }
.related-card { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.22s var(--ease), box-shadow 0.22s; }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.08); }
.related-card-img { height: 140px; overflow: hidden; }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-card-body { padding: 1rem 1.1rem; }
.related-card-body .article-cat { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 0.4rem; }
.related-card-body h3 { font-size: 0.88rem; font-weight: 700; color: var(--ink); line-height: 1.4; }

.comments-area { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid rgba(0,0,0,0.07); }
.comments-title { font-size: 1.15rem; font-weight: 900; color: var(--ink); margin-bottom: 1.5rem; }
.comment-list { list-style: none; display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.comment-list .children { list-style: none; margin-top: 1.25rem; margin-left: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.comment-body { background: var(--bg); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; }
.comment-author .fn { font-weight: 700; font-size: 0.88rem; color: var(--ink); font-style: normal; }
.comment-meta { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.6rem; }
.comment-meta a { color: var(--muted); }
.comment-content p { font-size: 0.87rem; color: #3a3a5c; line-height: 1.65; }
.reply { margin-top: 0.6rem; }
.comment-reply-link { font-size: 0.78rem; font-weight: 700; color: var(--red); }
.no-comments { font-size: 0.88rem; color: var(--muted); margin-bottom: 1.5rem; }
#respond .comment-form input[type="text"],
#respond .comment-form input[type="email"],
#respond .comment-form input[type="url"] {
  padding: 0.75rem 1rem; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px;
  font-size: 0.88rem; font-family: inherit; width: 100%;
}
.comment-notes, .logged-in-as { font-size: 0.82rem; color: var(--muted); margin-bottom: 1rem; }

/* In-article components used across the imported blog posts */
.step-block, .solution-card { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.step-num, .solution-num {
  width: 32px; height: 32px; flex-shrink: 0; background: var(--red); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.85rem; margin-top: 0.1rem;
}
.solution-card { background: var(--bg); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; align-items: flex-start; }
.solution-body h3 { margin-top: 0 !important; }

.checklist { background: rgba(22,163,74,0.05); border: 1px solid rgba(22,163,74,0.2); border-radius: var(--radius-md); padding: 1.5rem 1.75rem; margin: 1.75rem 0; }
.checklist h3 { margin-top: 0 !important; }
.checklist ul { margin: 0.75rem 0 0 0 !important; }
.checklist li { list-style: none !important; padding-left: 1.5rem; position: relative; }
.checklist li::before { content: '☐'; position: absolute; left: 0; color: #16a34a; }

.sport-grid, .criteria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.75rem 0; }
@media (max-width: 700px) { .sport-grid, .criteria-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sport-grid, .criteria-grid { grid-template-columns: 1fr; } }
.sport-item, .criteria-item { background: var(--bg); border-radius: var(--radius-md); padding: 1.25rem 1.4rem; }
.sport-item h3, .criteria-item h3 { font-size: 0.95rem !important; margin: 0 0 0.5rem !important; }
.sport-item p, .criteria-item p { font-size: 0.85rem !important; margin-bottom: 0 !important; }

.app-card { display: flex; gap: 1.1rem; background: var(--bg); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.25rem; }
.app-rank { font-size: 1.5rem; font-weight: 900; color: rgba(229,9,20,0.3); flex-shrink: 0; width: 32px; }
.app-body h3 { margin-top: 0 !important; font-size: 1rem !important; }
.app-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.75rem; }
.app-tag { font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 99px; background: #fff; border: 1px solid rgba(0,0,0,0.08); color: var(--ink); }
.app-tag--free { background: rgba(22,163,74,0.1); color: #16a34a; border-color: rgba(22,163,74,0.2); }

.debit-table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem;
  font-size: 0.85rem; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.debit-table th { background: #0d0d1a; color: #fff; padding: 0.9rem 1rem; text-align: left; font-weight: 700; font-size: 0.78rem; }
.debit-table td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(0,0,0,0.06); background: #fff; color: #3a3a5c; }

/* Prevent horizontal page overflow from wide tables on narrow screens */
@media (max-width: 640px) {
  .article-body table:not(.table-wrap table) { display: block; overflow-x: auto; white-space: nowrap; }
}