/**
 * Comments CSS — assets/css/comments.css
 *
 * Styles for the ELN Comments UI: comment list, threaded replies,
 * comment form, logged-out CTA, and moderation states.
 *
 * Consumed by: comments.php (loaded via comments_template())
 * Enqueued:    inc/setup.php — conditionally on is_singular() with open comments
 * Depends on:  base.css tokens only — no hardcoded values
 *
 * BEM blocks:
 *   .comments             — section wrapper
 *   .comment-item         — individual comment row
 *   .comment-form-section — form / CTA container (WordPress #respond anchor)
 *   .comment-form         — native comment_form() element
 *   .comment-cta          — logged-out prompt
 *   .comments-nav         — pagination row
 */

/* ═══════════════════════════════════════════════════════════════════════════
   COMMENTS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.comments {
    margin-top: var(--eln-space-xl);
    padding-top: var(--eln-space-2xl);
    border-top: 2px solid var(--eln-color-brand);
}

/* ── Section Header ────────────────────────────────────────────────────────── */

.comments__header {
    margin-bottom: var(--eln-space-xl);
}

.comments__title {
    margin: 0;
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-xl);
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-color-brand);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: var(--eln-line-height-tight);
}

.comments__count {
    /* Rendered inline inside the h2 — no additional styling needed.
       The surrounding text provides all the context. */
}

/* ── Comment List ──────────────────────────────────────────────────────────── */

.comments__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* WordPress wraps threaded replies in <ol class="children"> automatically. */
.comments__list .children {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMENT ITEM
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * .comment-item — top-level wrapper <li> (also used for nested replies)
 * .comment-item__inner — flex row: avatar | body
 * .comment-item__body — text, meta, actions
 *
 * Thread depth is communicated via .comment-item--depth-N classes (1–4).
 * Depth-1 items have no left indent (they are root-level).
 * Depths 2–4 increase left padding progressively.
 * Visual indent is capped at depth-4 to prevent runaway nesting.
 */

.comment-item {
    padding: var(--eln-space-xl) 0; /* Figma: pt-[24px] but xl (32px) adds needed air with our border-bottom rhythm */
    border-bottom: 1px solid var(--eln-color-border);
}

/* Remove bottom border from the last root-level comment */
.comments__list > .comment-item:last-child {
    border-bottom: none;
}

/* ── Thread Depth Indentation ─────────────────────────────────────────────── */

.comment-item--depth-2 { padding-left: var(--eln-space-xl); }
.comment-item--depth-3 { padding-left: var(--eln-space-2xl); }
.comment-item--depth-4 { padding-left: calc(var(--eln-space-2xl) + var(--eln-space-md)); }

/* Depth 2+ items show a left border accent to visually telegraph nesting */
.comment-item--depth-2,
.comment-item--depth-3,
.comment-item--depth-4 {
    border-left: 2px solid var(--eln-color-border);
    margin-left: var(--eln-space-md);
}

/* ── Inner Layout (flex row) ──────────────────────────────────────────────── */

.comment-item__inner {
    display: flex;
    gap: var(--eln-space-sm); /* Figma: avatar 40px + left-[52px] = 12px gap — tightens avatar↔body alignment */
    align-items: flex-start;
}

/* ── Avatar ───────────────────────────────────────────────────────────────── */

.comment-item__avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.comment-item__avatar-img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--eln-color-bg-alt);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.comment-item__body {
    flex: 1;
    min-width: 0; /* prevent text from overflowing flex container */
}

/* ── Header row (author + badge + date) ───────────────────────────────────── */

.comment-item__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;           /* baseline → center for proper badge vertical alignment */
    column-gap: var(--eln-space-xs); /* xs between author and badge in same row */
    row-gap: 0;                    /* no gap between name row and date row — date controls its own spacing */
    margin-bottom: var(--eln-space-md); /* sm → md: clearer break between meta and body text */
}

.comment-item__author {
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-base); /* sm → base: Figma 16px Medium reads as a name, not a label */
    font-weight: var(--eln-font-weight-medium); /* bold → medium: matches Figma IBM Plex Sans Medium */
    color: var(--eln-color-text);
    line-height: 1;
    /* Long display names must wrap rather than bust the flex row */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── Author / Staff Badges ────────────────────────────────────────────────── */

.comment-item__badge {
    display: inline-block;
    padding: 2px var(--eln-space-xs);
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-xs);
    font-weight: var(--eln-font-weight-bold);
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--eln-radius-md); /* sm → md: Figma uses 8px; our largest token (4px) is meaningfully softer */
    /* Badge text should never break mid-word */
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}

.comment-item__badge--author {
    background: var(--eln-color-accent);
    color: var(--eln-color-text-inverse);
}

.comment-item__badge--staff {
    background: var(--eln-color-brand);
    color: var(--eln-color-text-inverse);
}

