/* skateparken.nl — de vormtaal van de oude Transmission-site (2006), opnieuw opgebouwd */
:root {
  --rood: #f00000;
  --zwart: #000;
  --grijs: #7c7c7c;
  --tekst: #1a1a1a;
  --zacht: #696969;
  --kolom: 230px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--tekst);
  font: 15px/1.6 Verdana, Geneva, Helvetica, Arial, sans-serif;
}
a { color: var(--zacht); font-weight: bold; text-decoration: none; }
a:hover, a:focus-visible { color: var(--rood); }

/* het blad met de schaduwrandjes van toen */
.blad {
  max-width: 1000px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-shadow: -14px 0 18px -14px rgba(0,0,0,.35), 14px 0 18px -14px rgba(0,0,0,.35);
}

/* kop: logo links, zwart-witfoto rechts */
.kop {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 130px;
  overflow: hidden;
  background: #fff;
}
.logo { display: block; flex: none; }
.logo img { display: block; height: 130px; width: auto; }
.sfeer { display: block; height: 130px; width: auto; max-width: 55%; object-fit: cover; object-position: right; }

/* zwarte menubalk */
.menu {
  background: var(--zwart);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 22px;
  padding: 5px 12px;
}
.menu a { color: #fff; font-size: 13px; font-weight: normal; white-space: nowrap; line-height: 1.8; }
.menu a:hover, .menu a[aria-current] { color: var(--rood); }
.grijs { height: 8px; background: var(--grijs); }

/* romp: rode kolom + inhoud */
.romp { flex: 1; display: grid; grid-template-columns: var(--kolom) 1fr; }
.zij {
  background: var(--rood) url(/img/trap.png) no-repeat left 0 bottom 90px;
  padding: 28px 16px 240px 22px;
}
.zijkop { display: none; margin: 0 0 8px; color: #fff; font: bold 15px/1.3 Arial, Helvetica, sans-serif; }
.sub { list-style: none; margin: 0; padding: 0; }
.sub li { margin: 0 0 5px; line-height: 1.35; }
.sub a { color: #fff; font-size: 13px; font-weight: bold; }
.sub a::before { content: "– "; }
.sub a:hover, .sub a[aria-current] { text-decoration: underline; color: #fff; }

.inhoud { padding: 26px 34px 40px; min-width: 0; }

/* de rode kopbalk met het witte pijltje */
.doos { max-width: 640px; margin: 0 0 30px; }
.balk {
  margin: 0;
  background: var(--rood) url(/img/pijl.png) no-repeat 9px 50%;
  color: #fff;
  font: bold 14px/1.4 Arial, Helvetica, sans-serif;
  padding: 5px 10px 5px 24px;
}
.balk a { color: #fff; }
.balk a:hover { color: #fff; text-decoration: underline; }
.balk time { font-weight: normal; opacity: .85; margin-left: .35em; white-space: nowrap; }
.balk time::before { content: "– "; }
h1.balk { font-size: 16px; }
.tekst {
  padding: 16px 2px 4px;
  background: linear-gradient(#d9d9d9, #fff 12px) no-repeat top / 100% 12px;
  overflow-wrap: anywhere;
}
.tekst p { margin: 0 0 .9em; }
.tekst img {
  display: inline-block;
  width: 200px;
  height: auto;
  margin: 4px 8px 8px 0;
  border: 1px solid var(--rood);
  vertical-align: top;
  cursor: zoom-in;
}
.tekst table { border-collapse: collapse; max-width: 100%; }
.tekst td { vertical-align: top; padding: 2px 6px 2px 0; }
.tekst video { display: block; width: 100%; max-width: 480px; background: #000; border: 1px solid var(--rood); margin: 8px 0 12px; }
.film { position: relative; max-width: 560px; aspect-ratio: 16 / 9; margin: 8px 0 12px; border: 1px solid var(--rood); }
.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* grijze balk onder een bericht, zoals de oude 'Reacties'-balk */
.doorklik { margin: 0; background: var(--grijs); padding: 3px 10px; font-size: 12px; }
.doorklik a { color: #fff; font-weight: normal; text-decoration: underline; }
.doorklik a:hover { color: #fff; }

.pagina { font-size: 13px; line-height: 2.1; max-width: 640px; }
.pagina a { display: inline-block; min-width: 1.7em; text-align: center; color: var(--tekst); font-weight: normal; }
.pagina a[aria-current] { background: var(--zwart); color: #fff; }
.pagina a:hover { color: var(--rood); }
.terug { font-size: 13px; }

.voet { background: var(--zwart); color: #fff; font-size: 12px; padding: 8px 16px; text-align: right; }
.voet p { margin: 0; }
.voet a { color: #fff; font-weight: normal; }
.voet a:hover { color: var(--rood); }

/* vergroting van foto's (was vroeger een popup-venster) */
dialog#groot { padding: 0; border: 2px solid var(--rood); background: #000; max-width: 94vw; max-height: 94vh; }
dialog#groot::backdrop { background: rgba(0,0,0,.8); }
dialog#groot img { display: block; max-width: 92vw; max-height: 90vh; width: auto; height: auto; }
dialog#groot button { position: absolute; top: 4px; right: 6px; background: var(--rood); color: #fff; border: 0; font: bold 22px/1 Arial, sans-serif; width: 32px; height: 32px; cursor: pointer; }

/* telefoon en smal scherm */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .kop { height: auto; justify-content: flex-start; }
  .logo img { height: auto; width: min(346px, 90vw); }
  .sfeer { display: none; }
  .menu { justify-content: flex-start; gap: 0 16px; padding: 6px 16px; }
  .menu a { font-size: 14px; line-height: 2.2; }
  .romp { display: flex; flex-direction: column; }
  .zij { order: 2; background-image: none; padding: 14px 16px 18px; }
  .zijkop { display: block; }
  .zij:empty { display: none; }
  .sub a { font-size: 14px; }
  .sub li { margin-bottom: 8px; }
  .inhoud { padding: 20px 16px 8px; }
  .tekst img { width: calc(50% - 8px); margin-right: 6px; }
  .voet { text-align: left; }
}

/* foto-reeksen als raster, met de rode randjes van toen */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 6px 0 16px; }
.fotos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; }
@media (max-width: 760px) {
  .fotos { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fotos img { width: 100%; margin: 0; }
}