/* =========================================================
   CERFBOX - LEGAL HEADER
   ========================================================= */

.legal-header-nav {
    position: relative;

    z-index: 20;

    width: 100%;
    height: 8vw;

    background: var(--color-white);
}


/* =========================================================
   LOGO
   ========================================================= */

.legal-header-logo {
    position: absolute;

    z-index: 5;

    top: 1.488095vw;
    left: 2.976190vw;

    width: 6.440476vw;
}

.legal-header-logo img {
    width: 100%;
    height: auto;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.legal-header-menu {
    position: absolute;

    top: 1.8vw;
    left: 13.071vw;

    display: flex;
    align-items: center;
}

.legal-header-menu > a:not(.legal-header-reservation) {
    position: relative;

    display: flex;
    align-items: center;

    height: 4.067460vw;

    color: var(--color-nav-text);

    font-size: 1.091270vw;
    font-weight: var(--weight-medium);

    line-height: 1;

    white-space: nowrap;
}


/* =========================================================
   SPACING
   ========================================================= */

.legal-header-menu > a:nth-child(1) {
    margin-right: 5.158730vw;
}

.legal-header-menu > a:nth-child(2) {
    margin-right: 5.158730vw;
}

.legal-header-menu > a:nth-child(3) {
    margin-right: 5.059524vw;
}


/* =========================================================
   LINK HOVER
   ========================================================= */

.legal-header-menu > a:not(.legal-header-reservation)::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0.6vw;

    width: 0;
    height: 1px;

    background: var(--color-black);

    transition: width var(--transition-fast);
}

.legal-header-menu > a:not(.legal-header-reservation):hover::after {
    width: 100%;
}


/* =========================================================
   RESERVATION BUTTON
   ========================================================= */

.legal-header-reservation {
    width: 14.087302vw;
    height: 3.968254vw;

    padding:
            0
            0.992063vw
            0
            1.190476vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: var(--color-black);
    color: var(--color-white);

    font-size: 1.091270vw;
    font-weight: var(--weight-medium);

    line-height: 1;

    white-space: nowrap;

    transition: background var(--transition-fast);
}

.legal-header-reservation:hover {
    background: var(--color-black-dark);
}


/* =========================================================
   RESERVATION ICON
   ========================================================= */

.legal-header-reservation-icon {
    width: 1.984127vw;
    height: 2.380952vw;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.legal-header-reservation-icon svg {
    width: 1.686508vw;
    height: auto;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .legal-header-nav {
        height: 100px;
    }

    .legal-header-logo {
        top: 15px;
        left: 4%;

        width: 65px;
    }

    .legal-header-menu {
        top: 25px;
        left: auto;
        right: 4%;

        gap: 30px;
    }

    .legal-header-menu > a:not(.legal-header-reservation) {
        height: 45px;

        margin-right: 0;

        font-size: 14px;
    }

    .legal-header-reservation {
        width: auto;
        height: 45px;

        gap: 12px;

        padding: 0 14px;

        font-size: 14px;
    }

    .legal-header-reservation-icon {
        width: 22px;
        height: 26px;
    }

    .legal-header-reservation-icon svg {
        width: 18px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .legal-header-nav {
        height: 85px;
    }

    .legal-header-logo {
        top: 12px;
        left: 5%;

        width: 58px;
    }

    .legal-header-menu {
        top: 20px;
        right: 5%;
    }

    .legal-header-menu > a:not(.legal-header-reservation) {
        display: none;
    }

    .legal-header-reservation {
        height: 42px;

        padding: 0 12px;

        font-size: 12px;
    }

    .legal-header-reservation-icon {
        width: 20px;
        height: 24px;
    }

    .legal-header-reservation-icon svg {
        width: 17px;
    }

}