@charset "UTF-8";
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/* stylelint-disable scss/no-global-function-names */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/* stylelint-disable-next-line block-no-empty */
/*

# CSS implementation

## `text-decoration-skip`

`text-decoration-skip` can be helpful to avoid making some texts unreadable.
For example by obscuring Arabic diacritics.

However, the combination of a greater thickness and skipping this thick underline
leads to a very unappealing rendering of the underline. To avoid this,
`text-decoration-skip` is disabled for interactive states.

For design token configurations that have identical thickness for normal and interactive
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
from an interrupted to an uninterrupted underline (for some texts).

Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.

---

Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
that moving the pointer away from a link or having focus elsewhere first is simple enough to
not make this too inconvenient.

---

Some folks implement the underline of links using `border-bottom` or even using a finely crafted
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.

## `text-decoration-thickness`

Varying `text-decoration-thickness` can be used to distinguish interactive states.

---

`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
the underline offset also seems to increase along with the thickness, which effectively means
the underline is closer to the next line than in Safari.

---

It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
use the `max()` function to ensure the underline remains visible for every font size.

## `transition`

`text-decoration-thickness` could be a candidate for animating between interactive states,
however browsers don't seem to have implemented great looking supixel tweening yet.

`text-decoration-skip` also makes the transition more challenging to implement.

*/
/**
 * Simulate forced-colors mode.
 */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
/**
 * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
 * 
 * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/* stylelint-disable scss/no-global-function-names */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/* stylelint-disable-next-line block-no-empty */
/*

# CSS implementation

## `text-decoration-skip`

`text-decoration-skip` can be helpful to avoid making some texts unreadable.
For example by obscuring Arabic diacritics.

However, the combination of a greater thickness and skipping this thick underline
leads to a very unappealing rendering of the underline. To avoid this,
`text-decoration-skip` is disabled for interactive states.

For design token configurations that have identical thickness for normal and interactive
states, this will lead to the (undesirable) effect that the focus/hover effect is switching
from an interrupted to an uninterrupted underline (for some texts).

Apart from making `skip-ink` configurable for normal/focus/hover, there is no good solution yet.

---

Disabling `text-decoration-skip` for interactive states obscures some texts, and we assume for now
that moving the pointer away from a link or having focus elsewhere first is simple enough to
not make this too inconvenient.

---

Some folks implement the underline of links using `border-bottom` or even using a finely crafted
`linear-gradient()` with a solid color at the bottom and transparent behind the text. These approaches
would unfortunately not be able to provide the improved readability of `text-decoration-skip`.

## `text-decoration-thickness`

Varying `text-decoration-thickness` can be used to distinguish interactive states.

---

`text-decoration-thickness` appears to have rendering differences between Chrome and Safari.
In Safari the line becomes thicker with extra pixels added to the bottom, while in Chrome
the underline offset also seems to increase along with the thickness, which effectively means
the underline is closer to the next line than in Safari.

---

It might be nice to use font-relative units for `text-decoration-thickness`, and that is why we
use the `max()` function to ensure the underline remains visible for every font size.

## `transition`

`text-decoration-thickness` could be a candidate for animating between interactive states,
however browsers don't seem to have implemented great looking supixel tweening yet.

`text-decoration-skip` also makes the transition more challenging to implement.

*/
/**
 * Simulate forced-colors mode.
 */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
