/*
 * varamedia.be: eigen aanvullingen bovenop de gegenereerde bundels
 * (early.css/late.css). Handgeschreven; laadt als laatste.
 *
 * Typografie (docs/design/dna/varamedia.md, "varamedia.be"): twee families,
 * allebei gratis (SIL Open Font License) en zelf gehost.
 *  - Schibsted Grotesk (displayrollen): koppen H1 tot H6, hero, navigatie,
 *    knoppen, kaarttitels, kickers, FAQ-vragen en kerncijfers.
 *  - Inter (tekstrollen): lopende tekst, formulieren, FAQ-antwoorden,
 *    kruimelpad en footer. Inter komt van next/font (root-layout, preload).
 * Proxima Nova (licentiefont van de oude site) laden we nergens: overal waar de
 * oude site het gebruikte staat nu var(--vmbe-pn), en dat is standaard Inter.
 *
 * Hoe de rollen werken: de bundels en de Elementor-CSS per pagina verwijzen naar
 * var(--vmbe-pn), var(--vm-font), var(--vm-button-font) en de kitvariabelen
 * (--e-global-typography-*). Een custom property met var() wordt opgelost op het
 * element dat hem declareert, dus ".vmbe-el { --vm-font: var(--vmbe-pn) }" zet
 * Inter vast voor alles eronder. Daarom zetten we die variabelen opnieuw op elk
 * element met een displayrol: zo lost elke bestaande verwijzing daar op naar
 * Schibsted, zonder de gegenereerde bundels aan te raken.
 */

/* ---------- Fonts ---------- */

/* Schibsted Grotesk v7, variabel 400 tot 900, subset latin (Google Fonts).
   Licentie: /vmbe/fonts/schibsted-grotesk-OFL.txt. Preload in VmbeStyles. */
@font-face {
  font-family: "VM Schibsted Grotesk";
  src: url("/vmbe/fonts/schibsted-grotesk-v7-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Arial op de maten van Schibsted (zelfde berekening als next/font), zodat de
   tekst nauwelijks verspringt wanneer het font binnenkomt. */
@font-face {
  font-family: "VM Schibsted Grotesk Fallback";
  src: local("Arial");
  ascent-override: 92.54%;
  descent-override: 24.43%;
  line-gap-override: 0%;
  size-adjust: 105.53%;
}

/* ---------- Tokens ---------- */

.vmbe {
  --vm-type-display: "VM Schibsted Grotesk", "VM Schibsted Grotesk Fallback", Arial, sans-serif;
  --vm-type-text: "Inter", "Inter Fallback", Arial, sans-serif;

  /* Schaal: vloeiend tussen 390 en 1440 px breed. */
  --vm-fs-hero: clamp(2.25rem, 1.55rem + 2.85vw, 3.625rem); /* 36 tot 58 */
  --vm-fs-h1: clamp(2.125rem, 1.6rem + 1.6vw, 3rem); /* 34 tot 48 */
  --vm-fs-h2: clamp(1.75rem, 1.35rem + 1.25vw, 2.5rem); /* 28 tot 40 */
  --vm-fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); /* 22 tot 28 */
  --vm-fs-h4: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem); /* 19 tot 22 */
  --vm-fs-h5: 1.125rem; /* 18 */
  --vm-fs-h6: 1rem; /* 16 */
  --vm-fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); /* 16 tot 17 */

  /* Oude Proxima-verwijzingen: standaard tekst; displayrollen hieronder. */
  --vmbe-pn: var(--vm-type-text);
  /* Platformblokken binnen de site (gewone pagina's, formulieren) gebruiken
     dezelfde twee fonts, los van de thema-instelling in de database. */
  --font-sans: var(--vm-type-text);
  --font-display: var(--vm-type-display);
}

/* Widgets die rechtstreeks in <body> hangen (Growth Radar, WhatsApp) staan
   buiten .vmbe en erven de thema-fonts die SiteThemeStyle op body zet. Hier
   dezelfde twee fonts, zodat er geen Sora of tweede Schibsted-kopie
   (next/font) wordt opgehaald. */
body:has(.vmbe) {
  --font-sans: "Inter", "Inter Fallback", Arial, sans-serif;
  --font-display: "VM Schibsted Grotesk", "VM Schibsted Grotesk Fallback", Arial, sans-serif;
}

/* Handgemaakte pagina's (home, contact, over ons, werkwijze, diensten,
   bedankt) dragen hun eigen --f-display/--f-body. */
.vmbe .vmbe-static {
  --f-display: var(--vm-type-display);
  --f-body: var(--vm-type-text);
}

/* ---------- Displayrollen: Schibsted Grotesk ---------- */

