@font-face {
  font-family:"Blogger Sans-Light";
  src: url("fonts/Blogger Sans-Light.woff2") format("woff2"),
       url("fonts/Blogger Sans-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:"Mercy-Christole";
  src: url("fonts/Mercy-Christole.woff2") format("woff2"),
       url("fonts/Mercy-Christole.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:"motherbeloved";
  src: url("fonts/motherbeloved/motherbeloved.woff2") format("woff2"),
       url("fonts/motherbeloved/motherbeloved.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "quicksandLightRegular";
  src: url("fonts/quicksand/quicksandLightRegular.woff2") format("woff2"),
       url("fonts/quicksand/quicksandLightRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Blogger Sans-Light", Arial, sans-serif;
  margin: 0;
  background-color: rgb(255, 253, 237) /* #cbff87;*/
}

.site-header {
  position: relative;
  text-align: center;
}

.hero-banner {
  width: 100%;
  height: 300px;

  background-image: url("img/bannerconfettilb.png");
  background-size: cover;       /* vult volledig, snijdt evt. bij */
  background-position: center;  /* focus in het midden */
  background-repeat: no-repeat;

  display: flex;
  justify-content: center;      /* horizontaal centreren */
  align-items: center;          /* verticaal centreren */

  position: relative;

}


.logogroot {
  width: 120px;
  height: auto;
  display: block;
}

.titles { 
  font-size: 2.2rem;
  font-weight: normal;   /* Cutive is monospaced, normaal is vaak mooier dan bold */
  margin-bottom: 0.5rem;
}

.title-sub {
  font-size: 1.5rem;
  font-weight: normal;
  margin-top: 1.5rem;
  margin-bottom: 0.3rem;
}

.paragraph {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
 
/*nieuw menu dropdown*/

/* =========================
   MENU + DROPDOWN (MOBIEL PROOF)
   - Desktop: hover
   - Mobiel/tablet: tap (focus)
   ========================= */

/* MENU BALK - de styling van de nav container */
.menu{
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: #e4ff5e;
 }

/* HOOFDMENU - de styling van de containers van de individuele menu items */
.menu-list{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 18px;
  border: 1px solid #6aaed6;
  background: transparent;
  justify-content: center;
}

/* Style van de lijst van het menu, in dit geval geen bolletjes  */
.menu-item{
  list-style: none;
}

/* de vormgeving van alle links in je menu-list die in een li staan*/
.menu-list > li > a {
  display: inline-block;
  padding: 10px 16px;

  border: 1px solid #6aaed6;
  border-radius: 6px;

  text-decoration: none;
  text-transform: uppercase;
  font-family: "quicksandLightRegular", sans-serif;
  font-size: 16px;
  font-weight: bold;

  color: #6aaed6;
  background-color: transparent;

  transition: background-color 0.2s ease, color 0.2s ease;
}

/* HOVER HOOFDMENU */
.menu-item > a:hover{
  background-color: #6aaed6;
  color: #ffffff;
}

/* SUBMENU (basis) */
.has-submenu{ position: relative; }
.has-submenu > .submenu{ left: 0; top: 100%; }


.submenu{
  list-style: none;
  margin: 0;
  padding: 6px 0;

  position: absolute;
  top: 100%;
  left: 0;

  display: none;
  min-width: 180px;
  width: max-content;

  background-color: #fff;
  border: 1px solid #6aaed6;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  z-index: 1000;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* OPENEN: desktop hover */
.has-submenu:hover > .submenu{
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0);
}

/* OPENEN: mobiel/tablet tap (focus) */
.has-submenu:focus-within > .submenu{
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: translateY(0);
}

/* SUBMENU LINKS */
.submenu a{
  display: block;
  padding: 10px 18px;
  text-decoration: none;
  font-family: "quicksandLightRegular", sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #6aaed6;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(106,174,214,0.25);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.submenu li:last-child a{
  border-bottom: none;
}

/* HOVER SUBMENU */
.submenu a:hover{
  background-color: #eef6fc;
  color: #2f6f9f;
}

/* TOETSENBORD/MOBIEL: duidelijke focus-ring */
.menu a:focus-visible{
  outline: 3px solid rgba(106,174,214,0.7);
  outline-offset: 2px;
}

/* OPTIONEEL: submenu binnen scherm houden op smalle schermen */
@media (max-width: 600px){
  .submenu{
    left: 0;
    right: auto;
    max-width: calc(100vw - 2rem);
  }
  .submenu a{
    white-space: normal; /* lange teksten mogen afbreken */
  }
}

/*
.navbar {
  list-style: none;           
  display:flex;              
  justify-content:center;  
  gap:30px;                 
  padding:30px 20px;
  margin:0px;
  background-color: #2C9FAF;
  flex-wrap: wrap;
}
 .navtekst {
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  color: #cbff87;
  background-color: #6CDBDF;
  text-decoration: none;

  width: 60px;
  height: 60px;
  padding: 6px;            

  border-radius: 50%;
  border: 3px solid #D6BEDF;

  font-size: 13px;             
  line-height: 1.15;

  white-space: normal;        
  word-break: break-word;
  overflow: hidden;    

  transition: 0.3s ease;
}

.navtekst:hover {
  background-color: #ffd6ff;
  transform: scale(1.08);
}

.navtekst:active {
  transform: scale(0.95);
}
*/

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* max 4 naast elkaar */
  gap: 15px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 40px 40px; /* top, recht, onder, links*/
}

.gallery img {
  width: 100%;
  height: 450px;
  border-radius: 10px;
  object-fit: cover;
}

body.indexpagina {
 background-color: #b2eaf0;
 font-family: "quicksandLightRegular", Arial, sans-serif;
 font-weight: bold;
 text-align: center
}

body.kleurplatenlove {
 background-color: #ffdde1; /* lichte roze achtergrond voor valentijnpagina */
 font-family: "motherbeloved", Arial, sans-serif;
 font-size: 24px;
 font-weight: bold;
} 

body.kleurplatenPasen {
 background-color: #fff5ba; /* lichte gele achtergrond voor pasenpagina */
 font-family: "quicksandLightRegular", Arial, sans-serif;
 font-size: 24px;
 font-weight: bold;
}

body.kleurplatenLente {
 background-color: #d4fcdc; /* lichte groene achtergrond voor lentepagina */
 font-family: "motherbeloved", Arial, sans-serif;
 font-size: 24px;
 font-weight: bold;
}


body.harajukupagina {
 background-color: #f9baff; /* lichte roze achtergrond voor harajuku pagina */
 font-family: "quicksandLightRegular", Arial, sans-serif;
 font-size: 24px;
 font-weight: bold;
}

body.kerstpagina {
 background-color: #e93168; /* lichte blauwe achtergrond voor kerstpagina */
 font-family: "QuicksandLightRegular", Arial, sans-serif;
}


body.unicornspagina {
 background-color: #e0bbff; /* lichte paarse achtergrond voor unicornpagina */
 font-family: "QuicksandLightRegular", Arial, sans-serif;
}

body.sintmaartenpagina {
 background-color: #5081af; /* lichte oranje achtergrond voor sintmaartenpagina */
 font-family: "QuicksandLightRegular", Arial, sans-serif;
}

body.politiepagina {
 background-color: #001f5b;
 font-family: "QuicksandLightRegular", Arial, sans-serif;
}

body.ambulancepagina {
 background-color: #ffe600;
 font-family: "QuicksandLightRegular", Arial, sans-serif;
}

body.brandweerpagina {
 background-color: #e03030;
 font-family: "QuicksandLightRegular", Arial, sans-serif;
}

/* WELKOM TEKSTVAK - homepage */
.welkom-tekstvak {
  max-width: 800px;
  margin: 30px auto;
  padding: 24px 32px;
  background-color: #ccff00d5;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  font-family: "QuicksandLightRegular", Arial, sans-serif;
  color: #333;
  line-height: 1.7;
}

.welkom-tekstvak h1 {
  font-size: 1.6rem;
  margin-bottom: 4px;
  color: #2C9FAF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.h1-hyphen {
  font-size: 2rem;
  font-weight: 900;
  color: #2C9FAF;
  line-height: 1;
}

.h1-subtitel {
  text-align: center;
  margin-bottom: 16px;
  font-size: 1.2rem;
  color: #e07bb5;
}

.welkom-tekstvak p {
  margin-bottom: 12px;
}

.welkom-tekstvak ul {
  margin: 8px 0 12px 20px;
}

.welkom-tekstvak ul li {
  margin-bottom: 4px;
}

/* Opsomming met gekleurd streepje aan beide kanten */
.streepjes-lijst {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px 0;
}

.streepjes-lijst li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.streepjes-lijst li::before,
.streepjes-lijst li::after {
  content: "-";
  color: #2C9FAF;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}