/* =============================================================================
   Maatwerk-CSS voor een DYsign-klantsite in Elementor.
   Hoort in Site Settings → Custom CSS (de global kit), niet in een plugin of child theme,
   zodat het team het op één plek vindt.

   Dit bestand doet twee dingen:
   1. Het repareert vier eigenaardigheden van Elementor die je anders sectie per sectie tegenkomt.
   2. Het levert de handvol dingen die Elementor niet kan uitdrukken: beeldverhoudingen,
      bijschriften over beeld, een vaste header en een mobiele actiebalk.

   Vervang de kleurwaarden onderaan door die van de klant.
   ============================================================================= */

/* --- 1. reparaties ---------------------------------------------------------- */

/* Elke <p> in een tekstwidget houdt zijn ondermarge van 14px. Dat duwt tekst in tags
   en balken naar boven en zet overal losse gaten waar je ze niet vraagt. */
.elementor-widget-text-editor p:last-of-type{margin-bottom:0}

/* De veilige zone blijft op elk scherm gelijk; de buitenpadding van de sectie regelt de marge.
   Zonder dit versmalt Elementor de container naar 90% en 80% op tussenmaten. */
.e-con{--container-max-width:1504px}

/* De header vastzetten hoort op de theme-wrapper. Op de container erin is sticky begrensd
   door zijn eigen hoogte, en Elementor Pro's sticky-functie kloont de container in de DOM. */
header.elementor-location-header{position:sticky;top:0;z-index:100}

/* Een container die als los element in een rij staat mag niet uitrekken. */
.gv-auto{width:auto!important;flex:0 0 auto}

/* --- 2. beeldverhoudingen --------------------------------------------------- */
/* Zet de klasse op de container róndom het beeld, niet op het image-widget:
   Elementor bewaart maar één klasse per container en widget-klassen sneuvelen.
   !important is nodig omdat de widget-CSS van Elementor ná de kit-CSS laadt. */
.gv-imgwrap img{width:100%!important;aspect-ratio:16/9!important;object-fit:cover!important;display:block}
.gv-caseimg img{width:100%!important;aspect-ratio:4/3!important;object-fit:cover!important;display:block}
.gv-portret img{width:100%!important;aspect-ratio:4/5!important;object-fit:cover!important;display:block}
/* Grafieken, rapporten en tomogrammen nooit bijsnijden. */
.gv-contain img{width:100%!important;aspect-ratio:4/3!important;object-fit:contain!important;padding:12px;display:block}

/* --- 3. overlays op beeld --------------------------------------------------- */
.gv-imgwrap,.gv-caseimg,.gv-figure{position:relative}
.gv-figcap{position:absolute;left:12px;right:12px;bottom:12px;width:auto!important}
.gv-tag{position:absolute;top:16px;left:16px;width:auto!important;z-index:2}

/* --- 4. kaarten ------------------------------------------------------------- */
.gv-card{transition:transform .18s ease,box-shadow .18s ease}
.gv-card:hover{transform:translateY(-2px)}
.gv-card img{transition:transform .4s ease}
.gv-card:hover .gv-imgwrap img{transform:scale(1.03)}

