.elementor-widget-text-editor p:last-child{ margin-bottom:0px;}

body {
overflow-x: hidden !important;
}


html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* ========================
	 HERO IMAGE BLUR ON LOAD
   ======================== */
.hero-blur-load{
  position: relative;
  overflow: hidden;
  background-color: #4f9ea0;
}

.hero-blur-load::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://nieuweijmond.nl/wp-content/uploads/2026/01/Meeuwen_IJmond.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(24px);
  transform: scale(1.08);
  transition: filter 1.6s ease, transform 1.6s ease, opacity 1.6s ease;
  z-index: 0;
}

.hero-blur-load.hero-loaded::before{
  filter: blur(0);
  transform: scale(1);
}

.hero-blur-load > *{
  position: relative;
  z-index: 1;
}




/* ========================
	 BACKGROUND GRAIN
   ======================== */
/* 1) Grain overlay - altijd zichtbaar, fixed, overal bovenop */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;

  /* Kies 1 van deze twee routes hieronder */
  background-image: url('https://nieuweijmond.nl/wp-content/uploads/2026/02/NieuweIJmond_BG_Overlay2.jpg');
  background-repeat: repeat;
  background-size: 80px 80px;
	opacity: 1;
  mix-blend-mode: soft-light;
}





/* ========================
	 MENU HOVER & ACTIVE BOLLETJE
   ======================== */
/* 0) kill Elementor indicator pseudo's op de link */
.nij-menu .elementor-nav-menu .elementor-item::before,
.nij-menu .elementor-nav-menu .elementor-item::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
  box-shadow: none !important;
}

/* 1) vaste ruimte, nooit shift */
.nij-menu .elementor-nav-menu .menu-item > a.elementor-item,
.nij-menu .elementor-nav-menu .menu-item > a.elementor-item:hover,
.nij-menu .elementor-nav-menu .menu-item > a.elementor-item:focus {
  padding-left: 30px !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* 2) bullet op LI (super stabiel) */
.nij-menu .elementor-nav-menu .menu-item {
  position: relative;
}

/* standaard verborgen */
.nij-menu .elementor-nav-menu .menu-item::before {
  content: '•';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-58%) scale(0);
  opacity: 0;
  font-size: 50px;
  line-height: 1;
  color: #F4FF8F;
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* hover + active */
.nij-menu .elementor-nav-menu .menu-item:hover::before,
.nij-menu .elementor-nav-menu .current-menu-item::before {
  transform: translateY(-58%) scale(1);
  opacity: 1;
}

/* consistente spacing tussen menu-items */
.nij-menu .elementor-nav-menu > li {
  margin-right: 25px;
}

/* geen extra ruimte na laatste item */
.nij-menu .elementor-nav-menu > li:last-child {
  margin-right: 0;
}

/* cyan variant bullet */
.nij-menu-cyan .elementor-nav-menu .menu-item::before {
  color: #0D7F82;
}







/* ========================
   NIJ CUSTOM MOBILE / TABLET MENU
   tot en met 1024px
   ======================== */
@media (max-width: 1024px) {

  /* native Elementor dropdown uitzetten */
  .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
	
	  body.nij-menu-open::before {
    opacity: 0 !important;
  }

  /* body lock wanneer menu open staat */
	
	html.nij-menu-open,
body.nij-menu-open {
  overflow: hidden !important;
  height: 100%;
}

body.nij-menu-open {
  position: fixed;
  width: 100%;
  inset: 0;
}

  /* full screen layer */
  .nij-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease 0.8s, visibility 0s linear 0.8s;
  }

body.nij-menu-open .nij-mobile-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease, visibility 0s;
}

  /* backdrop */
  .nij-mobile-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.35s ease 0.8s;
  }

  body.nij-menu-open .nij-mobile-menu::before {
    transition: opacity 0.35s ease;
  }

  /* schuivende panel */
  .nij-mobile-menu-slide {
    position: absolute;
    top: 0;
    right: 0;
    width: min(82vw, 520px);
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    z-index: 2;
	}

	
