/* ==========================================================
   EDUCATIONAL CHALLENGES — CUSTOM CSS
   ========================================================== */


/* ==========================================================
   UNIVERSAL BUTTON ANIMATION
   ========================================================== */

.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 CARDS
   ========================================================== */

.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 BUTTON
   ========================================================== */

.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 BUTTON
   ========================================================== */

.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 BUTTONS
   ========================================================== */

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

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


/* ==========================================================
   PULSE ANIMATION
   ========================================================== */

@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;
}


/* ==========================================================
   HEADER BACKGROUND
   Работает и на desktop, и на mobile.
   ========================================================== */

.pkp_structure_head {
    position: relative !important;

    background: linear-gradient(
        115deg,
        #edf9fc 0%,
        #d7eff5 34%,
        #9bd8e6 70%,
        #61b9d0 100%
    ) !important;
}


/* ==========================================================
   DESKTOP ONLY
   Всё ниже применяется только от 992px.
   ========================================================== */

@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: #ffffff !important;

        font-weight: 600 !important;

        text-decoration: none !important;
    }

    .pkp_navigation_primary > li > a:hover,
    .pkp_navigation_primary > li > a:focus {
        color: #ffffff !important;

        background: rgba(255, 255, 255, .10) !important;
    }


    /* ------------------------------------------------------
       ВЫПАДАЮЩИЕ МЕНЮ
       ------------------------------------------------------ */

    .pkp_navigation_primary .dropdown-menu {
        background: #ffffff !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: #ffffff !important;
    }

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

        background: #eef7fa !important;
    }


    /* ------------------------------------------------------
       SEARCH
       ------------------------------------------------------ */

    .pkp_search {
        position: relative !important;
        top: 6px !important;

        background: transparent !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .pkp_search a,
    .pkp_search a:visited,
    .pkp_search button {
        color: #ffffff !important;

        background: transparent !important;

        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;

        font-weight: 600 !important;

        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* Принудительно белый текст SEARCH */

    .pkp_search,
    .pkp_search a,
    .pkp_search a:visited,
    .pkp_search a span,
    .pkp_search a label,
    .pkp_search a strong,
    .pkp_search button,
    .pkp_search button span,
    .pkp_search button label,
    .pkp_search button strong {
        color: #ffffff !important;
    }

    /* Белая иконка лупы */

    .pkp_search .fa,
    .pkp_search .fas,
    .pkp_search .glyphicon,
    .pkp_search i,
    .pkp_search svg,
    .pkp_search a::before,
    .pkp_search button::before {
        color: #ffffff !important;

        fill: #ffffff !important;
        stroke: #ffffff !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: #ffffff !important;

        background: rgba(255, 255, 255, .10) !important;

        border: 0 !important;
        box-shadow: none !important;

        text-decoration: none !important;
    }

    .pkp_search a:hover *,
    .pkp_search a:focus *,
    .pkp_search button:hover *,
    .pkp_search button:focus * {
        color: #ffffff !important;
    }
}