/*
 * Header: logo, primary menu, contact buttons, mobile header layout.
 * Owns all header-related breakpoints.
 */

.header-contact {
    font-size: 12px;
    padding: 8px 12px;
}

#menu-header-main-menu-1 li {
    font-size: 14px;
}

.logo img {
    padding-right: 24px;
    width: 250px !important;
}

/* ============= header contact buttons relocated after logo ============= */

.btn-header-mobile {
    display: none;
}

/* ============= responsive ============= */

@media (max-width: 1814px) {
    .logo img {
        width: 200px !important;
    }
}

@media (max-width: 1500px) {
    .btn-header {
        display: none !important;
    }
}

@media (max-width: 1500px) and (min-width: 1180px) {
    .btn-header-mobile {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: 12px;
        margin-right: auto;
    }

    .btn-header-mobile a {
        margin: 0 !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap;
    }

    .logo-1 {
        flex: 0 0 auto;
    }

    .logo-1 img {
        width: 180px !important;
        padding-right: 12px !important;
    }

    .menu-nav-1 > li {
        margin-left: 16px !important;
    }
}

/* Tighter scale below ~1340px to stop the menu wrapping */
@media (max-width: 1340px) and (min-width: 1180px) {
    #menu-header-main-menu-1 li {
        font-size: 10px !important;
    }

    .logo-1 img {
        width: 150px !important;
        padding-right: 8px !important;
    }

    .btn-header-mobile a {
        padding: 5px 8px !important;
        font-size: 10px !important;
    }

    .menu-nav-1 > li {
        margin-left: 12px !important;
    }

    .menu-nav-1 > li > a {
        font-size: 12px !important;
    }
}

/* ============= tablet & mobile ============= */

@media (max-width: 1179px) {
    .nav-holder,
    .btn-header {
        display: none !important;
    }

    .nav-button-holder {
        display: block !important;
        flex: 0 1 auto;
    }

    .logo {
        flex: 1 1 auto;
        text-align: right;
    }

    .logo-4 {
        text-align: left;
    }

    .btn-header4 {
        display: block;
    }

    .header-holder {
        padding: 16px 0;
    }

    /* Place buttons between burger and logo */
    .btn-header-mobile {
        display: flex;
        align-items: center;
        gap: 8px;
        order: 1;
        margin-left: 12px;
    }

    .btn-header-mobile a {
        margin: 0 !important;
        padding: 6px 10px;
        font-size: 11px;
    }

    .nav-button-holder {
        order: 0;
    }

    .logo-1 {
        order: 2;
    }
}

@media (max-width: 600px) {
    .btn-header-mobile {
        gap: 4px;
        margin-left: 6px;
    }

    .btn-header-mobile a {
        padding: 5px 8px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }

    .logo-1 img {
        max-height: 32px;
        width: auto;
    }

    .header-holder {
        padding: 10px 12px !important;
    }
}

@media (max-width: 420px) {
    .btn-header-mobile a {
        padding: 4px 6px !important;
        font-size: 9px !important;
    }

    .logo-1 img {
        max-height: 28px;
        padding-left: 12px;
    }
}