.vmbe :is(
  h1, h2, h3, h4, h5, h6, .elementor-heading-title, summary,
  /* navigatie en megamenu */
  .vmm-link, .vmm-t, .vmm-m-item, .vmm-msl, .vmm-mprod, .vmm-pcname, .vmm-fh-title,
  .vmm-eyebrow, .vmm-mcat-title, .vmm-mfeat-title, .vmm-ftag, .vmm-cta, .vmm-mbcta, .vmm-mrev-score,
  /* knoppen */
  .elementor-button, .vm-btn, .btn, .gform_button, input[type="submit"], button[type="submit"],
  .jet-form-builder__submit, .vmf-cta-btn, .vmf-news-btn,
  .gr-cta-primary, .gr-cta-secondary, .gr-cta-ghost, .gr-tab-btn,
  /* kaart- en sectietitels */
  .elementor-icon-box-title, .elementor-image-box-title, .elementor-flip-box__layer__title,
  .elementor-cta__title, .elementor-post__title, .elementor-price-table__heading,
  .elementor-toc__header-title, .vm-dc-title, .vm-dc-name, .vm-cd-title, .vm-svc-label,
  .vm-pg-title, .vm-nl-title, .vm-sl-title, .vm-ol-title, .vm-vsh-title,
  .gr-section-title, .gr-result-title, .gr-forecast-title, .gr-example-title,
  .gr-deepdive-title, .gr-compare-title, .doen-name, .tech-name-text, .tb-mono, .bewijs-mini b,
  p.jet-listing-dynamic-field__content,
  /* kickers */
  .eyebrow, .vm-eyebrow, .vm-dc-eyebrow, .vm-pg-eyebrow, .vm-nl-eyebrow, .vm-sl-eyebrow,
  .vm-ol-eyebrow, .vm-vsh-eyebrow, .vm-panel-kicker, .gr-eyebrow,
  /* FAQ-vragen */
  .jet-toggle__label-text, .e-n-accordion-item-title-text, .elementor-tab-title,
  .elementor-toggle-title, .elementor-accordion-title,
  /* kerncijfers en uitgelichte quote */
  .elementor-counter-number-wrapper, .jet-counter__number, .gr-card-num, .gr-step-num,
  .plat-stats div, .hero-trust b, .bewijs-feat-quote, .elementor-blockquote__content
) {
  --vmbe-pn: var(--vm-type-display);
  --vm-font: var(--vm-type-display);
  --vm-button-font: var(--vm-type-display);
  --f-body: var(--vm-type-display);
  --e-global-typography-primary-font-family: var(--vm-type-display);
  --e-global-typography-secondary-font-family: var(--vm-type-display);
  --e-global-typography-text-font-family: var(--vm-type-display);
  --e-global-typography-accent-font-family: var(--vm-type-display);
  --e-global-typography-7678ab6-font-family: var(--vm-type-display);
  font-family: var(--vm-type-display) !important;
}

/* Footer: tekst en links in Inter. De kop van de CTA-band, de kolomtitels en de
   knoppen zijn koppen of knoppen en volgen de displayrol hierboven. */

/* Formulieren altijd in Inter (browsers geven velden anders hun systeemfont). */
.vmbe :is(input:not([type="submit"]):not([type="button"]), select, textarea) {
  font-family: var(--vm-type-text);
}

/* Inline font-family: "Proxima Nova" uit oude widgets en sjablonen: zonder
   ingreep valt de browser daar terug op Arial. */
.vmbe [style*="roxima" i] {
  font-family: var(--vm-type-text) !important;
}
.vmbe :is(h1, h2, h3, h4, h5, h6)[style*="roxima" i],
.vmbe a[style*="padding"][style*="roxima" i] {
  font-family: var(--vm-type-display) !important;
}

/* ---------- Schaal: Elementor-pagina's ----------
   Specificiteit tussen de themastandaarden (late.css, tot 0,4,1) en de
   Elementor-instellingen per widget (0,5,0): we vervangen de standaardmaten,
   bewuste maten per widget blijven. Letterspatiëring moet !important zijn omdat
   het oude thema die op 0 !important zette. */

