/*
Theme Name: NGMGames
Text Domain: ngmgames.com
Version: 1.0.0
Tags: NGM, Games
Tested up to: 5.9
Stable tag: 1.0.0
Description: NGM Games landind theme for offer site
Author: KSI
*/

/*Версия 2503171210*/
:root {
    --ngm_font-size: 16;
    --ngm_scale: calc( 1rem * 1  / var(--ngm_font-size) );
    --ngm_anim-time: 0.2s;

    --ngm_color-0: #000000;
    --ngm_color-1: #FFFFFF;
    --ngm_color-2: #21004A;
    --ngm_color-3: #FFD700;
    --ngm_color-4: #4C0E61;
    --ngm_color-5: #200E48;
    --ngm_color-6: #78CFEE;
    --ngm_color-7: #a0f7ff;
    --ngm_color-8: #FF00E5;
    --ngm_color-9: #FF00E550;
    --ngm_color-10: #FFA600;
    --ngm_color-11: #FFE896;
    --ngm_color-12: #00FFFF;
    --ngm_color-13: #00FFFF50;
    --ngm_color-14: #FF51E8;
    --ngm_color-15: #FFCC00;
    --ngm_color-16: #FFD900;
    --ngm_color-17: #FFAE00;
    --ngm_color-18: #00BBFF;
    --ngm_color-19: #2A1739;
    --ngm_color-20: #410087;
    --ngm_color-21: #FF00C850;
    --ngm_color-22: #FF4FBE;
    --ngm_color-23: #3D3840;
    --ngm_color-24: #D0D0D0;
    --ngm_color-25: #3E3E3E80;
    --ngm_color-26: rgba(0,0,0,0.5);

    font-family: 'IBM Plex Sans';
    font-size: calc( 1px * var(--ngm_font-size));
    scroll-behavior: smooth;
}
:root * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    user-select: none;
    outline: none;
    font-family: inherit;
}
:root body{
    font-family: inherit;
    color: var(--ngm_color-1);
    background-image: linear-gradient(270deg, var(--ngm_color-2) 0%, var(--ngm_color-0) 10%, var(--ngm_color-0) 90%, var(--ngm_color-2) 100%);
    scroll-behavior: smooth;

}
:root a {
    color: var(--ngm_color-1);
    transition: color var(--ngm_anim-time);
    pointer-events: auto;
}
:root a:hover,
:root a:active {
    color: var(--ngm_color-3);
}

:root h1,
:root h2,
:root h3 { 
    font-style: normal;
    font-size: calc( 30 * var(--ngm_scale) );
    font-weight: 300;
    line-height: 1;
    
    hyphens: auto;
    word-break: break-word;
    display: block;
    position: relative;
    
}
:root h1:not([data-reflect])::after,
:root h2:not([data-reflect])::after,
:root h3:not([data-reflect])::after  {
    content: '';
    display: block;
    clear: both;
    pointer-events: none;
    height: calc(56 * var(--ngm_scale) );
    min-width: calc(400 * var(--ngm_scale) );

    background-size: 100% 100%;
    margin-top: calc( 10 * var(--ngm_scale) );
}
:root h1.has-text-align-right:not([data-reflect])::after,
:root h2.has-text-align-right:not([data-reflect])::after,
:root h3.has-text-align-right:not([data-reflect])::after {
    margin: 0 0 0 auto;
}
:root h1[data-reflect]::after,
:root h2[data-reflect]::after,
:root h3[data-reflect]::after  {
    content: attr(data-reflect);
    transform: scaleY(-1);
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black);
    mask-image: linear-gradient(to bottom, transparent 50%, black);
    filter: blur( calc( 3 * var(--ngm_scale) ) );
    max-height: 1em;
    overflow: hidden;
}

:root h1,
:root h2,
:root h3 {
    color: var(--ngm_color-12);
    filter: drop-shadow(0 0 calc( 30 * var(--ngm_scale) ) var(--ngm_color-12));
}
:root h1:not([data-reflect])::after,
:root h2:not([data-reflect])::after,
:root h3:not([data-reflect])::after {
    background-image: radial-gradient(ellipse, var(--ngm_color-13) 0%, transparent 80%);
}

:root h5 {
    color: var(--ngm_color-3);
    font-size: 1.2rem;
    font-size: calc( 24 * var(--ngm_scale) );
    font-weight: 400;
    margin-bottom: calc( 14 * var(--ngm_scale) );
}
@media (min-width: 720px){ 
    :root h1,
    :root h2,
    :root h3    { 
        font-size: calc( 48 * var(--ngm_scale) );
        font-weight: 400;
        width: fit-content;
    }
    :root h5 {
        font-size: calc( 28 * var(--ngm_scale) );
    }
}

/*Кнопки*/
:root .ngm_btn {
    background-color: transparent;
    border: none;
    pointer-events: auto;
}

@property --ngm_bs1_p {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 50%;
}

