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

html, body {
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}


body {
  font-family:'Waiting for the Sunrise', cursive;
  background:black;
  color:#eee;
}

#wrapper { min-height:100vh; display:flex; flex-direction:column; }









/* ========== Header ========== */
#balk {
  position:fixed; top:0; left:0;
  background:rgba(0,0,0,0.5);
  height:100px; width:100%; z-index:50;
}
#binnenbalk {
  width:80%; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px;
}

/* Titel + hamburger naast elkaar */
#titel {
  display:flex;
  align-items:center;
  gap:12px;
}
#titel a.speciaal1 {
  font-size:30px; font-weight:bold; color:red; text-decoration:none;
}
#titel a.speciaal1:hover { color:yellow; }

/* Desktop menu rechts */
#menu1 ul { list-style:none; display:flex; gap:20px; }
a.speciaal2 { font-size:20px; font-weight:bold; color:yellow; text-decoration:none; }
a.speciaal2:hover { color:red; }

/* Optionele header controls */
#header-controls {
  flex:1; display:none; justify-content:center; align-items:center; gap:10px;
}
.shuffle-btn {
  padding:4px 8px; background:black; border:2px solid red; color:red;
  border-radius:6px; cursor:pointer; font-size:12px;
}
.shuffle-btn:hover { background:yellow; color:red; }










/* ========== Homepage hero ========== */



#boven {
  flex:1;
  padding-top:100px;
  background:url(yellowsplash.png) center 100px no-repeat;
  background-size:700px 419px;
  display:flex; justify-content:center; align-items:center;
  flex-direction:column; text-align:center;
}











@media (max-width:767px){
  #boven {
    flex:0 !important;
  }
}






/* Rode “Dit of Dat” letters (geen globale span) */
.pa {
  display:block;
  font-weight:bold;
  color:red;
  font-size:150px;
  line-height:0.7;
  position:relative;
  top:-30px;
}

/* ========== Songboek hero ========== */
#songboek-hero {
  margin:100px auto 25px auto;
  display:flex; align-items:center; justify-content:center;
  width:50vw; max-width:420px; aspect-ratio:700 / 419;
  background:url(yellowsplash.png) center center no-repeat; background-size:contain;
}
#songboek-title {
  font-size:47px; font-weight:bold; color:red; text-align:center; transform:translateY(28px);
}

/* ========== Player ========== */
#jukebox #player {
  display:block; width:320px; height:20px; min-height:0;
  margin:12px auto; border:none; background:transparent;
}

/* ========== Playlist ========== */
#jukebox .playlist {
  background:black; border-radius:10px;
  height:280px; overflow-y:auto;
  display:grid; grid-template-columns:repeat(3,125px);
  column-gap:40px; row-gap:35px;
  margin:0 auto 8px auto;
  justify-content:center; position:relative;
  scrollbar-width:none;
  font-family:'Oswald', sans-serif;
}
#jukebox .playlist::-webkit-scrollbar { display:none; }
#jukebox .playlist::after {
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:40px; background:linear-gradient(to bottom, transparent, black);
  pointer-events:none;
}
#jukebox .playlist button {
  width:125px; height:125px; border-radius:50%;
  border:3px solid red;
  background:#000 url('yellowsplash.png') center/400% no-repeat;
  color:#e00000; font-weight:700; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  font-family:'Oswald', sans-serif;
}
#jukebox .playlist button:hover {
  transform:scale(1.07);
  box-shadow:0 0 8px red;
  border-color:#ff4d4d;
  color:#ff4d4d;
}

/* Scroll hint */
#jukebox .scroll-hint {
  text-align:center; font-size:18px; color:#aaa;
  letter-spacing:1px; animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:0.6;} 50%{opacity:1;} }

/* ========== Lyrics ========== */
#jukebox .lyrics {
  background:black; padding:12px; border-radius:10px;
  white-space:pre-wrap; font-size:16px;
  font-family:'Oswald', sans-serif;
  color:red; overflow-y:auto; border:1px solid black;
  text-align:center; max-width:900px; margin:auto;
  scrollbar-width:none; position:relative;
}
#jukebox .lyrics::-webkit-scrollbar { display:none; }
#jukebox .lyrics::after {
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:20px; background:linear-gradient(to bottom, transparent, black);
  pointer-events:none;
}
#jukebox .lyrics .first-line {
  font-size:22px; color:yellow; margin-bottom:8px; font-weight:bold;
}

/* ========== Footer ========== */
#copy { background:black; text-align:center; padding:20px 0; margin-top:auto; }
.copyright { color:yellow; font-size:12px; }
#jukebox + #copy { margin-top:60px; }

/* ========== Responsive tweaks ========== */
@media(max-width:900px){
  #songboek-hero{ max-width:380px; }
  #songboek-title{ font-size:43px; transform:translateY(26px); }
}
@media(max-width:800px){
  #songboek-hero{ width:65vw; max-width:360px; }
  #songboek-title{ font-size:41px; transform:translateY(24px); }
}
@media(max-width:600px){
  #binnenbalk{ width:90%; }
  #songboek-hero{ width:75vw; max-width:340px; }
  #songboek-title{ font-size:39px; transform:translateY(22px); }
}
@media(max-width:500px){
  .pa{ font-size:85px; line-height:0.7; top:-25px; }
  #songboek-title{ font-size:35px; transform:translateY(20px); }
  #songboek-hero{ width:80vw; max-width:320px; }
  #jukebox #player{ width:100%; height:14px; }
}
@media(max-width:400px){
  .pa { font-size:70px; line-height:0.8; top:-20px; }
  #songboek-title { font-size:30px; transform:translateY(18px); }
  #songboek-hero { width:85vw; max-width:280px; }
  #jukebox .playlist {
    grid-template-columns:repeat(2,110px);
    column-gap:25px; row-gap:25px;
  }
  #jukebox .playlist button {
    width:110px; height:110px; font-size:13px;
  }
}

