/* Navbar white background, black text */
.main-header {
  background: #fff !important;
  color: #000 !important;
}
.main-menu__nav-link,
.main-menu__title a,
.main-header__admin .main-menu__nav-link {
  color: #000 !important;
}

/* Hover state was inheriting a dark bg from theme, keeping black text = invisible */
.main-menu__nav-link:hover,
.main-menu__nav-link:focus,
.main-header__admin .main-menu__nav-link:hover,
.main-header__admin .main-menu__nav-link:focus {
  background: #f0f0f0 !important;
  color: #000 !important;
}

/* Thinner nav bar — .main-header had a hardcoded min-height: 125px, that was the real cause */
.main-header {
  min-height: 64px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
/* Logo sat a few px lower on every page except index/about — theme wraps the title
   in <h1> only when requestedOp is 'index' (index + about both use that op),
   everywhere else it's a <div>. Same class, but theme's `margin: auto 1em 0 0`
   auto-resolves differently between the two tags in the wrapping flex row,
   so pin margin-top instead of leaving it to auto. */
.main-menu__title {
  padding: 0 !important;
  margin-top: 0 !important;
}
.main-menu__title a {
  padding: 2px 0 !important;
}
.main-menu__title img {
  max-height: 44px !important;
  width: auto !important;
}
.main-menu__nav-link {
  padding: 8px 8px !important;
}
.main-header__admin .main-menu__nav-link {
  padding: 4px 8px !important;
}

/* Fix Edit button misalignment next to page titles like /about */
.main__title {
  position: relative;
  top: 10px;
}

/* Register/Login/profile block — mobile/tablet. The theme pins this nav
   position:absolute; top:0; right:0 at ALL breakpoints, so on phones it sat on top
   of the hamburger button. It now renders a second time inside the hamburger panel
   (see the LOCAL OVERRIDE in pragma templates/frontend/components/header.tpl), so
   hide the pinned copy here and let the in-menu copy carry it. Exactly one of the
   two is visible at any width, which also keeps duplicate links out of the a11y tree. */
@media (max-width: 991.98px) {
  .main-header {
    align-items: stretch !important;
  }
  .main-header__admin {
    display: none !important;
  }
  .navbar.main-menu {
    order: 1 !important;
  }
  .main-menu__user-mobile {
    width: 100%;
    margin-top: 0.5rem;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
  }
}

/* Desktop keeps the pinned top-right copy, so the in-menu duplicate stays out. */
@media (min-width: 992px) {
  .main-menu__user-mobile {
    display: none !important;
  }
}

/* Register/Login/profile block — desktop: pin top-right like the theme intends,
   just with a z-index so it doesn't fight the nav for clicks. `top: 0` pinned it
   flush against the header's top edge instead of centered — the main nav items
   sit at the header's vertical center (y=32 in a 64px header) via normal flex
   alignment, but this element was absolutely positioned at a fixed offset instead
   of using the same centering, so it visibly sat ~18px higher than the rest of
   the navbar. Center it the same way.

   `position: relative` on .main-header is load-bearing for that centering: the
   theme leaves the header `position: static`, so a `top: 50%` on an absolutely
   positioned child resolves against the initial containing block (the viewport),
   not the header — which dropped the Register/Login block ~337px down the page,
   out of the navbar entirely. Make the header the containing block so 50% means
   half the header's 64px. */
@media (min-width: 992px) {
  .main-header {
    align-items: stretch !important;
    position: relative !important;
  }
  .main-header__admin {
    order: 2 !important;
    justify-content: flex-end !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 0 !important;
    z-index: 5 !important;
  }
  .navbar.main-menu {
    order: 1 !important;
  }
  .navbar-collapse.main-menu__nav {
    margin-top: 0 !important;
  }
}

/* Admin/Register/Login dropdown menu — theme defaults to a solid black panel
   (background-color: contrast(@contrast-colour)), clashing with the white navbar above */
.dropdown-menu {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
}
.dropdown-menu .dropdown-item a {
  color: #000 !important;
}
.dropdown-menu .dropdown-item a.active,
.dropdown-menu .dropdown-item a:active,
.dropdown-menu .dropdown-item a:hover,
.dropdown-menu .dropdown-item a:focus {
  background-color: #f0f0f0 !important;
  color: #000 !important;
}

/* Login/search inputs. Pragma compiles .form-control as
   `background-color: transparent; color: rgba(0,0,0,0.95)` and body as #fff, so
   fields are dark-on-white. These rules previously forced white text, a white
   focus border and a near-white autofill fill — written for a dark form panel
   that this theme does not produce, which made every focused or autofilled
   input white-on-white. Match the theme's own dark-on-light instead. */
.form-control:focus {
  color: rgba(0, 0, 0, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.95) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15) !important;
}
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
  -webkit-text-fill-color: rgba(0, 0, 0, 0.95) !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  caret-color: rgba(0, 0, 0, 0.95) !important;
}

