/* Wyts haar lettertypes */


@font-face {
  font-family: 'museo';
  src: url('/fonts/museo/museosans-100-webfont.woff2') format('woff2');
       url('/fonts/museo/museosans-100-webfont.woff') format('woff');
  font-weight: 100; /* Omdat de bestandsnaam '100' zegt */
  font-style: normal;
}



@font-face {
  font-family: 'tox';
  src: url('/fonts/tox/tox_typewriter-webfont.woff2') format('woff2'),
       url('/fonts/tox/tox_typewriter-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


body {
    font-family: 'museo', sans-serif;
}

h1, h2, h3 {
    font-family: 'tox', sans-serif;
}





/* Maak de hele header transparant en geschikt voor sticky */
.header.container-header {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: sticky;     
    top: 0;
    z-index: 9999;
}

/* Basisstijl van het mini-menu */
ul.mod-menu.mod-list.nav.mini-menu {
    display: flex;
    justify-content: center;
    transform: translateX(10%);
    margin: 0;
    padding: 0.5rem 0;
    background: white !important;
}

/* Menu-items */
ul.mod-menu.mod-list.nav.mini-menu > li {
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0 0.75rem;
    font-family: "Museo", sans-serif;
    font-weight: 400;
    color: black;
    position: relative;
}


/* Verwijder eventuele separator-elementen die Joomla zelf maakt */
.container-topbar .mod-menu .separator {
    display: none;
}

/* Voeg zelf een | toe tussen menu-items */
.container-topbar .mod-menu > li + li::before {
    content: "|";
    margin: 0 0.75rem;
    color: black;
    font-weight: normal;
}



/* Links in menu-items */
.header.container-header ul.mod-menu.mod-list.nav.mini-menu > li > a {
    color: black !important;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    display: inline-block;
    transition: all 0.2s ease;
    background: transparent !important;
}

/* Hover: gelig + witte tekst, geforceerd boven Cassiopeia */
.header.container-header ul.mod-menu.mod-list.nav.mini-menu > li > a:hover {
    background: #f5e39a !important;
    color: white !important;
}


/* Zowel li als de a-tag controleren op actieve klassen */
.header.container-header ul.mod-menu.mod-list.nav.mini-menu li.active > a,
.header.container-header ul.mod-menu.mod-list.nav.mini-menu li.current > a,
.header.container-header ul.mod-menu.mod-list.nav.mini-menu a.active,
.header.container-header ul.mod-menu.mod-list.nav.mini-menu a.current {
    font-weight: 700 !important;
}









.geel {
  
  width: 80%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top:20px;
  padding-bottom:20px;
  margin-left:150px;
  margin-right:0px;
 
  }

.groen {
  
  width: 80%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top:20px;
  padding-bottom:20px;
  margin-right:150px;
  margin-left:0px;
 
  }

.oranje {
  
  width: 80%;
  height: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top:20px;
  padding-bottom:30px;
  margin-left:75px;
  margin-right: 75px;
  
  }
  
  .geel4 {
  
  width: 80%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top:20px;
  padding-bottom:20px;
  margin-left:187px;
  margin-right:0px;
 
  }


.oranje2 {
  
  width: 100%;
  height: auto;
  
  padding-left: 0px;
  padding-right:0px;
  padding-top:0px;
  padding-bottom:0px;
  margin-left:0px;
  margin-right: 0px;
  
  }


/*    hier het script voor de flipping image    */

.flip-card {
  background-color: transparent;
  width: 236px;
  height: 158px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: white;
  color: black;
}

.flip-card-back {
  background-color: white;
  color: white;
  transform: rotateY(180deg);
}

.blokcontact {
    scroll-margin-top: 80px; /* optioneel, voor nette positie */
}


.woordwerk {
    height: 50%;
    margin-left: 10%;
 
}

img.wytssepia {
filter:sepia(100%);
-webkit-filter:sepia(100%);
-moz-filter:sepia(100%);
-o-filter:sepia(100%);
transition:0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
}

img.wytssepia:hover {
filter:sepia(0%);
-webkit-filter:sepia(0%);
-moz-filter:sepia(0%);
-o-filter:sepia(0%);
}


/* in plaats van sepia wordt de foto zwart-wit: */

img.zwartwit {
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-o-filter:grayscale(100%);
transition:0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
}

img.zwartwit:hover {
filter:grayscale(0%);
-webkit-filter:grayscale(0%);
-moz-filter:grayscale(0%);
-o-filter:grayscale(0%);
}



.akg {
  
  width: 95%;
  height: 280px;
  padding: 1em;
  background:linear-gradient(#c6d5c8, #e3eae4);     

  /*  background:linear-gradient(#808080, #DCDCDC);     */
  color: black; 
  }

.agk {
  
  width: 100%;
  height: 200px;
  padding: 1em;
    background:linear-gradient(#e3eae4, #c6d5c8);     

  /*  background:linear-gradient(#DCDCDC, #808080);  */
  color: black; 
  
  }


/* Zorg dat de hele top-sectie de volledige breedte gebruikt */
.container-top-all {
    width: 60%;
    display: block;
}


/* Optioneel: nette spacing tussen de modules */
.container-top-all .grid-child + .grid-child {
    margin-top: 1.0rem;
}


/* Haal de top-modules uit het Cassiopeia grid-gedrag */
.container-top-all .grid-child {
    display: block;      /* niet meer als grid-item */
    width: 60%;         /* volledige breedte */
    max-width: 60%;     /* geen beperking */
    margin: 0 auto;      /* centreren */
}


/* Maak van de tekst-rij een 3-koloms grid */
.container-tekst-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    /* Zelfde breedte en centrering als Cassiopeia containers */
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Kolommen */
.container-tekst-row .tekst-col {
    width: 100%;
}

/* Mobiel: onder elkaar */
@media (max-width: 768px) {
    .container-tekst-row {
        grid-template-columns: 1fr;
    }
}

/* Twee kolommen naast elkaar voor wyts1 en wyts2 */
.container-wyts-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;

    /* Zelfde breedte en centrering als Cassiopeia containers */
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Kolommen */
.container-wyts-row .wyts-col {
    display: flex;
    flex-direction: column;
}

/* Inhoud even hoog houden */
.container-wyts-row .wyts-col > * {
    flex: 1;
}

/* Mobiel: onder elkaar */
@media (max-width: 768px) {
    .container-wyts-row {
        grid-template-columns: 1fr;
    }
}


/* Verwijder rand, schaduw en afgeronde hoeken van alle top-modules */
.container-top-a .card,
.container-top-b .card,
.container-top-c .card,
.container-top-d .card,
.container-top-e .card,
.container-top-f .card,
.container-top-g .card,
.container-top-h .card,
.container-top-j .card {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Verwijder kaders van wyts- en tekst-modules */
.wyts1.card,
.wyts2.card,
.tekst1.card,
.tekst2.card,
.tekst3.card {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Minimale verticale ruimte */
.card {
  margin-top: 0,25rem !important  
  margin-bottom: 0.55rem !important;
}

.card-body {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Verticale ruimte verkleinen voor top-modules */
.container-top-a .card-body,
.container-top-c .card-body,
.container-top-f .card-body,
.container-top-h .card-body,
.container-top-j .card-body {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Eventueel ook de buitenmarge kleiner maken */
.container-top-a .card,
.container-top-c .card,
.container-top-f .card,
.container-top-h .card,
.container-top-j .card {
    margin-bottom: 1rem !important;
}

/* Twee kolommen naast elkaar voor meil1 en meil2 */
.container-meil-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;

    /* Zelfde breedte en centrering als Cassiopeia containers */
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Kolommen */
.container-meil-row .meil-col {
    display: flex;
    flex-direction: column;
}

/* Inhoud even hoog houden */
.container-meil-row .meil-col > * {
    flex: 1;
}

/* Mobiel: onder elkaar */
@media (max-width: 768px) {
    .container-meil-row {
        grid-template-columns: 1fr;
    }
}



/* Styling voor de footer tekst */
.footer-geel {
    background-color: yellow;
    text-align: center;
    padding: 20px 0;
    width: 100%;
    display: block;
}


/* Zorgt dat op mobiel de tekst niet tegen de randen plakt */
@media (max-width: 768px) {
    .footer-geel p {
        font-size: 18pt;
    }
}

.container-component {
    display: grid;
    grid-column: 1 / -1; /* Zorgt dat de container de volle breedte pakt */
    justify-content: center; /* Centreert de inhoud horizontaal */
    margin: 20px 0; /* Geeft wat ruimte boven en onder het artikel */
}

.main-content {
    grid-column: main-start / main-end; /* Gebruikt de standaard Cassiopeia grid-lijnen */
    width: 100%;
    max-width: 1320px; /* Dit zorgt dat je tekst niet van uiterst links naar uiterst rechts loopt op brede schermen */
}