/*
 * Levada AJAX Comments — base stylesheet
 *
 * Naming: SMACSS block_element__modifier
 * All rules are scoped under .levada_comments to avoid conflicts.
 *
 * Theming: override CSS custom properties in your theme stylesheet:
 *
 *   .levada_comments {
 *       --lc-border:      #d8d8d8;
 *       --lc-text:        #222;
 *       --lc-meta:        #aaa;
 *       --lc-avatar-size: 48px;
 *   }
 */

/* ─── Custom properties ────────────────────────────────────────────── */

.levada_comments {
    --lc-border:       #e8e8e8;
    --lc-bg:           transparent;
    --lc-text:         #333;
    --lc-meta:         #888;
    --lc-link:         #555;
    --lc-avatar-size:  40px;
    --lc-gap:          1.5rem;
    --lc-indent:       2.5rem;
    --lc-radius:       4px;
    --lc-font-size:    1rem;
    --lc-line-height:  1.6;
}

/* ─── Section wrapper ───────────────────────────────────────────────── */

.levada_comments {
    background: var(--lc-bg);
}

/* ─── Head ──────────────────────────────────────────────────────────── */

.levada_comments_head {
    margin-bottom: var(--lc-gap);
}

.levada_comments_count {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--lc-text);
}

/* ─── Empty / closed notices ────────────────────────────────────────── */

.levada_comments_empty,
.levada_comments_closed {
    color: var(--lc-meta);
    font-size: var(--lc-font-size);
    margin-bottom: var(--lc-gap);
}

/* ─── Pagination nav ────────────────────────────────────────────────── */

.levada_comments_nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--lc-gap);
    font-size: 0.9em;
}

.levada_comments_nav a {
    color: var(--lc-link);
    text-decoration: none;
}

.levada_comments_nav a:hover {
    text-decoration: underline;
}

/* ─── Comment list ──────────────────────────────────────────────────── */

.levada_comments_list,
.levada_comments_list .children {
    list-style: none;
    margin:  0;
    padding: 0;
}

.levada_comments_list .children {
    padding-left: var(--lc-indent);
}

/* ─── Comment item ──────────────────────────────────────────────────── */

.levada_comment {
    padding: var(--lc-gap) 0;
    border-bottom: 1px solid var(--lc-border);
}

.levada_comment:last-child {
    border-bottom: none;
}

.levada_comment_body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ─── Meta row (avatar + author + date) ─────────────────────────────── */

.levada_comment_meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.levada_comment_ava img {
    width:         var(--lc-avatar-size);
    height:        var(--lc-avatar-size);
    border-radius: 50%;
    display:       block;
    flex-shrink:   0;
}

.levada_comment_author,
.levada_comment_author a {
    font-weight:     600;
    font-size:       var(--lc-font-size);
    color:           var(--lc-text);
    text-decoration: none;
}

.levada_comment_date time {
    color:     var(--lc-meta);
    font-size: 0.85em;
}

/* ─── Comment text ──────────────────────────────────────────────────── */

.levada_comment_text {
    color:       var(--lc-text);
    font-size:   var(--lc-font-size);
    line-height: var(--lc-line-height);
}

.levada_comment_text p:last-child {
    margin-bottom: 0;
}

/* ─── Actions row ───────────────────────────────────────────────────── */

.levada_comment_actions {
    margin-top: 0.25rem;
}

.levada_comment_reply .comment-reply-link {
    color:           var(--lc-link);
    font-size:       0.85em;
    text-decoration: none;
}

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

/* ─── Modifiers ─────────────────────────────────────────────────────── */

.levada_comment__pending_notice {
    color:       var(--lc-meta);
    font-style:  italic;
    font-size:   0.85em;
    margin:      0;
}

/* ─── Form wrapper ──────────────────────────────────────────────────── */

.levada_comments_form {
    margin-top: var(--lc-gap);
}

.levada_comments_form_title {
    font-size:     1.1em;
    font-weight:   600;
    color:         var(--lc-text);
    margin-bottom: 1rem;
}

/* WP wraps the form in .comment-respond > #respond */
.levada_comments_form .comment-respond {
    padding: 0;
    background: transparent;
    border: none;
}

/* ─── Form fields ───────────────────────────────────────────────────── */

.levada_comments_form .comment-form p {
    margin-bottom: 0.75rem;
}

.levada_comments_form label {
    display:       block;
    margin-bottom: 0.3rem;
    font-size:     0.9em;
    color:         var(--lc-meta);
}

.levada_comments_form input[type="text"],
.levada_comments_form input[type="email"],
.levada_comments_form textarea {
    width:         100%;
    box-sizing:    border-box;
    padding:       0.6rem 0.75rem;
    border:        1px solid var(--lc-border);
    border-radius: var(--lc-radius);
    font-size:     var(--lc-font-size);
    color:         var(--lc-text);
    background:    var(--lc-bg);
    transition:    border-color 0.15s;
}

.levada_comments_form input[type="text"]:focus,
.levada_comments_form input[type="email"]:focus,
.levada_comments_form textarea:focus {
    outline:       none;
    border-color:  var(--lc-link);
}

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

/* ─── Submit button ─────────────────────────────────────────────────── */

.levada_comments_submit {
    cursor:        pointer;
    border:        none;
    border-radius: var(--lc-radius);
    padding:       0.6rem 1.5rem;
    font-size:     var(--lc-font-size);
    font-weight:   600;
    transition:    opacity 0.15s;
}

.levada_comments_submit:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}