/*
 * Theming and layout enhancements
 */

:root[data-socialfront-theme],
body[data-socialfront-theme],
[data-socialfront-root] {
    --sf-bg: #f5f7fb;
    --sf-surface: #ffffff;
    --sf-surface-soft: #f9fafc;
    --sf-border: #d5dceb;
    --sf-border-strong: #b8c2d5;
    --sf-text: #0f172a;
    --sf-text-muted: #4b5568;
    --sf-link: #2563eb;
    --sf-link-hover: #1d4ed8;
    --sf-accent: #ff5a3c;
    --sf-thread-line: linear-gradient(180deg, var(--sf-link), var(--sf-accent));
    --sf-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
    --sf-radius: 18px;
    --sf-transition: 180ms ease;
    color: var(--sf-text);
    background: var(--sf-bg);
    transition: background-color var(--sf-transition), color var(--sf-transition);
    color-scheme: light;
}

:root[data-socialfront-theme="dark"],
body[data-socialfront-theme="dark"],
[data-socialfront-root][data-socialfront-theme="dark"] {
    --sf-bg: #0c1016;
    --sf-surface: #161b23;
    --sf-surface-soft: #1d2330;
    --sf-border: #2d3645;
    --sf-border-strong: #3d4758;
    --sf-text: #f1f5f9;
    --sf-text-muted: #9aa4b2;
    --sf-link: #7ca7ff;
    --sf-link-hover: #9dc0ff;
    --sf-accent: #ff8b60;
    --sf-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}

body[data-socialfront-theme] {
    background: var(--sf-bg);
    color: var(--sf-text);
    transition: background-color var(--sf-transition), color var(--sf-transition);
    color-scheme: light;
}

body[data-socialfront-theme="dark"] {
    color-scheme: dark;
}

body.single-sf_submission {
    overflow-x: hidden;
}

[data-socialfront-root],
[data-socialfront-root] * {
    box-sizing: border-box;
}

body[data-socialfront-theme] a,
[data-socialfront-root] a {
    color: var(--sf-link);
    transition: color var(--sf-transition);
}

body[data-socialfront-theme] a:hover,
body[data-socialfront-theme] a:focus,
[data-socialfront-root] a:hover,
[data-socialfront-root] a:focus {
    color: var(--sf-link-hover);
}

body.wp-theme-twentytwentyfive #page > #header,
body.wp-theme-twentytwentyfive #page > #footer,
body.wp-theme-twentytwentyfive #page > hr,
body.wp-theme-twentytwentyfive #page > #nav,
body.wp-theme-twentytwentyfive #page > #access {
    display: none;
}

.socialfront-shell {
    width: min(100%, var(--wp--style--global--content-size, 1120px));
    max-width: min(var(--wp--style--global--content-size, 1120px), 100%);
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 4vw, 1.5rem) clamp(3rem, 5vw, 3.5rem);
    box-sizing: border-box;
}

.wp-block-post-content .socialfront-shell,
.wp-block-query .socialfront-shell {
    width: min(
        var(--wp--style--global--content-size, 1120px),
        max(0px, calc(100vw - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px)))
    );
    max-width: min(
        var(--wp--style--global--content-size, 1120px),
        max(0px, calc(100vw - var(--wp--style--root--padding-left, 0px) - var(--wp--style--root--padding-right, 0px)))
    );
}

.wp-block-columns .socialfront-shell {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 782px) {
    .socialfront-shell {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .socialfront-submission,
    .socialfront-submit {
        max-width: 100%;
    }

    .socialfront-single__main,
    .socialfront-single__sidebar {
        min-width: 0;
    }

    .wp-block-post-content .socialfront-shell,
    .wp-block-query .socialfront-shell {
        width: 100%;
        max-width: 100%;
    }
}

.socialfront-shell + .socialfront-shell {
    margin-top: 2.5rem;
}

.socialfront-single__card .socialfront-shell {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.socialfront-single__card .socialfront-shell .socialfront-message {
    margin-bottom: 1.5rem;
}

.socialfront-theme-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.socialfront-theme-toggle {
    appearance: none;
    border: 1px solid var(--sf-border);
    background: var(--sf-surface);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--sf-text);
    box-shadow: var(--sf-shadow);
    cursor: pointer;
    transition: transform var(--sf-transition), box-shadow var(--sf-transition), border-color var(--sf-transition), background-color var(--sf-transition);
}

.socialfront-theme-toggle:hover,
.socialfront-theme-toggle:focus {
    transform: translateY(-1px);
    box-shadow: 0 20px 34px rgba(15, 23, 42, 0.16);
    outline: none;
}

[data-socialfront-root][data-socialfront-theme="dark"] .socialfront-theme-toggle:hover,
[data-socialfront-root][data-socialfront-theme="dark"] .socialfront-theme-toggle:focus {
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.45);
}

.socialfront-theme-toggle__icon {
    display: inline-flex;
    width: 1.1rem;
    height: 1.1rem;
    pointer-events: none;
}

.socialfront-theme-toggle__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.socialfront-theme-toggle__label {
    text-transform: capitalize;
    pointer-events: none;
}

[data-socialfront-root] .socialfront-frontpage,
[data-socialfront-root] .socialfront-submit,
[data-socialfront-root] .socialfront-submission__article {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
}

