@font-face {
    font-family: "fnt";
    src: url("../fonts/Pelak-Black.woff2") format("woff2");
    font-weight: 900;
    text-rendering:optimizeLegibility;
    font-display: block;
}

@font-face {
    font-family: "fnt";
    src: url("../fonts/Pelak-Bold.woff2") format("woff2");
    font-weight: 700;
    text-rendering:optimizeLegibility;
    font-display: block;
}

@font-face {
    font-family: "fnt";
    src: url("../fonts/Pelak-light.woff2") format("woff2");
    font-weight: 300;
    text-rendering:optimizeLegibility;
    font-display: block;
}

@font-face {
    font-family: "fnt";
    src: url("../fonts/Pelak-Regular.woff2") format("woff2");
    font-weight: 400;
    text-rendering:optimizeLegibility;
    font-display: block;
}

:root {
    --font: 'fnt';
}

html[lang=fa-IR]
{
    & > body {

        & > header
        {
            direction: rtl !important;


            & > a {
                & h1 {
                    transform: skewX(4deg) scaleY(0.88);
                    font-display: block;
                    font-style: italic;
                    font-family: "fnt-eng" !important;
                }
            }


            & div
            {

                & [role="alert"]
                {
                    border-radius: 0 0 7px 0;
                    direction: ltr;
                }

                & nav
                {
                    border-radius: 0 0 0 7px;
                    direction: ltr;
                }
            }

            & > nav
            {
                margin-top: 20px;
            }
        }

        & > nav, & header > nav {
            & :is(ol, ul)
            {
                direction: rtl;
                & li {
                    & :is( a, a:visited )
                    {
                        font-size: 15px;
                        font-weight: 600;
                    }
                }

                & > li > a:not(:only-child):after
                {
                    top: 0px;
                    left: -4px;
                    right: unset !important;
                }
            }
        }

        & > nav {
            & > :is(ol, ul)
            {
                grid-column-start: -1;
                direction: rtl;

                & :is( a, a:visited )
                {
                    font-weight: 400 !important;
                    font-size: 14px !important;
                    color: #fff !important;
                }
            }
        }
    }
}