/* default (gesloten = uitschuiven) */
.nij-mobile-menu-slide {
  transform: translateX(100%);
  transition: transform 1.1s cubic-bezier(0.55, 0, 0.1, 1); /* langzamer uit */
}

/* open state (inschuiven) */
body.nij-menu-open .nij-mobile-menu-slide {
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); /* jouw huidige */
}

	
	
/* Footer grain overlay (eigen sterkte, eigen tile size) */
.nij-mobile-menu-slide{
  position: relative;
  isolation: isolate; /* zorgt dat blend netjes binnen de footer blijft */
  overflow: hidden;
}

/* de grainlaag zelf */
.nij-mobile-menu-slide::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: url('https://nieuweijmond.nl/wp-content/uploads/2026/02/NieuweIJmond_BG_Overlay2.jpg');
  background-repeat: repeat;
  background-size: 70px 70px;          /* px i.p.v. Elementor % */
  background-position: 0 0;
  background-attachment: fixed;         /* grain blijft “staan” tijdens scroll (desktop) */

  mix-blend-mode: soft-light;           /* jouw gewenste blend */
  opacity: 0.4;                         /* maak ‘m subtieler op cyaan */
}

/* zorg dat footer content boven de grain zit */
.nij-mobile-menu-slide > *{
  position: relative;
  z-index: 1;
}
	
	
  /* menu wrapper algemeen */
  .nij-mobile-menu-slide .elementor-widget,
  .nij-mobile-menu-slide .elementor-widget-container {
    width: 100%;
  }

  /* lijst netjes onder elkaar */
  .nij-mobile-menu-slide .elementor-nav-menu,
  .nij-mobile-menu-slide .menu,
  .nij-mobile-menu-slide ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start;
    gap: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* standaard item wrapper */
  .nij-mobile-menu-slide .menu-item {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0 !important;
    padding: 0;
    list-style: none;
  }

  /* links */
  .nij-mobile-menu-slide .menu-item > a,
  .nij-mobile-menu-slide .menu-item > a.elementor-item {
    display: inline-block;
    position: relative;
    padding: 0 0 18px 0 !important;
    margin: 0 !important;
    text-align: center;
    background: transparent !important;
    background-color: transparent !important;
  }

/* desktop bolletje links uitschakelen binnen slide menu */
.nij-mobile-menu-slide .menu-item::before,
.nij-mobile-menu-slide .elementor-item::before {
  content: none !important;
  display: none !important;
}


  /* bolletje onder active item */
  .nij-mobile-menu-slide .current-menu-item > a::after,
  .nij-mobile-menu-slide .current-menu-ancestor > a::after,
  .nij-mobile-menu-slide .current-page-ancestor > a::after,
  .nij-mobile-menu-slide .current_page_item > a::after,
  .nij-mobile-menu-slide .current_page_parent > a::after,
  .nij-mobile-menu-slide .current-menu-item > a.elementor-item::after,
  .nij-mobile-menu-slide .current-menu-ancestor > a.elementor-item::after,
  .nij-mobile-menu-slide .current-page-ancestor > a.elementor-item::after,
  .nij-mobile-menu-slide .current_page_item > a.elementor-item::after,
  .nij-mobile-menu-slide .current_page_parent > a.elementor-item::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #F4FF8F !important;
  }
}







/* ========================
   FEITEN ANIMATIE HOMEPAGE
   ======================== */
#nij-feiten .e-con,
#nij-feiten .elementor-widget,
#nij-feiten .elementor-widget-container{
  overflow: visible;
}

#nij-feiten .nij-feit{
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
}

#nij-feiten .nij-feit::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(45deg, rgba(244, 255, 143, 1), rgba(229, 227, 218, 1));
  transform: scale(0);
  transform-origin: left bottom;
  opacity: 0;
  transition: transform .45s ease, opacity .25s ease;
}

