/* ===========================================================================
   _responsive.css -- één huis voor de responsive-reparaties van 2026-09-23
   ===========================================================================

   WAAROM DIT BESTAND BESTAAT

   Gemeten op 2026-09-23 met scripts/responsive-sweep.mjs uit
   bongartzdiaz/juandiazllc.com, tegen productie: 323 URL's x 27 breedtes gaf
   **522 gevallen** van inhoud die buiten beeld viel, op 108 pagina's. Anders
   dan bij juandiazllc.com knipt diazatlas niets weg -- `html` en `body` staan
   op `overflow-x: visible` -- dus schuift de hele pagina zijwaarts onder je
   duim mee. Zichtbaar vervelend in plaats van onzichtbaar weg, maar even fout.

   De oorzaken waren niet tien verschillende dingen. Het waren er vier:

     1. tabellen met drie of vier kolommen op een telefoon
     2. een nav waarvan de rechterkant niet kan krimpen
     3. een handvol lange, onbreekbare woorden
     4. één rij met `white-space: nowrap` die niet mag afbreken

   WAAROM ALS APART BESTAND, EN NIET IN _vs-styles.css

   825 van de 832 pagina's dragen hun eigen `<style>`-blok; er waren maar twee
   gedeelde stylesheets, en die dekken elkaar niet (`_fonts.css` op 310
   pagina's, `_vs-styles.css` op 400). Er was dus geen enkele plek waar een
   sitebrede regel neergezet kon worden. Deze is dat wel.

   LET OP DE VOLGORDE VAN DE LINK

   Dit bestand hoort vlak vóór `</head>` gelinkt te worden, ná het eigen
   `<style>`-blok van de pagina. Een externe stylesheet en een inline
   `<style>` wegen in de cascade even zwaar; bij gelijke specificiteit wint de
   laatste. Zet je de link bovenaan bij `_fonts.css`, dan verliest de helft van
   dit bestand het stil van de pagina's eigen `nav .right { display: flex }`.

   ELKE REGEL HIERONDER IS LIVE GEMETEN VOORDAT HIJ HIER STOND. De
   alternatieven staan bij hun eigen blok, met waarom ze afvielen.
   =========================================================================== */


/* ── 1. Tabellen ───────────────────────────────────────────────────────────
   Een tabel van vier kolommen past niet op 320px, en dat is geen opmaakfout
   maar rekenwerk: vier kolommen prozatekst hebben samen meer minimumbreedte
   dan het venster. Er is dus geen instelling die hem laat "passen" -- er is
   alleen een keuze wat je opoffert.

   Drie kandidaten zijn live tegen /privacy gemeten, met schermafdrukken:

     A  table-layout:fixed + overflow-wrap:anywhere
        -> bereikt 0 overloop, maar breekt élk woord middenin: "Trial-aanme
           lding", "bedri jfsna am", "Licen se-". De koppen zelf ook. Bij een
           monospace-lettertype en vier kolommen op 320px blijft er ~70px per
           kolom over; dat is geen tabel meer.
     B  de rij stapelen
        -> werkt voor een vergelijkingstabel (twee waarden onder één kenmerk),
           maar niet voor een gegevenstabel van vier kolommen: zonder de
           kopregel ernaast lees je vier losse blokken zonder betekenis. Labels
           erbij genereren vraagt een data-attribuut op elke cel, over 39
           pagina's.
     C  de tabel zelf laten schuiven  <-- gekozen
        -> woorden blijven heel, de tabel blijft een tabel, en de *pagina*
           schuift niet meer mee. De lezer veegt de tabel opzij, wat bij een
           naslagtabel het verwachte gebaar is.

   `width: max-content; min-width: 100%` staat erbij omdat `display: block` een
   tabel anders shrink-to-fit maakt: een smalle tabel zou dan niet meer de
   volle breedte pakken.

   760px is gekozen met marge. Gemeten liep een tabel over tot en met **721px**
   (vier kolommen, Duits); boven 760 is hij aantoonbaar schoon. Groeit een
   vertaling, dan schuift die grens mee en ziet alleen de sweep dat. */
@media (max-width: 760px) {
  table:not(.compare-table),
  .shortcuts {
    display: block;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
  }
}

/* Vergelijkingstabellen krijgen een andere behandeling: daar ís de
   vergelijking het punt, dus een kolom die buiten beeld schuift maakt de
   pagina zinloos. Stapelen houdt allebei de waarden zichtbaar -- het kenmerk
   over de volle breedte, de twee waarden eronder naast elkaar.

   Alleen bij drie of meer kolommen. De acht tabellen op de /for/-pagina's
   hebben er twee en passen al (gemeten op /for/contractors bij 320px: 272px
   breed, vóór en na identiek); die blijven met rust. Een browser zonder
   `:has()` negeert dit blok en houdt het gedrag van vandaag.

   640px, en dat is een correctie. Eerst stond hier 560, op de meting "liep
   over tot 430px". Die meting miste 22 URL's -- de sweep tegen productie was
   op 301 van de 323 blijven steken -- en /de/vs/qcad zat daarbij. Die loopt
   op **561px** over, precies één pixel boven het gekozen breekpunt. Een
   breekpunt dat op een onvolledige lijst is gekozen, is een gok met een
   getal erbij. 640 sluit aan op het punt waar de nav-links al wijken. */
