/* Fixed layout: avatars 60/45 px, text gaps 11/9 px, reply indent 44 px, reply spacing 12 px.
   Selectors start with #nuit-comments (form rules add a second ID), so they beat Enfold without !important.
   Colours and type come from the --nuit-* variables set on the settings page. */

/* 1. Block and list */
#nuit-comments.nuit-komentari {
    width:100%;
    max-width:100%;
    min-width:0;
    padding:0 var(--nuit-block-inset);
    clear:both;
    font-family:inherit;
    /* The px sizes are set on Helvetica Neue (capitals 0.714 em). A theme font with smaller capitals (nuit.hr:
       Source Sans Pro, 0.656 em) is scaled to the same cap height, so text and numbers look the same size in any
       font; Helvetica and Arial stay as they are. Browsers without font-size-adjust keep the plain px sizes. */
    font-size-adjust:cap-height 0.714;
    color:var(--nuit-text-color);
    font-size:var(--nuit-text-size);
    line-height:var(--nuit-text-line-px);
}

#nuit-comments, #nuit-comments *, #nuit-comments *::before, #nuit-comments *::after {
    box-sizing:border-box;
}

/* Enfold wrapper: under 768 px the sidebar drops below the content, but .sidebar_right .comment_container (0,2,0)
   keeps its 50 px right padding at every width. One more class beats it in any load order. */
@media (max-width:767px) {
    .sidebar_right .nuit-theme-comments > .comment_container {
        padding-right:0;
    }
}

/* The line under the count uses the same spacing as the dividers between threads. */
#nuit-comments .nuit-count {
    font-size:13px;
    font-weight:600;
    color:var(--nuit-muted-color);
    padding:0 0 var(--nuit-comment-divider-gap);
    border-bottom:1px dashed var(--nuit-separator-color);
    margin-bottom:var(--nuit-comment-divider-gap);
}

#nuit-comments #comments,
#nuit-comments #comments .children {
    list-style:none;
    margin:0;
    padding:0;
    border:0;
}

#nuit-comments #comments li {
    position:relative;
    margin:0;
    padding:0;
    border:0;
    clear:none;
    overflow:visible;
}

#nuit-comments #comments > li + li {
    margin-top:var(--nuit-comment-divider-gap);
    padding-top:var(--nuit-comment-divider-gap);
    border-top:1px dashed var(--nuit-separator-color);
}

/* Beats Enfold's #comments span (1,0,1) in any load order; class rules (1,1,0) still win over it. */
#nuit-comments li span {
    display:inline;
    padding:0;
    font-size:inherit;
    line-height:inherit;
    font-weight:inherit;
    letter-spacing:inherit;
    text-transform:none;
}

/* 2. Avatar, name, time and text */
#nuit-comments .nuit-comment {
    margin:0;
    padding:0;
    scroll-margin-top:100px;
}

#nuit-comments .nuit-comment > article {
    display:grid;
    grid-template-columns:60px 1fr;
    gap:11px;
    padding:4px 0;
    margin:0;
    border:0;
    width:auto;
    border-radius:6px;
    transition:background-color .15s ease, box-shadow .15s ease;
}

#nuit-comments .nuit-avatar {
    width:60px;
    height:60px;
    line-height:0;
}

#nuit-comments .nuit-avatar picture {
    display:block;
    width:100%;
    height:100%;
}

/* White behind the image, so a transparent avatar stays white on the hover and highlight backgrounds. */
#nuit-comments .nuit-avatar img {
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:cover;
    padding:var(--nuit-avatar-padding);
    border:var(--nuit-avatar-border) solid var(--nuit-avatar-color);
    border-radius:var(--nuit-avatar-radius);
    margin:0;
    background:#fff;
    box-shadow:none;
}

#nuit-comments .nuit-content {
    min-width:0;
    padding:0;
    margin:0;
    overflow-wrap:anywhere;
}

