/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* === HEADER MET LOGO EN ANIMATIE === */
.header--slider {
  position: relative;
  height: 240px;           /* pas aan naar wens */
  overflow: hidden;
  display: flex;
  align-items: center;     /* verticaal centreren */
  justify-content: center; /* horizontaal centreren */
  z-index: 0;              /* basislaag */
}

/* ==== FIX: Extra ruimte boven en onder logo op tablet + desktop ==== */
@media (min-width: 768px) {
  .header--slider {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    height: 280px; /* optioneel: verhoog totale hoogte */
  }
}


/* Sterren-canvas: helemaal achter de content */
#space {
  position: absolute;
  inset: 0;                /* top/right/bottom/left: 0 */
  background: transparent; /* geen vaste kleur; animatie vult dit straks */
  z-index: -1;             /* <— canvas achter logo */
  pointer-events: none;    /* muisinteractie uitschakelen */
}

/* Zorg dat het canvas (#snow-canvas) niet wordt meegenomen als flex-item */
.header--slider > *:not(#space):not(#snow-canvas) {
  position: relative;
  z-index: 2; /* alles boven het canvas */
}



/* Logo zelf */
.header-logo-center img {
  max-height: 230px;
  width: auto;
  display: block;
}

/* HEADER laat zich door het logo bepalen */
#header .header--slider {
  height: auto !important;          /* geen vaste hoogte */
  min-height: unset !important;     /* breekt eerdere min-height */
  padding: 16px 0 !important;       /* wat lucht boven/onder */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Logo schaalt automatisch mee (mobiel → desktop) */
#header .header--slider .header-logo-center img {
  height: clamp(84px, 12vw, 170px) !important;
  /*  min 84px, groeit met viewport (12vw), max 170px  */
  width: auto !important;
  max-height: none !important;      /* breekt evt. caps */
  display: block !important;
  margin: 0 auto !important;
}

/* Tablet iets compacter, fijn-tuning (optioneel) */
@media (max-width: 1024px) {
  #header .header--slider .header-logo-center img {
    height: clamp(80px, 14vw, 140px) !important;
  }
}

/* Mobiel: nog net wat kleiner (optioneel) */
@media (max-width: 600px) {
  #header .header--slider .header-logo-center img {
    height: clamp(72px, 18vw, 110px) !important;
  }
}


/* Wil je het sterren-canvas op desktop wél tonen zonder extra hoogte?
   Positioneer 'm dan absoluut (dus geen flow-hoogte) */
@media (min-width: 601px) {
  #header .header--slider canvas,
  #space {
    position: absolute !important;
    inset: 0 !important;    /* top/right/bottom/left: 0 */
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }
}


/* Desktop */
#header .header--slider .header-logo-center img {
  height: 200px !important;
  width: auto !important;
  max-height: none !important;
}

/* Mobiel */
@media (max-width: 600px) {
  #header .header--slider .header-logo-center img {
    height: 150px !important;
  }
}

/* Snow overlay in header */
.header--slider { position: relative; overflow: hidden; }

#snow-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  z-index: 1; /* logo erboven? geef logo-container z-index:2 */
}

/* Verwijder de 'mobile kill switch' op canvas (die #space/alle canvassen verbergt) */
@media (max-width: 600px){
  #header .header--slider canvas,
  #space { display: block !important; height: auto !important; }
}


/* Zorg dat de header zelf blijft centreren */
.header--slider {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* Sneeuw-canvas = overlay, NIET meedoen als flex-item */
#snow-canvas {
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 1;                 /* achter content */
  flex: 0 0 auto !important;  /* voor de zekerheid: geen flex-bijdrage */
}

/* Alles wat zichtbaar moet blijven (logo/tekst) boven het canvas */
.header--slider .header--logo,
.header--slider .header-logo-center,
.header--slider h1,
.header--slider img {
  position: relative;
  z-index: 2;
}

.header--slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.header--slider > #snow-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: transparent !important;
}

/* --- 2A. Header terug naar gecentreerde flex --- */
#header .header--slider {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;            /* geen extra hoogte */
}

/* --- 2B. Canvas = absolute overlay, niet meedoen met flex/layout --- */
#header .header--slider > #snow-canvas {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  flex: 0 0 auto !important;        /* nooit “flexen” */
  pointer-events: none !important;
  z-index: 0 !important;            /* achter content */
  background: transparent !important;
}

/* --- 2C. Alle andere children boven het canvas --- */
#header .header--slider > *:not(#snow-canvas) {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 auto !important;
}

/* --- 2D. Neutraliseer oude thema-regel die alle canvassen beïnvloedt --- */
#header .header--slider canvas:not(#space) {
  display: block !important;        /* NIET verbergen */
}

/* --- 2E. Extra zekerheid: geen max-width of container-gedrag op het canvas --- */
#header .header--slider > #snow-canvas,
#header .header--slider > #snow-canvas * {
  max-width: none !important;
}