#nij-feiten .nij-feit .nij-content{
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .35s ease;
  transition-delay: .25s;
}

#nij-feiten .nij-feit.is-on{
  opacity: 1;
  transform: translateY(0);
}

#nij-feiten .nij-feit.is-on::before{
  transform: scale(1);
  opacity: 1;
}

#nij-feiten .nij-feit.is-on .nij-content{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px){
  .nij-feiten-wrap{
    min-height: auto !important;
  }

  #nij-feiten{
    position: relative;
    top: auto;
    min-height: auto;
    display: block;
  }
	
}









/* ========================
	 READ MORE BUTTON
   ======================== */
/* Zorg dat wrapper inline blijft */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 14px; /* ruimte tussen knop en dots */
}

.read-more {
  cursor: pointer;
}

.read-more a.elementor-button {
  cursor: pointer;
}

/* echte Elementor knop blijft exact zoals jij 'm hebt ingesteld */
.read-more a.elementor-button,
a.read-more.elementor-button {
  padding: 13px 15px;
  display: inline-flex;
  align-items: center;
}

/* dots container - nu BUITEN de knop */
.read-more .nij-dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* individuele dot */
.read-more .nij-dot {
  width: 10px;              /* kleiner */
  height: 10px;
  border-radius: 999px;
  background: #f4ff8f;      /* jouw geel */
  opacity: 0;
  transform: translateX(-6px) scale(0.8);
}

/* hover triggert via knop */
.read-more:hover .nij-dot {
  animation:
    nijDotIn 260ms ease forwards,
    nijDotPulse 1200ms ease-in-out infinite;
}

/* stagger */
.read-more:hover .nij-dot:nth-child(1) {
  animation-delay: 0ms, 520ms;
}

.read-more:hover .nij-dot:nth-child(2) {
  animation-delay: 90ms, 610ms;
}

.read-more:hover .nij-dot:nth-child(3) {
  animation-delay: 180ms, 700ms;
}

@keyframes nijDotIn {
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes nijDotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.95; }
}

/* verborgen startstate voor de tekstcontainer */
.read-more-panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: height 420ms ease, opacity 260ms ease, transform 420ms ease;
  will-change: height, opacity, transform;
}

.read-more-panel.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* pijl draaien als open */
.read-more.is-open svg.e-font-icon-svg {
  transform: rotate(180deg);
  transition: transform 260ms ease;
  transform-origin: 50% 50%;
}

/* als je svg al een transform heeft vanuit Elementor, forceer dat netjes */
.read-more svg.e-font-icon-svg {
  transition: transform 260ms ease;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .read-more-panel,
  .read-more svg.e-font-icon-svg {
    transition: none;
  }
}





/* =========================
   TEAM SLIDER CAROUSEL
   ========================= */

.team-ring { width: 100%; }

.team-stage{
  position: relative;
  width: 100%;
  height: 660px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.team-card{
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1), opacity 520ms cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}

.team-card img{
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  border-radius: 56px;
}

/*  POSITIES (3D ring vibe) */
.team-card.pos0{
  z-index: 10;
  opacity: .9;
  transform: translateX(calc(-50% - 360px)) translateY(-80px) scale(.78);
	filter: blur(15px);
}

.team-card.pos1{
  z-index: 11;
  opacity: 1;
  transform: translateX(calc(-50% - 220px)) translateY(-30px) scale(.88);
	filter: blur(5px);
	
}

.team-card.pos2{
  z-index: 13;
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.team-card.pos3{
  z-index: 11;
  opacity: 1;
  transform: translateX(calc(-50% + 220px)) translateY(-30px) scale(.88);
	filter: blur(5px);
}

.team-card.pos4{
  z-index: 10;
  opacity: .9;
  transform: translateX(calc(-50% + 360px)) translateY(-80px) scale(.78);
	filter: blur(15px);
}

/* hoogte per positie */
.team-card.pos0,
.team-card.pos4{ height: 400px; }

.team-card.pos1,
.team-card.pos3{ height: 500px; }

.team-card.pos2{ height: 600px; }

/*GLOW op de middelste (pos2) */
.team-card.pos2 img{
  box-shadow:
    0 0 40px rgba(244,255,143,0.7),
    0 0 80px rgba(244,255,143,0.45),
    0 0 140px rgba(244,255,143,0.25);
}

/* NAVIGATION DOTS (cirkels)*/
.team-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  margin-top:18px;
}

