*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#f2f2f2;
  color:#222;
  font-family:"Open Sans",Arial,sans-serif;
}

.container{
  width:92%;
  max-width:1250px;
  margin:auto;
}


/* TOP */

.top{
  background:#222;
  color:#fff;
  font-size:12px;
}

.top-in{
  height:34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}


/* HEADER */

header{
  background:#fff;
  border-bottom:4px solid #ff9300;
}

.head{
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.brand{
  display:flex;
  align-items:center;
  gap:15px;
}

.logo{
  width:70px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ff9300;
  overflow:hidden;
}

.logo img{
  max-width:100%;
  max-height:100%;
}

.brand h1{
  margin:0;
  font:700 42px/1 "Oswald",sans-serif;
  letter-spacing:2px;
}

.brand h1 span{
  color:#ff9300;
}

.brand small{
  font:400 14px/1.4 "Open Sans",sans-serif;
}


/* MENU */

.menu{
  display:flex;
  align-items:center;
  gap:2px;
}

.menu>a,
.menu button{
  border:0;
  background:transparent;
  color:#222;
  padding:14px 13px;
  font:600 14px "Oswald",sans-serif;
  text-decoration:none;
  cursor:pointer;
}

.menu>a:hover,
.menu button:hover{
  background:#ff9300;
  color:#fff;
}

.drop{
  position:relative;
}

.dropbox{
  display:none;
  position:absolute;
  z-index:1000;
  top:100%;
  left:0;
  width:215px;
  background:#222;
  box-shadow:0 5px 12px rgba(0,0,0,.2);
}

.drop:hover .dropbox{
  display:block;
}

.dropbox a{
  display:block;
  color:#fff;
  padding:10px 14px;
  font:400 13px "Oswald",sans-serif;
  text-decoration:none;
  border-bottom:1px solid #444;
}

.dropbox a:hover{
  background:#ff9300;
}

.hamb{
  display:none;
  border:0;
  background:#222;
  color:#fff;
  padding:10px 14px;
  font:600 14px "Oswald";
}


/* HERO */

.hero{
  min-height:300px;
  margin-top:25px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    linear-gradient(
      135deg,
      #222 0%,
      #222 38%,
      #b36b00 38%,
      #ff9300 100%
    );
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 18px,
      rgba(255,255,255,.08) 18px,
      rgba(255,255,255,.08) 20px
    );
}

.heroText{
  position:relative;
  z-index:2;
  padding:45px;
  color:#fff;
}

.heroText h2{
  margin:0 0 8px;
  font:700 42px "Oswald",sans-serif;
  text-shadow:2px 2px 0 #222;
}

.heroText p{
  margin:0 0 22px;
  font-size:16px;
}

.btn{
  display:inline-block;
  padding:10px 18px;
  background:#fff;
  color:#222;
  text-decoration:none;
  font:600 14px "Oswald";
}

.btn:hover{
  background:#222;
  color:#fff;
}


/* 3 KOLOMMEN */

.content-grid{
  margin-top:25px;
  margin-bottom:30px;
  display:grid;
  grid-template-columns:1fr 1.7fr 1fr;
  gap:20px;
  align-items:start;
}

.card{
  background:#fff;
  border:1px solid #ddd;
  box-shadow:0 2px 8px rgba(0,0,0,.07);
  overflow:hidden;
}

.title{
  background:#222;
  color:#fff;
  padding:11px 15px;
  text-align:left;
  font:600 20px "Oswald",sans-serif;
  text-transform:uppercase;
  border-top:5px solid #ff9300;
}

.agenda-title{
  text-align:center;
}

.body{
  padding:15px;
}


/* MEDEDELINGEN */

.notice{
  padding:8px 0 13px;
  margin-bottom:10px;
  border-bottom:1px solid #ddd;
}

.notice:last-child{
  border-bottom:0;
}

.notice h3{
  margin:0 0 5px;
  font:600 16px "Oswald",sans-serif;
}

