/*
Theme Name:   Fortissimo Child
Theme URI:    https://www.fortissimo-venlo.nl
Description:  Divi childtheme voor Showorkest Harmonie Fortissimo – header menu (desktop) en full screen mobiel menu.
Author:       enVisual
Author URI:   https://www.envisual.nl
Template:     Divi
Version:      1.0.3
*/

/* ============================================================
   HEADER MENU – desktop + full screen mobiel menu
   ============================================================ */
:root{
  --ff-green:#127c5b;
  --ff-green-dark:#0b5a41;
  --ff-green-deep:#07412f;
  --ff-gold:#f0c660;
  --ff-tint:#e9f3ef;
  --ff-ink:#1c2a24;
}

/* ---------- DESKTOP MENU ---------- */
.et-l--header .et_pb_row_1_tb_header{max-width:1240px;width:92%}
.et-l--header .et_pb_menu .et_pb_menu__wrap{align-items:center}
.et-l--header .et_pb_menu .et_pb_menu__logo-wrap{flex-shrink:0}
.et-l--header .et_pb_menu ul.et-menu{flex-wrap:nowrap;align-items:center}
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li{padding:0 2px!important;background:transparent!important}
.et-l--header .et_pb_menu .et-menu > li:first-child{margin-left:auto}

.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li:not(.mijn-fortissimo) > a{
  position:relative;
  display:inline-flex!important;align-items:center;
  white-space:nowrap;
  line-height:1.2!important;
  color:var(--ff-green)!important;
  font-weight:600!important;
  font-size:13px!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
  padding:12px 12px!important;
  opacity:1!important;
  background:transparent!important;
  border-radius:0!important;
  transition:color .25s ease;
}
/* hover/actief: alleen kleurverschil, geen onderlijn */
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li:not(.mijn-fortissimo):hover > a,
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.current-menu-item:not(.mijn-fortissimo) > a,
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.current-menu-ancestor:not(.mijn-fortissimo) > a{
  color:var(--ff-green-dark)!important;
  background:transparent!important;
}
/* Divi Pixel 'filled background' hover-effect op de span uitzetten */
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li > a > span,
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li:hover > a > span,
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li > a:hover > span{
  background:transparent!important;border:0!important;
  padding:0!important;margin:0!important;border-radius:0!important;
  box-shadow:none!important;
}
/* Pijltje bij items met submenu (Divi Pixel zet dit op span::after) */
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a{padding-right:12px!important}
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a > span{position:relative;display:inline-block!important;padding-right:16px!important}
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a > span::after{
  position:absolute!important;right:0!important;left:auto!important;top:50%!important;bottom:auto!important;
  margin:0!important;transform:translateY(-50%);
  font-size:11px!important;line-height:1!important;font-weight:400!important;opacity:.65;
  transition:transform .3s ease,opacity .3s ease;
}
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children:hover > a > span::after{transform:translateY(-50%) rotate(180deg);opacity:1}
/* Divi's eigen a::after-pijl (als Divi Pixel uitstaat) */
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.menu-item-has-children > a:first-child::after{display:none!important}

/* Dropdown */
.et-db #et-boc .et-l--header .et_pb_menu .nav li ul.sub-menu{
  transform:translateY(6px)!important;
  transition:opacity .22s ease,transform .22s ease,visibility .22s!important;
  border:1px solid rgba(18,124,91,.08)!important;
  border-radius:12px!important;
  padding:8px!important;
  width:250px!important;
  margin-top:4px;
  background:#fff!important;
  box-shadow:0 14px 34px -10px rgba(7,65,47,.25),0 1px 4px rgba(7,65,47,.08)!important;
}
.et-db #et-boc .et-l--header .et_pb_menu .nav li:hover > ul.sub-menu{transform:translateY(0)!important}
.et-db #et-boc .et-l--header .et_pb_menu .nav li ul.sub-menu::before,
.et-db #et-boc .et-l--header .et_pb_menu .nav li ul.sub-menu::after{display:none!important;content:none!important}
.et-db #et-boc .et-l--header .et_pb_menu li ul.sub-menu li{border:0!important;padding:0!important;margin:0!important;width:100%!important}
.et-db #et-boc .et-l--header .et_pb_menu .et-menu-nav ul.et-menu ul.sub-menu li a{
  display:block!important;width:100%!important;
  padding:9px 12px!important;
  border-radius:8px!important;
  font-size:14px!important;font-weight:500!important;
  color:var(--ff-ink)!important;
  letter-spacing:0!important;text-transform:none!important;line-height:1.4!important;
  background:transparent!important;opacity:1!important;
  transition:background .18s ease,color .18s ease!important;
}
.et-db #et-boc .et-l--header .et_pb_menu .et-menu-nav ul.et-menu ul.sub-menu li a:hover,
.et-db #et-boc .et-l--header .et_pb_menu .et-menu-nav ul.et-menu ul.sub-menu li.current-menu-item > a{
  background:var(--ff-tint)!important;
  color:var(--ff-green-dark)!important;
}

