/* ==========================================================================
   Jurnal Pendidikan Profesi Guru — "Scholarly Violet" re-skin
   Written to match the journal's ACTUAL active theme (verified against its
   compiled styleSheet.css), not the generic OJS default theme.

   Scope, deliberately: this file only changes COLOR, TYPE, and decorative
   properties (borders, shadows, radius). It never touches position, float,
   width, or display on any layout-controlling selector (.pkp_structure_*,
   .pkp_site_name, .pkp_navigation_*_wrapper, etc.) — those are left exactly
   as the theme defines them so nothing shifts or overlaps.

   Paste into: Website Settings > Appearance > CSS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --jp-violet-950: #241a3d;
  --jp-violet-900: #33245a;
  --jp-violet-800: #432f79;
  --jp-violet-700: #563b96;
  --jp-violet-600: #6d4bb8;
  --jp-violet-500: #8863d1;
  --jp-violet-100: #ece6fb;
  --jp-violet-50:  #f6f3fd;

  --jp-bronze-600: #b6884a;
  --jp-bronze-500: #cba064;

  --jp-ink:      #23203a;
  --jp-ink-soft: #6b6480;
  --jp-line:     #e4ddf3;

  --jp-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --jp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Base type & links
   ========================================================================== */

body {
  font-family: var(--jp-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jp-font-display);
}

a { color: var(--jp-violet-700); }
a:hover, a:focus { color: var(--jp-bronze-600); }

/* ==========================================================================
   Header band (logo strip) + mobile nav panel
   .pkp_site_name_wrapper is the theme's own colored strip behind the logo —
   recoloring it (not .pkp_structure_head) is what actually changes the band
   ========================================================================== */

.pkp_structure_head {
  background-color: var(--jp-violet-950);
}

.pkp_site_name_wrapper {
  background: linear-gradient(135deg, var(--jp-violet-950) 0%, var(--jp-violet-800) 100%);
}

.pkp_site_nav_menu {
  background: var(--jp-violet-950);
}
.pkp_site_nav_menu a {
  color: rgba(255, 255, 255, 0.82);
}
.pkp_site_nav_menu a:hover,
.pkp_site_nav_menu a:focus {
  color: #ffffff;
}

/* ==========================================================================
   Primary nav row (this theme puts it on its own white bar below the logo)
   ========================================================================== */

@media (min-width: 992px) {
  .pkp_navigation_primary_row {
    background: var(--jp-violet-50);
  }
  #navigationPrimary a {
    color: var(--jp-ink-soft);
  }
  #navigationPrimary a:hover,
  #navigationPrimary a:focus {
    color: var(--jp-violet-700);
  }
  /* Dropdown submenus — theme already hides/reveals these correctly via
     left:-9999px / :hover{left:0}; we only recolor, never touch position */
  #navigationPrimary ul {
    background: var(--jp-violet-800);
  }
  #navigationPrimary ul a {
    color: #ffffff;
  }
  #navigationPrimary ul a:hover,
  #navigationPrimary ul a:focus {
    background: var(--jp-violet-700);
    border-color: transparent;
  }
  .pkp_navigation_user_wrapper a {
    color: var(--jp-ink-soft);
  }
  .pkp_navigation_user_wrapper ul a:hover,
  .pkp_navigation_user_wrapper ul a:focus {
    border-color: var(--jp-violet-700);
  }
}

#navigationPrimary > li > a:hover,
#navigationPrimary > li > a:focus {
  border-color: var(--jp-violet-700);
}
#navigationPrimary [aria-expanded="true"]:before {
  border-bottom-color: var(--jp-violet-700);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.pkp_button_primary {
  background-color: var(--jp-violet-700);
  background-image: linear-gradient(var(--jp-violet-600), var(--jp-violet-700));
  border-color: var(--jp-violet-700);
}
.pkp_button_primary:hover,
.pkp_button_primary:focus {
  background-color: var(--jp-violet-600);
  background-image: linear-gradient(var(--jp-violet-500), var(--jp-violet-700));
}
.pkp_button_primary:active {
  background-color: var(--jp-violet-800);
  background-image: linear-gradient(var(--jp-violet-700), var(--jp-violet-950));
}

