
.osbe-idp__header {
  padding-top: 73px;
  margin-bottom: 55px;
  text-align: center;
}

.osbe-idp__title {
  font-family: var(--osbe-font-display);
  font-size: clamp(2rem, 5vw, var(--osbe-fs-hero));
  font-weight: 700;
  color: var(--osbe-color-navy);
  line-height: var(--osbe-lh-tight);
}

.osbe-idp__breadcrumb-wrap {
  background-color: color-mix(
    in srgb,
    var(--osbe-color-stone) 40%,
    transparent
  );
  border-radius: var(--osbe-radius-pill);
  padding: var(--osbe-sp-3) var(--osbe-sp-5);
  margin-bottom: 55px;
}

h2 {
  letter-spacing: 0 !important;
}


.osbe-idp__layout {
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-9);
  align-items: flex-start;
  padding-bottom: var(--osbe-sp-12);
}

.osbe-idp__layout--no-sidebar .osbe-idp__content {
  max-width: var(--osbe-max-width-text);
}


.osbe-idp__sidebar {
  --surface-color: var(--osbe-color-navy);
  background-color: var(--osbe-color-blue);
  border-radius: var(--osbe-radius-xl);
  padding: var(--osbe-sp-9);
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-5);
  width: 100%;
  flex-shrink: 0;
}

.osbe-idp__sidebar-heading {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-2xl);
  font-weight: 600;
  color: var(--osbe-color-syringa);
  line-height: var(--osbe-lh-snug);
  margin: 0;
  margin-bottom: -10px;
}

.osbe-idp__sidebar-rule {
  border: none;
  border-top: 1px solid
    color-mix(in srgb, var(--osbe-color-syringa) 40%, transparent);
  margin: 0;
}


.osbe-idp__members {
  margin: 0;
  padding: 0 var(--osbe-sp-2) 0 0; 
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-5);
}

/* Inner per-group list — overrides parent theme ul padding-left */
.osbe-idp__members-list {
  list-style: none;
  margin: 0;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-6);
}

.osbe-idp__staff {
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-5);
  padding-right: var(--osbe-sp-2); 
}

.osbe-idp__members,
.osbe-idp__staff {
  max-height: var(--osbe-idp-members-max-height, 400px);
  overflow-y: auto;

  scrollbar-width: thin;
  scrollbar-color: color-mix(
      in srgb,
      var(--osbe-color-syringa) 25%,
      transparent
    )
    transparent;
}

.osbe-idp__members:hover,
.osbe-idp__members:focus-within,
.osbe-idp__staff:hover,
.osbe-idp__staff:focus-within {
  scrollbar-color: var(--osbe-color-syringa) transparent;
}

.osbe-idp__members::-webkit-scrollbar,
.osbe-idp__staff::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

.osbe-idp__members::-webkit-scrollbar-track,
.osbe-idp__staff::-webkit-scrollbar-track {
  background: transparent;
}

.osbe-idp__members::-webkit-scrollbar-thumb,
.osbe-idp__staff::-webkit-scrollbar-thumb {
  background-color: color-mix(
    in srgb,
    var(--osbe-color-syringa) 25%,
    transparent
  );
  border-radius: var(--osbe-radius-pill);
}

.osbe-idp__members:hover::-webkit-scrollbar-thumb,
.osbe-idp__members:focus-within::-webkit-scrollbar-thumb,
.osbe-idp__staff:hover::-webkit-scrollbar-thumb,
.osbe-idp__staff:focus-within::-webkit-scrollbar-thumb {
  background-color: var(--osbe-color-syringa);
}

.osbe-idp__member {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: var(--osbe-lh-normal);
}

/* overrides parent theme link styles on dark blue sidebar */
.osbe-idp__member-link {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-base);
  font-weight: 600;
  color: var(--osbe-color-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  display: inline;
}

/* !important overrides parent theme main a:hover { color: var(--color6) !important } */
.osbe-idp__members .osbe-idp__member .osbe-idp__member-link:hover,
.osbe-idp__members .osbe-idp__member .osbe-idp__member-link:focus-visible {
  color: #fff !important;
}

/* Unlinked member names (no Board Members entry): gold but visibly NOT a link —
   !important needed because the base class uses !important to beat the parent
   theme's link styles, and that wins over a plain `none` here. */
.osbe-idp__member-link--no-url {
  text-decoration: none !important;
  cursor: default;
}

/* Keep unlinked names gold on hover — the white link-hover rule above would
   otherwise match this span too and fake a link affordance. */
.osbe-idp__members .osbe-idp__member .osbe-idp__member-link--no-url:hover {
  color: var(--osbe-color-gold) !important;
}


/* Role / position line — sits ABOVE the name, like Basic Page */
.osbe-idp__member-position {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-sm) !important;
  font-weight: 600;
  color: color-mix(in srgb, var(--osbe-color-syringa) 70%, transparent);
  line-height: var(--osbe-lh-snug);
  margin: 0;
}

