@import "./Css/fonts.css";
@import "./Css/colors.css";
@import "./Css/menu.css";
@import "./Css/projects.css";

*,
::before,
::after {
    box-sizing: border-box;
}

:root {
    font-size: clamp(0.9rem, 0.6rem + 0.5svw, 1.5rem);
    --gap-size: 1.5rem;
    --main-font: "UniNeue", sans-serif;
    --container-size: 1536px;
    --border-radius: 8px;
}

body {
    font-family: var(--main-font, sans-serif);
    color: white;
    line-height: 1.2;
    margin: 0;
    background-color: var(--main-bg-color);
    overflow-x: hidden;
}

.no-scroll {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
    text-transform: lowercase;
}

h1 {
    font-size: 3rem;
    margin: 0 !important;
    line-height: 1.1;
}

h2 {
    font-size: 1.6rem;
    margin: 0.5em 0;
}

h3 {
    font-size: 1.3rem;
    margin: 0.5em 0;
}

a {
    color: white;
    text-decoration: none;
}

p {
    font-weight: 300;
    line-height: 1.5;
    margin: 0.5em 0;
}

strong {
    color: var(--fs-color-fs-green);
    font-weight: inherit;
}

.stack > * + * {
    margin-block-start: 1.5em;
}

.container {
    max-inline-size: var(--container-size);
    margin-inline: auto;
}

.button {
    color: white;
    font-size: 0.9rem;
    border: 1px solid white;
    font-weight: 700;
    border-radius: var(--border-radius);
    padding: 0.5em 1.5em 0.6em 1.5em;
    display: inline-block;
    text-decoration: none;
    background-color: initial;
    cursor: pointer;
    text-transform: lowercase;

    &:hover {
        background-color: var(--fs-color-fs-green);
        border-color: var(--fs-color-fs-green);
    }
}

.cards {
    .card {
        border: 1px solid var(--fs-color-neutral-700);
        border-radius: var(--border-radius);
        background-color: rgba(256, 255, 256, 0.03);
        padding: 1.5em;

        & > a header {
            text-transform: lowercase;

            & > img {
                width: 1.5em;    
            }
            
            & > p {
                font-size: 1.125rem;
                color: var(--fs-color-neutral-600);
                font-weight: 400;
            }
        }
    }
}

.culture-selector {
    display: flex;
    gap: 0.6em;
    line-height: 0.8em;
    position: relative;

    .selected {
        color: var(--fs-color-fs-green);
    }
    
    #en-selector::after {
        content: "•";
        position: absolute;
        bottom: -0.5em;
        font-size: 1.5em;
        color: var(--fs-color-fs-green);
        transition: transform 0.3s cubic-bezier(0.9, -0.5, 0.1, 1.5);
        left: 1.3em;
    }
    
    #en-selector.selected::after{
        transform: translateX(-1.1em);
    }
}

main {
    background-color: var(--main-bg-color);
    overflow: hidden;

    .starter {
        width: 100vw;
        height: max(calc(100vw * 9 / 21), 105lvh);
        padding-block-end: calc(1.5rem + 5lvh);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;

        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: min(100%, calc(100vw * 5 / 3));
            overflow: hidden;

            & > img {
                width: 100%;
                height: 100%;
                aspect-ratio: auto;
                object-fit: cover;
                object-position: calc(50% - 4rem) 50%;
            }
        }

        & > .header {
            display: block;
            z-index: 3;
        }

        .text {
            --inner: 5vw -5rem;
            padding: 3.5rem;
            z-index: 2;
            width: 100%;

            & > h1 {
                font-size: 2.4rem;
            }
            
            & > p {
                font-size: 1.1rem;
                line-height: 1.2;
                margin-block-end: 2em;
                max-width: 30rem;
            }
        }
    }

    & > h1 {
        font-size: 3.5rem;
        line-height: 1.3;

        & > span {
            display: block;

            & > mark {
                background-color: unset;
                color: var(--fs-color-fs-green)
            }
        }
    }
    
    .section {
        margin: 0 2rem;
        padding: 0 1.5rem 1.5rem;
        /*border-inline-start: 1px solid var(--fs-color-neutral-700);*/
        outline-offset: 20px;
        position: relative;
        
        /*&::before {*/
        /*    content: "";*/
        /*    display: inline-block;*/
        /*    width: 1.5rem;*/
        /*    height: 1.5rem;*/
        /*    background-image:  url("https://freiheitsoftwarewebsite.blob.core.windows.net/files/LandingPage/sections-star.svg");*/
        /*    background-size: contain;*/
        /*    position: absolute;*/
        /*    top: 0rem;*/
        /*    left: -0.76rem;*/
        /*}*/
        
        & > header {
            text-transform: lowercase;

            & > small {
                color: var(--fs-color-neutral-600);
                font-size: 1.2rem;
            }
            
            & > h2 {
                margin-bottom: 2em;
            }
        }

        
    }
}

.section-facilioo {
    &::before {
        background-image:  url("https://freiheitsoftwarewebsite.blob.core.windows.net/files/Projects/Facilioo/sections-star-facilioo.svg") !important;
    }
    
    strong {
        color: var(--fs-color-facilioo-yellow);
    }
}

.section-octo {
    &::before {
        background-image:  url("https://freiheitsoftwarewebsite.blob.core.windows.net/files/Projects/Octo/sections-star-octo.svg") !important;
    }

    strong {
        color: var(--fs-color-octo-purple);
    }
}

@media (min-width: 60em) {
    h1 {
        font-size: 5rem;
        margin: 0.5em 0;
    }
    
    h2 {
        font-size: 2.5rem;
    }

    main {

        .starter {
            
            .text {
                padding: 0;
                margin: 5.5rem;
                
                & > h1 {
                    font-size: 5rem;
                }
            }

            .background-image {

                & > img {
                    object-position: center;
                }
            }
        }
    }

    .section {
        padding-bottom: 6rem !important;
        margin: 0 4rem !important;

        & > header {
            width: 50%;
        }
    }
}