/* --- Header: gecentreerde inhoud + overlay toestaan --- */
#header .header--slider {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;                  /* geen extra lucht die het canvas “korter” oogt */
  min-height: 160px;                      /* pas aan naar wens */
}

/* --- Canvas = absolute overlay, nooit flex-item, achter alles --- */
#header .header--slider > #snow-canvas {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;                  /* ACHTER content */
  background: transparent !important;     /* geen blauwe achtergrond */
}

/* --- Alle andere children (logo/tekst) boven het canvas --- */
#header .header--slider > *:not(#snow-canvas) {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 auto !important;
}

/* --- Neutraliseer eventuele "verberg canvassen"-regel --- */
#header .header--slider canvas:not(#space) {
  display: block !important;
}



/* ==========================================
   MOBIEL – LOGO PERFECT GECENTREERD
   ========================================== */
@media (max-width: 600px) {
  /* 1. De hele header */
  #header .header--slider {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;      /* horizontaal centreren */
    justify-content: center !important;  /* verticaal centreren */
    padding: 14px 0 !important;          /* lucht boven/onder */
    min-height: 150px !important;        /* veilige hoogte */
  }

  /* 2. Het logo zelf */
  #header .header--slider .header--logo,
  #header .header--slider .header-logo-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }

  /* 3. Afbeelding van het logo */
  #header .header--slider .header--logo img,
  #header .header--slider .header-logo-center img {
    display: block !important;
    margin: 0 auto !important;
    height: 120px !important;             /* eventueel iets kleiner/groter maken */
    width: auto !important;
  }
}

/* Extra zekerheid voor iPhones met notch */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 600px) {
    #header .header--slider {
      padding-top: calc(14px + env(safe-area-inset-top)) !important;
    }
  }
}


/* =======================================
   POST-BUTTONS: ALTIJD FULL-WIDTH
   ======================================= */
.post .postbody h3,
.has-profile .postbody h3 {
  float: none !important;
  width: 100% !important;
  margin: 0 0 8px 0 !important;
  padding-top: 0 !important;
}

/* De knoppenrij: flex, geen max-width of float */
.topic--post.post .postbody .post-buttons,
.post .postbody .post-buttons,
.has-profile .post-buttons,
.hasjs .postbody .post-buttons {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  float: none !important;

  width: 100% !important;
  max-width: none !important;   /* altijd zo breed als container */
  margin: 0 0 8px 0 !important;

  display: flex !important;
  flex-wrap: wrap !important;   /* breekt af bij te smal scherm */
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  clear: none !important;
}

/* Clearfix/lege li’s verwijderen */
.post .post-buttons::before,
.post .post-buttons::after {
  content: none !important;
  display: none !important;
}
.post .post-buttons > li:empty {
  display: none !important;
}

/* Items netjes zonder floats/marges */
.post .post-buttons > li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Volgorde: reactions vóór responsive-menu */
.post .post-buttons li.responsive-menu.dropdown-container {
  order: 999 !important;
}
.post .post-buttons li.reactions-launcher {
  order: 998 !important;
}

/* Klikbare hitbox */
.post .post-buttons li a,
.post .post-buttons li button {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.postbody .post-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  max-width: none;
  float: none;
}
.postbody .post-buttons::before,
.postbody .post-buttons::after { content: none; display: none; }
.postbody .post-buttons > li { float: none; margin: 0; list-style: none; }
.postbody .post-buttons > li:empty { display: none; }

/* volgorde: reactions vóór het …-menu */
.postbody .post-buttons li.responsive-menu.dropdown-container { order: 999; }
.postbody .post-buttons li.reactions-launcher { order: 998; }


/* -----------------------------------------
   AVATAR + NAAM NAAST ELKAAR OP MOBIEL
   ----------------------------------------- */
@media (max-width: 700px) {
  /* Forceer het hele profielblok als flex-container */
  .postprofile dt.no-profile-rank.has-avatar,
  .postprofile dt.has-avatar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    position: static !important; /* overschrijft absolute positioning uit forumus-style.css */
    width: 100% !important;
  }

  /* Avatarblok */
  .postprofile .avatar-container {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
  }
  .postprofile .avatar-container img.avatar {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
    border-radius: 50%; /* optioneel */
    display: block;
  }

  /* Naamblok */
  .postprofile .namebox {
    flex: 1 1 auto !important;
    display: block !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Schakel oude positioning regels uit */
  .postprofile dd.profile-posts,
  .postprofile dd.profile-joined,
  .postprofile dd.profile-contact {
    clear: both !important;
  }
}

/* Mobiel: avatar links, naam boven, datum eronder — compacter */
@media (max-width: 700px) {
  .postprofile dt.has-avatar,
  .postprofile dt.no-profile-rank.has-avatar {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 0 !important; /* <-- haalt verticale ruimte weg */
    align-items: center !important;
    width: 100% !important;
  }

  .postprofile .avatar-container {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 40px !important;
    height: 40px !important;
  }

  .postprofile .avatar-container img {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }

  .postprofile .namebox {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
    margin-bottom: 0 !important; /* geen extra ruimte */
    padding-bottom: 0 !important;
  }

  .postprofile .namebox a.username {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #050505 !important;
    line-height: 1.2 !important; /* compacter */
    text-decoration: none !important;
    display: inline-block !important;
  }

  .author-under-name {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: -2px !important; /* <-- subtiel omhoog */
    font-size: 13px !important;
    line-height: 1.2 !important;
    color: #65676b !important;
    font-weight: 400 !important;
  }
}