.comment-item__date {
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-xs);
    color: var(--eln-color-text-muted);
    line-height: 1;
    white-space: nowrap;
    /* Force date onto its own line below author+badge — Figma: name row / date row stacked with 2px gap */
    flex-basis: 100%;
    margin-top: var(--eln-space-xs); /* closest token to Figma's 2px; gives a tight but clear vertical stack */
}

/* ── Moderation Notice ────────────────────────────────────────────────────── */

.comment-item__moderation {
    margin: 0 0 var(--eln-space-sm);
    padding: var(--eln-space-xs) var(--eln-space-sm);
    background: var(--eln-color-bg-alt);
    border-left: 3px solid var(--eln-badge-sponsored); /* amber — "waiting" tone */
    font-size: var(--eln-font-size-xs);
    font-weight: var(--eln-font-weight-medium);
    color: var(--eln-color-text-muted);
    line-height: var(--eln-line-height-base);
}

/* Pending items are dimmed overall */
.comment-item--pending .comment-item__body {
    opacity: 0.7;
}

/* ── Comment Text ─────────────────────────────────────────────────────────── */

.comment-item__text {
    font-size: var(--eln-font-size-base);
    color: var(--eln-color-text);
    line-height: var(--eln-line-height-base);
    /* URLs and unbroken strings must wrap rather than overflow the card */
    overflow-wrap: break-word;
    word-break: break-word;
}

.comment-item__text p {
    margin: 0 0 var(--eln-space-sm);
}

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

/* Strip any default margins from WordPress's comment_text() output */
.comment-item__text > *:first-child {
    margin-top: 0;
}

/* ── Actions Row (reply + edit) ───────────────────────────────────────────── */

.comment-item__actions {
    display: flex;
    align-items: center;
    gap: var(--eln-space-md);
    margin-top: var(--eln-space-xs); /* sm → xs: reply link sits tight to comment body, not floating below */
}

/* WordPress generates <a class="comment-reply-link"> */
.comment-reply-link {
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-xs);
    font-weight: var(--eln-font-weight-medium); /* bold → medium: Figma uses plain medium weight */
    letter-spacing: 0;                          /* remove tracking — Figma has none */
    text-transform: none;                       /* remove uppercase — Figma: "Responder" plain case */
    color: var(--eln-color-accent);             /* brand → accent: Figma uses #dc2626 red, not navy */
    transition: color var(--eln-transition);
}

.comment-reply-link:hover {
    color: var(--eln-color-brand); /* reversed: hover goes navy since resting is now accent */
    text-decoration: none;
}

.comment-item__edit-link a {
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-xs);
    color: var(--eln-color-text-muted);
    transition: color var(--eln-transition);
}

.comment-item__edit-link a:hover {
    color: var(--eln-color-text);
    text-decoration: none;
}

/* ── Special State: by-author ─────────────────────────────────────────────── */
/*
 * The red "Autor" badge is the sole identifier for post-author comments.
 * Figma does not use a left border here — it conflicts with thread nesting
 * borders and creates visual noise. Badge-only is cleaner and matches the design.
 * No extra styles needed for this modifier.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   COMMENT FORM SECTION
   WordPress generates #respond as the scroll target for reply links.
   We alias it with .comment-form-section in our markup.
   ═══════════════════════════════════════════════════════════════════════════ */

.comment-form-section {
    margin-top: var(--eln-space-xl); /* 2xl → xl: form flows from comments, not detached below them */
    padding-top: var(--eln-space-xl);
    border-top: 1px solid var(--eln-color-border);
}

/* WordPress wraps everything comment_form() outputs in #respond > .comment-respond */
.comment-respond {
    /* No extra wrapper styling needed — .comment-form-section provides spacing */
}

.comment-form-section__title {
    margin: 0 0 var(--eln-space-xl); /* lg → xl: more space between title and logged-in-as / textarea */
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-xl);
    font-weight: var(--eln-font-weight-bold);
    color: var(--eln-color-brand);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: var(--eln-line-height-tight);
}

/* Cancel-reply sits inline after the title */
.comment-form__cancel-reply {
    display: inline-block;
    margin-left: var(--eln-space-md);
}

.comment-form__cancel-reply a {
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-sm);
    font-weight: var(--eln-font-weight-normal);
    color: var(--eln-color-text-muted);
    transition: color var(--eln-transition);
}

.comment-form__cancel-reply a:hover {
    color: var(--eln-color-accent);
    text-decoration: none;
}

/* ── Logged-In-As Bar ────────────────────────────────────────────────────── */

.comment-form__logged-in-as {
    margin: 0 0 var(--eln-space-lg);
    padding: var(--eln-space-sm) var(--eln-space-md);
    background: var(--eln-color-bg-alt);
    border-radius: var(--eln-radius-md);
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-sm);
    color: var(--eln-color-text-muted);
    line-height: var(--eln-line-height-base);
}

.comment-form__profile-link,
.comment-form__logout-link {
    color: var(--eln-color-brand);
    transition: color var(--eln-transition);
}

.comment-form__profile-link:hover,
.comment-form__logout-link:hover {
    color: var(--eln-color-accent);
    text-decoration: none;
}