/* belachelijk harde reset zodat het NOOIT pillen worden */
.team-dot{
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  max-width:15px !important;
  min-height:15px !important;
  max-height:15px !important;

  display:inline-block !important;
  flex:0 0 15px !important;

  border-radius:50% !important;

  border:2px solid #f4ff8f !important;
  background:transparent !important;

  padding:0 !important;
  margin:0 !important;

  appearance:none !important;
  -webkit-appearance:none !important;

  outline:none !important;
  box-shadow:none !important;

  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}

.team-dot:hover,
.team-dot.is-active{
  background:#f4ff8f !important;
}

.team-dot:focus,
.team-dot:focus-visible,
.team-dot:active{
  outline:none !important;
  box-shadow:none !important;
}

.team-dot:active{
  transform:scale(.92);
}

/* BIOS (tekst onder)*/

/* live: verberg alle bio’s, toon alleen de actieve */
.team-bio[id^="bio-"]{
  display: none !important;
}

.team-bio[id^="bio-"].is-active{
  display: flex !important;   /* matcht Elementor container (flex) */
}

/* editor: toon alle bio’s zodat je kunt uitlijnen */
body.elementor-editor-active .team-bio[id^="bio-"]{
  display: flex !important;
}

/* TEAM SLIDER RESPONSIVE*/
/* tablet portrait en kleiner */
@media (max-width: 1024px) {

  .team-stage{
    height: 480px;
  }

  .team-card.pos0{
    transform: translateX(calc(-50% - 250px)) translateY(-55px) scale(.68);
		filter: blur(8px);
  }

  .team-card.pos1{
    transform: translateX(calc(-50% - 145px)) translateY(-20px) scale(.80);
		filter: blur(2px);
  }

  .team-card.pos2{
    transform: translateX(-50%) translateY(0) scale(.92);
  }

  .team-card.pos3{
    transform: translateX(calc(-50% + 145px)) translateY(-20px) scale(.80);
		filter: blur(2px);
  }

  .team-card.pos4{
    transform: translateX(calc(-50% + 250px)) translateY(-55px) scale(.68);
		filter: blur(8px);
  }

  .team-card.pos0,
  .team-card.pos4{ height: 300px; }

  .team-card.pos1,
  .team-card.pos3{ height: 390px; }

  .team-card.pos2{ height: 470px; }

}
/* mobile */
@media (max-width: 767px) {

  .team-stage{
    height: 300px;
  }

  .team-card img{
    border-radius: 70px !important;
  }

  /* achterste 2 nog verder "verstopt" */
  .team-card.pos0{
    transform: translateX(calc(-50% - 135px)) translateY(-18px) scale(.60);
    opacity: 1;
		filter: blur(8px);
  }

  .team-card.pos1{
    transform: translateX(calc(-50% - 78px)) translateY(-8px) scale(.75);
    opacity: 1;
		filter: blur(2px);
  }

  .team-card.pos2{
    transform: translateX(-50%) translateY(0) scale(.85);
    opacity: 1;
  }

  .team-card.pos3{
    transform: translateX(calc(-50% + 78px)) translateY(-8px) scale(.75);
    opacity: 1;
		filter: blur(2px);
  }

  .team-card.pos4{
    transform: translateX(calc(-50% + 135px)) translateY(-18px) scale(.60);
    opacity: 1;
		filter: blur(8px);
  }

  .team-card.pos0,
  .team-card.pos4{ height: 180px; }

  .team-card.pos1,
  .team-card.pos3{ height: 250px; }

  .team-card.pos2{ height: 330px; }

}