:root .ngm_btn.ngm_btn-style-1,
:root .ngm_btn.ngm_btn-style-2  {
    --ngm_bs1_p: 50%;

    background: linear-gradient(90deg, var(--ngm_color-16) 0%, var(--ngm_color-17) var(--ngm_bs1_p));
    text-decoration: none;
    font-size: calc( 18 * var(--ngm_scale) );
    font-weight: 700;
    text-align: center;
    min-width: calc( 200 * var(--ngm_scale) );
    min-height: calc( 54 * var(--ngm_scale) );
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    padding: calc( 15 * var(--ngm_scale) ) calc( 22 * var(--ngm_scale) );
    border-radius: calc( 10 * var(--ngm_scale) );
    color: var(--ngm_color-0);
    transition: --ngm_bs1_p var(--ngm_anim-time), color var(--ngm_anim-time), border var(--ngm_anim-time), background-color var(--ngm_anim-time);
    cursor: pointer;
}
:root .ngm_btn.ngm_btn-style-2{
    background: linear-gradient(90deg, var(--ngm_color-12) 0%, var(--ngm_color-18) var(--ngm_bs1_p));
}
:root .ngm_btn.ngm_btn-style-1:hover,
:root .ngm_btn.ngm_btn-style-1:active,
:root .ngm_btn.ngm_btn-style-2:hover,
:root .ngm_btn.ngm_btn-style-2:active {
    --ngm_bs1_p: 100%;
}

/*Горизонтальный ограничитель блока*/
:root .ngm_conteiner {
    display: block;
    max-width: calc( 1440 * var(--ngm_scale) );
    padding: 0 calc( 10 * var(--ngm_scale) );
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
/*Свечение блока*/
:root .ngm_glow {
    overflow: hidden;
    border-radius: calc( 10 * var(--ngm_scale) );
    box-shadow: 0 0 calc( 18 * var(--ngm_scale) ) 0 var(--ngm_color-10);
    border: calc( 2 * var(--ngm_scale) ) solid var(--ngm_color-11);
}

/*Видео*/
:root .wp-block-video {
    position: relative;
    background-color: var(--ngm_color-0);
    overflow: hidden;
}
:root video {
    background-color: var(--ngm_color-0);
    display: block;
}
:root .wp-block-video:not(.nmg_video--play) {
    cursor: pointer;
}
:root .wp-block-video:not(.nmg_video--play)::after {
    display: block;
    content: '';
    width: calc( 70 * var(--ngm_scale) );
    height: calc( 70 * var(--ngm_scale) );
    margin: auto;
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
    background-position: center center;
    background-image: url(./assets/images/icon_play_white.svg);
}
@media (min-width: 720px){ 
    :root .wp-block-video:not(.nmg_video--play)::after {
        width: calc( 120 * var(--ngm_scale) );
        height: calc( 120 * var(--ngm_scale) );
    }
}

/*Звезды*/
:root .mgn_stars {
    display: flex;
    gap: calc( 2 * var(--ngm_scale) );
    pointer-events: none;
}
:root .mgn_stars .mgn_stars-star {
    width: calc( 44 * var(--ngm_scale) );
    height: calc( 44 * var(--ngm_scale) );
    background-color: transparent;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
:root .mgn_stars .mgn_stars-star--full {
    background-image: url('./assets/images/icon_star_yellow.svg');
}
:root .mgn_stars .mgn_stars-star--half {
    background-image: url('./assets/images/icon_star_mix.svg');
}
:root .mgn_stars .mgn_stars-star--empty {
    background-image: url('./assets/images/icon_star_gray.svg');
}

/*Поля для ввода*/
:root .mgn_field {
    min-height: calc( 52 * var(--ngm_scale) );
    background-color: var(--ngm_color-23);
    border-radius: calc( 10 * var(--ngm_scale) );
    width: 100%;
    border: none;
    color: var(--ngm_color-1);
    padding: 10px;
    font-size: calc( 16 * var(--ngm_scale) );
}

/*Единичные посты*/
:root .ngm_wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
:root .ngm_wrap.single .mgn_content p,
:root .ngm_wrap.page:not(.home) .mgn_content p
{
    margin-bottom: 1em;
    line-height: 1.6;
    font-weight: 600;
}
:root .ngm_wrap.single .mgn_content ul, 
:root .ngm_wrap.page:not(.home) .mgn_content ul {
    padding-left: calc( 40 * var(--ngm_scale) );
    overflow: hidden;
    margin-bottom: 1em;
}
:root .ngm_wrap.single .mgn_content li, 
:root .ngm_wrap.page:not(.home) .mgn_content li {
    margin-bottom: 0.5em;
}
:root .ngm_wrap.single .mgn_content a, 
:root .ngm_wrap.page:not(.home) .mgn_content a {
    color: var(--ngm_color-3);
    font-weight: 600;
    line-height: 1.5;
}
:root .ngm_wrap.single .mgn_content .mgn_page-image,
:root .ngm_wrap.page:not(.home) .mgn_content .mgn_page-image {
    float: left;
    margin: 0 calc( 20 * var(--ngm_scale) ) calc( 20 * var(--ngm_scale) ) 0;
    width: 30%;
    height: auto;
    min-width: calc( 300 * var(--ngm_scale) );
    border-radius: calc( 10 * var(--ngm_scale) );
    overflow: hidden;
}

/*Тень на гривую*/
:root .ngm_dropshadow {
    filter: drop-shadow(calc( 2 * var(--ngm_scale) ) calc( 2 * var(--ngm_scale) ) calc( 2 * var(--ngm_scale) ) var(--ngm_color-0));
}