/* ============================================================
   OJS — Таблиця стилів журналу Professional Art Education
   Кольорова схема:
     Основний акцент : #6f14d0
     Темний фон (nav) : #120f15
     Hover / активний : #34036a
     Футер            : #16062e (у стилі journalshnpu.com)
     Текст за замовч. : rgba(0,0,0,0.87)
   ============================================================ */


/* ── ЗАГАЛЬНЕ ─────────────────────────────────────────────── */

body {
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu",
                 "Cantarell", "Helvetica Neue", sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
}

button,
input {
    font-family: inherit;
    font-size: inherit;
}

a {
    color: #000;
}

a:hover {
    color: #6f14d0;
}


/* ── ВЕРХНІЙ БАР ──────────────────────────────────────────── */

.pkp_structure_head {
    background-color: #ffffff;
    background-image: url(/pae/foto/header.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 3px solid #6f14d0;
}

/* Назва журналу */
.pkp_site_name .is_text {
    font-family: "Noto Sans", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu",
                 "Cantarell", "Helvetica Neue", sans-serif;
    display: inline-block;
    position: relative;
    font-size: 36px;
    font-weight: 700;
    line-height: 30px;
    color: #fff;
    text-decoration: none;
    margin-left: 30px;
    margin-bottom: 5px;
}


/* ── НАВІГАЦІЙНЕ МЕНЮ (верхній бар) ──────────────────────── */

.pkp_site_nav_menu,
.pkp_navigation_primary_row {
    background-color: #120f15;
    padding: 0;
    list-style: none;
}

.pkp_site_nav_menu .pkp_nav_list {
    padding-left: 0;
}

.pkp_navigation_primary {
    max-width: 100%;
}

.pkp_navigation_primary > li > a {
    color: #fff;
    border-bottom: 0;
    padding: 10px 0;
}

.pkp_navigation_primary > li:first-child a {
    margin-left: 0;
}

.pkp_navigation_primary > li:last-child a {
    margin-right: 1em;
}

/* Підменю */
.pkp_nav_list ul {
    border-radius: 0;
    color: #000;
}

.pkp_nav_list li:hover {
    background: #34036a;
}

.pkp_nav_list a {
    padding-right: 10px;
    text-decoration: none;
}

.pkp_nav_list ul a:hover {
    background: #34036a;
    color: #fff;
}

@media (min-width: 992px) {
    .pkp_nav_list ul a {
        display: block;
        padding-left: 15px;
        border-left: 0;
        color: #000;
    }
}

/* Кнопка-гамбургер (мобільна) */
.pkp_site_nav_toggle > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 19px;
    border-bottom: 3px solid #fff;
    text-indent: -9999px;
    overflow: hidden;
}

.pkp_site_nav_toggle > span:before,
.pkp_site_nav_toggle > span:after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    border-bottom: 0 solid #fff;
}


/* ── БЛОК РЕЄСТРАЦІЇ / ВХОДУ ──────────────────────────────── */

.pkp_navigation_user > li > a,
.pkp_navigation_user > li.in_focus > a,
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
    color: #ffffff;
    background: #120f15;
    width: 125px;
    text-align: center;
    box-sizing: border-box;
}

.pkp_navigation_user {
    text-align: right;
    font-size: 15px;
    padding-right: 20px;
}

.pkp_navigation_user a {
    padding: 7px 0;
    line-height: 15px;
}


/* ── ПОШУК ────────────────────────────────────────────────── */

