/*
 * Comments Block Styles
 * Enqueue via wp_enqueue_style() in functions.php
 *
 * ── Customize these variables ──────────────────────────────────
 */

/* ── Title ───────────────────────────────────────────────────── */


.comments-count {
    font-size: 0.875em;
    font-weight:      400;
    color:            var(--cb-text-muted);
    background:       var(--cb-border);
    padding:          2px 10px;
    border-radius:    99px;
}

/* ── Comment list ────────────────────────────────────────────── */
.comments-list,
.children {
    list-style: none;
    margin:     0;
    padding:    0;
}

.comment-item {
    margin-bottom: 1rem;
}

/* nested replies */
.comment-item .children {
    margin-top:  0.75rem;
    margin-left: 1.5rem;
    border-left: 2px solid var(--cb-border);
    padding-left: 1rem;
}

.comment-item .children .comment-body {
    background: var(--cb-bg-reply);
}

/* ── Comment card ────────────────────────────────────────────── */
.comment-body {
    background:    var(--cb-bg);
    border:        1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    padding:       1rem 1.25rem;
}

/* ── Header: author + date ───────────────────────────────────── */
.comment-header {
    display:       flex;
    align-items:   baseline;
    gap:           0.75rem;
    margin-bottom: 0.6rem;
}

.comment-author {
    font-weight: 600;
    font-size:   0.925rem;
}

.comment-date {
    font-size: 0.8rem;
    color:     var(--cb-text-muted);
}

/* ── Content ─────────────────────────────────────────────────── */
.comment-content {
    font-size:   0.925rem;
    line-height: 1.7;
}



/* ── Awaiting moderation ─────────────────────────────────────── */
.comment-awaiting {
    font-size: 0.8rem;
    color:     var(--cb-text-muted);
    margin:    0 0 0.5rem;
}

/* ── Reply link ──────────────────────────────────────────────── */
.comment-footer {
    margin-top: 0.6rem;
}

.comment-reply-link {
    font-size:       1rem;
    color:           var(--cb-accent);
    text-decoration: none;
    font-weight:     500;
}

.comment-reply-link:hover {
    text-decoration: underline;
}

/* ── Pagination ──────────────────────────────────────────────── */
.comments-pagination {
    display:         flex;
    gap:             0.5rem;
    justify-content: center;
    margin-block:    var(--cb-spacing);
    font-size:       0.875rem;
}

.comments-pagination a,
.comments-pagination span {
    padding:          4px 12px;
    border:           1px solid var(--cb-border);
    border-radius:    var(--cb-radius);
    text-decoration:  none;
    color:            var(--cb-text);
}

.comments-pagination a:hover { border-color: var(--cb-accent); color: var(--cb-accent); }
.comments-pagination .current { background: var(--cb-accent); color: #fff; border-color: var(--cb-accent); }

/* ── Form section ────────────────────────────────────────────── */
.comment-respond {
    margin-top: calc(var(--cb-spacing) * 1.5);
    border-top: 1px solid var(--cb-border);
    padding-top: var(--cb-spacing);
}

.comment-reply-title small a {
    font-size:       0.8rem;
    font-weight:     400;
    color:           var(--cb-text-muted);
    text-decoration: none;
}

.comment-reply-title small a:hover { color: var(--cb-text); }

/* ── Inputs ──────────────────────────────────────────────────── */
.comment-form p {
    margin: 0 0 0.75rem;
}

.comment-form input[type="text"],
.comment-form textarea {
    width:         100%;
    box-sizing:    border-box;
    border:        1px solid var(--cb-border);
    border-radius: var(--cb-radius);
    padding:       0.6rem 0.875rem;
    font-size:     0.925rem;
    font-family:   inherit;
    color:         var(--cb-text);
    background:    var(--cb-bg);
    transition:    border-color .15s;
    outline:       none;
}

.comment-form input[type="text"]:focus,
.comment-form textarea:focus {
    border-color: var(--cb-accent);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--cb-accent) 15%, transparent);
}

.comment-form textarea { resize: vertical; min-height: 120px; }

/* ── Submit button ───────────────────────────────────────────── */
.submit-btn {
    background:    var(--publisher-primary-color);
    color:         #fff;
    border:        none;
    border-radius: var(--cb-radius);
    padding:       0.6rem 1.5rem;
    font-size:     0.925rem;
    font-weight:   500;
    cursor:        pointer;
    transition:    background .15s;
}

.submit-btn:hover  { background: var(--cb-accent-hover); }
.submit-btn:active { opacity: 0.9; }

/* ── Closed ──────────────────────────────────────────────────── */
.comments-closed {
    color:     var(--cb-text-muted);
    font-size: 0.875rem;
    margin-top: var(--cb-spacing);
}