.header {
    z-index: 10;
    position: fixed;
    inset: 0;

    width: 100%;
    height: var(--height-header);

    display: flex;

    background-color: color-mix(
            in srgb,
            var(--color-extra--0) 80%,
            transparent
    );
    backdrop-filter: var(--backdrop-blur);
}

.header__inner,
.footer__inner {
    width: var(--width-base);
    height: 100%;

    margin: 0 auto;
}

.header-inner {
    display: flex;
    align-items: center;
}

.header-logo {
    z-index: 30;

    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
}

.header-logo > img {
    height: calc(var(--height-header) / 3 * 2);
    aspect-ratio: 1;
}

.header-logo > h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size--l);
    font-weight: bold;
}

.header-nav {
    height: 100%;
    margin-left: auto;

    display: flex;
    align-items: center;
}

.header-nav__list {
    display: flex;
    gap: var(--gap-m);

    list-style: none;
}

.header-link {
    color: var(--color-text--1);

    font-size: var(--font-size--s);
    font-weight: bold;

    transition: var(--transition-0);
}

.header-link:is(:hover, :focus-visible) {
    color: var(--color-text--0);
}

.header-link--primary {
    padding: var(--padding-xs) var(--padding-m);

    color: var(--color-white);
    background-color: var(--color-text--2);

    font-weight: normal;

    border-radius: 999px;
}

.header-link--primary:is(:hover, :focus-visible) {
    color: var(--color-white);
    background-color: var(--color-text--0);
}

.admin-header-link {
    margin-left: auto;
}

.header-burger {
    z-index: 30;

    margin-left: auto;

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

    height: 43px;
    aspect-ratio: 1;

    background-color: var(--color-white);
    border: var(--border-0);
    border-radius: 100%;

    cursor: pointer;

    transition: var(--transition-0);
}

.header-burger:is(:hover, :focus-visible) {
    color: var(--color-white);
    background-color: var(--color-text--2);

    border-color: transparent;
}

.main {
    margin-top: var(--height-header);

    display: flex;
    flex-direction: column;
}

.main-block {
    width: 100%;

    display: flex;
}

.main-block__inner {
    width: var(--width-base);
    margin: 0 auto;
}

.footer {
    width: 100%;
    height: var(--height-footer);

    background-color: var(--color-extra--1);

    border-top: var(--border-0);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-inner > div {
    color: var(--color-text--1);

    font-size: var(--font-size--xs);
}

.cookie-banner {
    z-index: 40;
    position: fixed;
    right: var(--padding-s);
    bottom: var(--padding-s);

    width: min(360px, calc(100% - var(--padding-s) * 2));
    padding: var(--padding-xs);

    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    background-color: color-mix(
            in srgb,
            var(--color-white) 96%,
            transparent
    );
    border: var(--border-0);
    border-radius: var(--border-radius--m);
    box-shadow: 0 14px 40px color-mix(
            in srgb,
            var(--color-text--0) 14%,
            transparent
    );
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner > p {
    color: var(--color-text--1);

    font-size: var(--font-size--xs);
    line-height: 1.45;
}

.cookie-banner > button {
    flex: 0 0 auto;
    padding: 9px var(--padding-xs);

    color: var(--color-white);
    background-color: var(--color-text--2);

    font-size: var(--font-size--xs);
    font-weight: bold;

    border-radius: 999px;
    cursor: pointer;

    transition: var(--transition-0);
}

.cookie-banner > button:is(:hover, :focus-visible) {
    background-color: var(--color-text--0);
}

@media (max-width: 1180px) {
    .header__inner,
    .main-block__inner,
    .footer__inner {
        width: calc(100% - var(--padding-xs) * 2);
        padding: 0 var(--padding-xs);
    }
}

@media (max-width: 1000px) {
    .header-burger {
        display: flex;
    }

    .header-nav {
        z-index: 20;
        position: fixed;
        top: 0;
        left: 100%;

        width: 100%;
        height: 100dvh;

        background-color: color-mix(
            in srgb,
            var(--color-white) 90%,
            transparent
        );

        transition: var(--transition-0);
    }

    .header-nav--showed {
        left: 0;
    }

    .header-nav__list {
        margin: auto;

        flex-direction: column;
    }

    .header-nav__list > li {
        text-align: center;
    }
}

@media (max-width: 700px) {
    .footer {
        height: fit-content;
        padding: var(--padding-xs) 0;
    }

    .footer-inner {
        flex-direction: column;
    }

    .footer-inner > div {
        text-align: center;
    }

    .cookie-banner {
        left: var(--padding-xs);
        bottom: var(--padding-xs);

        width: calc(100% - var(--padding-xs) * 2 - var(--padding-xs) * 2);
    }
}

@media (max-width: 420px) {
    .cookie-banner {
        align-items: flex-start;
        flex-direction: column;
    }
}