/* General Reset */
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    font-family: Helvetica;
    color: #000;
}

/* Header hier staat mijn navigatiebar, dus de bovenste bar die je op elke site zult zien. Hier staat home, over mij, projecten en contact. Die leiden je weer naar de gewenste locatie.*/
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    max-width: 1400px;
    margin:0 auto;
}

header h1 {
    font-size: 20px;
    text-transform: uppercase;
}
header nav a {
    color: #fff;
    text-decoration: none;
    margin-left: 20px;
    font-size: 16px;
    
}

header nav a:hover {
    text-decoration: underline;
}

/* Hero Section Hier staan mijn hero-image en positionering van mijn grote header, daarin staat weer welkomst tekst met een bijpassende slogan. In de css heb ik handmatig de font-size aangepast en de titel een bold gewicht gegeven, zodat het beter opvalt sinds het DE titel is. */

.hero-content{
    background-position: center;
    background-size: cover;
}
#hero {
    background-image: url(../images/header.jpg);
    background-size: cover;
    height: 400px;
    color: #ffffff;
    bottom: 500px;
    padding: 60px 20px;
    max-width: 1400px;
    margin:0 auto;
}
#hero h1 {
    font-size: 80px;
    padding-top: 60px;
    font-weight:bolder;
    margin: 0;
}

#hero p {
    font-size: 30px;
    font-style:italic;
    margin: 10px 0 0;
}
/*=========================================================================
    #about section vertelt over mij, hier staat een h2 met titel over mij en een tekst met een introductie over mijn interesses. Hier staat ook een grid en containers/cards, ik heb alle kopjes een h2 gegeven, zodat het consistent is. Het zelfde heb ik dus ook voor Projecten en Contact gedaan.
========================================================================== */
/* About Section */
.about {
    display: flex;
    padding: 40px 20px;
    background-color: #000000;
}
.about .overmij {
    color:#fff;
}
.about h2 {
    font-size: 32px
}
.about {
    flex: 2;

}
#about img {
    border-radius: 8px;
    width: 310px;
    height: 440px;
    grid-column-start: 12;
    grid-column-end: 13;
}
/* structuur about me, hier heb ik mijn about me in 2 grid-kolommen gezet. (containers) 1 voor tekst en 1 voor de foto's. Voor mijn pagina heb ik er voor gekozen om de foto's rechts te plaatsen. */
#about {
    max-width: 1400px;
    margin:0 auto;

}
/* UITLEG-GRIDSYSTEEM = display heb ik in een grid gezet, om css te laten weten dat ik een grid maak. Ik heb een grid-template met kolommen gebruikt waar ik 12 kolommen gebruik. Ik heb grid-gap gebruikt in de container met 16 px voor witruimte tussen de kolommen. */
#about .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px;
}
/* UITLEG-GRIDSYSTEEM = nth-child houdt de div card in waar mijn inhoud staat, daar heb ik gekozen om kolom 1 tot kolom 6 te gebruiken voor de breedte van mijn tekst. :nth-child() selecteert kindelementen op basis van hun positie tussen alle broederelementen binnen een ouderelement. */
#about .card:nth-child(1){  /* eerste container */
    grid-column-start: 1;
    grid-column-end: 6;

}
/* UITLEG-GRIDSYSTEEM = nth-child houdt de div card in waar mijn inhoud staat, daar heb ik gekozen om kolom 12 tot kolom 13 te gebruiken voor de breedte van mijn foto. :nth-child() selecteert kindelementen op basis van hun positie tussen alle broederelementen binnen een ouderelement. */
#about .card:nth-child(2){ /* tweede container */
    grid-column-start: 12;
    grid-column-end: 13;
}


/*=========================================================================
    #cursus structure, hier staan alle cards van de aantal cursussen. Dat zijn er vier dus heb ik 4 nth-childs. Daar zet ik alle grid-kolommen in, zodat ik ritme en harmonie creer en het overzichtelijk voor mezelf maak en de grid consistent kan gebruiken. Ik gebruik de zelfde cards voor projecten.
========================================================================== */
#cursussen{
    margin:0 auto;
    max-width:1400px;
}
/* leg uit hoe de grid systeem werkt */
#cursussen .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px;
}

#cursussen .card:nth-child(1){  /* eerste container */
    grid-column-start: 1; 
    grid-column-end: 4; 
    background-image: url(../images/cursus1.jpg);
    background-size: cover;
}

#cursussen .card:nth-child(2){ /* tweede container */
    grid-column-start: 4; 
    grid-column-end: 7; 
    background-image: url(../images/cursus2.jpg);
    background-size: cover;
}

#cursussen .card:nth-child(3){ /* eerste card */
    grid-column-start: 7; 
    grid-column-end: 10; 
    background-image: url(../images/cursus3.jpg);
    background-size: cover;
}


#cursussen .card:nth-child(4){ /* tweede card */
    grid-column-start: 10; 
    grid-column-end: 13; 
    background-image: url(../images/cursus4.jpg);
    background-size: cover;
}
#cursussen .card:nth-child(5){ /* tweede card */
    grid-column-start: 1; 
    grid-column-end: 4; 
    background-image: url(../images/header.jpg);
    background-size: cover;
}


#cursussen .card {
    background-color: #ffffff;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    border-radius: 8px;
}
/* Cursus1 Section */

/* Projects Section */
.projects {
    background-color: #ffffff;
    padding: 40px 20px;
    text-align: left;
}