[data-socialfront-root] .socialfront-message,
[data-socialfront-root] .socialfront-frontpage__karma,
[data-socialfront-root] .socialfront-frontpage__filters,
[data-socialfront-root] .socialfront-frontpage__tabs button,
[data-socialfront-root] .socialfront-submit__tabs button {
    background: var(--sf-surface-soft);
    border-color: var(--sf-border);
    color: var(--sf-text);
}

[data-socialfront-root] .socialfront-frontpage__tabs button.is-active,
[data-socialfront-root] .socialfront-submit__tabs button.is-active {
    border-color: var(--sf-border-strong);
    color: var(--sf-link);
}

[data-socialfront-root] .socialfront-submission__discussion,
[data-socialfront-root] .socialfront-comments__sort,
[data-socialfront-root] .socialfront-comment {
    background: var(--sf-surface-soft);
    border-color: var(--sf-border);
}

[data-socialfront-root] .socialfront-submission__discussion {
    border-radius: calc(var(--sf-radius) - 6px);
}

[data-socialfront-root] .socialfront-comment {
    color: var(--sf-text);
}

[data-socialfront-root] .socialfront-comment__body,
[data-socialfront-root] .socialfront-comment__meta,
[data-socialfront-root] .socialfront-comment__footer {
    color: inherit;
}

[data-socialfront-root] .socialfront-frontpage__list,
[data-socialfront-root] .socialfront-submit__form,
[data-socialfront-root] .socialfront-submission__content {
    color: var(--sf-text);
}

[data-socialfront-root] .socialfront-submit__status,
[data-socialfront-root] .description {
    color: var(--sf-text-muted);
}

.socialfront-single {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.75rem;
    align-items: flex-start;
}

.socialfront-single__main,
.socialfront-single__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.socialfront-single__card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.socialfront-single__card-submit > * {
    width: 100%;
}

.socialfront-comments__sort {
    border-radius: calc(var(--sf-radius) - 8px);
}

.socialfront-comments__sort-link {
    color: var(--sf-text-muted);
}

.socialfront-comments__sort-link.is-active {
    color: var(--sf-link);
}

.socialfront-frontpage__toolbar {
    background: var(--sf-surface);
    border-radius: calc(var(--sf-radius) - 6px);
    border: 1px solid var(--sf-border);
    box-shadow: var(--sf-shadow);
}

.socialfront-frontpage__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.socialfront-frontpage__tools {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.socialfront-frontpage__tools .socialfront-theme-toolbar {
    margin-left: 0;
}

.socialfront-notification {
    --notification-color: var(--sf-link);
    display: inline-flex;
    align-items: center;
}

.socialfront-notification__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 1px solid var(--sf-border);
    background: var(--sf-surface);
    color: var(--sf-text-muted);
    transition: color var(--sf-transition), border-color var(--sf-transition), background-color var(--sf-transition), box-shadow var(--sf-transition);
}

.socialfront-notification__link:hover,
.socialfront-notification__link:focus {
    background: var(--sf-surface-soft);
    color: var(--sf-text);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    outline: none;
}

.socialfront-notification[data-has-unread="1"] .socialfront-notification__link {
    border-color: var(--notification-color, var(--sf-link));
    color: var(--notification-color, var(--sf-link));
}

.socialfront-notification__icon svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

.socialfront-notification__icon {
    color: var(--sf-text-muted);
    filter: grayscale(1);
    opacity: 0.7;
    transition: color var(--sf-transition), filter var(--sf-transition), opacity var(--sf-transition);
}

.socialfront-notification__badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--notification-color, var(--sf-link));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.socialfront-notification__badge[hidden] {
    display: none;
}

.socialfront-notification[data-has-unread="1"] .socialfront-notification__icon {
    color: var(--notification-color, var(--sf-link));
    filter: none;
    opacity: 1;
}

.socialfront-frontpage__item {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    border-radius: calc(var(--sf-radius) - 4px);
}

.socialfront-frontpage__empty {
    background: var(--sf-surface);
    border: 1px dashed var(--sf-border);
    border-radius: calc(var(--sf-radius) - 8px);
    color: var(--sf-text-muted);
}

.socialfront-frontpage__load-more {
    background: var(--sf-accent);
    border-color: transparent;
    color: #fff;
}

.socialfront-frontpage__load-more:hover,
.socialfront-frontpage__load-more:focus {
    background: var(--sf-link);
}

.socialfront-frontpage__author {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-weight: 600;
}

.socialfront-frontpage__author-link {
    color: var(--sf-link);
    text-decoration: none;
}

.socialfront-frontpage__author-link:hover,
.socialfront-frontpage__author-link:focus {
    text-decoration: underline;
}

.socialfront-frontpage__author-text {
    color: var(--sf-text);
}

.socialfront-frontpage__author-karma {
    color: var(--sf-text-muted);
    font-weight: 500;
    font-size: 0.85rem;
}

.socialfront-frontpage__utility {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
}

.socialfront-frontpage__profile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: calc(var(--sf-radius) - 10px);
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    color: var(--sf-link);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--sf-transition), border-color var(--sf-transition), color var(--sf-transition), box-shadow var(--sf-transition);
}

