/**
 * NovaTheme - comments component styles.
 *
 * Migrated from css/templates/single-post.css on 2026-05-17 (phase 5).
 * Renamed .nf-comment-* / .nf-comments-* to .nc-comment-* / .nc-comments-*
 * to match the NovaComments plugin rendering (class-nc-renderer.php and
 * templates/comments.php).
 *
 * Avatars: NovaComments emits <img class="nc-avatar avatar avatar-{size}">.
 * The standard WordPress `.avatar` class is also targeted so consumers
 * that route through the get_avatar() shim keep their styling.
 *
 * Enqueued conditionally by includes/enqueue.php on singular pages when
 * nc_comments_open() returns true.
 *
 * Copyright (c) 2026 Emmanuel Riolet / NovaFuture.org - Licensed under AGPL v3.
 *
 * @package NovaTheme
 */

/* ==========================================================================
   1. Container + title
   ========================================================================== */

.nc-comments-area {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 0 24px;
}

.nc-comments-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--nt-green);
}

/* ==========================================================================
   2. Flash messages (success / error after submit)
   ========================================================================== */

.nc-flash {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

.nc-flash-success {
    background: var(--nt-green-bg, #e8f5e9);
    color: var(--nt-green, #2e7d32);
    border-left: 3px solid var(--nt-green);
}

.nc-flash-error {
    background: #fce4ec;
    color: #c62828;
    border-left: 3px solid #c62828;
}

/* ==========================================================================
   3. Comment list + threading
   ========================================================================== */

.nc-comments-list-wrap {
    margin-bottom: 28px;
}

.nc-comment-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.nc-comment-list .nc-comment-list {
    list-style: none;
    padding-left: 32px;
    margin-top: 16px;
}

.nc-comment-list li {
    margin-bottom: 20px;
}

.nc-comment-body {
    display: block;
}

.nc-comment-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.nc-comment-header .avatar,
.nc-comment-header .nc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: block;
}

.nc-comment-author {
    font-weight: 600;
    font-style: normal;
    display: inline-block;
}

.nc-comment-date {
    font-size: 0.78rem;
    color: #888;
    margin-left: auto;
}

.nc-comment-content {
    font-size: 0.92rem;
    margin: 0 0 6px;
    color: inherit;
}

.nc-comment-content p {
    margin: 0 0 8px;
}

.nc-comment-footer {
    font-size: 0.78rem;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.nc-reply-link {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--nt-green);
    text-decoration: none;
    padding: 2px 10px;
    border-radius: 3px;
}

.nc-reply-link:hover {
    background: var(--nt-green-hover, #1e6b2e);
    color: #fff;
    text-decoration: none;
}

.nc-comment-admin-actions {
    margin-left: auto;
}

.nc-delete-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c62828;
    text-decoration: none;
    padding: 2px 8px;
    border: 1px solid #c62828;
    border-radius: 3px;
}

.nc-delete-link:hover {
    background: #c62828;
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
   4. Submit form (logged-in users)
   ========================================================================== */

.nc-comments-form-wrap {
    margin-top: 16px;
}

.nc-form {
    display: block;
}

.nc-form-author {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 10px;
}

.nc-form-author .avatar,
.nc-form-author .nc-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.nc-form-author-name {
    font-weight: 600;
    color: inherit;
}

.nc-form-field {
    margin-bottom: 12px;
}

.nc-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
    min-height: 96px;
}

.nc-form-field textarea:focus {
    outline: none;
    border-color: var(--nt-green);
}

.nc-form-submit {
    margin-top: 10px;
}

.nc-btn,
.nc-btn-primary {
    background: var(--nt-green);
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.nc-btn-primary:hover {
    background: var(--nt-green-hover, #1e6b2e);
}

/* ==========================================================================
   5. Closed comments / login prompt
   ========================================================================== */

.nc-comments-closed {
    font-size: 0.9rem;
    color: #888;
    text-align: center;
    padding: 10px 0;
}

.nc-login-required {
    font-size: 0.9rem;
    padding: 12px 0 18px;
    color: #444;
}

.nc-login-required a {
    color: var(--nt-green);
    font-weight: 600;
}