.projects h2 {
    font-size: 32px;
    margin-bottom: 20px;
}
/*=========================================================================
    #projects hier staan mijn csards en grid voor de cards, zodat ik het zo overzichtelijk en strak mogelijk maak voor mezelf. Elke card heeft een url met de image waarop je kunt klikken. Die image leidt je naar een andere site. School leidt naar een pagina waar het over school gaat.
========================================================================== */
#projects{
    margin:0 auto;
    max-width:1400px;
}

#projects .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px;
}

#projects .card:nth-child(1){  /* eerste container */
    grid-column-start: 1; 
    grid-column-end: 4; 
    background-image: url(../images/school.jpg);
    background-size: cover;
}

#projects .card:nth-child(2){ /* tweede container */
    grid-column-start: 4; 
    grid-column-end: 7; 
    background-image: url(../images/posters.jpg);
    background-size: cover;
}

#projects .card:nth-child(3){ /* eerste card */
    grid-column-start: 7; 
    grid-column-end: 10; 
    background-image: url(../images/branding.jpg);
    background-size: cover;
}


#projects .card:nth-child(4){ /* tweede card */
    grid-column-start: 10; 
    grid-column-end: 13; 
    background-image: url(../images/fotografie.jpg);
    background-size: cover;
}


#projects .card {
    background-color: #ffffff;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    border-radius: 8px;
}


/* Contact Section , hier staat mijn footer met alle informatie over mezelf, met mijn mail en mijn socials.*/
#contact {
    background-color: #000;
    color: #fff;
    padding: 40px 20px;
    text-align: left;
    margin:0 auto;
    max-width: 1400px;
}

.contact h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.contact p {
    margin: 10px 0;
}

.contact a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.contact a:hover {
    text-decoration: underline;
    text-decoration-color: #fff;
}

/* Socials */
.socials {
    display: flex;
    justify-content: left;
    gap: 15px;
    margin-top: 20px;
}
#socials {
    text-align: left;
    
}
#socials .card img, #contact img {
    width: 32px;
    height: 32px;
}

/* ───────────────────────────────────────────────────────────────
   APPENDED PAGE-SPECIFIC OVERRIDES  (ONLY for body.cursus-page)
   ─────────────────────────────────────────────────────────────── */
.cursus-page {
    background-color: #fff;                 /* whole page white */
}

/* 1. Force upper sections to black */
.cursus-page header,
.cursus-page #hero,
.cursus-page .about,
.cursus-page .slideshow-cursuscontainer {
    background-color: #000 !important;
    color: #fff !important;
}

/* 2. Projects section back to white and aligned to grid */
.cursus-page .Cursusprojects {
    background-color: #fff;
    padding: 0;
    text-align: left;
}
.cursus-page .Cursusprojects h2 {
    font-size: 32px;
    margin: 40px auto 20px;
    max-width: 1400px;
    padding: 0 20px;           /* 20 px gutters */
    color: #000;
}

/* 3. Five-column grid for cards */
.cursus-page #Cursusprojects .cursuscontainer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 0 20px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* 4. Gradient cards (black → #25c89d) with black text */
.cursus-page #Cursusprojects .card {
    background: linear-gradient(to bottom, #000 0%, #25c89d 100%);
    border: 2px solid #000;
    color: #000;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
}

/* 5. Footer: constrained black box, white text/links */
.cursus-page #contact {
    background: none;          /* let outer area stay white */
}
.cursus-page #contact .cursuscontainer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #000;
    color: #fff;
}
.cursus-page #contact .cursuscontainer a {
    color: #fff;
    text-decoration: none;
}
.cursus-page #contact .cursuscontainer a:hover {
    text-decoration: underline;
}

/*═══════════════════════════════════════════════════════════════
  SPECIAL STYLES: gradient cards only inside  <section class="cursus-page">
═══════════════════════════════════════════════════════════════*/

/* Heading spacing & alignment (matches global grid gutters) */
#cursussen.cursus-page h2 {
    font-size: 32px;
    margin: 40px auto 20px;
    max-width: 1400px;           /* same width cap you use elsewhere */
    padding: 0 20px;             /* 20-px horizontal gutters */
    color: #000;
}

/* grid wrapper */
#cursussen.cursus-page .cursusgrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);   /* four fixed tracks */
    gap:16px;
    max-width:1400px;
    margin:0 auto;
    padding:0 20px 40px;
}

/* cards */
#cursussen.cursus-page .cursusgrid .card{
    /* force anchor to behave like a plain block */
    display:flex;
    width:100%;          /* fill the grid cell, nothing more */
    min-width:0;         /* allow shrink */
    box-sizing:border-box;

    justify-content:center;
    align-items:center;

    height:400px;
    background:linear-gradient(to bottom,#000 0%,#25c89d 100%);
    border:2px solid #000;
    border-radius:8px;

    font:700 18px/1 Helvetica,Arial,sans-serif;
    color:#000;
    text-transform:uppercase;
    text-decoration:none;
}

#cursussen.cursus-page .cursusgrid .card{
    /* cancel the old 12-column spanning */
    grid-column:auto / span 1;        /* <-- this line fixes the widths */

    /* keep the gradient look */
    background:linear-gradient(to bottom,#000 0%,#25c89d 100%);
    border:2px solid #000;
    color:#000;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;      /* stay inside own track */
    min-width:0;
    box-sizing:border-box;
    height:400px;
    font:700 18px/1 Helvetica,Arial,sans-serif;
    text-transform:uppercase;
    border-radius:8px;
}