.pkp_search_desktop .search_prompt:hover {
    outline: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.pkp_search_desktop.is_open .search_prompt {
    color: #000;
}


/* ── ОСНОВНА ЗОНА (main) ──────────────────────────────────── */

.pkp_structure_main:before,
.pkp_structure_main:after {
    background: #fff;
}

/* Анонси на головній */
.pkp_page_index .cmp_announcements {
    border-top: 0 solid #fff;
    border-bottom: 0 solid #fff;
}

.pkp_page_index .cmp_announcements > .obj_announcement_summary:before,
.pkp_page_index .cmp_announcements .more:before {
    border-left: 0 solid #fff;
}

/* Посилання «читати далі» */
.pkp_page_index .current_issue .read_more,
.obj_announcement_summary .read_more {
    color: #000;
}

.pkp_page_index:hover .current_issue:hover .read_more:hover,
.obj_announcement_summary:hover .read_more:hover {
    color: #6f14d0;
}


/* ── БІЧНА ПАНЕЛЬ ─────────────────────────────────────────── */

.pkp_structure_sidebar {
    max-width: 250px;
}

.pkp_block {
    padding: 15px;
    font-size: 14px;
    line-height: 20px;
}

.pkp_block .content ul li {
    line-height: 20px;
    padding: 0;
}


/* ── АКОРДЕОН-МЕНЮ (бічна панель) ────────────────────────── */

ul.menu,
ul.menu ul {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    max-width: 15em;
}

ul.menu a {
    display: block;
    text-decoration: none;
    text-align: left;
    font-size: 15px;
}

ul.menu li a,
ul.menu ul.menu li a {
    padding: 0.5em;
    color: #fff;
    background: #120f15;
}

ul.menu li a:hover,
ul.menu ul.menu li a:hover {
    background: #34036a;
}

/* Підпункти */
ul.menu li ul li a,
ul.menu ul.menu li ul li a {
    background: #fff;
    color: #120f15;
    padding-left: 15px;
}

ul.menu li ul li a:hover,
ul.menu ul.menu li ul li a:hover {
    background: #fff;
    border-left: 6px solid #34036a;
    padding-left: 12px;
}

ul.menu ul.menu {
    border-left: 5px solid rgba(0, 0, 0, 0);
}

/* Активний пункт */
ul.menu a.active,
ul.menu ul.menu li a.active {
    color: #fff;
    background: #34036a;
    text-decoration: none;
}

/* Текст всередині акордеону */
ul.menu .acitem p {
    margin: 3px 0;
    line-height: 1.35;
    font-size: 14px;
}

ul.menu .acitem a {
    color: #00008b;
    text-decoration: none;
}

ul.menu .acitem a:hover {
    text-decoration: underline;
}

/* Панель всередині меню */
div.panel {
    border: 1px solid #000;
    padding: 5px;
    margin-top: 1px;
}

ul.menu div.panel a,
ul.menu div.panel li a:hover {
    display: inline;
    color: #666;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    font-weight: bold;
}

ul.menu div.panel a:hover {
    color: #000;
    text-decoration: underline;
}


/* ── PDF / ГАЛЕРЕЯ ────────────────────────────────────────── */

.cmp_button_wire,
.obj_galley_link {
    display: inline-block;
    padding: 0 1em;
    background: #120f15;
    border: 0 solid #fff;
    border-radius: 0;
    font-size: 12px;
    line-height: 25px;
    color: #fff;
    text-decoration: none;
}

.cmp_button_wire:hover,
.obj_galley_link:hover {
    background: #34036a;
}


/* ── НИЖНІЙ БАР (футер, у стилі journalshnpu.com) ─────────── */

.pkp_structure_footer_wrapper {
    /* Тло у стилі journalshnpu.com: темно-фіолетовий резервний
       колір + фонове зображення. Щоб фон був ІДЕНТИЧНИМ,
       завантажте footer_bg.png з journalshnpu.com у /pae/foto/
       і замініть futer.png на footer_bg.png у рядку нижче. */
    background: #16062e url(/pae/foto/futer.png) no-repeat center center;
    background-size: cover;
}

/* Flex — на самому контейнері футера, бо TinyMCE
   вирізає зовнішній div-обгортку (row) при збереженні */
.pkp_footer_content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Герб і текстові колонки починаються з одного рівня */
    align-items: flex-start;
    padding: 30px 30px 10px;
}

.pkp_footer_content,
.pkp_footer_content a {
    color: #ffffff;
    text-align: left;
    text-decoration: none;
}

.pkp_footer_content a:hover {
    color: #d9b8ff;
    text-decoration: underline;
}

/* Порожні абзаци, які інколи додає редактор між колонками */
.pkp_footer_content > p:empty {
    display: none;
}

.pkp_footer_content_col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pkp_footer_content_col {
    flex: 1 1 220px;
    padding-left: 10px;
    font-size: 14px;
    line-height: 20px;
}

@media (max-width: 640px) {
    .pkp_footer_content_col {
        flex: 1 1 100%;
    }
}

/* Заголовки колонок футера */
.pkp_footer_content_col h4,
.pkp_footer_content h4 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pkp_footer_content_col ul li:not(:last-child) {
    margin-bottom: 5px;
}

.pkp_footer_content_number {
    margin: 0;
}

/* Логотип університету у футері */
.pkp_footer_content_hnpu {
    margin: -12px auto 0;
    max-width: 160px;
    /* Верх герба — на рівні заголовків колонок */
    align-self: flex-start;
}

.pkp_footer_content_hnpu img {
    max-width: 160px;
    height: auto;
}

/* Колонка ліцензії CC BY 4.0 */
.pkp_footer_license_col p {
    margin: 0;
}

.pkp_footer_license_col img {
    max-width: 110px;
    height: auto;
    margin-bottom: 8px;
}

/* Фірмовий блок OJS/PKP теми — схований:
   емблема тепер п'ятою колонкою у вмісті футера */
.pkp_brand_footer {
    display: none;
}

/* П'ята колонка — емблема OJS/PKP */
.pkp_footer_ojs_col {
    flex: 0 0 auto;
    align-self: flex-end;
}

