/* ==========================================================
   Custom CSS для OJS — анимации кнопок
   Журнал: Educational Challenges
   ========================================================== */


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

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

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


/* ==========================================================
   SIDEBAR CARDS
   ========================================================== */

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

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

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

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


/* ==========================================================
   SUBMISSION FORM BUTTON
   ========================================================== */

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

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

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

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


/* ==========================================================
   MANUSCRIPT TEMPLATE BUTTON
   ========================================================== */

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

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


/* ==========================================================
   PROFILE BUTTONS
   ========================================================== */

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

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


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

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(37, 99, 235, 0);
    }
}


/* ==========================================================
   =========================================================
   EDUCATIONAL CHALLENGES
   HEADER
   Desktop + Mobile
   =========================================================
   ========================================================== */


/* ==========================================================
   1. HEADER — DESKTOP / BASE
   ========================================================== */

.pkp_structure_head {
    position: relative !important;

    background:
        /* мягкое световое пятно справа */
        radial-gradient(
            ellipse 55% 90% at 92% 20%,
            rgba(82, 169, 195, 0.32) 0%,
            rgba(82, 169, 195, 0.12) 38%,
            transparent 72%
        ),

        /* светлая волна слева */
        radial-gradient(
            ellipse 70% 120% at 8% 105%,
            rgba(255, 255, 255, 0.48) 0%,
            rgba(255, 255, 255, 0.18) 42%,
            transparent 72%
        ),

        /* тонкая диагональная геометрия */
        linear-gradient(
            125deg,
            transparent 0%,
            rgba(255,255,255,0.18) 38%,
            transparent 38.5%,
            transparent 62%,
            rgba(255,255,255,0.10) 62.5%,
            transparent 63%
        ),

        /* базовый цвет */
        linear-gradient(
            115deg,
            #e8f5f9 0%,
            #cfe9f0 38%,
            #91cddd 72%,
            #63b4ca 100%
        ) !important;

    overflow: visible !important;
}


/* ==========================================================
   ТОНКИЕ АБСТРАКТНЫЕ ВОЛНЫ
   ========================================================== */

.pkp_structure_head::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            ellipse 85% 55% at 115% 15%,
            transparent 0%,
            transparent 56%,
            rgba(255,255,255,0.18) 56.5%,
            rgba(255,255,255,0.18) 57%,
            transparent 57.5%
        ),

        radial-gradient(
            ellipse 90% 60% at 112% 18%,
            transparent 0%,
            transparent 62%,
            rgba(255,255,255,0.12) 62.5%,
            rgba(255,255,255,0.12) 63%,
            transparent 63.5%
        ),

        radial-gradient(
            ellipse 95% 65% at 110% 21%,
            transparent 0%,
            transparent 68%,
            rgba(8,47,80,0.06) 68.5%,
            rgba(8,47,80,0.06) 69%,
            transparent 69.5%
        ) !important;

    z-index: 0 !important;
}


/* Вторая очень мягкая геометрическая линия */

.pkp_structure_head::after {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            150deg,
            transparent 0%,
            transparent 52%,
            rgba(255,255,255,0.07) 52.3%,
            rgba(255,255,255,0.07) 52.7%,
            transparent 53%
        ) !important;

    z-index: 0 !important;
}


/* Контент шапки поверх абстракции */

.pkp_structure_head > * {
    position: relative !important;
    z-index: 1 !important;
}


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

/*
   Никаких дополнительных изменений размеров,
   padding, логотипа, меню или Search.

   Только другой, более спокойный вариант
   той же абстракции для маленького экрана.
*/

@media (max-width: 991px) {

    .pkp_structure_head {
        background:
            radial-gradient(
                ellipse 90% 65% at 100% 15%,
                rgba(82,169,195,0.28) 0%,
                rgba(82,169,195,0.10) 42%,
                transparent 72%
            ),

            radial-gradient(
                ellipse 100% 70% at 0% 100%,
                rgba(255,255,255,0.42) 0%,
                rgba(255,255,255,0.12) 48%,
                transparent 75%
            ),

            linear-gradient(
                120deg,
                #e8f5f9 0%,
                #cfe9f0 42%,
                #63b4ca 100%
            ) !important;

        overflow: visible !important;
    }

}

/* ==========================================================
   2. SITE LOGO
   ========================================================== */

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


/* ==========================================================
   3. USER MENU
   ========================================================== */

.pkp_navigation_user_wrapper {
    background: transparent !important;
}

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


/* ==========================================================
   4. MAIN NAVIGATION
   ========================================================== */

.pkp_navigation_primary_row {
    background: #0b426d !important;

    border-top: 1px solid rgba(255,255,255,0.12) !important;
    border-bottom: 1px solid rgba(0,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;
}


/* Hover */

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

    background: rgba(255,255,255,0.10) !important;
}


/* ==========================================================
   5. DROPDOWN
   ========================================================== */

.pkp_navigation_primary .dropdown-menu {
    background: #ffffff !important;

    border: 1px solid #dce6eb !important;

    box-shadow:
        0 8px 24px rgba(0,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;
}


/* ==========================================================
   6. SEARCH
   ========================================================== */

.pkp_search {
    background: transparent !important;

    padding: 0 !important;
}


/* Кнопка / ссылка Search */

.pkp_search a,
.pkp_search button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    min-height: 52px !important;

    padding: 0 18px !important;

    color: #ffffff !important;

    background: transparent !important;

    border: 0 !important;

    font-weight: 600 !important;

    text-decoration: none !important;
}


/* Сам текст SEARCH */

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


/* Hover */

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

    background: rgba(255,255,255,0.10) !important;

    text-decoration: none !important;
}


/* ==========================================================
   ЛУПА — БЕЛАЯ
   ========================================================== */

/* Font Awesome */

.pkp_search .fa,
.pkp_search .fa-search,
.pkp_search .icon-search {
    color: #ffffff !important;

    font-size: 15px !important;

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    vertical-align: middle !important;
}


/* Если иконка создаётся через ::before */

.pkp_search .fa::before,
.pkp_search .fa-search::before,
.pkp_search .icon-search::before {
    color: #ffffff !important;
}


/* SVG-лупа */

.pkp_search svg {
    color: #ffffff !important;

    fill: #ffffff !important;
    stroke: #ffffff !important;

    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    vertical-align: middle !important;
}


/* ==========================================================
   7. MOBILE NAVIGATION BUTTON
   ========================================================== */

.pkp_site_nav_toggle {
    position: relative !important;

    z-index: 100 !important;

    color: #ffffff !important;

    background: #0b426d !important;

    border: 0 !important;

    box-shadow: none !important;
}

.pkp_site_nav_toggle:hover,
.pkp_site_nav_toggle:focus {
    color: #ffffff !important;

    background: #07527f !important;
}


/* ==========================================================
   8. MOBILE
   ==========================================================
   
   ВАЖНО:
   Никаких отдельных изменений размеров,
   padding, высоты логотипа, меню и Search.

   На мобильном сохраняется только градиент.
   Все остальные базовые правила выше продолжают
   работать без мобильных переопределений.
   ========================================================== */

@media (max-width: 991px) {

    .pkp_structure_head {
        background: linear-gradient(
            135deg,
            #e8f5f9 0%,
            #cde8f0 45%,
            #63b4ca 100%
        ) !important;

        overflow: visible !important;
    }

}


/* ==========================================================
   КОНЕЦ CSS
   ========================================================== */