.navigation {
    padding: 20px var(--grid-col-inline-margin);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.navigation-logo { max-width: 193px; }
.navigation-logo svg { width: 100%; }

.navigation-items {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.mobile-hamburger {
    position: relative;
    z-index: 101; /* sits above the drawer so it can act as the close button */
    height: 40px;
    width: 40px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.mobile-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--granite-900);
    transition: transform 0.3s ease, opacity 0.2s ease, background-color 0.3s ease;
}

/* Hamburger → X (bar height 2px + gap 6px = 8px offset) */
.navigation.is-open .mobile-hamburger span { background-color: white; }
.navigation.is-open .mobile-hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navigation.is-open .mobile-hamburger span:nth-child(2) { opacity: 0; }
.navigation.is-open .mobile-hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.navigation-mobile-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background-color: var(--azure-900);
    padding: 16px var(--grid-col-inline-margin);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.4s ease, visibility 0s linear 0.4s;
}

.navigation.is-open .navigation-mobile-drawer {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.4s ease, visibility 0s linear 0s;
}

/* Counter the drawer's slide so the logo row stays put and the drawer edge
   wipes across it, making the logo appear to change colour in place.
   Negative margin + padding makes the row as wide as the drawer so -100% cancels exactly. */
.navigation-mobile-drawer-top-row {
    margin-inline: calc(-1 * var(--grid-col-inline-margin));
    padding-inline: var(--grid-col-inline-margin);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

.navigation.is-open .navigation-mobile-drawer-top-row { transform: translateX(0); }

body.navigation-open { overflow: hidden; }

@media (max-width: 1250px) {
    .navigation { padding: 16px var(--grid-col-inline-margin); }   
    .navigation-logo { max-width: 159px; }
}
@media (max-width: 767px) {
    .navigation-items { display: none; }
    .navigation-logo { max-width: 171px; }

    .navigation { position: relative; }
    .mobile-hamburger { display: flex; }
    .navigation-mobile-drawer { display: block; }
    .navigation-mobile-drawer-top-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        min-height: 40px; /* matches the hamburger so the logo lines up */
        margin-bottom: 60px;
    }
    /* Sized identically to .navigation-logo so the two overlap exactly */
    .navigation-mobile-logo { max-width: 171px; }
    .navigation-mobile-logo svg { width: 100%; }
    .navigation-mobile-drawer-contents {
        display: flex;
        flex-direction: column;
        gap: 40px;
        color: var(--azure-100);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-hamburger span,
    .navigation-mobile-drawer,
    .navigation.is-open .navigation-mobile-drawer,
    .navigation-mobile-drawer-top-row { transition: none; }
}