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


:root{
    --primary:#1e1f33;
    --secondary: #F82629;
    --accent: #FFCF35;
}

body{
    font-family: "Carlito", sans-serif;
}

.main-nav .dark-header{
    > li.menu-item-has-children > a:after{
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
    
    }
}

.header-sticky .main-nav{
    > ul > li.menu-item-has-children > a:after{
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
    
    }
}

.clubs a{
            position: relative;
        }

.main-nav{

    > ul > li.menu-item-has-children > a:after{
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    line-height: 0;
    display: block;
    }


     > ul > li{
        display: flex;
        min-height: 50px;
        align-items: center;
        position: relative;
        

        > a{
            position: relative;
            display: flex;
            align-items: center;
            gap: 5px;

            &:before{
                content: "";
                width: 6px;
                aspect-ratio: 1;
                background: #FFCF35;
                border-radius: 100%;
                position: absolute;
                top: -30px;
                opacity: 0;
                transition: all 0.3s ease-out;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        &:hover{
            > a{
                &:before{
                    top: -15px;
                    opacity: 1;
                }
            }

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

        > ul{
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%) scale(0.8);
                background: white;
                max-width: 380px;
                width: max-content;
                border-radius: 0.5rem;
                color: black;
                font-size: 1.1rem;
                z-index: 2;
                opacity: 0;
                transition: all 0.3s ease-out;
                pointer-events: none;
                padding: 30px 30px 30px 25px;
                display: grid;
                gap: 10px;
                box-shadow: 0 0 10px 0 rgba(0 0 0 /10%);

                a{
                    transition: all 0.3s ease-out;
                    border-left: 5px solid transparent;
                    display: block;
                    line-height: 1.3;
                    padding-left: 5px;

                    &:hover{
                        border-color: var(--accent);
                    }
                }
        }

    }

    > ul > li:last-of-type{
        > a{
            background: var(--accent);
            color: black;
            border-radius: 0.3rem;
            padding:0.6rem;

            &:after{
                content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
            }
        }

        > ul{
            left: auto;
            right: 0;
            transform: scale(0.8);
        }

        &:hover{
            > ul{
                transform: scale(1);
            }
        }
    }
}

.footer-menu{
    ul{

        li:last-of-type{
            &:after{
                display: none;
            }
        }

        li{
            a{
                transition: all 0.3s ease-out;
            }

            a:hover{
                color:#FFCF35;
            }

            &:after{
                content: "/";
                margin-left: 2rem;
            }
        }
    }
}

.saka-connect > a{
    width: 70px;
    height: 70px;
    background: url('connect.png') no-repeat center center / 100%;
    text-indent: 999px;
    overflow: hidden;
}

.footer-social img{
    filter: brightness(0) saturate(100%)
}

.chapters img{
    transition: all 0.3s ease-out;
}

.chapters > a:hover img:not(.hover-chapter){
    opacity: 0;
}
.flag-content,.chapters p,.chapters span{
    transition: all 0.3s ease-out;
}
.chapters > a:hover .flag-content{
    opacity: 0;
}
.chapters > a:hover p,
.chapters > a:hover span{
    opacity: 0;
}
.hover-chapter{
    opacity: 0;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out;
    left: 50%;
    transform: translate(-50%,-50%);
}
.chapters > a:hover img.hover-chapter{
    opacity: 1;
}

.white-image{
    filter: brightness(0) saturate(100%) invert(99%) sepia(1%) saturate(0%) hue-rotate(202deg) brightness(103%) contrast(101%);
}

.flag-text{
    border-left: 5px solid black;
    padding-left: 1.3rem;
    margin-left: 1.3rem;
}

.hover-links{
    ul a{
        position: relative;

        &:before{
            content: "";
            position: absolute;
            left: 0;
            height: 1px;
            background: white;
            transition: all 0.3s ease-out;
            bottom: -2px;
            width: 0;
        }

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

            span{
                transform: translateX(5px);
            }
        }

        span{
            position: relative;
            transition: all 0.3s ease-out;
        }
    }

    
}

#breadcrumbs{
    a{
        transition: all 0.3s ease-out;

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

.text-format{
    ul{
        list-style: disc;
        list-style-position: inside;
    }
    .list-items{
        ul{
            list-style: none;
            display: grid;
            gap: 10px;
            line-height: 1.3;

            li{
                position: relative;
                padding-left: 35px;

                &:before{
                    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
                    position: absolute;
                    display: block;
                    line-height: 0;
                    width: 23px;
                    height: 23px;
                    top:1px;
                    left: 0;
                }
            }

        }
    }
    .list-items.clubs{
        li:before{
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23F82629' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
        }
    }
    .list-items.chapters{
        li:before{
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath fill='none' stroke='%23005DA3' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M416 128L192 384l-96-96'/%3E%3C/svg%3E");
        }
    }
}


.splide__arrow{
    background: var(--primary);

    svg{
        fill: white;
    }
}

.timeline-entry{
    
    > div{
        position: relative;

        &:after{
            content: "";
            width: 81px;
            height: 1px;
            background: #cdcdcd;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
       
        &:before{
        content: "";
        width: 35px;
        aspect-ratio: 1;
        background: white;
        position: absolute;
        top: 50%;
        border-radius: 100%;
        z-index: 2;    
        box-shadow: inset 0 0 0 5px var(--accent);
        }
    }    

    
}

.timeline-entry:nth-of-type(even){
    >div{
        &:before{
            left: -82px;
             transform: translateY(-50%) translateX(-50%);
        }

       &:after{
           left: -82px;
        }
    }
}

.timeline-entry:nth-of-type(odd){
    >div{
        &:before{
            right: -82px;
             transform: translateY(-50%) translateX(50%);
        }

         &:after{
           right: -82px;
        }
    }
}
.white-images{
    img{
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(5861%) hue-rotate(117deg) brightness(125%) contrast(111%);
    }
}

.mobile-menu{

    .menu-item-has-children{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    > ul > li:last-of-type{
        display: none;
    }

    li.open-item{
        .dropdown-icon{
            transform: rotate(180deg);
        }
    }

    li:has(ul){
        > ul{
            font-size: 1.2rem;
            line-height: 1.4;
            margin-top: 1rem;
            display: none;
            width: 100%; 

            a{
                display: block;
            }
        }
    }
}

.wp-caption-text{
    margin-top: 1rem;
    font-weight: 600;
}
.wp-caption{
    max-width: 100% !important;
}

@media(max-width:620px){
 .timeline-entry{
    > div{
        &:before{
            display: none;
        }
        &:after{
            display: none;
        }
    }
 }   
}