/*
 * Header navigation clean-up, layered over the Divi Theme Builder header (template 339).
 * Divi's own rules set the menu at 25px/800 with an empty font-family, so the six items wrapped onto
 * two lines at every width, and the menu was pushed down with a fixed 34px margin rather than centred.
 */

/* Desktop: logo, menu and button share one vertically centred row. */
@media only screen and (min-width: 981px) {
    .et_pb_row_0_tb_header.et_pb_row {
        display: flex;
        align-items: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .et_pb_row_0_tb_header > .et_pb_column {
        margin-bottom: 0;
    }

    /* Logo and button keep their natural size; the menu takes whatever space is left. */
    .et_pb_row_0_tb_header > .et_pb_column_0_tb_header {
        flex: 0 0 clamp(170px, 17%, 300px);
    }

    .et_pb_row_0_tb_header > .et_pb_column_1_tb_header {
        flex: 1 1 auto;
        min-width: 0;
    }

    .et_pb_row_0_tb_header > .et_pb_column_2_tb_header {
        flex: 0 0 auto;
        width: auto;
        margin-right: 0;
    }

    .et_pb_image_0_tb_header {
        width: 100%;
    }

    .et_pb_menu_0_tb_header {
        margin-top: 0 !important;
    }

    .et_pb_menu_0_tb_header .et_pb_menu__menu > nav > ul {
        flex-wrap: nowrap;
        justify-content: center;
    }

    .et_pb_menu_0_tb_header .et_pb_menu__menu > nav > ul > li {
        padding: 0 clamp(8px, 1vw, 18px);
    }

    .et_pb_menu_0_tb_header.et_pb_menu ul li a {
        font-family: 'Rubik', Helvetica, Arial, Lucida, sans-serif;
        font-weight: 700;
        font-size: clamp(14px, 1.15vw, 19px);
        letter-spacing: 0.04em;
        line-height: 1.2;
        white-space: nowrap;
        padding: 10px 0;
        transition: color 200ms ease;
    }

    .et_pb_menu_0_tb_header.et_pb_menu ul li a:hover {
        opacity: 1;
        color: #E76F25 !important;
    }

    .et_pb_button_0_tb_header_wrapper {
        margin-top: 0 !important;
        text-align: right;
    }

    body #page-container .et_pb_section .et_pb_button_0_tb_header {
        display: inline-block;
        white-space: nowrap;
        border-width: 0 !important;
        padding: 14px clamp(16px, 1.6vw, 28px);
        font-size: clamp(12px, 0.85vw, 14px);
        letter-spacing: 0.18em;
        line-height: 1.2 !important;
    }

    /* Divi slides an icon in on hover by padding the button; keep the size stable instead. */
    body #page-container .et_pb_section .et_pb_button_0_tb_header:hover {
        padding: 14px clamp(16px, 1.6vw, 28px);
        background-color: #21325E;
    }

    body #page-container .et_pb_section .et_pb_button_0_tb_header:after {
        display: none;
    }
}

/* Tablet and phone: Divi shows the hamburger menu; drop the desktop offset so the stack stays tight. */
@media only screen and (max-width: 980px) {
    .et_pb_menu_0_tb_header {
        margin-top: 0 !important;
    }

    .et_pb_row_0_tb_header > .et_pb_column {
        margin-bottom: 12px;
    }

    .et_pb_row_0_tb_header > .et_pb_column:last-child {
        margin-bottom: 0;
    }

    /* Divi lets the 8000px-wide logo render at its natural width here, so it ran off the screen. */
    .et_pb_image_0_tb_header {
        width: 70%;
        max-width: 320px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .et_pb_image_0_tb_header .et_pb_image_wrap img {
        width: 100% !important;
        height: auto;
    }

    /* Overrides Divi's et_pb_button_alignment_tablet_left so the button lines up under the centred logo. */
    .et_pb_button_0_tb_header_wrapper {
        margin-top: 0 !important;
        text-align: center !important;
    }

    body #page-container .et_pb_section .et_pb_button_0_tb_header {
        display: inline-block;
        white-space: nowrap;
        border-width: 0 !important;
        padding: 12px 22px !important;
        font-size: 13px;
        letter-spacing: 0.15em;
        line-height: 1.2 !important;
    }

    body #page-container .et_pb_section .et_pb_button_0_tb_header:after {
        display: none;
    }
}