.header {
    position: fixed;
    padding: 8px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    background-color: white;
}

/* Row 1: logo + toggle. Row 2: representation-type select, given its own
   row so it has room next to the logo instead of squeezing into row 1. */
.header-title {
    grid-column: 1;
}

.header.is-nav-open {
    height: 100dvh;
    background-color: white;
    grid-template-rows: auto 1fr;
}

.header-actions {
    text-transform: uppercase;
}

.header-logo {
    display: block;
    width: fit-content;
}

.header-logo svg {
    display: block;
    width: auto;
    height: 26px;
    margin-top: 4px;
}

/* Header: Mobile Toggle + Nav */
.header-menu,
.header-actions {
    display: none;
}

.header-representation-type {
    grid-column: 3/5;
}

.header.is-nav-open .header-representation-type {
    display: none;
}

.header-toggle {
    grid-column: -2/-1;
    grid-row: 1;
    justify-self: end;
    width: 28px;
    height: 28px;
    background-color: white;
}

.header-toggle-icon,
.header-toggle-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.header-toggle-icon-close {
    display: none;
    padding: 7px;
    rotate: 45deg;
}

.header.is-nav-open .header-toggle-icon-open {
    display: none;
}

.header.is-nav-open .header-toggle-icon-close {
    display: block;
}

.header-mobile-nav {
    display: none;
    grid-column: 1/-1;
    grid-row: 2;
}

.header.is-nav-open .header-mobile-nav {
    display: grid;
    grid-template-rows: 1fr auto;
    overflow-y: auto;
}

.header-mobile-nav-list {
    display: grid;
    gap: 1.5rem 0;
    padding: 3rem 0;
}

.header-mobile-nav-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
}

.header-mobile-nav-languages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media screen and (min-width: 1024px) {
    .header {
        grid-template-columns: repeat(24, 1fr);
    }

    .header-menu {
        grid-column: 7/19;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 8px;
    }

    .header-actions {
        grid-column: -4/-1;
        display: flex;
        justify-content: flex-end;
        gap: 4px;
    }

    .header-representation-type {
        grid-column: 3/5;
        grid-row: 1;
        width: 100%;
        display: flex;
    }

    .header-toggle {
        display: none;
    }
}

/*
    Homepage splash sequence (see assets/js/main.js initHomeSplash, and
    assets/css/page.css for the matching .home-page rules). Each stage rule
    below only lists what differs from normal - a stage that doesn't mention
    an element leaves its existing responsive behavior in charge.
*/
/* Menu, language switcher and mobile toggle stay hidden until the reveal stage. */
body[data-splash-stage]:not([data-splash-stage="reveal"]) .header-menu,
body[data-splash-stage]:not([data-splash-stage="reveal"]) .header-actions,
body[data-splash-stage]:not([data-splash-stage="reveal"]) .header-toggle {
    display: none;
}

/* The representation-type select only appears from the "select" stage on. */
body[data-splash-stage="logo"] .header-representation-type {
    display: none;
}