/**
 * @file
 * Basisstijlen en huisstijltokens.
 */

:root {
  --tkd-blauw: #0b3c8a;
  --tkd-blauw-donker: #072a63;
  --tkd-blauw-licht: #e8eefb;
  --tkd-rood: #c8102e;
  --tkd-rood-licht: #fdeaed;
  --tkd-zwart: #1f1f1f;
  --tkd-wit: #ffffff;
  --tkd-grijs: #6b7280;
  --tkd-grijs-licht: #f4f5f7;
  --tkd-rand: #e2e5ea;
  --tkd-radius: 12px;
  --tkd-radius-klein: 8px;

  --tkd-lettertype: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tkd-grijs-licht);
  color: var(--tkd-zwart);
  font-family: var(--tkd-lettertype);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 .6rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

a {
  color: var(--tkd-blauw);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--tkd-blauw-donker);
}

img,
svg {
  max-width: 100%;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.tkd-skip {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: 0 0 var(--tkd-radius-klein) var(--tkd-radius-klein);
  background: var(--tkd-blauw);
  color: #fff;
  transition: top .15s ease;
}

.tkd-skip:focus {
  top: 0;
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--tkd-blauw);
  outline-offset: 2px;
}

/* Systeemmeldingen in de huisstijl. */

.messages {
  margin: 0 0 1.25rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--tkd-rand);
  border-left-width: 4px;
  border-radius: var(--tkd-radius-klein);
  background: #fff;
  line-height: 1.55;
}

.messages--status {
  border-left-color: #1f7a4c;
}

.messages--warning {
  border-left-color: #a45c00;
}

.messages--error {
  border-left-color: var(--tkd-rood);
  background: var(--tkd-rood-licht);
}

.messages a {
  color: inherit;
}

.messages__lijst {
  margin: 0;
  padding-left: 1.1rem;
}

.messages__item + .messages__item {
  margin-top: .3rem;
}

[data-drupal-messages]:empty {
  display: none;
}