/*
 * Scoped Blog Comments QA improvements.
 *
 * Dashboard navigation remains Inkorly-branded. Public comment structure uses
 * stable classes and overridable variables without replacing per-site design.
 */

/* Keep the active Blog Posts / Manage Comments tab readable despite the
 * permanent dashboard-link color rule in inkorly-blog-comments.css. */
body.inkorly-dashboard-ui .inkorly-blog-section-nav .inkorly-blog-section-nav__link.is-active:is(.inkorly-blog-section-nav__link),
body.inkorly-dashboard-ui .inkorly-blog-section-nav .inkorly-blog-section-nav__link.is-active:is(.inkorly-blog-section-nav__link):hover,
body.inkorly-dashboard-ui .inkorly-blog-section-nav .inkorly-blog-section-nav__link.is-active:is(.inkorly-blog-section-nav__link):focus-visible {
    color: #ffffff !important;
}

body.inkorly-managed-blog-comments {
    --inkorly-public-comments-border: #e4e7ec;
    --inkorly-public-comments-notice-bg: #eef8f1;
    --inkorly-public-comments-notice-border: #9bd0aa;
    --inkorly-public-comments-notice-text: #175c2f;
}

body.inkorly-managed-blog-comments .inkorly-public-comments-heading {
    border-top: 1px solid var(--inkorly-public-comments-border);
    clear: both;
    font: inherit;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    margin: clamp(32px, 5vw, 56px) 0 22px;
    padding-top: clamp(24px, 3vw, 34px);
    width: 100%;
}

body.inkorly-managed-blog-comments .inkorly-comment-submission-notice {
    background: var(--inkorly-public-comments-notice-bg);
    border: 1px solid var(--inkorly-public-comments-notice-border);
    border-radius: 6px;
    color: var(--inkorly-public-comments-notice-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 22px;
    padding: 14px 16px;
}

body.inkorly-managed-blog-comments .inkorly-commenting-as {
    margin-bottom: 16px;
}

body.inkorly-managed-blog-comments #respond,
body.inkorly-managed-blog-comments .bde-comment-form,
body.inkorly-managed-blog-comments .comment-respond {
    box-sizing: border-box;
    clear: both;
    max-width: none;
    width: 100%;
}

body.inkorly-managed-blog-comments .comment #respond,
body.inkorly-managed-blog-comments .children #respond {
    margin: 24px 0;
    max-width: none;
    width: 100%;
}

body.inkorly-managed-blog-comments #reply-title,
body.inkorly-managed-blog-comments .comment-reply-title {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font: inherit;
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 700;
    gap: 7px 10px;
    line-height: 1.3;
    margin: 0 0 16px;
}

body.inkorly-managed-blog-comments #cancel-comment-reply-link {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

body.inkorly-managed-blog-comments #commentform,
body.inkorly-managed-blog-comments form.comment-form {
    box-sizing: border-box;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

body.inkorly-managed-blog-comments #commentform > p,
body.inkorly-managed-blog-comments form.comment-form > p {
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    width: 100%;
}

body.inkorly-managed-blog-comments #commentform .comment-notes,
body.inkorly-managed-blog-comments #commentform .logged-in-as,
body.inkorly-managed-blog-comments #commentform .comment-form-comment,
body.inkorly-managed-blog-comments #commentform .comment-form-cookies-consent,
body.inkorly-managed-blog-comments #commentform .form-submit,
body.inkorly-managed-blog-comments form.comment-form .comment-notes,
body.inkorly-managed-blog-comments form.comment-form .logged-in-as,
body.inkorly-managed-blog-comments form.comment-form .comment-form-comment,
body.inkorly-managed-blog-comments form.comment-form .comment-form-cookies-consent,
body.inkorly-managed-blog-comments form.comment-form .form-submit {
    grid-column: 1 / -1;
}

body.inkorly-managed-blog-comments #commentform label,
body.inkorly-managed-blog-comments form.comment-form label {
    display: block;
    margin-bottom: 7px;
}

body.inkorly-managed-blog-comments #commentform input[type="text"],
body.inkorly-managed-blog-comments #commentform input[type="email"],
body.inkorly-managed-blog-comments #commentform textarea,
body.inkorly-managed-blog-comments form.comment-form input[type="text"],
body.inkorly-managed-blog-comments form.comment-form input[type="email"],
body.inkorly-managed-blog-comments form.comment-form textarea {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
}

body.inkorly-managed-blog-comments #commentform textarea,
body.inkorly-managed-blog-comments form.comment-form textarea {
    min-height: 140px;
    resize: vertical;
}

body.inkorly-managed-blog-comments #commentform [type="submit"][disabled],
body.inkorly-managed-blog-comments form.comment-form [type="submit"][disabled] {
    cursor: wait;
    opacity: 0.7;
}

body.inkorly-managed-blog-comments .comment-list,
body.inkorly-managed-blog-comments .children,
body.inkorly-managed-blog-comments .bde-comments-list {
    min-width: 0;
}

body.inkorly-managed-blog-comments .comment-list #respond,
body.inkorly-managed-blog-comments .children #respond {
    float: none;
}

@media (max-width: 680px) {
    body.inkorly-managed-blog-comments #commentform,
    body.inkorly-managed-blog-comments form.comment-form {
        grid-template-columns: 1fr;
    }

    body.inkorly-managed-blog-comments #commentform > p,
    body.inkorly-managed-blog-comments form.comment-form > p {
        grid-column: 1;
    }
}

/* Native comment pages for long-running posts. The structure remains fully
 * compatible with per-site design overrides. */
body.inkorly-managed-blog-comments .inkorly-public-comment-pagination {
    clear: both;
    margin: 24px 0;
    width: 100%;
}

body.inkorly-managed-blog-comments .inkorly-public-comment-pagination ul {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.inkorly-managed-blog-comments .inkorly-public-comment-pagination a,
body.inkorly-managed-blog-comments .inkorly-public-comment-pagination .current {
    align-items: center;
    border: 1px solid var(--inkorly-public-comments-border);
    border-radius: 6px;
    display: inline-flex;
    font-size: 14px;
    justify-content: center;
    min-height: 38px;
    min-width: 38px;
    padding: 7px 11px;
    text-decoration: none;
}

body.inkorly-managed-blog-comments .inkorly-public-comment-pagination .current {
    font-weight: 700;
}