main.home
{

    & > article.banner
    {
        & > header
        {
            & h1
            {
                font-size: clamp(20px, 2.5vw, 36px);
                max-width: clamp(100%, calc(50px - 2vw), 30%);
                padding-right: 67% !important;
                text-align: right;
                direction: rtl;
                font-weight: 900;
                color: #03275b;
                text-shadow: 2px 2px 0 #fff, 3px 3px 0px #66abff, -1px -1px 0px #ffffff;
                line-height: 2;
                top: -20px;
                white-space: nowrap !important;

                @media (width <= 655px)
                {
                    &{
                        padding-right: 65% !important;
                        top: -20px  !important;
                    }
                }

                @media (width <= 555px)
                {
                    &{
                        padding-right: 58% !important;
                        top: -20px  !important;
                        font-size: 18px;
                    }
                }

                @media (width <= 455px)
                {
                    &{
                        padding-right: 57% !important;
                        top: -66px !important;
                        font-size: 16px;
                    }
                }

            }
        }
    }

    & article.recent
    {
        & h1{
            max-width: 100% !important;
            font-size: clamp(14px, 1.85vw, 17px) !important;
            line-height: 1.5 !important;
            direction: rtl;
            font-weight: 600 !important;
        }

        & time
        {
            font-size: clamp(13px, 1.55vw, 13px) !important;
            line-height: 1.5;
            direction: rtl;
            font-weight: 400;
            float: right !important;
        }

        & p
        {
            font-size: clamp(13px, 1.55vw, 15px);
            line-height: 1.7 !important;
            direction: rtl;
            font-weight: 400;
        }

        & a.readmore
        {
            font-size: clamp(13px, 1.55vw, 14px);
            line-height: 1.7 !important;
            direction: rtl;
            font-weight: 400;
            justify-self: left !important;
        }
    }

    & section.special
    {
        & article.recent
        {
            & h1{
                font-size: clamp(14px, 1.85vw, 20px) !important;
            }

            & time
            {
                font-size: clamp(13px, 1.55vw, 14px);
                line-height: 1.5;
                direction: rtl;
                font-weight: 400;
            }

            & p
            {
                font-size: clamp(13px, 1.55vw, 15px);
                line-height: 1.7 !important;
                direction: rtl;
                font-weight: 400;
            }

            & a.readmore
            {
                font-size: clamp(13px, 1.55vw, 14px);
                line-height: 1.7 !important;
                direction: rtl;
                font-weight: 400;
                justify-self: left !important;
            }
        }
    }





    & section.articles
    {
        & > h2
        {
            direction: rtl;
            background-image: linear-gradient(#0068ff, #0068ff);
            background-repeat: no-repeat;
            background-size: 40% 4px;
            background-position: right 100%;
            padding: 10px 0;
        }

        & article
        {

            & > header
            {
                & > a
                {
                    color: #0056d2;
                    transition: all 0.3s;

                    &:hover
                    {
                        color: #000;
                    }
                }

                & h1
                {
                    font-size: 18px !important;
                    padding: 10px 0;
                }

                & time
                {
                    float: right;
                    color: #9e7c32;
                    margin-top: 10px;
                }                
            }


            & p
            {
                color: #000;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -moz-line-clamp: 3;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.5 !important;
                font-size: clamp(13px, 1.5vw, 16px) !important;
                margin-top: 0;
            }

            & a.readmore
            {
                font-size: clamp(13px, 1.55vw, 13px);
                color: #0067ff;
                margin: 10px !important;
            }
        }
    }

    & section.videos
    {

        & > h2
        {
            direction: rtl;
            background-image: linear-gradient(#0068ff, #0068ff);
            background-repeat: no-repeat;
            background-size: 40% 4px;
            background-position: right 100% !important;
            padding: 10px 0;
        }

        & > article
        {


            & > header
            {


                & > h4
                {
                    direction: rtl;
                }

                & > time
                {

                }
            }

            & > p
            {
                direction: rtl;

                & > a
                {
                    text-align: left;
                    font-size: clamp(11px, 1.2vw, 13px);
                }
            }
        }
    }


    & section.last
    {

        & > h2
        {

            direction: rtl;
        }

        & > article
        {
            text-align: center;

            & > header
            {
                margin: 40px 0px 20px 0;

                & > h2
                {
                    direction: rtl;
                }
            }

            & > p
            {

                & > a
                {
                    font-size: clamp(11px, 1.2vw, 13px);
                }
            }

            & > blockquote 
            {
                margin: 20px 0px 40px 0;
            }
        }
    }
}


body > footer
{

    & > div.footer-column
    {

        & > h3
        {
            text-align: right;
        }

        & > ul
        {
            text-align: right;
            direction: rtl;
        }
    }
}


main:not(.home)
{
    & > article
    {
        grid: auto / 40% 60% !important;

        & > header
        {
            margin-bottom: 0;

            & > *
            {
                direction: rtl;
                text-align: right; 
            }

            & > time
            {
                font-weight: 400;
                font-family: "fnt-eng";
            }

            & h1
            {
                direction: rtl;
                text-align: right;
                font-weight: 800;
            }         
        }

        & > section
        {
            box-shadow: 100vw 0 0 100vw var(--bg) !important;
            order: 2 !important;
            font-size: clamp(15px, .94vw, 1vw) !important;
            direction: rtl !important;
            text-align: right !important;
            font-weight: 400 !important;
            line-height: 2 !important;
        }

        & > aside
        {
        }


    }
}


aside
{
    order: 1 !important;

    & > section
    {
        & > dl
        {
            

            & > dt
            {
                font-weight: 700;
                direction: rtl;
                background-position: right 100% !important;


                & > a
                {
                    font-size: 18px !important;
                }
            }

            & > dd
            {
                direction: rtl;
                text-align: right;
                line-height: 1.7;

                & > a
                {
                    font-size: clamp(13px, 0.91vw, 1vw) !important

                    &:before
                    {

                    }
                }
            }
        }
    }
}