/* ============================================================
   SEARCHFLOW MENU  -  searchflow-menu.css
   /wp-content/themes/hello-elementor-child/assets/css/searchflow-menu.css

   Alleen desktop. De Elementor-container is verborgen op tablet/mobiel
   (elementor-hidden-tablet / elementor-hidden-mobile); daar laadt een
   ander menu.

   Alle selectors staan onder .sfm zodat ze de Elementor Kit-regels
   (.elementor-kit-11 button / a / h2 / p) verslaan.
   ============================================================ */

.sfm {
  /* --- kleuren --- */
  --sfm-green:      #02C786;
  --sfm-green-deep: #0B8F63;
  --sfm-green-ink:  #052E22;
  /* knopkleuren gelijk aan de Contact-knop in de header */
  --sfm-cta-bg:     #20FFB5;
  --sfm-cta-ink:    #0E2F2D;
  --sfm-ink:        #0E1420;
  --sfm-dark:       #131B1B;
  --sfm-surface:    #F6F7F6;

  /* --- maten --- */
  --sfm-panel-max: 1440px;  /* bovengrens; normaal volgt het paneel de header-pill */
  --sfm-about-w:    660px;  /* breedte Over ons-paneel */
  --sfm-rail-w:     352px;  /* linkerkolom met de 8 diensten */
  --sfm-promo-w:    272px;  /* rechterkolom met de promo */
  --sfm-offset:      12px;  /* afstand onderkant header-pill -> paneel */
  --sfm-gutter:      16px;  /* min. ruimte tot de schermrand */
  --sfm-radius:      22px;
  --sfm-pill:      1000px;
  --sfm-z:           9990;
  --sfm-panel-em:    16px;  /* 1em binnen het paneel = deze waarde */
  --sfm-fade:  .18s ease;   /* hover-transitie */

  /* Manrope = de sitebrede Elementor-font, wordt al lokaal geladen (200-800). */
  --sfm-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  position: relative;
  font-family: var(--sfm-font);
  -webkit-font-smoothing: antialiased;
}

.sfm *,
.sfm *::before,
.sfm *::after { box-sizing: border-box; }

/* ------------------------------------------------------------
   Reset: haalt de Elementor Kit-styling van knoppen, links,
   koppen en paragrafen af binnen het menu.
   :where() telt als 0, dus de reset is (0,2,0): wint wel van
   .elementor-kit-11 button (0,1,1), maar verliest van de componentregels
   hieronder die ook (0,2,0) zijn en later in het bestand staan.
   ------------------------------------------------------------ */
.sfm .sfm-bar :where(a, button) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  min-height: 0;
  min-width: 0;
  width: auto;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* ------------------------------------------------------------
   HOVER-SLOT — de belangrijkste regel van dit bestand.

   De Elementor Kit heeft `.elementor-kit-11 a:hover` staan met een eigen
   font-family, font-size en line-height. Die selector is (0,2,1) en won
   van de componentregels (0,2,0), dus sprong ELKE link bij hover naar
   16px/24px. Vandaar dat alleen bij hover alles verschoof.

   Deze regel is (0,3,0) - :hover telt als klasse, :where() als 0 - en wint
   daarvan. Elk klikbaar element zet zijn eigen --sfm-el-font, die hier bij
   hover/focus/active opnieuw wordt toegepast. Netto: bij hover verandert
   alleen de kleur, nooit een maat.

   NIEUW KLIKBAAR ELEMENT TOEVOEGEN? Zet --sfm-el-font in de basisregel,
   met exact dezelfde waarde als de `font:` ernaast.
   ------------------------------------------------------------ */
.sfm .sfm-bar :where(a, button):is(:hover, :focus, :focus-visible, :active) {
  font: var(--sfm-el-font, inherit);
  letter-spacing: var(--sfm-el-ls, inherit);
  color: var(--sfm-el-color, inherit);
  text-transform: none;
  text-decoration: none;
}