@media (max-width: 640px) {
  .compare-table tr:has(> :nth-child(3)) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(94, 255, 177, 0.08);
  }
  .compare-table tr:has(> :nth-child(3)) th,
  .compare-table tr:has(> :nth-child(3)) td {
    display: block;
    border-bottom: 0;
  }
  .compare-table tr:has(> :nth-child(3)) th:first-child,
  .compare-table tr:has(> :nth-child(3)) td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 2px;
  }
  .compare-table tbody tr:last-child {
    border-bottom: 0;
  }
}


/* ── 2. De nav ─────────────────────────────────────────────────────────────
   `nav .right` (taalwisselaar + CTA) liep buiten beeld tot en met **901px**.
   Dat is geen telefoonprobleem maar een flexbox-probleem: de rechterkant mocht
   niet krimpen, dus duwde hij zichzelf de pagina uit -- de CTA en de
   taalwisselaar waren op een telefoon helemaal onbereikbaar.

   Vandaar dat deze regels *geen* media query dragen: ze gelden op elke
   breedte, en doen niets zolang alles past. */
nav .wrap,
nav .wrap-wide { min-width: 0; }

nav .links {
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
nav .links::-webkit-scrollbar { display: none; }
nav .links a { white-space: nowrap; }

nav .right { flex: 0 1 auto; min-width: 0; }
nav .right > * { flex-shrink: 1; min-width: 0; }
nav .right .cta,
nav .right .cta-btn,
nav .right > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
nav .lang-switch {
  flex-shrink: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
nav .lang-switch::-webkit-scrollbar { display: none; }

/* De homepages verbergen de nav-links zelf al onder 640px. /about, /beta en
   /help misten die regel, en dáár liep de nav dus vast. Dit maakt het
   sitebreed gelijk in plaats van per pagina anders. */
@media (max-width: 640px) {
  nav .links { display: none; }
}

@media (max-width: 560px) {
  nav .wrap,
  nav .wrap-wide { gap: 10px; }
  nav .lang-switch { gap: 2px; }
  nav .lang-switch button { padding: 4px 5px; }
  nav .right .cta,
  nav .right .cta-btn,
  nav .right > a { padding: 8px 10px; }
}

@media (max-width: 480px) {
  /* Het woordmerk gaat weg, het logo blijft -- en blijft de link naar huis.
     Zonder deze regel bleef de taalwisselaar op 320px halverwege afgekapt
     staan: een halve groene pil, met ES en DE alleen bereikbaar door te vegen.
     Op een viertalige site is dat geen sieraad maar navigatie. Zelfde patroon
     als _vs-styles.css al gebruikte. */
  nav .brand { font-size: 0; gap: 0; }
  nav .lang-switch { flex-shrink: 0; }
}

@media (max-width: 430px) {
  nav .right .cta,
  nav .right .cta-btn,
  nav .right > a { font-size: 12px; padding: 7px 8px; }
}

/* De voet-links wikkelden op een deel van de pagina's niet. */
footer .links { flex-wrap: wrap; }


/* ── 3. Lange, onbreekbare woorden ─────────────────────────────────────────
   Twee plekken, allebei tekst die een browser niet uit zichzelf afbreekt:
   een accentwoord in een <h1> ("voor werkvoorbereiding", 30px over), en de
   changelog-regels met paden erin ("check/available/downloaded/installed/
   failed", tot 125px over). `anywhere` en niet `break-word`: alleen `anywhere`
   verlaagt de min-content-breedte, en dát is wat hier telt.

   Op alle koppen en niet alleen op `.accent`: /eula draagt
   "Eindgebruikersovereenkomst (EULA)" in een <span class="nl-only">, 40px
   buiten beeld op 320px. `overflow-wrap` erft, dus de kop dekt de span.
   De regel doet niets zolang een woord past -- hij verlaagt alleen de
   ondergrens wanneer er geen andere afbreekplek is. */
h1, h2, h3 { overflow-wrap: anywhere; }

.release ul li,
.release ul li span { overflow-wrap: anywhere; }


/* ── 4. De commissie-rij op /affiliates ────────────────────────────────────
   `.stack-row .value` draagt `white-space: nowrap`. Op 320px past "Vs. 30d
   standaard" niet meer naast zijn label, en in het Duits ("Vs.
   30-Tage-Standard") tot 390px niet. Laten wikkelen in plaats van de rij
   uit de pagina te duwen. */
@media (max-width: 560px) {
  .stack-row { flex-wrap: wrap; }
  .stack-row .value { white-space: normal; }
}