/* Facebook-achtige naamstijl naast avatar */
@media (max-width: 700px) {
  .postprofile .namebox a.username {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #050505 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
    display: inline-block !important;
  }

  /* Hoverkleur zoals Facebook (donkerder) */
  .postprofile .namebox a.username:hover {
    color: #000000 !important;
    text-decoration: none !important;
  }

  /* Datum eronder met Facebook-stijl */
  .author-under-name {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #65676b !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
  }
}



/* Mobiel: avatar strak rond, 40x40, zonder rand/schaduw */
@media (max-width: 700px) {
  /* container mag niets extra's toevoegen */
  .postprofile .avatar-container {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* soms wordt de “ring” via ::before/::after gezet: uitschakelen */
  .postprofile .avatar-container::before,
  .postprofile .avatar-container::after {
    content: none !important;
    display: none !important;
  }

  /* het <img class="avatar"> zelf */
  .postprofile .avatar-container img.avatar,
  .postprofile .avatar-container a.avatar > img,
  .postprofile .avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: none !important;
    display: block !important;
    object-fit: cover !important;
  }
}

/* Verberg de topic-titel (h3.first) op mobiele schermen */
@media (max-width: 700px) {
  .topic .postbody h3.first,
  .post.has-profile .postbody h3.first,
  .post .postbody h3.first {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* MOBILE ONLY: move post-buttons under content and attachbox */
@media (max-width: 768px) {
  /* The direct wrapper that contains h3.first, ul.post-buttons, p.author, .content, .attachbox */
  .postbody > div[id^="post_content"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Make sure the buttons are visible & not taken out of flow */
  .postbody > div[id^="post_content"] > ul.post-buttons {
    position: static !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    order: 3;
    margin-top: 10px !important;
    justify-content: flex-start !important; /* or center */
    display: flex !important;               /* ensure it's flex on mobile */
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* put content first */
  .postbody > div[id^="post_content"] > .content { order: 1; }

  /* then attachments (if any) */
  .postbody > div[id^="post_content"] > .attachbox { order: 2; }

  /* safety: kill any pseudo clearfix that might push things around */
  .postbody > div[id^="post_content"] > ul.post-buttons::before,
  .postbody > div[id^="post_content"] > ul.post-buttons::after {
    content: none !important;
    display: none !important;
  }
}


/* Verberg reaction-post-bar op mobiele apparaten */
@media (max-width: 768px) {
  .reaction-post-bar {
    display: none !important;
  }
}


/* Verberg rank-afbeelding (bijv. Moderator.png) op mobiele apparaten */
@media (max-width: 768px) {
  .postprofile .rank-inline img {
    display: none !important;
  }
}

/* Verberg rangweergave (inline + dd) op mobiel */
@media (max-width: 768px) {
  dl.postprofile dt.has-profile-rank .rank-inline,
  dl.postprofile .rank-inline,
  dl.postprofile dd.profile-rank,
  dl.postprofile dd.profile-rank img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* Sommige thema-breakpoints gebruiken 700/600px: vang die ook af */
@media (max-width: 700px) {
  dl.postprofile dt.has-profile-rank .rank-inline,
  dl.postprofile .rank-inline,
  dl.postprofile dd.profile-rank,
  dl.postprofile dd.profile-rank img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 600px) {
  dl.postprofile dt.has-profile-rank .rank-inline,
  dl.postprofile .rank-inline,
  dl.postprofile dd.profile-rank,
  dl.postprofile dd.profile-rank img {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}


/* MOBILE ONLY: rank verbergen, rest intact houden */
@media (max-width: 700px) {

  /* Verberg alle rank-uitvoeringen */
  .postprofile .rank-inline,
  .postprofile dd.profile-rank {
    display: none !important;
  }

  /* Herstel het hoofdblok met avatar/naam/datum */
  .postprofile dt.has-profile-rank.has-avatar {
    display: block !important;       /* terug naar normaal */
    height: auto !important;
    min-height: 0 !important;
    line-height: normal !important;
    padding: 0 !important;
    margin: 0 !important;

    /* maak eventuele eerdere grid/flex-forcings ongedaan */
    grid-row: auto !important;
    grid-column: auto !important;
  }

  /* Zorg dat naam en datum netjes onder elkaar staan */
  .postprofile .namebox,
  .postprofile .author-under-name {
    display: block !important;
    margin: 0 !important;
  }
}

/* MOBILE: avatar links, naam en datum rechts */
@media (max-width: 700px) {
  .postprofile dt.has-profile-rank.has-avatar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* ruimte tussen avatar en tekst */
  }

  .postprofile dt.has-profile-rank.has-avatar .avatar-container {
    flex: 0 0 auto !important;
  }

  .postprofile dt.has-profile-rank.has-avatar .namebox {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Zorg dat de datum kleiner en subtiel onder naam komt */
  .postprofile .author-under-name {
    font-size: 13px !important;
    opacity: 0.8;
    margin-top: 1px !important;
  }
}

/* MOBILE: breng de datum (author-under-name) onder de naam in de namebox */
@media (max-width: 700px) {

  /* Zorg dat avatar + namebox naast elkaar staan */
  .postprofile dt.has-profile-rank.has-avatar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Namebox wordt kolom zodat naam en datum onder elkaar staan */
  .postprofile .namebox {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Verplaats datum (author-under-name) visueel onder de naam */
  .postprofile .author-under-name {
    order: 2 !important;              /* zet hem onder de naam */
    display: block !important;
    position: relative !important;
    left: 0 !important;
    top: auto !important;
    margin-top: 2px !important;
    font-size: 13px !important;
    color: #65676b !important;        /* subtiel grijs zoals Facebook */
    opacity: 0.9;
  }

  /* Zorg dat de naam bovenaan blijft */
  .postprofile .namebox .username {
    order: 1 !important;
    font-weight: 600 !important;
  }
}

/* MOBILE: avatar | name, and date under the name (inside the same block) */
@media (max-width: 700px) {

  /* Make the header area a 2x2 grid */
  .postprofile dt.has-profile-rank.has-avatar {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;   /* avatar | name */
    grid-template-rows: auto auto !important;     /* name then date */
    align-items: center !important;
    column-gap: 8px !important;
  }

  /* Avatar on the left, spanning both rows */
  .postprofile dt.has-profile-rank.has-avatar .avatar-container {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
  }

  /* Name on the first row, right column */
  .postprofile dt.has-profile-rank.has-avatar .namebox {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Date directly under the name, same right column */
  .postprofile dt.has-profile-rank.has-avatar .author-under-name {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: block !important;
    float: none !important;
    margin: 2px 0 0 0 !important;
    font-size: 13px !important;
    color: #65676b !important;
  }

  /* Hide the rank line on mobile so it doesn't reserve space */
  .postprofile dt.has-profile-rank.has-avatar .rank-inline {
    display: none !important;
  }
}

@media (max-width: 700px) {
  /* Verwijdert ruimte tussen naam en datum */
  .postprofile dt.has-profile-rank.has-avatar .author-under-name {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Eventuele extra ruimte binnen namebox verwijderen */
  .postprofile dt.has-profile-rank.has-avatar .namebox {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ===== MOBIEL PROFIELKOP (avatar + naam + datum) ===== */
@media (max-width: 700px) {

  /* Zet de dt als grid met 2 kolommen: avatar | tekst */
  .postprofile dt.has-profile-rank.has-avatar {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;   /* 40px avatar, rest tekst */
    grid-template-areas:
      "ava name"
      "ava meta" !important;                      /* datum/ondertitel onder de naam */
    column-gap: 8px !important;
    row-gap: 0 !important;                        /* geen verticale tussenruimte */
    align-items: center !important;
  }

  /* Avatar links */
  .postprofile dt.has-profile-rank.has-avatar .avatar-container {
    grid-area: ava !important;
  }
  .postprofile dt.has-profile-rank.has-avatar .avatar-container img {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 50% !important;
  }

  /* Naam rechts van avatar */
  .postprofile dt.has-profile-rank.has-avatar .namebox {
    grid-area: name !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    line-height: 1.15 !important;
  }

  /* Datum / “author-under-name” ONDER de naam, zonder extra gat */
  .postprofile dt.has-profile-rank.has-avatar .author-under-name {
    grid-area: meta !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    align-self: start !important;
    line-height: 1.15 !important;
  }

  /* Rang verbergen + ruimte wegnemen */
  .postprofile dt.has-profile-rank.has-avatar .rank-inline,
  .postprofile dt.has-profile-rank.has-avatar img.rank,
  .postprofile dt.has-profile-rank.has-avatar .rank {          /* failsafe */
    display: none !important;
  }
}

@media (max-width: 600px) {
  .post .postbody h3 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    color: #050505 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
  }
}


/* Verberg back2top op mobiel */
@media (max-width: 768px) {
  .back2top {
    display: none !important;
  }
}

/* Facebook-achtige gebruikersnaamstijl - alleen op mobiel */
@media (max-width: 768px) {
  .postprofile .namebox .username-coloured,
  .postprofile .namebox a.username,
  .postprofile .namebox a.username-coloured {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 17px !important;
    color: #050505 !important;
    text-decoration: none !important;
  }

  /* overschrijft inline groepskleur van moderators */
  .username-coloured[style] {
    color: #050505 !important;
  }
}




/* ===== FINAL OVERRIDE — MOBILE POST BUTTONS (<=700px) ===== */
@media (max-width: 700px) {

  /* 0) Target de juiste UL met extra hoge specificiteit (wint altijd) */
  html body .topic .topic--post.post .postbody > div[id^="post_content"] > ul.post-buttons,
  html body .post.has-profile .postbody > div[id^="post_content"] > ul.post-buttons,
  html body .hasjs .postbody > div[id^="post_content"] > ul.post-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;         /* één rij, nooit afbreken */
    gap: 0 !important;
    margin: 10px 0 0 0 !important;        /* alleen bovenruimte */
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* 1) Verberg ALLE <li>’s standaard (inclusief “lege” varianten) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 33.333% !important;         /* 3 gelijke kolommen zodra getoond */
  }

  /* 2) Toon alleen de drie gewenste knoppen.
        - Klassieke like: .reactions-launcher
        - Fallback van de extensie: <a class="reaction-button">
        - Quote & Reply (jouw custom <li>’s) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.reactions-launcher,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li:has(> a.reaction-button),
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.quote-btn,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.mobile-post-reply {
    display: flex !important;
  }

  /* 3) Volgorde links → rechts */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.reactions-launcher,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li:has(> a.reaction-button) { order: 1 !important; }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.quote-btn                  { order: 2 !important; }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.mobile-post-reply          { order: 3 !important; }

  /* 4) Knoppen zelf: FB-typografie, transparant, icoon boven label, gelijke hoogte */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #7B2E1F !important;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
                 "Apple Color Emoji","Segoe UI Emoji" !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;

    display: flex !important;
    flex-direction: column !important;    /* icoon boven label */
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;

    min-height: 56px !important;          /* royale, gelijke tap-height */
    padding: 6px 4px !important;
  }

  /* 5) Labels (NL) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.reactions-launcher > a::after,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li:has(> a.reaction-button) > a::after { content: "Vink ik leuk" !important; }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.quote-btn          > a::after { content: "Citeer"  !important; }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.mobile-post-reply  > a::after { content: "Reageer" !important; }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a::after { font: inherit !important; color: inherit !important; }

  /* 6) Icoontjes boven label – Font Awesome 4 (ForumUS) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a::before {
    display: block !important;
    font-family: "FontAwesome" !important;   /* FA4 */
    font-size: 18px !important;
    line-height: 1 !important;
    color: #7B2E1F !important;
    margin: 0 0 4px 0 !important;
    content: "" !important;

  }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.reactions-launcher > a::before,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li:has(> a.reaction-button) > a::before { content: "\f164" !important; } /* 👍 */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.quote-btn         > a::before { content: "\f10d" !important; }       /* “ */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.mobile-post-reply > a::before { content: "\f112" !important; }       /* ↩ */

  /* 7) Verwijder alle inline iconen/rommel (voorkomt dubbele iconen/hoogteverschil) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons li a i,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li a svg,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li a .icon,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li:has(> a.reaction-button) a svg,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li.reactions-launcher .cbb-helper-hidden {
    display: none !important;
  }

  /* 8) Reactions-ext: icon-only breedte uitschakelen */
  html body .postbody > div[id^="post_content"] > ul.post-buttons li.reactions-launcher > a,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li.reactions-launcher a.reaction-button,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li.reactions-launcher a.reaction-button.default-icon,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li:has(> a.reaction-button) > a {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;  /* label zichtbaar */
  }

  /* 9) Het …-menu op mobiel verbergen */
  html body .postbody > div[id^="post_content"] > ul.post-buttons li.responsive-menu,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li.dropdown-container {
    display: none !important;
  }
}


/* --- Mobiele post-buttons: icoon boven, tekst onder en gecentreerd --- */
@media (max-width: 700px) {

  /* Container horizontaal: drie knoppen naast elkaar */
  html body .postbody > div[id^="post_content"] > ul.post-buttons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  /* Elke knop even breed */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li {
    flex: 1 1 auto !important;
    display: flex !important;
  }

  /* De knop zelf (link of button) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > button {
    display: flex !important;
    flex-direction: column !important;    /* icoon boven, tekst onder */
    justify-content: flex-end !important; /* duw inhoud naar onderrand */
    align-items: center !important;       /* horizontaal centreren */
    height: 44px !important;
    padding: 6px 0 !important;
    text-align: center !important;
    line-height: 1.2 !important;
  }

  /* Icoon iets van bovenaf */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a i,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > button i,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a svg,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > button svg {
    margin-bottom: 3px !important;
  }

  /* Tekst absoluut netjes onderin én gecentreerd */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a::after,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > button::after {
    display: block !important;
    margin-top: auto !important;          /* duwt tekst omlaag */
    text-align: center !important;        /* centreren tekst */
    width: 100% !important;
  }
}


/* --- MOBILE: toon alléén Vind ik leuk, Citeer, Reageer; verberg rest --- */
@media (max-width: 700px) {
  /* Verberg alle LI's die NIET onze 3 knoppen zijn (of de fallback van de like-extensie) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > 
  li:not(.reactions-launcher):not(.quote-btn):not(.mobile-post-reply):not(:has(> a.reaction-button)) {
    display: none !important;
  }

  /* Zorg dat de 3 overblijvende knoppen even breed zijn en in 1 rij blijven */
  html body .postbody > div[id^="post_content"] > ul.post-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.reactions-launcher,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li:has(> a.reaction-button),
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.quote-btn,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.mobile-post-reply {
    display: flex !important;
    flex: 1 1 33.333% !important;
  }

  /* Volgorde links→rechts */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.reactions-launcher,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li:has(> a.reaction-button) { order: 1 !important; }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.quote-btn                 { order: 2 !important; }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.mobile-post-reply         { order: 3 !important; }

  /* Icoon boven, label onder en gecentreerd (zoals je nu al hebt) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 44px !important;
    padding: 6px 0 !important;
    text-align: center !important;
  }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a::after {
    margin-top: auto !important;  /* label strak tegen onderrand */
    width: 100% !important;
  }
}


/* === MOBILE: strak centreren + uniforme labels === */
@media (max-width: 700px) {

  /* 1) De knop is een 2-rijen grid: icoon (boven), label (onder) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a {
    display: grid !important;
    grid-template-rows: 1fr auto !important;
    justify-items: center !important;   /* horizontaal midden (icoon + label) */
    align-items: end !important;         /* label tegen onderrand */
    width: 100% !important;
    height: 44px !important;
    padding: 4px 0 !important;
    text-align: center !important;

    /* 2) interne tekst knoppen neutraliseren (we gebruiken ::after als label) */
    font-size: 0 !important;
  }

  /* 3) iconen uit interne markup volledig weg */
  html body .postbody > div[id^="post_content"] > ul.post-buttons li a i,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li a svg,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li a .icon {
    display: none !important;
  }

  /* 4) ons icoon (FontAwesome 4) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a::before {
    content: "" !important;
    font-family: "FontAwesome" !important;
    font-size: 18px !important;          /* echte grootte van het icoon */
    line-height: 1 !important;
    color: #7B2E1F !important;
    margin: 0 0 4px 0 !important;
  }
  /* per knop het juiste icoon */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.reactions-launcher  > a::before,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li:has(> a.reaction-button) > a::before { content: "\f164" !important; } /* 👍 */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.quote-btn           > a::before { content: "\f10d" !important; }      /* “ */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.mobile-post-reply    > a::before { content: "\f112" !important; }      /* ↩ */

  /* 5) ons label (onder), altijd gecentreerd */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a::after {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 14px !important;          /* labelgrootte onafhankelijk van (2) */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #7B2E1F !important;
    margin: 0 !important;
  }
  /* Nederlandse teksten */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.reactions-launcher  > a::after,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li:has(> a.reaction-button) > a::after { content: "Vink ik leuk" !important; }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.quote-btn           > a::after { content: "Citeer" !important; }
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.mobile-post-reply   > a::after { content: "Reageer" !important; }

  /* 6) beveiliging tegen oude paddings/alignments op LI */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
  }
}


/* --- MOBIEL: absoluut centreren per knop (icoon boven, tekst exact midden-onder) --- */
@media (max-width: 700px) {
  /* elk hokje is referentie voor absolute positionering */
  .postbody ul.post-buttons > li > a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 48x !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 0 !important; /* interne ankertest uitschakelen */
    overflow: hidden !important;
  }

  /* icoon exact horizontaal midden bovenin */
  .postbody ul.post-buttons > li > a::before {
    position: absolute !important;
    top: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    font-family: "FontAwesome" !important;   /* FA4 */
    font-size: 12px !important;
    line-height: 1 !important;
    color: #7B2E1F !important;
    margin: 0 !important;
  }

  /* label exact horizontaal midden op de onderrand */
  .postbody ul.post-buttons > li > a::after {
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: block !important;
    width: auto !important;          /* geen rek naar rechts */
    white-space: nowrap !important;  /* niet afbreken */
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #7B2E1F !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* alle inline iconen/verstorende elementen volledig uit */
  .postbody ul.post-buttons li a i,
  .postbody ul.post-buttons li a svg,
  .postbody ul.post-buttons li a .icon {
    display: none !important;
  }
}

/* --- COMPACTERE POST-BUTTONS OP MOBIEL --- */
@media (max-width: 700px) {
  .postbody ul.post-buttons > li > a {
    height: 44px !important;        /* was 60px — lager = compacter */
    padding: 0px 0 !important;      /* iets minder ruimte boven/onder */
  }
  .postbody ul.post-buttons > li > a::before {
    top: 12px !important;            /* icoon iets dichter naar boven */
  }
  .postbody ul.post-buttons > li > a::after {
    bottom: 12px !important;         /* label iets hoger uit de onderrand */
  }
}

/* --- MOBILE: icoon-grootte forceren --- */
@media (max-width: 700px) {
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a::before {
    font-size: 18px !important;   /* kies jouw maat: 12 / 14 / 16 / 18 */
  }
}

/* Toon reaction-post-bar weer op mobiel */
@media (max-width: 768px) {
  .reaction-post-bar {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 8px 4px;
  }
}

/* === MOBILE: verplaats reaction-post-bar onder content, boven post-buttons === */
@media (max-width: 768px) {
  /* De hele post-content wordt flexcontainer met kolommen */
  .postbody > div[id^="post_content"] {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Zet de volgorde expliciet vast */
  .postbody > div[id^="post_content"] > .content { order: 1; }
  .postbody > div[id^="post_content"] > .reaction-post-bar { order: 2; }
  .postbody > div[id^="post_content"] > ul.post-buttons { order: 3; }

  /* Reactions-balk netjes uitlijnen */
  .postbody > div[id^="post_content"] > .reaction-post-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 6px 0 2px 0 !important;
    gap: 6px !important;
  }
}


/* --- COMPACTERE REACTION-LIST (list-scores) --- */
@media (max-width: 768px) {
  .reaction-post-bar .reaction-score-list .list-scores {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;          /* ruimte tussen icoon en naam */
    height: 18px !important;      /* totale hoogte van het balkje */
    min-height: 0 !important;
  }

  /* Icoontjes kleiner */
  .reaction-post-bar .reaction-score-list .list-scores img {
    width: 14px !important;
    height: 14px !important;
  }

  /* Tekst (namen) iets kleiner en subtieler */
  .reaction-post-bar .reaction-score-list .list-scores a,
  .reaction-post-bar .reaction-score-list .list-scores span {
    font-size: 12px !important;
    line-height: 1 !important;
  }
}

/* --- VERBERG DISPLAY-OPTIONS-BAR EN REACTION-BAR OP MOBIEL --- */
@media (max-width: 768px) {
  .display-options-bar,
  .reaction-post-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* --- VERBERG ELEMENTEN OP MOBIEL (display-options-bar, reaction-post-bar, topic--stats) --- */
@media (max-width: 768px) {
  .display-options-bar,
  .reaction-post-bar,
  .topic--stats {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* --- VERBERG ELEMENTEN OP MOBIEL --- */
@media (max-width: 768px) {
  .display-options-bar,
  .reaction-post-bar,
  .topic--stats,
  .navbar.navbar--footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}


/* ==========================================================
   CUSTOM BLOCK: BIJLAGEN (ATTACHMENTS) — VOLLEDIGE RESOLUTIE
   Auteur: Danny den Otter
   Doel: Verwijdert titel "BIJLAGEN", randen en marges,
         en toont afbeeldingen in originele resolutie.
   Bestand: custom.css of colours.css (ForumUS / phpBB)
   ========================================================== */

/* Basis cleanup van de container */
.postbody .attachbox { 
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Verberg de "BIJLAGEN" titel */
.postbody .attachbox > dt { 
  display: none !important;
}

/* Verwijder marges, padding en randen van elementen in de bijlage */
.postbody .attachbox dd,
.postbody .attachbox dt,
.postbody .attachbox .file,
.postbody .attachbox .thumbnail,
.postbody .attachbox .thumbnail dd,
.postbody .attachbox .thumbnail dt {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Verwijder ook ForumUS/Bootstrap rand en achtergrond rond thumbnails */
.thumbnail img,
.dl.thumbnail img,
img.postimage {
  display: block;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important; /* centreren */
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;  /* voorkom automatische verkleining */
  height: auto !important;
}

/* Optioneel: horizontale scroll als afbeelding breder is dan post */
.postbody { 
  overflow-x: hidden;
}

/* ==== FIX: Extra ruimte boven bijlage ==== */
.postbody .attachbox {
  margin-top: 1.5rem;   /* verhoog dit getal als je meer ruimte wilt */
}


/* ---------- GRID CONTAINER ---------- */
.post-attachments-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr); /* basis voor 2 boven / 3 onder */
  gap:.5rem;
  margin-top: 1rem;
}

/* ---------- GRID tegels (A-tags) ---------- */
.post-attachments-grid .att-thumb{
  position:relative;
  display:block;
  width:100%;
  padding-top:100%;              /* vierkant */
  overflow:hidden;
  border-radius:0px;
  background:#f3f3f3;
}

/* lay-out: 1-2 elk 3 kolommen (2 naast elkaar), 3-5 elk 2 kolommen (3 naast elkaar) */
.post-attachments-grid .att-thumb:nth-child(1),
.post-attachments-grid .att-thumb:nth-child(2){ grid-column:span 3; }
.post-attachments-grid .att-thumb:nth-child(3),
.post-attachments-grid .att-thumb:nth-child(4),
.post-attachments-grid .att-thumb:nth-child(5){ grid-column:span 2; }

/* >5 niet tonen maar wel in DOM voor lightbox */
.post-attachments-grid .att-thumb.att-hidden{ display:none; }

/* ---------- IMG binnen de tegel: absolute + cover ---------- */
.post-attachments-grid .att-thumb img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  max-width:none !important;
  max-height:none !important;
}

/* phpBB/ForumUS forceert soms max-height/width op postimage: neutraliseren BINNEN grid */
.post-attachments-grid img.postimage{
  max-height:none !important;
  width:100% !important;
  height:100% !important;
}

/* Hover feedback */
.post-attachments-grid .att-thumb:hover img{
  transform:scale(1.03);
  transition:transform .2s ease;
}

/* “Nog X” overlay */
.post-attachments-grid .att-more-badge{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-weight:700; color:#fff;
  font-size:clamp(14px,2.5vw,28px);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  background:rgba(0,0,0,.35);
  border-radius:8px;
  pointer-events:none;
}

/* ---------- Lightbox: voorkom dat forum-CSS lekt ---------- */
.glightbox-container img{
  max-width:100% !important;
  max-height:100vh !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}


/* ============================================================
   HEADER: Extra ruimte boven en onder logo op tablet + desktop
   ============================================================ */
@media (min-width: 768px) {
  body .wrapper #header .header--slider {
    height: 280px !important;         /* totale hoogte header */
    padding-top: 24px !important;     /* extra ruimte boven logo */
    padding-bottom: 24px !important;  /* extra ruimte onder logo */
  }
}
/* ==== Einde FIX: header spacing tablet + desktop ==== */


/* ==== Tablet-portrait (601–767px): extra ruimte in header ==== */
@media (min-width: 601px) and (max-width: 767.98px) {
  body .wrapper #header .header--slider {
    height: 260px !important;      /* pas aan naar smaak */
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* als je snow-canvas gebruikt, laat die ook meeschalen */
  #header .header--slider #snow-canvas {
    height: 100% !important;
    width: 100% !important;
  }
}

//* =======================================================
   HEADER-AVATAR: PERFECT ROND, CORRECT UITGELIJND
   ======================================================= */
.header-member-info .member-profile--toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;          /* vierkant houden */
  height: 30px !important;
  border-radius: 50% !important;   /* klikvlak ook rond */
  overflow: hidden !important;
  padding: 0 !important;
}

