/* =============================================================================
   comments.css
   ----
   App: comments  (Django app)
   Used by: exam_description.html, article_detail.html
   Refactored from the legacy white-only theme into the site's gold + navy
   identity, with full dark/light theme support.

   All selectors live under `.cmt`. Markup is unchanged — only styling.

   Sections:
     1. Wrapper + alerts
     2. New-comment form (intro card)
     3. Logged-in label
     4. Submit button (uses shared mybutton1 from pages-base)
     5. Comments list + items
     6. Likes button
     7. Reply form (inside <details>)
     8. Replies thread
     9. Empty state
    10. Light-mode overrides
    11. Mobile tweaks
   ========================================================================== */

/* =============================================================================
   1. WRAPPER + ALERTS
   ========================================================================== */
.cmt {
    margin-top: 28px;
    padding: 26px 24px;
    border-radius: var(--r-lg);
    background: var(--surface-1);
    border: 1px solid var(--line);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-sm);
    text-align: right;
}
@media (max-width: 640px) {
    .cmt { padding: 20px 16px; }
}

#com-article .cmt { padding: 22px; }

.cmt-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    position: relative;
}
.cmt-head::after {
    content: ""; position: absolute;
    bottom: -1px; right: 0;
    width: 32px; height: 2px;
    background: linear-gradient(90deg, var(--gold-500), transparent);
}
.cmt-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--ink-white);
}
.cmt-sub {
    margin: 6px 0 0;
    font-size: .82rem;
    color: var(--ink-muted);
}

.cmt-alert {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: var(--r);
    font-size: .88rem;
    line-height: 1.7;
    border: 1px solid;
    display: flex; align-items: center; gap: 10px;
}
.cmt-alert::before {
    font-family: "bootstrap-icons";
    font-size: 1.1em;
}
.cmt-alert--ok {
    background: rgba(16, 185, 129, .10);
    border-color: rgba(16, 185, 129, .30);
    color: #6ee7b7;
}
.cmt-alert--ok::before { content: "\f26b"; color: #10b981; }
.cmt-alert--warn {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .30);
    color: #fcd34d;
}
.cmt-alert--warn::before { content: "\f33a"; color: #f59e0b; }

/* =============================================================================
   2. NEW COMMENT FORM
   ========================================================================== */
.cmt-form {
    padding: 18px 20px;
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    margin-bottom: 20px;
}
@media (max-width: 640px) {
    .cmt-form { padding: 14px 14px; }
}

.cmt-form-title {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800;
    font-size: .98rem;
    color: var(--ink-white);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--line);
}
.cmt-form-title i {
    color: var(--gold-300);
    font-size: 1.1em;
}

.cmt-form-grid { display: grid; gap: 12px; }

.cmt-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 720px) { .cmt-row { grid-template-columns: 1fr; } }

.cmt-col { display: grid; gap: 6px; }

.cmt-label {
    font-size: .82rem;
    color: var(--ink-soft);
    font-weight: 700;
    display: inline-flex; align-items: center; gap: 6px;
}
.cmt-label::before {
    content: ""; width: 4px; height: 4px;
    background: var(--gold-400);
    border-radius: 50%;
}

/* Inputs use shared form styling from pages-base.css — these are extra polish */
.cmt-form .form-control,
.cmt-form input[type="text"],
.cmt-form input[type="email"],
.cmt-form textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--surface-1);
    color: var(--ink-white);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r);
    font-family: inherit;
    font-size: .92rem;
    line-height: 1.7;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
    text-align: right;
}
.cmt-form .form-control:focus,
.cmt-form textarea:focus,
.cmt-form input:focus {
    outline: none;
    border-color: var(--gold-500);
    background: var(--surface-2);
    box-shadow: 0 0 0 3px rgba(255, 194, 24, .12);
}
.cmt-form textarea {
    min-height: 120px;
    resize: vertical;
}
.cmt-form ::placeholder { color: var(--ink-faint); }

/* =============================================================================
   3. LOGGED-IN LABEL
   ========================================================================== */
.cmt-loggedin {
    grid-column: 1 / -1;
    padding: 11px 16px;
    border-radius: var(--r);
    background: var(--surface-gold);
    border: 1px solid var(--gold-line);
    font-size: .88rem;
    color: var(--ink-soft);
    display: inline-flex; align-items: center; gap: 8px;
}
.cmt-loggedin::before {
    content: "\f4da";  /* bi-person-check-fill */
    font-family: "bootstrap-icons";
    color: var(--gold-300);
    font-size: 1.05em;
}
.cmt-loggedin strong {
    color: var(--gold-300);
    font-weight: 800;
}

