/* === Full-Width Banner Without Overlap === */

/* Push header down below OJS top bar */
.pkp_page_header,
header.pkp_header,
.pkp_header {
  margin-top: 1500px !important;   /* adjust until the banner clears the top bar */
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
}

/* === Banner Container === */
.pkp_site_name,
.pkp_site_name a {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 5 !important;
}

/* === Banner Image === */
.pkp_site_name a img,
.pkp_site_name img {
  display: block !important;
  width: 100% !important;          /* always stretch full width */
  height: auto !important;         /* keep natural aspect ratio */
  max-height: 180px !important;    /* prevent it from being too tall on big screens */
  object-fit: contain !important;  /* contain keeps it proportional without cropping */
  margin: 0 auto !important;       /* center horizontally */
  position: relative !important;
  /* z-index: 6 !important; */
}

/* === Navigation Below Banner === */
.pkp_navigation_primary {
  position: relative !important;
  margin-top: 20px !important;     /* space below banner */
  /* z-index: 5 !important;           below banner */
}