/* Header */
/*
 * Hinweis Safari ≤ 17.1 (z.B. iPadOS 16.7):
 * Verschachtelte Selektoren müssen mit "&" beginnen ("& a" statt "a"),
 * und Deklarationen müssen vor den verschachtelten Regeln stehen.
 */

#header-content {
    background-color: var(--theme-header-bg);
    position: relative;
    z-index: 100;

    &.fixed {
        & .header-main {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            & > [class*=container] {
                @media (min-width: 768px) {
                    padding-top: 1.5625rem; /* 25px */
                    padding-bottom: 1.5625rem; /* 25px */
                    align-items: center;
                }
            }
        }
        & #navMain {
            @media (min-width: 768px) {
                top: 0;
            }
            & a {
                @media (min-width: 768px) {
                    font-size: 1.125rem; /* 18px */
                }
            }
        }
        & #logo {
            & img {
                @media (min-width: 768px) {
                    height: 2.1875rem; /* 35px */
                }
                @media (min-width: 1200px) {
                    height: 2.5rem; /* 40px */
                }
            }
        }
    }
}


/* Topbar navigation */

.header-topbar {
    width: 100%;
    @media (min-width: 768px) {
        width: var(--width-base);
    }

    & ul {
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        @media (min-width: 768px) {
            justify-content: flex-end;
        }
    }

    & li {
        flex: 1;
        @media (min-width: 768px) {
            flex: none;
        }
    }

    & li + li {
        margin-left: 0.125rem; /* 2px */
    }

    & a {
        font-weight: 600;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--theme-secondary-medium);
        color: #143A84;
        width: 100%;
        transition: background-color 0.2s;
        font-size: 0.75rem; /* 12px */
        padding: 0.375rem 0; /* 6px */
        @media (min-width: 768px) {
            font-size: 1rem; /* 16px */
            padding: 0.625rem 1.25rem; /* 10px 20px */
            letter-spacing: .5px;
        }

        &:hover,
        &:focus {
            background-color: var(--theme-secondary-dark);

            & svg path {
                fill: var(--theme-primary-light) !important;
            }
        }
    }

    & svg {
        width: auto;
        margin-right: 0.625rem; /* 10px */
        height: 1.25rem; /* 20px */
        @media (min-width: 768px) {
            height: 1.5625rem; /* 25px */
        }
    }
}


/* Main header bar */

.header-main {
    background-color: var(--theme-header-bg);
    & > [class*=container] {
        display: flex;
        padding-top: 0.9375rem; /* 15px */
        padding-bottom: 0.9375rem; /* 15px */
        align-items: center;
        @media (min-width: 768px) {
            padding-top: 0.3125rem; /* 5px */
            padding-bottom: 3.125rem; /* 50px */
            align-items: flex-end;
        }
    }
}


/* Main navigation */

#navMain {
    display: none;
    background-color: var(--theme-header-nav-bg);
    padding: var(--size-l) var(--size-m);
    @media (min-width: 768px) {
        display: flex;
        background-color: transparent;
        padding: 0;
        margin-left: auto;
        position: relative;
        top: 0.4375rem; /* 7px */
    }
    @media (min-width: 1200px) {
        top: 0.5625rem; /* 9px */
    }

    &[data-open] {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        z-index: 99;
        @media (min-width: 768px) {
            display: flex;
            position: relative;
            top: 0.4375rem; /* 7px */
            left: inherit;
            width: auto;
        }
    }

    & ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        @media (min-width: 768px) {
            flex-direction: row;
            align-items: center;
        }
    }

    & li:last-child a {
        @media (min-width: 768px) {
            padding-right: 0;
        }
    }

    & a {
        display: flex;
        justify-content: center;
        color: var(--theme-white);
        font-size: 1.125rem; /* 18px */
        font-weight: 700;
        text-decoration: none;
        padding: 0.625rem 0; /* 10px */
        letter-spacing: 0;
        -webkit-tap-highlight-color: transparent;
        @media (min-width: 768px) {
            position: relative;
            color: var(--theme-primary-medium);
            padding: 0 0.9375rem; /* 15px */
            letter-spacing: .25px;
        }
        @media (min-width: 1200px) {
            padding: 0 1.875rem; /* 30px */
            font-size: 1.375rem; /* 22px */
        }

        &:focus { outline: none; }
        &:focus-visible { outline: 0.125rem solid var(--theme-primary-medium); } /* 2px */

        &::before {
            @media (min-width: 768px) {
                content: none;
                position: absolute;
                width: 0.875rem; /* 14px */
                height: 0.875rem; /* 14px */
                border-radius: 50%;
                background-color: var(--theme-primary-light);
                top: calc(100% + 0.125rem); /* 2px */
            }
        }

        &:hover,
        &:focus,
        &.active {
            color: var(--theme-secondary-dark);
            @media (min-width: 768px) {
                color: var(--theme-primary-light);
            }

            &::before {
                @media (min-width: 768px) {
                    content: "";
                }
            }
        }
    }
}


/* Logo */

#logo {
    flex-shrink: 0;
    & img {
        width: auto;
        height: 2.125rem; /* 34px */
        @media (min-width: 768px) {
            height: 3.25rem; /* 52px */
        }
        @media (min-width: 1200px) {
            height: 4.375rem; /* 70px */
        }
    }
}


/* Hamburger toggle */

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem; /* 5px */
    background: none;
    border: none;
    padding: var(--size-4xs);
    cursor: pointer;
    margin-inline-start: auto;
    margin-inline-end: -0.3125rem; /* -5px */
    width: 2.5rem;
    aspect-ratio: 1;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    @media (min-width: 768px) {
        display: none;
    }
    &:focus { outline: none; }
    &:focus-visible { outline: 0.125rem solid var(--theme-primary-medium); } /* 2px */

    & span {
        display: block;
        width: 1.875rem; /* 30px */
        height: 0.1875rem; /* 3px */
        background-color: var(--theme-primary-medium);
        border-radius: 0.125rem; /* 2px */
        transition: transform 0.3s ease, opacity 0.3s ease;
        transform-origin: center;
    }

    &[aria-expanded="true"] {
        & span:nth-child(1) { transform: translateY(0.5rem) rotate(45deg); } /* 8px */
        & span:nth-child(2) { opacity: 0; transform: scaleX(0); }
        & span:nth-child(3) { transform: translateY(-0.5rem) rotate(-45deg); } /* -8px */
    }
}


/* Nav open state */

body[data-nav-open] {
    overflow: hidden;
    @media (min-width: 768px) {
        overflow: auto;
    }

    &::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 98;
        pointer-events: none;
        @media (min-width: 768px) {
            display: none;
        }
    }
}


/* Language navigation */

nav.language {
    & .flag {
        display: inline-block;
        color: transparent;
        max-width: var(--size-2xl);
        white-space: nowrap;
        overflow: hidden;
        background-image: url('../../Icons/LanguageFlags/language-icon.svg');
    }

    & .de > .flag { background-image: url('../../Icons/LanguageFlags/de.svg'); }
    & .en > .flag { background-image: url('../../Icons/LanguageFlags/gb.svg'); }
}