/* ── Ghost Comments — inherit page theme ───────────────────────────────────
   The Ghost comments UI renders inside an iframe (#ghost-comments-root iframe).
   Outer container styles target .gh-comments and #ghost-comments-root.
   Inner iframe styles are synced at runtime via theme-toggle.js (syncCommentIframe).
   All values use CSS variables so they automatically respond to light/dark mode.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --scale: 1;
}

@media (min-width: 1920px) {
    :root {
        --scale: 0.8;
    }
}

/* ── Outer comments section container ─────────────────────────────────── */
.gh-comments {
    background-color: transparent !important;
    color: var(--text-color);
    font-family: var(--font1), serif;
    border: none !important;
    box-shadow: none !important;
}

#ghost-comments-root {
    background-color: transparent !important;
    color: var(--text-color);
    font-family: var(--font1), serif;
    --gh-font-family: var(--font1);
    /* Override Ghost's hardcoded accent color so buttons use the page text color */
    --ghost-accent-color: var(--text-color);
}

/* The iframe itself should be transparent so the page background shows through */
#ghost-comments-root iframe {
    background-color: transparent !important;
    color-scheme: light dark;
}

/* ── Avatar / figure ───────────────────────────────────────────────────── */
#ghost-comments-root figure {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 53px;
    width: 53px;
    height: 53px;
    overflow: hidden;
}

#ghost-comments-root figure img {
    filter: var(--image-filter);
    transition: filter 0.5s ease;
    border: 1px solid var(--text-color);
    border-radius: 100%;
    width: 100%;
    height: 100%;
}

#ghost-comments-root figure img:hover {
    filter: unset;
}

#ghost-comments-root figure div {
    width: 100%;
    height: 100%;
}

/* ── Responsive sizing ─────────────────────────────────────────────────── */
@media (min-width: 1439px) {
    #ghost-comments-root figure {
        min-width: calc(3.7vw * var(--scale));
        width: calc(3.7vw * var(--scale));
        height: calc(3.7vw * var(--scale));
    }

    #ghost-comments-root [data-testid="comment-component"] > div {
        margin-right: calc(1.32vw * var(--scale)) !important;
    }

    #ghost-comments-root [data-testid="comment-component"] {
        margin-top: calc(2.36vw * var(--scale));
        margin-bottom: 0;
    }
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 931px) {
    #ghost-comments-root figure {
        margin-right: 5px;
    }

    #ghost-comments-root [data-testid="like-button"] svg {
        width: 14px;
        height: 14px;
    }

    #ghost-comments-root [data-testid="comment-component"] {
        margin-top: 28px;
    }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 443px) {
    #ghost-comments-root figure {
        min-width: 47px;
        width: 47px;
        height: 47px;
        margin-right: 4px;
    }

    #ghost-comments-root [data-testid="like-button"] svg {
        width: 13px;
        height: 13px;
    }

    #ghost-comments-root [data-testid="comment-component"] {
        margin-top: 24px;
    }

    #ghost-comments-root [data-testid="comment-component"] > div {
        margin-right: 12px !important;
    }
}