/* ===================================
   TAXONOMY / LANGUAGES
=================================== */

.re-taxonomy,
.re-languages{
    min-height:100vh;
    padding:110px 0 80px;
}

.re-language-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.re-language-card{
    min-height:90px;

    padding:15px;

    display:flex;
    align-items:center;
    gap:13px;

    border:1px solid var(--border);
    border-radius:9px;

    background:#0c0c0e;

    transition:
        border-color .2s,
        transform .2s,
        background .2s;
}

.re-language-card:hover{
    transform:translateY(-2px);

    border-color:rgba(232,255,71,.5);

    background:#111113;
}

.re-language-card.disabled{
    opacity:.35;
    pointer-events:none;
}

.re-language-letter{
    width:47px;
    height:47px;

    flex:0 0 47px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:7px;

    background:var(--primary);
    color:#000;

    font-size:13px;
    font-weight:950;
}

.re-language-card strong{
    display:block;
    font-size:12px;
}

.re-language-card span{
    display:block;

    margin-top:4px;

    color:#666;
    font-size:9px;
}

.re-language-card i{
    margin-left:auto;

    color:#555;
    font-size:22px;
    font-style:normal;
}


/* ===================================
   MOBILE DRAWER
=================================== */

.re-mobile-menu,
.re-mobile-overlay{
    display:none;
}

body.re-menu-open{
    overflow:hidden;
}


/* ===================================
   TABLET
=================================== */

@media(max-width:1023px){

    .re-header-inner{
        padding:0 14px;
    }

    .re-mobile-overlay{
        position:fixed;
        z-index:19998;
        inset:0;

        display:block;

        background:rgba(0,0,0,.7);
        backdrop-filter:blur(5px);

        opacity:0;
        visibility:hidden;

        transition:.25s;
    }

    .re-mobile-overlay.active{
        opacity:1;
        visibility:visible;
    }

    .re-mobile-menu{
        position:fixed;
        z-index:19999;

        top:0;
        bottom:0;
        left:0;

        width:min(330px,86vw);

        padding:18px;

        display:flex;
        flex-direction:column;

        border-right:1px solid var(--border);

        background:#09090b;

        transform:translateX(-105%);

        transition:transform .3s ease;
    }

    .re-mobile-menu.active{
        transform:translateX(0);
    }

    .re-mobile-menu-head{
        padding-bottom:18px;

        display:flex;
        align-items:center;
        justify-content:space-between;

        border-bottom:1px solid var(--border);
    }

    .re-mobile-menu-head > a{
        font-size:22px;
        font-weight:950;

        letter-spacing:-1px;
    }

    .re-mobile-menu-head button{
        width:37px;
        height:37px;

        border:1px solid var(--border);
        border-radius:50%;

        background:#111;
        color:#aaa;

        font-size:20px;

        cursor:pointer;
    }

    .re-mobile-nav{
        padding:18px 0;

        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .re-mobile-nav a{
        min-height:48px;

        padding:0 12px;

        display:flex;
        align-items:center;
        gap:12px;

        border-radius:7px;

        color:#aaa;

        font-size:11px;
        font-weight:700;
    }

    .re-mobile-nav a span{
        width:25px;

        color:#777;

        text-align:center;
        font-size:15px;
    }

    .re-mobile-nav a:hover{
        background:#141416;
        color:#fff;
    }

    .re-mobile-nav a:hover span{
        color:var(--primary);
    }

    .re-mobile-menu-bottom{
        margin-top:auto;
        padding-top:15px;

        display:flex;
        flex-direction:column;
        gap:7px;

        border-top:1px solid var(--border);
    }

    .re-mobile-menu-bottom a{
        padding:11px;

        border-radius:6px;

        background:#111113;

        color:#aaa;

        font-size:10px;

        text-align:center;
    }

    .re-mobile-menu-bottom
    .re-mobile-login{
        background:var(--primary);
        color:#000;
        font-weight:900;
    }

    .re-language-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


/* ===================================
   MOBILE
=================================== */

@media(max-width:640px){

    .re-header{
        height:58px;
    }

    .re-header-inner{
        gap:7px;
        padding:0 10px;
    }

    .re-menu-btn{
        width:36px;
        height:36px;
        padding:8px;
    }

    .re-logo{
        max-width:130px;

        overflow:hidden;

        font-size:19px;

        white-space:nowrap;
        text-overflow:ellipsis;
    }

    .re-search-trigger{
        width:36px;
        height:36px;

        margin-left:auto;
        padding:0;

        justify-content:center;

        border-radius:50%;
    }

    .re-signin{
        min-height:34px;

        padding:0 11px;

        display:flex;
        align-items:center;

        font-size:9px;
    }

    .re-taxonomy,
    .re-languages{
        padding:85px 0 60px;
    }

    .re-language-grid{
        grid-template-columns:1fr;
        gap:7px;
    }

    .re-language-card{
        min-height:72px;
        padding:10px;
    }

    .re-language-letter{
        width:42px;
        height:42px;
        flex-basis:42px;
    }
}


/* ===================================
   SMALL PHONE
=================================== */

@media(max-width:390px){

    .re-logo{
        max-width:105px;
        font-size:17px;
    }

    .re-signin{
        padding:0 8px;
    }

    .re-anime-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:15px 7px;
    }
}