/* --- Brand Variables --- */
:root {
    --dhl-yellow: #ffcc00;
    --dhl-red: #d40511;
    --dhl-dark: #333333;
    --dhl-light-gray: #f2f2f2;
}

header {
    background-color: var(--dhl-yellow);
    width: 100%;
    max-height: 6.3rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-family: "Helvetica Neue", Arial, sans-serif;
}

/* --- Layout Wrapper --- */
.nav-Wrapper {
    max-width: 1200px;
    max-height: 6.3rem;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Logo Styling --- */
.nav-Logo-Wrapper a {
    display: flex;
    height: 2.6rem;
}

.nav-Logo-Wrapper img {
    align-self: center;
    cursor: pointer;
    width: auto;
    max-height: 6.3rem;
}

/* --- Desktop Navigation Menu --- */
.nav-Menu-Top {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
    align-items: center;
}

    .nav-Menu-Top li a {
        text-decoration: none;
        color: var(--dhl-dark);
        font-size: 14px;
        font-weight: bold;
        display: flex;
        align-items: center;
        position: relative;
        padding: 5px 0;
        transition: color 0.2s ease;
    }

        .nav-Menu-Top li a:hover {
            color: var(--dhl-red);
        }

/* --- Mobile Menu Toggle Button --- */
.nav-Mobile-Menu {
    display: none; /* Hidden by default on desktop */
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

.nav-Mobile-Menu-Bar {
    width: 24px;
    height: 3px;
    background-color: var(--dhl-dark);
    border-radius: 2px;
    transition: background-color 0.2s;
}

.nav-Mobile-Menu:hover .nav-Mobile-Menu-Bar {
    background-color: var(--dhl-red);
}


@media (max-width: 720px) {
    header {
        height: auto;
        min-height: 56px;
        max-height: none;
    }

    .nav-Wrapper {
        height: auto;
        min-height: 56px;
        padding: 8px 16px;
        flex-wrap: wrap;
    }

    .nav-Logo-Wrapper img {
        height: 30px;
    }

}