/* Experts directory + Institutions: filter sidebar fixes and logo-green buttons.
   Scoped by body class so other pages that share .left-filter are untouched. */

body.experts-directory,
body.institutions {
  --kh-ink: oklch(27% 0.035 205);
  --kh-leaf: #96c882;
  --kh-leaf-dark: #7db86a;
  --kh-border: oklch(91% 0.015 140);
  --kh-muted: oklch(50% 0.025 205);
}

/* ---------- Nested filter lists (Theme, Nature of Institute): stop rows overlapping ---------- */
body.experts-directory .left-filter .form-wrapper .details-wrapper,
body.institutions .left-filter .form-wrapper .details-wrapper { margin: 12px 16px 16px !important; }
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper ul { list-style: none; margin: 0; padding: 0; }
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper .bef-checkboxes > ul > li {
  border: 0; margin: 0 0 6px; padding: 0;
}
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper .bef-checkboxes > ul > li > ul {
  margin: 2px 0 8px 12px; padding: 0 0 0 10px; border-left: 1px solid var(--kh-border);
}
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper .form-item,
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper .form-checkboxes .form-item {
  display: flex !important; align-items: flex-start; gap: 8px; width: 100%; margin: 0 0 6px; padding: 0;
}
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper .form-checkbox { flex: none; margin: 2px 0 0; }
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper .option,
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper label {
  display: block; flex: 1; min-width: 0; margin: 0; padding: 0; line-height: 1.35; font-size: 14px;
}
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper .bef-checkboxes > ul > li > div label { font-weight: 600; color: var(--kh-ink); }

/* ---------- Buttons: logo green (leaf) with dark text ---------- */
.exp-dir-badge,
.inst-btn.inst-btn-primary,
body.experts-directory .sort-rounded,
body.institutions .sort-rounded,
:is(body.experts-directory, body.institutions) .left-filter .form-actions input[type="submit"]:not(.js-hide) {
  background: var(--kh-leaf) !important;
  border-color: var(--kh-leaf) !important;
  color: var(--kh-ink) !important;
  transition: background 0.2s;
}
.exp-dir-badge:hover,
.inst-btn.inst-btn-primary:hover,
body.experts-directory .sort-rounded:hover,
body.institutions .sort-rounded:hover,
:is(body.experts-directory, body.institutions) .left-filter .form-actions input[type="submit"]:not(.js-hide):hover {
  background: var(--kh-leaf-dark) !important;
  border-color: var(--kh-leaf-dark) !important;
  color: var(--kh-ink) !important;
}
.exp-dir-badge i, .inst-btn.inst-btn-primary i { color: inherit; }

/* ---------- Scroll bar on long filter groups ---------- */
:is(body.experts-directory, body.institutions) .left-filter .form-wrapper .details-wrapper {
  max-height: 18rem; overflow-y: auto; overflow-x: hidden; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: var(--kh-leaf) transparent;
}
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper::-webkit-scrollbar { width: 6px; }
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper::-webkit-scrollbar-thumb { background: var(--kh-leaf); border-radius: 9999px; }
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper::-webkit-scrollbar-track { background: transparent; }

/* ---------- Institutions cards ---------- */
body.institutions .inst-info-row i,
body.institutions .inst-info i { color: var(--kh-muted); }

/* Olivero floats .form-item left, which put short checkbox rows side by side (overlapping on phones). One row each. */
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper .form-item,
:is(body.experts-directory, body.institutions) .left-filter .details-wrapper .form-type-checkbox {
  float: none !important; clear: both; width: 100% !important; box-sizing: border-box;
}