/* ==========================================================
   Custom CSS для OJS — Educational Challenges
   ========================================================== */


/* ==========================================================
   АНИМАЦИИ КНОПОК
   ========================================================== */

.ojs-btn-animate {
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.ojs-btn-animate:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    filter: brightness(1.05);
}

.sidebar-card {
    transition: transform .2s ease, box-shadow .2s ease;
}

.sidebar-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(26, 45, 69, .18),
                0 2px 4px rgba(26, 45, 69, .12);
}

.sidebar-card .chevron {
    display: inline-block;
    transition: transform .2s ease;
}

.sidebar-card:hover .chevron {
    transform: translateX(3px);
}

.submission-form-btn {
    transition: transform .25s ease, box-shadow .25s ease;
}

.submission-form-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

.submission-form-btn .arrow {
    display: inline-block;
    transition: transform .25s ease;
}

.submission-form-btn:hover .arrow {
    transform: translateX(5px);
}

.manuscript-template-btn {
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.manuscript-template-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}

.profile-btn {
    display: inline-block;
    transition: transform .2s ease, opacity .2s ease;
}

.profile-btn:hover {
    transform: scale(1.15);
    opacity: .85;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(11, 66, 109, .35);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(11, 66, 109, 0);
    }
}

.pulse {
    animation: pulse 2s infinite;
}


/* ==========================================================
   ФОН ШАПКИ — РАБОТАЕТ НА DESKTOP И MOBILE
   Больше никаких mobile-правил ниже нет.
   ========================================================== */

.pkp_structure_head {
    position: relative !important;

    background:
        radial-gradient(
            ellipse 55% 90% at 92% 20%,
            rgba(82, 169, 195, .32) 0%,
            rgba(82, 169, 195, .12) 38%,
            transparent 72%
        ),
        radial-gradient(
            ellipse 70% 120% at 8% 105%,
            rgba(255, 255, 255, .48) 0%,
            rgba(255, 255, 255, .18) 42%,
            transparent 72%
        ),
        radial-gradient(
            ellipse 85% 55% at 115% 15%,
            transparent 0%,
            transparent 56%,
            rgba(255, 255, 255, .18) 56.5%,
            rgba(255, 255, 255, .18) 57%,
            transparent 57.5%
        ),
        radial-gradient(
            ellipse 90% 60% at 112% 18%,
            transparent 0%,
            transparent 62%,
            rgba(255, 255, 255, .12) 62.5%,
            rgba(255, 255, 255, .12) 63%,
            transparent 63.5%
        ),
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255, 255, 255, .18) 38%,
            transparent 38.5%,
            transparent 62%,
            rgba(255, 255, 255, .10) 62.5%,
            transparent 63%
        ),
        linear-gradient(
            115deg,
            #e8f5f9 0%,
            #cfe9f0 38%,
            #91cddd 72%,
            #63b4ca 100%
        ) !important;
}


/* ==========================================================
   DESKTOP ONLY
   Ничего из этого не применяется при ширине до 991px.
   ========================================================== */

@media (min-width: 992px) {

    /* Логотип */

    .pkp_site_name_wrapper {
        background: transparent !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .pkp_site_name {
        background: transparent !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .pkp_site_name a {
        background: transparent !important;
    }

    .pkp_site_name .is_img img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-height: 105px !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }


    /* Верхнее пользовательское меню */

    .pkp_navigation_user_wrapper,
    .pkp_navigation_user {
        background: transparent !important;
    }

    .pkp_navigation_user > li > a,
    .pkp_navigation_user > li > a:visited {
        color: #082f50 !important;
        font-weight: 600 !important;
    }

    .pkp_navigation_user > li > a:hover,
    .pkp_navigation_user > li > a:focus {
        color: #006f8e !important;
    }


    /* Синяя полоса и основное меню */

    .pkp_navigation_primary_row {
        background: #0b426d !important;
        border-top: 1px solid rgba(255, 255, 255, .12) !important;
        border-bottom: 1px solid rgba(0, 0, 0, .15) !important;
    }

    .pkp_navigation_primary_wrapper {
        background: #0b426d !important;
    }

    .pkp_navigation_primary {
        background: transparent !important;
    }

    .pkp_navigation_primary > li > a,
    .pkp_navigation_primary > li > a:visited {
        color: #fff !important;
        font-weight: 600 !important;
        text-decoration: none !important;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus {
        color: #fff !important;
        background: rgba(255, 255, 255, .10) !important;
    }


    /* Выпадающие меню */

    .pkp_navigation_primary .dropdown-menu {
        background: #fff !important;
        border: 1px solid #dce6eb !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
    }

    .pkp_navigation_primary .dropdown-menu a,
    .pkp_navigation_primary .dropdown-menu a:visited {
        color: #173d5d !important;
        background: #fff !important;
    }

    .pkp_navigation_primary .dropdown-menu a:hover,
    .pkp_navigation_primary .dropdown-menu a:focus {
        color: #007f9e !important;
        background: #eef7fa !important;
    }


    /* Search — только цвет и внешний вид, без перестройки меню */

    .pkp_search {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .pkp_search a,
    .pkp_search button {
        color: #fff !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    .pkp_search a *,
    .pkp_search button * {
        color: #fff !important;
    }

    .pkp_search .fa,
    .pkp_search .fas,
    .pkp_search .glyphicon,
    .pkp_search i,
    .pkp_search svg {
        color: #fff !important;
        fill: #fff !important;
        stroke: #fff !important;
        margin-right: 8px !important;
        vertical-align: middle !important;
    }

    .pkp_search a:hover,
    .pkp_search a:focus,
    .pkp_search button:hover,
    .pkp_search button:focus {
        color: #fff !important;
        background: rgba(255, 255, 255, .10) !important;
        text-decoration: none !important;
    }
}