@font-face {
    font-family: Merriweather;
    src: url(/fonts/Merriweather/Merriweather.ttf);
}

.banner-link-button {
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 20px;
    padding: 30px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 2.5rem;
    width: fit-content;
    cursor: pointer;

    &:hover {
        background: white;
        color: var(--grey);
    }
}

h2.quote {
    font-family: Merriweather;
    text-align: center;
    font-size: 5.8rem;
    font-weight: 600;
    color: var(--red);
}

.header {
    &.small {
        height: 37.5vh;
        min-height: 500px;
    }

    >.main-content {
        display: flex;
        padding: 0 10%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        min-height: 0;

        h1 {
            all: unset;
            text-align: center;
            margin-bottom: 2rem;
            font-size: 3.5rem;
            line-height: 1.1;
            font-weight: 600;
            text-shadow: black 0px 0 20px;
        }

        >form {
            display: grid;
            grid-template-columns: repeat(16, 1fr);
            gap: 1rem;
            color: var(--grey);
            font-size: 1rem;

            >* {
                font-size: inherit;
            }

            >select {

                grid-column: span 4;
            }

            >input {
                grid-column: 5 / span 5;
            }

            >button {
                grid-row: 2;
                grid-column: 10 / span 3;
            }

            &:not(:has(>button)) {
                >input {
                    grid-column: 5 / span 4;
                }

                >a {
                    grid-column: 9 / 13;
                }
            }

            >a {
                display: flex;
                align-items: center;
                justify-content: center;
                grid-column: 7 / span 4;
                text-align: center;
                cursor: pointer;
            }

            >select,
            >input,
            >button {
                border-radius: 5rem;
            }

            >select,
            >input {
                border: 1px solid var(--red);
                background: white;
                padding: 0 5rem 0 1.5rem;
                box-sizing: border-box;
                line-height: 1.2;
                height: 2.5rem;
                color: grey;

            }

            >select {
                position: relative;
                -moz-appearance: none;
                /* Firefox */
                -webkit-appearance: none;
                /* Safari and Chrome */
                appearance: none;

                background-image: url(/select-arrow.svg);
                background-position: right;
                background-repeat: no-repeat;
                background-size: auto 25%;
                background-position: right 1.5rem center;
            }

            >button {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: none;
                background: var(--red);
                text-align: left;
                padding: .5rem 1.5rem;
                cursor: pointer;
                color: white;

                &::after {
                    content: '';
                    aspect-ratio: 1;
                    background: currentColor;
                    height: 100%;
                    mask-image: url(/assets/search.svg);
                }
            }

            >a {
                color: white;
                text-decoration: underline;
            }
        }
    }

    @media screen and (max-width: 1440px) {
        >.main-content {
            padding: 0 25%;

            >form {
                grid-template-columns: repeat(8, 1fr);

                >select {
                    grid-column: span 4;
                }

                >input {
                    grid-column: span 5;
                }

                >button {
                    grid-column: 6 / span 3;
                    grid-row: 3;
                }

                &:not(:has(>button)) {
                    >input {
                        grid-column: span 8;
                    }

                    >a {
                        grid-column: 3 / span 4;
                    }
                }

                >a {
                    grid-column: 3 / span 4;
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        >.main-content {
            padding: 0 25%;

            >form {
                grid-template-columns: repeat(1, 1fr);

                >select {
                    grid-column: 1;
                }

                >input {
                    grid-column: 1;
                }

                >button {
                    grid-column: 1;
                    grid-row: 6;
                }

                &:not(:has(>button)) {
                    >input {
                        grid-column: 1;
                    }

                    >a {
                        grid-column: 1
                    }
                }

                >a {
                    grid-column: 1
                }
            }
        }
    }
}

.vacancy-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;

    >h3 {
        font-size: 1.5rem;
        font-weight: 500;
        color: var(--red);
        text-decoration: underline 1px #d6d6d6;
        text-underline-offset: 5px;
    }

    >a {
        font-size: 1.2rem;
        font-weight: 300;
        color: var(--grey);
    }
}

#vacancy {
    margin-top: 90px;
    gap: 0;

    >.company {
        color: var(--red);
        text-transform: uppercase;
        font-size: 1.2rem;
        font-weight: 300;
        margin-bottom: 1.5rem;
    }

    >h1 {
        all: unset;
        font-size: 3.5rem;
        font-weight: 600;
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }

    >h2 {
        color: var(--red);
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: .5rem;

        &:not(:first-of-type) {
            margin-top: 3.5rem;
        }
    }

    >p {
        font-size: 1.2rem;
        font-weight: 300;
        line-height: 1.67
    }

    a.apply {
        border: 1px solid var(--red);
        color: var(--red);
        background: white;
        margin: 3.5rem auto 0;
        padding: 10px 30px;
        font-size: 1.6rem;
        font-weight: 300;
        line-height: 2.5rem;
        border-radius: 5rem;
        cursor: pointer;

        &:hover {
            background: var(--red);
            color: white;
        }
    }

    ul {
        >li {
            font-size: 1.2rem;
            font-weight: 300;
            line-height: 2;
        }
    }
}

dialog.form {
    width: 600px;
    border: 0px;
    height: 80%;
    padding: 0;
    border-radius: 4px;

    &::backdrop {
        background-color: rgba(0,0,0,.5);
        backdrop-filter: blur(5px);
    }

    >iframe {
        width: 100%;
        height: 100%;
    }
}