/*
 * Child-theme CSS overrides
 * ---------------------------------------------------------------------------
 */

#navigation-left-side a,
#navigation-right-side a,
#navigation a {
    padding: 0 8px;
}

#navigation ul>li>a,
#navigation-left-side ul>li>a,
#navigation-right-side ul>li>a {
    vertical-align: middle;
}

/*
 * Trigger the responsive (hamburger) menu earlier. Oshine switches to the mobile
 * menu at max-width:1130px; between ~1130 and ~1300px the desktop menu overlaps.
 * The mobile toggle is bound via delegated events (no width gate), so raising the
 * breakpoint in CSS alone fully switches to the working mobile menu. To change the
 * breakpoint, edit the max-width value below.
 */
@media only screen and (min-width: 1131px) and (max-width: 1300px) {

    #navigation,
    #navigation-left-side,
    #navigation-right-side {
        display: none !important;
    }

    #header-controls-right .mobile-nav-controller-wrap,
    #header .mobile-nav-controller-wrap {
        display: inline-block !important;
    }

    /*
     * In the style3 top header, every header element (logo, .header-nav-cta,
     * #header-controls-right) is position:absolute; #navigation was the only
     * in-flow element giving #header-inner-wrap its height. Hiding it collapses
     * the header to 0px and its white background disappears. The parent restores
     * height at <=1130px by floating the logo in-flow; we mirror that rule here.
     */
    .style3 .logo {
        position: static;
        float: left;
        margin-left: 30px;
    }

    /*
     * .header-nav-cta (EN + CTA button) and #header-controls-right (hamburger) are
     * both position:absolute at right:30px, so they overlap once the hamburger shows.
     * Mirror the parent's <=1130px mobile layout: hide the CTA button and shift the
     * language switcher left, clear of the hamburger.
     */
    .header-nav-cta .btn {
        display: none;
    }

    /*
     * !important is required: the theme's inline dynamic CSS (#be-dynamic-css) prints
     * after this stylesheet with an equal-specificity `.header-nav-cta { right: 30px }`,
     * so it would otherwise win on source order.
     */
    .header-nav-cta {
        right: 70px !important;
    }
}