/* Extra themastijlen die niet in style.css passen */
.wp-block { max-width: 100%; }
.alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; }
.screen-reader-text { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* --- BuddyPress: Group header (cover + avatar) --- */

/* Cover image nooit uitrekken */
#buddypress #item-header-cover-image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat;
  height: 240px;                /* pas aan naar smaak */
  border-radius: var(--vp-radius);
  overflow: hidden;
}

/* Container netjes positioneren */
#buddypress #item-header {
  position: relative;
}

/* Groepsavatar: altijd vierkant en rond */
#buddypress #item-header #item-header-avatar img,
#buddypress #item-header #item-header-avatar a img,
#buddypress .groups-header #item-header-avatar img {
  width: 120px !important;      /* grootte naar wens */
  height: 120px !important;
  border-radius: 50% !important;
  object-fit: cover !important; /* snijdt netjes bij, geen vervorming */
  display: block;
  border: 3px solid #fff;       /* nette rand */
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* Plaats avatar half over de cover, links */
#buddypress #item-header #item-header-avatar {
  position: absolute;
  left: 16px;
  bottom: -60px;                /* helft van avatar‑hoogte */
  z-index: 3;
}

/* Zorg voor extra ruimte onder de cover ivm overlappende avatar */
#buddypress #item-header .bp-header {
  padding-bottom: 70px;         /* afgestemd op bottom offset */
}

/* Titel en meta mooi naast de avatar */
#buddypress #item-header .bp-header .entry-title,
#buddypress #item-header .bp-header .bp-group-type,
#buddypress #item-header .bp-header .item-meta {
  margin-left: 152px;           /* 120px avatar + 16px links + marge */
}

/* Mobile tweaks */
@media (max-width: 600px) {
  #buddypress #item-header-cover-image { height: 180px; }
  #buddypress #item-header #item-header-avatar img { width: 96px !important; height: 96px !important; }
  #buddypress #item-header #item-header-avatar { bottom: -48px; left: 12px; }
  #buddypress #item-header .bp-header { padding-bottom: 60px; }
  #buddypress #item-header .bp-header .entry-title,
  #buddypress #item-header .bp-header .bp-group-type,
  #buddypress #item-header .bp-header .item-meta { margin-left: 132px; }
}

/* BuddyPress directory lists als grid */
#buddypress ul.item-list.vp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: var(--vp-gap);
}
#buddypress ul.item-list.vp-grid > li {
  margin: 0; padding: 0; /* reset */
}
#buddypress .bp-card .item-avatar img { border-radius: 50%; object-fit: cover; }
#buddypress .bp-card .item-title { margin: .5rem 0 0; font-size: 1rem; }
#buddypress .pagination { margin-top: 1rem; }



/* =============================================================================
   BUDDYPRESS — DIRECTORY CARDS (Leden & Groepen)
   ============================================================================= */

/* Wrapper die BP Nouveau rondom directory-pagina's plaatst */
#buddypress {
  padding: 1.5rem;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
}

/* Grid: 3 kolommen op desktop, 2 op tablet, 1 op mobiel */
#buddypress ul.item-list.vp-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--vp-gap);
}

/* Kaart-stijl voor elk list-item */
#buddypress ul.item-list.vp-grid > li {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  box-shadow: var(--vp-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease;
}

#buddypress ul.item-list.vp-grid > li:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* Binnenste article */
#buddypress ul.item-list.vp-grid > li article.bp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem 1rem;
  height: 100%;
}

/* Avatar groot en rond bovenaan de kaart */
#buddypress ul.item-list.vp-grid .item-avatar {
  display: block;
  margin-bottom: .75rem;
}

#buddypress ul.item-list.vp-grid .item-avatar img {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid var(--vp-border);
  display: block;
}

/* Naam */
#buddypress ul.item-list.vp-grid .item-title {
  font-size: .975rem;
  font-weight: 600;
  margin: 0 0 .25rem;
}

#buddypress ul.item-list.vp-grid .item-title a {
  color: var(--vp-text);
  text-decoration: none;
}