.notice p{
  margin:2px 0;
  font-size:12px;
  line-height:1.45;
}


/* FILTERS */

.sport-filter{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  margin-bottom:8px;
}

.sport-btn{
  border:1px solid #aaa;
  background:#fff;
  padding:5px 8px;
  border-radius:3px;
  cursor:pointer;
  font:500 11px "Oswald",sans-serif;
}

.sport-btn:hover,
.sport-btn.active{
  background:#222;
  color:#fff;
}

.sport-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:4px;
}


/* AGENDA */

.agenda-count{
  color:#777;
  margin-bottom:4px;
  text-align:center;
  font:400 11px "Oswald",sans-serif;
}

#agendaList{
  max-height:430px;
  overflow-y:auto;
}


/*
  Exact 3-column / 2-row structure:

  Sporttak | Datum / tijd | empty
  Activiteit | Bowlinghuis | Adres
*/

.agenda-row{
  display:grid;
  grid-template-columns:
    minmax(145px,.9fr)
    minmax(230px,1.25fr)
    minmax(210px,1.15fr);

  grid-template-rows:auto auto;

  column-gap:15px;
  row-gap:3px;

  padding:9px 0 11px;

  border-bottom:1px solid #ddd;

  font:400 12px/1.3 "Oswald",sans-serif;
}

.agenda-sport-cell{
  grid-column:1;
  grid-row:1;

  color:#000;
  font-weight:700;
  text-transform:uppercase;
}

.agenda-date-time{
  grid-column:2 / 4;
  grid-row:1;

  color:#000;
  font-weight:600;
}

.agenda-date-mark{
  display:inline-block;
  padding:1px 6px;

  border:2px solid #fff;
  border-radius:3px;

  color:#fff;

  box-shadow:
    0 2px 5px rgba(0,0,0,.22);

  text-shadow:
    1px 1px 2px rgba(0,0,0,.4);

  font:700 11px/15px "Oswald";
}

.slash{
  padding:0 3px;
}

.agenda-activity{
  grid-column:1;
  grid-row:2;

  color:#000;
  font-weight:700;
}

.agenda-house{
  grid-column:2;
  grid-row:2;

  color:#000;
}

.agenda-address{
  grid-column:3;
  grid-row:2;

  color:#000;
}

.empty{
  padding:20px 10px;
  text-align:center;
  color:#777;
  font:400 12px/1.5 "Oswald";
}


/* CONTACT */

.contact{
  background:#222;
  color:#fff;
  padding:35px 0;
}

.contactgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.contact h2{
  margin:0 0 10px;
  color:#ff9300;
  font:600 24px "Oswald";
  text-transform:uppercase;
}

.contact p{
  margin:5px 0;
  font-size:12px;
}


/* FOOTER */

footer{
  padding:25px;
  text-align:center;
  background:#111;
  color:#aaa;
  font-size:11px;
}


/* TABLET */

@media(max-width:1050px){

  .menu>a,
  .menu button{
    padding:12px 8px;
    font-size:13px;
  }

  .content-grid{
    grid-template-columns:1fr 1.5fr;
  }

  .content-grid .card:last-child{
    grid-column:1 / 3;
  }

}


/* MOBIEL */

