/**
 * EM Child — top bar (topbar.php), EM-HOME-5 mock: graphite strip, address
 * on the left, phones + email + socials on the right; always one line
 * (address, then socials, then email drop out as the bar narrows). Colours are the mock's own; the restyle layer maps them onto
 * its tokens (header.css).
 */

/* Replaced by .em-topbar. The header builder's top row only holds the
   social icons; it can also be removed in Customizer -> Header Builder,
   then this rule is not needed. */
.penci-desktop-topbar {
    display: none;
}

.em-topbar {
    background-color: #232227;
    color: #b4b3ba;
    font-size: 14px;
    line-height: 1.4;
}

.em-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.em-topbar a {
    color: #fff;
    text-decoration: none;
}

.em-topbar a:hover {
    color: #ff8000;
}

.em-topbar__contacts {
    display: flex;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}

.em-topbar__socials {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 20px;
    border-left: 1px solid #3c3b42;
}

.em-topbar__socials a {
    color: #b4b3ba;
    font-size: 15px;
    line-height: 1;
}

/* One line at every width: Soledad's .container narrows to 686px below
   1024px and to 440px below 768px, so items drop out step by step. */
@media (max-width: 1023px) {
    .em-topbar__inner {
        justify-content: center;
    }

    .em-topbar__addr {
        display: none;
    }
}

@media (max-width: 767px) {
    .em-topbar__socials {
        display: none;
    }
}

@media (max-width: 700px) {
    .em-topbar__email {
        display: none;
    }
}