/* ── Form Fields ─────────────────────────────────────────────────────────── */

.comment-form {
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-lg);
}

.comment-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--eln-space-xs);
}

.comment-form__field label {
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-sm);
    font-weight: var(--eln-font-weight-medium);
    color: var(--eln-color-text);
    line-height: 1;
}

/* Required asterisk — inherits label color, screen readers see aria-hidden */
.comment-form__field label .required {
    color: var(--eln-color-accent);
    margin-left: 2px;
}

.comment-form__textarea {
    width: 100%;
    min-height: 128px; /* 120 → 128px: matches Figma textarea height exactly */
    padding: var(--eln-space-sm) var(--eln-space-md);
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-base);
    color: var(--eln-color-text);
    background: var(--eln-color-bg-alt); /* bg → bg-alt: Figma #f3f3f5 — bg-alt (#f4f5f7) is essentially identical */
    border: 1px solid transparent;       /* Figma: border transparent — no visible border at rest */
    border-radius: var(--eln-radius-md);
    line-height: var(--eln-line-height-base);
    resize: vertical;
    transition: border-color var(--eln-transition), background-color var(--eln-transition), box-shadow var(--eln-transition);
    appearance: none;
}

.comment-form__textarea:focus {
    outline: none;
    background: var(--eln-color-bg); /* restore white on focus — field feels activated */
    border-color: var(--eln-color-brand);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1); /* --eln-color-brand (#111111) at 10% opacity */
}

/* ── Submit Row ───────────────────────────────────────────────────────────── */

.comment-form__submit {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Figma: button is right-aligned — reads as a confirmation, not a start action */
    gap: var(--eln-space-md);
    flex-wrap: wrap;
}

/* .comment-form__closed — defined below the responsive block */

/* ═══════════════════════════════════════════════════════════════════════════
   LOGGED-OUT CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.comment-cta {
    display: flex;
    flex-direction: column;
    align-items: center;           /* Figma: icon + text + buttons are centered */
    gap: var(--eln-space-md);
    padding: var(--eln-space-xl) var(--eln-space-lg); /* more vertical padding — Figma: spacious card */
    background: var(--eln-color-bg-alt);
    border-radius: var(--eln-radius-md);
    border: 1px solid var(--eln-color-border); /* Figma: full-card border, not left-only accent */
}

.comment-cta__message {
    margin: 0;
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-base);
    font-weight: var(--eln-font-weight-medium);
    color: var(--eln-color-text);
    line-height: var(--eln-line-height-base);
    text-align: center; /* matches Figma centered CTA card */
}

.comment-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Figma: buttons are center-grouped in the card */
    gap: var(--eln-space-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMENT PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.comments-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--eln-space-md);
    padding: var(--eln-space-sm) 0;
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-sm);
}

.comments-nav--top {
    margin-bottom: var(--eln-space-lg);
    border-bottom: 1px solid var(--eln-color-border);
    padding-bottom: var(--eln-space-md);
}

.comments-nav--bottom {
    margin-top: var(--eln-space-lg);
    border-top: 1px solid var(--eln-color-border);
    padding-top: var(--eln-space-md);
}

.comments-nav a {
    font-weight: var(--eln-font-weight-medium);
    color: var(--eln-color-brand);
    transition: color var(--eln-transition);
}

.comments-nav a:hover {
    color: var(--eln-color-accent);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reduce indent on narrow screens ──────────────────────────────────────── */

@media (max-width: 599px) {

    /* Collapse depth indentation — sidebar nav competes for horizontal space */
    .comment-item--depth-2 { padding-left: var(--eln-space-md); }
    .comment-item--depth-3 { padding-left: var(--eln-space-lg); }
    .comment-item--depth-4 { padding-left: var(--eln-space-xl); }

    .comment-item--depth-2,
    .comment-item--depth-3,
    .comment-item--depth-4 {
        margin-left: 0;
    }

    /*
     * At depth 3+ on narrow screens, the 48px avatar + gap + indent leaves
     * the comment body with fewer than ~180px — too tight for readable text.
     * Hide the avatar at these depths so all available width goes to the body.
     * The author name in the header still identifies the commenter.
     */
    .comment-item--depth-3 .comment-item__avatar,
    .comment-item--depth-4 .comment-item__avatar {
        display: none;
    }

    /* Tighten the form area */
    .comment-form-section {
        margin-top: var(--eln-space-xl);
    }

    .comment-cta__actions {
        flex-direction: column;
        align-items: stretch; /* full-width stacked buttons on mobile */
        width: 100%;
    }

    .comment-cta__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Closed state: ensure it reads as a footnote, not a prominent block ───── */
/*
 * When comments are closed with an existing thread, the "closed" notice sits
 * below the list. It should be understated — the list is the content, the
 * notice is just status information. Max-width matches so it does not span
 * the full container and accidentally read as a heading.
 */

.comment-form__closed {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-family: var(--eln-font-sans);
    font-size: var(--eln-font-size-sm);
    color: var(--eln-color-text-muted);
    font-style: italic;
}