.sfm .sfm-bar :where(h1, h2, h3, h4, h5, h6, p) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.sfm .sfm-bar :where(ul, ol, li) {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
}

.sfm .sfm-bar :where(img) { display: block; max-width: 100%; }

/* ============================================================
   1. MENUBALK
   ============================================================ */

.sfm .sfm-bar {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sfm .sfm-item { position: relative; }

.sfm .sfm-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--sfm-pill);
  background: transparent;
  color: rgba(255, 255, 255, .86);
  --sfm-el-font: 600 14.5px/1.15 var(--sfm-font);
  font: var(--sfm-el-font);
  white-space: nowrap;
  transition: background-color var(--sfm-fade), color var(--sfm-fade);
}

.sfm .sfm-link:hover,
.sfm .sfm-link:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.sfm .sfm-link:focus-visible { outline: 2px solid var(--sfm-green); outline-offset: 2px; }

/* huidige pagina - wordt door de JS gezet */
.sfm .sfm-item.is-current > .sfm-link { background: rgba(255, 255, 255, .08); color: #fff; }

/* open flyout - alleen achtergrond en kleur, geen font-weight:
   bold maakt het item breder en duwt de buren opzij */
.sfm .sfm-item.is-open > .sfm-link {
  background: rgba(2, 199, 134, .16);
  color: #fff;
}

.sfm .sfm-caret {
  width: 9px;
  height: 6px;
  flex: none;
  color: rgba(255, 255, 255, .55);
  transition: transform .2s ease, color .2s ease;
}
.sfm .sfm-item.is-open .sfm-caret { transform: rotate(180deg); color: var(--sfm-green); }

/* --- lichte header-variant: <nav class="sfm sfm--light"> --- */
.sfm--light .sfm-link { color: rgba(14, 20, 32, .78); }
.sfm--light .sfm-link:hover,
.sfm--light .sfm-link:focus-visible,
.sfm--light .sfm-item.is-current > .sfm-link { background: rgba(14, 20, 32, .06); color: var(--sfm-ink); }
.sfm--light .sfm-item.is-open > .sfm-link { background: rgba(2, 199, 134, .16); color: var(--sfm-ink); }
.sfm--light .sfm-caret { color: rgba(14, 20, 32, .45); }

/* ============================================================
   2. FLYOUT-PANEEL
   left / width / top worden door de JS gezet, uitgelijnd op de
   header-pill. De waarden hieronder zijn alleen fallback.
   ============================================================ */

.sfm .sfm-panel {
  position: absolute;
  top: calc(100% + var(--sfm-offset));
  left: 0;
  z-index: var(--sfm-z);
  background: #fff;
  border: 1px solid rgba(14, 20, 32, .08);
  border-radius: var(--sfm-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  overflow: hidden;
  /* Een gesloten paneel staat op display:none en telt dus NIET mee voor de
     scrollbreedte van de pagina.

     Eerder stond hier alleen visibility:hidden + opacity:0. Het paneel bleef
     dan in de layout staan, op `left: 0` t.o.v. de smalle <li> en met zijn
     volle breedte. Bij een viewport van 1398px gaf dat 1366px breedte vanaf
     x=405, oftewel 388px horizontale overflow: de pagina was opzij te slepen
     zonder dat je iets zag. De JS klemt de positie wel binnen beeld, maar
     draait pas bij het openen - en Elementor rendert de header twee keer, dus
     de kopie die nooit opengaat werd ook nooit gecorrigeerd. */
  display: none;
}

/* vaste em-basis: 1em binnen het paneel is altijd --sfm-panel-em,
   ongeacht wat de header of het thema eromheen aan font-size doorgeeft */
.sfm .sfm-panel { font-size: var(--sfm-panel-em); }

.sfm .sfm-panel--mega  { width: min(var(--sfm-panel-max), calc(100vw - var(--sfm-gutter) * 2)); }
.sfm .sfm-panel--about { width: min(var(--sfm-about-w), calc(100vw - var(--sfm-gutter) * 2)); }

/* Openen kan niet met een transition (van display:none valt niets te
   animeren), dus dat doet een keyframe-animatie. Sluiten is direct. */
.sfm .sfm-item.is-open > .sfm-panel {
  display: block;
  animation: sfm-panel-in .18s ease both;
}

@keyframes sfm-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sfm .sfm-item.is-open > .sfm-panel { animation: none; }
}

/* Hier stond een onzichtbare "hover-brug" (::after) onder het menu-item om de
   gap naar het paneel te overbruggen. Die was 51px hoog en 48px breder dan de
   knop en hing dus over de hero: eenmaal open bleef het menu open zodra je
   muis daar kwam. De close-delay van 180ms in de JS doet hetzelfde werk zonder
   een onzichtbaar hitgebied over de pagina. */

.sfm .sfm-panel__inner { position: relative; }

/* --- linkerkolom: de 8 diensten --- */
.sfm .sfm-rail {
  width: var(--sfm-rail-w);
  padding: 18px 10px 22px;
  background: var(--sfm-surface);
  border-right: 1px solid rgba(14, 20, 32, .07);
}

.sfm .sfm-service + .sfm-service { margin-top: 1px; }

.sfm .sfm-service__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--sfm-pill);
  --sfm-el-font: 400 1em/1.3 var(--sfm-font);
  font: var(--sfm-el-font);
  transition: background-color var(--sfm-fade);
}

