/* Reset / basis / blocks*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background-color: #fdf2df;
    font-family: Arial, Helvetica, sans-serif;
    color: #222;
    line-height: 1.5;
}

.container {
    width: 1202px;
    margin: 0 auto;
    background-color: #fdf2df;
    border-left: 1px solid #2f1513;
    border-right: 1px solid #2f1513;
    min-height: 100vh;

    background-image: url('../assets/png/container_back.png');
    background-repeat: repeat; /* of no-repeat / repeat-y afhankelijk van je design */
    background-size: auto; /* of cover / contain */
}

header {
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center; /* centreert de afbeelding horizontaal */
    align-items: center;     /* optioneel: verticaal centreren */
}

header img {
    width: 1200px;
    height: 500px;
    margin: 0;
    display: block;
}

.menu {
    width: 100%;
    height: 60px;
    background-color: #2f1513;
    color: #ffffff;
    border-bottom: 1px solid #ccc;

    background-image: url('../assets/png/menu.png');
    background-repeat: repeat;
    background-size: auto;
}


footer {
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center; /* centreert de afbeelding horizontaal */
    align-items: center;     /* optioneel: verticaal centreren */

    background-image: url('../assets/png/footer.png');
    background-repeat: repeat; /* of no-repeat / repeat-y afhankelijk van je design */
    background-size: auto; /* of cover / contain */
}

footer a, 
footer p, 
footer span {
    color: white;          /* tekst wit */
    font-size: 1.4rem;     /* iets grotere letters */
    margin-top: 70px;      /* tekst laten zakken */
    display: block;        /* zorgt dat margin-top werkt */
    text-align: center;    /* netjes centreren */
    text-decoration: none;   /* underline weg */
}

.disclaimer {
    text-align: center;
    padding: 1rem 0;      /* witruimte boven en onder */
    font-size: 0.90rem;   /* subtiel kleiner */
    opacity: 0.75;        /* iets zachter, niet schreeuwerig */
}

/* menu styling */

/* ===== MENU UL ===== */
.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;

    height: 100%;                 /* vult de 60px hoogte */
    display: flex;                /* maakt horizontaal menu */
    align-items: center;          /* centreert verticaal */
    justify-content: center;      /* centreert horizontaal */
    gap: 100px;                    /* ruimte tussen items */
}

/* ===== MENU LINKS ===== */
.menu a {
    font-size: 20px;              /* GROTERE LETTERS */
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    transition: color .2s;
}

.menu a:hover {
    color: #ffb36b;               /* warme oranje highlight */
}

/* home main grid */

.content-grid {
    max-width: 1000px;      
    margin: 0 auto;        
    padding: 10px;         
    
    display: grid;
    grid-template-columns: 60% 40%;  /* twee kolommen: 70/30 */

    grid-gap: 0px;        /* ruimte tussen kolommen */
}

.content-grid-songs {
    max-width: 1000px;      
    margin: 0 auto;        
    padding: 10px;         
    
    display: grid;
    grid-template-columns: 50% 50%;  /* twee kolommen: 70/30 */

    grid-gap: 0px;        /* ruimte tussen kolommen */
}

.blok1-songs {
    grid-column: 1 / 3;
}

/* linker kolom */
.blok2-songs {
    grid-column: 1 / 2;
}

/* rechter kolom */
.blok3-songs {
    grid-column: 2 / 3;
}

/* bovenste blok over de volle breedte */
.blok1 {
    grid-column: 1 / 3;
}

/* linker kolom */
.blok2 {
    grid-column: 1 / 2;
}

/* rechter kolom */
.blok3 {
    grid-column: 2 / 3;
}

/* songs css */



.video-box {
  max-width: 100%;   /* niet meer begrenzen binnen de kolom */
  border: 1px solid #2f1513;
  background: #d7be92;
  padding: 0px 0px 30px 0px;
  margin: 0 auto 30px auto; /* <-- hier zit de ondermarge */
  border-radius: 8px; /* goed */
  overflow: hidden;           /* BELANGRIJK: voorkomt rafels onderaan */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.video-title {
  margin: 0px;
  padding: 5px 5px 5px;
  border-radius: 8px 8px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #5b2b00;
  
}

.video-box iframe {
  width: 400px;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block; /* voorkomt witte lijntjes onderaan */

}

.video-box-main {
  max-width: 400px;   /* niet meer begrenzen binnen de kolom */
  border: 1px solid #2f1513;
  background: #d7be92;
  padding: 0px 0px 30px 0px;
  margin: 0 auto 30px auto; /* <-- hier zit de ondermarge */
  border-radius: 8px; /* goed */
  overflow: hidden;           /* BELANGRIJK: voorkomt rafels onderaan */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.video-title-main {
  margin: 0px;
  padding: 5px 5px 5px;
  border-radius: 8px 8px 0 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #d7be92;
  background: #c34609;
}

.video-box-main iframe {
  width: 400px;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block; /* voorkomt witte lijntjes onderaan */

}