:root {
  --bumcl-white:                    #ffffff;
  --bumcl-blue:                     #003057;
  --bumcl-row-color:                #f6f7f8;
  --bumcl-border-color:             #c6c6c6;
  --bumcl-pill-link-bg-color:       #fafafa;
  --bumcl-pill-link-hover-bg-color: #e1e1e1;
  --bumcl-column-box-font: brandon-grotesque,sans-serif;
  --bumcl-content-font:    Lato,Arial,sans-serif;
  --bumcl-group-border-radius: .5em;
}

/* Contact Search Bar */
.bu-contact-controls {
  margin: 0 0 1em 0;
}

.bu-contact-controls input,
.bu-contact-controls select {
  padding: 1em;
  border: 1px solid var(--bumcl-border-color);
}

.bu-contact-groups { 
  display:grid;
  gap: 1em;
  margin-bottom: 1.5em;
}

.bu-contact-group {
  border: 1px solid var(--bumcl-border-color);
  border-radius: var(--bumcl-group-border-radius);
  background-color: var(--bumcl-white);
  padding: .75em;
}

.bu-contact-group summary {
  cursor: pointer;
  list-style: none;
}

.bu-contact-group summary::-webkit-details-marker {
  display:none
}

.bu-contact-group-title {
  display: inline;
  font-size: 1.25em;
}

.bu-contact-list {
  margin: 0 .75em;
  padding: 0;
}

.bu-contact-list li {
  margin-bottom: 0;
}

.bu-contact-list li:before {
  margin-top: 5px; 
}

.bu-contact-list li:last-child {
  margin-bottom: 0;
}

.bu-contact-row {
  list-style: none; 
  padding: 1em .5em; 
  border-top: 1px solid #ececec;
}

.bu-contact-row-main {
  margin-bottom: 1em;
}

.bu-contact-row-main:last-child {
  margin-bottom: 0;
}

.bu-contact-row:first-child {
  border-top: 0
}

.bu-contact-name {
  margin: 0 0 .5em;
  font-family: var(--bumcl-content-font);
  font-size: 1em;
}

.bu-contact-actions {
  display: flex;
  flex-direction: column;
  gap: .5em;
  flex-wrap: wrap;
}

.bu-pill,
.bu-pill-main,
.bu-pill-main:visited {
  display: inline-block;
  padding: .5em .75em;
  border: 1px solid var(--bumcl-border-color);
  border-radius: var(--bumcl-group-border-radius);
  background-color: var(--bumcl-pill-link-bg-color);
  text-decoration: none;
}

.bu-link { 
  display:inline-block;
  padding:8px 10px;
  border:1px solid #d0d0d0;
  border-radius:12px;
  text-decoration:none;
  background:#fff;
}

.bu-link-primary{ 
  font-weight:700;
}

/* Mobile/tablet: keep current “wrap” behavior */
.bu-contact-actions--grid {
  display: flex;
  flex-wrap: wrap;
}

.bu-contact-col--phones,
.bu-contact-col--emails {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: .5em;
}

.bu-contact-col--emails {
  word-break: break-all;
}

.bu-contact-list-main {
  margin: 0 0 1.5em 0;
}

.bu-contact-list-main li:before {
  background: none;
  content: '';
  display: none;
}

.bu-contact-col--phones-main {
  display: flex;
  flex-direction: column;
  gap: .75em;
  align-items: flex-start;
}

.bu-contact-notes-main p {
  margin-bottom: .25em;
}

/* Desktop View */
@media (min-width: 980px) {


  .bu-contact-controls {
    margin: 1.5em 0;
  }

  .bu-contact-group {
    border: none;
    border-radius: 0;
    margin-bottom: 1.5em;
    padding: 0;
  }

  .bu-contact-group-title {
    background-color: var(--bumcl-blue);
    color: var(--bumcl-white);
    display: block;
    font-family: var(--bumcl-column-box-font);
    font-size: 1.1875em;
    font-weight: 700;
    letter-spacing: .0625em;
    margin-bottom: 0;
    padding: .35em .75em;
    text-transform: uppercase;
  }

  .bu-contact-group-count { 
    display:none;
  }

  .bu-contact-group summary {
    padding: 0;
    pointer-events: none;
    cursor: default;
  }

  .bu-contact-list-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0 1em;
    margin-bottom: 0;
  }

  .bu-contact-list {
    padding-bottom: 0;
    margin: 0;
  }

  .bu-contact-list li {
    margin-bottom: 0;
  }

  .bu-contact-list li:before,
  .bu-contact-list-main li:before {
    background: none;
    content: '';
    display: none;
  }

  .bu-contact-list li:nth-child(odd) {
    background-color: var(--bumcl-row-color);
  }

  .bu-contact-row {
    border-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* left: dept, right: contact columns */ 
    align-items: start;
    border-top: 0;
    grid-gap: 0;
    padding: .75em;
  }

  .bu-contact-row-main {
    margin-bottom: 0;
  }

  .bu-contact-row-main p {
    margin-bottom: .5em;
  }

  .bu-contact-name {
    font-family: var(--bumcl-content-font);
    font-size: 1em;
    line-height: 1.5;
    margin: 0;
    padding-right: 1em;
  }

  .bu-contact-actions {
    gap: 0 1.5em;
    align-items: baseline;
  }

  /* Right side becomes a 2-column grid */
  .bu-contact-actions--grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0 3em;
    align-content: start;
  }

  /* Each “column” stacks its items vertically */
  .bu-contact-col {
    display: flex;
    flex-direction: column;
    gap: .5em;
    align-items: flex-start;
  }

  /* Regular contact list links look normal */
  .bu-pill,
  .bu-link {
    display: inline;
    font-weight: normal;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    text-decoration: underline;
    text-underline-offset: .15em;
  }

  /* Staff Directory Link in Main Section */
  .bu-pill-main,
  .bu-pill-main:visited {
    display: inline;
    padding: .5em .75em;
    border: 1px solid var(--bumcl-border-color);
    border-radius: var(--bumcl-group-border-radius);
    background-color: var(--bumcl-pill-link-bg-color);
    text-decoration: none;
  }

  .bu-pill-main:hover {
    background-color: var(--bumcl-pill-link-hover-bg-color);
    border: 1px solid var(--bumcl-border-color);
  }
}