/* Round i2 (2026-10-12): version 8 with every service and all of its jobs in it, i2a–i2c (vouw/i2.js writes the
   markup, vouw/i2-recept.md has the recipe). Every class is si2-; every rule reaches only the element, or r1's header
   where the element stands in it (":has(.si2-…)"), so with ?d=0, and with any other state of the row, nothing here
   applies. Colours and fonts are the site's tokens (style.css). The panels of i2a and i2b take the look of the site's
   own dropdown, the Diensten menu (style.css .drop): kalk-wit, the deep shadow, a dakpan rule along the top, its rows. */

/* ======================================================== shared: the line, the panel, the marks */
.si2-a,
.si2-b,
.si2-c {
  --si2-regels: 1;
  margin: clamp(16px, 1.5vw, 22px) 0 0;
  font: 400 14.5px/1.6 var(--f-sans); color: var(--lood-zacht);
}
.svr__klus > .si2-a,
.svr__klus > .si2-b { grid-column: 1 / -1; }
.si2-chev { width: 11px; height: 11px; color: var(--lood-grijs); transition: transform .15s, color .15s; }
.si2-pijl { width: 14px; height: 14px; transition: transform .15s; }

/* the line's names: the breadcrumb's quiet links (grey, the kalk underline), as the original */
.si2-a__kop,
.si2-b__kop { margin-right: 6px; font-weight: 500; }
.si2-a__rij,
.si2-b__rij { display: inline; margin: 0; padding: 0; list-style: none; }
.si2-a__rij > li,
.si2-b__rij > li { display: inline-block; max-width: 100%; margin-right: 14px; white-space: nowrap; vertical-align: baseline; }
.si2-a__rij > li[hidden],
.si2-b__rij > li[hidden] { display: none; }
.si2-a__rij > li:last-child,
.si2-b__rij > li:last-child { margin-right: 0; }
.si2-b__rij > li > a,
.si2-a__naam {
  color: var(--lood-zacht); text-decoration: underline; text-decoration-color: var(--kalk-rand);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* the panel: the site's dropdown */
.si2-paneel {
  position: absolute; z-index: 8; margin: 0; padding: 10px;
  text-align: left; white-space: normal; font: 400 15.5px/1.35 var(--f-sans); color: var(--lood);
  background: var(--kalk-wit); border-radius: var(--r); box-shadow: var(--shadow-2); border-top: 4px solid var(--dakpan);
}
.si2-paneel[hidden] { display: none; }
.si2-paneel ul { margin: 0; padding: 0; list-style: none; }
.si2-paneel li { break-inside: avoid; }
.si2-klus {
  display: block; padding: 9px 14px; border-radius: 4px;
  font-weight: 600; color: var(--lood); text-decoration: none;
}
.si2-klus:focus-visible { outline-offset: -3px; }
/* where the reader is: the job's name, not a link, and the site's small tag beside it (style.css .laatst__tag) */
.si2-hier { display: block; padding: 9px 14px; font-weight: 600; color: var(--lood-grijs); }
.si2-hier__tag {
  display: inline-block; margin-left: 6px; padding: 2px 5px 1px; vertical-align: 2px;
  font: 700 10px/1.2 var(--f-tech); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  color: var(--dakpan); border: 1.5px solid currentColor; border-radius: 3px;
}
/* the service's own page, at the panel's foot, in the homepage's words */
.si2-meer {
  display: flex; align-items: center; gap: 7px; margin: 6px 0 0; padding: 11px 14px 5px;
  font: 600 14.5px/1.3 var(--f-sans); color: var(--dakpan); text-decoration: none;
  border-top: 1px solid var(--kalk-diep);
}
.si2-meer:focus-visible { outline-offset: -3px; }

/* open: r1's card is lifted over the form card under it (and its breadcrumb over the card), so a panel is not painted
   under the form; shut, the stacking is r1's own */
.svr:has(.si2-open) > .svr__vel { z-index: 5; }
.svr:has(.si2-open) > .svr__kruimel { z-index: 6; }

/* ======================================================== i2a · six words, six dropdowns
   The line names the services; each name is a button with the menu's small chevron. Its panel drops under the whole
   line (so it never covers the line's other names where the line wraps), lined up with the name (i2.js). */
.si2-a { position: relative; }
.si2-a__knop {
  display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.si2-a__knop[aria-expanded="true"] .si2-a__naam { color: var(--lood); text-decoration-color: var(--dakpan); }
.si2-a__knop[aria-expanded="true"] .si2-chev { color: var(--dakpan); transform: rotate(180deg); }
.si2-a__paneel {
  top: calc(100% + 8px); left: -14px; width: max-content; min-width: 250px;
  max-width: min(560px, calc(100vw - 2 * var(--gut)));
}
/* the service's name over its jobs: only on a phone, where the panel drops under the whole line */
.si2-a__titel { display: none; }
.si2-a__plus button {
  margin: 0; padding: 0 8px; height: 21px; vertical-align: 1px;
  font: 600 13px/19px var(--f-sans); color: var(--lood-zacht);
  background: transparent; border: 1px solid var(--kalk-rand); border-radius: 999px; cursor: pointer;
}
.si2-a__plus button[aria-expanded="true"] { background: var(--kalk); }
@media (min-width: 761px) {
  /* seven jobs and more: two columns, so the list stays about as tall as five */
  .si2-a__paneel--veel { width: 600px; }
  .si2-a__paneel--veel .si2-a__lijst { columns: 2; column-gap: 4px; }
}

/* ======================================================== i2b · the line as it was, one menu behind it
   The page's own service's other jobs as the line's links; at its end a small pill, the panel drops from it. On a
   computer the panel is two panes, the services left (the Diensten menu's rows), the jobs of the one chosen right. */
.si2-b__alle { position: relative; }
.si2-b__knop {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; margin: 0; padding: 0 9px 0 11px; vertical-align: 1px;
  font: 600 13.5px/1 var(--f-sans); color: var(--lood-zacht); white-space: nowrap;
  background: transparent; border: 1px solid var(--kalk-rand); border-radius: 999px; cursor: pointer;
}
.si2-b__knop[aria-expanded="true"] { background: var(--kalk); color: var(--lood); }
.si2-b__knop[aria-expanded="true"] .si2-chev { color: var(--dakpan); transform: rotate(180deg); }
.si2-b__paneel {
  top: calc(100% + 8px); left: -10px; width: min(660px, calc(100vw - 2 * var(--gut)));
}
.si2-b__paneel[data-si2-kant="r"] { left: auto; right: -10px; }
.si2-b__diensten {
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  grid-template-rows: repeat(var(--si2-n), min-content) 1fr; column-gap: 0;
}
.si2-b__dienst { display: contents; }
.si2-b__dk {
  grid-column: 1; display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 10px 12px 10px 14px;
  font: 600 15.5px/1.35 var(--f-sans); color: var(--lood); text-align: left;
  background: none; border: 0; border-radius: 4px; cursor: pointer;
}
.si2-b__dnaam { min-width: 0; }
.si2-b__n { display: none; font: 500 12.5px/1 var(--f-sans); color: var(--lood-grijs); white-space: nowrap; }
.si2-b__dk .si2-chev { margin-left: auto; }
.si2-b__dk .si2-chev { transform: rotate(-90deg); }
.si2-b__dk[aria-expanded="true"] { background: var(--kalk); color: var(--dakpan); }
.si2-b__dk[aria-expanded="true"] .si2-chev { color: var(--dakpan); }
.si2-b__dk:focus-visible { outline-offset: -3px; }
.si2-b__klussen {
  grid-column: 2; grid-row: 1 / span var(--si2-rijen); min-width: 0;
  margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--kalk-diep);
}
.si2-b__terug,
.si2-b__titel { display: none; }
@media (min-width: 761px) {
  /* a service of seven jobs and more: its jobs in two columns, the panel wider (as wide for every service, so it does
     not change size as the pointer moves down the services) */
  .si2-b__paneel--veel { width: min(820px, calc(100vw - 2 * var(--gut))); }
  .si2-b__lijst--veel { columns: 2; column-gap: 4px; }
}

/* ======================================================== i2c · a table of contents that folds out
   One quiet line; open, the services as a short list with the site's hairlines, each its own fold; open, a
   service's jobs as a line of grey links under its name. On a computer it stands in the opening line's column. */
.si2-c { max-width: 34em; margin-top: 14px; }
.si2-c summary { list-style: none; cursor: pointer; }
.si2-c summary::-webkit-details-marker { display: none; }
.si2-c__kop { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 500; border-radius: 3px; }
.si2-c__kop .si2-chev { align-self: center; }
.si2-c__label {
  text-decoration: underline; text-decoration-color: var(--kalk-rand);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.si2-c__n { margin-left: 4px; font-weight: 400; font-size: 13.5px; color: var(--lood-grijs); }
.si2-c__alles[open] > .si2-c__kop .si2-c__label { color: var(--lood); text-decoration-color: var(--dakpan); }
.si2-c__alles[open] > .si2-c__kop .si2-chev { color: var(--dakpan); transform: rotate(180deg); }
.si2-c__diensten { margin: 10px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--kalk-diep); }
.si2-c__dienst { border-bottom: 1px solid var(--kalk-diep); }
.si2-c__dienst > summary {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 2px; border-radius: 3px;
  font: 600 15px/1.35 var(--f-sans); color: var(--lood);
}
.si2-c__dnaam { min-width: 0; }
.si2-c__dn { margin-left: auto; font: 400 13px/1 var(--f-sans); color: var(--lood-grijs); white-space: nowrap; }
.si2-c__dienst[open] > summary { color: var(--dakpan); }
.si2-c__dienst[open] > summary .si2-chev { color: var(--dakpan); transform: rotate(180deg); }
.si2-c summary:focus-visible { outline-offset: 2px; }
/* a service's jobs: the original's line of words, under the service's name */
.si2-c__klussen { margin: -2px 0 0; padding: 0 2px 12px; list-style: none; }
.si2-c__klussen > li { display: inline-block; max-width: 100%; margin-right: 14px; vertical-align: baseline; }
.si2-c__klussen > li:last-child { margin-right: 0; }
.si2-c__klussen a:not(.si2-meer) {
  color: var(--lood-zacht); text-decoration: underline; text-decoration-color: var(--kalk-rand);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.si2-c .si2-hier { display: inline; padding: 0; font-weight: 400; }
.si2-c .si2-hier__tag { margin-left: 4px; vertical-align: 1px; }
.si2-c__klussen > .si2-c__meer { display: block; margin: 4px 0 0; }
.si2-c .si2-meer { display: inline-flex; margin: 0; padding: 0; border: 0; font-size: 14px; }

@media (min-width: 961px) {
  /* in the opening line's column, under it: r1's card keeps the H1 and its line side by side */
  .svr__klus > .si2-c { grid-column: 2; }
}

/* ======================================================== hover: only where there is a pointer that hovers, so a tap
   on a phone leaves no colour behind */
@media (hover: hover) {
  .si2-b__rij > li > a:hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }
  .si2-klus:hover { background: var(--kalk); color: var(--dakpan); }
  .si2-meer:hover { color: var(--dakpan-diep); }
  .si2-meer:hover .si2-pijl { transform: translateX(3px); }
  .si2-a__knop:hover .si2-a__naam { color: var(--dakpan); text-decoration-color: var(--dakpan); }
  .si2-a__knop:hover .si2-chev { color: var(--dakpan); }
  .si2-a__plus button:hover { color: var(--dakpan); border-color: var(--dakpan); }
  .si2-b__knop:hover { color: var(--dakpan); border-color: var(--dakpan); }
  .si2-b__knop:hover .si2-chev { color: var(--dakpan); }
  .si2-b__dk:hover { background: var(--kalk); color: var(--dakpan); }
  .si2-c__kop:hover .si2-c__label { color: var(--dakpan); text-decoration-color: var(--dakpan); }
  .si2-c__kop:hover .si2-chev { color: var(--dakpan); }
  .si2-c__dienst > summary:hover { color: var(--dakpan); }
  .si2-c__dienst > summary:hover .si2-chev { color: var(--dakpan); }
  .si2-c__klussen a:not(.si2-meer):hover { color: var(--dakpan); text-decoration-color: var(--dakpan); }
}
@media (hover: hover) and (max-width: 640px) {
  .si2-b__dk:hover { background: none; }
}

/* ======================================================== touch: a finger's room round the line's small names and
   buttons, without moving a letter (the line's height is what i2.js measures) */
.si2-a__knop,
.si2-a__plus button,
.si2-b__rij > li > a,
.si2-b__knop,
.si2-c__klussen a:not(.si2-meer) { position: relative; }
.si2-a__knop::after,
.si2-a__plus button::after,
.si2-b__rij > li > a::after,
.si2-b__knop::after,
.si2-c__klussen a:not(.si2-meer)::after { content: ""; position: absolute; inset: -4px -4px; }

/* ======================================================== the phone */
@media (max-width: 960px) {
  .si2-a,
  .si2-b { --si2-regels: 2; }
  /* i2b: the panel hangs from the line, inside the card, not from the pill wherever it ends up */
  .si2-b { position: relative; }
  .si2-b__alle { position: static; }
  .si2-b__paneel,
  .si2-b__paneel[data-si2-kant="r"] { top: calc(100% + 8px); left: -10px; right: auto; }
}
@media (max-width: 640px) {
  /* i2b: one level at a time. The panel drops under the whole line, as wide as the card's text and a little more;
     a tap on a service shows its jobs in its place, "‹ Alle diensten" goes back */
  .si2-b__paneel,
  .si2-b__paneel[data-si2-kant="r"] { left: -6px; right: -6px; width: auto; }
  .si2-b__diensten { display: block; }
  .si2-b__dienst { display: block; }
  .si2-b__dk { padding: 12px 10px; border-radius: 0; border-bottom: 1px solid var(--kalk-diep); }
  .si2-b__n { display: inline; margin-left: auto; }
  .si2-b__n + .si2-chev { margin-left: 0; }
  .si2-b__dienst:last-child > .si2-b__dk { border-bottom: 0; }
  .si2-b__paneel:has(.si2-b__dk[aria-expanded="true"]) .si2-b__dk { display: none; }
  .si2-b__klussen { margin: 0; padding: 0; border: 0; }
  .si2-b__terug {
    display: inline-flex; align-items: center; gap: 4px; margin: 0 0 2px; padding: 8px 10px 8px 6px;
    font: 600 14px/1.2 var(--f-sans); color: var(--dakpan); background: none; border: 0; border-radius: 4px; cursor: pointer;
  }
  .si2-b__terug .si2-chev { width: 12px; height: 12px; color: var(--dakpan); transform: rotate(90deg); }
  .si2-b__titel {
    display: block; margin: 0; padding: 4px 10px 6px;
    font: 700 12px/1.3 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: var(--dakpan);
  }
  .si2-b__klussen .si2-klus,
  .si2-b__klussen .si2-hier { padding: 10px 10px; }
  .si2-b__klussen .si2-meer { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 560px) {
  .si2-a,
  .si2-b,
  .si2-c { margin-top: 12px; font-size: 14px; }
  .si2-a__rij > li,
  .si2-b__rij > li { margin-right: 12px; }
  /* i2a: the panel drops under the whole line, as wide as the card's text and a little more, the service's name on
     top of it */
  .si2-a__paneel,
  .si2-a__paneel[data-si2-kant="r"] { top: calc(100% + 8px); left: -6px; right: -6px; width: auto; min-width: 0; max-width: none; }
  .si2-a__titel {
    display: block; margin: 0; padding: 4px 10px 6px;
    font: 700 12px/1.3 var(--f-tech); letter-spacing: .14em; text-transform: uppercase; color: var(--dakpan);
  }
  .si2-a__lijst .si2-klus,
  .si2-a__lijst .si2-hier { padding: 10px 10px; }
  .si2-a__paneel .si2-meer { padding-left: 10px; padding-right: 10px; }
  .si2-c__dienst > summary { padding: 10px 4px 10px 2px; }
  .si2-c__klussen { line-height: 1.85; }
}

/* ======================================================== 10-13: 8B gone on a phone
   The operator, on a crop of i2b's line: "hide this on mobile view". From 640 px down (where i2b went one level at a
   time) the line and its menu are not there; on a phone 5C under the form and 3A further down carry the other jobs. */
@media (max-width: 640px) {
  .si2-b { display: none; }
}