.cmp_button,
.cmp_form .buttons button,
.pkp_search button[type="submit"],
.page_lost_password .buttons button,
.page_search .submit button,
.block_make_submission a,
.block_custom ul a {
  color: var(--jp-violet-700);
}

.cmp_button_wire {
  border-color: var(--jp-violet-700);
  color: var(--jp-violet-700);
}
.cmp_button_wire:hover,
.cmp_button_wire:focus {
  background: var(--jp-violet-700);
  color: #ffffff;
}

/* This theme styles galley/download links and CTA buttons as solid blocks */
.cmp_manuscript_button,
.block_make_submission a,
.block_custom ul a,
.obj_galley_link {
  background: var(--jp-violet-700);
  color: #ffffff;
}
.cmp_manuscript_button:hover,
.cmp_manuscript_button:focus,
.block_make_submission a:hover,
.block_make_submission a:focus,
.block_custom ul a:hover,
.block_custom ul a:focus,
.obj_galley_link:hover,
.obj_galley_link:focus {
  background: var(--jp-bronze-500);
  color: var(--jp-violet-950);
}
/* Restricted-access galley keeps its semantic red — left untouched */

/* ==========================================================================
   Section / block heading accents (the theme underlines these with a
   colored rule — we swap that accent color, keep the underline treatment)
   ========================================================================== */

.pkp_block .title,
.pkp_page_index .current_issue h2,
.obj_issue_toc > .galleys h2,
.obj_issue_toc .section h2,
.obj_article_details .main_entry .label {
  border-bottom-color: var(--jp-bronze-500);
  color: var(--jp-violet-900);
}

.cmp_announcements .date:before {
  color: var(--jp-bronze-600);
}

.cmp_pagination .prev:before,
.cmp_pagination .next:after {
  color: var(--jp-violet-700);
}

.block_browse .current a {
  border-left-color: var(--jp-bronze-500);
  color: var(--jp-violet-900);
}

/* ==========================================================================
   Search prompt in the white nav row
   ========================================================================== */

.pkp_head_wrapper .pkp_search .search_controls .search_prompt:hover,
.pkp_head_wrapper .pkp_search .search_controls .search_prompt:focus {
  color: var(--jp-violet-700);
}

/* ==========================================================================
   Reading view (HTML galley header bar)
   ========================================================================== */

.header_view {
  background: var(--jp-violet-800);
  color: #ffffff;
}
.header_view .title { color: #ffffff; }
.header_view .title:hover,
.header_view .title:focus { background: var(--jp-violet-700); }
.header_view .return { color: var(--jp-violet-800); }
.header_view .return:hover,
.header_view .return:focus,
.header_view .download:hover,
.header_view .download:focus {
  background: var(--jp-violet-700);
  color: #ffffff;
}

/* ==========================================================================
   Outer page shell + footer
   ========================================================================== */

.pkp_structure_page {
  box-shadow: 0 10px 40px rgba(36, 26, 61, 0.12);
}

.pkp_structure_footer_wrapper {
  background: var(--jp-violet-950);
  border-top: none;
  border-bottom: 4px solid var(--jp-bronze-500);
}
.pkp_structure_footer,
.pkp_footer_content {
  color: rgba(255, 255, 255, 0.75);
}
.pkp_structure_footer a {
  color: rgba(255, 255, 255, 0.9);
}
.pkp_structure_footer a:hover {
  color: var(--jp-bronze-500);
}
.pkp_brand_footer img {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

/* ==========================================================================
   Small helper links (help tooltips, "extras" toggles) for full coverage
   ========================================================================== */

.pkp_help_link { color: var(--jp-violet-700); }
.pkp_help_link:hover,
.pkp_help_link:focus { color: var(--jp-violet-600); }

.pkp_controllers_extrasOnDemand > a:hover,
.pkp_controllers_extrasOnDemand > a:focus,
.pkp_controllers_extrasOnDemand.active > a {
  background: var(--jp-violet-700);
  border-color: var(--jp-violet-700);
}