/* =============================================================
   OJS Journal Custom Stylesheet (journalStyleSheet.css)
 
   Upload via: Settings › Website › Appearance › Advanced › Journal Style Sheet (CSS)
   ============================================================= */

/* --- Color tokens (feel free to tweak) --- */
:root {
  --accent: #9bd6fe;         /* main brand */
  --accent-700: #06B4D1;     /* hover */
  --accent-800: #059FB8;     /* active */
  --accent-50:  #E6FBFF;     /* light tint for chips/badges */
  --accent-contrast: #003844;/* text on accent (dark to meet contrast) */
  --accent-focus: rgba(7, 212, 246, 0.35);
}

/* --- Links --- */
a,
a:visited {
  color: var(--accent) !important;
  text-decoration-color: var(--accent-700) !important;
}
a:hover,
a:focus {
  color: var(--accent-800) !important;
  text-decoration-color: var(--accent-800) !important;
}

/* --- Buttons (OJS uses several button classes) --- */
button,
input[type=submit],
input[type=button],
input[type=reset],
.pkp_button,
.cmp_button,
.pkp_button_primary,
.obj_galley_link,
.cmp_download_link {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}
button:hover,
input[type=submit]:hover,
input[type=button]:hover,
.pkp_button:hover,
.cmp_button:hover,
.pkp_button_primary:hover,
.obj_galley_link:hover,
.cmp_download_link:hover {
  background-color: var(--accent-700) !important;
  border-color: var(--accent-700) !important;
  color: var(--accent-contrast) !important;
}
button:active,
input[type=submit]:active,
.pkp_button:active,
.cmp_button:active,
.pkp_button_primary:active {
  background-color: var(--accent-800) !important;
  border-color: var(--accent-800) !important;
  color: var(--accent-contrast) !important;
}

/* --- Form focus states --- */
input[type=text],
input[type=email],
input[type=search],
input[type=url],
input[type=password],
textarea,
select {
  transition: box-shadow .15s ease, border-color .15s ease;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=search]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-focus) !important;
  outline: none !important;
}

/* --- Primary navigation highlights --- */
.pkp_navigation_primary ul li a:hover,
.pkp_navigation_primary ul li a:focus,
.pkp_navigation_primary ul li.current a,
.pkp_navigation_primary ul li.current > a {
  color: var(--accent-800) !important;
  border-bottom: 2px solid var(--accent) !important;
}

/* --- Breadcrumb / active states --- */
.pkp_breadcrumbs a:hover {
  color: var(--accent-800) !important;
}

/* --- Pagination --- */
.cmp_pagination .current,
.cmp_pagination a:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* --- Badges / labels --- */
.pkp_badge,
.cmp_notification {
  background-color: var(--accent-50) !important;
  color: var(--accent-contrast) !important;
  border-left: 4px solid var(--accent) !important;
}

/* --- Site title link hover --- */
.pkp_site_name a:hover,
.pkp_brand_footer a:hover {
  color: var(--accent-800) !important;
}

/* --- Footer links --- */
.pkp_brand_footer a,
.pkp_footer_content a {
  color: var(--accent) !important;
}
.pkp_brand_footer a:hover,
.pkp_footer_content a:hover {
  color: var(--accent-800) !important;
}

/* --- Tables (hover highlight) --- */
table tr:hover td {
  background-color: var(--accent-50) !important;
}

/* --- Article detail: download galleys (PDF, etc.) --- */
.obj_galley_link,
.cmp_download_link {
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* --- Accessibility: ensure underline on text links inside long content --- */
.obj_article_details .entry_details a {
  text-decoration: underline;
  text-decoration-thickness: .08em;
}

/* --- Optional: header accent bar --- */
/* Uncomment if you want a thin accent bar on top of the site
.pkp_head_wrapper::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-800));
}
*/

/* === Article cards background (Issue TOC, homepage lists, search lists) === */
.page_issue .obj_article_summary,
.obj_issue_toc .obj_article_summary,
.page_index_journal .obj_article_summary,
.cmp_article_list .obj_article_summary,
.pkp_listing .obj_article_summary,
.obj_article_summary {
  background-color: #a5d8f6!important;   /* your requested color */
  border: none !important;
  border-radius: 18px !important;
  padding: 18px 22px !important;
  box-shadow: 0 8px 0 rgba(0,0,0,.28), 0 10px 22px rgba(0,0,0,.16) !important; /* lifted look */
  color: var(--accent-contrast) !important; /* dark text for readability */
}

/* === Hilangkan garis abu-abu (pseudo-element) === */
.obj_article_summary::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}


