/*
 * ACTIVITY_LIFE_MOBILE_HERO_LOGO_OVERLAP_V1
 *
 * At <=767px the topbar is hidden and the header collapses to ~52px tall,
 * but the parent theme still forces the compact absolutely-centered logo
 * image to 94px wide, so it overflows the header and overlaps the hero
 * heading below it. Shrink the image only, at this breakpoint only;
 * positioning/centering is left untouched.
 */
@media screen and (max-width: 767px) {
    .st-mod-style .header__left .logo img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }
}

/*
 * ACTIVITY_LIFE_COMPACT_LOGO_CENTER_783_991_V1
 *
 * Parent theme centers the compact logo (position:absolute + translate
 * -50%/-50%) only up to max-width:782px (elementorv2 layout main.css).
 * From 783px through 991px a separate parent rule (cores layout main.css,
 * max-width:991px) still applies and reverts the logo to position:static
 * with margin-left:60px, leaving it flush against the hamburger instead of
 * centered. Extend the same proven centering rule through 991px; the image
 * size (94px) and the >=992px desktop logo are untouched.
 */
@media screen and (min-width: 783px) and (max-width: 991px) {
    .st-mod-style .header__left .logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: 0;
    }
}