/* -------------------------------------------------------------------------- */
/*                               Root variables                               */
/* -------------------------------------------------------------------------- */
:root {
  /* Animaties */
  --animation-quick: 0.2s;
  --animation-default: 0.3s;

  /* Kleuren */
  --color-hva-blue: #351eb6;
  --color-hva-blue-secundary: #25167a;
  --color-hva-blue-secundary-enhanced: oklch(30.42% 0.156 278.44);
  --color-hva-navy: #1e1649;
  --color-hva-pink: #f25379;
  --color-hva-pink-enhanced: oklch(65.88% 0.257 9.82);
  --color-hva-yellow-contrast: #fff021;
  --color-hva-green: #02857d;
  --color-white: #ffffff;

  /* Waardes */
  --unit-micro: 0.25rem;
  --unit-small: 0.5rem;
  --unit-default: 1rem;
  --unit-large: 2rem;
  --input-font-large: 130%;
  --input-height-large: 150%;
}

/* -------------------------------------------------------------------------- */
/*                                    Reset                                   */
/* -------------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection {
  background-color: var(--color-hva-pink);
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* -------------------------------------------------------------------------- */
/*                                Font imports                                */
/* -------------------------------------------------------------------------- */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-VariableFont_wdth\,wght.ttf");
}

@font-face {
  font-family: "Open Sans Italic";
  src: url("../fonts/OpenSans-Italic-VariableFont_wdth\,wght.ttf");
}

/* -------------------------------------------------------------------------- */
/*                                 General CSS                                */
/* -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  background-color: var(--color-hva-blue);
  font-family: "Open Sans", sans-serif;
  color: var(--color-white);
  height: 100%;
}

a:focus-visible,
button:focus-visible {
  outline: inherit;
}

a {
  color: var(--color-white);
}

a,
button {
  cursor: pointer;
}

/* Typografie */
p {
  max-width: 30rem;
}

/* Filter instellingen */
.dropdown {
  display: none;
}
.visible {
  display: block;
}

/* Toegankelijkheid */
#fullScreen {
  display: none;
}

.javascriptEnabled #fullScreen {
  display: block;
}

[data-button-root] {
  padding: 0.9rem 1.8rem 0.9rem 2.3rem;
  border: none;
  background-color: var(--btn-color, #1e1649);
  color: var(--color-white, #ffffff);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
  cursor: pointer;
}

[data-button-root]:hover {
  background-color: var(--btn-hover-bg, #362e61);
}

[data-button-root]:focus {
  outline: var(--btn-focus, #f25379) solid 2px;
}

@media (min-width: 170rem) {
  [data-button-root] {
    font-size: 150%;
    height: 150%;
    width: 60%;
  }
}