@import url("hbmenu.css");
@import url("button.css");
@import url("form.css");
@import url("limit-lines.css");

@media (min-width: 1em) {

/* reset */
   *, *::before, *::after{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      position: relative;
   }

   img{
      inline-size: 100%;
      max-inline-size: 100%;
      vertical-align: middle;
      height: auto;
      display: inline-block;
   }
   li{
      list-style: none;
   }
   ul.li-red-dot li{
      list-style: url("red-dot.png");
      margin-right: 1rem;

   }ul.li-blue-arrow li{
      list-style: url("blue-arrow.png");
      margin-right: 1rem;
   }
   ul.li-red-dot, ul.li-blue-arrow{
      margin-left: 2ch;
   }
   hr{
      border: 1px;
      border-style: solid;
      border-color: var(--offzwart);
      border-radius: 100rem;
      margin-block: 0.5em;
   }
   .knop{
      /* block-size: 1.1em; */
      /* inline-size: auto; */
      display: inline ;
      padding: 0.1em 0.5em;
      font-size: 0.9em;
      border-radius: 500px;
      background-color: var(--blauw);
      color: var(--offwit);
      text-decoration: none;
   }
   .onderstreept{
      text-decoration-color: inherit;
      text-decoration: underline;
      text-underline-offset: 0.25em;
   }
   
/* kleuren */
   :root{
      --fonts: normal normal normal normal 17px/1.5em 'open-sans', sans-serif;
      --offwit: hsl(0, 0%, 96%);
      --offwit-tr: hsl(0, 0%, 96%, 0.5);
      --offzwart: hsl(0, 0%, 4%);
      --offzwart-tr: hsl(0, 0%, 4%, 0.5);
      --grijs: hsl(0, 0%, 55%);
      --dgrijs: hsl(0, 0%, 25%);
      --lgrijs: hsl(0, 0%, 75%);
      --grijs-tr: hsl(0, 0%, 55%, 0.5);
      --dgrijs-tr: hsl(0, 0%, 25%, 0.5);
      --lgrijs-tr: hsl(0, 0%, 75%, 0.5);
      --gr-bl-gr: linear-gradient(90deg, var(--groen) 30%, var(--blauw) 70%);
      --w-bl-gr: linear-gradient(90deg, hsl(0, 0%, 96%, 0.95) 20%, hsl(203, 75%, 46%, 0.95) 60%);
      --rood: hsl(358, 74%, 49%);
      --oker: hsl(51, 72%, 52%);
      --groen: hsl(67, 70%, 41%);
      --blauw: hsl(203, 75%, 46%);
      --blauw-v-lg: linear-gradient(180deg, var(--blauw), var(--offwit));
      --dblauw: hsl(203, 66%, 26%);
      --lblauw: hsla(203, 75%, 66%, 0.1);
      --schaduw: 2px 2px 6px hsla(0, 0%, 4%, 0.5);
      --drop-shadow: drop-shadow(0.5vw 0.5vw 0.3vw var(--dblauw));
      --br: 1px solid hsl(330, 100%, 71%);
      --bg: 1px solid hsl(120, 100%, 50%);
      --bb: 1px solid hsl(222, 100%, 50%);
      --bw: 1px solid hsl(0, 0%, 100%);
   }
   .zwart{
      color: var(--offzwart);
   }
   .oker{
      color: var(--oker);
   }
   .rood{
      color: var(--rood)
   }
   .rood-bg{
      color: var(--offwit);
      background-color: var(--rood);
   } 
   .blauw{
      color: var(--blauw)
   }   
   hr.blauw{
      border-color: var(--blauw);
   }
   .blauw-bg{
      color: var(--offwit);
      background-color: var(--blauw);
   }
   .blauw-bg-vlg{
      background: var(--blauw-v-lg)
   }
   .groen{
      color: var(--groen)
   }
   hr.groen{
      border-color: var(--groen);
   }
   .groen-bg{
      color: var(--offwit);
      background-color: var(--groen);
   }
   .wit{
      color: var(--offwit)
   }   
   hr.wit{
      border-color: var(--offwit);
   }
   .wit-bg{
      color: var(--dblauw);
      background-color: var(--offwit);
      border: 4px solid var(--blauw);
   }
   .drop-shadow{
      filter: var(--drop-shadow);
   }
   .button-balk{
      inline-size: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      gap: 1rem;
   }
   .main-button{
      position: relative;
      --height: 40px;
      border: none;
      display: grid;
      justify-items: center;
      block-size: var(--height);
      padding-inline: 1rem;
      border-radius: 50px;
      overflow: hidden;
      color: var(--offwit);
      background-color: var(--blauw);
      font-weight: 600;
      font-size: 1.7em;
      line-height:var(--height);
      inline-size: 110px;
      z-index: 65;
      cursor: pointer;
    }
   
/* diversen */
   .verberg{
      display: none;
   }
   .onzichtbaar{
      visibility: hidden;
   }
   .cl{
      text-align: center;
   }
   .spring-in{
      padding-inline-start: 2rem;
   }
   .ll{
      text-align: left;
   }
   .rl{
      text-align: right;
   }

   /* typography 

   font-family: open-sans, sans-serif;
   font-weight : 300, 400, 600
   font-style: normal, italic;

   font-family: “myriad-pro”, sans-serif;
   font-weight: 300, 400, 600, 700, 900;
   font-style: normal, italic; 
   */

   html{
      scroll-behavior: smooth;
      scroll-padding-block-start: 5rem;
   }
   body{
      font:var(--fonts);
      letter-spacing: 0.4px;
      max-inline-size: 100rem;
      margin: auto;
      background-color: var(--offwit);
      overflow-x: hidden;
   }
   a{
      text-decoration: none;
      color: inherit;
   }
   .smal * a{
      color: var(--blauw)
   }
   .smal * a.wit{
      color: var(--offwit);
   }
   a:hover, a:focus{ 
      text-decoration: underline ;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
   }
   .in-kolommen .card a:hover, .in-kolommen .card a:focus {
      color: var(--blauw);
   }  
   .in-kolommen .blauw-bg a:hover, 
   .in-kolommen .groen-bg a:hover,
   .in-kolommen .blauw-bg a:focus, 
   .in-kolommen .groen-bg a:focus
   {
      color: var(--offwit);
      /* text-decoration: underline; */
   }
   .lijn-wit{
      margin-block: 1rem;
      border: 0.5px solid var(--offwit);
      background-color: var(--offwit);
   }
   h1,h2,h3{
      text-wrap:balance;
      line-height: 1.3em;
   }
   h1{
      font-family: "arial", sans-serif;
      font-weight: 600;
      font-style: normal;
      font-size: clamp(1.3rem, 6vw, 3rem);
      display: block;
      color: var(--offwit);
      filter: var(--drop-shadow);
   }
   h2{
      font-family: "arial", sans-serif;
      font-weight: 600;
      font-style: normal;
      font-size: 1.5em;
      line-height: 2em;
      color: var(--blauw);
      min-inline-size: 95%;
      margin-block: 2rem;
      margin-inline-start: 1rem;
      border-block-end: 2px solid var(--blauw)
   }
   h2.subhead{
      border: none;
      margin-block-end: 0.5em;
      margin-inline-start: 0;
      font-size: 1.2em;
      line-height: 1.2em;
   }
   h3, .h3kop{
      font-family: "myriad-pro", sans-serif;
      font-weight: 600;
      font-style: italic;
      margin-block-end: 1rem;
      font-size: 1em;
      letter-spacing: 1px;
      line-height: 1.3em;
   }
   .call-out h3{
      font-size: 1.2em;
      margin-block-end: 0.4em;
   }
   h4{
      font-weight: 100;
      font-size: 0.8em;
      margin-block-end: 0.5rem;
   }
   h5 {
      font-family:Arial, Helvetica, sans-serif;
      font-weight:bolder;
      font-style:normal;
      font-size:x-large;
      line-height:normal;
      color: var(--zwart);
      min-inline-size: 95%;
      margin-block: 2rem;
      margin-inline-start: 1rem;
      border-block-end: 2px solid var(--zwart)
   }

   .card > .tekst-klein{
      font-weight: 200;
      font-size: 0.5em !important;
   }
   p{
      margin-block-end: 0.5em;
   }
   p.klein{
      font-size: 0.9rem ;
   }
   p.breed{
      inline-size: 90%
   }
   p img, .img-klein{
      inline-size: 30%;
      max-inline-size: 12rem;
      margin-block-end: 0.5rem;
      margin-inline-end: 0.5rem;
   }
   p img{
      float:left;
   }
   p img.float-rechts{
      float:right;
      margin-inline-start: 0.5em;
   }
   p img.zeer-klein,
   .zeer-klein{
      inline-size: 70px;
   }
 
   .clear-both{
      clear: both;
   }
   .bold{
      font-weight: 700;
      font-size: 1.1em;
   }
   .semi-bold{
      font-weight: 600;
      font-size: 1em;
   }
   .italic{
      font-style: italic;
   }
   .img-half{
      max-inline-size: 50%;
      min-inline-size: 18rem;
   }
   .img-vul-blok{
      width: 80%;
      inset: 0;
      margin: auto;
   }
   .img-rechts{
      float: right;
   }
   /* table */
   table, tr, td, th{
      border-collapse: collapse;
      border: 1px solid var(--offzwart);
      padding: 0.5rem;
      min-inline-size: 110px;
   }
      table{
         inline-size: 90%;
         inset-inline:0;
         margin-inline: auto;
      }
      .kop-rij{
         background-color: var(--blauw);
         color: var(--offwit);
      }
      .maand-rij{
         background-color: var(--groen);
         color: var(--offwit);
         text-align: left;
         padding-inline: 1rem;
      }
   
/*  
1=0.0625 2=0.125 3=0.1875 4=0,25 5=0,3125 6=0,375 7=0.4375 8=0.5
16=1 15=0.9375 14=0.875 13=0.8125 12=0.75 11=0.6875 10=0.625 9=0.5625 
32=2 320=20 600=37.5 640=40 960=60 1024=64 1600=100 2048=128
*/
}
@media (min-width: 2em){
   .dt, .mob, .tabl{
      display: none;
   }
   .ph{
      display: block;
   }
   .button-top{
      inline-size: 40px;
      block-size: 40px;
      position: fixed;
      inset-block-end: 3rem;
      inset-inline:0;
      margin-inline: auto;
      border-radius: 50%;
      z-index: 10;
      box-shadow: var(--schaduw);
    }
   nav{
      position: sticky;
      inline-size: 100%;
      block-size: 4rem;
      inset-block-start:0;
      inset-inline-start: 0;
      z-index: 90;
      background: var(--w-bl-gr);
      display: grid;
   }
   .logo{
      align-self: center;
      position: absolute;
      left: 5%;
      inline-size: 50%;
      min-inline-size: 200px;
      max-inline-size: 270px;
   }
   header{
      position: relative;
      inline-size: 100%;
      block-size: fit-content;
      z-index: -1;
      background: var(--blauw); 
   }
   .header-vervolg{
      max-block-size: 300px;
      object-position: bottom;
      overflow: hidden;
   }
   .button-strook{
      block-size: 4rem;
   }
   .header-tekst{
      position: absolute;
      left: 5%;
      bottom: 10%;
   }
   main{
      background-color: var(--offwit);
      z-index: 1;
      padding: 0.5rem; 
   }
   article{
      margin: 1rem 3% 0 3%;
   }
   .btabel-data{
      display: grid;
      grid-template-columns: repeat(3, 20% 60% 20%);
   }

   .btabel-data p{
      font-size: 0.8em;
   }
   .btabel-data:nth-child(odd){
      background-color: var(--lblauw);
   }
   .logo-wrapper{
      inline-size: 100%;
      min-block-size: 4rem;
   }
   
   .call-out, .logo-compact{
      padding: 2% 5%;
      margin-block-end: 1rem;
      border-radius: 0 1rem;
   }
   .logo-compact img{
      max-inline-size: 20rem;
   }
   /* afdeling cards */
   .in-kolommen, .afdelingen, .onderdelen, .bestuur{
      display: flex;
      flex-wrap: wrap;
      gap: 1.2rem;
      z-index: inherit;
   }
   .twee-kolom{
      columns: 300px 2;
   }
   .drie-kolom{
      columns: 200px 3;
   }

   .welkom-tekst{
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      max-inline-size: 65rem;
      margin-inline: auto;
      padding-inline: 0.5rem
      ;
   }
   
   .welkom-tekst section{
      inline-size: 100%;
      max-inline-size: 26rem;
      block-size: fit-content;
      margin-inline: auto;
   }

   .in-kolommen .card, .afdelingen .card, .onderdelen .card, .bestuur .card
   {
      padding: 2rem 1rem;
      box-shadow: var(--schaduw);
      margin-block-end: 0.75rem;
      inline-size: 100%;
      inline-size: 22rem;
      margin-inline: auto;
      border-radius:  0 1rem;
      z-index: inherit;
   }
   .bestuur .card{
      padding: 2% 0% 1% 1%;
      border-radius: 0 1rem 0 1rem;
      overflow: hidden;
   }
   :has(.card.wit-bg .foto-rond) > .wit-bg,
   :has(.card.groen-bg .foto-rond) > .groen-bg,
   :has(.card.blauw-bg .foto-rond) > .blauw-bg{
      border-radius: 0 4rem 0 1rem;
   }

   .foto-rond{
      position: absolute;
      inset-block-start: 0px;
      inset-inline-end: 0px;
      width: 7rem;
      height: 7rem;
      border-radius: 100rem;
      overflow: hidden;
   }
   .card-functie{
      font-size: 1.3em;
      font-weight: 600;
      margin-block: 0.5rem;
   }
   .card-tekst{
      margin-block-end: 0.25rem
   }
   .card-quote{
      margin-block-start: 0.5rem;
      display: flex;
      gap: 0.25rem;
   }
   .card-quote p{
      font-family: 'myriad-pro', sans-serif;
      font-weight: 300;
      font-style: italic;
      font-size: 1em;
      inline-size: 90%;
   }
   .card-quote img{
      inline-size: 10%;
      align-self: flex-start;
   }
   .card-foto{
      margin-block: 0.5rem
   }

   .card-foto-top{
      inset-inline-start: -15px;
      inset-block-start: -30px;
      inline-size: 110%;
   }

   .card-link{
      display: flex;
      gap: 0.3rem;
   }

   .onderwerpen * .card-link{
      color: var(--offwit)
   }

   .card-link img{
      inline-size: 15px;
      aspect-ratio: 1/1;
   }

   form.resto-resevering{
      padding: 1rem;
      inset-inline: 0;
      margin: auto;
      max-inline-size: 35rem;
      background-color: var(--oker);
   }
   .fotos{
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: space-between;
   }

   footer{
      margin-block-start: 1rem;
      padding: 2rem;
      font-size: 1em;
   }
      .footer-content{
         display:flex;
         flex-wrap: wrap;
         gap: 1rem;
      }

      .footer-content section{
         border-block-start: 1px solid var(--offwit);
         align-self: flex-start;
         inline-size: 80%;
         min-inline-size: 19.5rem;
         margin-inline: auto;
         padding: 0;
      }
      .copyrights{
         inline-size: max-content;
         float: right;
         margin-block-end: 2rem;
      }
      .small-icon, .medium-icon{
         display: inline;
         inline-size: 1em;
         aspect-ratio: 1/1;
         margin-inline-end: 5px;
      }
      .medium-icon{
         inline-size: 2em;
         /* block-size: auto; */
         aspect-ratio: 3/1;
      }
   
}
@media (min-width: 460px){
   .te-smal{display: none;}
}
@media(min-width: 56rem){
   /* layout tablet */
   .ph, .mob{
      display: none;
   }
   .dt, .tabl{
      display: block;
   }
   
   .welkom-tekst{
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      max-inline-size: 65rem;
      margin-inline: auto;
   }
   .welkom-tekst section{
      inline-size: 100%;
      max-inline-size: 26rem;
      block-size: fit-content;
      margin-inline: auto;
   } 
   .in-kolommen{
      gap: 2.5rem;
   }
   .img-vul-blok{
      inline-size: 41%;
   }
   
   article.smal{
      max-inline-size: 80ch;
      inset-inline: 0;
      margin-inline: auto;
   }


   .btabel-data p{
      font-size: 1em;
   }

   .footer-content section{
      /* border: var(--bw); */
      inline-size: 30%;
      min-inline-size: 18rem;
   }
}