/* =========================================================
   Community Hub Clean — MOBILE.CSS (≤ 980px)
   - Alleen mobiele overrides; geen desktop/global CSS hier
   - Desktop/global -> theme.css
   ========================================================= */

@media (max-width: 980px){

  /* 1) Header & navigatie: toon burger, verberg desktop menu/user */
  .ch-nav{ display:none; }
  .ch-user{ display:none; }
  .ch-burger{ display:inline-flex; }

  /* 2) Layout: content boven, sidebar eronder (1 kolom) */
  .ch-main{ grid-template-columns:1fr; }
  .ch-sidebar{ order:2; }

  /* 3) User naam eventueel tonen in dropdown in de toekomst
     (nu verborgen op desktop in theme.css; hier nog steeds verborgen) */
  /* .ch-user-name{ display:inline; } */

  /* 4) Mobiel slide-in panel – micro-aanpassingen voor small screens
     (basis staat in theme.css; hier eventueel spacing/font-sizes verfijnen) */
  .ch-mobile-inner{ width:min(360px, 92vw); }
  .ch-mobile-menu a{ padding:12px; }        /* grotere tap targets */
  .ch-mobile-auth a{ padding:12px; }

  /* 5) MOBIEL SUBMENU’S (accordion)
     - Zorgt dat children onder de parent inklappen/uitklappen
     - Parent blijft klikbaar; caret is toggler
  */
  .ch-mobile-menu li{ position: relative; }
  .ch-mobile-menu .sub-menu{
    display: none;
    padding-left: 14px;
    margin: 6px 0 4px;
    border-left: 1px dashed var(--ch-border);
  }
  .ch-mobile-menu li.is-open > .sub-menu{ display:block; }

  /* toggle-knop naast parent */
  .ch-sub-toggle{
    position: absolute; right: 6px; top: 6px;
    background: transparent; border: 0; width: 34px; height: 34px;
    border-radius: 8px; cursor: pointer;
  }
  .ch-sub-toggle:focus{ outline: 2px solid rgba(255,255,255,.35); outline-offset: 2px; }

  /* caret icoon */
  .ch-sub-toggle::before{
    content: ""; display: inline-block; width: 8px; height: 8px;
    border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg); transition: transform .15s ease;
  }
  li.is-open > a + .ch-sub-toggle::before{ transform: rotate(-135deg); }
  
  /* ruimte voor caret naast parent-link */
  .ch-mobile-menu > li.menu-item-has-children > a{ padding-right: 44px; }
  .ch-mobile-menu li.menu-item-has-children > a{ position: relative; display:block; }

  /* 6) BuddyPress mobiele verfijningen (optioneel)
     - laat voorlopig leeg of voeg hier mobiele tweaks toe die afwijken van desktop
  */
	
/* ===== MOBILE LAYOUT FIX (BuddyPress + theme wrappers) ===== */

/* 0) Buiten-wrappers: full width + veilige padding, geen grid op mobiel */
body.activity .ch-main,
body.groups   .ch-main,
body.members  .ch-main,
body.register .ch-main,
body.activate .ch-main {
  display: block !important;            /* breek uit theme-grid */
  grid-template-columns: none !important;
}

.ch-container,
.ch-main,
#buddypress,
#buddypress .bp-wrap {
  max-width: 100% !important;
  width: 100% !important;
}

.ch-container,
.ch-main {
  padding-left: 12px;
  padding-right: 12px;
  margin: 0 auto;
  overflow-x: clip;                      /* voorkom horizontale scroll */
}

/* 1) Activity: avatar + content als flex (stabieler dan grid icm thema) */
#buddypress .activity-list { margin: 0; padding: 0; }
#buddypress .activity-list > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;                         /* binnenmarge kaartje */
  box-sizing: border-box;
}

/* Perfect ronde avatars op mobiel */
#buddypress .activity-list > li .activity-avatar {
  flex: 0 0 48px !important;  /* vaste basis in flex */
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  line-height: 0;              /* voorkomt rare inline-height invloeden */
  margin: 0 !important;
  align-self: flex-start;
  box-sizing: content-box;
}

/* De link binnen de avatar ook forceren */
#buddypress .activity-list > li .activity-avatar a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* De image zelf + generieke .avatar-class volledig laten vullen */
#buddypress .activity-list > li .activity-avatar img,
#buddypress .activity-list > li .activity-avatar .avatar {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;  /* overschrijft evt. max-width:100% hacks */
  object-fit: cover !important;
  border-radius: 50% !important;
}