.pkp_footer_ojs_col a {
    display: inline-block;
    max-width: 70px;
}

.pkp_footer_ojs_col img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Логотип OJS/PKP — зображення з темним текстом.
       Фільтр перефарбовує його у світлий помаранчевий,
       щоб було видно на фіолетовому футері.
       Варіант «чисто білий»: filter: brightness(0) invert(1); */
    filter: brightness(0) invert(70%) sepia(65%) saturate(1200%)
            hue-rotate(357deg) brightness(105%);
}


/* ── РІЗНЕ ────────────────────────────────────────────────── */

/* Скидання зайвих відступів у списках OJS */
.pkp_unstyled_list, .cmp_article_list, .cmp_form .tagit,
.ui-autocomplete, .cmp_breadcrumbs ol, .cmp_announcements,
.pkp_site_nav_menu ul, .pkp_page_index .journals ul,
.page_catalog_category .subcategories ul,
.page_issue_archive .issues_archive,
.page_register .context_optin .contexts,
.obj_article_details .authors,
.obj_article_details .galleys_links,
.obj_article_details .supplementary_galleys_links,
.obj_article_summary .galleys_links,
.obj_issue_toc .articles,
.obj_issue_toc .galleys_links,
.pkp_block .content ul {
    margin-right: 0;
}

/* Кнопки поряд */
.inline {
    display: inline-block;
    margin-right: 5px;
}

/* Відступ між блоками випуску */
.obj_issue_toc .galleys {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.obj_issue_toc .sections {
    margin-top: -20px !important;
    padding-top: 0 !important;
}


/* ── ПЕРЕМИКАЧ МОВ (прапори з підписами) ─────────────────── */

.block_language .content ul {
    display: flex;
    gap: 15px;
    padding: 0;
    list-style: none;
}

.block_language .content ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.3;
    color: #000;
    text-align: center;
}

.block_language .content ul li a:hover {
    color: #6f14d0;
}

/* Сам прапор */
.block_language .content ul li a:before {
    content: "";
    width: 36px;
    height: 24px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    background-size: cover;
    background-position: center;
}

.block_language .content ul li.locale_en a:before {
    background-image: url("/public/flags/flag_en.png");
}

.block_language .content ul li.locale_uk a:before {
    background-image: url("/public/flags/flag_ua.png");
}

/* «українська» → «Українська» */
.block_language .content ul li.locale_uk a {
    text-transform: capitalize;
}


/* ============================================================
   МОБІЛЬНІ ПРАВКИ (перенесено з journalshnpu.com)

   ПРИНЦИП: розкладку шапки на мобільних тема Default робить
   САМА — гамбургер, логотип і назву вона розставляє коректно.
   Тут лише кольори та поведінка підсвічування меню.
   ============================================================ */

@media (max-width: 992px) {

  /* Бічна панель падає вниз і розтягується на всю ширину */
  .pkp_structure_sidebar {
    width: 100%;
    max-width: 100%;
    padding: 15px;
  }

  .pkp_block {
    margin-bottom: 20px;
  }

  /* --- Мобільне меню --- */

  /* Відкрите мобільне меню: темний фон, білі пункти.
     padding повертаємо, бо базове правило вгорі його обнуляє,
     а тема на мобільних дає меню внутрішній відступ */
  .pkp_site_nav_menu,
  .pkp_navigation_primary_row {
    background-color: #120f15;
  }

  .pkp_site_nav_menu {
    padding: .714rem;
  }

  .pkp_site_nav_menu a,
  .pkp_nav_list a,
  .pkp_nav_list ul a {
    color: #fff;
  }

  /* Підсвічується лише конкретне посилання, якого торкнулися,
     а НЕ вся група разом із вкладеним підменю */
  .pkp_nav_list li:hover,
  .pkp_nav_list li:focus-within {
    background: transparent;
  }

  .pkp_nav_list a:hover,
  .pkp_nav_list a:focus,
  .pkp_nav_list a:active {
    background: #34036a;
    color: #fff;
  }

  /* Зона дотику пунктів меню */
  .pkp_navigation_primary_row .pkp_nav_list a {
    padding: 12px 16px;
    font-size: 16px;
    min-height: 44px;
  }

  .pkp_navigation_primary_row .pkp_nav_list li ul {
    width: 100%;
    position: static;
  }
}


/* ── КАСТОМНІ БЛОКИ ТА ОГОЛОШЕННЯ ─────────────────────────── */

#customblock-vse img {
    width: 150px !important;
    height: 60px !important;
    object-fit: contain;
}

.obj_announcement_full img,
.obj_announcement_full .description img,
.page_announcement img,
.obj_announcement_summary img,
.cmp_announcements img {
    float: right !important;
    width: 230px !important;
    max-width: 230px !important;
    height: auto !important;
    margin: 0 0 15px 25px !important;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}