/* top-bar
   ========================================================================== */

/* 10px and 1420px match the header container's padding and boxed width in Elementor, so the
   phone number lines up with the Contact Us button. Update both if the header changes. */
.top-bar {
    padding: 0 10px;
    background: var(--e-global-color-secondary);
    color: #fff;
}

.top-bar__inner {
    display: flex;
    justify-content: flex-end;
    max-width: 1420px;
    margin: 0 auto;
    padding: 0.5rem 0;
}

/* Matches the header nav links. The .top-bar prefix outranks the Elementor kit's 17px link size. */
.top-bar .top-bar__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 800;
    color: inherit;
    text-decoration: none;
}

.top-bar .top-bar__phone:hover,
.top-bar .top-bar__phone:focus-visible {
    color: var(--e-global-color-primary);
}

.top-bar__icon {
    width: 1em;
    height: 1em;
    fill: var(--e-global-color-primary);
}

/* The Elementor header is absolutely positioned at top: 0. Without this it would cover the top bar. */
.elementor-location-header {
    position: relative;
}

@media (max-width: 767px) {
    .top-bar__inner {
        justify-content: center;
    }
}