@media(max-width:850px){

  .top-in{
    height:auto;
    min-height:34px;
    padding:7px 0;
    gap:8px;
    flex-wrap:wrap;
  }

  .head{
    min-height:75px;
  }

  .brand h1{
    font-size:32px;
  }

  .brand small{
    font-size:11px;
  }

  .logo{
    width:55px;
    height:55px;
  }

  .hamb{
    display:block;
  }

  .menu{
    display:none;
    position:absolute;
    z-index:999;
    top:109px;
    left:0;
    right:0;
    background:#222;
    flex-direction:column;
    align-items:stretch;
    padding:5px 0;
  }

  .menu.open{
    display:flex;
  }

  .menu>a,
  .menu button{
    color:#fff;
    text-align:left;
    padding:12px 18px;
  }

  .dropbox{
    position:static;
    width:100%;
    box-shadow:none;
  }

  .drop.open .dropbox{
    display:block;
  }

  .drop:hover .dropbox{
    display:none;
  }

  .drop.open:hover .dropbox{
    display:block;
  }

  .content-grid{
    grid-template-columns:1fr;
  }

  .content-grid .card:last-child{
    grid-column:auto;
  }

  .agenda-row{
    grid-template-columns:1fr 1fr;
  }

  .agenda-sport-cell{
    grid-column:1;
  }

  .agenda-date-time{
    grid-column:2;
  }

  .agenda-activity{
    grid-column:1;
  }

  .agenda-house{
    grid-column:2;
  }

  .agenda-address{
    grid-column:1 / 3;
  }

}


/* KLEIN MOBIEL */

@media(max-width:520px){

  .container{
    width:94%;
  }

  .hero{
    min-height:240px;
  }

  .heroText{
    padding:25px;
  }

  .heroText h2{
    font-size:32px;
  }

  .heroText p{
    font-size:13px;
  }

  .agenda-row{
    grid-template-columns:1fr;
  }

  .agenda-sport-cell,
  .agenda-date-time,
  .agenda-activity,
  .agenda-house,
  .agenda-address{
    grid-column:1;
    grid-row:auto;
  }

  .contactgrid{
    grid-template-columns:1fr;
  }

}


/* Contact staat onder de agenda, niet naast de agenda */
.contact{
  clear:both;
}

/* Agenda datum: zwart, met alleen links een gekleurde lijn */
.agenda-date-mark{
  display:inline-block!important;
  background:transparent!important;
  color:#000!important;
  border:0!important;
  border-left:4px solid var(--sport-color,#ff9300)!important;
  border-radius:0!important;
  padding:1px 7px!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font:700 12px/16px "Oswald",sans-serif!important;
}


/* =====================================================
   DESKTOP: MEDEDELINGEN LINKS + AGENDA BREED TOT RECHTS
===================================================== */

.content-grid{
    width:92%!important;
    max-width:1250px!important;
    margin:25px auto 30px!important;
    display:grid!important;
    grid-template-columns:280px minmax(0,1fr)!important;
    gap:20px!important;
    align-items:start!important;
}

.content-grid .card:first-child{
    width:100%!important;
}

.agenda-card{
    width:100%!important;
    min-width:0!important;
}

.agenda-card .body{
    width:100%!important;
    padding:15px 20px!important;
}

#agendaList{
    width:100%!important;
}

.agenda-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:
        190px
        minmax(300px,1fr)
        minmax(250px,1fr)!important;
    column-gap:20px!important;
    row-gap:4px!important;
    padding:10px 0 12px!important;
    border-bottom:1px solid #d8d8d8!important;
}

@media(max-width:1050px){
    .content-grid{
        grid-template-columns:240px minmax(0,1fr)!important;
    }

    .agenda-row{
        grid-template-columns:
            160px
            minmax(220px,1fr)
            minmax(180px,1fr)!important;
        column-gap:14px!important;
    }
}

@media(max-width:850px){
    .content-grid{
        width:94%!important;
        grid-template-columns:1fr!important;
    }

    .agenda-row{
        grid-template-columns:1fr 1fr!important;
    }

    .agenda-sport-cell{
        grid-column:1!important;
        grid-row:1!important;
    }

    .agenda-date-time{
        grid-column:2!important;
        grid-row:1!important;
    }

    .agenda-activity{
        grid-column:1!important;
        grid-row:2!important;
    }

    .agenda-house{
        grid-column:2!important;
        grid-row:2!important;
    }

    .agenda-address{
        grid-column:1 / 3!important;
        grid-row:3!important;
    }
}