.sfm .sfm-service__num {
  font: 700 .72em/1 var(--sfm-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: rgba(14, 20, 32, .3);
  transition: color var(--sfm-fade);
}

/* font-weight staat vast in alle standen: bij hover verandert alleen de
   kleur, nooit de tekstbreedte */
/* Altijd één regel. Breekt een naam af, dan wordt de hele rail hoger en
   daarmee het paneel en de promofoto - en dat verschilt per machine zodra
   Manrope niet laadt of anders rendert. Met nowrap ligt de paneelhoogte vast.
   Zie je ergens "…" staan, verhoog dan --sfm-rail-w. */
.sfm .sfm-service__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 600 1em/1.3 var(--sfm-font);
  letter-spacing: -.01em;
  color: rgba(14, 20, 32, .66);
  transition: color var(--sfm-fade);
}

.sfm .sfm-service__arrow {
  font-size: .75em;
  line-height: 1;
  color: var(--sfm-green);
  opacity: 0;
  transition: opacity var(--sfm-fade);
}

.sfm .sfm-service.is-active .sfm-service__head  { background: #fff; }
.sfm .sfm-service.is-active .sfm-service__num   { color: var(--sfm-green); }
.sfm .sfm-service.is-active .sfm-service__name  { color: var(--sfm-green); }
.sfm .sfm-service.is-active .sfm-service__arrow { opacity: 1; }

.sfm .sfm-service__head:focus-visible { outline: 2px solid var(--sfm-green); outline-offset: -2px; }

.sfm .sfm-rail__all {
  display: block;
  margin-top: 12px;
  padding: 14px 16px 0;
  border-top: 1px solid rgba(14, 20, 32, .08);
  --sfm-el-font: 700 1em/1.4 var(--sfm-font);
  font: var(--sfm-el-font);
  color: var(--sfm-ink);
  transition: color var(--sfm-fade);
}
.sfm .sfm-rail__all:hover,
.sfm .sfm-rail__all:focus-visible { color: var(--sfm-green); }

/* --- midden + rechts: inhoud van de actieve dienst --- */
.sfm .sfm-service__body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--sfm-rail-w);
  display: grid;
  grid-template-columns: 1fr var(--sfm-promo-w);
  /* Eén rij die exact de (vaste) hoogte van dit blok is. Zonder deze regel
     is de rij `auto` en groeit hij mee met de intrinsieke hoogte van de
     promofoto, waardoor de promokolom buiten het paneel uitsteekt. */
  grid-template-rows: minmax(0, 1fr);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s;
}
.sfm .sfm-service.is-active .sfm-service__body { opacity: 1; visibility: visible; }

