/* Focus+ site-interacties - Flyn Design */

/* 1. Sticky header. Breakdance gebruikt position:fixed, waardoor de header
   buiten de flow valt en de bovenkant van elke pagina eronder schuift.
   Sticky houdt zijn plek in de flow, dus geen compensatie nodig. */
.bde-header-builder.bde-header-builder--sticky {
  position: sticky !important;
  top: var(--wp-admin--admin-bar--height, 0px) !important;
}
.bde-header-builder--sticky-scroll-hide,
.bde-header-builder--sticky-scroll-hide.bde-header-builder--sticky-scroll-slide {
  transform: none !important; opacity: 1 !important; pointer-events: auto !important;
}
.bde-header-builder--sticky-scroll-hide * { pointer-events: auto !important; }
.bde-header-builder { transition: box-shadow .35s ease; }
.fp-scrolled .bde-header-builder { box-shadow: 0 6px 24px -18px rgba(52,20,99,.4); }
.fp-scrolled .fpx-006 { padding-top: .4rem !important; padding-bottom: .4rem !important; }
/* Headerhoogte. De __container van Breakdance heeft eigen verticale
   padding gelijk aan de horizontale sectiepadding. Dat is een tweede
   laag bovenop .fpx-006. Hier uitgezet, zodat de hoogte door een
   enkele laag bepaald wordt. */
.bde-header-builder .bde-header-builder__container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Gescrolde staat: ruwweg halve hoogte. Logo en padding krimpen samen,
   anders loopt het logo over de header heen. */
.fp-scrolled .fpx-009 {
  height: clamp(26px, 2.6vw, 32px) !important;
}
.fpx-009 { max-height: 54px; flex: 0 0 auto; }

/* 2. Ankers op Diensten */
.fpx-194, .fpx-209, .fpx-214 { scroll-margin-top: calc(var(--fp-header-h, 92px) + 18px) !important; }
html { scroll-behavior: smooth; }

/* 3. Reveal-animaties */
.fp-reveal { opacity: 0; transform: translate3d(0,18px,0);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--fp-delay, 0ms); will-change: opacity, transform; }
.fp-reveal.fp-in { opacity: 1; transform: none; }

/* 4. Mobiele extras standaard verborgen. De JS hangt ze altijd in de lijst. */
.fp-menu-cta, .fp-menu-foot { display: none; }

