@font-face {
    font-family: 'Mostra Nuova AltD';
    src: url('../fonts/MostraNuovaAltD.woff2') format('woff2'),
        url('../fonts/MostraNuovaAltD.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-beige: #EBE5D5;
    --color-red: #C83F5C;
    --color-blue: #01174C;
    --color-orange: #F04E2F;
    --color-yellow: #E3A725;
    --color-black: #000000;
    --color-white: #FFFFFF;

    --font-size: 18px;

    --gap: 1rem;
    --gap2x: 2rem;
    --gap3x: 3rem;
    --gap4x: 4rem;
    --gap5x: 5rem;
    --gap6x: 6rem;

    --maxwidth: 960px;

    --font-title: "Mostra Nuova AltD", serif;
    --font-family: "Montserrat", sans-serif;
}

* {
    scrollbar-width: auto;
    scrollbar-color: var(--color-red) var(--color-beige);
}

*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: var(--color-beige);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-red);
    border-radius: 10px;
    border: 3px solid var(--color-beige);
}

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

*{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body{
    background-color: var(--color-beige);
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: var(--font-size);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &.admin-bar{
        min-height: calc(100dvh - 32px);
    }
}

h1,h2,h3{
    font-family: var(--font-title);
    font-weight: normal;
    line-height: 1.25;
}

a{

    color: var(--color-black);
    text-decoration: none;

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

mark{
    background-color: var(--color-red);
    color: var(--color-white);
    border-radius: 5px
}

p{
    line-height: 1.5;
    text-wrap: pretty;

    b,strong{
        font-weight: bold;
    }

    &:last-child{
        margin-bottom: 0;
    }
}

em{
    font-size: 0.85rem;
    line-height: 1rem;
}

header{
    padding: var(--gap6x);
    padding-bottom: var(--gap3x);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    align-items: center;
    justify-content: space-between;

    padding: var(--gap2x) 0 var(--gap3x) 0;
    margin: 0;
    gap: 0;

    .logo{
        max-width: 180px;
        img{
            width: 100%;
        }
    }

    @media screen and (max-width: 768px){

        padding: var(--gap3x);
        padding-bottom: var(--gap);

        .logo{
            width: 100%;
            margin: 0 auto;
            img{
                width: 100%;
                height: auto;
                object-fit: cover;
            }
        }
    }

    @media screen and (max-height: 640px){
        padding: var(--gap2x) !important;

        .logo{
            max-width: 180px !important;
            margin: 0 auto;
            img{
                width: 100%;
                height: auto;
                object-fit: cover;
            }
        }
    }
}


body.home{
    header{
        padding: var(--gap6x);
        padding-bottom: var(--gap);
        gap: var(--gap);

        .logo{
            max-width: 320px;
            img{
                width: 100%;
            }
        }
    }
}


.nav-trigger{

    margin: 0;
    padding: 0;
    display: none;
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2000;
    background-color: var(--color-beige);
    padding: 0.5rem;
    border-radius: 0.5rem;

    hr{
        margin: 0;
        padding: 0;
        width: var(--gap2x);
        border: 2px solid var(--color-red);
        border-radius: 5px;
    }

    @media screen and (max-width: 768px){
        display: flex;
        flex-direction: column;
        gap: 7px;
    }
}

nav{
    font-family: var(--font-title);
    margin-top: var(--gap2x);

    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap2x);

        li{
            a{
                font-size: var(--font-size);
                text-transform: uppercase;
                transition: all 0.2s ease-in-out;
            }

            &.current-menu-item,
            &.current-page-ancestor{
                a{
                    color: var(--color-red);
                    font-weight: bold;

                    background-color: var(--color-white);
                    border-radius: var(--gap3x);
                    padding: var(--gap) var(--gap2x);
                    box-shadow: 5px 5px 0px rgba(0,0,0,0.025);
                }
            }
        }
    }

    &.important-links{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--gap2x);
        margin-top: var(--gap);
        margin-bottom: var(--gap4x);

        a{
            font-size: var(--font-size);
            text-transform: uppercase;
            color: var(--color-white);
            font-weight: bold;
            padding: var(--gap) var(--gap2x);
            border-radius: var(--gap3x);
            background-color: var(--color-blue);
            box-shadow: 5px 5px 0px rgba(0,0,0,0.025);

            &:first-child{
                background-color: var(--color-red);
                color: var(--color-white);
            }
            &:last-child{
                background-color: var(--color-orange);
                color: var(--color-white);
            }

            &:hover{
                background-color: var(--color-black);
                color: var(--color-beige);
            }
        }
    }

    &.external-links{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: var(--gap4x);

        a{
            display: inline-block;
            white-space: nowrap;
            font-size: var(--font-size);
            text-transform: uppercase;
            color: var(--color-red);
            font-weight: bold;
            padding: var(--gap) var(--gap2x);
            border-radius: var(--gap3x);
            background-color: var(--color-white);
            box-shadow: 5px 5px 0px rgba(0,0,0,0.025);
            transition: all 0.2s ease-in-out;

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

        @media screen and (max-width: 768px){
        }
    }

    &.links{
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;

        a{
            flex: auto;
            display: flex;
            flex-direction: column;
            white-space: wrap;
            color: var(--color-red);
            padding: var(--gap2x);
            border-radius: var(--gap) 0;
            background-color: var(--color-white);
            box-shadow: 5px 5px 0px rgba(0,0,0,0.025);
            transition: all 0.2s ease-in-out;

            h3{
                text-transform: uppercase;
                font-weight: bold;
                font-size: var(--font-size);
                margin: 0;
                padding: 0;
            }
            p{
                font-family: var(--font-family);
            }

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

        @media screen and (max-width: 768px){
        }
    }

    @media screen and (max-width: 768px){

        &.menu-main-menu-container{
            position: fixed;
            margin: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-color: var(--color-beige);
            display: flex;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            ul{
                flex-direction: column;
                gap: var(--gap2x);
                justify-content: center;
                align-items: center;
                li{
                    a{
                        text-align: center;
                    }
                }
            }

            &.active{
                display: flex;
            }
        }

        ul{
            justify-content: center;
            li{
                &.current-menu-item,
                &.current-page-ancestor{
                    a{
                        border-radius: var(--gap2x);
                        padding: 8px var(--gap);
                    }
                }
            }
        }
    }
}


main{
    width: 100%;

    section{
        width: 100%;
        margin: 0 auto;
        max-width: var(--maxwidth);
        margin-bottom: var(--gap4x);
        margin-bottom: var(--gap);

        @media screen and (max-width: 768px){
            width: 90%;
        }

        &:last-child{
            margin-bottom: 0;
        }

        &.intro{
            max-width: calc(var(--maxwidth) * 0.75);

            article{
                /* border-top:10px solid var(--color-red);
                border-right:10px solid var(--color-orange);
                border-bottom:10px solid var(--color-blue);
                border-left:10px solid var(--color-yellow); */
            }
        }

        &.seotud-postitused{
            margin-top: var(--gap3x);

            article{
                margin-bottom: var(--gap3x);

                &:last-child{
                    margin-bottom: 0;
                }
            }
        }

        &.seotud-lehed{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--gap4x);
            margin-bottom: var(--gap6x);
            margin-top: var(--gap3x);

            @media screen and (max-width: 768px){
                grid-template-columns: 1fr;
                gap: var(--gap2x);
            }
        }

        &.teated{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--gap2x);
            margin-bottom: var(--gap6x);

            article{
                padding-bottom: 5rem;
                &:first-child{
                    /* grid-column: 1 / 3; */
                }
            }

            @media screen and (max-width: 768px){
                grid-template-columns: 1fr;
                gap: var(--gap2x);
                article{

                    h2{
                        padding-right: var(--gap2x);
                    }

                    &:first-child{
                        grid-column: 1 / 2;
                    }
                }
            }

            /* &:first-child{
                grid-column: 1 / 3;
            } */
        }

        &.kkk-search{
            text-align: center;
            margin-bottom: var(--gap3x);
            /* margin-top: var(--gap); */

            input[type=text]{
                padding: var(--gap) var(--gap2x);
                border: none;
                width: 50%;
                border: 2px solid var(--color-white);
                border-radius: var(--gap2x);

                &:focus{
                    outline: none;
                    border: 2px solid var(--color-red);
                }
            }
            @media screen and (max-width: 768px){
                margin-bottom: var(--gap2x);

                input[type=text]{
                    width: 80%;
                }
            }
        }
        &.kkk{

            display: grid;
            grid-template-columns: 1fr;
            /* gap: var(--gap4x); */
            margin-bottom: var(--gap2x);

            article{
                position: relative;
                background-color: var(--color-white);
                padding: var(--gap3x);
                padding-bottom: 0;
                border-radius: 0;
                transition: background-color 0.3s ease-in-out;
                box-shadow: 10px 10px 0px rgba(0,0,0,0.025);

                &:first-child{
                    border-radius: var(--gap3x) 0 0 0;
                }
                &:last-child{
                    border-radius: 0 0 var(--gap3x) 0;
                    padding-bottom: var(--gap3x);
                }

                &.hide{
                    display: none;
                }

                .question{
                    display: block;
                    position: relative;
                    font-family: var(--font-title);
                    font-size: 1.5rem;
                    margin-bottom: 0;
                    padding-left: 2rem;

                    &::before{
                        left: 0;
                        position: absolute;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        content: '+';
                        width: 1.5rem;
                        height: 1.5rem;
                    }

                    &:hover{
                        &::before{
                            transition: transform 0.2s ease-in-out;
                            transform: rotate(225deg);
                            transform-origin: center;
                        }
                    }
                }
                p{
                    /* padding: 0; */
                    /* margin: 0; */
                    display: none;
                }

                &.show{
                    p{
                        margin-top: 1rem;
                        display: block;
                    }
                }

                @media screen and (max-width: 768px){
                    padding: var(--gap2x);
                }
            }
        }

        article{
            position: relative;
            background-color: var(--color-white);
            /* background-color: rgba(255,255,255,0.2); */
            border-radius: var(--gap3x) 0;
            padding: var(--gap3x);
            transition: background-color 0.3s ease-in-out;
            box-shadow: 10px 10px 0px rgba(0,0,0,0.025);

            @media screen and (max-width: 768px){
                border-radius: var(--gap2x) 0;
                padding: var(--gap2x);
            }

            &:hover{
                /* background-color: rgba(255,255,255,1); */
            }

            &.transparent{
                background: transparent;
                padding:var(--gap);
                box-shadow: none;
            }

            h1,
            h2{
                margin-top: 0;
            }

            p{

                a{
                    text-decoration: underline;
                }
            }

            .read-more{
                position: absolute;
                bottom: 2rem;
                right: 2rem;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: var(--gap2x);
                background-color: var(--color-red);
                color: var(--color-white);
                padding: var(--gap);
                border-radius: var(--gap3x);
                text-transform: uppercase;
                font-weight: bold;
                font-size: calc(var(--font-size) * 0.75);

                &:hover{
                    background-color: var(--color-orange);
                    color: var(--color-black);
                }
            }

            &.archive{

                padding: var(--gap2x);
                border-radius: var(--gap) 0;

                h2{
                    margin-bottom: 0.5rem;
                }

                .excerpt{
                    display: none;
                }
                .read-more{
                    background-color: var(--color-beige);

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

.category-tabs,
.tag-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    padding: 0;
    li{
        margin: 0;
        padding: 0;
        list-style-type: none;
        a{
            background-color: var(--color-beige);
            display: flex;
            padding: 0.5rem 1.25rem;
            border-radius: 1rem 0;

            &:hover,
            &.active{
                background-color: var(--color-blue);
                color: var(--color-beige);
            }
        }
    }
}

.tag-tabs{
    li{
        a{
            &:hover,
            &.active{
                background-color: var(--color-red);
                color: var(--color-beige);
            }
        }
    }
}

.huvitiste-saajad{
    margin-top: 3rem;
    table{
        width: 100%;
        tr{
            &:first-child{
                td{
                    font-weight: bold;
                }
            }
        }
        td{
            border: none;
            padding: 0.5rem 0;
            font-size: 0.8rem;
            border-bottom: 1px solid var(--color-beige);

            &:first-child{
                width: 50%;
            }
            &:last-child{
                text-align: right;
            }
        }
    }
}

.just-a-chill-guy{

    position: relative;
    z-index: 10px;
    width:100%;
    margin: 0 auto;
    /* margin-top: -150px; */
    max-width: var(--maxwidth);
    /* display: none; */
    img{
        width: 40%;
        /* margin: 0 10% 0 auto; */
        margin: 0 auto;
        object-fit: cover;
        display: block;
    }
}

.melu{
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    /* overflow: hidden; */
    /* box-shadow: 10px 10px 0px var(--color-red); */
    max-width: calc(var(--maxwidth) * 0.8);
    /* background-color: var(--color-blue); */
    /* border-radius: var(--gap4x); */
    /* padding: var(--gap4x); */

    .melu-logo{
        padding: var(--gap4x);
        padding-bottom: 0;
        margin: 0 auto;
        max-width: calc(var(--maxwidth) * 0.25);
    }



    /* .melu-image{
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 0 3rem 3rem 3rem;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    } */

    .melu-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex-direction: row;
        margin-top: var(--gap);
        gap: var(--gap2x);
        width: auto;
        border-radius: var(--gap4x);
        background-color: var(--color-blue);
        box-shadow: 10px 10px 0px var(--color-red);

        .melu-content{
            border-radius: var(--gap2x);
            overflow: hidden;

            p{
                padding: 1rem 0;
            }

            .wp-block-video{
                padding: 0;
                margin: 0;
            }
        }

        .melu-slide{
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: var(--gap2x);
            padding: 2rem 4rem;
            margin: 0;

            >div{
                flex: 1;
            }

            h1,h2,h3{
                color: var(--color-yellow);
                font-size: calc(var(--font-size) * 1.5);
                margin: 0;
            }

            p{
                color: var(--color-beige);
            }
        }

        .swiper{
            width: 100%;
        }

        .swiper-pagination-bullet{
            opacity: 1;
            background-color: var(--color-beige);

            &.swiper-pagination-bullet-active{
                background-color: var(--color-red);
                opacity: 1;
            }
        }
        .swiper-wrapper{
            display: flex;
            align-items: center;
        }
        .swiper-slide{
            display: flex;
            flex-grow: 1;
            min-height: 445px;
            border-radius: var(--gap4x);
        }

        @media screen and (max-width: 420px){

            width: 70%;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: var(--gap2x);
            border-radius: var(--gap2x);
            .melu-logo{
                margin-bottom: var(--gap);
            }
            .melu-image{
                margin-top: var(--gap2x);
                border-radius: var(--gap2x);
            }
        }
    }

    @media screen and (max-width: 768px){
        display: none;
    }

}

footer{
    margin-top: auto;
    text-align: center;
    padding: var(--gap6x);

    p{
        margin: 0;
    }
}

body.admin-bar{
    .important{
        top: 3.5rem;
    }
}

.important{
    position: fixed;
    z-index: 100;
    top:1rem;
    bottom: auto;
    right: 1rem;
    max-width: 240px;
    z-index: 20px;
    background-color: var(--color-red);
    color: var(--color-white);
    padding: var(--gap);
    border-radius: var(--gap2x) 0;
    margin-bottom: var(--gap4x);
    transition: all 0.2s ease-in-out;

    width: 2rem;
    text-align: center;
    cursor: pointer;

    .important__close{
        display: none;
        float: right;
    }

    article{
        display: none;
        transition: all 0.2s ease-in-out;
    }

    .important__open{
        content: '!';
        font-weight: bold;
        font-size: 1.5rem;
        font-family: var(--font-title);
    }

    &.open{

        width: auto;
        text-align: left;

        &::before{
            display: none;
        }

        article{
            display: block;
        }

        .important__open{
            display: none;
        }
        .important__close{
            display: block;
        }
    }

    h1,h2,h3,h4,h5{
        margin: 0;
        padding: 0;
    }

    a{
        display: block;
        text-align: center;
        color: var(--color-beige);
        background-color: var(--color-blue);
        padding: 0.5rem 1rem;
        border-radius: 1rem 0;
        margin-bottom: 0.5rem;
        transition: all 0.2s ease-in-out;

        &:last-child{
            margin-bottom: 0;
        }

        &:hover{
            background-color: var(--color-beige);
            color: var(--color-blue);
        }
    }

    p{
        margin: 0;
        padding: 0 0 1rem 0;
        font-size: 1rem;
        text-align: left;

        &:last-child{
            padding-bottom: 0;
        }
    }


    &:hover{
        /* background-color: var(--color-blue); */
        /* color: var(--color-white); */
        &:after{
            /* background-color: var(--color-red); */
        }
    }

    @media screen and (max-width: 768px){
        /* display: none; */
        /* position: relative; */
        right: 1rem;
        bottom: 1rem;
        top:auto !important;
        /* width: 100%; */
        margin: 0;
    }
}

.shadow{
    box-shadow: 10px 10px 0px rgba(0,0,0,0.025);
}


.wp-element-button{
    background-color: var(--color-red);

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

/* Custom buttons */
.link-stiil-1{
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);

    a{
        display: block;
        text-decoration: none;
        border: 3px solid var(--color-red);
        border-radius: var(--gap2x);
        padding: var(--gap) var(--gap2x);
        font-weight: bold;
        color: var(--color-red);
        transition: all 0.2s ease-in-out;

        &:hover{
            color: var(--color-white);
            background-color: var(--color-red);
        }
    }
}
.link-stiil-2{
    a{
        text-decoration: none;
        color: var(--color-red);
        font-weight: bold;

        &::before{
            margin-right: 0.5rem;
            content: '→';
        }
    }
}

.wp-block-ahf-lingi-nupp {
  display: block;
  margin: 0.5em 0;
}