/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			prosilver (the default phpBB 3.3.x style)
	Based on style:
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		phpBB Limited ( https://www.phpbb.com/ )
    --------------------------------------------------------------
*/

@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=3a7fafb1");
@import url("utilities.css?hash=1034bac8");
@import url("common.css?hash=70bd1301");
@import url("links.css?hash=da040ebb");
@import url("content.css?hash=2ca4ae91");
@import url("buttons.css?hash=15c14833");
@import url("cp.css?hash=5cc9ac0c");
@import url("forms.css?hash=18ee8211");
@import url("icons.css?hash=dbc0f3b9");
@import url("colours.css?hash=3b03ccfa");
@import url("responsive.css?hash=a1546011");

/* laad eigen overrides (wordt gecachet met assets_version) */
@import url("custom.css?av={T_ASSETS_VERSION}");

/* ==========================================
   FACEBOOK-TYPOGRAFIE ALLEEN IN BERICHTEN
   ========================================== */

/* hogere specificiteit om ForumUS-regels te winnen */
.postbody .content,
.postbody .content * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  color: #050505 !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ==== AVATAR BOVEN, TEKST ERONDER — desktop 150 / mobiel 100 ==== */

/* Maten */
:root { --avatar-size: 150px; --avatar-gap: 12px; }
@media (max-width: 700px) { :root { --avatar-size: 100px; --avatar-gap: 10px; } }

/* Niets afkappen in de kop */
.postprofile,
.postprofile dt,
.postprofile dd,
.postprofile .avatar-container { overflow: visible !important; }

/* ---- Kopblok (DT): STACK ---- */
.postprofile dt {
  display: block !important;
  min-height: 0 !important;
  text-align: left !important;
}

/* Avatar-container: blok, links, met ruimte eronder */
.postprofile .avatar-container {
  display: block !important;
  width: var(--avatar-size) !important;
  margin: 0 0 var(--avatar-gap) 0 !important;
}

/* Cirkel (wrapper) met ring + schaduw; clip hier */
.postprofile a.avatar {
  display: block !important;
  width: 100% !important;
  height: var(--avatar-size) !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 10px rgba(0,0,0,.25);
  margin: 0 !important;
}

/* Afbeelding vult de cirkel */
.postprofile a.avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Thema-resets die de img knijpen */
.postprofile .avatar img {
  max-width: none !important;
  max-height: none !important;
}

/* Naam en rang ONDER de avatar (stack) */
.postprofile .author {
  display: block !important;
  margin: 0 0 6px 0 !important;
}

/* ==== RANG: geen dubbele weergave en vaste hoogte ==== */

/* Desktop: inline-rank verbergen; gebruik alleen dd.profile-rank */
.postprofile dt .rank-inline { 
  display: none;
}

/* Rang-icoon nooit groter dan 45px */
.postprofile dt .rank-inline img,
.postprofile dd.profile-rank img {
  height: 45px !important;
  max-height: 45px !important;
  width: auto !important;
}

/* ==== MOBIEL: avatar links | naam + rank rechts ==== */
@media (max-width:700px){
  /* Headerregel: avatar + namebox naast elkaar */
  .postprofile dt{
    display:flex !important;
    align-items:flex-start;
    gap:14px;
  }

  /* Avatar links, vaste maat */
  .postprofile .avatar-container{
    width:100px;
    height:100px;
    margin:0;
    flex:0 0 100px;
  }
  .postprofile a.avatar{
    width:100%;
    height:100%;
  }

  /* Naam + rank rechts in één kolom */
  .postprofile dt .namebox{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }

  /* Toon inline-rank; verberg dd-rank op mobiel */
  .postprofile dt .rank-inline{ display:block; line-height:1.2; }
  .postprofile dd.profile-rank{ display:none !important; }

  /* Naam iets dichter op de rank */
  .postprofile .author,
  .postprofile a.username-coloured{ margin:0 0 2px 0; }
}




/* ===== DESKTOP (default): inline-rank verbergen, oude dd-profilerank gebruiken ===== */
.postprofile dt .rank-inline { 
  display: none;
}
/* Rang-icoon: nooit groter dan 45px, overal */
.postprofile dt .rank-inline img,
.postprofile dd.profile-rank img {
  height: 45px !important;
  max-height: 45px !important;
  width: auto !important;
}

/* Desktop: geef span.avatar dezelfde look als a.avatar */
.postprofile a.avatar,
.postprofile .avatar,
.profile-avatar a.avatar,
.profile-avatar .avatar,
.memberlist a.avatar,
.memberlist .avatar,
.group-title a.avatar,
.group-title .avatar {
  display:block;
  width:var(--avatar-size);
  height:var(--avatar-size);
  box-sizing:border-box;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
  border:3px solid #fff;
  box-shadow:0 0 10px rgba(0,0,0,.25);
}

.postprofile .avatar img,
.profile-avatar .avatar img,
.memberlist .avatar img,
.group-title .avatar img {
  width:100%;
  height:100% !important;
  object-fit:cover;
  border:0;
  box-shadow:none;
}

/* Mobiel: géén ring/schaduw */
@media (max-width:700px){
  .postprofile a.avatar, .postprofile .avatar,
  .profile-avatar a.avatar, .profile-avatar .avatar,
  .memberlist a.avatar, .memberlist .avatar,
  .group-title a.avatar, .group-title .avatar {
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }
}