/* Reconstructie van de huidige Van Burgsteden-site.
   De waarden zijn bewust compact en WordPress-achtig gehouden:
   witte pagina, smalle contentkolom, beige navigatie, dunne randen,
   serif-koppen en Arial-achtige bodytekst. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:#55504b;
  background:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
  line-height:1.65;
}
a{color:#6b5948;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.wrapper{width:960px;max-width:calc(100% - 40px);margin:0 auto}

/* Header */
.site-header{padding-top:24px;background:#fff}
.header-row{
  min-height:175px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}
.brand{
  display:flex;
  align-items:center;
  color:#4d443b;
  flex:0 0 auto;
}
.brand-logo{
  display:block;
  width:700px;
  max-width:100%;
  height:auto;
}

.search{
  display:flex;
  align-items:center;
  gap:7px;
  color:#777;
  font-size:12px;
}
.search input{
  width:170px;height:29px;
  border:1px solid #d2cec9;
  padding:5px 8px;
  font:12px Arial,sans-serif;
}
.search button{
  height:29px;border:1px solid #c9c0b6;
  background:#eeeae5;color:#665b51;padding:0 10px;
}

.nav-wrap{
  margin-top:5px;
  border-top:1px solid #ddd7d0;
  border-bottom:1px solid #ddd7d0;
  background:#eeeae4;
}
.nav{display:flex;align-items:stretch}
.nav a{
  color:#000000;
  font-size:14px;
  line-height:1;
  padding:16px 13px;
  border-right:1px solid #ddd7d0;
}
.nav a:first-child{border-left:1px solid #ddd7d0}
.nav a:hover,.nav a.active{
  background:#e2dcd4;
  text-decoration:none;
  color:#3e3833;
}
.mobile-menu{display:none}

/* Page */
.page{padding:34px 0 62px}
.breadcrumb{font-size:11px;color:#a39b94;margin-bottom:17px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:45px}
.content{min-width:0}
h1{
  margin:0 0 25px;
  font:normal 31px/1.2 Georgia,"Times New Roman",serif;
  color:#55483c;
}
h2{
  margin:26px 0 7px;
  font:normal 20px/1.25 Georgia,"Times New Roman",serif;
  color:#55483c;
}
h3{
  margin:0 0 10px;
  font:bold 15px/1.3 Arial,Helvetica,sans-serif;
  color:#514941;
}
.content p{margin:0 0 16px}
.content p.intro{font-weight:bold}
.content ul{padding-left:20px;margin:0 0 20px}
.content li{margin:3px 0}
.gallery{
  display:flex;flex-wrap:wrap;gap:17px;
  margin:25px 0;
}
.gallery figure{
  margin:0;padding:0;
  width:197px;
}
.gallery img{display:block;width:197px}
.gallery figcaption{
  font-size:11px;color:#888;
  padding-top:5px;
}
.side{
  border-left:1px solid #e0dbd5;
  padding-left:23px;
  font-size:16px;color:#7d7771;
}
.side-title{
  margin:0 0 14px;
  font:normal 19px/1.2 Georgia,serif;
  color:#5b4d40;
}
.side p{margin:0 0 15px}
.side img{display:block;margin:15px 0;border:1px solid #ddd7d0}
.note{
  padding:13px 15px;
  background:#f3f0eb;
  border:1px solid #e2ddd6;
  margin:20px 0;
}
.contact{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
}
.contact-box{
  border-top:1px solid #ded8d1;
  padding-top:13px;
}
.form-row{margin:0 0 13px}
.form-row label{display:block;font-size:12px;margin-bottom:5px;color:#665f59}
.form-row input,.form-row textarea{
  width:100%;border:1px solid #cec8c1;
  background:#fff;padding:8px;
  font:13px Arial,sans-serif;
}
.form-row textarea{height:130px;resize:vertical}
.submit{
  border:1px solid #8a7764;
  background:#eee9e3;color:#5b4e43;
  padding:8px 17px;font:12px Arial,sans-serif;cursor:pointer;
}
.map{border:1px solid #d9d3cc}

.footer{
  border-top:1px solid #ddd7d0;
  background:#f1eeea;
  padding:25px 0 32px;
  color:#000000;font-size:16px;
}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* responsive */
@media(max-width:820px){
  .wrapper{max-width:calc(100% - 28px)}
  .header-row{min-height:68px}
  .search{display:none}
  .mobile-menu{
    display:block;width:100%;
    border:0;background:transparent;
    text-align:left;padding:13px 0;
    font:12px Arial,sans-serif;
    color:#554d46;cursor:pointer;
  }
  .nav{display:none;flex-direction:column}
  .nav.open{display:flex}
  .nav a,.nav a:first-child{
    border-left:0;border-right:0;border-top:1px solid #ddd7d0;
    padding:13px 2px;
  }
  .layout{grid-template-columns:1fr;gap:30px}
  .side{border-left:0;border-top:1px solid #e0dbd5;padding:22px 0 0}
}
@media(max-width:520px){
  .wrapper{max-width:calc(100% - 20px)}
  .site-header{padding-top:12px}
  .brand-logo{width:280px}
  h1{font-size:27px}
  .contact{grid-template-columns:1fr}
}