/* ============================================================
   BiomedTree — Clinical accent theme for OJS
   Paste/upload in OJS admin:
     Settings > Website > Appearance > Additional CSS
   Targets the PKP "Default" theme. Loads AFTER the theme, so
   !important is used to win over the theme's compiled LESS.
   Mirrors the site's clinical.css tokens (navy, Inter, square
   corners, hairline borders). Accent-level changes only — the
   OJS page skeleton stays OJS.
   ============================================================ */

/* Optional: match the site's Inter typeface. Remove if the OJS
   host blocks external fonts (CSP/offline) — the fallback is fine. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ct-navy:#1e4d8a;
  --ct-navy-d:#183f73;
  --ct-wash:#e7eef7;
  --ct-line:#dde2e8;
  --ct-ink:#182028;
  --ct-muted:#5a6472;
}

/* ---- base type ---- */
body,.pkp_structure_page{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif !important;
  color:var(--ct-ink);
}
h1,h2,h3,h4,h5,h6{
  font-family:Inter,system-ui,-apple-system,sans-serif !important;
  letter-spacing:-.01em;
}

/* ---- links / accent ---- */
a{color:var(--ct-navy);}
a:hover,a:focus{color:var(--ct-navy-d);}
.pkp_structure_content a{color:var(--ct-navy);}

/* ---- header: white bar with a navy underline, like the site navbar ---- */
.pkp_structure_head{
  background:#fff !important;
  border-bottom:3px solid var(--ct-navy) !important;
  box-shadow:none !important;
}
.pkp_site_name_wrapper .pkp_site_name,
.pkp_site_name a{color:var(--ct-ink) !important;}

/* ---- primary menu bar background -> navy accent ----
   The theme paints nav.pkp_site_nav_menu black (its "Header background colour"
   option). Repaint it with the brand navy accent so the header carries the
   accent color. */
nav.pkp_site_nav_menu,
.pkp_site_nav_menu{
  background:var(--ct-navy) !important;
}

/* ---- primary navigation ----
   The primary menu bar (nav.pkp_site_nav_menu, About/Current/Archives) sits on
   the navy bar above. Keep these links WHITE for contrast. Only top-level items
   (> li > a) are whitened, so the "About" dropdown submenu — which opens on a
   white panel — keeps dark text. */
.pkp_navigation_primary > li > a{
  color:#fff !important;
  font-weight:600;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a{
  color:#c5d5ea !important;   /* light navy tint, readable on the dark bar */
}

/* ---- user navigation (Login/Register) sits on the WHITE header area — keep
   it dark so it stays visible ---- */
.pkp_navigation_user a{color:var(--ct-ink) !important;font-weight:600;}
.pkp_navigation_user a:hover,
.pkp_navigation_user a:focus{color:var(--ct-navy) !important;}

/* ---- buttons: map every OJS button variant to clinical navy ---- */
.pkp_button,
a.pkp_button,
.cmp_button,
button.submitFormButton,
input.submitFormButton,
button[type="submit"],
input[type="submit"],
input[type="button"]{
  background:var(--ct-navy) !important;
  border:1px solid var(--ct-navy) !important;
  color:#fff !important;
  border-radius:0 !important;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:none !important;
}
.pkp_button:hover,
a.pkp_button:hover,
.cmp_button:hover,
button.submitFormButton:hover,
input.submitFormButton:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  background:var(--ct-navy-d) !important;
  border-color:var(--ct-navy-d) !important;
  color:#fff !important;
}

/* the prominent "Make a Submission" call-to-action block */
.pkp_block.pkp_block_make_submission a,
.cmp_notification.callout{
  background:var(--ct-navy) !important;
  border-color:var(--ct-navy) !important;
  color:#fff !important;
  border-radius:0 !important;
}

/* ---- sidebar reading-tools blocks: square, hairline, navy titles ---- */
.pkp_block{
  border:1px solid var(--ct-line) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.pkp_block .title,
.pkp_block h2,
.pkp_block h3{color:var(--ct-navy) !important;}

/* ---- forms ---- */
input[type="text"],input[type="email"],input[type="password"],
input[type="search"],input[type="url"],input[type="number"],
select,textarea,.pkp_form input,.pkp_form select,.pkp_form textarea{
  border-radius:0 !important;
  border-color:var(--ct-line) !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--ct-navy) !important;
  box-shadow:0 0 0 .18rem rgba(30,77,138,.18) !important;
  outline:none;
}

/* ---- tables / cards: square corners, hairlines ---- */
.pkp_table,table.pkp_table,.obj_article_summary,.obj_issue_toc .cover{
  border-radius:0 !important;
}

/* ---- section / page headings underline accent ---- */
.pkp_structure_content h1,
.obj_article_details h1.page_title,
.cmp_page_title{
  color:var(--ct-ink) !important;
}

/* ---- footer: dark navy, matching the site footer ---- */
.pkp_structure_footer_wrapper,
.pkp_structure_footer{
  background:#0f2744 !important;
  color:#c5d5ea !important;
}
.pkp_structure_footer a{color:#c5d5ea !important;}
.pkp_structure_footer a:hover{color:#fff !important;}

/* ---- accessible focus ring (site-wide) ---- */
a:focus-visible,.pkp_button:focus-visible,
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--ct-navy) !important;
  outline-offset:2px;
}