/*
 * Reparaties op de opmaak van de bron. Laadt NA de stylesheets van de bron.
 *
 * Alleen fouten die op actabyte.nl zelf al kapot zijn en die de bouwpoort
 * `overflow` (geen uitzondering: nooit horizontaal scrollen) laat falen.
 * Gemeten met scripts/overflow.mjs en scripts/overflow-oorzaak.mjs op
 * 26-10-2026. Elke regel noemt de pagina en de oorzaak; de desktopweergave
 * van 1440 verandert nergens. Staat ook in STATUS.md onder "Bewuste
 * afwijkingen".
 */

/* Koppen en tekstblokken met een lang woord ("kennismakingsgesprek",
   "wachtwoordbeheer:") staken op 320px buiten hun vak; zo'n uitsteek zie je
   niet aan de rechthoek van het element, wel aan de scrollbreedte.
   ALLEEN onder 360px: op 1440 passen de titels in de bovenbalk ("Vacatures",
   "Blog") net niet in hun vak en steken ze onzichtbaar uit. Met deze regel op
   elke breedte braken ze af en werd elke pagina 21px hoger (26-10, gemeten). */
@media (max-width: 359px) {
  .elementor-heading-title,
  .elementor-widget-text-editor,
  .elementor-icon-box-title,
  .elementor-icon-box-description {
    overflow-wrap: break-word;
  }
}

@media (max-width: 767px) {
  /* /vacatures/ en /cloud/: tekstblok met padding-right 600 resp. 500px op
     elke breedte (op desktop een manier om de regel smal te houden). Op een
     telefoon dwong dat het blok naar 600/500px breed. */
  .elementor-8574 .elementor-element.elementor-element-212ce729,
  .elementor-8117 .elementor-element.elementor-element-6df978ca {
    padding-right: 0;
  }

  /* /privacy-verklaring/: de tabel met bewaartermijnen was 388px breed in een
     kolom van 340px. Schuiven binnen de tabel, niet de pagina. */
  .elementor-widget-text-editor table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* /glasvezel-voor-t-scheur/: de formulierrij van Elementor heeft -5px marge aan
   beide kanten (tegenhanger van de veldpadding) en stak daarmee op elke
   breedte 5px uit. Afknippen op het formulier; clip maakt geen tweede
   scroller zoals hidden dat wel doet (zie geheugen overflow-hidden-scroller). */
.elementor-widget-form .elementor-form {
  overflow-x: clip;
}

/* /overstapservice-3/: de tooltips van de hotspots staan op opacity 0 maar
   tellen mee in de breedte; op 768 stak er een 103px uit. Dicht = weg uit de
   opmaak. Open schuift acta.js hem binnen het venster. */
.e-hotspot:not(.e-hotspot--active) .e-hotspot__tooltip {
  display: none;
}
.e-hotspot--active .e-hotspot__tooltip {
  max-width: calc(100vw - 16px);
}

/* /xelion-managed-voice/, /mobiele-telefonie/, /microsoft-365-business-voice/
   en /vrijblijvend-kennismaken/: de kolom met de belknop heeft op mobiel 46px
   marge links. Op 390 past dat (46 + 298), op 320 stak hij 24px uit. Alleen
   onder 360px de marge weg; vanaf 360 blijft het zoals op de bron. */
@media (max-width: 359px) {
  .elementor-8396 .elementor-element.elementor-element-4a17a2d5 > .elementor-element-populated,
  .elementor-8408 .elementor-element.elementor-element-4c11f696 > .elementor-element-populated,
  .elementor-8417 .elementor-element.elementor-element-348bfc6 > .elementor-element-populated,
  .elementor-8688 .elementor-element.elementor-element-27dbad77 > .elementor-element-populated {
    margin-left: 0;
  }
}

/* /vrijblijvend-kennismaken/: het Calendly-vak heeft min-width 320px in een
   kolom met binnenruimte; op 320 stak het 10px uit. */
@media (max-width: 359px) {
  .calendly-inline-widget { min-width: 0 !important; }
}

/* /privacy-verklaring/: een lange URL als linktekst (veiliginternetten.nl/...)
   kon op 375px niet afbreken en stak 4px uit. Alleen links in tekstblokken,
   alleen onder 390px; op 390 past hij al. */
@media (max-width: 389px) {
  .elementor-widget-text-editor a { overflow-wrap: anywhere; }
}

/* h1 alleen voor zoekmachines en schermlezers, op pagina's waar de eerste
   zichtbare kop geen paginatitel is (seo-aanvullingen.json). Niet display:none:
   dan leest een schermlezer hem ook niet. */
.acta-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Koppen die van niveau veranderden voor de SEO-regel "precies één h1"
   (bouw-content.mjs zet data-acta-was). Zonder eigen Elementor-maat kregen ze
   de themagrootte van hun nieuwe tag: /ben-je-verbonden-.../ werd 40px in
   plaats van 32px (26-10, gemeten). Hier de maat van het oude niveau, zoals in
   het thema (Hello Elementor reset.css). Een eigen widgetmaat is specifieker
   en wint gewoon. */
h1[data-acta-was="h2"], h2[data-acta-was="h2"] { font-size: 2rem; }
h1[data-acta-was="h3"] { font-size: 1.75rem; }
h1[data-acta-was="h4"] { font-size: 1.5rem; }
h1[data-acta-was="h5"] { font-size: 1.25rem; }
h1[data-acta-was="h6"] { font-size: 1rem; }
h2[data-acta-was="h1"] { font-size: 2.5rem; }