/* HTMLCommentBox — Slate theme skin */

#HCB_comment_box {
    font-family: "Public Sans", sans-serif;
    font-size: 16px;
    color: #4e4e57;
    margin-top: 40px;
}

/* ── Section heading ─────────────────────────────── */
#HCB_comment_box h2,
#HCB_comment_box h3 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #292524;
    line-height: 1.35;
    margin-bottom: 20px;
    margin-top: 0;
}

/* ── Form inputs ─────────────────────────────────── */
#HCB_comment_box input[type="text"],
#HCB_comment_box input[type="email"],
#HCB_comment_box input[type="url"],
#HCB_comment_box textarea,
#HCB_comment_box #hcb_form_name,
#HCB_comment_box #hcb_form_email,
#HCB_comment_box #hcb_form_website,
#HCB_comment_box #hcb_form_content {
    background: #F4F4F5;
    color: #4e4e57;
    font-family: "Public Sans", sans-serif;
    font-size: 15px;
    border: 1px solid #F2F2F2;
    border-radius: 5px;
    padding: 12px 16px;
    box-shadow: none;
    transition: border-color 300ms ease;
    width: 100%;
    box-sizing: border-box;
}

#HCB_comment_box input[type="text"]:focus,
#HCB_comment_box input[type="email"]:focus,
#HCB_comment_box input[type="url"]:focus,
#HCB_comment_box textarea:focus,
#HCB_comment_box #hcb_form_name:focus,
#HCB_comment_box #hcb_form_email:focus,
#HCB_comment_box #hcb_form_website:focus,
#HCB_comment_box #hcb_form_content:focus {
    border-color: #ddd;
    outline: none;
    background: #fff;
}

#HCB_comment_box textarea,
#HCB_comment_box #hcb_form_content {
    min-height: 120px;
    resize: vertical;
    line-height: 1.7;
}

/* ── Form layout: name + website on same row ─────── */
#HCB_comment_box #hcb_form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

#HCB_comment_box .hcb-wrapper-half {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
}

#HCB_comment_box .hcb-wrapper {
    flex: 1 1 100%;
}

/* Submit row — block layout so float:right works naturally */
#HCB_comment_box #hcb_form > div:not(.hcb-wrapper-half):not(.hcb-wrapper):not(.home-desc) {
    flex: 1 1 100%;
    overflow: hidden;
}

/* ── Hide promo text ─────────────────────────────── */
#HCB_comment_box .home-desc {
    display: none !important;
}

/* Placeholder text */
#HCB_comment_box .text-blur {
    color: #aaa;
    font-style: italic;
}
#HCB_comment_box .text-focus {
    color: #4e4e57;
    font-style: normal;
}

/* ── Buttons ─────────────────────────────────────── */

/* Comment (submit) button */
#HCB_comment_box #hcb_form .submit,
#HCB_comment_box #hcb_form #hcb_submit,
#HCB_comment_box #hcb_form input[type="submit"] {
    display: inline-block;
    background: var(--epcl-main-color, var(--ghost-accent-color, #6c757d));
    background-image: none;
    color: #fff !important;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 24px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 0.2px;
    box-shadow: none;
    text-shadow: none;
}

#HCB_comment_box #hcb_form .submit:hover,
#HCB_comment_box #hcb_form #hcb_submit:hover,
#HCB_comment_box #hcb_form input[type="submit"]:hover {
    color: #fff !important;
    background-image: none;
    transform: none !important;
    transition: none !important;
}

/* Add Image button */
#HCB_comment_box #hcb_file_label a.btn,
#HCB_comment_box .btn-secondary {
    display: inline-block;
    background: #F4F4F5;
    background-image: none;
    color: #4e4e57 !important;
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    transition: background 200ms ease;
    margin-left: 8px;
}

#HCB_comment_box #hcb_file_label a.btn:hover,
#HCB_comment_box .btn-secondary:hover {
    background: #ebebec;
    background-image: none;
    color: #292524 !important;
}

/* ── Individual comments ─────────────────────────── */
#HCB_comment_box blockquote {
    background: #fff;
    border: 1px solid #F2F2F2;
    border-left: none;
    border-radius: 10px;
    padding: 20px 24px;
    margin: 0 0 16px 0;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.03);
}

#HCB_comment_box .author-name {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #292524;
}

#HCB_comment_box .hcb-comment-body,
#HCB_comment_box .hcb-comment-body p {
    font-family: "Public Sans", sans-serif;
    font-size: 15px;
    color: #4e4e57;
    line-height: 1.75;
    margin: 6px 0 0;
}

