/* =====================================================================
   Kempische Biljart Bond - herbouw kbb02-uiterlijk voor Joomla 4/5
   ===================================================================== */

:root{
  --kbb-blue:#3a6ea5;
  --kbb-blue-dark:#2b5580;
  --kbb-blue-top:#5a8fc0;
  --kbb-blue-bot:#2c5a89;
  --kbb-navy:#1f3a5f;
  --kbb-link:#2b6cb0;
  --kbb-text:#333;
  --kbb-gray-bg:#e7e7e7;
}

*{box-sizing:border-box;}

body.tpl-kbb{
  margin:0;
  font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--kbb-text);
  background:#dcdcdc url("../images/page.jpeg") repeat;
  background-attachment:fixed;
}

img{max-width:100%;height:auto;}
a{color:var(--kbb-link);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- Container ---- */
.kbb-wrap{
  max-width:1080px;
  margin:22px auto;
  background:#ffffff;
  border-radius:10px;
  box-shadow:0 2px 14px rgba(0,0,0,.28);
  overflow:hidden;
}

/* ---- Header (logo + biljart-hero in één banner) ---- */
.kbb-header{line-height:0;background:#fff;}
.kbb-header-img{width:100%;display:block;}

/* ---- Body: zijbalk + hoofdinhoud ---- */
.kbb-body{
  display:flex;
  gap:22px;
  padding:22px;
  align-items:flex-start;
}
.no-sidebar .kbb-body{display:block;}

.kbb-sidebar{
  flex:0 0 250px;
  max-width:250px;
}
.kbb-main{
  flex:1 1 auto;
  min-width:0;
}

/* ---- Modules met blauwe gradient-titelbalk ---- */
.kbb-module{margin:0 0 22px;}
.kbb-module-title{
  margin:0;
  padding:9px 14px 9px 30px;
  font-size:15px;
  font-weight:bold;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  background:linear-gradient(to bottom, var(--kbb-blue-top), var(--kbb-blue-bot));
  border-radius:7px 7px 0 0;
  position:relative;
  border:1px solid #24507c;
  border-bottom:none;
}
.kbb-module-title::before{
  content:"";
  position:absolute;left:12px;top:50%;
  width:8px;height:8px;margin-top:-4px;
  background:#ffd23f;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.5);
}
.kbb-module-content{
  border:1px solid #cfd8e2;
  border-top:none;
  border-radius:0 0 7px 7px;
  background:#f6f8fb;
  padding:12px 14px;
}
.kbb-module-content img{border-radius:3px;}

/* ---- Menu ---- */
.kbb-sidebar ul{list-style:none;margin:0;padding:0;}
.kbb-sidebar ul.mod-menu li,
.kbb-sidebar ul li{
  border-bottom:1px solid #e2e8f0;
}
.kbb-sidebar ul li:last-child{border-bottom:none;}
.kbb-sidebar ul li a{
  display:block;
  padding:7px 6px 7px 18px;
  color:var(--kbb-link);
  position:relative;
  font-weight:600;
}
.kbb-sidebar ul li a::before{
  content:"";                /* klein rondje zoals het origineel */
  position:absolute;left:5px;top:50%;margin-top:-3px;
  width:5px;height:5px;border:1px solid #7a9ac0;border-radius:50%;
}
.kbb-sidebar ul li a:hover{background:#eef3f9;text-decoration:none;}
.kbb-sidebar ul li.current > a,
.kbb-sidebar ul li.active > a{color:var(--kbb-navy);}

/* partners-blok */
.kbb-module-content p{margin:0 0 10px;}
.kbb-module-content p:last-child{margin-bottom:0;}

/* ---- Hoofdinhoud ---- */
.kbb-main h1,.kbb-main h2,.kbb-main h3,
.kbb-main .page-header h1,
.kbb-main .item-page h2{
  color:var(--kbb-navy);
  font-weight:bold;
  line-height:1.2;
}
.kbb-main h1{font-size:30px;margin:.1em 0 .5em;}
.kbb-main h2{font-size:24px;}
.kbb-main .item-page{margin:0;}
.kbb-main p{margin:0 0 1em;}
hr{border:none;border-top:1px solid #d8dde3;margin:1.2em 0;}

/* welkom-titel bovenaan (module/artikeltitel) */
.kbb-main .moduletable,.kbb-main .kbb-module{margin-bottom:16px;}

/* ---- Footer ---- */
.kbb-footer{
  background:linear-gradient(to bottom,#565656,#3a3a3a);
  color:#e8e8e8;
  border-radius:0 0 10px 10px;
}
.kbb-footer-inner{
  padding:14px 22px;
  text-align:center;
  font-size:12px;
}
.kbb-footer-inner p{margin:0;}
.kbb-footer a{color:#cfe0f2;}

/* ---- Responsive ---- */
@media (max-width:780px){
  .kbb-body{flex-direction:column;}
  .kbb-sidebar{flex-basis:auto;max-width:100%;width:100%;}
  .kbb-wrap{margin:0;border-radius:0;}
}