/**
 * Link for elements such as `<img>` or `<article>`, that are not inline elements or plain text.
 * 
 * Changing `display: inline` to `inline-block` ensures the focus outline is rendered around the entire box.
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/* stylelint-disable-next-line block-no-empty */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/* stylelint-disable-next-line block-no-empty */
/* stylelint-disable-next-line block-no-empty */
.nijmegen-html {
  margin-block-end: var(--nijmegen-html-margin-block-end);
  writing-mode: horizontal-tb;
  /* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
  color: var(--utrecht-document-color, inherit);
  font-family: var(--utrecht-document-font-family, inherit);
  font-size: var(--utrecht-document-font-size, inherit);
  font-weight: var(--utrecht-document-font-weight, inherit);
  line-height: var(--utrecht-document-line-height, inherit);
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  /* override the `:focus` selector above */
  /* stylelint-disable-next-line no-descending-specificity */
  /* stylelint-disable selector-class-pattern */
  /* stylelint-disable-next-line */
}
.nijmegen-html :lang(ar) {
  /* `letter-spacing` design tokens break Arabic text rendering, avoid that */
  letter-spacing: 0 !important;
}
.nijmegen-html input[type=button i],
.nijmegen-html input[type=reset i],
.nijmegen-html input[type=submit i],
.nijmegen-html button {
  /*
  `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
  The hint color takes priority over the appearance color.

  `--_utrecht-button-appearance` is the internal prefix for the appearance
  (primary-action, secondary-action or subtle), it is not an API.
  */
  --_utrecht-button-background-color: var(
    --_utrecht-button-hint-background-color,
    var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
  );
  --_utrecht-button-color: var(
    --_utrecht-button-hint-color,
    var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
  );
  --_utrecht-button-border-color: var(
    --_utrecht-button-hint-border-color,
    var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
  );
  --_utrecht-button-border-bottom-color: var(
    --_utrecht-button-hint-border-bottom-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-border-bottom-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
        )
      )
    )
  );
  --_utrecht-button-disabled-background-color: var(
    --_utrecht-button-hint-disabled-background-color,
    var(
      --_utrecht-button-appearance-disabled-background-color,
      var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
    )
  );
  --_utrecht-button-disabled-border-color: var(
    --_utrecht-button-hint-disabled-border-color,
    var(
      --_utrecht-button-appearance-disabled-border-color,
      var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
    )
  );
  --_utrecht-button-disabled-color: var(
    --_utrecht-button-hint-disabled-color,
    var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
  );
  --_utrecht-button-pressed-background-color: var(
    --_utrecht-button-hint-pressed-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-pressed-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-border-color: var(
    --_utrecht-button-hint-pressed-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-pressed-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-color: var(
    --_utrecht-button-hint-pressed-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-pressed-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-focus-background-color: var(
    --_utrecht-button-hint-focus-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-focus-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-focus-border-color: var(
    --_utrecht-button-hint-focus-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-focus-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-focus-color: var(
    --_utrecht-button-hint-focus-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-focus-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-hover-background-color: var(
    --_utrecht-button-hint-hover-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-hover-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-hover-border-color: var(
    --_utrecht-button-hint-hover-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-hover-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-hover-color: var(
    --_utrecht-button-hint-hover-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-hover-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-active-background-color: var(
    --_utrecht-button-hint-active-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-active-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-active-border-color: var(
    --_utrecht-button-hint-active-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-active-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-active-color: var(
    --_utrecht-button-hint-active-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-active-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
  --_utrecht-button-border-block-end-width: var(
    --utrecht-button-border-bottom-width,
    var(--_utrecht-button-border-width, 0)
  );
  --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
  --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
  align-items: center;
  background-color: var(--_utrecht-button-background-color);
  block-size: fit-content;
  border-block-end-color: var(--_utrecht-button-border-bottom-color);
  border-block-end-width: var(--_utrecht-button-border-block-end-width);
  border-color: var(--_utrecht-button-border-color);
  border-radius: var(--utrecht-button-border-radius);
  border-style: solid;
  border-width: var(--_utrecht-button-border-width);
  box-sizing: border-box;
  color: var(--_utrecht-button-color);
  column-gap: var(--utrecht-button-column-gap);
  cursor: var(--utrecht-action-activate-cursor, revert);
  display: inline-flex;
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
  inline-size: var(--utrecht-button-inline-size, auto);
  justify-content: center;
  line-height: var(--_utrecht-button-line-height);
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
  min-block-size: var(--utrecht-button-min-block-size, 44px);
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
  padding-block-end: var(--utrecht-button-padding-block-end);
  padding-block-start: var(--utrecht-button-padding-block-start);
  padding-inline-end: var(--utrecht-button-padding-inline-end);
  padding-inline-start: var(--utrecht-button-padding-inline-start);
  scale: 1;
  text-transform: var(--utrecht-button-text-transform);
  -webkit-user-select: none;
  user-select: none;
  margin-block-end: var(--utrecht-button-margin-block-end);
  margin-block-start: var(--utrecht-button-margin-block-start);
  margin-inline-end: var(--utrecht-button-margin-inline-end);
  margin-inline-start: var(--utrecht-button-margin-inline-start);
}
.nijmegen-html button[hidden] {
  display: none;
}
.nijmegen-html button[type=submit i],
.nijmegen-html input[type=submit i] {
  cursor: var(--utrecht-action-submit-cursor, revert);
}
.nijmegen-html button:disabled,
.nijmegen-html button[aria-disabled=true] {
  background-color: var(--_utrecht-button-disabled-background-color);
  border-color: var(--_utrecht-button-disabled-border-color);
  color: var(--_utrecht-button-disabled-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
.nijmegen-html button[aria-busy=true],
.nijmegen-html button[aria-disabled=true][aria-busy=true],
.nijmegen-html button:disabled[aria-busy=true] {
  cursor: var(--utrecht-action-busy-cursor, wait);
}
.nijmegen-html button:active:not([aria-disabled=true], :disabled) {
  background-color: var(--_utrecht-button-active-background-color);
  border-color: var(--_utrecht-button-active-border-color);
  color: var(--_utrecht-button-active-color);
}
.nijmegen-html button:hover:not([aria-disabled=true], :disabled) {
  background-color: var(--_utrecht-button-hover-background-color);
  border-color: var(--_utrecht-button-hover-border-color);
  color: var(--_utrecht-button-hover-color);
  scale: var(--utrecht-button-hover-scale, 1);
}
.nijmegen-html button:focus:not([aria-disabled=true], :disabled) {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}
.nijmegen-html button:focus-visible {
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}
.nijmegen-html p {
  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
  font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
}
.nijmegen-html * ~ p {
  --utrecht-space-around: 1;
}
.nijmegen-html p.lead {
  color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
  font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
  font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
  line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
}
.nijmegen-html h1 {
  break-inside: avoid-column;
  page-break-inside: avoid;
  color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
  font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
  font-size: var(--utrecht-heading-1-font-size, revert);
  font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold));
  line-height: var(--utrecht-heading-1-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-1-margin-block-start, 0));
  page-break-after: avoid;
  --utrecht-space-around: 1;
}
.nijmegen-html h2 {
  break-inside: avoid-column;
  page-break-inside: avoid;
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
  font-size: var(--utrecht-heading-2-font-size, revert);
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
  line-height: var(--utrecht-heading-2-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
  page-break-after: avoid;
  --utrecht-space-around: 1;
}
.nijmegen-html h3 {
  break-inside: avoid-column;
  page-break-inside: avoid;
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
  font-size: var(--utrecht-heading-3-font-size, revert);
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
  line-height: var(--utrecht-heading-3-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
  page-break-after: avoid;
  --utrecht-space-around: 1;
}
.nijmegen-html h4 {
  break-inside: avoid-column;
  page-break-inside: avoid;
  color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
  font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
  font-size: var(--utrecht-heading-4-font-size, revert);
  font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold));
  line-height: var(--utrecht-heading-4-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-4-margin-block-start, 0));
  page-break-after: avoid;
  --utrecht-space-around: 1;
}
.nijmegen-html h5 {
  break-inside: avoid-column;
  page-break-inside: avoid;
  color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
  font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
  font-size: var(--utrecht-heading-5-font-size, revert);
  font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold));
  line-height: var(--utrecht-heading-5-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-5-margin-block-start, 0));
  page-break-after: avoid;
  --utrecht-space-around: 1;
}
.nijmegen-html h6 {
  break-inside: avoid-column;
  page-break-inside: avoid;
  color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
  font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
  font-size: var(--utrecht-heading-6-font-size, revert);
  font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold));
  line-height: var(--utrecht-heading-6-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-6-margin-block-start, 0));
  page-break-after: avoid;
  --utrecht-space-around: 1;
}
.nijmegen-html a {
  --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
  color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
}
.nijmegen-html a:visited {
  --_utrecht-link-forced-colors-color: visitedtext;
  --_utrecht-link-state-color: var(--utrecht-link-visited-color);
}
.nijmegen-html a:hover {
  --_utrecht-link-forced-colors-color: linktext;
  --_utrecht-link-state-color: var(--utrecht-link-hover-color);
  --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
  text-decoration-skip: none;
  text-decoration-skip-ink: none;
}
.nijmegen-html a:active {
  --_utrecht-link-forced-colors-color: activetext;
  --_utrecht-link-state-color: var(--utrecht-link-active-color);
}
.nijmegen-html a:focus {
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
  background-color: var(--utrecht-link-focus-background-color, transparent);
  text-decoration-skip: none;
  text-decoration-skip-ink: none;
}
.nijmegen-html a:focus-visible {
  /*
   * WCAG SC 2.4.12: Focus Not Obscured
   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
   */
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
  /*
   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
   * 
   * `--utrecht-link-focus-text-decoration`
   * `--utrecht-link-focus-text-decoration-thickness`
   */
  --_utrecht-link-state-text-decoration: var(
    --utrecht-link-focus-visible-text-decoration,
    var(--utrecht-link-focus-text-decoration)
  );
  --_utrecht-link-state-text-decoration-thickness: var(
    --utrecht-link-focus-visible-text-decoration-thickness,
    var(--utrecht-link-focus-text-decoration-thickness)
  );
  z-index: var(--utrecht-stack-focus-z-index, 1);
}
.nijmegen-html a[href^="tel:" i] {
  white-space: nowrap;
}
.nijmegen-html ul {
  box-sizing: border-box;
  font-family: var(--utrecht-document-font-family, inherit);
  font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit));
  line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit));
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
  padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch);
  text-align: start;
}
.nijmegen-html ul li {
  margin-block-end: var(--utrecht-unordered-list-item-margin-block-end);
  margin-block-start: var(--utrecht-unordered-list-item-margin-block-start);
  padding-inline-start: var(--utrecht-unordered-list-item-padding-inline-start, 1ch);
}
.nijmegen-html ul li::marker {
  color: var(--utrecht-unordered-list-marker-color);
  content: "●";
}
.nijmegen-html ul.nijmegen-html-linklist {
  list-style: none;
  padding-inline-start: 0;
}
.nijmegen-html ul.nijmegen-html-linklist li {
  padding-inline-start: 0;
}
.nijmegen-html ul.nijmegen-html-linklist li::marker {
  all: unset;
}
.nijmegen-html ul.nijmegen-html-linklist li::before {
  background-color: var(--utrecht-link-color);
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: var(--nijmegen-icon-functional-size-height, 0.875rem); /* stylelint-disable-line property-disallowed-list */
  mask-image: var(--nijmegen-link-list-icon, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6l-6 6"></path></svg>'));
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100%;
  position: relative;
  top: 2px; /* stylelint-disable-line property-disallowed-list */
  width: var(--nijmegen-icon-functional-size-width, 1.5rem); /* stylelint-disable-line property-disallowed-list */
  padding-inline-end: 0;
}
.nijmegen-html ul.nijmegen-html-linklist li a {
  align-items: baseline;
  color: var(--utrecht-link-color);
  display: inline-flex;
  gap: var(--todo-link-list-item-column-gap); /* stylelint-disable-line custom-property-pattern */
  text-decoration: var(--nijmegen-link-list-item-text-decoration, none);
}
.nijmegen-html ul.nijmegen-html-linklist li a:active, .nijmegen-html ul.nijmegen-html-linklist li a.nijmegen-link-list__link--active {
  --_utrecht-link-forced-colors-color: activetext;
  --_utrecht-link-state-color: var(--utrecht-link-active-color);
  color: var(--nijmegen-link-list-item-active-color, #0c483d);
  text-decoration: var(--nijmegen-link-list-item-active-text-decoration, underline);
}
.nijmegen-html ul.nijmegen-html-linklist li a:active::before, .nijmegen-html ul.nijmegen-html-linklist li a.nijmegen-link-list__link--active::before {
  background-color: var(--nijmegen-link-list-item-active-color, #0c483d);
}
.nijmegen-html ul.nijmegen-html-linklist li a:hover, .nijmegen-html ul.nijmegen-html-linklist li a.nijmegen-link-list__link--hover {
  --_utrecht-link-forced-colors-color: linktext;
  --_utrecht-link-state-color: var(--utrecht-link-hover-color);
  --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
  text-decoration-skip: none;
  text-decoration-skip-ink: none;
  color: var(--nijmegen-link-list-item-hover-color, #116253);
  text-decoration: var(--nijmegen-link-list-item-hover-text-decoration, underline);
}
.nijmegen-html ul.nijmegen-html-linklist li a:hover::before, .nijmegen-html ul.nijmegen-html-linklist li a.nijmegen-link-list__link--hover::before {
  background-color: var(--nijmegen-link-list-item-hover-color, #116253);
}
.nijmegen-html ul.nijmegen-html-linklist li a:focus, .nijmegen-html ul.nijmegen-html-linklist li a.nijmegen-link-list__link--focus {
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
  background-color: var(--utrecht-link-focus-background-color, transparent);
  text-decoration-skip: none;
  text-decoration-skip-ink: none;
  color: var(--nijmegen-link-list-item-focus-color, #000);
  text-decoration: var(--nijmegen-link-list-item-focus-text-decoration, none);
}
.nijmegen-html ul.nijmegen-html-linklist li a:focus::before, .nijmegen-html ul.nijmegen-html-linklist li a.nijmegen-link-list__link--focus::before {
  background-color: var(--nijmegen-link-list-item-focus-color, #000);
}
.nijmegen-html ul.nijmegen-html-linklist li a:focus-visible, .nijmegen-html ul.nijmegen-html-linklist li a.nijmegen-link-list__link--focus-visible {
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
  background-color: var(--utrecht-link-focus-background-color, transparent);
  text-decoration-skip: none;
  text-decoration-skip-ink: none;
  /*
   * WCAG SC 2.4.12: Focus Not Obscured
   * Use `z-index` to ensure the focus ring is stacked above adjecent elements with a `background`
   */
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
  /*
   * The following tokens are deprecated, but we keep them for backwards compatibility for now:
   * 
   * `--utrecht-link-focus-text-decoration`
   * `--utrecht-link-focus-text-decoration-thickness`
   */
  --_utrecht-link-state-text-decoration: var(
    --utrecht-link-focus-visible-text-decoration,
    var(--utrecht-link-focus-text-decoration)
  );
  --_utrecht-link-state-text-decoration-thickness: var(
    --utrecht-link-focus-visible-text-decoration-thickness,
    var(--utrecht-link-focus-text-decoration-thickness)
  );
  z-index: var(--utrecht-stack-focus-z-index, 1);
  color: var(--nijmegen-link-list-item-focus-visible-color, #000);
}
.nijmegen-html ul.nijmegen-html-linklist li a:focus-visible::before, .nijmegen-html ul.nijmegen-html-linklist li a.nijmegen-link-list__link--focus-visible::before {
  background-color: var(--nijmegen-link-list-item-focus-visible-color, #000);
}
.nijmegen-html ul.nijmegen-html-linklist li a:visited, .nijmegen-html ul.nijmegen-html-linklist li a.nijmegen-link-list__link--visited {
  --_utrecht-link-forced-colors-color: visitedtext;
  --_utrecht-link-state-color: var(--utrecht-link-visited-color);
}
.nijmegen-html table {
  border-collapse: collapse;
  border-spacing: 0;
  font-family: var(--nijmegen-table-font-family);
  font-size: var(--nijmegen-table-font-size, 1.125rem);
  line-height: var(--nijmegen-table-line-height, 150%);
  margin-block-end: var(--nijmegen-table-margin-block-end);
  width: 100%; /* stylelint-disable-line property-disallowed-list */
}
.nijmegen-html table caption {
  color: var(--nijmegen-table-caption-color);
  font-family: var(--nijmegen-table-caption-font-family);
  font-size: var(--nijmegen-table-caption-font-size);
  font-weight: var(--nijmegen-table-caption-font-weight);
  line-height: var(--nijmegen-table-caption-line-height);
  margin-block-end: var(--nijmegen-table-caption-margin-block-end);
  text-align: start;
}
.nijmegen-html table tr {
  border-block-end-color: var(--nijmegen-table-row-border-block-end-color);
  border-block-end-style: solid;
  border-block-end-width: var(--nijmegen-table-row-large-vw-border-block-end-width);
}
@media (width < 576px) {
  .nijmegen-html table tr {
    border-block-end-width: var(--nijmegen-table-row-border-block-end-width);
  }
}
.nijmegen-html table thead {
  background-color: var(--nijmegen-table-header-background-color);
  border-block-end-color: var(--nijmegen-table-header-border-block-end-color);
  border-block-end-width: var(--nijmegen-table-header-border-block-end-width);
  break-inside: avoid;
  color: var(--nijmegen-table-header-color);
  font-weight: var(--nijmegen-table-header-cell-font-weight);
}
@media (width < 576px) {
  .nijmegen-html table thead {
    display: none;
  }
}
.nijmegen-html table thead th {
  text-align: start;
  vertical-align: top;
  font-weight: var(--nijmegen-table-header-cell-large-vw-font-weight);
  padding-block-end: var(--nijmegen-table-header-cell-large-vw-padding-block-end);
  padding-block-start: var(--nijmegen-table-header-cell-large-vw-padding-block-start);
  padding-inline-end: var(--nijmegen-table-header-cell-large-vw-padding-inline-end);
  padding-inline-start: var(--nijmegen-table-header-cell-large-vw-padding-inline-start);
}
@media (width >= 576px) {
  .nijmegen-html table thead th.nijmegen-table__header-cell-end {
    text-align: end;
  }
}
.nijmegen-html table tbody td,
.nijmegen-html table tfoot td {
  text-align: start;
  vertical-align: top;
  padding-block-end: var(--nijmegen-table-data-cell-large-vw-padding-block-end);
  padding-block-start: var(--nijmegen-table-data-cell-large-vw-padding-block-start);
  padding-inline-end: var(--nijmegen-table-data-cell-large-vw-padding-inline-end);
  padding-inline-start: var(--nijmegen-table-data-cell-large-vw-padding-inline-start);
}
@media (width >= 576px) {
  .nijmegen-html table tbody td.nijmegen-table__data-cell-end,
  .nijmegen-html table tfoot td.nijmegen-table__data-cell-end {
    text-align: end;
  }
}
@media (width < 576px) {
  .nijmegen-html table tbody td,
  .nijmegen-html table tfoot td {
    display: block;
    padding-block-end: var(--nijmegen-table-data-cell-padding-block-end);
    padding-block-start: var(--nijmegen-table-header-cell-padding-block-start);
    padding-inline-end: var(--nijmegen-table-data-cell-padding-inline-end);
    padding-inline-start: var(--nijmegen-table-data-cell-padding-inline-start);
  }
  .nijmegen-html table tbody td::before,
  .nijmegen-html table tfoot td::before {
    content: attr(data-label);
    display: block;
    font-weight: var(--nijmegen-table-header-cell-font-weight, 600);
    padding-block-end: calc(var(--nijmegen-table-data-cell-padding-block-start) + var(--nijmegen-table-header-cell-padding-block-end));
  }
}
.nijmegen-html h1:first-child {
  --h1-margin-block-start: 0;
}
.nijmegen-html h1:has(+ h2) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h1:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h1:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h1:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h1:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h1:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h2:first-child {
  --h2-margin-block-start: 0;
}
.nijmegen-html h2:has(+ h3) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h2:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h2:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h2:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h2:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h2:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h3:first-child {
  --h3-margin-block-start: 0;
}
.nijmegen-html h3:has(+ h4) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h3:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h3:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h3:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h3:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h3:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h4:first-child {
  --h4-margin-block-start: 0;
}
.nijmegen-html h4:has(+ h5) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h4:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h4:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h4:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h4:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h4:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h5:first-child {
  --h5-margin-block-start: 0;
}
.nijmegen-html h5:has(+ h6) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html h5:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h5:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h5:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h5:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h5:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h6:first-child {
  --h6-margin-block-start: 0;
}
.nijmegen-html h6:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h6:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h6:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h6:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html h6:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html button:first-child {
  --button-margin-block-start: 0;
}
.nijmegen-html button:has(+ h2) {
  margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
}
.nijmegen-html button:has(+ h3) {
  margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
}
.nijmegen-html button:has(+ h4) {
  margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
}
.nijmegen-html button:has(+ h5) {
  margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
}
.nijmegen-html button:has(+ h6) {
  margin-block-end: var(--utrecht-rich-text-stranger-margin-block-end);
}
.nijmegen-html button:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
  margin-inline-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html button:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html button:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html button:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html button:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html p:first-child {
  --p-margin-block-start: 0;
}
.nijmegen-html p:has(+ h2) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html p:has(+ h3) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html p:has(+ h4) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html p:has(+ h5) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html p:has(+ h6) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html p:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html p:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html p:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html p:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html p:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html ul:first-child {
  --ul-margin-block-start: 0;
}
.nijmegen-html ul:has(+ h2) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html ul:has(+ h3) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html ul:has(+ h4) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html ul:has(+ h5) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html ul:has(+ h6) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html ul:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html ul:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html ul:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html ul:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html ul:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html nijmegen-html-linklist:first-child {
  --nijmegen-html-linklist-margin-block-start: 0;
}
.nijmegen-html .nijmegen-html-linklist:has(+ h2) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html .nijmegen-html-linklist:has(+ h3) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html .nijmegen-html-linklist:has(+ h4) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html .nijmegen-html-linklist:has(+ h5) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html .nijmegen-html-linklist:has(+ h6) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html .nijmegen-html-linklist:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html .nijmegen-html-linklist:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html .nijmegen-html-linklist:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html .nijmegen-html-linklist:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html .nijmegen-html-linklist:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html a:first-child {
  --a-margin-block-start: 0;
}
.nijmegen-html a:has(+ h2) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html a:has(+ h3) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html a:has(+ h4) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html a:has(+ h5) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html a:has(+ h6) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html a:has(+ button) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html a:has(+ p) {
  margin-block-end: var(--utrecht-rich-text-acquaintance-margin-block-end);
}
.nijmegen-html a:has(+ ul) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html a:has(+ .nijmegen-html-linklist) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}
.nijmegen-html a:has(+ a) {
  margin-block-end: var(--utrecht-rich-text-friend-margin-block-end);
}

.nijmegen-component-library-mapping {
  writing-mode: horizontal-tb;
}
.nijmegen-component-library-mapping .btn {
  /*
  `--_utrecht-button-hint` is the internal prefix for the applied optional hint, it is not an API.
  The hint color takes priority over the appearance color.

  `--_utrecht-button-appearance` is the internal prefix for the appearance
  (primary-action, secondary-action or subtle), it is not an API.
  */
  --_utrecht-button-background-color: var(
    --_utrecht-button-hint-background-color,
    var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
  );
  --_utrecht-button-color: var(
    --_utrecht-button-hint-color,
    var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
  );
  --_utrecht-button-border-color: var(
    --_utrecht-button-hint-border-color,
    var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
  );
  --_utrecht-button-border-bottom-color: var(
    --_utrecht-button-hint-border-bottom-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-border-bottom-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
        )
      )
    )
  );
  --_utrecht-button-disabled-background-color: var(
    --_utrecht-button-hint-disabled-background-color,
    var(
      --_utrecht-button-appearance-disabled-background-color,
      var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
    )
  );
  --_utrecht-button-disabled-border-color: var(
    --_utrecht-button-hint-disabled-border-color,
    var(
      --_utrecht-button-appearance-disabled-border-color,
      var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
    )
  );
  --_utrecht-button-disabled-color: var(
    --_utrecht-button-hint-disabled-color,
    var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
  );
  --_utrecht-button-pressed-background-color: var(
    --_utrecht-button-hint-pressed-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-pressed-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-border-color: var(
    --_utrecht-button-hint-pressed-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-pressed-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-color: var(
    --_utrecht-button-hint-pressed-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-pressed-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-focus-background-color: var(
    --_utrecht-button-hint-focus-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-focus-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-focus-border-color: var(
    --_utrecht-button-hint-focus-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-focus-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-focus-color: var(
    --_utrecht-button-hint-focus-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-focus-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-hover-background-color: var(
    --_utrecht-button-hint-hover-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-hover-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-hover-border-color: var(
    --_utrecht-button-hint-hover-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-hover-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-hover-color: var(
    --_utrecht-button-hint-hover-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-hover-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-active-background-color: var(
    --_utrecht-button-hint-active-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-active-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-active-border-color: var(
    --_utrecht-button-hint-active-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-active-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-active-color: var(
    --_utrecht-button-hint-active-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-active-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
  --_utrecht-button-border-block-end-width: var(
    --utrecht-button-border-bottom-width,
    var(--_utrecht-button-border-width, 0)
  );
  --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
  --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
  align-items: center;
  background-color: var(--_utrecht-button-background-color);
  block-size: fit-content;
  border-block-end-color: var(--_utrecht-button-border-bottom-color);
  border-block-end-width: var(--_utrecht-button-border-block-end-width);
  border-color: var(--_utrecht-button-border-color);
  border-radius: var(--utrecht-button-border-radius);
  border-style: solid;
  border-width: var(--_utrecht-button-border-width);
  box-sizing: border-box;
  color: var(--_utrecht-button-color);
  column-gap: var(--utrecht-button-column-gap);
  cursor: var(--utrecht-action-activate-cursor, revert);
  display: inline-flex;
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
  inline-size: var(--utrecht-button-inline-size, auto);
  justify-content: center;
  line-height: var(--_utrecht-button-line-height);
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
  min-block-size: var(--utrecht-button-min-block-size, 44px);
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
  padding-block-end: var(--utrecht-button-padding-block-end);
  padding-block-start: var(--utrecht-button-padding-block-start);
  padding-inline-end: var(--utrecht-button-padding-inline-end);
  padding-inline-start: var(--utrecht-button-padding-inline-start);
  scale: 1;
  text-transform: var(--utrecht-button-text-transform);
  -webkit-user-select: none;
  user-select: none;
  text-decoration: none;
  box-shadow: none;
  letter-spacing: normal;
  width: initial;
}
.nijmegen-component-library-mapping .btn:disabled {
  background-color: var(--_utrecht-button-disabled-background-color);
  border-color: var(--_utrecht-button-disabled-border-color);
  color: var(--_utrecht-button-disabled-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
.nijmegen-component-library-mapping .btn:focus:not(:disabled, [aria-disabled=true]) {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}
.nijmegen-component-library-mapping .btn:focus-visible {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
  /* the pseudo-class for `:focus-visible` is implemented via the mixin */
  /* - The browser default focus ring should apply when these CSS custom properties are not set.
   * - Make the `box-shadow` value available, so components that have their own `box-shadow`
   *   can combine it with the focus ring box shadow.
   */
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}
.nijmegen-component-library-mapping .btn:hover:not(:disabled, [aria-disabled=true]) {
  background-color: var(--_utrecht-button-hover-background-color);
  border-color: var(--_utrecht-button-hover-border-color);
  color: var(--_utrecht-button-hover-color);
  scale: var(--utrecht-button-hover-scale, 1);
}
.nijmegen-component-library-mapping .btn:active:not(:disabled, [aria-disabled=true]) {
  background-color: var(--_utrecht-button-active-background-color);
  border-color: var(--_utrecht-button-active-border-color);
  color: var(--_utrecht-button-active-color);
}
.nijmegen-component-library-mapping .btn.btn-primary {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
}
.nijmegen-component-library-mapping .btn.btn-secondary {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
}