/* Links inside comments */
#HCB_comment_box .hcb-comment-tb a,
#HCB_comment_box blockquote a {
    color: #4e4e57;
    text-decoration: underline 1px var(--ghost-accent-color, #292524);
    transition: color 300ms ease;
}

#HCB_comment_box .hcb-comment-tb a:hover,
#HCB_comment_box blockquote a:hover {
    color: var(--ghost-accent-color, #292524);
    text-decoration-color: transparent;
}

/* Timestamp / meta */
#HCB_comment_box .hcb-ts,
#HCB_comment_box .hcb-comment-meta {
    font-size: 13px;
    color: #aaa;
    margin-top: 4px;
}

/* ── "No comments yet" / empty state ────────────── */
#HCB_comment_box .hcb-no-comments {
    color: #aaa;
    font-style: italic;
}

/* ── General links ───────────────────────────────── */
#HCB_comment_box a {
    color: #4e4e57;
    transition: color 300ms ease;
}
#HCB_comment_box a:hover {
    color: var(--ghost-accent-color, #292524);
}

/* ── Branding / footer link ──────────────────────── */
#HCB_comment_box .hcb-brand,
#HCB_comment_box .poweredby {
    font-size: 12px;
    color: #ccc;
    margin-top: 12px;
}

/* ══ Dark mode ═══════════════════════════════════════ */

html[data-theme="dark"] #HCB_comment_box {
    color: #b8bcc2;
}

html[data-theme="dark"] #HCB_comment_box h2,
html[data-theme="dark"] #HCB_comment_box h3 {
    color: #f0f0f0;
}

/* Inputs */
html[data-theme="dark"] #HCB_comment_box input[type="text"],
html[data-theme="dark"] #HCB_comment_box input[type="email"],
html[data-theme="dark"] #HCB_comment_box input[type="url"],
html[data-theme="dark"] #HCB_comment_box textarea,
html[data-theme="dark"] #HCB_comment_box #hcb_form_name,
html[data-theme="dark"] #HCB_comment_box #hcb_form_email,
html[data-theme="dark"] #HCB_comment_box #hcb_form_website,
html[data-theme="dark"] #HCB_comment_box #hcb_form_content {
    background: #2a2d32;
    color: #b8bcc2;
    border-color: #333740;
}

html[data-theme="dark"] #HCB_comment_box input[type="text"]:focus,
html[data-theme="dark"] #HCB_comment_box input[type="email"]:focus,
html[data-theme="dark"] #HCB_comment_box input[type="url"]:focus,
html[data-theme="dark"] #HCB_comment_box textarea:focus,
html[data-theme="dark"] #HCB_comment_box #hcb_form_name:focus,
html[data-theme="dark"] #HCB_comment_box #hcb_form_email:focus,
html[data-theme="dark"] #HCB_comment_box #hcb_form_website:focus,
html[data-theme="dark"] #HCB_comment_box #hcb_form_content:focus {
    background: #30343b;
    border-color: #464c56;
}

/* Add Image button — dark */
html[data-theme="dark"] #HCB_comment_box #hcb_file_label a.btn,
html[data-theme="dark"] #HCB_comment_box .btn-secondary {
    background: #2a2d32;
    background-image: none;
    color: #b8bcc2 !important;
    border-color: #333740;
}

html[data-theme="dark"] #HCB_comment_box #hcb_file_label a.btn:hover,
html[data-theme="dark"] #HCB_comment_box .btn-secondary:hover {
    background: #2e3138;
    color: #f0f0f0 !important;
}

/* Comment cards */
html[data-theme="dark"] #HCB_comment_box blockquote {
    background: #22252a;
    border-color: #333740;
    box-shadow: none;
}

html[data-theme="dark"] #HCB_comment_box .author-name {
    color: #f0f0f0;
}

html[data-theme="dark"] #HCB_comment_box .hcb-comment-body,
html[data-theme="dark"] #HCB_comment_box .hcb-comment-body p {
    color: #b8bcc2;
}

html[data-theme="dark"] #HCB_comment_box .hcb-comment-tb a,
html[data-theme="dark"] #HCB_comment_box blockquote a {
    color: #b8bcc2;
}

html[data-theme="dark"] #HCB_comment_box a {
    color: #b8bcc2;
}

html[data-theme="dark"] #HCB_comment_box .text-focus {
    color: #b8bcc2;
}

/* Login icon */
html[data-theme="dark"] #HCB_comment_box img.hcb-icon {
    filter: invert(1) opacity(0.7);
}