/* "Mijn Fortissimo" knop */
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.mijn-fortissimo{margin-left:12px;background:transparent!important;border:0!important}
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.mijn-fortissimo > a{
  display:inline-flex!important;align-items:center;white-space:nowrap;
  line-height:1.2!important;
  font-size:13px!important;font-weight:600!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  background:var(--ff-green)!important;
  color:#fff!important;
  border:0!important;
  border-radius:999px!important;
  padding:12px 22px!important;
  opacity:1!important;
  box-shadow:none!important;
  transition:background .25s ease;
}
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.mijn-fortissimo > a:hover{
  background:var(--ff-green-dark)!important;
  color:#fff!important;
}
.et-db #et-boc .et-l--header .et_pb_menu .et-menu > li.mijn-fortissimo > a > span{color:#fff!important}
.mijn-fortissimo,.mijn-fortissimo:hover{background:transparent!important;border:0!important}

/* subtiele scheiding onder header */
.et-l--header .et_pb_section_0_tb_header{box-shadow:0 1px 0 rgba(18,124,91,.08)}

/* ---------- MOBIEL: HAMBURGER ---------- */
@media (max-width:980px){
  .et-l--header .et_pb_menu .et_pb_menu__wrap{justify-content:flex-end;margin-left:auto}
  .et-l--header .et_pb_menu .et_mobile_nav_menu{display:flex;align-items:center;position:static}
  .et-l--header .et_pb_menu .mobile_nav{position:static}
  .et-l--header .et_pb_menu .mobile_menu_bar{
    position:relative;z-index:100001;
    display:block;width:46px;height:46px;
    border-radius:50%;
    background:var(--ff-tint);
    cursor:pointer;
    transition:background .3s ease;
  }
  .et-l--header .et_pb_menu .mobile_menu_bar::before{display:none!important}
  .et-l--header .et_pb_menu .mobile_menu_bar span.ff-burger,
  .et-l--header .et_pb_menu .mobile_menu_bar span.ff-burger::before,
  .et-l--header .et_pb_menu .mobile_menu_bar span.ff-burger::after{
    content:"";position:absolute;left:14px;
    width:18px;height:2px;border-radius:2px;
    background:var(--ff-green);
    transition:transform .35s cubic-bezier(.22,1,.36,1),top .35s ease,width .35s ease,background .3s ease;
  }
  .et-l--header .et_pb_menu .mobile_menu_bar span.ff-burger{top:22px}
  .et-l--header .et_pb_menu .mobile_menu_bar span.ff-burger::before{left:0;top:-6px}
  .et-l--header .et_pb_menu .mobile_menu_bar span.ff-burger::after{left:0;top:6px;width:12px}

  /* open state */
  .et-l--header .et_pb_menu .mobile_nav.opened .mobile_menu_bar{background:rgba(255,255,255,.14)}
  .et-l--header .et_pb_menu .mobile_nav.opened .ff-burger,
  .et-l--header .et_pb_menu .mobile_nav.opened .ff-burger::before,
  .et-l--header .et_pb_menu .mobile_nav.opened .ff-burger::after{background:#fff}
  .et-l--header .et_pb_menu .mobile_nav.opened .ff-burger{background:transparent!important}
  .et-l--header .et_pb_menu .mobile_nav.opened .ff-burger::before{top:0;transform:rotate(45deg)}
  .et-l--header .et_pb_menu .mobile_nav.opened .ff-burger::after{top:0;width:18px;transform:rotate(-45deg)}

  /* ---------- MOBIEL: FULL SCREEN MENU ---------- */
  .et-l--header .et_pb_menu ul.et_mobile_menu{
    display:flex!important;flex-direction:column;
    position:fixed!important;inset:0;
    z-index:100000;
    margin:0;padding:110px 28px 40px!important;
    max-height:none!important;height:100dvh;width:100%!important;max-width:100vw;
    overflow-y:auto;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    border:0!important;box-shadow:none!important;
    background:linear-gradient(160deg,var(--ff-green) 0%,var(--ff-green-dark) 60%,var(--ff-green-deep) 100%)!important;
    opacity:0;visibility:hidden;
    transform:translateY(-12px);
    transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility .4s;
  }
  /* decoratieve cirkel */
  .et-l--header .et_pb_menu ul.et_mobile_menu::before{
    content:"";position:fixed;right:-120px;bottom:-140px;
    width:380px;height:380px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%,rgba(240,198,96,.22),rgba(240,198,96,0) 65%);
    pointer-events:none;
  }
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu{
    opacity:1;visibility:visible;transform:translateY(0);
  }
  /* pagina erachter vastzetten (ook iOS) + geen horizontale page-scroll op mobiel */
  html,body{overflow-x:hidden}
  body{position:relative}
  html.ff-nav-open,body.ff-nav-open{overflow:hidden!important;overscroll-behavior:none}
  body.ff-nav-open{position:fixed!important;left:0;right:0;width:100%;}
  .et-l--header .et_pb_menu ul.et_mobile_menu{touch-action:pan-y}

  .et-l--header .et_pb_menu ul.et_mobile_menu > li{
    padding:0!important;border:0!important;
    opacity:0;transform:translateY(14px);
    transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1);
  }
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu > li{opacity:1;transform:none}
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu > li:nth-child(1){transition-delay:.08s}
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu > li:nth-child(2){transition-delay:.14s}
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu > li:nth-child(3){transition-delay:.2s}
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu > li:nth-child(4){transition-delay:.26s}
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu > li:nth-child(5){transition-delay:.32s}
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu > li:nth-child(6){transition-delay:.38s}
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu > li:nth-child(7){transition-delay:.44s}
  .et-l--header .et_pb_menu .mobile_nav.opened ul.et_mobile_menu > li:nth-child(8){transition-delay:.5s}

  .et-l--header .et_pb_menu ul.et_mobile_menu > li > a{
    display:block;
    padding:14px 0!important;
    color:#fff!important;
    font-family:'Poppins',Helvetica,Arial,sans-serif;
    font-size:26px!important;line-height:1.2;
    font-weight:600!important;
    text-transform:none!important;letter-spacing:0;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    background:none!important;
    opacity:1!important;
  }
  .et-l--header .et_pb_menu ul.et_mobile_menu > li.current-menu-item > a,
  .et-l--header .et_pb_menu ul.et_mobile_menu > li.current-menu-ancestor > a{color:var(--ff-gold)!important}

  /* submenu's: altijd zichtbaar, compact */
  .et-l--header .et_pb_menu ul.et_mobile_menu .sub-menu-toggle{display:none!important}
  .et-l--header .et_pb_menu ul.et_mobile_menu ul.sub-menu{
    display:block!important;visibility:visible!important;opacity:1!important;
    position:static!important;
    padding:4px 0 10px!important;margin:0;
    background:none!important;box-shadow:none!important;border:0!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
  }
  .et-db #et-boc .et-l--header .et_pb_menu ul.et_mobile_menu ul.sub-menu{padding-left:0!important;margin-left:0!important;transform:none!important;width:100%!important;left:auto!important}
  .et-db #et-boc .et-l--header .et_pb_menu ul.et_mobile_menu ul.sub-menu li{padding:0!important;margin:0!important;border:0!important;list-style:none!important}
  .et-db #et-boc .et-l--header .et_pb_menu ul.et_mobile_menu ul.sub-menu li a{border:0!important}
  .et-l--header .et_pb_menu ul.et_mobile_menu,
  .et-l--header .et_pb_menu ul.et_mobile_menu li{list-style:none!important}
  .et-l--header .et_pb_menu ul.et_mobile_menu ul.sub-menu a{
    display:block;padding:7px 0 7px 18px!important;
    color:rgba(255,255,255,.78)!important;
    font-size:16px!important;font-weight:400!important;
    text-transform:none!important;letter-spacing:0;
    border:0!important;background:none!important;position:relative;
  }
  .et-l--header .et_pb_menu ul.et_mobile_menu ul.sub-menu a::before{
    content:"";position:absolute;left:0;top:50%;
    width:8px;height:2px;border-radius:2px;background:var(--ff-gold);
    transform:translateY(-50%);opacity:.8;
  }
  .et-l--header .et_pb_menu ul.et_mobile_menu ul.sub-menu li.current-menu-item > a{color:#fff!important}

  /* Mijn Fortissimo als knop onderaan */
  .et-l--header .et_pb_menu ul.et_mobile_menu > li.mijn-fortissimo{margin-top:26px;align-self:flex-start}
  .et-l--header .et_pb_menu ul.et_mobile_menu > li.mijn-fortissimo > a{
    display:inline-block!important;width:auto!important;
    background:#fff!important;color:var(--ff-green-dark)!important;
    font-size:15px!important;font-weight:700!important;
    text-transform:uppercase!important;letter-spacing:.08em;
    padding:15px 30px!important;border-radius:999px;border:0!important;
    box-shadow:0 10px 26px -10px rgba(0,0,0,.4);
  }

  /* social + footer in menu */
  .et-l--header .et_pb_menu ul.et_mobile_menu li.ff-mobile-footer{
    margin-top:auto;padding-top:34px!important;
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  }
  .et-l--header .et_pb_menu ul.et_mobile_menu li.ff-mobile-footer .ff-social{display:flex;gap:10px}
  .et-db #et-boc .et-l--header .et_pb_menu ul.et_mobile_menu li.ff-mobile-footer .ff-social a{
    display:flex!important;align-items:center;justify-content:center;
    width:42px!important;height:42px!important;border-radius:50%;
    background:rgba(255,255,255,.12)!important;color:#fff!important;
    border:0!important;padding:0!important;margin:0!important;
    transition:background .25s ease,color .25s ease;
  }
  .et-db #et-boc .et-l--header .et_pb_menu ul.et_mobile_menu li.ff-mobile-footer .ff-social a:hover{background:var(--ff-gold)!important;color:var(--ff-green-deep)!important}
  .et-l--header .et_pb_menu ul.et_mobile_menu li.ff-mobile-footer .ff-social svg{display:block}
  .et-l--header .et_pb_menu ul.et_mobile_menu li.ff-mobile-footer .ff-tag{
    color:rgba(255,255,255,.6);font-size:12px;letter-spacing:.04em;
  }
}