/* ──────────────────────────────────────────────────────────────
   Shared comments system.

   Lifted out of styles-x-news.css, where it was already marked "shared" but
   could only be loaded by pulling in the whole blog skin. Any page that
   includes includes/scripts/comments-block.php loads this: the blog article
   and the snorkelling site page, so far.

   On the blog this file is linked BEFORE styles-x-news.css, keeping the blog
   free to override a comment rule at equal specificity the way it could when
   the two lived in one file.
   ────────────────────────────────────────────────────────────── */

/* =========================================================
   Shared comments system — blog theme skin
   Matches previous .art-comments styling
   ========================================================= */

#comments {
    margin-top: 3.5rem;
}

#comments .comments-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

#comments .comments-head {
    margin-bottom: 1.75rem;
}

#comments .ruled,
#comments .comments-count {
    display: none;
}

#comments .sec-title,
#comments .comments-head h2,
#comments .comments-head .comments-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .65rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

#comments .sec-title::after,
#comments .comments-head h2::after,
#comments .comments-head .comments-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
    opacity: .6;
}

#comments .comments-intro {
    font-size: .85rem;
    color: var(--ink-3);
    margin: 0;
}

/* form shell */
#comments .comment-form-panel {
    background: var(--bg-card);
    /*border: 1px solid var(--rule); */
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

#comments .comment-form {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

#comments .comment-form-title {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--emerald);
    margin-bottom: 1.25rem;
}

/* reply state */
#comments .reply-context {
    background: var(--emerald-dim);
    border: 1px solid var(--emerald-rule);
    border-radius: var(--radius);
    padding: .65rem 1rem;
    margin-bottom: 1rem;
    color: var(--emerald-lt);
    font-family: var(--font-mono);
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#comments .reply-cancel-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-3);
    border-radius: var(--radius);
    padding: .35rem .7rem;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .15s ease;
}

#comments .reply-cancel-btn:hover {
    color: var(--emerald);
    border-color: var(--emerald-rule);
    background: var(--emerald-dim);
}

/* grid / spacing */
#comments .row.g-3 {
    --bs-gutter-y: 0;
    --bs-gutter-x: 1rem;
}

#comments .form-row,
#comments .comment-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 575px) {
    #comments .form-row,
    #comments .comment-form .form-row {
        grid-template-columns: 1fr;
    }
}

#comments .form-group {
    margin-bottom: 1rem;
}

/* labels */
#comments .comment-label {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-bottom: .5rem;
    margin-top: .5rem;
}

#comments .comment-optional {
    color: var(--ink-4);
}

/* fields */
#comments .comment-input,
#comments .comment-textarea,
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
    width: 100%;
    background: var(--bg-3);
    border-color: var(--parchment-dim);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .85rem;
    padding: .6rem .85rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-text-fill-color: var(--ink);
    opacity: 1;
}

#comments .comment-input:focus,
#comments .comment-textarea:focus,
#comments input:focus,
#comments textarea:focus {
    border-color: var(--emerald-rule);
    box-shadow: 0 0 0 2px var(--emerald-dim);
    background: var(--bg-3);
    color: var(--ink);
}

#comments .comment-input::placeholder,
#comments .comment-textarea::placeholder,
#comments input::placeholder,
#comments textarea::placeholder {
    color: var(--ink-4);
    opacity: 1;
}

#comments .comment-textarea,
#comments textarea {
    resize: vertical;
    min-height: 110px;
}

/* checkbox */
#comments .comment-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink-2);
    font-size: .82rem;
    margin-bottom: .5rem;
    margin-top: .5rem;
}

#comments .comment-check input[type="checkbox"] {
    accent-color: var(--emerald) !important;
}
/* Unchecked, this is --bg-3 on the form's --bg-card: 1.03:1, invisible. The
   edge stays, but in the accent rather than neutral grey — --emerald reads
   4.32:1, past the 3:1 a control boundary needs. */
.form-check-input{
    background-color: var(--bg-3) !important;
    border: 1px solid var(--emerald) !important;
}

/* messages */
#comments .comment-alert {
    font-family: var(--font-mono);
    font-size: .7rem;
    padding: .65rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.form-check-input:checked {
    background-color: var(--bg-3) !important;
    border: 1px solid var(--emerald) !important;
    color: var(--white) !important;
}
.form-check-input:checked[type="checkbox"] {
    accent-color: var(--emerald) !important;
    background-color: var(--emerald) !important;
    border-color: var(--emerald) !important;
    color: var(--white) !important;
}
.form-check-input:checked:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    background-color: var(--emerald) !important;
}
.form-check-input:active {
    filter: brightness(100%) !important;
}
#comments .comment-alert.is-success {
    background: var(--emerald-dim);
    border: 1px solid var(--emerald-rule);
    color: var(--emerald-lt);
}

#comments .comment-alert.is-error {
    background: rgba(224,90,90,.1);
    border: 1px solid rgba(224,90,90,.35);
    color: var(--red);
}

#comments .comment-note {
    font-size: .78rem;
    color: var(--ink-4);
    margin: 0;
    margin-bottom: .5rem;

}

/* submit button */
#comments .btn-support,
#comments .btn-emerald {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

/* list */
#comments .comments-list {
    margin-top: 1rem;
}

#comments .comment-empty {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--ink-4);
    text-align: center;
    padding: 1.5rem 0;
}

/* comment item */
#comments .comment-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding: 0;
    border: 0;
    position: relative;
}

#comments .comment-item::before {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-3);
   
    display: block;
    flex: 0 0 38px;
    margin-top: 1px;
}

#comments .comment-item::after {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 11px;
    top: 9px;
    font-size: .8rem;
    color: var(--ink-3);
    line-height: 1;
    pointer-events: none;
}

#comments .comment-item > .comment-meta,
#comments .comment-item > .comment-body,
#comments .comment-item > .comment-actions,
#comments .comment-item > .comment-children {
    margin-left: 0;
}

#comments .comment-item > .comment-meta,
#comments .comment-item > .comment-body,
#comments .comment-item > .comment-actions {
    position: relative;
    left: 0;
}

#comments .comment-item {
    flex-wrap: wrap;
}

#comments .comment-meta,
#comments .comment-body,
#comments .comment-actions,
#comments .comment-children {
    width: calc(100% - 54px);
}

#comments .comment-meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}

#comments .comment-author {
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink);
}

#comments .comment-date {
    font-family: var(--font-mono);
    font-size: .6rem;
    color: var(--ink-4);
}

#comments .comment-body {
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.75;
}

#comments .comment-actions {
    margin-top: .4rem;
}

#comments .comment-reply-btn {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-4);
    text-decoration: none;
    margin-top: .4rem;
    display: inline-block;
    transition: color .15s;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

#comments .comment-reply-btn:hover {
    color: var(--emerald);
}

/* nested replies */
#comments .comment-children {
    margin-top: .75rem;
    margin-left: 3rem;
    padding-left: 0;
    border-left: 0;
}

#comments .comment-children .comment-item {
    margin-bottom: 1.25rem;
}

/* make Turnstile fit nicely */
#comments .cf-turnstile {
    margin-top: .25rem;
}

/* prevent hidden honeypot showing */
#comments .comment-honeypot {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* Light theme: the same ivory field-guide treatment the blog surfaces use.
   Split out of a combined rule in styles-x-news.css when this file was
   separated — the blog half of it stayed there. */
html[data-theme="light"] .comment {
    background: var(--bg-card);
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(55,45,28,.06);
}

html[data-theme="light"] .comment p,
html[data-theme="light"] .comment small {
    color: var(--ink-2);
}