/* ------------------------------------------------ */
/* PAGE BACKGROUND */
/* ------------------------------------------------ */

body{
   background:linear-gradient(
    180deg,
    #8b0000 0%,
    #800000 40%,
    #6f0000 100%
  );
  margin:0;
}

#websitevak{
  max-width:1154px;
  margin:25px auto;
  background:white;
  border-radius:6px;
  box-shadow:0 8px 22px rgba(0,0,0,0.35);
}

/* ------------------------------------------------ */
/* TYPOGRAPHY */
/* ------------------------------------------------ */

td{
  font:11px Arial;
  color:#333333;
}

a{
  font-weight:bold;
  color:#cc0000;
  text-decoration:none;
}

a:hover{
  color:#990000;
  text-decoration:underline;
}


/* ------------------------------------------------ */
/* HEADER */
/* ------------------------------------------------ */

.header{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:10px;
  background:#800000;
}

.title{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.logo{
  font:bold 24px Georgia, serif;
  color:#FFFF00;
  letter-spacing:0.15em;
}

.subtitle{
  font:22px Georgia, serif;
  color:#f5d080;
}


/* ------------------------------------------------ */
/* HERO */
/* ------------------------------------------------ */

.hero{
  width:100%;
  height:220px;
  overflow:hidden;
  background:#800000;
}

.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ------------------------------------------------ */
/* NAVIGATION */
/* ------------------------------------------------ */

.menuButton{
  display:none;
  background:#a4c2c2;
  color:#800000;
  text-align:center;
  font-weight:bold;
  padding:10px;
  font:14px Arial;
  cursor:pointer;
}

#menuToggle{
  display:none;
}

#navigation{
  background:#a4c2c2;
  display:flex;
  flex-wrap:wrap;
  gap:2px;
}

#navigation a{
  padding:10px 14px;
  background:#a4c2c2;
  color:#336666;
}

#navigation a:hover{
  background:#8fb3b3;
}

#navigation a.active{
  background:white;
  color:#cc0000;
}

#navigation{
  row-gap:4px;
}
/* ------------------------------------------------ */
/* MAIN LAYOUT */
/* ------------------------------------------------ */

.twoColumn{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:40px;
  max-width:1000px;
  margin:40px auto;
  font:15px/24px Arial, Helvetica, sans-serif;
  padding:0 20px; 
  box-sizing:border-box;
}

.gallery{
  max-width:1100px;
  margin:40px auto;
  padding:0 20px;
}

.gallerySection{
  margin-bottom:40px;
}

/* ------------------------------------------------ */
/* Foto gallerij */
/* ------------------------------------------------ */
.galleryTitle{
  font-size:18px;
  margin-bottom:15px;
  border-bottom:2px solid #a4c2c2;
  padding-bottom:5px;
}

.galleryGrid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:15px;
}

.galleryGrid img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:6px;
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

/* hover effect */
.galleryGrid img:hover{
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

.galleryItem{
  padding:5px;
  border-radius:6px;
  transition:background 0.2s ease;
}

.galleryItem:hover{
  background:#f5f5f5;
}

.galleryItem img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:6px;
  cursor:pointer;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

/* ------------------------------------------------ */
/* CONTENT */
/* ------------------------------------------------ */

.content{
  padding:0;
}

.bodyText{
  font:15px/24px Arial;
  color:#333333;
}

.pageName{
  font:20px/26px Georgia;
  color:#cc3300;
  letter-spacing:0.1em;
}

.subHeader{
  font:bold 14px/20px Georgia;
  color:#669999;
  letter-spacing:0.1em;
}

caption{
  font-size:13px;
  text-align:center;
  margin-top:6px;
  color:#333;
}


/* ------------------------------------------------ */
/* IMAGES */
/* ------------------------------------------------ */

img{
  max-width:100%;
  height:auto;
  border-radius:4px;
  box-shadow:0 3px 8px rgba(0,0,0,0.3);
}

/* ------------------------------------------------ */
/* roadmap */
/* ------------------------------------------------ */

.road{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.roadMap{
  width:100%;
  max-width:425px;
  height:350px;
  border:0;
}
/* ------------------------------------------------ */
/* Table */
/* ------------------------------------------------ */

.horseStyle{
  width:100%;
  border-collapse:collapse;   /* FIX */
  margin:20px 0;
  font-size:14px;
  border-radius:6px;
  overflow:hidden;
}

.horseStyle th{
  background:#a4c2c2;
  color:#2f4f4f;
  text-align:left;
  padding:10px;
  font-weight:bold;
}

.horseStyle td{
  padding:8px;
  border-bottom:1px solid #ddd;
}

/* zebra striping */
.horseStyle tr:nth-child(even){
  background:#f0f4f4;
}

/* hover */
.horseStyle tr:hover{
  background:#e6eeee;
}

/* price column */
.horseStyle td:last-child,
.horseStyle th:last-child{
  text-align:right;
  white-space:nowrap;
  color:#800000;
  font-weight:bold;
}

/* subtle accent line */
.horseStyle td:first-child{
  border-left:4px solid #a4c2c2;
}

/* ------------------------------------------------ */
/* RESPONSIVE */
/* ------------------------------------------------ */

@media (max-width:900px){

.menuButton{
  display:block;
  border-radius:4px;
  text-align:center;
}

.menuButton::before{
  content:"☰";
  margin-right:8px;
}

#navigation{
  display:none;
  flex-direction:column;
}

#menuToggle:checked + .menuButton + #navigation{
  display:flex;
}

.twoColumn{
  grid-template-columns:1fr;
  padding:20px;
}

.content{
  padding:20px;
}

}
/* ------------------------------------------------ */
/* RESPONSIVE prijzenlijst*/
/* ------------------------------------------------ */
@media (max-width:600px){

.programTable{
  font-size:13px;
}

.programTable td,
.programTable th{
  padding:6px;
}

}

/* ------------------------------------------------ */
/* RESPONSIVE foto gallerij*/
/* ------------------------------------------------ */

@media (max-width:900px){
  .galleryGrid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:500px){
  .galleryGrid{
    grid-template-columns:1fr;
  }
}