#nuit-comments .nuit-header {
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    column-gap:var(--nuit-header-gap);
    row-gap:0;
    margin:0;
    padding:0;
    line-height:var(--nuit-header-line);
}

#nuit-comments .nuit-name {
    color:var(--enfold-main-color-heading,var(--nuit-text-color));
    font-size:var(--nuit-name-size);
    font-weight:700;
}

#nuit-comments .nuit-time, #nuit-comments .nuit-admin-edit {
    font-size:var(--nuit-meta-size);
    color:var(--nuit-time-color);
    font-weight:400;
    white-space:nowrap;
    margin:0;
    padding:0;
}

#nuit-comments .nuit-text {
    margin:5px 0 6px;
    padding:0;
    font-size:var(--nuit-text-size);
    line-height:var(--nuit-text-line-px);
}

#nuit-comments .nuit-text p {
    margin:0 0 8px;
    padding:0;
}

#nuit-comments .nuit-text p:last-child {
    margin-bottom:0;
}

#nuit-comments .nuit-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px var(--nuit-action-gap);
    margin:0;
    padding:0;
    font-size:12px;
    line-height:18px;
}

#nuit-comments .nuit-actions a {
    color:var(--nuit-muted-color);
    font-size:12px;
    font-weight:600;
    text-decoration:none;
}

#nuit-comments a {
    color:var(--nuit-link-color);
}

#nuit-comments a:hover {
    text-decoration:underline;
}

#nuit-comments .comment-reply-to {
    display:inline;
    color:var(--nuit-mention-color);
    font-weight:400;
    text-decoration:none;
}

/* 3. Threads and dashed connectors (fixed NUIT layout) */
#nuit-comments #comments .children {
    display:grid;
    gap:12px;
    margin:12px 0 0 44px; /* 4 px clear of the elbow line, also with a reply's hover background */
}

#nuit-comments .children .nuit-comment > article {
    grid-template-columns:45px 1fr;
    gap:9px;
}

#nuit-comments .children .nuit-avatar {
    width:45px;
    height:45px;
}

#nuit-comments #comments > li.nuit-thread {
    display:grid;
    grid-template-columns:100%;
    grid-template-rows:auto auto auto;
}

#nuit-comments #comments > li.nuit-thread > .nuit-comment {
    grid-area:1 / 1;
}

#nuit-comments #comments > li.nuit-thread > #respond {
    grid-area:2 / 1;
}

#nuit-comments #comments > li > .children {
    grid-area:3 / 1;
}

/* Thread lines. The spine runs from the main avatar (x 30 px) past every direct reply and ends at the last one; each
   direct reply branches off it. A sub-thread (replies to a reply, listed under the reply they answer) has its own
   line through its avatars (x 22 px in the reply). The server marks every reply: nuit-direct or nuit-sub,
   nuit-spine (a later direct reply follows) and nuit-sub-next (the next reply is in the same sub-thread).
   In a reply, the spine is at -14 px and the reply avatar's centre at 26.5 px (4 px article padding + 22.5 px).
   All lines have z-index 1, so a hover background does not cover them. Phones: section 8. */
#nuit-comments #comments > li.nuit-thread::before,
#nuit-comments #comments .children > li.nuit-spine::before,
#nuit-comments #comments .children > li.nuit-direct::before,
#nuit-comments #comments .children > li.nuit-sub-next::after,
#nuit-comments #comments .children > li.nuit-direct.nuit-spine > .nuit-comment .nuit-avatar::before {
    content:"";
    position:absolute;
    z-index:1;
    pointer-events:none;
    width:0;
    border-left:1px dashed var(--nuit-thread-color);
}

/* From the main avatar down to the first reply (the comment and an open reply form are rows 1 and 2). */
#nuit-comments #comments > li.nuit-thread::before {
    grid-column:1;
    grid-row:1 / 3;
    left:30px;
    top:65px;
    bottom:-12px;
}

/* The spine passes this reply and the gap below it. */
#nuit-comments #comments .children > li.nuit-spine::before {
    left:-14px;
    top:0;
    bottom:-12px;
}