/* Ensure title/authors/pages readable on colored card */
.obj_article_summary h2,
.obj_article_summary h3,
.obj_article_summary .title,
.obj_article_summary .authors,
.obj_article_summary .pages,
.obj_article_summary .pub_id,
.obj_article_summary .doi,
.obj_article_summary a {
  color: var(--accent-contrast) !important;
}
.obj_article_summary a:hover {
  color: #00252D !important;
  text-decoration-color: #00252D !important;
}

/* Make galley buttons (PDF, HTML, etc.) stand out on the colored card */
.obj_article_summary .galleys_links .obj_galley_link,
.obj_article_summary .galleys_links .cmp_button {
  background: #ffffff !important;
  color: #003844 !important;
  border: 1px solid #003844 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.12) !important;
}
.obj_article_summary .galleys_links .obj_galley_link:hover,
.obj_article_summary .galleys_links .cmp_button:hover {
  background: #F2FDFF !important;
  border-color: #00252D !important;
  color: #00252D !important;
}

/* Optional: subtle grey bar shadow under each card (imitates screenshot) */
.obj_article_summary::after {
  content: "";
  display: block;
  height: 8px;
  border-radius: 0 0 18px 18px;
  background: rgba(0,0,0,.25);
  filter: blur(.4px);
  transform: translateY(10px);
  margin: -6px 0 10px 0;
}

/* === Hover transitions for article cards === */
.obj_article_summary {
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
  will-change: background-color, box-shadow, transform;
}

/* Change background + lift slightly on hover */
.obj_article_summary:hover {
  background-color: #06B4D1 !important; /* a tad darker than #07D4F6 */
  box-shadow: 0 12px 0 rgba(0,0,0,.30), 0 16px 30px rgba(0,0,0,.2) !important;
  transform: translateY(-2px);
}

/* Keep text/links readable on hover */
.obj_article_summary:hover h2,
.obj_article_summary:hover h3,
.obj_article_summary:hover .title,
.obj_article_summary:hover .authors,
.obj_article_summary:hover .pages,
.obj_article_summary:hover a {
  color: var(--accent-contrast) !important;
  text-decoration-color: rgba(0,0,0,.35) !important;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .obj_article_summary { transition: none; }
  .obj_article_summary:hover { transform: none; }
}

/* =============================================================
   Full‑width header banner (make the journal logo fill the header)
   Works for OJS Default Theme 3.3/3.4
   ============================================================= */
.pkp_head_wrapper { 
  position: relative !important;
  display: block !important;           /* break row layout so banner can span */
  padding: 0 !important;
}