/* 5. Desktop header */
@media (min-width: 1024px) {
  /* Ruimte tussen logo, menu en knoppen; iets kleiner sinds het telefoonnummer in de header staat */
  .fpx-006 { gap: clamp(1.5rem, 3vw, 2.6rem); }
  .focusplus-header-rij > .bde-f-container-link { flex-shrink: 0; }
  .bde-menu .breakdance-menu-list { flex: 0 0 auto !important; justify-content: flex-end !important;
    width: auto !important; gap: clamp(1.1rem, 1.9vw, 1.6rem) !important; }
  .bde-menu .breakdance-menu-item { flex: 0 0 auto !important; }
  .bde-menu { flex: 0 1 auto !important; }
  .breakdance-menu-link[aria-current="page"] { color: #941D81 !important; }
}

/* 6. Mobiel menu. LET OP: target Breakdance-interne markup. */
@media (max-width: 1023px) {
  .fp-menu-open { overflow: hidden; }
  .breakdance-menu-toggle { position: relative; z-index: 90; }
  .breakdance-menu-toggle[aria-expanded="true"] ~ .breakdance-menu-list,
  .breakdance-menu--open .breakdance-menu-list {
    position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
    gap: 0; margin: 0; padding: 96px 20px 32px; background: #FBF9FC;
    background-image: radial-gradient(ellipse at 92% 4%, rgba(245,160,193,.28) 0%, rgba(245,160,193,0) 55%),
      radial-gradient(ellipse at 4% 96%, rgba(185,140,224,.24) 0%, rgba(185,140,224,0) 55%);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    animation: fp-panel .32s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes fp-panel { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
  .breakdance-menu-toggle[aria-expanded="true"] ~ .breakdance-menu-list .breakdance-menu-item,
  .breakdance-menu--open .breakdance-menu-list .breakdance-menu-item {
    width: 100%; border-bottom: 1px solid #EFE7F3;
    animation: fp-item .42s cubic-bezier(.22,.61,.36,1) both; }
  .breakdance-menu-list .breakdance-menu-item:nth-child(1) { animation-delay: .06s; }
  .breakdance-menu-list .breakdance-menu-item:nth-child(2) { animation-delay: .12s; }
  .breakdance-menu-list .breakdance-menu-item:nth-child(3) { animation-delay: .18s; }
  .breakdance-menu-list .breakdance-menu-item:nth-child(4) { animation-delay: .24s; }
  @keyframes fp-item { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
  .breakdance-menu-toggle[aria-expanded="true"] ~ .breakdance-menu-list .breakdance-menu-link,
  .breakdance-menu--open .breakdance-menu-list .breakdance-menu-link {
    display: flex !important; align-items: center; justify-content: space-between;
    width: 100%; min-height: 60px; padding: 4px 6px !important;
    font-family: Mulish, sans-serif !important; font-size: 1.22rem !important;
    font-weight: 700 !important; color: #341463 !important; text-decoration: none; }
  .breakdance-menu-toggle[aria-expanded="true"] ~ .breakdance-menu-list .breakdance-menu-link::after,
  .breakdance-menu--open .breakdance-menu-list .breakdance-menu-link::after {
    content: ""; width: 9px; height: 9px;
    border-right: 2px solid #B98CE0; border-bottom: 2px solid #B98CE0;
    transform: rotate(-45deg); opacity: .8; }
  .breakdance-menu-toggle[aria-expanded="true"] ~ .breakdance-menu-list .fp-menu-cta,
  .breakdance-menu--open .breakdance-menu-list .fp-menu-cta {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin-top: 28px; padding: 1.05rem 1.5rem; background: #941D81; color: #fff;
    font-family: Mulish, sans-serif; font-weight: 700; font-size: 1.05rem;
    border-radius: 999px; text-decoration: none;
    box-shadow: 0 12px 26px -12px rgba(148,29,129,.7);
    animation: fp-item .42s cubic-bezier(.22,.61,.36,1) .30s both; }
  .breakdance-menu-toggle[aria-expanded="true"] ~ .breakdance-menu-list .fp-menu-foot,
  .breakdance-menu--open .breakdance-menu-list .fp-menu-foot {
    display: block; margin-top: auto; padding-top: 28px;
    font-family: Mulish, sans-serif; font-size: .9rem; line-height: 1.6; color: #7D7090;
    animation: fp-item .42s cubic-bezier(.22,.61,.36,1) .36s both; }
  .fp-menu-foot a { color: #5B2A8C; font-weight: 700; text-decoration: none; }
  .fpx-031 { display: none !important; }
}

/* 7. Toegankelijkheid */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .breakdance-menu-list, .breakdance-menu-list .breakdance-menu-item,
  .fp-menu-cta, .fp-menu-foot { animation: none !important; }
  .bde-header-builder, .fp-scrolled .fpx-006 { transition: none !important; }
}
/* 8. Mobiel menu fixes */
@media (max-width: 1023px) {
  /* backdrop-filter maakt van de header de containing block voor position:fixed.
     Daardoor werd het menupaneel op headerhoogte afgeknipt in plaats van schermvullend.
     Zonder filter, met een bijna dichte achtergrond, blijft het uiterlijk gelijk. */
  .bde-header-builder, .bde-header-builder.bde-header-builder--sticky {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background-color: rgba(251,248,244,.98) !important; }
  /* Breakdance animeert hoogte/zichtbaarheid van de lijst en zet een inline hoogte.
     Dat gaf een korte flits van het standaardmenu voordat ons paneel stond. */
  .breakdance-menu-list { transition: none !important; }
  .breakdance-menu-toggle[aria-expanded="true"] ~ .breakdance-menu-list {
    height: auto !important; max-height: none !important; visibility: visible !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; }
  /* Logo blijft zichtbaar boven het open paneel */
  .fp-menu-open .fpx-007 { position: relative; z-index: 90; }
}

/* 9. Binnenkort online (pagina 19): geen animaties bij 'minder beweging'.
   De stip op de i en de kaart staan dan meteen op hun plek. */
@media (prefers-reduced-motion: reduce) {
  .focusplus-bk-intro,
  .focusplus-bk-status,
  .focusplus-bk-i::before,
  .focusplus-bk-i::after,
  .focusplus-bk-item-nu::after {
    animation: none !important;
  }
}


/* 10. Vaste belbalk onderin (mobiel en tablet, tot 1023px).
   - De footer krijgt onderaan ruimte, zodat de laatste regels niet achter de balk vallen.
   - Zolang het mobiele menu open is, verdwijnt de balk (het menu heeft eigen knoppen).
   - Het knopje 'Toestemming beheren' van de cookiebanner schuift boven de balk uit. */
@media (max-width: 1023px) {
  .fpx-293 {
    padding-bottom: calc(69px + env(safe-area-inset-bottom)) !important;
  }
  .fp-menu-open .focusplus-belbalk {
    display: none !important;
  }
  .cmplz-manage-consent {
    bottom: calc(34px + env(safe-area-inset-bottom)) !important;
  }
}

/* 11. Werkgebied-kaart (Home): op telefoons zijn 'ZEELAND' en 'WEST-GELDERLAND' iets kleiner dan de
   andere provincienamen, zodat ze binnen hun gebied passen en niet over een grens vallen.
   Breakdance zet .focusplus-kaart-kern daar op 19px; deze dubbele class wint daarvan. */
@media (max-width: 479px) {
  .focusplus-kaart-kern.focusplus-kaart-klein {
    font-size: 17px;
    letter-spacing: .5px;
  }
}