/* The last direct reply: the spine ends in an elbow to its avatar. */
#nuit-comments #comments .children > li.nuit-direct:not(.nuit-spine)::before {
    left:-14px;
    top:0;
    width:13px;
    height:27px;
    border-bottom:1px dashed var(--nuit-thread-color);
    border-bottom-left-radius:6px;
}

/* A direct reply the spine passes: a branch to its avatar. */
#nuit-comments #comments .children > li.nuit-direct.nuit-spine > .nuit-comment .nuit-avatar {
    position:relative;
}

#nuit-comments #comments .children > li.nuit-direct.nuit-spine > .nuit-comment .nuit-avatar::before {
    left:-14px;
    top:22px;
    width:13px;
    height:0;
    border-left:0;
    border-top:1px dashed var(--nuit-thread-color);
}

/* Sub-thread: from this avatar to the next reply's avatar. */
#nuit-comments #comments .children > li.nuit-sub-next::after {
    left:22px;
    top:50px;
    bottom:-15px;
}

/* 4. Comment and reply form */
#nuit-comments #respond {
    position:relative;
    float:none;
    clear:both;
    width:auto;
    min-width:0;
    max-width:100%;
    margin:26px 0 0;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
}

#nuit-comments #comments #respond {
    margin:14px 0 18px 71px;
}

#nuit-comments #comments .children #respond {
    margin-left:54px;
}

#nuit-comments #reply-title {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    width:auto;
    float:none;
    margin:0 0 12px;
    padding:0;
    font-family:inherit;
    font-size:var(--nuit-title-size);
    line-height:var(--nuit-title-line);
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
}

#nuit-comments #commentform {
    margin:0;
    padding:0;
    width:100%;
    max-width:100%;
}

#nuit-comments #commentform p {
    margin:0 0 var(--nuit-form-gap);
    padding:0;
}

#nuit-comments .nuit-notice {
    margin:0 0 18px;
    font-size:var(--nuit-notice-size);
    font-weight:400;
    line-height:var(--nuit-notice-line);
    letter-spacing:0;
    text-transform:none;
    color:var(--nuit-text-color);
}

#nuit-comments #commentform .nuit-notice p {
    margin:0 0 8px;
}

#nuit-comments .nuit-notice a {
    text-decoration:underline;
    text-underline-offset:2px;
}

#nuit-comments .nuit-login {
    font-size:12px;
    font-weight:400;
    letter-spacing:0;
}

#nuit-comments #commentform .nuit-field {
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    align-items:center;
    gap:18px;
    width:100%;
    min-height:0;
}

/* Enfold positions form labels absolutely (#commentform label). */
#nuit-comments #commentform label {
    position:static;
    display:block;
    float:none;
    width:auto;
    margin:0;
    padding:0;
    font-family:inherit;
    font-size:12px;
    line-height:16px;
    font-weight:400;
    letter-spacing:0;
    text-transform:none;
    color:var(--nuit-text-color);
}

#nuit-comments #commentform .nuit-field input {
    width:var(--nuit-field-width);
    max-width:100%;
    min-width:0;
    flex:0 1 var(--nuit-field-width);
}

#nuit-comments #commentform input[type=text],
#nuit-comments #commentform input[type=email],
#nuit-comments #commentform textarea,
#nuit-comments .nuit-edit-form textarea {
    display:block;
    margin:0;
    padding:9px 11px;
    border:1px solid var(--nuit-field-border);
    border-radius:var(--nuit-field-radius);
    background:var(--nuit-field-bg);
    color:var(--nuit-text-color);
    font:inherit;
    line-height:var(--nuit-text-line-px);
    box-shadow:none;
}

#nuit-comments #commentform textarea,
#nuit-comments .nuit-edit-form textarea {
    width:100%;
    max-width:100%;
    height:auto;
    min-height:var(--nuit-textarea-height);
    resize:vertical;
}

