/* HTML Comment Box — Casper skin
   Loaded after HCB's bootstrap skin; buttons keep HCB's look, only fonts change. */

#HCB_comment_box {
    --hcb-text: #3c484e;
    --hcb-heading: var(--color-darkgrey);
    --hcb-muted: var(--color-secondary-text);
    --hcb-input-bg: #fff;
    --hcb-input-border: var(--color-border);
    --hcb-input-border-hover: #c9c9c9;
    --hcb-card-bg: #fafafa;
    --hcb-card-border: #ececec;

    margin-top: 2rem;
    font-family: var(--gh-font-body, var(--font-sans));
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--hcb-text);
}

html.dark-mode #HCB_comment_box {
    --hcb-text: rgba(255, 255, 255, 0.75);
    --hcb-heading: rgba(255, 255, 255, 0.9);
    --hcb-muted: rgba(255, 255, 255, 0.5);
    --hcb-input-bg: rgba(255, 255, 255, 0.04);
    --hcb-input-border: rgba(255, 255, 255, 0.12);
    --hcb-input-border-hover: rgba(255, 255, 255, 0.25);
    --hcb-card-bg: rgba(255, 255, 255, 0.03);
    --hcb-card-border: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
    html.auto-color #HCB_comment_box {
        --hcb-text: rgba(255, 255, 255, 0.75);
        --hcb-heading: rgba(255, 255, 255, 0.9);
        --hcb-muted: rgba(255, 255, 255, 0.5);
        --hcb-input-bg: rgba(255, 255, 255, 0.04);
        --hcb-input-border: rgba(255, 255, 255, 0.12);
        --hcb-input-border-hover: rgba(255, 255, 255, 0.25);
        --hcb-card-bg: rgba(255, 255, 255, 0.03);
        --hcb-card-border: rgba(255, 255, 255, 0.08);
    }
}

/* Fonts everywhere, buttons included */
#HCB_comment_box,
#HCB_comment_box input,
#HCB_comment_box textarea,
#HCB_comment_box button,
#HCB_comment_box .btn,
#HCB_comment_box .submit {
    font-family: var(--gh-font-heading, var(--font-sans));
}

#HCB_comment_box h2,
#HCB_comment_box h3 {
    margin: 0 0 1.6rem;
    font-family: var(--gh-font-heading, var(--font-sans));
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hcb-heading);
}

/* Form layout: name + email side by side, message full width */
#HCB_comment_box #hcb_form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

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

#HCB_comment_box .hcb-wrapper,
#HCB_comment_box #hcb_form > div:not(.hcb-wrapper-half):not(.hcb-wrapper):not(.home-desc) {
    flex: 1 1 100%;
}

@media (max-width: 500px) {
    #HCB_comment_box .hcb-wrapper-half {
        flex-basis: 100%;
    }
}

/* Text inputs */
#HCB_comment_box input[type="text"],
#HCB_comment_box input[type="email"],
#HCB_comment_box input[type="url"],
#HCB_comment_box textarea {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 1.2rem 1.4rem;
    box-sizing: border-box;
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--hcb-text);
    background: var(--hcb-input-bg);
    background-image: none;
    border: 1px solid var(--hcb-input-border);
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#HCB_comment_box input[type="text"]:hover,
#HCB_comment_box input[type="email"]:hover,
#HCB_comment_box input[type="url"]:hover,
#HCB_comment_box textarea:hover {
    border-color: var(--hcb-input-border-hover);
}

#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 {
    outline: none;
    border-color: var(--ghost-accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ghost-accent-color) 20%, transparent);
}

#HCB_comment_box textarea {
    min-height: 12rem;
    resize: vertical;
}

#HCB_comment_box ::placeholder,
#HCB_comment_box .text-blur {
    color: var(--hcb-muted);
    font-style: normal;
    opacity: 1;
}

#HCB_comment_box .text-focus {
    color: var(--hcb-text);
}

/* Drop HCB's faux drop-shadow wrappers around the inputs */
#HCB_comment_box [class^="hcb-shadow"]:not(input):not(textarea),
#HCB_comment_box [class*=" hcb-shadow"]:not(input):not(textarea) {
    background: none;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 0;
}

/* Hide "Not using Html Comment Box yet?" */
#HCB_comment_box .home-desc {
    display: none !important;
}

/* Comments */
#HCB_comment_box #comments_list {
    margin-top: 3.2rem;
}

#HCB_comment_box blockquote {
    margin: 0 0 1.6rem;
    padding: 1.6rem 2rem;
    background: var(--hcb-card-bg);
    border: 1px solid var(--hcb-card-border);
    border-radius: 8px;
    box-shadow: none;
}

#HCB_comment_box .author-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--hcb-heading);
}

#HCB_comment_box .date,
#HCB_comment_box .hcb-comment-tb {
    font-size: 1.3rem;
    color: var(--hcb-muted);
}

#HCB_comment_box .hcb-comment-body,
#HCB_comment_box .hcb-comment-body p {
    margin: 0.6rem 0 0;
    font-family: var(--gh-font-body, var(--font-serif));
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--hcb-text);
}

#HCB_comment_box a {
    color: var(--hcb-text);
}

#HCB_comment_box a:hover {
    color: var(--ghost-accent-color);
}

#HCB_comment_box .hcb-comment-body a {
    color: var(--ghost-accent-color);
}

html.dark-mode #HCB_comment_box img.hcb-icon {
    filter: invert(1) opacity(0.7);
}

@media (prefers-color-scheme: dark) {
    html.auto-color #HCB_comment_box img.hcb-icon {
        filter: invert(1) opacity(0.7);
    }
}