/* General */
* {
  padding: 0;
  margin: 0;
}

body {
  background-color: var(--color-page-background);
  font-size: 1rem;
}

main {
  color: var(--color-text);
  position: relative;
}

h1 {
  font-size: var(--font-size-xlarge);
  font-weight: 500;
}

h2 {
  font-size: 2rem;
  margin-bottom: var(--font-size-regular);
}

h2 + p {
  margin: 0;
  padding: 0;
}

/* Overwrite margin that's set elsewhere */
p {
  margin: 0;
}

strong {
  font-weight: 600;
}

:is(a, button, select):focus-visible {
  outline: 1.5px solid var(--focus-default);
  outline-offset: 1.5px;
  border-radius: 3px;
}

nav li:hover {
  background-color: transparent;
}

/* Hidden visually, but still accessible through screen readers/other AT */
.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Hidden for everyone */
.hidden {
  display: none;
}

.card {
  padding: 1.5rem;
  background: var(--color-card-background);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--card-shadow);
  transition: padding 0.35s;
}

.card > :is(h2, h3, h4) {
  margin-top: 0;
}

.card :is(h2, h3) {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.block-s {
  width: 50rem;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.block-m {
  width: 70rem;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

.block-l {
  width: 85rem;
  max-width: 98%;
  margin-left: auto;
  margin-right: auto;
}

.feedback {
  background-color: var(--color-card-background);
  padding: 4rem 0;
  border-top: 1px solid var(--color-card-border);
}

.feedback h2 {
  margin-top: 0;
}

.split-view {
  display: flex;
  column-gap: 0;
}

.split-view > .filters {
  background-color: var(--color-card-background);
  min-width: 20rem;
  width: 25rem;
  max-width: 100vw;
  position: relative;
  border-right: 1px solid var(--color-card-border);
}

.split-view:has(.filters.hidden) .page-content {
  width: 100%;
}