.sfm .sfm-service__main {
  padding: 24px 28px 26px;
  min-width: 0;
  overflow: auto;
}

.sfm .sfm-tab__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.sfm .sfm-tab__title {
  font: 800 1.3em/1.15 var(--sfm-font);
  letter-spacing: -.025em;
  color: var(--sfm-ink);
}
.sfm .sfm-tab__title a {
  --sfm-el-font: 800 1em/1.15 var(--sfm-font);
  font: var(--sfm-el-font);
  --sfm-el-ls: -.025em;
  letter-spacing: var(--sfm-el-ls);
  color: inherit;
  transition: color var(--sfm-fade);
}
.sfm .sfm-tab__title a:hover,
.sfm .sfm-tab__title a:focus-visible { color: var(--sfm-green); }

.sfm .sfm-tab__badge {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(2, 199, 134, .14);
  font: 600 .72em var(--sfm-font);
  color: var(--sfm-green-deep);
  white-space: nowrap;
}

.sfm .sfm-tab__desc {
  margin-top: 8px;
  max-width: 52ch;
  font: 400 1em/1.5 var(--sfm-font);
  color: rgba(14, 20, 32, .58);
}

.sfm .sfm-subs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 16px;
  margin-top: 18px;
}

/* font-size en font-weight liggen vast; hover verandert alleen kleur en
   achtergrond, dus de tekst verspringt niet */
.sfm .sfm-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-radius: var(--sfm-pill);
  --sfm-el-font: 600 1em/1.35 var(--sfm-font);
  font: var(--sfm-el-font);
  color: var(--sfm-ink);
  transition: color var(--sfm-fade), background-color var(--sfm-fade);
}
.sfm .sfm-sub:hover,
.sfm .sfm-sub:focus-visible {
  color: var(--sfm-green);
  background: var(--sfm-surface);
}
/* pijltje verschuift bewust NIET bij hover */
.sfm .sfm-sub span {
  font-size: .7em;
  color: var(--sfm-green);
}

/* smallere desktops: sub-diensten onder elkaar i.p.v. afgebroken labels */
@media (max-width: 1319px) {
  .sfm .sfm-subs { grid-template-columns: 1fr; }
}

/* --- promo-kolom --- */
/* Grid in plaats van flex-column, met vier rijen in dezelfde volgorde als de
   HTML: foto, titel, tekst, knop. De fotorij is minmax(0, 1fr), de rest auto.
   De fotohoogte is daarmee letterlijk:
       kolomhoogte − padding − titel − tekst − knop

   Waarom geen flexbox meer: de <img> was zelf het flex-item met `flex: 1 1 0`.
   Afbeeldingen zijn "replaced elements" met een eigen beeldverhouding, en
   Safari en Firefox laten die verhouding daar meewegen waar Chrome puur de
   flex-berekening volgt. Dezelfde CSS gaf dus per browser een andere hoogte.
   Met een grid-rij ligt de hoogte vast en vult de foto die rij met
   object-fit: cover. */
.sfm .sfm-promo {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  min-height: 0;
  padding: 20px;
  background: var(--sfm-dark);
  color: #fff;
}

/* ------------------------------------------------------------
   Fotohoogte = kolomhoogte - titel - tekst - knop.

   `flex: 1 1 0` maakt de foto het enige flexibele item in de kolom:
   flex-basis 0 betekent dat titel, tekst en knop eerst hun eigen hoogte
   krijgen en de foto exact de rest opvult. `min-height: 0` haalt de
   flexbox-ondergrens weg, zodat de foto ook krimpt als de teksten langer
   zijn - de knop valt dus nooit buiten het paneel.

   `height: auto` overruled het height-attribuut op de <img> (dat staat er
   alleen voor de layout-reservering tijdens het laden).
   ------------------------------------------------------------ */
