/* MASRAB brand layer on the OJS Default theme (base colour #ffffff) */
@import url("https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;600;700&display=swap");

:root {
  --masrab-navy: #002060;
  --masrab-teal: #005880;
  --masrab-gold: #D09018;
}

/* Arabic interface (/journal/ar): Naskh text face, Latin words fall back to Noto Sans */
html[lang|="ar"] body,
html[lang|="ar"] h1, html[lang|="ar"] h2, html[lang|="ar"] h3, html[lang|="ar"] h4,
html[lang|="ar"] button, html[lang|="ar"] input, html[lang|="ar"] select, html[lang|="ar"] textarea {
  font-family: "Noto Naskh Arabic", "Noto Sans", "Geeza Pro", "Arabic Typesetting", serif;
}
html[lang|="ar"] .pkp_structure_main {
  line-height: 1.9;
}

/* Header: white with a navy bar under the menu, gold accent line */
.pkp_structure_head {
  background: #fff;
  border-bottom: 0;
}
.pkp_site_name .is_img img {
  width: auto;
  max-width: 100%;
  max-height: 40px;
}
@media (min-width: 992px) {
  .pkp_site_name .is_img img {
    max-height: 110px;
  }
}
.pkp_navigation_primary_row {
  background: var(--masrab-navy);
}
/* Desktop: stretch the bar edge to edge with a pseudo-element behind the row
   (the row sits inside the centred header container; dropdowns must not be clipped) */
@media (min-width: 992px) {
  .pkp_structure_head {
    overflow-x: clip;
  }
  .pkp_navigation_primary_row {
    position: relative;
    z-index: 100; /* own layer above page content, so dropdowns open on top */
  }
  .pkp_navigation_primary_row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: var(--masrab-navy);
    border-bottom: 3px solid var(--masrab-gold);
    z-index: -1;
  }
}
.pkp_navigation_primary > li > a,
.pkp_navigation_search_wrapper a {
  color: #fff;
  font-weight: 600;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus {
  color: #fff;
  border-color: var(--masrab-gold);
}
.pkp_navigation_user > li > a,
.pkp_navigation_user > li > a:hover {
  color: var(--masrab-navy);
}

/* Mobile menu button: navy lines on the white header
   (the theme's default lines are white, made for a dark header) */
.pkp_site_nav_toggle {
  box-shadow: none;
}
.pkp_site_nav_toggle > span {
  border-bottom-color: var(--masrab-navy);
}
.pkp_site_nav_toggle > span:before,
.pkp_site_nav_toggle > span:after {
  background: var(--masrab-navy);
}

/* Mobile menu panel: keep links readable on the navy bar */
@media (max-width: 991px) {
  .pkp_site_nav_menu {
    background: var(--masrab-navy);
  }
  .pkp_site_nav_menu a,
  .pkp_site_nav_menu .pkp_navigation_user > li > a {
    color: #fff;
  }
}

/* Homepage feature image (full MASRAB / JTA mark) */
.page_index_journal .homepage_image img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 28px auto 8px;
}

/* Content */
.pkp_structure_main a,
.pkp_structure_sidebar a {
  color: var(--masrab-teal);
}
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.page h1 {
  color: var(--masrab-navy);
}
.pkp_structure_main h3 {
  border-bottom: 2px solid var(--masrab-gold);
  padding-bottom: 0.25em;
}
.cmp_button,
.pkp_button,
.cmp_manuscript_button,
.block_make_submission a {
  background: var(--masrab-navy);
  border-color: var(--masrab-navy);
  color: #fff;
}
.cmp_button:hover,
.pkp_button:hover,
.cmp_manuscript_button:hover,
.block_make_submission a:hover {
  background: var(--masrab-teal);
  border-color: var(--masrab-teal);
  color: #fff;
}

/* Footer: hide the "Platform & workflow by OJS/PKP" badge */
.pkp_brand_footer {
  display: none;
}

/* Footer */
.pkp_structure_footer_wrapper {
  background: #f4f6fa;
  border-top: 4px solid var(--masrab-navy);
}