.darthost-top-bar {
    width: 100%;
    box-sizing: border-box;
    line-height: 1.35;
    overflow: hidden;
}

.darthost-top-bar * {
    box-sizing: border-box;
}

.darthost-top-bar__inner {
    margin: 0 auto;
    width: 100%;
}

/* Main layout: keeps text + images on one row on desktop/tablet */
.darthost-top-bar__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* WordPress/TinyMCE wraps text/images in separate p/div/figure. Remove visual wrapper effect. */
.darthost-top-bar__content p,
.darthost-top-bar__content div,
.darthost-top-bar__content figure {
    display: contents;
    margin: 0 !important;
    padding: 0 !important;
}

.darthost-top-bar__content img {
    display: inline-block !important;
    vertical-align: middle;
    height: auto;
    max-height: 28px;
    width: auto;
    max-width: 120px;
    flex: 0 0 auto;
    margin: 0 !important;
}

.darthost-top-bar__content a,
.darthost-top-bar__content span,
.darthost-top-bar__content strong,
.darthost-top-bar__content em,
.darthost-top-bar__content b {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.admin-bar .darthost-top-bar--sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .darthost-top-bar--sticky {
        top: 46px;
    }

    .darthost-top-bar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .darthost-top-bar__content {
        gap: 8px;
    }
}

/* Mobile: allow controlled wrapping so it never breaks the screen */
@media screen and (max-width: 600px) {
    .darthost-top-bar {
        padding-left: 10px !important;
        padding-right: 10px !important;
        line-height: 1.25;
    }

    .darthost-top-bar__content {
        flex-wrap: wrap;
        gap: 5px 7px;
        font-size: clamp(11px, 3.2vw, 13px) !important;
        text-align: center;
    }

    .darthost-top-bar__content img {
        max-height: 20px;
        max-width: min(95px, 38vw);
    }
}

/* Very small phones: tighten spacing and keep image readable */
@media screen and (max-width: 380px) {
    .darthost-top-bar {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .darthost-top-bar__content {
        gap: 4px 6px;
        font-size: clamp(10px, 3.4vw, 12px) !important;
    }

    .darthost-top-bar__content img {
        max-height: 18px;
        max-width: 82px;
    }
}