/* --- 5. accordeon ----------------------------------------------------------- */
/* Zet géén border-instelling op het accordeon-widget zelf: die komt rondom te staan. */
.elementor-accordion .elementor-accordion-item{border:0!important;border-bottom:1px solid var(--gv-lijn)!important}
.elementor-accordion .elementor-accordion-item:last-child{border-bottom:0!important}
.elementor-accordion .elementor-tab-content{border-top:0!important}
.elementor-accordion .elementor-tab-content a{color:var(--gv-accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* --- 6. formulieren --------------------------------------------------------- */
/* Minimaal 48px hoog, met een zichtbare focusring in plaats van alleen een kleurtje. */
.elementor-field-textual{min-height:48px!important;padding-top:12px!important;padding-bottom:12px!important}
textarea.elementor-field-textual{min-height:96px!important}
.elementor-field-textual:focus{outline:none;box-shadow:0 0 0 3px var(--gv-focus)}

/* --- 7. ankers onder de vaste header --------------------------------------- */
[id]{scroll-margin-top:130px}

/* --- 8. lopende band (certificaten, USP's) ---------------------------------- */
/* Elementor heeft geen marquee-widget. Zet twee identieke lijsten naast elkaar in een
   container met deze klasse; de band schuift de helft op en herhaalt naadloos. */
.gv-strip{width:max-content!important;flex-wrap:nowrap!important;animation:gv-schuif 42s linear infinite}
.gv-strip .elementor-widget{width:auto!important;--container-widget-width:auto}
.gv-strip .elementor-icon-list-items{display:flex;flex-wrap:nowrap;gap:0}
.gv-strip .elementor-icon-list-item{margin:0!important;padding:0 28px!important;white-space:nowrap}
@keyframes gv-schuif{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.gv-strip{animation:none}}

/* --- 9. mobiel -------------------------------------------------------------- */
@media(max-width:767px){
  /* tikdoelen minstens 44px, ook tekstlinks in lijsten */
  .gv-flist a{display:inline-flex;align-items:center;min-height:44px}
  .gv-flist{gap:0}

  /* een pilvormige tag met tekst over twee regels wordt een stadion; maak er een label van */
  .gv-badge{border-radius:16px!important;padding:10px 14px!important;gap:10px!important;flex-wrap:nowrap!important}
  .gv-badge img{width:24px!important;height:24px!important}
  .gv-badge p{font-size:13px!important;line-height:1.35!important}
  .gv-badge .elementor-widget{width:auto!important;--container-widget-width:auto}
  .gv-badge .elementor-widget-text-editor{flex:1 1 auto!important;min-width:0}

  /* een schuine verloop-overlay werkt niet op een smal scherm */
  .gv-hero-overlay::before{background-image:none!important;background-color:var(--gv-overlay)!important;opacity:1!important}

  body{padding-bottom:0}
  [id]{scroll-margin-top:90px}

  /* Elke knop haalt het tikdoel van 44px, ook de twee compacte CTA's in de navigatie. */
  .elementor-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* --- 10. mobiele actiebalk -------------------------------------------------- */
.gv-sticky{display:none}
@media(max-width:767px){
  .gv-sticky{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:99;background:rgba(255,255,255,.97);border-top:1px solid var(--gv-lijn);padding:12px 16px}
  .gv-sticky .elementor-widget-button,.gv-sticky .elementor-button{width:100%}
}

/* --- klantkleuren ----------------------------------------------------------- */
:root{
  --gv-lijn:#E3E7EA;
  --gv-accent:#00A3CC;
  --gv-focus:rgba(0,163,204,.20);
  --gv-overlay:rgba(0,0,0,.55);
}

/* --- Maxicon-specifiek ------------------------------------------------------
   Alle waarden komen uit ../METINGEN.md, gemeten op www.maxicon.be bij 1710px.
   -------------------------------------------------------------------------- */

/* Evogria heeft één snede en staat op de site altijd in kapitalen. */
h1,h2,h3,h4,h5,h6,.elementor-heading-title{text-transform:uppercase}
/* h1: 86px bij 1710px, 28px op mobiel — beide gemeten op het origineel. */
h1,.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(28px,5vw,86px);line-height:1.05}
.gv-card,.elementor-button{border-radius:0}

/* --- filterbalk: schuift 106px over de hero heen -------------------------- */
.e-con.mx-filterbalk{margin-top:-106px;position:relative;z-index:5}
.mx-filter__form{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:24px;align-items:end;
  background:#fff;padding:28px 32px;box-shadow:0 10px 40px rgba(0,0,0,.10)}
.mx-filter__veld{display:flex;flex-direction:column;gap:8px;min-width:0}
.mx-filter__veld label{font:500 15px/1.3 Epilogue,sans-serif;color:#171717}
.mx-filter__veld input,.mx-filter__veld select{height:48px;border:1px solid #C9D2D8;background:#fff;
  padding:0 14px;font:400 15px/1 Epilogue,sans-serif;color:#171717;width:100%}
.mx-filter__veld input:focus,.mx-filter__veld select:focus{outline:none;box-shadow:0 0 0 3px var(--gv-focus);border-color:var(--gv-accent)}
.mx-filter__knop{height:48px;min-width:132px;border:0;background:var(--gv-accent);color:#fff;cursor:pointer;
  font:400 15px/1 Evogria,sans-serif;letter-spacing:1px;text-transform:uppercase}
.mx-filter__knop:hover{background:#008BAF}

/* --- vacaturekaarten ------------------------------------------------------ */
.e-con.mx-vacaturekaart{height:100%}
.mx-pin{display:inline-block;width:13px;height:17px;margin-right:8px;vertical-align:-3px;
  background:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;
  -webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 0C3.13 0 0 3.13 0 7c0 5.25 7 11 7 11s7-5.75 7-11c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 7 4.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 0C3.13 0 0 3.13 0 7c0 5.25 7 11 7 11s7-5.75 7-11c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 7 4.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}

/* --- divisiekaarten ------------------------------------------------------- */
.e-con.mx-divisie{position:relative;overflow:hidden}
.e-con.mx-divisie .elementor-widget-image img{aspect-ratio:1/1!important;object-fit:cover!important;
  width:100%!important;display:block;filter:grayscale(1) contrast(1.05);transition:filter .35s ease,transform .5s ease}
.e-con.mx-divisie:hover .elementor-widget-image img{filter:grayscale(0);transform:scale(1.04)}
.e-con.mx-divisie::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.12);z-index:1;
  transition:background .35s ease;pointer-events:none}
.e-con.mx-divisie:hover::after{background:rgba(0,0,0,0)}

/* --- citaat + foto + lint -------------------------------------------------- */
.e-con.mx-citaatrij{position:relative;overflow:hidden}
.e-con.mx-citaatblok{flex:0 0 821px;width:821px!important}
.e-con.mx-portret{flex:0 0 570px;width:570px!important}
.e-con.mx-citaatblok{position:relative;z-index:2}
.mx-citaat{font:400 34px/1.25 Evogria,sans-serif;color:#fff;margin:0 0 24px;text-transform:none}
.mx-citaat__naam{font:400 18px/1.4 Epilogue,sans-serif;color:#00A3CC;margin:0}
.e-con.mx-portret{position:relative;z-index:2}
.e-con.mx-portret img{width:100%!important;height:100%!important;object-fit:cover!important;
  filter:grayscale(1);display:block}
.e-con.mx-portret,.e-con.mx-portret .elementor-widget-image,.e-con.mx-portret .elementor-widget-container{height:100%}
/* Het lint loopt achter de foto door en steekt er bovenaan rechts bovenuit. */
.e-con.mx-lint{position:absolute!important;left:40%;top:-90px;width:78%;z-index:1;pointer-events:none}
.e-con.mx-lint img{width:100%;height:auto;display:block}

/* --- tellers --------------------------------------------------------------- */
.mx-tellers{grid-auto-flow:row}
.e-con.mx-teller{grid-row-end:span 2;text-align:center}
.e-con.mx-teller:nth-child(2n){grid-row-start:1}
.e-con.mx-teller:nth-child(2n+1){grid-row-start:2}
.e-con.mx-meter{position:relative;width:96px!important;height:96px;border:3px solid #00A3CC;
  border-radius:50%;background:#fff;flex:0 0 auto}
.e-con.mx-meter .elementor-widget-image{position:absolute;bottom:50%;left:calc(50% - 13px);width:26px;
  transform-origin:center bottom;transform:rotate(var(--meter-degree,0deg));transition:transform .3s}
.e-con.mx-teller:hover .e-con.mx-meter .elementor-widget-image{transform:rotate(calc(var(--meter-degree,0deg) + 90deg))}
.e-con.mx-meter img{width:26px;height:26px;display:block}
.e-con.mx-teller1{--meter-degree:5deg}
.e-con.mx-teller2{--meter-degree:-145deg}
.e-con.mx-teller3{--meter-degree:124deg}
.e-con.mx-teller4{--meter-degree:-100deg}
.e-con.mx-teller5{--meter-degree:-55deg}
.e-con.mx-teller .elementor-counter{margin-top:14px}
.e-con.mx-teller .elementor-counter-number-wrapper{justify-content:center}
.e-con.mx-teller .elementor-widget-text-editor{max-width:200px;text-align:center}

/* --- Onze fans: horizontaal accordeon -------------------------------------- */
/* Elementor zet zelf background-image op .e-con, dus hier !important. */
.e-con.mx-fansband{background-image:linear-gradient(128deg,#CFECF4 0%,#FFFFFF 100%)!important}
.e-con.mx-fans{overflow:hidden;min-height:350px;align-items:center!important}
.e-con.mx-fan{position:relative;flex:0 0 auto!important;width:210px;padding:56px 40px!important;
  transition:width .45s cubic-bezier(.4,0,.2,1);overflow:hidden}
/* schuine scheidingslijn, dezelfde 18 graden als het origineel */
.e-con.mx-fan+.mx-fan::before{content:"";position:absolute;top:-60px;bottom:-60px;left:0;width:1px;
  background:rgba(23,23,23,.14);transform:rotate(18deg)}
.e-con.mx-fan__logo{flex:0 0 150px;width:150px!important}
 /* width:auto op een nog niet geladen lazy image geeft een doos van 0x0 en dan start
    de browser de download niet. Daarom een echte breedte plus object-fit. */
.e-con.mx-fan__logo img{width:100%!important;max-width:150px!important;height:auto!important;
  max-height:70px!important;object-fit:contain!important;object-position:left center}
 /* max-width:0 alleen is niet genoeg: de tekst breekt dan af per letter en wordt
    honderden pixels hoog. Het origineel zet daarom ook de hoogte op 0. */
.e-con.mx-fan__tekst{max-width:0;height:0;opacity:0;overflow:hidden;
  transition:max-width .45s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.e-con.mx-fan1{width:642px}
.e-con.mx-fan1 .e-con.mx-fan__tekst{max-width:600px;height:auto;opacity:1}
.e-con.mx-fans:hover .e-con.mx-fan{width:210px}
.e-con.mx-fans:hover .e-con.mx-fan1 .e-con.mx-fan__tekst{max-width:0;height:0;opacity:0}
.e-con.mx-fans .e-con.mx-fan:hover{width:642px}
.e-con.mx-fans .e-con.mx-fan:hover .e-con.mx-fan__tekst{max-width:600px;height:auto;opacity:1}

/* --- nieuws ---------------------------------------------------------------- */
.e-con.mx-nieuwsbeeld img{aspect-ratio:455/500!important;object-fit:cover!important;width:100%!important;
  display:block;filter:grayscale(1);transition:filter .4s ease}
.e-con.mx-nieuwskaart:hover .e-con.mx-nieuwsbeeld img{filter:grayscale(0)}

/* --- referentiegrid --------------------------------------------------------- */
.mx-refgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:32px;align-items:center}
.mx-refgrid__item{display:flex;align-items:center;justify-content:center;padding:16px;
  background:#fff;min-height:96px}
.mx-refgrid img{max-width:100%;max-height:56px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.75;transition:filter .3s ease,opacity .3s ease}
.mx-refgrid__item:hover img,.mx-refgrid__link:hover img{filter:grayscale(0);opacity:1}
@media(max-width:1024px){.mx-refgrid{grid-template-columns:repeat(4,1fr);gap:24px}}
@media(max-width:767px){.mx-refgrid{grid-template-columns:repeat(2,1fr);gap:16px}}

/* --- specialisatie- en contactkaarten op de divisiepagina's ------------------ */
.mx-specialisatie{text-align:center}
.mx-specialisatie p{text-transform:uppercase}
.mx-teamwork{text-align:center}

/* --- footer (blauw vlak, gemeten op de live site) --------------------------- */
.e-con.mx-footer a{color:#fff;text-decoration:none}
.e-con.mx-footer a:hover{color:#171717}
.e-con.mx-footermenu .elementor-nav-menu a{padding-left:0!important;text-transform:lowercase}
.e-con.mx-vestiging h4{text-transform:none}
.e-con.mx-footerbalk{opacity:.92}

/* --- header ---------------------------------------------------------------- */
@media(max-width:1200px){
  .e-con.mx-navrij{flex-wrap:wrap!important;justify-content:flex-end!important}
}
@media(max-width:1024px){
  .e-con.mx-topbar{display:none!important}
  .e-con.mx-header .e-con-inner > .e-con:last-child{flex-wrap:nowrap!important;align-items:center!important}
  .e-con.mx-navrij{flex-wrap:nowrap!important;justify-content:flex-end!important;gap:10px!important;
    width:auto!important;flex:0 1 auto;min-width:0}
  .e-con.mx-navrij > .elementor-widget{flex:0 0 auto;width:auto!important;--container-widget-width:auto}
  .e-con.mx-navrij .elementor-button{padding-left:16px!important;padding-right:16px!important}
  .mx-cta-talent{display:none!important}
  .e-con.mx-header .elementor-widget-image img{max-width:170px!important}
}

/* --- mobiel ---------------------------------------------------------------- */
@media(max-width:1024px){
  .mx-filter__form{grid-template-columns:1fr 1fr;gap:16px}
  .mx-filter__knop{grid-column:1/-1;width:100%}
  .e-con.mx-lint{display:none}
  .e-con.mx-citaatblok,.e-con.mx-portret{width:100%!important;flex:1 1 100%!important}
}
@media(max-width:767px){
  .e-con.mx-filterbalk{margin-top:-40px}
  .mx-filter__form{grid-template-columns:1fr;padding:20px}

  /* Tellers: drie kolommen, zelfde versprongen plaatsing als het origineel.
     De span van twee rijen blijft staan; alleen item 2 zakt naar rij 2 kolom 2. */
  .e-con.mx-teller:nth-child(2n),.e-con.mx-teller:nth-child(2n+1){grid-row-start:auto}
  .e-con.mx-teller:nth-child(2){grid-row-start:2;grid-column:2}

  .mx-citaat{font-size:24px}
  .e-con.mx-citaatblok{padding:40px 24px!important}

  /* Onze fans blijft ook op mobiel een rij van vijf logo's; het citaat komt eronder. */
  .e-con.mx-fans{flex-wrap:wrap!important;min-height:340px;align-items:flex-start!important;
    justify-content:space-between!important;padding:24px 0;position:relative}
  .e-con.mx-fan,.e-con.mx-fan1,.e-con.mx-fans .e-con.mx-fan:hover,.e-con.mx-fans:hover .e-con.mx-fan{width:auto!important;
    flex:0 0 auto!important;padding:0!important}
  .e-con.mx-fan+.mx-fan::before{display:none}
  .e-con.mx-fan__logo{width:56px!important;flex:0 0 56px!important}
  .e-con.mx-fan__logo img{max-width:56px!important;max-height:40px!important}
  .e-con.mx-fan__tekst{position:absolute;left:0;right:0;top:96px;max-width:100%!important;
    height:auto!important;opacity:0;pointer-events:none}
  .e-con.mx-fan1 .e-con.mx-fan__tekst,.e-con.mx-fans .e-con.mx-fan:hover .e-con.mx-fan__tekst{opacity:1;pointer-events:auto}
  .e-con.mx-fans:hover .e-con.mx-fan1 .e-con.mx-fan__tekst{opacity:0}
}