#nuit-comments #commentform .nuit-message-field {
    margin-top:16px;
}

/* Above the checkbox: the same 16 px as between the email field and the comment box.
   Below it: the same gap as between the name and email fields (form row spacing). */
#nuit-comments #commentform .nuit-remember {
    margin-top:16px;
    margin-bottom:var(--nuit-form-gap);
}

#nuit-comments #commentform .nuit-remember + .form-submit {
    margin-top:0;
}

#nuit-comments #commentform .nuit-remember label {
    display:flex;
    align-items:flex-start;
    gap:8px;
    width:fit-content;
    max-width:100%;
    cursor:pointer;
}

/* Chrome keeps a native checkbox's corners at 0 px whatever border-radius says, so its own focus outline is square.
   The wrapper carries the outline instead, rounded like the fields' outline (3 px + the same 3 px offset). */
#nuit-comments #commentform .nuit-remember-box {
    display:block;
    flex:0 0 16px;
    width:16px;
    height:16px;
    border-radius:3px;
}

#nuit-comments #commentform .nuit-remember input {
    appearance:auto;
    display:block;
    width:16px;
    height:16px;
    min-height:0;
    padding:0;
    margin:0;
    accent-color:var(--nuit-button-bg);
}

#nuit-comments #commentform .nuit-remember span {
    font:inherit;
    line-height:inherit;
    padding:0;
}

#nuit-comments #commentform .form-submit {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

/* 5. Form buttons: Post comment, Cancel reply, Save and Cancel share one size */
#nuit-comments #submit,
#nuit-comments #cancel-comment-reply-link,
#nuit-comments .nuit-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 1 var(--nuit-button-width);
    width:var(--nuit-button-width);
    min-width:0;
    max-width:100%;
    height:var(--nuit-button-height);
    min-height:var(--nuit-button-height);
    border:1px solid transparent;
    border-radius:var(--nuit-button-radius);
    padding:0 12px;
    margin:0;
    background:var(--nuit-button-bg);
    color:var(--nuit-button-text);
    font-family:inherit;
    font-size-adjust:inherit;
    font-size:var(--nuit-button-size);
    font-weight:400;
    line-height:var(--nuit-button-line);
    letter-spacing:0;
    text-transform:none;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:none;
}

#nuit-comments #cancel-comment-reply-link,
#nuit-comments .nuit-button-secondary {
    background:transparent;
    color:var(--nuit-text-color);
    border-color:var(--nuit-field-border);
}

#nuit-comments button:disabled {
    opacity:.55;
    cursor:not-allowed;
}

#nuit-comments button[aria-disabled=true] {
    cursor:wait;
}

/* 6. Editing and feedback */
#nuit-comments .nuit-edit {
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px var(--nuit-action-gap);
}

#nuit-comments .nuit-edit button {
    display:inline;
    width:auto;
    min-width:0;
    min-height:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    color:var(--nuit-muted-color);
    font:inherit;
    font-size:12px;
    font-weight:600;
    letter-spacing:0;
    text-transform:none;
    cursor:pointer;
}

#nuit-comments .nuit-edit button:hover {
    text-decoration:underline;
}

#nuit-comments .nuit-edit small {
    font-size:11px;
    color:var(--nuit-muted-color);
}

#nuit-comments .nuit-edit-form {
    margin:8px 0;
}

#nuit-comments .nuit-edit-buttons {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:8px;
}

#nuit-comments .nuit-feedback, #nuit-comments .nuit-pending {
    font-size:12px;
    line-height:18px;
    margin:6px 0;
    color:var(--nuit-muted-color);
}

#nuit-comments .nuit-feedback[data-error=true] {
    color:#a32424;
}

/* Screen-reader-only text. */
#nuit-comments .nuit-sr-only {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* 7. Focus and highlight ("body" beats Enfold's #top input { outline:none }) */
body #nuit-comments input:focus, body #nuit-comments textarea:focus, body #nuit-comments button:focus, body #nuit-comments a:focus,
body #nuit-comments #commentform .nuit-remember-box:focus-within {
    outline:2px solid var(--nuit-link-color);
    outline-offset:3px;
}