@media(max-width:520px){
    .agenda-row{
        grid-template-columns:1fr!important;
    }

    .agenda-sport-cell,
    .agenda-date-time,
    .agenda-activity,
    .agenda-house,
    .agenda-address{
        grid-column:1!important;
        grid-row:auto!important;
    }
}


/* AGENDA TEKST: OSWALD 14 PX */
.agenda-card,
.agenda-card .body,
.agenda-card .sport-filter,
.agenda-card .sport-btn,
.agenda-card .agenda-count,
.agenda-card .agenda-row,
.agenda-card .agenda-sport-cell,
.agenda-card .agenda-date-time,
.agenda-card .agenda-activity,
.agenda-card .agenda-house,
.agenda-card .agenda-address{
    font-family:"Oswald",sans-serif!important;
}

.agenda-card .agenda-row,
.agenda-card .agenda-sport-cell,
.agenda-card .agenda-date-time,
.agenda-card .agenda-activity,
.agenda-card .agenda-house,
.agenda-card .agenda-address{
    font-size:14px!important;
    line-height:1.3!important;
}

.agenda-card .agenda-date-mark{
    font-size:14px!important;
    line-height:18px!important;
}

.agenda-card .agenda-count{
    font-size:12px!important;
}

.agenda-card .sport-btn{
    font-size:12px!important;
}


/* =====================================================
   NIEUWE ZBSD BANNER
===================================================== */

.banner{
  position:relative;
  height:80px;
  background:orange;
  overflow:hidden;
  border:1px solid #2b2b2b;
}

.banner-left-skew{
  position:absolute;
  left:-20px;
  top:0;
  width:150px;
  height:100%;
  background:#2b2b2b;
  transform:skewX(-20deg);
  transform-origin:left;
}

.banner-left-skew::after{
  content:"";
  position:absolute;
  right:-40px;
  top:0;
  width:50px;
  height:100%;
  background:linear-gradient(
    to right,
    #2b2b2b 5px,
    white 5px,
    white 10px,
    #2b2b2b 10px,
    #2b2b2b 15px,
    white 15px,
    white 20px,
    orange 20px
  );
}

.banner-content{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  height:100%;
  padding:0 20px;
}

.banner .logo{
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  overflow:visible;
}

.banner .logo img{
  border:2px solid orange;
  padding:5px;
  background:#fff;
  height:40px;
  width:auto;
  object-fit:contain;
}

.banner .title{
  font-family:'Oswald',sans-serif;
  margin:0 auto;
  text-align:center;
}

.banner .title h1{
  margin:0;
  font-size:30px;
  line-height:30px;
  text-transform:uppercase;
  text-shadow:
    -1px 0 white,
    0 1px white,
    1px 0 white,
    0 -1px white;
  font-weight:bold;
}

.banner .title p{
  margin:0;
  font-size:24px;
  line-height:24px;
  text-shadow:
    -1px 0 white,
    0 1px white,
    1px 0 white,
    0 -1px white;
  font-weight:bold;
}

.banner .title p:last-child{
  text-shadow:none;
  font-family:'Open Sans',sans-serif;
  padding:2px;
  color:#000;
  font-weight:bold;
  font-size:14px;
  line-height:14px;
}

/* Menu direct onder de banner */
.main-header{
  background:#fff;
  border-bottom:4px solid #ff9300;
}

.nav-wrap{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media(max-width:850px){
  .banner{
    height:80px;
  }

  .banner-content{
    padding:0 12px 0 75px;
  }

  .banner .logo img{
    height:34px;
  }

  .banner .title h1{
    font-size:23px;
    line-height:23px;
  }

  .banner .title p{
    font-size:14px;
    line-height:15px;
  }

  .banner .title p:last-child{
    font-size:10px;
    line-height:11px;
  }

  .nav-wrap{
    justify-content:flex-end;
  }

  .main-header .menu{
    top:132px;
  }
}