/* =============================================================================
   VRIENDENPLEK — main.css
   Algemene en BuddyPress-specifieke stijlen.
   Structuur: Base → Header → Cards/Grid → Activity → Tabs → Responsive
   ============================================================================= */

/* ── Utility ── */
.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; }

/* =============================================================================
   1. BUDDYPRESS WRAPPER
   ============================================================================= */

#buddypress {
  padding: 1.5rem;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  /* GEEN overflow-x: hidden hier — dat breekt tab-scrollen */
}

/* =============================================================================
   2. GROEP & PROFIEL HEADER
   ============================================================================= */

/*
 * BP Nouveau HTML-structuur verschilt per context:
 *
 * GROEP:  #item-header
 *           #item-header-cover-image   (cover background)
 *           #item-header-avatar        (SIBLING van cover, direct child van item-header)
 *           .bp-header                 (naam, type, beschrijving)
 *
 * PROFIEL:#item-header
 *           #item-header-cover-image
 *             #item-header-avatar      (BINNEN de cover)
 *             #item-header-content     (naam, meta — ook binnen cover)
 *           .bp-header                 (leeg of minimaal)
 *
 * Gevolg: we moeten groep en profiel apart stijlen.
 */

/* ── Cover (gedeeld) ── */
#buddypress #item-header-cover-image,
#buddypress #header-cover-image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat;
  height: 220px;
  border-radius: var(--vp-radius) var(--vp-radius) 0 0;
  position: relative;   /* zodat profiel-avatar erin absoluut kan */
  overflow: visible;
}

/* ── Item-header wrapper ── */
#buddypress #item-header {
  position: relative;
}

/* ══════════════════════════════════════════════
   GROEP: avatar is direct child van #item-header
   ══════════════════════════════════════════════ */

/* Groepsavatar: absoluut, steekt half uit onder de cover */
#buddypress #item-header > #item-header-avatar {
  position: absolute;
  left: 20px;
  top: calc(220px - 48px);  /* cover hoogte - helft avatar */
  z-index: 4;
}

#buddypress #item-header > #item-header-avatar img,
#buddypress #item-header > #item-header-avatar a img {
  width: 80px !important;   /* iets kleiner zodat admin-avatar niet overlapt */
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
  border: 3px solid var(--vp-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* Groep bp-header: ruimte voor de uitstekende avatar
   padding-top = helft avatar(40) + lucht(16) = 56
   padding-left = avatar(80) + left(20) + marge(14) = 114 */
#buddypress #item-header > .bp-header {
  padding: 56px 8rem 1rem 114px;
  position: relative;
  z-index: 3;
}

/* Groepsbeheerder: rechts van de cover */
#buddypress #item-header-admin-options,
#buddypress #item-actions {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  text-align: right;
}

/* ══════════════════════════════════════════════
   PROFIEL: avatar zit BINNEN de cover
   ══════════════════════════════════════════════ */

/* Avatar binnen de cover: midden onderaan */
#buddypress #item-header-cover-image #item-header-avatar {
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

#buddypress #item-header-cover-image #item-header-avatar img,
#buddypress #item-header-cover-image #item-header-avatar a img {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
  border: 3px solid var(--vp-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* Profiel bp-header: alleen ruimte voor de uitstekende avatar (44px + 12px) */
#buddypress #item-header-cover-image ~ .bp-header,
#buddypress .bp-header:not(:has(#item-header-content)) {
  padding-top: 56px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}

/* Als bp-header leeg is (profiel plaatst content in cover): collapse */
#buddypress .bp-header:empty {
  padding: 0;
  min-height: 0;
}

/* Navigatietabs: altijd boven avatar */
#buddypress #item-nav,
#buddypress nav.bp-navs,
#buddypress .bp-navs {
  position: relative;
  z-index: 10;
  background: var(--vp-surface);
  border-top: 1px solid var(--vp-border);
  padding: 0 1rem;
}