/* Let the site name (logo area) take the whole row width */
.pkp_site_name {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Make the uploaded logo stretch horizontally while keeping aspect ratio */
.pkp_site_name.is_img a { 
  display: block !important; 
}
.pkp_site_name.is_img img {
  width: 100% !important; 
  height: auto !important; 
  display: block !important;
}

/* Keep "Register / Login" visible at top-right on top of banner */
.pkp_navigation_user,
.pkp_navigation_user_wrapper {
  position: absolute !important;
  top: 10px; 
  right: 16px; 
  z-index: 5;
  background: transparent !important;
}
@media (max-width: 768px) {
  .pkp_navigation_user,
  .pkp_navigation_user_wrapper {
    position: static !important; 
    text-align: right; 
    padding: 6px 12px;
  }
}

/* Optional: remove header background color so image touches edges */
.pkp_structure_head, 
.pkp_header,
.pkp_page_header {
  background: none !important;
}

/* === Softer hover: fade card background to near-white === */
.obj_article_summary {
  transition: background-color .35s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
}

.page_issue .obj_article_summary:hover,
.pkp_listing .obj_article_summary:hover,
.cmp_article_list .obj_article_summary:hover,
.obj_article_summary:hover {
  background-color: #FFFFFF !important;  /* soft white */
  box-shadow: 0 10px 18px rgba(0,0,0,.12) !important;
  transform: translateY(-1px);
}

/* Darken text on white for readability */
.obj_article_summary:hover h2,
.obj_article_summary:hover h3,
.obj_article_summary:hover .title,
.obj_article_summary:hover .authors,
.obj_article_summary:hover .pages,
.obj_article_summary:hover,
.obj_article_summary:hover .pub_id,
.obj_article_summary:hover .doi {
  color: #1a1a1a !important;
}
.obj_article_summary:hover .pages { color: #666 !important; }

/* Links on white: use accent color */
.obj_article_summary:hover a {
  color: var(--accent-800) !important;
  text-decoration-color: var(--accent-800) !important;
}

/* Galley buttons on white: switch to accent buttons */
.obj_article_summary:hover .galleys_links .obj_galley_link,
.obj_article_summary:hover .galleys_links .cmp_button {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent) !important;
}
.obj_article_summary:hover .galleys_links .obj_galley_link:hover,
.obj_article_summary:hover .galleys_links .cmp_button:hover {
  background: var(--accent-700) !important;
  border-color: var(--accent-700) !important;
}

/* ===== Strong full‑bleed header image (break out of container) ===== */
/* Remove logo height cap that keeps it tiny */
.pkp_site_name.is_img img,
.pkp_site_name .is_img img,
.pkp_site_name .pkp_logo {
  max-height: none !important;
  height: auto !important;
}

/* Make the banner span the viewport width */
.pkp_site_name.is_img {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;  /* break out of centered container */
  margin-right: calc(50% - 50vw) !important;
}

/* Stretch the image to fill the banner row */
.pkp_site_name.is_img a { display: block !important; }
.pkp_site_name.is_img img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Keep user nav floating above the banner (right corner) */
.pkp_navigation_user,
.pkp_navigation_user_wrapper {
  position: absolute !important;
  top: 10px; right: 16px; z-index: 5;
  background: transparent !important;
}

/* Avoid overflow on small screens */
@media (max-width: 768px) {
  .pkp_site_name.is_img {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== Full-width containers for header (break default max-width) ===== */
.pkp_structure_head .pkp_container,
.pkp_page_header .pkp_container,
.pkp_head_wrapper,
.pkp_page_header,
.pkp_structure_head {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Remove any inner container constraint around site name */
.pkp_site_name_wrapper,
.pkp_site_name {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* =============================================================
   OJS Patch — Nav click = boxed highlight (#9BD6FE)
   Upload as Journal Style Sheet (put LAST). Safe for Default/Classic themes.
   ============================================================= */

:root{
  --nav-pill: #9BD6FE;
  --nav-pill-hover: rgba(155,214,254,.55);
  --nav-text: #003844;
}

/* Reset the old underline/border-bottom highlight */
.pkp_navigation_primary ul li a {
  display: inline-block !important;      /* so padding/border apply neatly */
  padding: 8px 12px !important;
  border-radius: 10px !important;
  line-height: 1.1 !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .06s ease;
}

/* Hover/Focus: soft tint */
.pkp_navigation_primary ul li a:hover,
.pkp_navigation_primary ul li a:focus {
  background-color: var(--nav-pill-hover) !important;
  color: var(--nav-text) !important;
  outline: none !important;
}

/* Click (active): solid box #9BD6FE */
.pkp_navigation_primary ul li a:active {
  background-color: var(--nav-pill) !important;
  border-color: var(--nav-pill) !important;
  color: var(--nav-text) !important;
  transform: translateY(1px);
}

/* Current page stays boxed */
.pkp_navigation_primary ul li.current > a,
.pkp_navigation_primary ul li a[aria-current="page"] {
  background-color: var(--nav-pill) !important;
  border-color: var(--nav-pill) !important;
  color: var(--nav-text) !important;
}

/* Dropdown items inside primary nav (if present) */
.pkp_navigation_primary .dropdown-menu a,
.pkp_navigation_primary .dropdown-menu .dropdown-item {
  border-radius: 8px !important;
  padding: 6px 10px !important;
  transition: background-color .18s ease, color .18s ease;
}
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu .dropdown-item:hover,
.pkp_navigation_primary .dropdown-menu a:focus,
.pkp_navigation_primary .dropdown-menu .dropdown-item:focus {
  background-color: var(--nav-pill-hover) !important;
  color: var(--nav-text) !important;
}
.pkp_navigation_primary .dropdown-menu a:active,
.pkp_navigation_primary .dropdown-menu .dropdown-item:active {
  background-color: var(--nav-pill) !important;
  color: var(--nav-text) !important;
}