/* Header layout fixes - the theme sizes the logo and right area in percentages, which squeezes the menu */

header.header-seven .header-mid-one-wrapper {
    gap: 30px;
}

/* Logo + menu take the free space; logo only as wide as the logo */
.header-mid-one-wrapper .left {
    flex: 1 1 auto;
    min-width: 0;
    gap: 40px;
}

header.header-seven .header-mid-one-wrapper .logo-area {
    flex: 0 0 auto;
}

/* Contact button area only as wide as its content */
.header-mid-one-wrapper .header-right {
    flex: 0 0 auto;
}

/* Keep each top-level menu label on one line */
.nav-area .mainmenu > li > a {
    white-space: nowrap;
}

/* Tighter spacing on smaller desktops so everything fits */
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    header.header-seven .header-mid-one-wrapper {
        padding: 0 30px;
    }

    .header-mid-one-wrapper .left {
        gap: 24px;
    }

    .nav-area ul li.main-nav {
        padding-right: 14px;
    }

    /* Room for the dropdown arrow, which sits in the right padding */
    .nav-area ul li.main-nav.project-a-after {
        padding-right: 22px;
    }

    .nav-area ul li a {
        font-size: 15px;
    }
}

/* Page title banner - cover image (set inline from the CMS) tinted with a navy overlay */
.breadcrumb-style-1.page-cover {
    background-color: var(--color-primary);
    background-image: none;
}

.breadcrumb-style-1.page-cover[style*="background-image"] {
    background-size: cover;
    background-position: center;
}

/* Replaces the theme's solid multiply layer, which turns photos almost black with a dark primary colour */
.breadcrumb-style-1.page-cover::after {
    background: linear-gradient(180deg, rgba(0, 51, 102, 0.82) 0%, rgba(0, 51, 102, 0.62) 100%);
    mix-blend-mode: normal;
}

.breadcrumb-style-1.page-cover .inner-content .page-breadcrumb li,
.breadcrumb-style-1.page-cover .inner-content .page-breadcrumb li span {
    color: var(--color-white);
}

.breadcrumb-style-1.page-cover .inner-content .page-breadcrumb li span.dot {
    background: var(--primary-300, #66C2E6);
}

/* Shorter than the theme's 550px; the header is not overlaid, so the title needs no top offset either */
.breadcrumb-style-1.page-cover {
    height: auto;
    min-height: 320px;
    padding: 50px 0;
}

.breadcrumb-style-1.page-cover .inner-content {
    padding-top: 0;
}

@media only screen and (max-width: 576px) {
    .breadcrumb-style-1.page-cover {
        min-height: 240px;
        padding: 40px 0;
    }
}

/* Homepage slider - shorter than the theme's 795px; close to the 3:1 shape of the slider images */
.tmp-banner-slider-area.banner-wind-energy.banner-nine .banner-five-main-wrapper {
    height: 600px;
}

@media only screen and (max-width: 991px) {
    .tmp-banner-slider-area.banner-wind-energy.banner-nine .banner-five-main-wrapper {
        height: 480px;
    }
}

@media only screen and (max-width: 576px) {
    .tmp-banner-slider-area.banner-wind-energy.banner-nine .banner-five-main-wrapper {
        height: 420px;
    }
}

/* Mobile menu: highlight the current page and its section */
.mobile-menu nav ul li.current > a,
.mobile-menu nav ul li.section > a.main {
    color: var(--color-primary);
}

/* Side menu: visible close button, and scroll when the expanded menu is taller than the screen */
.side-bar {
    overflow-y: auto;
    max-width: 100%;
}

.side-bar .close-icon-menu {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    max-width: none;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

/* Undo the theme's offset grey circle on the icon so the button itself is the circle */
.side-bar .close-icon-menu i {
    min-width: 0;
    height: auto;
    margin: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

.side-bar .close-icon-menu i::after {
    display: none;
}

.side-bar .close-icon-menu:hover {
    background: var(--primary-900, #0079A8);
    transform: rotate(90deg);
}

.side-bar .close-icon-menu:focus-visible {
    outline: 2px solid var(--primary-300, #66C2E6);
    outline-offset: 2px;
}