/* VDL Berkhof - modern responsive theme (2026 refresh)
   Heritage palette: indigo #333366 (old chrome), VDL red #d51f1f, orange accent #cc4400 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #22293a;
  background: #eef0f4;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: #333366; }
a:hover { color: #cc4400; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* ---------- header ---------- */
.site-header { background: #fff; border-bottom: 4px solid #cc4400; }
.header-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px;
}
.wordmark { text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.wordmark .vdl {
  color: #d51f1f; font-size: 30px; font-weight: 800; letter-spacing: 1px;
}
.wordmark .berkhof { color: #333366; font-size: 24px; font-weight: 600; }
.langswitch { font-size: 14px; white-space: nowrap; }
.langswitch a, .langswitch span.cur {
  display: inline-block; padding: 5px 12px; border: 1px solid #c7cbe0;
  border-radius: 4px; text-decoration: none; margin-left: 6px; color: #333366;
}
.langswitch span.cur { background: #333366; color: #fff; border-color: #333366; }
.langswitch a:hover { background: #eceefc; }

/* ---------- navigation ---------- */
.mainnav { background: #333366; }
.mainnav .wrap { display: flex; flex-wrap: wrap; padding: 0 8px; }
.mainnav a {
  display: block; color: #dcdce5; text-decoration: none; font-weight: 600;
  font-size: 14.5px; padding: 12px 13px; white-space: nowrap;
}
.mainnav a:hover { background: #282850; color: #fff; }
.mainnav a.active { background: #cc4400; color: #fff; }

/* ---------- content ---------- */
main.wrap { padding: 26px 16px 10px; }
.card {
  background: #fff; border-radius: 10px;
  box-shadow: 0 2px 10px rgba(20, 25, 60, .09);
  padding: 28px 32px; overflow-x: auto;
}
.pagetitle {
  margin: 0 0 18px; padding-bottom: 12px; border-bottom: 3px solid #e4e6f2;
  color: #333366; font-size: 25px; line-height: 1.25;
}

/* legacy content classes recolored for light background */
.card .main, .card h3 { color: #22293a; font-size: 15px; line-height: 1.6; font-weight: normal; }
.card .mainbold, .card h2 { color: #22293a; font-size: 15px; line-height: 1.6; font-weight: 700; }
.card h1 { color: #333366; font-size: 22px; }
.card .subheadrood { color: #cc4400; font-size: 16px; font-weight: 700; }
.card .headrood { color: #d51f1f; font-size: 20px; font-weight: 700; }
.card .breadcrumb, .card .breadcrumb a { color: #7a8096; font-size: 12.5px; }
.card a:link, .card a:visited { color: #333366; text-decoration: underline; }
.card a:hover { color: #cc4400; }
.card table { border-collapse: collapse; }
.card table[width] { width: auto !important; max-width: 100%; }
.card td { vertical-align: top; }
.card td[bgcolor], .card table[bgcolor], .card tr[bgcolor] { background: transparent !important; }
.card img { border-radius: 4px; }
.card img[width="1"], .card img[height="1"], .card img[src*="spacer"] { border-radius: 0; }
.card ul, .card ol { line-height: 1.7; }
.card input, .card textarea, .card select {
  background: #fff; border: 1px solid #aab0cc; border-radius: 4px;
  color: #22293a; padding: 6px 8px; font-family: inherit; font-size: 14px;
  max-width: 100%;
}
.card input[type="submit"], .card input[type="reset"] {
  background: #333366; color: #fff; border: 0; padding: 9px 18px;
  border-radius: 5px; font-weight: 600; cursor: pointer;
}
.card input[type="submit"]:hover { background: #cc4400; }

/* ---------- footer ---------- */
.site-footer { margin-top: 34px; background: #22224a; color: #c9cbe2; font-size: 14px; }
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  justify-content: space-between; padding: 18px 16px;
}
.site-footer a { color: #fff; text-decoration: none; margin-right: 16px; }
.site-footer a:hover { color: #ffc9ad; text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .header-top { flex-direction: column; gap: 8px; }
  .mainnav .wrap { padding: 0; }
  .mainnav a { flex: 1 1 auto; text-align: center; }
  .card { padding: 20px 14px; }
}

/* ---------- home page extras ---------- */
.photorow { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.photorow img {
  flex: 1 1 240px; min-width: 200px; max-width: 340px;
  height: 200px; object-fit: cover; border-radius: 8px;
}
.quicklinks { margin: 26px 0 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.quicklinks a {
  display: inline-block; background: #333366; color: #fff !important;
  text-decoration: none !important; font-weight: 600; padding: 11px 20px;
  border-radius: 6px; font-size: 14.5px;
}
.quicklinks a:hover { background: #cc4400; }

/* header logo image */
.wordmark .logoimg { height: 38px; width: auto; margin-right: 10px; }