:root{
  /* Layout widths (kun je via admin injecten met <style> als je wilt) */
  --siteW: 860px;
  --leftW: 230px;
  --midW: 596px;
  --rightW: 230px;

  /* Colors */
  --border:#000;
  --white:#fff;
  --red:#d70000;
  --text:#111;

  /* Spacing */
  --gap: 6px;
  --b: 2px;
}

/* ===== Base ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);

  /* Background (zoals monzaradio.nl) */
   background: url("/assets/img/bg/background.jpg") 55% center/cover fixed no-repeat;

}

/* ===== Header banner (wisselend) ===== */
.heroHeader{
  width: var(--siteW);
  margin: 0 auto;
  border-left: var(--b) solid var(--border);
  border-right: var(--b) solid var(--border);
}
.heroHeader img{
  width:100%;
  height:auto;
  display:block;
  border-bottom: var(--b) solid var(--border);
}

/* ===== Red menu bar (klassiek) ===== */
.top{
  width: var(--siteW);
  margin: 0 auto;
  background: var(--red);
  border-left: var(--b) solid var(--border);
  border-right: var(--b) solid var(--border);
  border-bottom: var(--b) solid var(--border);
}
.top__inner{
  padding: 6px 10px;
  text-align:center;
}
.nav{
  display:inline-flex;
  gap: 14px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size: 13px;
  text-transform: uppercase;
}
.nav a:hover{
  text-decoration: underline;
}

/* ===== 3 columns grid (exact Monza) ===== */
.layout{
  width: var(--siteW);
  margin: 0 auto;
  display:grid;
  grid-template-columns: var(--leftW) var(--midW) var(--rightW);
  gap: var(--gap);

  border-left: var(--b) solid var(--border);
  border-right: var(--b) solid var(--border);
  background: transparent;

  /* IMPORTANT: voorkomt dat kolommen mee-rekken met de langste kolom */
  align-items:start;
}

.sidebar, .content{
  padding: 0;
  background: transparent;
}

/* ===== Widget blocks (witte box met zwarte rand) ===== */
.widget{
  background: var(--white);
  border: var(--b) solid var(--border);
  margin: 0 0 8px 0;
}

/* Titlebar: rood + zwarte scheiding onder */
.widget__title{
  background: var(--red);
  border-bottom: var(--b) solid var(--border);
  padding: 3px 6px;
  text-align:center;

  /* voorkomt “stretchen” */
  line-height: 0;
}

/* jouw PNG title bars: altijd zelfde hoogte */
.widget__title .wtitleimg{
  display:inline-block;
  height: 26px;   /* exact zoals origineel */
  width: auto;
  max-width: 100%;
}

/* fallback tekst titel */
.widget__title .wtitletext{
  display:inline-block;
  line-height: 1.2;
  color:#fff;
  font-weight:800;
  font-size: 13px;
  text-transform: uppercase;
}

/* widget body */
.widget__body{
  padding: 8px;
  font-size: 13px;
  color: #111;
}

/* Images inside widgets should never overflow */
.widget__body img{
  max-width:100%;
  height:auto;
  display:block;
}

/* ===== Center column (Home: player + chat) ===== */
.content.card{
  background: transparent;
  border: 0;
  padding: 0;
}

/* Het “middenblok” moet als 1 witte box werken */
.homeCenter{
  background: var(--white);
  border: var(--b) solid var(--border);
  padding: 0;
  margin: 0; /* geen extra ruimte die “hoogte” gek maakt */
}

/* Player bovenaan: exact strak */
.homePlayer{
  background:#fff;
  border-bottom: var(--b) solid var(--border);
}
.homePlayer iframe{
  width:100%;
  display:block;
  border:0;
}

/* Chat: iframe vult z’n hoogte, maar veroorzaakt geen extra page layout bugs */
.homeChat iframe{
  width:100%;
  display:block;
  border:0;
  background:#000;
}

/* ===== Footer (klassiek rood) ===== */
.foot{
  width: var(--siteW);
  margin: 0 auto 18px auto;
  background: var(--red);
  color:#fff;

  border-left: var(--b) solid var(--border);
  border-right: var(--b) solid var(--border);
  border-bottom: var(--b) solid var(--border);

  /* geen extra ruimte boven */
  margin-top: 0;
}
.foot__inner{
  padding: 6px 10px;
  font-size: 12px;
  text-align:center;
}

/* ===== Admin / forms (veilig, zonder je front-end te slopen) ===== */
.wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

/* Admin cards (zacht) */
.card{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 14px;
  background: rgba(0,0,0,.55);
  color:#fff;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:8px 10px;
  border-radius: 9px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{
  background: rgba(255,255,255,.12);
}

/* Inputs (admin) */
input, select, textarea{
  font-family: inherit;
}

/* ===== Mobile stack ===== */
@media (max-width: 920px){
  :root{
    --siteW: calc(100% - 16px);
    --leftW: 1fr;
    --midW: 1fr;
    --rightW: 1fr;
  }

  .layout{ grid-template-columns: 1fr; }

  .heroHeader, .top, .foot{
    width: var(--siteW);
  }
}