/* Globel, reset */
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html *::before,
html *::after,
html * {
  box-sizing: inherit;
}

body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}

/* Add padding to the bottom of the page when the banner is active.
The height is dynamically calculated by the JavaScript and stored in the CSS variable. */
body.has-cookie-banner {
  padding-bottom: var(--cookie-banner-height);
}

/* Global focus styles - 2px */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
iframe:focus-visible,
[tabindex]:not([tabindex='-1']):focus-visible,
.splide.is-focus-in button.splide__arrow:focus-visible {
  outline: var(--spacing-2px) dashed var(--c-primary-orange);
  box-shadow: 0 0 0 var(--spacing-2px) var(--c-primary-light),
  0 0 0 var(--spacing-2px) var(--c-primary-light),
  0 0 0 var(--spacing-half) var(--c-primary-blue);
  outline-offset: var(--spacing-2px);
}

input,
textarea {
  border-radius: 0.25rem; /* 4px */
  border: var(--spacing-2px) solid var(--c-primary-dark);
}

/* Skip to main content link. */
.skip-to-main {
  display: block;
  width: 100vw;
  background: var(--c-primary-blue);

  .skip-link {
    width: fit-content;
    color: var(--c-primary-light);
    background: var(--c-primary-blue);
    top: 0.25rem; /* 4px */
  }

  .skip-link.focusable:focus-visible {
    width: fit-content;
    border: 0.125rem solid transparent;
    outline: 0.125rem dashed var(--c-primary-orange);
    box-shadow: 0 0 0 0.125rem var(--c-primary-blue);
  }

  .skip-link:hover {
    color: var(--c-primary-light);
  }
}

/* Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

.heading--display {
  font-size: var(--heading-display);
  line-height: 1;
}

p {
  /*color: var(--c-body-primary);*/
  color: inherit;
  font-size: var(--text-default);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.text--extra-large {
  font-size: var(--text-extra-large);
  line-height: 1.7;
}

.text--large {
  font-size: var(--text-large);
  line-height: 1.7;
}

.text--small {
  font-size: var(--text-small);
  line-height: 1.5;
}

.text--extra-small {
  font-size: var(--text-extra-small);
  line-height: 1.5;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Overwrites styles from olivero to prevent white space. */
div.region > *:where(:not([data-big-pipe-placeholder-id])) {
  margin-block-end: 0;
}

body .node__content {
  padding-block-end: 0;
}