/* =============================================================================
   4. ACTIONS + SUBMIT BUTTON
   ========================================================================== */
.cmt-actions {
    display: flex;
    justify-content: end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.cmt-note {
    font-size: .78rem;
    color: var(--ink-muted);
}

/* mybutton1 — the submit button. Match the gold CTA style site-wide. */
.mybutton1,
.cmt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
    color: var(--navy-900);
    border: none;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow-gold);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
    position: relative;
    overflow: hidden;
    width: fit-content !important;
}
.mybutton1::before,
.cmt-btn::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -85%; width: 50%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-22deg);
    transition: left .85s ease;
    pointer-events: none;
}
.mybutton1:hover,
.cmt-btn:hover {
    transform: translateY(-1px);
}
.mybutton1:hover::before,
.cmt-btn:hover::before { left: 130%; }

.cmt-btn--sm {
    padding: 9px 18px;
    font-size: .85rem;
}

.cmt-hp { display: none !important; }

/* =============================================================================
   5. COMMENTS LIST
   ========================================================================== */
.cmt-list {
    margin-top: 20px;
    display: grid;
    gap: 14px;
}

.cmt-item {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px 18px;
    background: var(--surface-1);
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.cmt-item:hover { border-color: var(--gold-line); }
@media (max-width: 640px) {
    .cmt-item { padding: 14px 14px; }
}

.cmt-item-head {
    display: flex; justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.cmt-author {
    display: flex; align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.cmt-author-name {
    font-weight: 800;
    color: var(--ink-white);
    font-size: .92rem;
    display: inline-flex; align-items: center; gap: 6px;
}
.cmt-author-name::before {
    content: "\f4d7";  /* bi-person-circle */
    font-family: "bootstrap-icons";
    color: var(--gold-400);
    font-size: 1.05em;
}
.cmt-time {
    font-size: .78rem;
    color: var(--ink-muted);
    direction: ltr;
}

.cmt-body {
    margin-top: 12px;
    font-size: .92rem;
    line-height: 1.95;
    color: var(--ink-soft);
    word-wrap: break-word;
}

.cmt-actions-inline {
    display: flex; align-items: center;
    gap: 10px;
}

/* =============================================================================
   6. LIKE BUTTON
   ========================================================================== */
.cmt-like {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    color: var(--ink-muted);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--t-fast);
}
.cmt-like:hover {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .08);
    color: #fca5a5;
}
.cmt-like i {
    color: rgba(239, 68, 68, .55);
    transition: transform var(--t-fast);
}
.cmt-like:hover i { transform: scale(1.15); }
.cmt-like.is-liked {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .35);
    color: #fca5a5;
}
.cmt-like.is-liked i { color: #ef4444; }

/* =============================================================================
   7. REPLY FORM
   ========================================================================== */
.cmt-reply {
    border: 0;
    margin-top: 14px;
}
.cmt-reply-btn {
    list-style: none;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: var(--surface-2);
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink-soft);
    transition: all var(--t-fast);
}
.cmt-reply-btn::-webkit-details-marker { display: none; }
.cmt-reply-btn:hover {
    border-color: var(--gold-line);
    color: var(--gold-300);
    background: var(--surface-gold);
}
.cmt-reply-btn i { color: var(--gold-400); font-size: .9em; }

.cmt-reply[open] .cmt-reply-btn {
    background: var(--surface-gold);
    border-color: var(--gold-line);
    color: var(--gold-300);
}

.cmt-reply-form {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: var(--r);
    border: 1px dashed var(--line-strong);
    background: var(--surface-1);
    display: grid;
    gap: 12px;
}
.cmt-reply-form .form-control,
.cmt-reply-form input[type="text"],
.cmt-reply-form input[type="email"],
.cmt-reply-form textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface-2);
    color: var(--ink-white);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r);
    font-family: inherit;
    font-size: .9rem;
}
.cmt-reply-form .form-control:focus,
.cmt-reply-form input:focus,
.cmt-reply-form textarea:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(255, 194, 24, .12);
}
.cmt-reply-form textarea { min-height: 90px; resize: vertical; }