.header-member-info .member-profile--toggle img.avatar {
  width: 30px !important;          /* vul container */
  height: 30px !important;
  aspect-ratio: 1 / 1 !important;  /* forceer perfecte cirkel */
  border-radius: 50% !important;   /* maak het echt rond */
  object-fit: cover !important;    /* geen vervorming, netjes croppen */
  border: none !important;
  box-shadow: none !important;
  display: block !important;
}

/* Plaats caret rechts van de avatar in de header */
.header-member-info .member-profile--toggle {
  display: flex;
  align-items: center;
  gap: 4px; /* ruimte tussen avatar en caret */
}

.header-member-info .member-profile--toggle img.avatar {
  display: inline-block !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  vertical-align: middle !important;
}

.header-member-info .member-profile--toggle span.caret {
  display: inline-block;
  margin-left: 4px;
  vertical-align: middle;
}

/* === 1) ICON SET LADEN: Material Symbols Outlined (outline stijl) === */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300..700,0..1,-50..200');

/* === MOBILE (<=700px): Facebook-achtige outline-iconen met Font Awesome 4 === */
@media (max-width: 700px) {

  /* labels: system UI + goud */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a::after {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 600 !important;
    color: #F8D398 !important;
  }

  /* basis voor alle drie iconen */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li > a::before {
    font-family: "FontAwesome" !important;  /* FA4 die al in je theme zit */
    font-style: normal !important;
    font-weight: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* mooie maat + kleur */
    font-size: 20px !important;            /* <— pas hier de icoongrootte aan */
    color: #F8D398 !important;

    /* wis oude outline-hacks */
    -webkit-text-stroke: 0 !important;
    text-stroke: 0 !important;
  }

  /* specifieke glyphs (outline varianten) */
  /* Vind ik leuk → thumbs-o-up */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.reactions-launcher > a::before,
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li:has(> a.reaction-button) > a::before {
    content: "\f087" !important; /* thumbs-o-up (outline) */
  }

  /* Citeer → comment-o (spreekballon) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.quote-btn > a::before {
    content: "\f0e5" !important; /* comment-o (outline) */
  }

  /* Reageer → share (FB-achtige pijl) */
  html body .postbody > div[id^="post_content"] > ul.post-buttons > li.mobile-post-reply > a::before {
    content: "\f064" !important; /* share */
  }

  /* voorkom dubbele iconen uit inline <i>/<svg> */
  html body .postbody > div[id^="post_content"] > ul.post-buttons li a i,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li a svg,
  html body .postbody > div[id^="post_content"] > ul.post-buttons li a .icon {
    display: none !important;
  }
}

/* === FIX: afstand tussen icoon en tekst in mobiele post-buttons === */
@media(max-width:700px){
  .post-buttons li a{display:flex;flex-direction:column;align-items:center;gap:6px}
}


/* --- Rank-afbeelding (Beheerder) verkleinen op profielpagina --- */
.wall-user-details img[src*="images/ranks/"] {
  width: 35px !important;      /* pas de breedte aan naar wens, bv. 60px of 80px */
  height: auto !important;     /* behoud verhoudingen */
  display: inline-block;
  vertical-align: middle;
}