/* ---------------------------------------------------------
   Site header
   --------------------------------------------------------- */

.site-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;

    padding: 26px 7vw;

    border-block-end: 1px solid var(--line);
}


/* ---------------------------------------------------------
   Brand
   --------------------------------------------------------- */

.brand {
    display: flex;
    align-items: center;
    gap: 13px;

    text-decoration: none;
}

.brand-mark {
    position: relative;

    width: 40px;
    height: 40px;

    border: 2px solid var(--accent);
    border-radius: 50%;
}

.brand-mark::before,
.brand-mark::after {
    content: "";

    position: absolute;
    inset-inline-start: 50%;

    width: 2px;

    background: var(--accent);

    transform: translateX(-50%);
}

[dir="rtl"] .brand-mark::before,
[dir="rtl"] .brand-mark::after {
    transform: translateX(50%);
}

.brand-mark::before {
    inset-block-start: 6px;
    height: 12px;
}

.brand-mark::after {
    inset-block-start: 17px;
    height: 17px;

    box-shadow:
        -7px 5px 0 -0.5px var(--accent),
        7px 5px 0 -0.5px var(--accent);
}

.brand-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}


/* ---------------------------------------------------------
   Primary navigation
   --------------------------------------------------------- */

.main-navigation {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 22px;
}

.main-navigation a {
    font-size: 0.94rem;
    text-decoration: none;
}

.main-navigation a[aria-current="page"] {
    color: var(--accent);
    font-weight: 700;
}


/* ---------------------------------------------------------
   Language selector
   --------------------------------------------------------- */

.language-pill {
    min-width: 48px;

    padding: 10px 13px;

    border: 1px solid var(--line);
    border-radius: 999px;

    text-align: center;
    text-decoration: none;

    font-weight: 700;
}


/* ---------------------------------------------------------
   Technology submenu
   --------------------------------------------------------- */

.nav-item {
    position: relative;
}

.nav-submenu-toggle {
    appearance: none;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;
    color: var(--text);

    font: inherit;
    font-size: 0.94rem;

    cursor: pointer;
}

.nav-submenu-toggle:hover,
.nav-submenu-toggle:focus-visible {
    color: var(--accent);
    outline: none;
}

.nav-item-has-submenu .nav-submenu {
    position: absolute;

    top: 100%;
    inset-inline-start: 0;

    display: none;

    min-width: 190px;

    padding: 8px;

    border: 1px solid var(--line);
    border-radius: 12px;

    background: var(--background);

    box-shadow:
        0 14px 30px rgb(0 0 0 / 8%);

    z-index: 100;
}

.nav-item-has-submenu:hover .nav-submenu,
.nav-item-has-submenu:focus-within .nav-submenu,
.nav-item-has-submenu.is-open .nav-submenu {
    display: grid;
}

.nav-submenu a {
    display: block;

    padding: 9px 12px;

    border-radius: 8px;

    color: var(--text);
    text-decoration: none;

    white-space: nowrap;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
    color: var(--accent);

    background: rgb(49 91 74 / 8%);

    outline: none;
}

.nav-submenu a[aria-current="page"] {
    color: var(--accent);
    font-weight: 700;
}


/* ---------------------------------------------------------
   Mobile menu button
   --------------------------------------------------------- */

.mobile-menu-button {
    display: none;

    width: 46px;
    height: 46px;
    min-width: 46px;

    padding: 0;

    border: 1px solid var(--line);
    border-radius: 999px;

    color: var(--text);
    background: var(--surface);

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

    flex-direction: column;
    gap: 5px;

    cursor: pointer;
}

.hamburger-line {
    display: block;

    width: 20px;
    height: 2px;

    border-radius: 999px;

    background: currentColor;

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.mobile-menu-button[aria-expanded="true"]
.hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-button[aria-expanded="true"]
.hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button[aria-expanded="true"]
.hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

.mobile-menu-button:focus-visible,
.main-navigation a:focus-visible,
.language-pill:focus-visible {
    outline: 3px solid rgb(49 91 74 / 35%);
    outline-offset: 3px;
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 900px) and (min-width: 681px) {
    .site-header {
        grid-template-columns: auto auto;
    }

    .main-navigation {
        grid-column: 1 / -1;

        justify-content: flex-start;
        flex-wrap: wrap;
    }
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 680px) {
    .site-header {
        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto;

        align-items: center;

        gap: 10px;

        padding-inline: 16px;
    }

    .brand {
        grid-column: 1;
        grid-row: 1;

        min-width: 0;

        gap: 9px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;

        flex: 0 0 36px;
    }

    .brand-name {
        display: inline-block;

        font-size: 0.82rem;

        letter-spacing: 0.07em;

        white-space: nowrap;
    }

    .language-pill {
        grid-column: 2;
        grid-row: 1;

        flex: 0 0 auto;

        min-width: 44px;

        padding-inline: 12px;
    }

    .mobile-menu-button {
        grid-column: 3;
        grid-row: 1;

        display: inline-flex;
    }

    .main-navigation {
        display: none;

        grid-column: 1 / -1;
        grid-row: 2;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding-block-start: 14px;
    }

    .main-navigation.is-open {
        display: flex;
    }

    .main-navigation > a {
        min-height: 48px;

        display: flex;
        align-items: center;

        padding-inline: 4px;

        border-block-end: 1px solid var(--line);
    }

    .nav-item {
        width: 100%;

        border-block-end: 1px solid var(--line);
    }

    .nav-submenu-toggle {
        width: 100%;
        min-height: 48px;

        display: flex;
        align-items: center;

        padding-inline: 4px;

        text-align: start;
    }

    .nav-item-has-submenu .nav-submenu {
        position: static;

        min-width: 0;

        margin: 0;
        padding: 0 0 8px 16px;

        border: 0;
        border-radius: 0;

        background: transparent;

        box-shadow: none;
    }

    [dir="rtl"]
    .nav-item-has-submenu
    .nav-submenu {
        padding:
            0
            16px
            8px
            0;
    }

    .nav-submenu a {
        min-height: 42px;

        display: flex;
        align-items: center;

        padding: 8px 12px;

        white-space: normal;
    }
}


/* ---------------------------------------------------------
   Very small screens
   --------------------------------------------------------- */

@media (max-width: 420px) {
    .brand-name {
        display: inline-block;

        font-size: 0.78rem;

        letter-spacing: 0.055em;
    }
}