/* --- 1. Lettertypes & Basis --- */
@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;
  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; }

/* --- 2. Header & Menu --- */
.header.container-header {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: sticky;     
    top: 0;
    z-index: 9999;
}

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;
}

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;
}

.container-topbar .mod-menu .separator { display: none; }

.container-topbar .mod-menu > li + li::before {
    content: "|";
    margin: 0 0.75rem;
    color: black;
}

.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;
}

.header.container-header ul.mod-menu.mod-list.nav.mini-menu > li > a:hover {
    background: #f5e39a !important;
    color: white !important;
}

.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;
}

/* --- 3. Modules Desktop Layout --- */
.geel { width: 80%; margin-left: 15%; margin-right: auto; padding: 20px; }
.groen { width: 80%; margin-right: 15%; margin-left: auto; padding: 20px; }
.oranje { width: 85%; margin: 0 auto; padding: 20px; }
.geel4 { width: 75%; margin-left: 20%; margin-right: auto; padding: 20px; }
.oranje2 { width: 100%; height: auto; padding: 0; margin: 0; }

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

/* --- 4. Speciale Effecten & Containers --- */
.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%; backface-visibility: hidden; }
.flip-card-back { background-color: white; transform: rotateY(180deg); }

.woordwerk { height: 50%; margin-left: 10%; }
.blokcontact { scroll-margin-top: 80px; }

img.wytssepia { filter: sepia(100%); transition: 0.5s; }
img.wytssepia:hover { filter: sepia(0%); }
img.zwartwit { filter: grayscale(100%); transition: 0.5s; }
img.zwartwit:hover { filter: grayscale(0%); }

.container-top-all, .container-top-all .grid-child { width: 60%; max-width: 60%; margin: 0 auto; display: block; }
.container-tekst-row, .container-wyts-row, .container-meil-row { 
    display: grid; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 1rem; gap: 2rem; 
}
.container-tekst-row { grid-template-columns: repeat(3, 1fr); }
.container-wyts-row, .container-meil-row { grid-template-columns: repeat(2, 1fr); }


/* --- 5. Cassiopeia Schoonmaak (Aangevuld) --- */
.container-top-a .card, .container-top-b .card, .container-top-all .card, .wyts1.card, .tekst1.card { 
    border: none !important; 
    box-shadow: none !important; 
    background: transparent !important; 
}

/* --- 5a. Verwijder randen van ALLE modules binnen de containers --- */
/* Dit pakt alle Cassiopeia cards aan */
.card,
.module-content {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* --- 6. Footer & Component --- */
.footer-geel { background-color: yellow; text-align: center; padding: 20px 0; width: 100%; display: block; }
.container-component { display: grid; grid-column: 1 / -1; justify-content: center; margin: 20px 0; }
.main-content { width: 100%; max-width: 1320px; }

/* --- 7. MOBIEL & TABLET (Media Queries) --- */
@media screen and (max-width: 992px) {
    header.header, .navbar { position: sticky !important; top: 0; z-index: 9999; background: #fff !important; }
}

@media screen and (max-width: 768px) {
    /* Algemene Layout Mobiel */
    .container-tekst-row, .container-wyts-row, .container-meil-row { grid-template-columns: 1fr; }
    
    /* Titels fixen (zie jouw screenshot) */
    h1, h2, h3, .tox { 
        font-size: 24px !important; 
        line-height: 1.2 !important; 
        width: 100% !important; 
        display: block !important;
    }

  /* Containers naar volle breedte (Zonder padding aan de zijkant voor mobiel) */
    .geel, .groen, .oranje, .geel4, .letters, .container-top-all, .container-top-all .grid-child { 
        width: 100% !important; 
        max-width: 100% !important; 
        margin: 0 !important; 
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        padding-left: 0 !important; /* Geen padding aan de zijkant van de container */
        padding-right: 0 !important;
        box-sizing: border-box !important;
    } 
  
  
    /* Tekst in modules */
    .geel p, .groen p, .oranje p, .geel4 p { 
        padding: 1.5em !important; 
        font-size: 16px !important; 
        margin: 0 !important;
    }

    /* De specifieke kleine letters */
    .letters p { 
        font-size: 11px !important; 
        padding: 1.2em !important;
    }

    .footer-geel p { font-size: 14pt !important; }
}