.sfm .sfm-promo__img,
.sfm .sfm-promo__media {
  grid-row: 1;
  width: 100%;
  height: 100%;      /* vult de 1fr-rij; geen intrinsieke verhouding meer */
  min-height: 0;
  /* standaard none = precies de restruimte. Zet een waarde (bijv. 200px)
     als je de foto wilt aftoppen; de rest wordt dan witruimte boven de knop. */
  max-height: var(--sfm-promo-img-max, none);
  align-self: stretch;
  border-radius: 14px;
}

.sfm .sfm-promo__img {
  object-fit: cover;
  object-position: 50% 18%;   /* houdt het gezicht in beeld */
}

.sfm .sfm-promo__media {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, .22);
  font: 500 .7em var(--sfm-font);
  color: rgba(255, 255, 255, .4);
}

.sfm .sfm-promo__title {
  margin-top: 16px;
  font: 800 1.05em/1.25 var(--sfm-font);
  letter-spacing: -.02em;
}

.sfm .sfm-promo__desc {
  margin-top: 7px;
  font: 400 .85em/1.5 var(--sfm-font);
  color: rgba(255, 255, 255, .55);
}

.sfm .sfm-promo__foot { padding-top: 16px; }

.sfm .sfm-promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 17px;
  position: relative;
  /* eigen stacking context, zodat de gradient hieronder met z-index:-1
     tussen de achtergrond en de tekst valt in plaats van eroverheen */
  isolation: isolate;
  border-radius: var(--sfm-pill);
  background: var(--sfm-cta-bg);
  --sfm-el-font: 700 .85em/1.2 var(--sfm-font);
  font: var(--sfm-el-font);
  /* --sfm-el-color houdt de tekst ook bij hover op #0E2F2D. Zonder deze
     regel wint `.elementor-kit-11 a:hover` (0,2,1) en wordt de tekst
     #20FFB5 - exact de achtergrondkleur, dus onzichtbaar. */
  --sfm-el-color: var(--sfm-cta-ink);
  color: var(--sfm-el-color);
}

/* Zelfde hover als de Contact-knop in de header (.sf_green_button in
   style.css van het theme): een donkere diagonale gradient over de knop
   die bij hover in 500ms wegfadet, waardoor de knop oplicht.
   Geen enkele maat verandert. */
.sfm .sfm-promo__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;               /* onder de tekst, boven de achtergrond */
  border-radius: var(--sfm-pill);
  background: linear-gradient(125deg, #00000073, #00000000);
  opacity: 1;
  transition: opacity 500ms ease;
}
.sfm .sfm-promo__cta:hover::after,
.sfm .sfm-promo__cta:focus-visible::after { opacity: 0; }

/* ============================================================
   3. OVER-ONS PANEEL
   ============================================================ */

.sfm .sfm-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 18px;
}

.sfm .sfm-card {
  display: block;
  height: 100%;
  padding: 14px;
  border: 1px solid rgba(14, 20, 32, .08);
  border-radius: 16px;
  --sfm-el-font: 400 1em/1.5 var(--sfm-font);
  font: var(--sfm-el-font);
  transition: border-color var(--sfm-fade), background-color var(--sfm-fade);
}
.sfm .sfm-card:hover,
.sfm .sfm-card:focus-visible { border-color: var(--sfm-green); background: var(--sfm-surface); }

.sfm .sfm-card__img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 12px;
}

.sfm .sfm-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  font: 800 1.05em var(--sfm-font);
  color: var(--sfm-ink);
  transition: color var(--sfm-fade);
}
.sfm .sfm-card:hover .sfm-card__title,
.sfm .sfm-card:focus-visible .sfm-card__title { color: var(--sfm-green); }

.sfm .sfm-card__arrow { font-size: .7em; color: var(--sfm-green); }

.sfm .sfm-card__desc {
  display: block;
  margin-top: 7px;
  font: 400 1em/1.5 var(--sfm-font);
  color: rgba(14, 20, 32, .58);
}

/* ============================================================
   4. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .sfm *,
  .sfm *::before,
  .sfm *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}