.header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--margin-d2);
    padding-bottom: var(--margin-d4);
}

.header > .navigation_mobile {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
	width: 100%;
}

.header > .navigation_mobile > .site-logo {
    display: block;
    width: 100%;
    max-width: 70%;
}

.header > .navigation_mobile > .site-logo > svg {
    display: block;
    width: 100%;
    height: 100%;
}

.header .toggle_navigation {
    line-height: 0.75;
}

.header .toggle_navigation > input#menu {
    display: none;
}

.header .toggle_navigation > input#menu + label > span:first-child {
    display: block;
}

.header .toggle_navigation > input#menu + label > span:last-child {
    display: none;
}

.header .toggle_navigation > input#menu:checked + label > span:first-child {
    display: none;
}

.header .toggle_navigation > input#menu:checked + label > span:last-child {
    display: block;
}

.header > .navigation {
    display: none;
}

.header:has(input#menu:checked) > .navigation {
    display: block;
    padding-top: var(--margin-d2);
    padding-left: var(--margin-x2);
}

@media (min-width: 768px) {
	.header {
        padding: var(--margin);
        padding-bottom: var(--margin-d2);
    }

	.header > .navigation_mobile > .site-logo {
		max-width: 30%;
	}
}

@media (min-width: 1024px) {
    .header {
        flex-direction: row;
        padding: var(--margin);
        padding-bottom: var(--margin-d2);
        width: auto;
    }

	.header > .navigation_mobile {
		width: auto;
	}

    .header > .navigation_mobile > .site-logo {
        max-width: 90%;
    }

    .header .toggle_navigation {
        display: none;
    }

    .header > .navigation {
        display: flex;
    }

    .header:has(input#menu:checked) > .navigation {
        padding: 0;
    }

    .header .navigation_item {
        display: inline-block;
        margin-left: 0.75em;
    }
}