/* Pragma theme applies `columns: 2` to .additional-content on desktop
   (resources/less/components/additional-content.less), turning our
   sequential blocks (Education/Vision, MOUs) into a magazine-style
   2-column flow that scatters them side by side instead of stacking
   top to bottom as authored. Force single-column so blocks render in
   document order, full width, one below the other. */
.additional-content {
  columns: 1 !important;
}

/* Homepage separator (bare <hr/> before .additional-content, from
   indexJournal.tpl) had asymmetric whitespace: ~68px above, 32px below.
   Cause of the extra 36px above: indexJournal.tpl always renders an
   unconditional <section class="issue"> (a hook mount point) right
   after the description block, which is pure whitespace when nothing
   hooks into it and no current issue is set — but it still reserved
   ~18px of empty line-height. `.journal-desc` also had its own
   margin/padding-bottom stacking on top. Hide the section only when it
   has no actual content (safe once a real issue/hook fills it), zero
   the description's trailing space, and pin the hr's own margin so
   both sides land on the same 32px. */
.journal-desc {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
section.issue:not(:has(*)) {
  display: none !important;
}
main hr {
  margin: 1.5rem 0 1.1rem !important;
}

/* The toggler is Bootstrap's stock .navbar-toggler-icon now (see the LOCAL OVERRIDE
   in pragma templates/frontend/components/header.tpl); it brings its own dark SVG, so
   no recolouring is needed. Pragma's .hamburger gave the button `margin-top:auto` to
   sit it on the logo's baseline — keep that alignment on the plain toggler. */
.navbar.main-menu .navbar-toggler {
  margin-top: auto;
  margin-bottom: auto;
}

/* Theme's default 2rem gap under the header read as dead space at every width,
   not just mobile. Tighten it everywhere. */
.main__content {
  margin-top: 0.75rem !important;
}

/* MOU partners render as equal-height neutral cards. The three logos are wildly
   different aspect ratios (a wide GIF, a tall PNG, a square JPG), so each sits in
   a fixed-height box with background-size:contain -- that lands every logo on the
   same visual height instead of the first one towering over the other two. Cards
   stretch to the tallest name via flex, so the row stays level. */
.ws-mou-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  max-width: 820px;
}
.ws-mou-grid > .ws-mou__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 1rem 0.85rem;
  text-align: center;
}
.ws-mou__logo {
  height: 34px;
  /* width must be explicit: this is an empty div inside a column flex container,
     and `margin-inline: auto` there shrink-wraps the box to its content width --
     which is zero for an empty element, hiding the background image entirely. */
  width: 100%;
  margin: 0 0 0.75rem;
  /* `auto 100%`, not `contain`: the three logos have very different aspect ratios
     (mou1 389x244 = 1.59:1, mou2 1309x200 = 6.54:1, mou3 233x46 = 5.07:1). Under
     `contain` the wide two are width-limited and only reach ~29-37px while the
     near-square mou1 fills the full box, so it towered over them. Scaling by height
     pins all three to exactly this height; the grid is widened to 820px so the
     widest logo (34px tall needs ~222px) still fits its card. */
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
}
.ws-mou__name {
  font-weight: bold;
  font-size: 0.95rem;
  margin-top: auto;
}

/* Past Contributor entries are authored as `float:left; width:33%`, keeping three
   per row at every width and squeezing them unreadably on a phone. Names are short
   enough to pair up two per row; MOU cards get a full row each. */
/* MOU cards go one per row on tablet as well as phone -- three 34px-tall logo
   strips side by side inside an ~700px viewport leaves each card too narrow for
   the widest logo (222px) plus its caption. */
@media (max-width: 991.98px) {
  .ws-mou-grid > .ws-mou__item {
    flex: 1 1 100%;
  }
}

/* Contributor names stay three per row on tablet; only phones drop to two. */
@media (max-width: 767.98px) {
  .ws-contrib__item {
    width: 50% !important;
  }
}

/* Belt-and-suspenders: theme's own dynamically-compiled CSS already removes
   underline via `.main-header a`, but that endpoint has no cache-busting
   query param (unlike this file, which is versioned by upload timestamp) so
   browsers can hold a stale pre-fix copy for up to 7 days. Duplicate the
   rule here so it's guaranteed fresh regardless of that endpoint's cache state. */
.main-header a,
.wsh-footer a {
  text-decoration: none !important;
}

/* Footer: white background, black text/links */
footer.main-footer {
  background-color: #fff !important;
}
.wsh-footer-statement,
.wsh-footer-copy {
  color: #333 !important;
}
.wsh-footer-col h6 {
  color: #000 !important;
}
.wsh-footer-nav a {
  color: #000 !important;
}
.wsh-footer-nav a:hover {
  color: #333 !important;
}
.wsh-footer-social a {
  color: #000 !important;
}
.wsh-footer-bottom {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}