.osbe-idp__member-name {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-base);
  font-weight: 600;
  color: var(--osbe-color-syringa);
  line-height: var(--osbe-lh-normal);
}

/* Detail lines: seat / organization / term */
.osbe-idp__member-detail {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-sm) !important;
  font-weight: 400;
  color: color-mix(in srgb, var(--osbe-color-syringa) 70%, transparent);
  line-height: var(--osbe-lh-normal);
  margin: 0;
  font-style: italic;
}

/* !important: overrides parent theme link color on dark blue sidebar */
.osbe-idp__member-email {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-nav);
  font-weight: 400;
  color: var(--osbe-color-gold) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  line-height: var(--osbe-lh-normal);
  word-break: break-all;
}

/* !important: overrides parent theme main a:hover { color: var(--color6) !important } */
.osbe-idp__member-email:hover,
.osbe-idp__member-email:focus-visible {
  color: #fff !important;
}

.osbe-idp__member-email:focus-visible {
  outline: 3px solid var(--osbe-color-gold);
  outline-offset: 2px;
  border-radius: 2px;
}

.osbe-idp__member-phone {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-nav);
  font-weight: 400;
  color: color-mix(in srgb, var(--osbe-color-syringa) 70%, transparent);
  line-height: var(--osbe-lh-normal);
}


.osbe-idp__dept-group {
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-3);
}

#osbe-idp-staff-heading {
  margin-top: var(--osbe-sp-4) !important;
}

.osbe-idp__dept-group hr {
  visibility: hidden;
}

.osbe-idp__dept-heading {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-lg);
  font-weight: 700;
  color: var(--osbe-color-syringa);
  line-height: var(--osbe-lh-snug);
  margin: 0;
}
.postid-267 .osbe-idp__dept-heading,
.postid-271 .osbe-idp__dept-heading {
  display: none;
}


.osbe-idp__sidebar-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-3);
  align-items: flex-start;
  padding-top: var(--osbe-sp-2);
}

.osbe-idp__sidebar-ctas a {
  border-radius: var(--osbe-radius-xl);
  text-wrap: wrap;
}


.osbe-idp__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-9);
  padding-top: var(--osbe-sp-3);
}


.osbe-idp__intro {
  font-size: var(--osbe-fs-xl);
  font-weight: 600;
  color: var(--osbe-color-navy);
  line-height: var(--osbe-lh-normal);
}

.osbe-idp__intro p {
  margin: 0 0 var(--osbe-sp-4);
}

.osbe-idp__intro p:last-child {
  margin-bottom: 0;
}


.osbe-idp__body {
  color: var(--osbe-color-slate);
  font-size: var(--osbe-fs-base);
  line-height: var(--osbe-lh-normal);
}

.osbe-idp__body p {
  margin: 0 0 var(--osbe-sp-4);
}

.osbe-idp__body p:last-child {
  margin-bottom: 0;
}

.osbe-idp__body h2 {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-2xl);
  font-weight: 600;
  color: var(--osbe-color-blue);
  line-height: var(--osbe-lh-snug);
  margin: var(--osbe-sp-8) 0 var(--osbe-sp-4);
}

.osbe-idp__body h2:first-child {
  margin-top: 0;
}

.osbe-idp__body h3 {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-xl);
  font-weight: 600;
  color: var(--osbe-color-navy);
  line-height: var(--osbe-lh-snug);
  margin: var(--osbe-sp-7) 0 var(--osbe-sp-3);
}

.osbe-idp__body h4 {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-lg);
  font-weight: 600;
  color: var(--osbe-color-slate);
  line-height: var(--osbe-lh-snug);
  margin: var(--osbe-sp-6) 0 var(--osbe-sp-2);
}

.osbe-idp__body ol,
.osbe-idp__body ul {
  margin: 0 0 var(--osbe-sp-4);
  padding-left: var(--osbe-sp-7);
}

.osbe-idp__body ol {
  list-style-type: decimal;
}

.osbe-idp__body ul {
  list-style-type: disc;
}

.osbe-idp__body ul ul {
  list-style-type: circle;
}

.osbe-idp__body ul ul ul {
  list-style-type: square;
}

.osbe-idp__body ol ol {
  list-style-type: lower-alpha;
}

.osbe-idp__body ol ol ol {
  list-style-type: lower-roman;
}

.osbe-idp__body li {
  margin-bottom: var(--osbe-sp-2);
  line-height: var(--osbe-lh-normal);
}

.osbe-idp__body li:last-child {
  margin-bottom: 0;
}

.osbe-idp__body li > ol,
.osbe-idp__body li > ul {
  margin-top: var(--osbe-sp-2);
  margin-bottom: 0;
}