/* =============================================================================
   3. DIRECTORY CARDS (Leden & Groepen grid)
   ============================================================================= */

#buddypress ul.item-list.vp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--vp-gap);
}

#buddypress ul.item-list.vp-grid > li {
  margin: 0;
  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);
}

#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%;
}

#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;
}

#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);
}

#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;
}

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

/* =============================================================================
   4. ACTIVITEITEN STREAM
   ============================================================================= */

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

#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;
}

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

#buddypress .activity-list .activity-inner {
  padding: .25rem 1rem .75rem;
  font-size: .95rem;
  line-height: 1.55;
  overflow-x: hidden;           /* overflow alleen hier, niet op wrapper */
  overflow-wrap: break-word;
  word-break: break-word;
}

#buddypress .activity-list .activity-inner img {
  max-width: 100%;
  border-radius: 8px;
  margin-top: .5rem;
}

/* Embeds: altijd 100% breed */
#buddypress .activity-list .activity-inner iframe,
#buddypress .activity-list .activity-inner video,
#buddypress .activity-list .activity-inner embed {
  max-width: 100% !important;
  width: 100% !important;
}

/* YouTube/Vimeo aspect-ratio wrapper */
.fluid-width-video-wrapper,
.wp-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.fluid-width-video-wrapper iframe,
.wp-video video {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
}

#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);
}

#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);
}

/* Lange URLs afbreken */
#buddypress .activity-list .activity-inner a,
#buddypress .activity-list .activity-header a {
  overflow-wrap: anywhere;
}

/* ── Activiteit kaart: mobiel stacked layout voor brede embeds ──
   BP Nouveau gebruikt floats (niet flex) voor de avatar.
   Op mobiel: float clearen → avatar + content stacked → embed full width.
── */
@media (max-width: 768px) {

  /* Kaart: blokkeer float overflow */
  #buddypress .activity-list > li {
    overflow: hidden; /* al aanwezig op desktop, herbevestigen */
  }

  /* Avatar-wrapper: float opheffen, avatar links met tekst ernaast */
  #buddypress .activity-list .activity-avatar {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle;
    margin-right: .5rem;
  }

  /* Content: geen float-offset, full width */
  #buddypress .activity-list .activity-content {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    overflow: hidden;
  }

  /* activity-header: avatar en tekst naast elkaar houden */
  #buddypress .activity-list .activity-header {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .75rem .4rem;
  }

  /* activity-inner: volledige breedte, geen margin van avatar */
  #buddypress .activity-list .activity-inner {
    padding: .25rem .75rem .75rem;
    overflow: hidden;
    max-width: 100%;
  }

  /* Embeds: pakken volledige breedte van activity-inner */
  #buddypress .activity-list .activity-inner iframe {
    width: 100% !important;
    max-width: 100% !important;
    display: block;
  }

  /* fluid-width-video-wrapper (Jetpack/FitVids) */
  #buddypress .activity-list .activity-inner .fluid-width-video-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* BP Nouveau omhult YouTube met .entry-content of .activity-content */
  #buddypress .activity-list .activity-inner > .activity-content,
  #buddypress .activity-list .activity-inner > p {
    max-width: 100%;
    overflow: hidden;
  }
}

/* =============================================================================
   5. NAVIGATIETABS (directory + bp-navs)
   ============================================================================= */

/* Desktop: flex-wrap zodat tabs op meerdere regels passen */
#buddypress .item-list-tabs ul,
#buddypress .activity-type-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .5rem 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);
}

/* bp-navs (profiel + groep navigatie): ook pills */
#buddypress nav.bp-navs ul,
#buddypress .bp-navs ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .6rem 0;
  margin: 0;
  list-style: none;
}

#buddypress nav.bp-navs ul li a,
#buddypress .bp-navs ul li a {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: 20px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--vp-muted);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .12s, color .12s;
  white-space: nowrap;
}

