:root {
    --yellow: #F9B017;
    --blue: #221F20;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/outfit-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 400;
}

body {
    font-family: 'Outfit',sans-serif;
    background: var(--blue);
    color: white;
}

a {
    text-decoration: none;
    color: inherit;
    &:focus {
        outline: none;
    }
}

strong {
    font-weight: 600;
}

.nowrap {
    white-space: nowrap;
}

.button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 0.7rem 1.2rem;
    background: var(--yellow);
    font-weight: 500;
    font-family: 'Outfit',sans-serif;
    font-size: inherit;
    color: var(--blue);
    border-radius: 0.5rem;
    margin: 0 auto;
    display: block;
    text-align: center;
    width: fit-content;
    text-decoration: none!important;
    transition: background 0.15s, color 0.15s;
    &:hover {
        background: var(--blue);
        color: white;
    }
    &:focus-visible {
        outline: 4px solid var(--blue)!important;
        outline-offset: 4px;
    }
}

header {
    padding: 5vw;
    display: flex;
    gap: 5vw;
    justify-content: space-between;
    align-items: center;
    @media screen and (max-width: 800px) {
        flex-direction: column;
        gap: 1rem;
    }

    & > :first-child {
        display: block;
        max-width: 280px;
        width: calc(50% - 2.5vw);
        flex: 1;
        @media screen and (max-width: 500px) {
            max-width: 100%;
            width: 80%;
            margin: 1rem auto;
        }
        & img {
            display: block;
            width: 100%;
        }
    }

    & menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        & li {
            display: inline-block;
            & a {
                font-size: 1.2rem;
                padding: 0.5rem 1rem;
                text-decoration: none;
                color: white;
                &:hover {
                    text-decoration: underline;
                    text-underline-offset: 0.2em;  
                    text-decoration-thickness: 1px;
                }
                &[aria-current="page"] {
                    color: var(--yellow);
                    text-decoration: underline;
                    text-underline-offset: 0.2em;  
                    text-decoration-thickness: 1px;
                
                }
            }
        }
    }
    

    a {
        display: block;
        background: none;
        &:focus-visible {
            border-radius: 0.3rem;
            outline: 4px solid var(--yellow);
            outline-offset: 4px;
        }
    }

    .language-switcher {
        display: flex;
        gap: 0.5rem;
        & a {
            display: inline-block;
            padding: 0.2rem 0.5rem;
            text-underline-offset: 0.2em;  
            text-decoration-thickness: 1px;
            text-decoration: underline;
            text-decoration-color: white;
            transition: text-decoration-color 0.3s;
            &[aria-current="true"] {
                color: var(--yellow);
                text-decoration: none;
                border: 1px solid var(--yellow);
                border-radius: 5px;
            }
            &:hover {
                text-decoration-thickness: 2px;
                text-underline-offset: 0.15em;  
            }   
        }
    }
    
}

.maintext {
    padding: 5vw;
    background: white;
    color: var(--blue);
    line-height: 1.4;
    font-size: clamp(1.1rem, 2.3vw, 1.333rem);
    hyphens: auto;
    & > * {
        max-width: 55rem;
    }
    & h1 {
        font-size: clamp(2rem, 4vw, 3rem);
        line-height: 1.1;
    }
    & h2 {
        font-size: clamp(1.2rem, 2.6vw, 1.6rem);
        line-height: 1.2;
        font-weight: 500;
    }
    & p {
        
        margin: 1em 0;
        
    }
    & a {
        text-decoration: underline;
        text-underline-offset: 0.2em;  
        text-decoration-thickness: 1px;
        text-decoration: underline;
            
            &:hover {
                text-decoration-thickness: 2px;
                text-underline-offset: 0.15em;  
            }
            
            &:focus-visible {
                border-radius: 0.2rem;
                outline: 2px solid var(--blue);
            }
    }
    & ul {
        margin: 1em 0;
        
        & li {
            list-style: none;
            position: relative;
            padding-left: 1.5em;
        }
    
        & li::before {
            content: "";
            position: absolute;
            left: 0.1em;
            top: 0.25em;
            width: 1em;
            height: 1em;
            display: inline-block;
            background-image: url('data:image/svg+xml;utf8,<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 9h6.5M8.5 6l2.5 3-2.5 3" stroke="%23091C3A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
            background-repeat: no-repeat;
            background-size: 1em 1em;
            background-position: left center;
            margin-right: 0.5em;
            
        } 
    }
}
   

footer {
    clear: both;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    container-type: inline-size;
    & img {
        margin-top: 5vw;
        display: block;
        width: 100%;
    }
    & .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5vw;
        
        @container (max-width: 500px) {
            flex-direction: column;
            gap: 1rem;

        }
    }
    & menu {
        display: flex;
        gap: 1rem;

        @container (max-width: 700px) {
            flex-direction: column;
            
        }
        @container (max-width: 500px) {
            align-items: center;
        }
        & a {
            text-decoration: underline;
            text-underline-offset: 0.2em;  
            text-decoration-thickness: 1px;
            display: inline-block;
            &:hover {
                text-decoration-thickness: 2px;
                text-underline-offset: 0.15em;  
            }
            
            &:focus-visible {
                border-radius: 0.2rem;
                outline: 2px solid var(--yellow);
                outline-offset: 4px;
            }

            &[aria-current="page"] {
                text-decoration: none;
                color: var(--yellow);
            }
        }
    }
    
}