/* The remember checkbox shows its focus on the wrapper (section 4). */
body #nuit-comments #commentform .nuit-remember input:focus {
    outline:none;
}

#nuit-comments .nuit-comment:target > article, #nuit-comments .nuit-highlight > article {
    animation:nuit-highlight 2.5s ease-out;
}

@keyframes nuit-highlight {
    from {
        background:#fdf3c4;
        box-shadow:0 0 0 8px #fdf3c4;
    }
    to {
        background:transparent;
        box-shadow:0 0 0 8px transparent;
    }
}

/* Reduced motion: no fade; the highlight shows for 2.5 s and goes in one step (also for :target). */
@media (prefers-reduced-motion:reduce) {
    #nuit-comments .nuit-comment:target > article, #nuit-comments .nuit-highlight > article {
        animation-timing-function:steps(1, end);
    }

    #nuit-comments .nuit-comment > article {
        transition:none;
    }
}

/* Hover: the background grows 8 px beyond the comment (a box-shadow spread), framing the avatar and text without
   moving anything. The dashed connectors have z-index 1, so they stay drawn on top of it. */
@media (hover:hover) {
    #nuit-comments .nuit-comment:hover > article {
        background:var(--nuit-hover-color);
        box-shadow:0 0 0 8px var(--nuit-hover-color);
    }

    /* While the pointer is on a sub-thread reply, the comment it answers lights up (comments.js marks it) in the
       yellow of the highlight after a click on @Name. */
    #nuit-comments .nuit-replied > article {
        background:#fdf3c4;
        box-shadow:0 0 0 8px #fdf3c4;
    }
}