#buddypress nav.bp-navs ul li.current a,
#buddypress .bp-navs ul li.current a,
#buddypress nav.bp-navs ul li a:hover,
#buddypress .bp-navs ul li a:hover {
  background: var(--vp-primary);
  color: #fff;
  border-color: var(--vp-primary);
}

/* Paginatie */
.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);
}

/* Link-preview plugin */
.vpe-card, .vpe-live-preview { overflow: hidden; }

/* =============================================================================
   6. RESPONSIVE — tablet ≤768px
   ============================================================================= */

@media (max-width: 768px) {

  #buddypress {
    padding: 1rem .75rem;
    /* GEEN overflow-x:hidden — breekt tab-scrollen */
  }

  /* ── HEADER mobiel ── */
  #buddypress #item-header-cover-image,
  #buddypress #header-cover-image {
    height: 160px;
  }

  /* GROEP avatar: switch naar flow-layout zodat hij werkt
     met én zonder cover-afbeelding.
     position:relative + negatieve margin-top = overlapt cover van onderaf */
  #buddypress #item-header > #item-header-avatar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    margin-top: -36px !important;   /* helft van 72px */
    margin-left: 12px !important;
    margin-bottom: 8px !important;
    z-index: 4;
  }

  #buddypress #item-header > #item-header-avatar img,
  #buddypress #item-header > #item-header-avatar a img {
    width: 72px !important;
    height: 72px !important;
  }

  /* GROEP bp-header: geen offset meer, avatar staat erboven in de flow */
  #buddypress #item-header > .bp-header {
    padding: .75rem 1rem 1rem !important;
  }

  /* PROFIEL avatar (zit in cover): midden-onderaan cover */
  #buddypress #item-header-cover-image #item-header-avatar {
    bottom: -36px !important;
  }

  #buddypress #item-header-cover-image #item-header-avatar img,
  #buddypress #item-header-cover-image #item-header-avatar a img {
    width: 72px !important;
    height: 72px !important;
  }

  /* PROFIEL bp-header: ruimte voor uitstekende avatar */
  #buddypress #item-header-cover-image ~ .bp-header {
    padding-top: 48px !important;
  }

  /* Groepsbeheerder badge: niet over de tekst heen */
  #buddypress #item-header-admin-options,
  #buddypress #item-actions {
    position: static !important;
    float: right;
    margin: 0 0 .5rem .5rem;
  }

  /* Directory: 2 kolommen op tablet */
  #buddypress ul.item-list.vp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  /* Tabs: horizontaal scrollbaar, GEEN nowrap blokkering door parent */
  #buddypress #subnav ul,
  #buddypress .item-list-tabs ul,
  #buddypress .activity-type-tabs ul,
  #buddypress nav.bp-navs ul,
  #buddypress .bp-navs ul {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .25rem;
    /* scrollbar verbergen */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #buddypress #subnav ul::-webkit-scrollbar,
  #buddypress .item-list-tabs ul::-webkit-scrollbar,
  #buddypress .activity-type-tabs ul::-webkit-scrollbar,
  #buddypress nav.bp-navs ul::-webkit-scrollbar,
  #buddypress .bp-navs ul::-webkit-scrollbar {
    display: none;
  }

  #buddypress #subnav li,
  #buddypress .item-list-tabs li,
  #buddypress .activity-type-tabs li,
  #buddypress nav.bp-navs ul li,
  #buddypress .bp-navs ul li {
    flex-shrink: 0 !important;
  }

  /* Link-preview stapelen verticaal */
  .vpe-card, .vpe-live-preview { flex-direction: column; }
  .vpe-card .vpe-thumb, .vpe-live-preview .vpe-thumb {
    width: 100% !important;
    min-width: 0 !important;
    height: 140px !important;
    border-radius: 6px 6px 0 0;
  }
}

/* =============================================================================
   7. RESPONSIVE — mobiel ≤480px
   ============================================================================= */