#buddypress .activity-list > li .activity-content {
  flex: 1 1 auto;
  min-width: 0;                          /* laat content krimpen ipv uitduwen */
  margin: 0 !important;
}

/* 2) Typografie: normale afbreking (geen letter-per-regel) */
#buddypress .activity-content,
#buddypress .activity-inner,
#buddypress .activity-header {
  overflow-wrap: break-word;             /* ipv anywhere */
  word-break: normal;
  hyphens: auto;
}
#buddypress .activity-header { font-size: 14px; line-height: 1.35; }
#buddypress .activity-inner  { font-size: 16px; line-height: 1.5; }

/* 3) Media & embeds schalen binnen de kolom */
#buddypress .activity-inner img,
#buddypress .activity-inner video,
#buddypress .activity-inner iframe,
#buddypress .activity-inner .wp-embedded-content {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}
#buddypress .activity-inner table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* 4) Subnav als swipebare chips */
#buddypress .subnav {
  overflow-x: auto; white-space: nowrap;
  -ms-overflow-style: none; scrollbar-width: none;
  margin: 8px 0;
}
#buddypress .subnav::-webkit-scrollbar { display: none; }
#buddypress .subnav ul { display: inline-flex; gap: 8px; padding: 0; }
#buddypress .subnav ul li a {
  display: inline-block; padding: 6px 10px; border-radius: 999px;
  background: rgba(0,0,0,.06);
}
#buddypress .subnav ul li.current a { background: rgba(10,88,202,.12); }

/* 5) Zoekbalk & composer klikvriendelijk */
#buddypress .dir-form .dir-search { margin: 8px 0; }
#buddypress .dir-form .dir-search input[type="search"] { width: 100%; font-size: 16px; }
#whats-new-form textarea#whats-new { min-height: 96px; font-size: 16px; }
#whats-new-submit, #whats-new-post-in-box select { font-size: 16px; }

/* 6) Reactions: palette gecentreerd en binnen viewport */
#buddypress .activity-meta.action {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 6px; position: relative; z-index: 1; overflow: visible;
}
#buddypress .vp-reactions.vp-onebtn .vp-react-main { padding: 9px 12px; }
#buddypress .vp-reactions.vp-onebtn .vp-react-palette {
  left: 50%; bottom: calc(100% + 10px);
  transform: translate(-50%, 10px) scale(.98);
}
#buddypress .vp-reactions.vp-onebtn.is-open .vp-react-palette {
  transform: translate(-50%, 0) scale(1);
}
#buddypress .vp-reactions.vp-onebtn .vp-react-opt { padding: 8px 10px; }
#buddypress .vp-reactions.vp-onebtn .vp-react-emoji { font-size: 1.35rem; }
#buddypress .vp-reactions.vp-onebtn.is-open::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 12px; pointer-events: auto;   /* hover/duim brug */
}

/* 7) Notificaties: datum onder titel op heel smal */
@media (max-width: 560px) {
  #buddypress table.notifications td.notification-since {
    display: block; text-align: left; padding-top: 2px;
  }
}

/* 8) Laatste vangnet */
html, body { overflow-x: hidden; }



  /* #buddypress .activity-list > li { } */

  /* 7) JE EIGEN MOBIELE OVERRIDES (plaats hieronder je toekomstige mobile tweaks)
     - Houd het per component gegroepeerd
  */
  /* === jouw mobiele aanpassingen hieronder === */
}
/* Verberg hamburger op desktop */
@media (min-width: 981px){
  .ch-burger{ display: none !important; }
}

/* Toon + style hamburger op mobiel */
@media (max-width: 980px){
  .ch-burger{
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 32px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ch-text, #fff); /* wit als fallback */
  }
  .ch-burger span{
    display: block;
    width: 100%;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
  }
}

/* ========== Mobiele thema-toggle als menu-item ========== */
.ch-mobile-auth .ch-theme-toggle{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:12px; border-radius:10px; border:0;
  background:var(--ch-surface-2); color:var(--ch-text);
  text-align:left; cursor:pointer;
}
.ch-mobile-auth .ch-theme-toggle:hover{ background:var(--ch-surface); }
.ch-theme-toggle .ch-icon{ width:18px; height:18px; opacity:.9; }

/* Toon contextueel: in 'light' zie je de maan (om naar donker te gaan),
   in 'dark' zie je de zon (om naar licht te gaan) */
html[data-theme="light"] .ch-icon-sun{ display:none; }
html[data-theme="dark"]  .ch-icon-moon{ display:none; }