/* Full-width reply form variant */
.cmt-reply--below { display: block; width: 100%; margin-top: 14px; }
.cmt-reply--below .cmt-reply-btn { width: fit-content; margin-right: 0; }
.cmt-reply--below .cmt-reply-form { width: 100%; box-sizing: border-box; }
.cmt-reply--below .form-control { width: 100%; box-sizing: border-box; }

/* =============================================================================
   8. REPLIES THREAD
   ========================================================================== */
.cmt-replies {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    display: grid;
    gap: 10px;
    /* Visual indent for thread hierarchy */
    margin-right: 18px;
    padding-right: 14px;
    border-right: 2px solid var(--gold-line);
}
@media (max-width: 640px) {
    .cmt-replies { margin-right: 8px; padding-right: 10px; }
}

.cmt-reply-item {
    padding: 12px 14px;
    border-radius: var(--r);
    border: 1px solid var(--line);
    background: var(--surface-2);
    transition: border-color var(--t-fast);
}
.cmt-reply-item:hover { border-color: var(--gold-line); }
.cmt-reply-item .cmt-author-name { font-size: .88rem; }
.cmt-reply-item .cmt-body {
    margin-top: 8px;
    font-size: .88rem;
}

/* =============================================================================
   9. EMPTY STATE
   ========================================================================== */
.cmt-empty {
    padding: 28px 24px;
    border-radius: var(--r);
    background: linear-gradient(135deg,
        rgba(255, 194, 24, .04),
        rgba(65, 84, 173, .04));
    border: 1px dashed var(--gold-line);
    text-align: center;
}
.cmt-empty-title {
    font-weight: 900;
    margin-bottom: 6px;
    color: var(--gold-300);
    font-size: 1rem;
    display: inline-flex; align-items: center; gap: 8px;
}
.cmt-empty-title::before {
    content: "\f253";  /* bi-chat-dots */
    font-family: "bootstrap-icons";
    color: var(--gold-400);
}
.cmt-empty-sub {
    font-size: .85rem;
    color: var(--ink-muted);
    line-height: 1.85;
}

/* =============================================================================
   10. LIGHT-MODE OVERRIDES
   ========================================================================== */
[data-theme="light"] .cmt-alert--ok {
    color: #065f46;
    background: rgba(16, 185, 129, .10);
}
[data-theme="light"] .cmt-alert--warn {
    color: #92400e;
    background: rgba(245, 158, 11, .10);
}
[data-theme="light"] .cmt-loggedin strong { color: var(--gold-700); }
[data-theme="light"] .cmt-loggedin::before { color: var(--gold-700); }
[data-theme="light"] .cmt-author-name::before { color: var(--gold-600); }
[data-theme="light"] .cmt-form-title i { color: var(--gold-700); }
[data-theme="light"] .cmt-empty-title { color: var(--gold-700); }
[data-theme="light"] .cmt-empty-title::before { color: var(--gold-600); }
[data-theme="light"] .cmt-reply-btn i { color: var(--gold-600); }
[data-theme="light"] .cmt-reply[open] .cmt-reply-btn,
[data-theme="light"] .cmt-reply-btn:hover { color: var(--gold-700); }
[data-theme="light"] .cmt-form input,
[data-theme="light"] .cmt-form textarea,
[data-theme="light"] .cmt-form .form-control,
[data-theme="light"] .cmt-reply-form input,
[data-theme="light"] .cmt-reply-form textarea,
[data-theme="light"] .cmt-reply-form .form-control {
    background: #ffffff;
    color: var(--navy-900);
    border-color: rgba(28, 36, 71, .14);
}
[data-theme="light"] .cmt-form input:focus,
[data-theme="light"] .cmt-form textarea:focus,
[data-theme="light"] .cmt-reply-form input:focus,
[data-theme="light"] .cmt-reply-form textarea:focus {
    background: #ffffff;
    border-color: var(--gold-500);
}

/* =============================================================================
   11. MOBILE
   ========================================================================== */
@media (max-width: 600px) {
    .cmt-actions { flex-direction: column; align-items: stretch; }
    .mybutton1, .cmt-btn { width: 100%; }
    .cmt-item-head { flex-direction: column; gap: 8px; }
    .cmt-actions-inline { width: 100%; justify-content: flex-end; }
}