@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

:root {
    --accent: #4B8FCC;
    --primary_white: #E8E6E0;
    --primary_blue: #041e35;

}

body,
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: "Google Sans", sans-serif;
    background: var(--primary_white);
}

.hero{
    position: relative;

    &:after{
        content: "";
        width: 100%;
        height: 100%;
        background: var(--accent);
        mix-blend-mode: multiply;
        position: absolute;
        inset:0;
    }
}

.hero-title{

    font-size: clamp(2.5rem, 13vw, 12rem);
    line-height: 0.8;

    span{
        display: block;
    }
}

.header-nav{
    position: relative;

    &:before{
        content: "";
        width: 1px;
        height: 100svh;
        position: absolute;
        left: 0;
        top: 0;
        background: white;
        opacity: 0.2;
    }

   &:hover{
     .main-nav li:has(ul) >a:after{
        filter: brightness(0) saturate(100%) invert(11%) sepia(15%) saturate(3362%) hue-rotate(173deg) brightness(97%) contrast(103%);
    }
   }
}

.header .dark-menu .main-nav{
    li:has(ul){
        ul{
            background: #dddbd3;
            border:1px solid var(--primary_blue);
            border-top: none;
        }
        a:after{
            filter: none;
        }
    }
}

.header .main-nav{
    a{
        position: relative;

        &:before{
            content: "";
            width: 0;
            height: 2px;
            background: var(--primary_blue);
            transition: all 0.3s ease-out;
            position: absolute;
            bottom: -1px;
            right: 0;
        }

        &:hover:before{
            width: 100%;
            left: 0;
        }
    }

    li:has(ul){

        > a{
            position: relative;

        }
        > a:after{
            content: url('https://11am.gr/wp/mediaservices/wp-content/uploads/2026/02/chevron-down-outline.svg');
            display: block;
            line-height: 0;
            width: 15px;
            height: 15px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%) translateX(calc(100% + 5px));
            right: 0;
            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(24%) hue-rotate(114deg) brightness(108%) contrast(108%);
        }

        ul{
            position: absolute;
            top: 0;
            left: 0;
            padding: 3rem;
            transform: translateX(-100%);
            max-width: 400px;
            background: var(--primary_white);
            color: var(--primary_blue);
            font-size: 1.1rem;
            line-height: 1.2;
            display: grid;
            row-gap: 1rem;
            clip-path: inset(0 0 0 100%);
            transition: all 0.3s ease-out;
        }
    }

    li:has(ul).open{
        ul{
            clip-path: inset(0);
        }
    }
}



.fixed-header{

    
    transition: all 0.3s ease-out;

    .main-nav{
        a{
            position: relative;

            &:before{
                content: "";
                width: 0;
                height: 2px;
                background: var(--primary_blue);
                transition: all 0.3s ease-out;
                position: absolute;
                bottom: -1px;
                right: 0;
            }
           
        }

        li:hover{
             > a:before{
                width: 100%;
                left: 0;
            }
        }    

        li:has(ul){

            position: relative;
            min-height: 60px;
            display: flex;
            align-items: center;

            > a{
                position: relative;

            }
            > a:after{
                content: url('https://11am.gr/wp/mediaservices/wp-content/uploads/2026/02/chevron-down-outline.svg');
                display: block;
                line-height: 0;
                width: 15px;
                height: 15px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%) translateX(calc(100% + 5px));
                right: 0;
                filter: brightness(0) saturate(100%) invert(11%) sepia(15%) saturate(3362%) hue-rotate(173deg) brightness(97%) contrast(103%);
            }

            ul{
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%) scale(0.9);
                padding: 1.8rem;
                width: 300px;
                background: var(--primary_white);
                color: var(--primary_blue);
                font-size: 1rem;
                line-height: 1.3;
                display: grid;
                row-gap: 1rem;
                transition: all 0.3s ease-out;
                pointer-events: none;
                opacity: 0;
                border: 1px solid var(--primary_blue);
            }

            &:hover{
                ul{
                    transform: translateX(-50%) scale(1);
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }
}

.fixed-header.appear{
    transform: translateY(0);
}

.scroll-down{
    position: relative;
    z-index: 1;
    transition: all 0.1s ease-out;

    &:before{
        content: "";
        position: absolute;
        inset: 0;
        background: var(--primary_white);
        transform: scale(0);
        transform-origin: bottom left;
        transition: all 0.2s ease-out;
    }
    &:hover{
        color: var(--primary_blue);
    }
    &:hover:before{
        transform: scale(1);
    }
}

.main-cta{
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: white;
    background: var(--primary_blue);
    padding: 1rem;
    position: relative;
    line-height: 1;
    z-index: 1;

    &:before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: var(--accent);
        transition: all 0.2s ease-out;
        z-index: -1;
    }

    &:hover:before{
        height: 100%;
    }

    span{
        display: block;
        line-height: 0;
        transform: rotate(-45deg);
    }
}

.overlay-image{
    position: relative;

    &:before{
        content: "";
        position: absolute;
        inset: 0;
        background: var(--accent);
        mix-blend-mode: multiply;
    }
}

.hover-cta{
    a{
        position: relative;
        z-index: 1;
        transition: all 0.3s ease-out;

        &:before{
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0;
            z-index: -1;
            background: var(--accent);
            transition: all 0.3s ease-out;
        }
        .news-date{
            transition: all 0.3s ease-out;
        }
        &:hover{
            color: white;

            &:before{
                height: 100%;
            }
            .news-date{
                color: white;
            }
        }
    }
}



.bordered-title{
    position: relative;
    padding-left: 4rem;

    span{
        background: var(--primary_white);
        padding-inline: 2rem;
    }

    &:before{
        content: "";
        width: 100%;
        height: 1px;
        border-bottom: 1px solid var(--primary_blue);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: -1;
    }
}

.client-box{
    position: relative;
    z-index: 1;

    &:before{
        content: "";
        position: absolute;
        inset: 0;
        background: white;
        transition: all 0.3s ease-out;
        transform: scale(0);
        transform-origin: bottom left;
        z-index: -1;
    }

    &:hover:before{
        transform: scale(1);
    }
}

.contact-form{

    form{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1rem;
    }

    p br{
        display: none;
    }    

    label{
        display: block;
        font-size: 0.9rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    .form-group:has(input[placeholder="Θέμα"]),
    .form-group:has(textarea){
        grid-column: span 2;
    }

    textarea{
        width: 100%;
        background: transparent;
        border-bottom: 1px solid var(--primary_blue);
        padding-bottom: 0.8rem;
        color: var(--primary_blue);
        height: 100px;
    }

    input:not([type="submit"]){
        width: 100%;
        background: transparent;
        border-bottom: 1px solid var(--primary_blue);
        padding-bottom: 0.8rem;
        color: var(--primary_blue);
    }

    input[type="submit"]{
        background: var(--primary_blue);
        color: white;
        transition: all 0.3s ease-out;
        padding: 1rem;
        line-height: 1;
        display: inline-block;

        &:hover{
            background: var(--accent);
        }
    }
}

.footer{
    ul{
        a{
            transition: all 0.3s ease-out;
            &:hover{
                color: var(--accent);
            }
        }
    }
}

.service-list{
    details[open]{
        summary{
            color: var(--accent);
            span{
                transform: rotate(180deg);
            }
        }
    }
}