/* Homepage hero aanpassing */
@media(max-width:600px){
  #boven { background-position:center 60px; }
  .pa { top:-50px; font-size:100px; }
}

/* ========== Hamburger en mobiel menu ========== */

/* Desktop/laptop: hamburger verborgen, horizontaal menu zichtbaar */
.hamburger { display:none; }

/* Hamburger styling (actief op mobiel via media query) */
.hamburger {
  background:none;
  border:none;
  padding:0;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:34px;
  height:26px;
  cursor:pointer;
}
.hamburger span {
  display:block;
  width:30px;
  height:4px;
  margin:4px 0;
  background:yellow;
  border-radius:2px;
  transition:transform .3s, opacity .3s;
}

/* Kruis bij open */
.hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(6px,-6px); }



/* Mobiel/tablet: hamburger zichtbaar, uitklapmenu onder het kruis, transparant */
@media (max-width:767px){
  .hamburger { 
    display:flex; 
  }

  /* Verberg het desktopmenu; toon alleen wanneer open */
  #menu1 { 
    display:none; 
  }

  #menu1.open {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;                 /* jouw originele waarde */
    position:absolute;
    top:40px;
    left:10px;
    background:transparent;
    padding:10px 0;
    z-index:999;
  }

  #menu1 ul {
    display:flex;
    flex-direction:column;
    gap:3px;                 /* originele spacing */
    margin:0; 
    padding:0;
    list-style:none;
  }

  #menu1 a {
    color:yellow;
    font-size:20px;
    text-decoration:none;
    font-weight:900;         /* vetter, maar modern */
    line-height:1.1;         /* strak, maar niet geplet */
  }

  #menu1 a:hover { 
    color:red; 
  }
}



@media (max-width:767px){
  #balk {
    height:56px; /* compacte mobiele header */
  }

  #binnenbalk {
    width:95%;
    padding-top:4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* Titel + hamburger netjes naast elkaar */
  #titel {
    display:flex;
    align-items:center;
    gap:8px;
  }
  #titel a.speciaal1 { font-size:22px; }

  /* Mobiele knoppen compacter */
  .mobile-player {
    display:flex;
    gap:6px;
  }
  .mobile-player .player-btn,
  .mobile-player .shuffle-btn {
    width:32px;
    height:32px;
    font-size:14px;
    border-radius:4px;
    padding:0; /* geen extra ruimte */
  }
}


/* Homepage hero aanpassing */
@media(max-width:600px){
  #boven {
    background-position: center 110px; /* afbeelding lager op mobiel */
  }
  .pa {
    top:-30px; /* tekst blijft zoals op laptop */
    font-size:100px;
  }
}


@media(max-width:600px){
  #boven { background-position:center 50px; }
  .pa {
    top:-90px;
    font-size:115px; /* iets groter dan 100px */
  }
}

/* Fix: dropdown altijd netjes onder de header bij mobiel */
@media (max-width:767px){
  #binnenbalk {
    position: relative; /* anker voor het menu */
  }

  #menu1 {
    position: absolute;
    top: 100%;   /* direct onder #binnenbalk */
    left: 0;
    right: 0;
  }
}

/* Compacter maken songboek-pagina voor meer lyrics */
@media(min-width:600px) and (max-width:1500px)  { /*tablet */
   #songboek-hero {
    max-width: 280px;   /* kleiner PNG-blok dan laptop */
    margin: 70px auto 18px auto; /* minder marge boven/onder */
  }
  #songboek-title {
    font-size: 30px;    /* titel nog iets kleiner */
    transform: translateY(14px);
  }

  #jukebox .playlist {
    height: 250px;      /* compacter dan laptop */
    row-gap: 22px;      /* minder ruimte tussen knoppen */
  }

  #jukebox .playlist button {
    width: 105px;       /* knoppen net kleiner */
    height: 105px;
    font-size: 13px;
  }

  #jukebox .lyrics {
    min-height: 5em;    /* minstens 2–3 regels zichtbaar */
  }
}

/* Compacter maken songboek-pagina voor meer lyrics */






/* Laptop/desktop: vanaf 1501px */
@media(min-width:1501px){

 /* laptop*/
 
  #songboek-hero {
    max-width: 340px;   /* groter PNG-blok dan tablet */
    margin: 90px auto 25px auto; /* iets meer marge boven */
  }
  #songboek-title {
    font-size: 36px;    /* titel weer groter */
    transform: translateY(20px);
  }

  #jukebox .playlist {
    height: 280px;      /* ruimer dan tablet */
    row-gap: 28px;      /* meer ruimte tussen knoppen */
  }

  #jukebox .playlist button {
    width: 120px;       /* knoppen groter */
    height: 120px;
    font-size: 15px;
  }

  #jukebox .lyrics {
    min-height: 5.5em;  /* iets meer ruimte voor lyrics */
  }
}

@media (max-width:767px){
  #boven {
    position:relative;
    overflow:hidden;
    background:none !important;   /* originele achtergrond uit */
  }

  #boven::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:url(yellowsplash.png);
    background-size:700px 419px;

    /* <<< HIER schuif je de afbeelding omhoog >>> */
    background-position:center 30px;  /* was 100px, nu hoger */

    background-repeat:no-repeat;
    transform:scaleX(-1);   /* spiegeling */
    z-index:-1;
  }
}


@media (max-width:767px){
  #boven {
    padding-top:50px;   /* tekst hoger */
  }
}





@media (max-width:767px){
    #boven {
        min-height: calc(100vh - 56px);
        overflow:hidden;
    }
}