/* H1: één maat op elke pagina, ook waar een sjabloon 50 of 60 px zette. */
html body .vmbe .vmbe-el:not(.wp-admin) h1 {
  font-size: var(--vm-fs-h1) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
}
html body .vmbe .vmbe-el:not(.wp-admin) .elementor-widget h2,
html body .vmbe .vmbe-el:not(.wp-admin) .elementor-widget-text-editor h2 {
  font-size: var(--vm-fs-h2);
  line-height: 1.14;
  font-weight: 700;
}
html body .vmbe .vmbe-el:not(.wp-admin) .elementor-widget h3,
html body .vmbe .vmbe-el:not(.wp-admin) .elementor-widget-text-editor h3 {
  font-size: var(--vm-fs-h3);
  line-height: 1.22;
  font-weight: 600;
}
html body .vmbe .vmbe-el:not(.wp-admin) .elementor-widget h4 {
  font-size: var(--vm-fs-h4);
  line-height: 1.3;
  font-weight: 600;
}
html body .vmbe .vmbe-el:not(.wp-admin) .elementor-widget h5 {
  font-size: var(--vm-fs-h5);
  line-height: 1.35;
  font-weight: 600;
}
html body .vmbe .vmbe-el:not(.wp-admin) .elementor-widget h6 {
  font-size: var(--vm-fs-h6);
  line-height: 1.4;
  font-weight: 600;
}

html body .vmbe .vmbe-el:not(.wp-admin) :is(h1, h2) {
  letter-spacing: -0.02em !important;
}
html body .vmbe .vmbe-el:not(.wp-admin) h3,
html body .vmbe .vmbe-el:not(.wp-admin) .elementor-widget .elementor-heading-title {
  letter-spacing: -0.012em !important;
}
html body .vmbe .vmbe-el:not(.wp-admin) .elementor-widget :is(h1, h2).elementor-heading-title {
  letter-spacing: -0.02em !important;
}
html body .vmbe .vmbe-el:not(.wp-admin) :is(h4, h5, h6) {
  letter-spacing: -0.005em !important;
}

/* Lopende tekst: 17 px op desktop, 16 px op gsm, ruimere interlinie. */
html body .vmbe .vmbe-el:not(.wp-admin) :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content) :is(p, li) {
  font-size: var(--vm-fs-body);
  line-height: 1.65;
}

/* Knoppen: één gewicht, geen spatiëring. */
.vmbe .vmbe-el :is(.elementor-button, .vm-btn, .gform_button, input[type="submit"], button[type="submit"]) {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.vmbe .vmbe-el .elementor-button {
  font-size: 1rem;
}

/* FAQ-vragen en kerncijfers. */
html body .vmbe .vmbe-el :is(.jet-toggle__label-text, .e-n-accordion-item-title-text, .elementor-tab-title, .elementor-toggle-title, .elementor-accordion-title) {
  font-weight: 600;
  letter-spacing: -0.005em;
}
/* Tabelcijfers enkel waar cijfers onder elkaar staan of optellen; in een zin
   ("4,8/5") zetten ze de komma te ver open. */
.vmbe :is(.elementor-counter-number-wrapper, .jet-counter__number, .plat-stats div, .gr-card-num) {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Kickers in kapitalen: Schibsted vraagt iets minder spatiëring dan Inter. */
.vmbe :is(.vm-dc-eyebrow, .vm-pg-eyebrow, .vm-nl-eyebrow, .vm-sl-eyebrow, .vm-ol-eyebrow, .vm-vsh-eyebrow) {
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ---------- Schaal: handgemaakte pagina's ---------- */

.vmbe .vmbe-static :is(h1, h2, h3) {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
/* Hero: enkel de homepage (vmbe-front, VmbePage). De andere handgemaakte
   pagina's volgen de H1-maat. */
.vmbe .vmbe-static .hero h1 {
  font-size: var(--vm-fs-h1);
  line-height: 1.08;
}
.vmbe .vmbe-static.vmbe-front .hero h1 {
  font-size: var(--vm-fs-hero);
  line-height: 1.04;
  letter-spacing: -0.028em;
}
.vmbe .vmbe-static .btn {
  font-weight: 600;
  letter-spacing: 0;
}
.vmbe .vmbe-static .eyebrow {
  font-weight: 600;
  letter-spacing: 0.1em;
}
.vmbe .vmbe-static :is(.doen-name, .tech-name-text, .bewijs-mini b) {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.vmbe .vmbe-static .plat-stats div {
  font-weight: 700;
}
.vmbe .vmbe-static .hero-trust b {
  font-weight: 700;
}
.vmbe .vmbe-static .bewijs-feat-quote {
  font-weight: 500;
  letter-spacing: -0.012em;
}
/* Getuigenissen zijn lopende tekst: Inter, iets lichter dan de oude 600. */
.vmbe .vmbe-static :is(.anchor-quote, .testi-card p) {
  font-family: var(--vm-type-text);
  font-weight: 500;
}
.vmbe .vmbe-static .faq-item summary {
  font-size: 17px;
  letter-spacing: -0.005em;
}
.vmbe .vmbe-static .tech-cat h3 {
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ---------- Header, megamenu en footer ---------- */

.vmbe #vmm-header#vmm-header .vmm-link {
  font-size: 15.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.vmbe #vmm-header#vmm-header .vmm-cta {
  font-weight: 600 !important;
}
.vmbe #vmm-header .vmm-m-item {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.vmbe #vmm-header .vmm-msl {
  font-weight: 500;
}
.vmbe #vmm-header .vmm-msl-all {
  font-weight: 600;
}
/* Ondertitel in de oranje gsm-knop is uitleg, geen knoptekst. */
.vmbe #vmm-header .vmm-mbcta-sub {
  font-family: var(--vm-type-text);
  font-weight: 500;
}
.vmbe #vmm-header .vmm-mrev-score {
  font-weight: 700;
}
.vmbe #vmm-header :is(.vmm-t, .vmm-fh-title) {
  font-weight: 600;
}
.vmbe #vmm-header :is(.vmm-eyebrow, .vmm-mcat-title, .vmm-mfeat-title, .vmm-ftag) {
  font-weight: 700;
  letter-spacing: 0.1em;
}
.vmbe #vmm-header .vmm-mbcta-top {
  font-weight: 700;
}
.vmbe .vmf-cta h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.vmbe .vmf-col h3 {
  font-weight: 600;
  letter-spacing: 0.1em;
}
.vmbe :is(.vmf-cta-btn, .vmf-news .vmf-news-btn) {
  font-weight: 600;
}