.osbe-idp__body a {
  color: var(--osbe-color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* !important overrides parent theme main a:hover { color: var(--color6) !important } */
.osbe-idp__body a:hover {
  color: var(--osbe-color-teal) !important;
}

.osbe-idp__body strong,
.osbe-idp__body b {
  font-weight: 700;
  color: inherit;
}

.osbe-idp__body em,
.osbe-idp__body i {
  font-style: italic;
}

.osbe-idp__body blockquote {
  border-left: 3px solid var(--osbe-color-stone);
  margin: var(--osbe-sp-6) 0;
  padding: var(--osbe-sp-2) 0 var(--osbe-sp-2) var(--osbe-sp-6);
  font-style: italic;
  color: var(--osbe-color-slate);
}


.osbe-idp__subcommittees {
  background-color: var(--osbe-color-slate);
  --surface-color: var(--osbe-color-slate);
  border-radius: var(--osbe-radius-xl);
  padding: var(--osbe-sp-9);
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-9);
}

.osbe-idp__subcommittees-header {
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-6);
}

.osbe-idp__subcommittees-heading {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-2xl);
  font-weight: 700;
  color: var(--osbe-color-syringa);
  line-height: var(--osbe-lh-snug);
  margin: 0;
}

.osbe-idp__subcommittees-rule {
  border: none;
  border-top: 1px solid var(--osbe-color-syringa);
  margin: 0;
}

.osbe-idp__subcommittees-grid {
  list-style: none;
  margin: 0;
  padding: 0 !important; /* overrides parent theme ul padding-left */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--osbe-sp-3);
}

.osbe-idp__subcommittee-item {
  display: flex;
}

.osbe-idp__subcommittee-link {
  display: inline-flex;
  align-items: center;
  gap: var(--osbe-sp-2);
  padding: 4px 18px;
  border-radius: var(--osbe-radius-pill);
  background-color: var(--osbe-color-syringa);
  border: 1px solid var(--osbe-color-syringa);
  color: var(--osbe-color-blue);
  font-family: var(--osbe-font-button);
  font-size: var(--osbe-fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background-color var(--osbe-transition-fast),
    border-color var(--osbe-transition-fast);
}

/* !important overrides parent theme main a:hover { color: var(--color6) !important } */
.osbe-idp__subcommittee-link:hover {
  background-color: transparent;
  border-color: var(--osbe-color-syringa);
  color: var(--osbe-color-syringa) !important;
}


.osbe-idp__resources {
  background-color: var(--osbe-color-stone);
  border-radius: var(--osbe-radius-xl);
  padding: var(--osbe-sp-9);
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-9);
}

.osbe-idp__resources-header {
  display: flex;
  flex-direction: column;
  gap: var(--osbe-sp-6);
}

.osbe-idp__resources-heading {
  font-family: var(--osbe-font-body);
  font-size: var(--osbe-fs-2xl);
  font-weight: 700;
  color: var(--osbe-color-navy);
  line-height: var(--osbe-lh-snug);
  margin: 0;
}

.osbe-idp__resources-rule {
  border: none;
  border-top: 1px solid var(--osbe-color-slate);
  margin: 0;
}

.osbe-idp__resources-description {
  font-size: var(--osbe-fs-base);
  color: var(--osbe-color-slate);
  line-height: var(--osbe-lh-normal);
  margin: calc(-1 * var(--osbe-sp-5)) 0 0;
}

/* ============================================================
   RESOURCE LINK GRID
   ============================================================ */

.osbe-idp__resources-grid {
  list-style: none;
  margin: 0;
  padding: 0 !important; /* overrides parent theme ul padding-left */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--osbe-sp-3);
}

.osbe-idp__resource-item {
  display: flex;
}

.osbe-idp__resource-link {
  display: inline-flex;
  align-items: center;
  gap: var(--osbe-sp-2);
  padding: 4px 18px;
  border-radius: var(--osbe-radius-pill);
  background-color: var(--osbe-color-syringa);
  border: 1px solid var(--osbe-color-slate);
  color: var(--osbe-color-blue);
  font-family: var(--osbe-font-button);
  font-size: var(--osbe-fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition:
    background-color var(--osbe-transition-fast),
    border-color var(--osbe-transition-fast);
}

/* !important overrides parent theme main a:hover { color: var(--color6) !important } */
.osbe-idp__resource-link:hover {
  background-color: color-mix(
    in srgb,
    var(--osbe-color-stone) 50%,
    transparent
  );
  border-color: var(--osbe-color-slate);
  color: var(--osbe-color-navy) !important;
}

.osbe-idp__resource-icon {
  flex-shrink: 0;
  color: var(--osbe-color-blue);
}


@media (min-width: 1024px) {
  .osbe-idp__layout {
    flex-direction: row;
  }

  .osbe-idp__sidebar {
    width: 21rem;
    position: sticky;
    top: calc(80px + var(--osbe-sp-6));
    align-self: flex-start;
  }
}