@media (max-width: 480px) {

  /* Cover op telefoon */
  #buddypress #item-header-cover-image,
  #buddypress #header-cover-image {
    height: 130px;
  }

  /* GROEP avatar 64px — flow-layout */
  #buddypress #item-header > #item-header-avatar {
    margin-top: -32px !important;   /* helft van 64px */
    margin-left: 10px !important;
  }

  #buddypress #item-header > #item-header-avatar img,
  #buddypress #item-header > #item-header-avatar a img {
    width: 64px !important;
    height: 64px !important;
  }

  /* PROFIEL avatar 64px */
  #buddypress #item-header-cover-image #item-header-avatar {
    bottom: -32px !important;
  }

  #buddypress #item-header-cover-image #item-header-avatar img,
  #buddypress #item-header-cover-image #item-header-avatar a img {
    width: 64px !important;
    height: 64px !important;
  }

  #buddypress #item-header-cover-image ~ .bp-header {
    padding-top: 44px !important;
  }

  /* Directory: 1 kolom */
  #buddypress ul.item-list.vp-grid {
    grid-template-columns: 1fr !important;
    gap: .5rem !important;
  }

  /* 1-kolom kaart: horizontale layout */
  #buddypress ul.item-list.vp-grid > li article.bp-card {
    flex-direction: row !important;
    text-align: left !important;
    align-items: center;
    gap: .75rem;
    padding: .75rem !important;
  }

  #buddypress ul.item-list.vp-grid .item-avatar {
    flex-shrink: 0;
    margin-bottom: 0 !important;
  }

  #buddypress ul.item-list.vp-grid .item-avatar img {
    width: 52px !important;
    height: 52px !important;
  }

  #buddypress ul.item-list.vp-grid .item-title,
  #buddypress ul.item-list.vp-grid .item-meta,
  #buddypress ul.item-list.vp-grid .item-desc {
    text-align: left !important;
  }

  #buddypress ul.item-list.vp-grid .action {
    padding-top: .3rem;
    text-align: left !important;
  }

  /* Formulier compact */
  #buddypress #whats-new-form { padding: .75rem; }
}

/* =============================================================================
   BUDDYPRESS — ACTIVITY COMPOSER TOOLBAR
   BP Nouveau verbergt #whats-new-toolbar standaard met class .bp-hide
   (display:none via bp-nouveau.css) en toont hem via JS bij textarea-focus.
   We forceren zichtbaarheid zodat de knoppen altijd bereikbaar zijn.
   ============================================================================= */

/* Formulier container: nooit overflow hidden */
#buddypress #whats-new-form {
  overflow: visible !important;
}

/* Toolbar: altijd zichtbaar, ook als bp-hide class aanwezig is */
#buddypress #whats-new-toolbar,
#buddypress #whats-new-toolbar.bp-hide,
#buddypress .activity-toolbar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Toolbar knoppen horizontaal naast elkaar */
#buddypress .activity-toolbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .5rem 1rem;
  border-top: 1px solid var(--vp-border);
  background: var(--vp-surface);
}

/* Individuele toolbar-knoppen */
#buddypress .activity-toolbar a.toolbar-button,
#buddypress .activity-toolbar button.toolbar-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: var(--vp-muted);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .12s, color .12s;
  cursor: pointer;
  visibility: visible !important;
  opacity: 1 !important;
}

#buddypress .activity-toolbar a.toolbar-button:hover,
#buddypress .activity-toolbar button.toolbar-button:hover {
  background: var(--vp-border);
  color: var(--vp-text);
  border-color: var(--vp-border);
}

/* Dashicons in de knoppen */
#buddypress .activity-toolbar .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* Opties-rij (bericht in: dropdown) */
#buddypress #whats-new-options {
  padding: .5rem 1rem;
  overflow: visible !important;
}

/* Submit-rij */
#buddypress #whats-new-submit {
  padding: .5rem 1rem 1rem;
  display: flex;
  gap: .5rem;
  align-items: center;
}