:root{
  --brand-blue:#005f86;
  --border: rgba(0,0,0,.12);
}

body {
    background-color: #fbfbf9;
}



#group-directory .card {
    width: 100%;
    margin: 0px;
}

#group-directory .card-body {

    padding: 1.3rem;
}


#group-directory p.smar {
  line-height: 1.2;
    margin-bottom: 11px;
}

#group-directory{ background:#fbfbf9; } /* instead of body */

#group-directory .page-title{ font-weight:700; letter-spacing:.01em; }
#group-directory .results-meta{ font-weight:700; color:var(--brand-blue); white-space:nowrap; }

#group-directory .filter-card{
  border:1px solid var(--border);
  border-radius:0px;
}
#group-directory .filter-title{
  font-size:1rem;
  font-weight:700;
  margin-bottom:.75rem;
}
#group-directory .filter-subtitle{
  font-size:.9rem;
  color:rgba(0,0,0,.65);
  margin-top:-.25rem;
  margin-bottom:.75rem;
}

#group-directory .filter-section-title{
  font-weight:700;
  margin-bottom:.35rem;
}
#group-directory .filter-section-help{
  font-size:.9rem;
  color:rgba(0,0,0,.65);
  margin-bottom:.6rem;
}

#group-directory .custom-control{ margin-bottom:.4rem; }
#group-directory .custom-control-label{ cursor:pointer; }

#group-directory .search-row .form-control{
  border-radius:0px;
  border:1px solid var(--border);
}

#group-directory .btn-brand{
  background:var(--brand-blue);
  border-color:var(--brand-blue);
  color:#fff;
 font-family: 'Open Sans', sans-serif;
  border-radius:0px;
    letter-spacing: 0.09em;
  font-weight:500;
    
}
#group-directory .btn-brand:hover{
  background:#004f6f;
  border-color:#004f6f;
  color:#fff;
}

#group-directory .btn-outline-soft{
  border-radius:0px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:600;
}

#group-directory .group-card{
  border:1px solid var(--border);
/*  border-radius:6px;*/
  overflow:hidden;
}
#group-directory .group-card h3{
  font-size:1.05rem;
  margin-bottom:.5rem;
  font-weight:700;
}
#group-directory .group-card p{ color:rgba(0,0,0,.78); }

#group-directory .empty-state{
  border:1px dashed rgba(0,0,0,.25);
  border-radius:0px;
  background:#fff;
  padding:1.25rem;
}

#group-directory .active-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:.75rem;
}
#group-directory .active-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(0,95,134,.25);
  background:rgba(0,95,134,.08);
  color:#003b52;
  padding:.25rem .6rem;
  font-weight:700;
  font-size:.85rem;
}
#group-directory .pill-x{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  color:#003b52;
}

/* 5-line clamp */
#group-directory .group-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* Expanded state: show full description */
#group-directory .group-card.is-expanded .group-desc{
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Hide/show the meta + extra content */
#group-directory .group-meta{ display: none; }
#group-directory .group-card.is-expanded .group-meta{ display: block; }



#group-directory .group-meta {
    margin-top: 10px;
    border-top: 1px solid #cecac8;
    padding-top: 16px;
    margin-bottom: 14px;
}

/* Read more link/button styling */
#group-directory .group-toggle{
  padding: 0;
  border: 0;
  background: transparent;
  color: #005f86;
    font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}




#group-directory .group-toggle:hover{ color:#004f6f; }
#group-directory .group-toggle:focus{
  outline: 2px solid rgba(0,95,134,.35);
  outline-offset: 2px;
}

/* No outline for mouse click focus */
#group-directory .group-toggle:focus{
  outline: none;
}

/* Keep an outline ONLY when keyboard-tabbing (accessible) */
#group-directory .group-toggle:focus-visible{
  outline: 2px solid rgba(0,95,134,.35);
  outline-offset: 2px;
}

/* Read more / View details toggle hover color */
#group-directory .group-toggle:hover{
  color: #bf5700;
}

/* View details button hover color (text stays white) */
#group-directory a.btn.btn-brand:hover,
#group-directory .btn-brand:hover{
  background: #bf5700;
  border-color: #bf5700;
  color: #fff;
}

/* Restore Bootstrap 4 row gutters ONLY inside the directory */
#group-directory .row{
  margin-left: -15px !important;
  margin-right: -15px !important;
}

/* Ensure columns keep matching padding */
#group-directory [class^="col-"],
#group-directory [class*=" col-"]{
  padding-left: 15px !important;
  padding-right: 15px !important;
}

#group-directory .jump-results-link{
  font-weight: 700;
  text-decoration: underline;
  color: #005f86;
}

#group-directory .jump-results-link:hover{
  color: #bf5700; /* same hover you wanted elsewhere */
}