/* ---------- Overige aanvullingen ---------- */

/* Gewone pagina uit de admin (.vmbe-plain): het kruimelpad in zinsvorm in de
   broodletter, niet de generieke mono-kapitalen (DNA: geen mono). */
.vmbe-plain nav[aria-label="Kruimelpad"] ol {
  font-family: var(--vm-type-text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
}

/* SEO-artikelsjabloon (179347), gsm: het donkere binnenblok schoof 50px onder
   de herofoto, maar is smaller dan het scherm, waardoor het donker enkel in de
   afgeronde hoeken van de foto zichtbaar werd (ook zo op de oude site). Zoals op
   desktop laten we de foto in de donkere band hangen, over de volle breedte; de
   tekst eronder blijft op dezelfde plek. */
@media (max-width: 767px) {
  .vmbe .vmbe-el .elementor-179347 .elementor-element.elementor-element-4590e625 {
    --margin-bottom: -50px;
  }
  .vmbe .vmbe-el .elementor-179347 .elementor-element.elementor-element-45fdb27 {
    --margin-top: 0px;
  }
}

/* Kruimelpad van Elementor-sjablonen ([vm_breadcrumb] van de oude site): de
   rij staat in de bron op display:flex zonder wrap, waardoor "Je bent hier:" op
   gsm in een smalle kolom over drie regels kwam. Met wrap lopen de stukken als
   woorden door en breekt enkel de lange paginatitel. Herkend aan de bouw (een
   span gevolgd door de link naar Home), niet aan de tekst. */
.vmbe .elementor-widget-container div[style*="display:flex"]:has(> span:first-child + a[href="/"]) {
  flex-wrap: wrap;
  row-gap: 2px;
}
.vmbe .elementor-widget-container div[style*="display:flex"]:has(> span:first-child + a[href="/"]) > * {
  flex: 0 1 auto;
  min-width: 0;
}
.vmbe .elementor-widget-container div[style*="display:flex"]:has(> span:first-child + a[href="/"]) > span:first-child {
  white-space: nowrap;
}

/* /jobs, gsm: de H1 "Klaar voor een nieuwe uitdaging?" stond op hidden-mobile
   omdat de kolommen omdraaien (reverse-mobile) en hij anders midden in de
   pagina viel. Zijn kolom wordt display:contents, zodat enkel de kop naar boven
   kan (order 1); de rest volgt na "Vaste job" in dezelfde volgorde als
   voorheen (order 10 tegenover 9). Tablet en desktop blijven ongewijzigd. */
@media (max-width: 767px) {
  .vmbe .elementor-element-462624b7 > .elementor-container > .elementor-column:has(.elementor-element-7f9ac3b),
  .vmbe .elementor-element-462624b7 > .elementor-container > .elementor-column:has(.elementor-element-7f9ac3b) > .elementor-widget-wrap {
    display: contents;
  }
  .vmbe .elementor-element-462624b7 > .elementor-container > .elementor-column:has(.elementor-element-7f9ac3b) > .elementor-widget-wrap > .elementor-element:not(.elementor-element-7f9ac3b) {
    order: 10;
  }
  .vmbe .elementor-element-462624b7 .elementor-element-7f9ac3b.elementor-hidden-mobile {
    display: block;
    order: 1;
    width: 100%;
  }
}