/* VSK Volendam – kleuren en opbouw overgenomen van de oude site */
:root {
  --blauw: #192c81;
  --footer: #2e338e;
  --oranje: #f89737;
  --hover: #ed7921;
  --vlak: #d8dbea;
  --tekst: #000;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--tekst);
  font: 13px/1.6 Arial, Helvetica, sans-serif;
  background: #fff url("../template/templates/vskvolendam/images/background-wrapper.jpg") repeat-x;
}
a { color: #000; text-decoration: none; }
a:hover { color: var(--hover); }
.content a { color: var(--blauw); text-decoration: underline; }
.content a:hover { color: var(--hover); }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1000px; margin: 0 auto; }

/* Header: menu rechtsboven, slider volle breedte, logo linksboven eroverheen */
.header { position: relative; padding-top: 50px; }
.topmenu { text-align: right; padding: 0 50px 8px; font-size: 14px; }
.topmenu a { color: #000; }
.topmenu a:hover, .topmenu a[aria-current] { color: var(--hover); }
.topmenu .sep { color: var(--oranje); font-weight: bold; margin: 0 6px; }
.slider { position: relative; aspect-ratio: 1000 / 288; overflow: hidden; }
.slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s; }
.slider img.active { opacity: 1; }
.logo { position: absolute; top: 24px; left: 0; z-index: 2; width: 43.2%; max-width: 432px; }
.logo img { display: block; width: 100%; }

/* Linkermenu loopt over de onderkant van de slider */
.columns { display: grid; grid-template-columns: 265px 1fr; gap: 35px; }
.leftmenu { position: relative; z-index: 2; margin-top: -140px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.leftmenu a {
  display: block; width: 265px; padding: 9px 15px; background: var(--vlak);
  color: #404040; font-size: 13px; font-weight: bold;
}
.leftmenu a:hover { color: #000; }
.leftmenu a[aria-current] { color: var(--blauw); box-shadow: inset 4px 0 0 var(--oranje); }

.main { padding: 22px 10px 30px 0; min-width: 0; }
.content { min-height: 200px; }
.content h1 { color: var(--blauw); font-size: 17px; margin: 0 0 12px; }
.content h2 { color: var(--blauw); font-size: 14px; margin: 22px 0 8px; }
.content p { margin: 0 0 12px; }
.crumb { font-size: 12px; }

/* Projectblok, Wist u dat, NOA-logo */
.extras { display: grid; grid-template-columns: minmax(0, 1fr) 190px 80px; gap: 16px; margin-top: 40px; align-items: start; }
.teaser { display: grid; grid-template-columns: 150px 1fr; gap: 0; color: #000; }
.teaser img { display: block; width: 150px; height: 150px; object-fit: cover; padding: 4px; border: 1px solid #dadada; background: #fff; }
.tbox, .wistu { display: flex; flex-direction: column; gap: 8px; background: var(--vlak); padding: 10px 12px; min-height: 150px; }
.tbox strong, .wistu strong { color: var(--blauw); font-size: 15px; }
.tbox .more { margin-top: auto; text-align: right; color: var(--blauw); }
.teaser:hover .more { color: var(--hover); }

/* Footer */
.footer {
  display: grid; grid-template-columns: 277px 1fr 0.8fr 1.2fr; gap: 20px; align-items: start;
  background: var(--footer) url("../template/templates/vskvolendam/images/background-footer.jpg") repeat-x;
  color: #fff; margin-top: 20px; font-size: 12px; line-height: 1.6;
}
.footlogo { display: block; }
.footcol { padding: 20px 0; }
.footer a { color: #fff; }
.footer a:hover { text-decoration: underline; color: #fff; }
.address strong { color: var(--oranje); }
.lbl { color: var(--vlak); }

/* Projecten */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.card { display: flex; flex-direction: column; gap: 6px; background: var(--vlak); padding: 8px; color: #000; text-decoration: none !important; }
.card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card strong { color: var(--blauw); font-size: 14px; }
.card span { color: #404040; font-size: 12px; }
.card:hover strong { color: var(--hover); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.gallery a { display: block; padding: 4px; border: 1px solid #dadada; background: #fff; }
.gallery a:hover { border-color: var(--oranje); }
.gallery img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.lightbox img { display: block; max-width: 92vw; max-height: 86vh; width: auto; height: auto; margin: 0 auto; }
.lightbox button { position: fixed; border: 0; background: rgba(0,0,0,.4); color: #fff; font-size: 40px; line-height: 1; width: 52px; height: 52px; cursor: pointer; border-radius: 50%; }
.lightbox button:hover { background: var(--hover); }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 12px; top: 12px; font-size: 32px !important; }
.lb-count { position: fixed; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; color: #fff; }

/* Contact */
.map { aspect-ratio: 16 / 9; max-width: 600px; border: 1px solid #dadada; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Formulieren */
.form label { display: block; margin-bottom: 10px; font-weight: bold; }
.form input, .form textarea {
  display: block; width: 100%; max-width: 440px; margin-top: 3px; padding: 6px 8px;
  font: inherit; font-weight: normal; border: 1px solid gray; background: #fff; color: #000;
}
.form button {
  padding: 8px 22px; border: 0; cursor: pointer; background: var(--blauw); color: #fff; font: inherit; font-weight: bold;
}
.form button:hover { background: var(--hover); }
.hp { position: absolute; left: -9999px; }

/* Tablet */
@media (max-width: 1000px) {
  .wrap { padding: 0 10px; }
  .columns { grid-template-columns: 230px 1fr; gap: 24px; }
  .leftmenu { margin-top: -90px; }
  .leftmenu a { width: 230px; }
  .extras { grid-template-columns: 1fr 1fr; }
  .teaser { grid-column: 1 / -1; }
  .footer { grid-template-columns: 1fr 1fr 1fr; padding: 0 16px; }
  .footlogo { display: none; }
}
/* Mobiel */
@media (max-width: 700px) {
  body { font-size: 15px; }
  .header { padding-top: 8px; display: flex; flex-direction: column; }
  .logo { position: static; order: -1; width: 60%; margin: 0 auto 6px; }
  .topmenu { order: -1; text-align: center; padding: 0 0 10px; font-size: 15px; }
  .columns { grid-template-columns: 1fr; gap: 0; }
  .leftmenu { margin-top: 12px; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .leftmenu a { width: auto; flex: 1 1 45%; text-align: center; padding: 10px 6px; font-size: 13px; }
  .main { padding-right: 0; }
  .content { min-height: 0; }
  .extras { grid-template-columns: 1fr auto; }
  .teaser { grid-template-columns: 110px 1fr; }
  .teaser img { width: 110px; height: 110px; }
  .tbox, .wistu { min-height: 110px; }
  .footer { grid-template-columns: 1fr; gap: 0; padding: 4px 16px 12px; }
  .footcol { padding: 10px 0; }
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .gallery a { padding: 2px; }
}