/* Global preferences */

*,
::before,
::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion:no-preference) {
  :root {
    scroll-behavior:smooth;
  }
}



/* Styles */

:root,
input,
textarea {
  font: normal normal 100%/1.333 OpenSans, Helvetica, Arial, sans-serif;
}

:focus-visible {
  outline: 2px dotted currentColor;
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  inline-size: 1px;
  block-size: 1px;
  word-wrap: normal;
}

/* Layout */

body {
  margin: 0;
  padding: 0;
}

header {
  border-block-end: 3px solid var(--wcag-main-color);
  padding: 2rem;
}

main {
  margin: 0 auto;
  max-inline-size: 45rem;
  padding: 2rem;
}

.layout_container {
  column-gap: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.inner_container {
  column-gap: 1rem;
  display: flex;
}

article {
  border-block-start: 1px dotted var(--wcag-main-color);
  margin-block-start: 3rem;
  padding-block-start: 1rem;
}

/* Text */

h1 {
  font-size: 3rem;
  font-weight: bold;
  margin: 2rem 0 1rem;
}

h2 {
  font-size: 2rem;
  font-weight: bold;
  margin: 1rem 0 .5rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 1rem 0 0;
}

h4 {
  font-size: 1.5rem;
  font-style: italic;
  font-weight: normal;
  margin: 1rem 0 0;
}

h5 {
  font-size: 1rem;
  font-style: italic;
  font-weight: normal;
  margin: 1rem 0 0;
}

a {
  color: #009;

  &:visited {
    color: #800080;
  }

  &:active {
    color: var(--wcag-support-color);
  }

  &:hover {
    color: #00f;
  }
}

img {
  display: block;
  max-inline-size: 100%;
}

.card__person {
  img {
    max-inline-size: 50%;
  }
}

.card__link {
  img {
    max-inline-size: 6rem;
  }
}

/* Forms */

form {
  margin: 2rem 0;

  p {
    margin: 0;
  }
}

.form_element + .form_element {
  margin-block: 2rem;
}

::placeholder {
  color: currentColor;
}

.input_radio_group {
  border: 0;
  display: block;
  padding: .5rem 0;
}

.label_vertical label,
legend {
  display: block;
}

.form_required {
  color: var(--wcag-support-color);
  font-weight: normal;
}

.form_instructie {
  /* font-size: smaller; */
  font-style: italic;
  margin-block-start: .5rem;
}

input {
  inline-size: 24rem;
  max-inline-size: 100%;
  padding: .5rem;

  &[type="checkbox"],
  &[type="radio"] {
    inline-size: auto;
  }

  &[type="date"],
  &[type="number"],
  &[type="submit"] {
    inline-size: 12rem;
  }
}

textarea {
  inline-size: 100%;
  min-block-size: 6rem;
  padding: .5rem;
}

/* Tables */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  font-style: italic;
  text-align: start;
}

td {
  border-bottom: 1px dotted gray;
  padding: .25rem 0 .25rem .5rem;
  text-align: end;
}

th {
  border-bottom: 1px solid gray;
  font-weight: bold;
  padding: .25rem 0;
  text-align: start;
  text-wrap-mode: nowrap;

  &:not([scope]) {
    font-weight: normal;
  }
}

.vertrektijden {
  tr:last-of-type td {
    border-block-end-style: solid;
  }
}

.treingegevens {
  background-color: #f9f9f9;
  font-style: italic;

  tr:first-of-type th {
    border: 0;
  }

  tr:last-of-type td {
    border-block-end-style: solid;
  }
}

tfoot,
.overstappen {
  background-color: #eee;

  td {
    border-block-end-style: solid;
  }

  th {
    font-weight: normal;
  }
}

thead {
  background-color: #eee;

  td {
    border-block-end-style: solid;
    border-block-start: 1px solid gray;
    text-align: center;
  }

  th {
    border-block-start: 1px solid gray;
    font-weight: normal;
  }
}

.overstappen {
  span {
    display: inline-block;
    transform: rotate(90deg);
  }

  td {
    padding-inline-end: .75rem;
  }
}