#buddypress ul.item-list.vp-grid .item-title a:hover {
  color: var(--vp-primary);
}

/* Meta (laatste activiteit / beschrijving) */
#buddypress ul.item-list.vp-grid .item-meta,
#buddypress ul.item-list.vp-grid .item-desc {
  font-size: .82rem;
  color: var(--vp-muted);
  margin: 0 0 .5rem;
}

/* Actieknop onderaan de kaart */
#buddypress ul.item-list.vp-grid .action {
  margin-top: auto;
  padding-top: .75rem;
  width: 100%;
  text-align: center;
}

/* =============================================================================
   BUDDYPRESS — ACTIVITEITEN STREAM
   ============================================================================= */

/* Elke activiteitskaart */
#buddypress .activity-list > li {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  box-shadow: var(--vp-shadow);
  margin-bottom: var(--vp-gap);
  padding: 0;
  list-style: none;
  overflow: hidden;
}

/* Header: avatar links, tekst rechts */
#buddypress .activity-list .activity-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1rem .5rem;
}

#buddypress .activity-list .activity-header p {
  margin: 0;
  font-size: .9rem;
  color: var(--vp-muted);
  line-height: 1.4;
}

#buddypress .activity-list .activity-header p a {
  color: var(--vp-text);
  font-weight: 600;
}

/* Avatar in stream */
#buddypress .activity-list .activity-avatar img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0;
}

/* Content body */
#buddypress .activity-list .activity-inner {
  padding: .25rem 1rem .75rem 1rem;
  font-size: .95rem;
  line-height: 1.55;
}

/* Foto/media in activiteit netjes inkaderen */
#buddypress .activity-list .activity-inner img {
  max-width: 100%;
  border-radius: 8px;
  margin-top: .5rem;
}

/* Actie-footer: reageren, liken etc. */
#buddypress .activity-list .activity-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--vp-border);
  background: var(--vp-surface);
}

#buddypress .activity-list .activity-meta a,
#buddypress .activity-list .activity-meta .button {
  font-size: .82rem;
  font-weight: 500;
  color: var(--vp-muted);
  background: transparent;
  border: none;
  padding: .3rem .5rem;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, color .12s;
}

#buddypress .activity-list .activity-meta a:hover,
#buddypress .activity-list .activity-meta .button:hover {
  background: var(--vp-border);
  color: var(--vp-text);
  text-decoration: none;
  filter: none;
}

/* Verberg de lege border-bottom die BP Nouveau op <li> zet */
#buddypress .activity-list > li {
  border-bottom: none !important;
}

/* Activity update formulier */
#buddypress #whats-new-form {
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  padding: 1rem;
  margin-bottom: var(--vp-gap);
  box-shadow: var(--vp-shadow);
}

/* =============================================================================
   BUDDYPRESS — PAGINATIE & NAVIGATIETABS
   ============================================================================= */

#buddypress .item-list-tabs ul,
#buddypress .activity-type-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  margin: 0 0 1rem;
  list-style: none;
}

#buddypress .item-list-tabs li a,
#buddypress .activity-type-tabs li a {
  display: inline-block;
  padding: .4rem .85rem;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--vp-muted);
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  text-decoration: none;
  transition: background .12s, color .12s;
}

#buddypress .item-list-tabs li.selected a,
#buddypress .item-list-tabs li a:hover,
#buddypress .activity-type-tabs li.selected a,
#buddypress .activity-type-tabs li a:hover {
  background: var(--vp-primary);
  color: #fff;
  border-color: var(--vp-primary);
}

/* Paginatielinks */
.bp-pagination .pagination-links a,
.bp-pagination .pagination-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 .5rem;
  border-radius: 6px;
  font-size: .85rem;
  border: 1px solid var(--vp-border);
  color: var(--vp-text);
  text-decoration: none;
  background: var(--vp-bg);
}

.bp-pagination .pagination-links a:hover {
  background: var(--vp-primary);
  color: #fff;
  border-color: var(--vp-primary);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 600px) {
  #buddypress ul.item-list.vp-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #buddypress {
    padding: 1rem .75rem;
  }
}