.socialfront-frontpage__profile-link:hover,
.socialfront-frontpage__profile-link:focus {
    background: var(--sf-surface-soft);
    border-color: var(--sf-link);
    box-shadow: 0 8px 24px -18px rgba(37, 99, 235, 0.4);
}

.socialfront-profile-route {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.25rem 3rem;
}

.socialfront-frontpage__item.is-sticky {
    border-color: var(--sf-accent);
    box-shadow: 0 16px 34px -28px rgba(37, 99, 235, 0.45);
}

.socialfront-frontpage__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--sf-accent);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.socialfront-frontpage__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.socialfront-frontpage__sticky {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: calc(var(--sf-radius) - 10px);
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sf-link);
    cursor: pointer;
    transition: background-color var(--sf-transition), border-color var(--sf-transition), color var(--sf-transition);
}

.socialfront-frontpage__sticky:hover,
.socialfront-frontpage__sticky:focus {
    background: var(--sf-surface-soft);
    border-color: var(--sf-link);
    outline: none;
}

.socialfront-frontpage__sticky[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.socialfront-profile-comment__name-link {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.socialfront-profile-comment__name-link:hover,
.socialfront-profile-comment__name-link:focus {
    text-decoration: underline;
}

.socialfront-submit__form {
    background: var(--sf-surface);
    border-radius: calc(var(--sf-radius) - 6px);
    border: 1px solid var(--sf-border);
    box-shadow: var(--sf-shadow);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.socialfront-submit__tabs button {
    transition: background-color var(--sf-transition), border-color var(--sf-transition), color var(--sf-transition);
}

.socialfront-submit__tabs button.is-active {
    background: var(--sf-surface);
}

.socialfront-submit__communities {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.socialfront-submit__communities-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    color: var(--sf-text-muted);
}

.socialfront-submit__communities ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.socialfront-submit__communities a {
    color: var(--sf-link);
    font-weight: 600;
    text-decoration: none;
}

.socialfront-submit__communities a:hover,
.socialfront-submit__communities a:focus {
    text-decoration: underline;
}

.socialfront-submit input,
.socialfront-submit textarea,
.socialfront-submit select {
    background: var(--sf-surface-soft);
    border-color: var(--sf-border);
    color: var(--sf-text);
    transition: border-color var(--sf-transition), box-shadow var(--sf-transition), background-color var(--sf-transition);
}

.socialfront-submit input:focus,
.socialfront-submit textarea:focus,
.socialfront-submit select:focus {
    border-color: var(--sf-link);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    outline: none;
}

.socialfront-submit__actions .button.button-primary {
    background: var(--sf-accent);
    border-color: transparent;
    transition: filter var(--sf-transition), transform var(--sf-transition);
}

.socialfront-submit__actions .button.button-primary:hover,
.socialfront-submit__actions .button.button-primary:focus {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.socialfront-comment__footer,
.socialfront-comment__header {
    color: var(--sf-text-muted);
}

.socialfront-comment__body {
    color: var(--sf-text);
}

.socialfront-comment__reaction-option,
.socialfront-vote {
    background: var(--sf-surface);
    border-color: var(--sf-border);
    color: inherit;
}

.socialfront-frontpage__thumb-placeholder {
    background: var(--sf-surface-soft);
    color: var(--sf-text-muted);
    border-color: var(--sf-border);
}

.socialfront-frontpage__thumb-image {
    border-radius: calc(var(--sf-radius) - 12px);
    border: 1px solid var(--sf-border);
}

.socialfront-frontpage__image-expanded {
    border-color: var(--sf-border);
}

.socialfront-frontpage__loader {
    background: var(--sf-surface);
    border-radius: calc(var(--sf-radius) - 8px);
    border: 1px dashed var(--sf-border);
    color: var(--sf-text-muted);
}

.socialfront-submission__discussion .comment-respond,
.socialfront-submission__discussion .comments-title,
.socialfront-submission__discussion .comment-reply-title {
    color: var(--sf-text);
}

.socialfront-submission__discussion a {
    color: var(--sf-link);
}

@media (max-width: 1024px) {
    .socialfront-shell {
        padding: 1.5rem clamp(1rem, 5vw, 1.25rem) clamp(2.5rem, 6vw, 3rem);
    }

    .socialfront-single {
        grid-template-columns: minmax(0, 1fr);
    }

    .socialfront-single__sidebar {
        order: 2;
    }

    .socialfront-submit__form {
        padding: 1.25rem;
    }

    .socialfront-single__main {
        order: 1;
    }
}

@media (max-width: 640px) {
    .socialfront-shell {
        padding: 0.75rem clamp(0.75rem, 4vw, 1.1rem) 1.5rem;
    }

    .socialfront-submission {
        margin: 0.5rem auto 1.5rem;
        padding: 0 clamp(0.75rem, 4vw, 1.25rem) clamp(2rem, 7vw, 3rem);
    }

    .socialfront-submission__article {
        padding: 1.5rem 1rem;
    }

    .socialfront-theme-toolbar {
        justify-content: center;
    }

    .socialfront-theme-toggle {
        width: 100%;
        justify-content: center;
    }

    .socialfront-submission__header {
        gap: 1rem;
    }

    .socialfront-submission__title {
        font-size: 1.65rem;
    }

    .socialfront-submission__topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .socialfront-submission__topbar .socialfront-frontpage__tools {
        margin-left: 0;
        justify-content: flex-start;
        width: 100%;
    }

    .socialfront-submission__topbar .socialfront-frontpage__karma {
        width: 100%;
    }

    .socialfront-submission__meta {
        gap: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}
/*
 * SocialFront front-end scaffolding styles.
 */

.socialfront-frontpage {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.socialfront-message {
    padding: 1.25rem;
    background: var(--sf-surface-soft);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
    color: var(--sf-text);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.socialfront-message p:last-child {
    margin-bottom: 0;
}

.socialfront-frontpage__welcome {
    margin-bottom: 0.75rem;
}

.socialfront-frontpage__community-banner {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--sf-surface-soft);
    border: 1px solid var(--sf-border);
    border-radius: calc(var(--sf-radius) - 6px);
    font-weight: 600;
    color: var(--sf-text);
}

.socialfront-submission {
    width: 100%;
    max-width: none;
    margin: 0.75rem auto 2.25rem;
    padding: 0 clamp(1rem, 3vw, 1.75rem) clamp(2rem, 6vw, 3rem);
}

.socialfront-submission__article {
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 10px;
    padding: clamp(1.75rem, 4vw, 2.25rem);
    box-shadow: 0 18px 34px -26px rgba(23, 43, 77, 0.35);
}

.socialfront-submission__header {
    border-bottom: 1px solid #eef0f3;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.socialfront-submission__topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
    width: 100%;
}

.socialfront-submission__topbar .socialfront-frontpage__tools {
    margin-left: auto;
}

.socialfront-submission__topbar .socialfront-frontpage__karma {
    margin-bottom: 0;
    flex-wrap: wrap;
    max-width: 100%;
}

.socialfront-submission__title {
    font-size: 2rem;
    line-height: 1.25;
    margin: 0;
}
.socialfront-submission__vote {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid #e0e6ef;
    border-radius: 999px;
    padding: 0.5rem 0.65rem;
    background: #f4f7fb;
}

.socialfront-submission__score {
    font-weight: 700;
    font-size: 1rem;
    color: #1f2933;
}

.socialfront-submission__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    list-style: none;
    padding: 1rem 0 0;
    margin: 1rem 0 0;
    border-top: 1px solid #eef0f3;
    font-size: 0.85rem;
    color: #5b6575;
}

.socialfront-submission__meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
}

.socialfront-submission__meta-item .label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    color: #8892a4;
}

.socialfront-submission__meta-item .value {
    font-weight: 600;
    color: #1f2933;
    word-break: break-word;
}

.socialfront-submission__meta-item .detail {
    font-size: 0.7rem;
    color: #8892a4;
}

.socialfront-submission__content {
    font-size: 1.05rem;
    line-height: 1.6;
    overflow-wrap: break-word;
    word-break: break-word;
}

.socialfront-submission__content img,
.socialfront-submission__content video,
.socialfront-submission__content iframe,
.socialfront-submission__content table,
.socialfront-submission__content pre {
    max-width: 100%;
}

.socialfront-submission__content table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

.socialfront-submission__content pre {
    white-space: pre-wrap;
}

.socialfront-submission__summary {
    margin: 1rem 0 0;
    color: var(--sf-text-muted);
}

.socialfront-submission__preview {
    margin: 1.25rem 0 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 28px -24px rgba(15, 32, 53, 0.35);
}

.socialfront-submission__preview img {
    width: 100%;
    display: block;
}

.socialfront-submission__preview figcaption {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: #4c5564;
    background: #f5f7fa;
}

.socialfront-submission__embed {
    margin: 0 0 1.5rem;
}

.socialfront-submission__embed .twitter-tweet,
.socialfront-submission__embed .twitter-tweet-rendered {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.socialfront-submission__embed iframe,
.socialfront-submission__embed blockquote,
.socialfront-submission__embed div,
.socialfront-submission__embed .wp-video {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
    box-sizing: border-box;
    min-width: 0 !important;
}

.socialfront-submission__content > *:first-child {
    margin-top: 0;
}

.socialfront-submission__content p {
    margin-bottom: 1.3rem;
}

.socialfront-submission__gallery {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.socialfront-submission__gallery img {
    width: 100%;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 12px 28px -22px rgba(15, 32, 53, 0.45);
}

.socialfront-submission__gallery figcaption {
    margin-top: 0.5rem;
    color: #5a6370;
    font-size: 0.9rem;
}

.socialfront-submission__discussion {
    margin-top: 2.5rem;
}

.socialfront-comments {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.socialfront-comments__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.socialfront-comments__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: #1f2933;
}

.socialfront-comments__list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    isolation: isolate;
    border-left: 0;
}

.socialfront-comments__list::before {
    content: '';
    position: absolute;
    top: 0.25rem;
    bottom: 0.25rem;
    left: 0.45rem;
    width: 2px;
    border-radius: 999px;
    background-image: var(--sf-thread-line);
    opacity: 0.65;
    pointer-events: none;
}

.socialfront-comments__list > li,
.socialfront-comments__list .children > li {
    position: relative;
    z-index: 1;
}

.socialfront-comments__list .children {
    list-style: none;
    margin: 1.25rem 0 0 1.25rem;
    padding: 0 0 0 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    border-left: 0;
}

.socialfront-comments__list .children::before {
    content: none;
}

.socialfront-comment__article {
    background: #ffffff;
    border: 1px solid #dce3ee;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 12px 28px -24px rgba(15, 32, 53, 0.3);
}

.socialfront-comment__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.socialfront-comment__meta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.socialfront-comment__author {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    color: #1f2933;
}

.socialfront-comment__author img {
    border-radius: 999px;
}

.socialfront-comment__name a {
    color: inherit;
    text-decoration: none;
}

.socialfront-comment__name a:hover {
    text-decoration: underline;
}

.socialfront-comment__time {
    font-size: 0.85rem;
    color: #6b7380;
}

.socialfront-comment__toggle {
    border: 1px solid var(--sf-border, #d5dceb);
    background: transparent;
    color: var(--sf-link, #2563eb);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--sf-transition, 0.2s ease), color var(--sf-transition, 0.2s ease), border-color var(--sf-transition, 0.2s ease), box-shadow var(--sf-transition, 0.2s ease);
}

.socialfront-comment__toggle:hover,
.socialfront-comment__toggle:focus {
    color: var(--sf-text, #1f2933);
    background: var(--sf-surface-soft, #f5f7fb);
    border-color: var(--sf-border-strong, #b8c2d5);
    box-shadow: 0 10px 24px rgba(15, 32, 53, 0.14);
    outline: none;
}

.socialfront-comment__item.is-collapsed > .children {
    display: none;
}

.socialfront-comment__item.is-collapsed > .socialfront-comment__article {
    border-style: dashed;
    opacity: 0.92;
}

.socialfront-comment__content {
    font-size: 0.95rem;
    color: #2f3744;
}

.socialfront-comment__content p {
    margin: 0 0 0.9rem;
}

.socialfront-comment__content p:last-child {
    margin-bottom: 0;
}

.socialfront-comment__pending {
    font-size: 0.85rem;
    color: #b54708;
    background: #fff7ed;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
}

.socialfront-comment__reply {
    margin-top: 0.75rem;
}

.socialfront-comment__reply a {
    font-weight: 600;
    color: var(--wp-admin-theme-color, #007cba);
    text-decoration: none;
}

.socialfront-comment__reply a:hover {
    text-decoration: underline;
}

.socialfront-comments__nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.socialfront-comments__nav-link a {
    color: var(--wp-admin-theme-color, #007cba);
    font-weight: 600;
    text-decoration: none;
}

.socialfront-comments__nav-link a:hover {
    text-decoration: underline;
}

.socialfront-comments__empty,
.socialfront-comments__closed {
    color: #6b7380;
    font-size: 0.95rem;
    margin: 0;
}

.socialfront-comment-form {
    padding: 1.5rem;
    border: 1px solid #dce3ee;
    border-radius: 12px;
    background: #f8fbff;
}

.socialfront-comment-form .comment-form {
    display: grid;
    gap: 1rem;
}

body.single-sf_submission .socialfront-comment-form input,
body.single-sf_submission .socialfront-comment-form textarea,
body.single-sf_submission .socialfront-comment-form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.socialfront-comment-form__title {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.socialfront-comment-form__submit {
    font-weight: 600;
    padding: 0.6rem 1.2rem;
}

.socialfront-submission__discussion h2,
.socialfront-submission__discussion h3 {
    font-size: 1.35rem;
    margin-bottom: 1.5rem;
}

.socialfront-comments__sort {
    display: inline-flex;
    gap: 0.75rem;
    margin: 2rem 0 1rem;
    padding: 0.5rem 0.75rem;
    background: #f5f7fa;
    border-radius: 999px;
    border: 1px solid #dce3ee;
}

.socialfront-comments__sort-link {
    font-weight: 600;
    font-size: 0.9rem;
    color: #6b7380;
    text-decoration: none;
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease;
}

.socialfront-comments__sort-link:hover {
    color: var(--wp-admin-theme-color, #007cba);
}

.socialfront-comments__sort-link.is-active {
    background: var(--wp-admin-theme-color, #007cba);
    color: #fff;
}

.socialfront-frontpage__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.socialfront-frontpage__karma {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    background: #f5f7fa;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #dce3ee;
    color: #1f2933;
    font-size: 0.95rem;
}

.socialfront-frontpage__karma .label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
    color: #6b7380;
}

.socialfront-frontpage__karma .value {
    font-size: 1.05rem;
    color: var(--wp-admin-theme-color, #007cba);
}

.socialfront-frontpage__karma .detail {
    font-weight: 500;
    color: #4c5564;
}

.socialfront-frontpage__karma .break {
    color: #c3cad5;
}

.socialfront-frontpage__tabs button,
.socialfront-profile__nav button,
.socialfront-submit__tabs button {
    border: 0;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.socialfront-frontpage__tabs button.is-active,
.socialfront-profile__nav button.is-active,
.socialfront-submit__tabs button.is-active {
    border-bottom: 2px solid currentColor;
}

.socialfront-frontpage__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.socialfront-submit {
    max-width: 720px;
}

.socialfront-submit fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

.socialfront-submit__toggles {
    margin: 1rem 0;
}

.socialfront-submit__toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.95rem;
}

.socialfront-submit__recaptcha {
    margin: 1rem 0;
}

.socialfront-register {
    max-width: 520px;
    margin: 0 auto;
    padding: 2.4rem;
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    box-shadow: var(--sf-shadow);
}

.socialfront-register h2 {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}

.socialfront-register__subtitle {
    margin-bottom: 1.75rem;
    color: var(--sf-text-muted);
    font-size: 0.95rem;
}

.socialfront-register__subtitle a {
    color: var(--sf-link);
    font-weight: 600;
    text-decoration: none;
}

.socialfront-register__form fieldset {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.socialfront-register__form label {
    font-weight: 600;
    color: var(--sf-text);
}

.socialfront-register__form input {
    border: 1px solid var(--sf-border);
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    background: var(--sf-surface-soft);
    color: var(--sf-text);
    transition: border-color var(--sf-transition), box-shadow var(--sf-transition), background-color var(--sf-transition);
}

.socialfront-register__form input:focus {
    outline: none;
    border-color: var(--sf-link);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    background: var(--sf-surface);
}

.socialfront-register__form .description {
    font-size: 0.85rem;
    color: var(--sf-text-muted);
}

.socialfront-register__terms {
    margin-bottom: 1.75rem;
}

.socialfront-register__checkbox {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--sf-text-muted);
}

.socialfront-register__checkbox input {
    margin-top: 0.3rem;
}

.socialfront-register__recaptcha {
    margin: 1.5rem 0;
}

.socialfront-register__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.socialfront-register__status {
    font-size: 0.95rem;
    min-height: 1.25rem;
    color: var(--sf-text-muted);
}

.socialfront-register__status.is-error {
    color: #f87171;
}

.socialfront-register__status.is-success {
    color: #10b981;
}

.comment-respond .logged-in-as {
    font-size: 0.85rem;
    color: #6b7380;
    margin-bottom: 0.75rem;
}

.comment-respond label {
    font-weight: 600;
}

.socialfront-submit label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.socialfront-submit input,
.socialfront-submit textarea,
.socialfront-submit select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--sf-border);
    border-radius: 10px;
    box-sizing: border-box;
}

.socialfront-frontpage__filters select,
.socialfront-frontpage__filters input[type="search"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--sf-border);
    border-radius: 6px;
    background: var(--sf-surface-soft);
    color: var(--sf-text);
    transition: border-color var(--sf-transition), box-shadow var(--sf-transition), background-color var(--sf-transition);
}

.socialfront-frontpage__filters select:focus,
.socialfront-frontpage__filters input[type="search"]:focus {
    border-color: var(--sf-link);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    outline: none;
}

.socialfront-submit__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.socialfront-profile {
    display: grid;
    gap: 2rem;
}

.socialfront-profile__pane {
    margin-top: 1.5rem;
    min-height: 3rem;
}

.socialfront-profile__notifications {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--sf-border);
    border-radius: calc(var(--sf-radius) - 8px);
    background: var(--sf-surface-soft);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.socialfront-profile__notifications[hidden] {
    display: none;
}

.socialfront-profile__notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.socialfront-profile__notifications-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.socialfront-profile__notifications-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.socialfront-profile__notification {
    background: var(--sf-surface);
    border: 1px solid var(--sf-border);
    border-radius: calc(var(--sf-radius) - 10px);
    padding: 1rem 1.1rem;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.socialfront-profile__notification.is-read {
    opacity: 0.75;
    box-shadow: none;
}

.socialfront-profile__notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.socialfront-profile__notification-person {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.socialfront-profile__notification-person img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
}

.socialfront-profile__notification-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.socialfront-profile__notification-author {
    font-weight: 600;
    color: var(--sf-text);
}

.socialfront-profile__notification-meta {
    font-size: 0.85rem;
    color: var(--sf-text-muted);
}

.socialfront-profile__notification-meta a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.socialfront-profile__notification-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sf-link);
    text-decoration: none;
    white-space: nowrap;
}

.socialfront-profile__notification-link:hover,
.socialfront-profile__notification-link:focus {
    text-decoration: underline;
}

.socialfront-profile__notification-body {
    font-size: 0.95rem;
    color: var(--sf-text);
}

.socialfront-profile__notification-context {
    margin: 0.75rem 0 0;
    padding: 0.65rem 0.8rem;
    border-left: 3px solid var(--sf-border);
    background: var(--sf-surface-soft);
    font-size: 0.85rem;
    color: var(--sf-text-muted);
}

.socialfront-profile__submissions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.socialfront-profile__submissions .socialfront-frontpage__item {
    border: 1px solid #e2e4e7;
    border-radius: 10px;
    padding: 1.5rem;
    background: #fff;
}

.socialfront-profile__empty {
    color: #6b7380;
    font-size: 0.95rem;
}

.socialfront-profile__header {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.socialfront-profile__avatar img {
    border-radius: 999px;
}

.socialfront-profile__settings-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

.socialfront-profile__settings-heading {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2933;
}

.socialfront-profile__settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 999px;
    border: 1px solid #dce3ee;
    background: #f5f7fa;
    color: #4c5564;
    text-decoration: none;
    font-size: 1.1rem;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.socialfront-profile__settings:hover,
.socialfront-profile__settings:focus {
    background: var(--wp-admin-theme-color, #007cba);
    color: #fff;
    box-shadow: 0 8px 16px -12px rgba(0, 124, 186, 0.6);
}

.socialfront-profile__comments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.socialfront-profile-comment {
    border: 1px solid #dce3ee;
    border-radius: 12px;
    background: #fff;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 24px -20px rgba(15, 32, 53, 0.25);
}

.socialfront-profile-comment__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.socialfront-profile-comment__person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.socialfront-profile-comment__person img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.socialfront-profile-comment__name {
    font-weight: 600;
    color: #1f2933;
}

.socialfront-profile-comment__meta {
    font-size: 0.85rem;
    color: #6b7380;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.socialfront-profile-comment__submission {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
}

.socialfront-profile-comment__submission:hover {
    color: var(--wp-admin-theme-color, #007cba);
}

.socialfront-profile-comment__permalink {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wp-admin-theme-color, #007cba);
    text-decoration: none;
}

.socialfront-profile-comment__permalink:hover {
    text-decoration: underline;
}

.socialfront-profile-comment__body {
    font-size: 0.95rem;
    color: #2f3744;
}

.socialfront-profile-comment__body p {
    margin: 0 0 0.9rem;
}

.socialfront-profile-comment__body p:last-child {
    margin-bottom: 0;
}

.socialfront-profile-comment__footer {
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #6b7380;
}

.socialfront-profile-comment__score {
    font-weight: 600;
    color: #1f2933;
}

.socialfront-profile__comments-empty {
    color: #6b7380;
    font-size: 0.95rem;
}

.socialfront-profile__comments-more {
    align-self: flex-start;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid #c8d2e1;
    background: #f5f7fa;
    font-weight: 600;
    color: #1f2933;
    cursor: pointer;
}

.socialfront-profile__comments-more:hover {
    background: #e8edf5;
}

[data-pane="comments"].is-loading {
    position: relative;
    min-height: 3rem;
}

[data-pane="comments"].is-loading::after {
    content: '';
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(107, 115, 128, 0.3);
    border-top-color: var(--wp-admin-theme-color, #007cba);
    animation: socialfront-spin 0.8s linear infinite;
}

.socialfront-comment__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}


.socialfront-vote {
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 0.35rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sf-text-muted);
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.socialfront-vote:hover {
    color: var(--sf-text);
    background-color: var(--sf-surface-soft);
}

.socialfront-vote:focus {
    outline: 2px solid var(--wp-admin-theme-color, #007cba);
    outline-offset: 2px;
}

.socialfront-vote__icon {
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.15rem;
}

.socialfront-comment__delete {
    margin-left: auto;
    border: 1px solid var(--sf-border);
    background: transparent;
    border-radius: calc(var(--sf-radius) - 12px);
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sf-text-muted);
    cursor: pointer;
    transition: color var(--sf-transition), border-color var(--sf-transition), background-color var(--sf-transition);
}

.socialfront-comment__delete:hover,
.socialfront-comment__delete:focus {
    color: var(--sf-link);
    border-color: var(--sf-link);
    background: var(--sf-surface-soft);
    outline: none;
}

.socialfront-comment__delete[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.socialfront-frontpage__item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--sf-border);
    border-radius: calc(var(--sf-radius) - 6px);
    background: var(--sf-surface);
    align-items: flex-start;
    box-shadow: var(--sf-shadow);
}

.socialfront-frontpage__votes {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 3rem;
    flex-shrink: 0;
}

.socialfront-frontpage__score {
    font-weight: 600;
}

.socialfront-frontpage__thumb {
    width: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.socialfront-frontpage__thumb-image {
    max-width: 100%;
    border-radius: 4px;
    cursor: pointer;
}

.socialfront-frontpage__thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--sf-border);
    border-radius: 4px;
    background: var(--sf-surface-soft);
    color: var(--sf-text-muted);
}

.socialfront-frontpage__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.socialfront-frontpage__title {
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
}

.socialfront-frontpage__title:hover {
    text-decoration: underline;
}

.socialfront-frontpage__meta {
    font-size: 0.85rem;
    color: var(--sf-text-muted);
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.socialfront-frontpage__community {
    font-weight: 600;
    color: var(--sf-link);
    text-decoration: none;
}

.socialfront-frontpage__community:hover,
.socialfront-frontpage__community:focus {
    text-decoration: underline;
}

.socialfront-frontpage__embed {
    margin-top: 1rem;
    width: 100%;
}

.socialfront-frontpage__embed blockquote,
.socialfront-frontpage__embed iframe,
.socialfront-frontpage__embed .twitter-tweet,
.socialfront-frontpage__embed div,
.socialfront-frontpage__embed .wp-video,
.socialfront-frontpage__embed .wp-video iframe {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
}

.socialfront-frontpage__embed blockquote.twitter-tweet {
    margin: 0;
}

.socialfront-frontpage__preview {
    border: 1px solid var(--sf-border);
    background: transparent;
    color: var(--sf-link);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--sf-transition), color var(--sf-transition), border-color var(--sf-transition), box-shadow var(--sf-transition);
}

.socialfront-frontpage__preview:hover,
.socialfront-frontpage__preview:focus {
    color: var(--sf-text);
    background: var(--sf-surface-soft);
    border-color: var(--sf-border-strong);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

.socialfront-frontpage__preview:focus {
    outline: none;
}

.socialfront-frontpage__meta-break {
    color: var(--sf-border-strong);
}

.socialfront-frontpage__actions {
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.socialfront-frontpage__delete {
    border: 1px solid var(--sf-border);
    background: transparent;
    color: var(--sf-text-muted);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--sf-transition), color var(--sf-transition), border-color var(--sf-transition), box-shadow var(--sf-transition);
}

.socialfront-frontpage__delete:hover,
.socialfront-frontpage__delete:focus {
    color: var(--sf-text);
    background: var(--sf-surface-soft);
    border-color: var(--sf-border-strong);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

body[data-socialfront-theme="dark"] .socialfront-frontpage__delete:hover,
body[data-socialfront-theme="dark"] .socialfront-frontpage__delete:focus {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.socialfront-single__delete {
    border: 1px solid var(--sf-border);
    background: transparent;
    color: var(--sf-text-muted);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--sf-transition), color var(--sf-transition), border-color var(--sf-transition), box-shadow var(--sf-transition);
}

.socialfront-single__delete:hover,
.socialfront-single__delete:focus {
    color: var(--sf-text);
    background: var(--sf-surface-soft);
    border-color: var(--sf-border-strong);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
    outline: none;
}

.socialfront-single__delete[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.socialfront-frontpage__comments-link {
    color: var(--wp-admin-theme-color, #007cba);
    text-decoration: none;
    font-weight: 600;
}

.socialfront-frontpage__comments-link:hover {
    text-decoration: underline;
}

.socialfront-frontpage__image-expanded {
    margin-top: 0.5rem;
    max-width: 100%;
    border-radius: 6px;
    display: block;
}

.socialfront-frontpage__image-expanded[hidden] {
    display: none !important;
}

.socialfront-frontpage__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.socialfront-vote.is-active {
    color: var(--wp-admin-theme-color, #007cba);
    background-color: rgba(0, 124, 186, 0.12);
}

.socialfront-submit__status {
    min-height: 1.25rem;
    font-size: 0.9rem;
}

.socialfront-submit__status.is-error {
    color: #b32d2e;
}

.socialfront-submit__status.is-success {
    color: #007a3d;
}

.socialfront-comment__reaction-list {
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0;
}

.socialfront-comment__reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
}

.socialfront-comment__reaction-menu {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 6px;
}

.socialfront-comment__reaction-option {
    border: 1px solid #ccd0d4;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

.socialfront-comment__reaction-option.is-active {
    border-color: var(--wp-admin-theme-color, #007cba);
}

@keyframes socialfront-spin {
    from {
        transform: rotate( 0deg );
    }

    to {
        transform: rotate( 360deg );
    }
}

@media (max-width: 640px) {
    .socialfront-frontpage__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .socialfront-frontpage__filters {
        display: grid;
        gap: 0.5rem;
    }

    .socialfront-frontpage__item {
        flex-direction: column;
    }

    .socialfront-frontpage__votes {
        flex-direction: row;
        width: auto;
        justify-content: flex-start;
    }

    .socialfront-frontpage__thumb {
        width: 100%;
        justify-content: flex-start;
    }
}

/* -------------------------------------------------------------------------- */
/* Single submission minimal layout overrides                                 */
/* -------------------------------------------------------------------------- */

body.single-sf_submission .socialfront-shell {
    width: 100%;
    max-width: 100%;
    padding: clamp(0.5rem, 2.8vw, 1rem);
    margin: 0 auto;
    box-sizing: border-box;
}

body.single-sf_submission .wp-site-blocks > main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.single-sf_submission .wp-site-blocks > main.has-global-padding,
body.single-sf_submission .wp-site-blocks > main > .has-global-padding:first-child {
    padding-top: 0 !important;
}

body.single-sf_submission .socialfront-single {
    display: block;
    gap: 0;
}

@media (min-width: 1024px) {
    body.single-sf_submission .socialfront-single {
        display: flex;
        flex-direction: row;
        gap: clamp(1.5rem, 4vw, 2rem);
    }

    body.single-sf_submission .socialfront-single__main {
        flex: 1;
        min-width: 0;
    }

    body.single-sf_submission .socialfront-single__sidebar {
        flex: 0 0 320px;
        min-width: 0;
    }
}

body.single-sf_submission .socialfront-single__main,
body.single-sf_submission .socialfront-single__sidebar {
    width: 100%;
}

body.single-sf_submission .socialfront-submission,
body.single-sf_submission .socialfront-submission__article,
body.single-sf_submission .socialfront-single__sidebar,
body.single-sf_submission .socialfront-single__card {
    max-width: 100%;
    overflow: visible;
}

body.single-sf_submission .wp-block-post-title,
body.single-sf_submission .wp-block-post-title + .wp-block-group.has-accent-4-color {
    display: none;
}

body.single-sf_submission .socialfront-submission__embed,
body.single-sf_submission .socialfront-submission__content,
body.single-sf_submission .socialfront-submission__details {
    max-width: 100%;
    overflow: visible;
}

body.single-sf_submission .socialfront-submission__embed iframe,
body.single-sf_submission .socialfront-submission__embed blockquote,
body.single-sf_submission .socialfront-submission__embed div,
body.single-sf_submission .socialfront-submission__content iframe,
body.single-sf_submission .socialfront-submission__content blockquote {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

body.single-sf_submission .twitter-tweet,
body.single-sf_submission .twitter-tweet-rendered {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}