/**
 * GITS-OS Comments Section Styles
 * Terminal-styled comment thread
 */

.gits-comments-section {
    margin-top: 20px;
}

/* Individual comment styling */
.gits-comment {
    background: rgba(13, 17, 23, 0.6) !important;
    transition: all 0.2s ease;
}

.gits-comment:hover {
    background: rgba(13, 17, 23, 0.9) !important;
    border-left-color: var(--gits-accent-primary) !important;
}

/* Comment form styling */
.wp-block-post-comments-form,
.comment-respond {
    background: rgba(13, 17, 23, 0.5) !important;
    border: 1px solid var(--gits-border) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin-top: 24px !important;
}

.comment-respond .comment-reply-title {
    font-family: var(--gits-font-mono) !important;
    color: var(--gits-text-secondary) !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.05em;
}

.comment-respond .comment-reply-title::before {
    content: '// ';
    color: var(--gits-accent-primary);
}

.comment-respond label {
    font-family: var(--gits-font-mono) !important;
    font-size: 0.8rem !important;
    color: var(--gits-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comment-respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"] {
    background: var(--gits-bg-primary) !important;
    border: 1px solid var(--gits-border) !important;
    color: var(--gits-text-primary) !important;
    font-family: var(--gits-font-mono) !important;
    border-radius: 4px !important;
}

.comment-respond textarea:focus,
.comment-respond input:focus {
    border-color: var(--gits-accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(0, 255, 159, 0.15) !important;
}

/* Post Comment button — <input type="submit"> can't render ::before/::after
   pseudos, so the beam border from components.css leaves it borderless.
   Override with an explicit solid border that matches the site style. */
.comment-respond .submit,
.comment-respond input[type="submit"] {
    background: linear-gradient(135deg, #18181b 0%, #1e1e24 50%, #252530 100%) !important;
    color: #e0e0e8 !important;
    border: 2px solid rgba(139, 92, 246, 0.5) !important;
    border-radius: 9999px !important;
    font-family: var(--dw-font-body, 'Spinnaker', sans-serif) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.02em;
    padding: 12px 28px !important;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.2s ease,
                border-color 0.3s ease !important;
    /* Disable the beam pseudos that can't render on <input> */
    overflow: visible !important;
}
.comment-respond .submit::before,
.comment-respond .submit::after,
.comment-respond input[type="submit"]::before,
.comment-respond input[type="submit"]::after {
    display: none !important;
}
.comment-respond .submit:hover,
.comment-respond input[type="submit"]:hover {
    color: #fff !important;
    border-color: rgba(139, 92, 246, 0.8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4) !important;
    background: linear-gradient(135deg, #1f1f26 0%, #26262e 50%, #2e2e3a 100%) !important;
}

/* Comment reply links */
.comment-reply-link {
    font-family: var(--gits-font-mono) !important;
    font-size: 0.75rem !important;
    color: var(--gits-text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comment-reply-link:hover {
    color: var(--gits-accent-primary) !important;
}