/* 8. Phones: forms use the full block width and connectors break around an open form */
@media (max-width:600px) {
    #nuit-comments.nuit-komentari {
        padding-inline:0;
    }

    #nuit-comments #comments #respond {
        margin-left:0;
        max-width:none;
    }

    #nuit-comments #comments .children #respond {
        margin-left:-44px;
    }

    #nuit-comments .nuit-edit-form {
        margin-left:-71px;
    }

    #nuit-comments .children .nuit-edit-form {
        margin-left:-98px;
    }

    #nuit-comments .nuit-edit-open > .nuit-comment .nuit-header {
        min-height:60px;
    }

    #nuit-comments .children .nuit-edit-open > .nuit-comment .nuit-header {
        min-height:45px;
    }

    /* Open form in a thread: the line from the main avatar stops above the form; the replies draw their own lines. */
    #nuit-comments:not(.nuit-editing) #comments > li.nuit-reply-open::before {
        grid-row:1 / 2;
        bottom:0;
    }

    #nuit-comments #comments > li.nuit-edit-open::before {
        height:6px;
        bottom:auto;
    }

    /* Open form under a reply: its lines stop above the form and continue below it (from the form, which starts
       44 px left of the reply and has an 18 px bottom margin above the 12 px gap). */
    #nuit-comments #comments .children > li.nuit-reply-open {
        display:grid;
        grid-template-columns:100%;
        grid-template-rows:auto auto;
    }

    #nuit-comments #comments .children > li.nuit-reply-open > .nuit-comment {
        grid-area:1 / 1;
    }

    #nuit-comments #comments .children > li > #respond {
        grid-area:2 / 1;
    }

    #nuit-comments:not(.nuit-editing) #comments .children > li.nuit-reply-open.nuit-spine::before,
    #nuit-comments:not(.nuit-editing) #comments .children > li.nuit-reply-open.nuit-sub-next::after {
        grid-column:1;
        grid-row:1 / 2;
        bottom:0;
    }

    #nuit-comments:not(.nuit-editing) #comments .children > li.nuit-reply-open.nuit-spine > #respond::before,
    #nuit-comments:not(.nuit-editing) #comments .children > li.nuit-reply-open.nuit-sub-next > #respond::after,
    #nuit-comments #comments .children > li.nuit-edit-open.nuit-spine > .nuit-comment::before,
    #nuit-comments #comments .children > li.nuit-edit-open.nuit-sub-next > .nuit-comment::after {
        content:"";
        position:absolute;
        z-index:1;
        pointer-events:none;
        top:100%;
        width:0;
        border-left:1px dashed var(--nuit-thread-color);
    }

    #nuit-comments:not(.nuit-editing) #comments .children > li.nuit-reply-open.nuit-spine > #respond::before {
        left:30px;
        margin-top:18px;
        bottom:-30px;
    }

    #nuit-comments:not(.nuit-editing) #comments .children > li.nuit-reply-open.nuit-sub-next > #respond::after {
        left:66px;
        margin-top:18px;
        bottom:-33px;
    }

    /* Editing a reply: its lines stop 6 px below the avatar, above the editor, and continue below the comment. */
    #nuit-comments #comments .children > li.nuit-edit-open.nuit-spine::before {
        height:56px;
        bottom:auto;
    }

    #nuit-comments #comments .children > li.nuit-edit-open.nuit-sub-next::after {
        height:6px;
        bottom:auto;
    }

    #nuit-comments #comments .children > li.nuit-edit-open > .nuit-comment {
        position:relative;
    }

    #nuit-comments #comments .children > li.nuit-edit-open.nuit-spine > .nuit-comment::before {
        left:-14px;
        bottom:-12px;
    }

    #nuit-comments #comments .children > li.nuit-edit-open.nuit-sub-next > .nuit-comment::after {
        left:22px;
        bottom:-15px;
    }

    #nuit-comments #commentform .nuit-field {
        display:block;
    }

    #nuit-comments #commentform .nuit-field label {
        margin-bottom:4px;
    }

    #nuit-comments #commentform .nuit-field input {
        width:100%;
    }

    /* 16 px stops iOS from zooming into the field. */
    #nuit-comments #commentform input[type=text],
    #nuit-comments #commentform input[type=email],
    #nuit-comments #commentform textarea,
    #nuit-comments .nuit-edit-form textarea {
        font-size:16px;
        line-height:24px;
    }
}

/* 9. Voting */
#nuit-comments .nuit-votes {
    display:inline-flex;
    align-items:center;
    gap:3px;
}

#nuit-comments .nuit-votes button {
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-width:34px;
    min-height:24px;
    border:0;
    border-radius:var(--nuit-button-radius);
    padding:3px 4px;
    margin:0;
    background:transparent;
    color:var(--nuit-muted-color);
    font:inherit;
    font-size:12px;
    font-weight:400;
    line-height:18px;
    cursor:pointer;
    box-shadow:none;
}

#nuit-comments .nuit-votes .nuit-vote-icon {
    display:block;
    flex:0 0 16px;
    width:16px;
    height:15px;
    fill:currentColor;
    pointer-events:none;
}

#nuit-comments .nuit-votes .nuit-vote-count {
    font-variant-numeric:tabular-nums;
}

#nuit-comments .nuit-votes button:not(:disabled):hover,
#nuit-comments .nuit-votes button[aria-pressed=true] {
    color:var(--nuit-text-color);
}

/* Own vote stays undimmed where voting is closed. */
#nuit-comments .nuit-votes button[aria-pressed=true] {
    font-weight:700;
    opacity:1;
}

#nuit-comments .nuit-votes button:disabled {
    cursor:default;
}

/* 10. Pingbacks and trackbacks */
#nuit-comments .nuit-pings-title {
    margin:22px 0 8px;
    font:inherit;
    font-weight:600;
}

#nuit-comments .nuit-pings {
    margin:0;
    padding:0;
    list-style:none;
}

#nuit-comments .nuit-pings li {
    margin:0;
    padding:8px 0;
    border-bottom:1px dashed var(--nuit-separator-color);
}