/* =========================
   TEAM SLIDER ENTRANCE
   ========================= */

/* iets soepelere transition voor de eerste reveal */
.team-card{
  transition:
    transform 1100ms cubic-bezier(.22,.61,.36,1),
    opacity 900ms ease;
}

/* zolang de sectie nog niet ge-entered is:
   - center staat er al
   - de andere 4 zitten dichter achter de middelste */
.team-ring:not(.is-entered) .team-card.pos0,
.team-ring:not(.is-entered) .team-card.pos1{
  opacity: 0;
  transform: translateX(calc(-50% - 20px)) translateY(-6px) scale(.82);
}

.team-ring:not(.is-entered) .team-card.pos3,
.team-ring:not(.is-entered) .team-card.pos4{
  opacity: 0;
  transform: translateX(calc(-50% + 20px)) translateY(-6px) scale(.82);
}

/* middelste kaart meteen zichtbaar */
.team-ring:not(.is-entered) .team-card.pos2{
  opacity: 1;
}

/* klein beetje stagger */
.team-ring.is-entered .team-card.pos0{ transition-delay: .35s; }
.team-ring.is-entered .team-card.pos1{ transition-delay: .18s; }
.team-ring.is-entered .team-card.pos2{ transition-delay: 0s; }
.team-ring.is-entered .team-card.pos3{ transition-delay: .18s; }
.team-ring.is-entered .team-card.pos4{ transition-delay: .35s; }









/* ===========================
   HOE ZIT DAT DAN MET SECTIES
   =========================== */

.hzd-topics{
  display:flex;
  flex-direction:column;
}

.hzd-topic{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  cursor:pointer;
  transition:transform .22s ease;
}

.hzd-topic.is-active{
  transform:translateX(-12px);
}

/* pijl */

.hzd-topic-arrow,
.hzd-topic-arrow .elementor-widget-container,
.hzd-topic-arrow .elementor-icon-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hzd-topic-arrow .elementor-icon-wrapper{
  line-height:0 !important;
}

.hzd-topic-arrow svg,
.hzd-topic-arrow i{
  display:block;
  transform-origin:center center !important;
  transition:transform .22s ease;
}

.hzd-topic.is-active .hzd-topic-arrow svg,
.hzd-topic.is-active .hzd-topic-arrow i{
  transform:rotate(90deg);
}

/* INTRO LINKS */
.hzd-intro{
  position:relative;
}
.hzd-intro [data-topic]{
  display:none !important;
  opacity:0;
}

.hzd-intro [data-topic].is-active{
  display:block !important;
  opacity:1;
  animation:hzdIntroFade .38s ease;
}

@keyframes hzdIntroFade{
  from{
    opacity:0;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/*  HZD DETAIL SECTIE*/
.hzd-detail [data-topic]{
  display:none !important;
  opacity:0;
}

.hzd-detail [data-topic].is-active{
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  opacity:1;
  animation:hzdPanelFade .38s ease;
}

@keyframes hzdPanelFade{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/*HZD NAVIGATION DOTS*/
.hzd-dots{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  position:relative;
  z-index:20;
}

.hzd-dot{
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  min-height:18px !important;
  max-height:18px !important;
  display:inline-block !important;
  flex:0 0 18px !important;
  border-radius:50% !important;
  border:2px solid #f4ff8f !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  outline:none !important;
  box-shadow:none !important;
  cursor:pointer;
  opacity:.7;
  transition:background .2s ease, transform .15s ease, opacity .2s ease;
}

.hzd-dot:hover,
.hzd-dot.is-active{
  background:#f4ff8f !important;
  opacity:1;
}

.hzd-dot:focus,
.hzd-dot:focus-visible,
.hzd-dot:active{
  outline:none !important;
  box-shadow:none !important;
}

.hzd-dot:active{
  transform:scale(.92);
}