/* base setup */
/*
TODO:
- use CSS nesting after Samsung Internet supports it, and Safari < 16.5 usage has decreased enough. is there a css minifier that supports it?
- use :has (Firefox 120 has descreased enough)
- use some helper classes for repeating style rules to minimize code (eg .fx {display:flex})
- https://w3c.github.io/sustyweb/#adapt-to-user-preferences: use monochrome, prefers-contrast, prefers-color-scheme, prefers-reduced-data, prefers-reduced-transparency, and prefers-reduced-motion CSS preference queries
*/
/* using logical values for positioning (block-start, inline-end) instead of classic (top, right) increases total CSS size with ca 2-3% */
@font-face {
  font-family: Inter;
  src: url("/test/2023/res/font/inter-variable.woff2") format("woff2-variations");
  font-display: swap;
}
*, *::after, *::before {
  box-sizing: inherit;
}

/* remove margin for first and last child */
/* note that this won't work with hidden elements before or after! */
:first-child {
  margin-block-start: 0;
}

/*.richtext :last-child,*/
:last-child {
  margin-block-end: 0;
}

:focus-visible {
  outline: dashed 2px;
  outline-offset: 2px;
  border-radius: 1px;
}

a:hover {
  text-decoration: underline !important; /* for all links that got underline removed, like menus */
  /* this helps somewhat to distinguish between links and buttons, but still only on hover, and never on touchscreens */
}

html, body { /* collecting is shorter than including rules twice */
  min-height: 100%; /* setting height:100% actually limits the height of long pages, this causes sticky header to disappear */
}

html {
  box-sizing: border-box;
  background: var(--main-background);
  color: var(--main-color);
  font-family: Inter, serif;
  line-height: var(--line-height);
  /*overflow-wrap: break-word;*/ /* "break-word" breaks words only if they would go outside their box, "anywhere" breaks words to fit in the ideal space */
  overflow-wrap: anywhere; /* need more investigation, right now i don't see ANY wordbreaking on narrow windows with "break-word" */
  text-wrap: pretty; /* prevents single words on last line */
}

body {
  /*font-size: 112.5%;*/ /* 18px, but keeping 1rem = 16px, still means that 1em is related to 18px */
  margin: 0; /* required for height:100%, and to cover full page width */
  display: flex; /* for pushing footer to page bottom */
  flex-direction: column;
}

main {
  flex: 1; /* cover max area on short pages */
}

section {
  /* 	margin-inline: max(var(--page-pad), calc((100% - var(--max-content-size)) / 2)); */
  margin: 70px auto;
  max-width: var(--max-content-size);
  padding: 24px; /* not font-dependent */
}

@media (width > 1266px) { /* = max-content-width */
  section {
    border-radius: var(--box-radius);
  }
}
section.warning {
  padding-block: 8px;
}

@media (width > 768px) {
  section {
    padding: 32px; /* not font-dependent */
  }
}
section.warning {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--bold);
  line-height: 1.3;
  margin-inline-start: -0.05em; /* negative left margin for better alignment with normal text */
  orphans: 3;
  widows: 3;
  page-break-after: avoid;
  /*overflow-wrap: normal;*/ /* "break-word" works like "anywhere" in combination with text-wrap:balance? */
  /* needs more investigation */
}

h1 {
  font-size: 244%;
}

h2 {
  font-size: 150%;
  margin-block: 2em 0.5em;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: var(--link-color); /* was there a reason not to use the old code, .richtext a[href] ? */
  text-underline-offset: var(--stem);
  text-decoration-thickness: var(--stem);
}

a:hover {
  text-decoration-thickness: calc(1.5 * var(--stem));
}

label {
  cursor: pointer;
}

img, svg {
  max-inline-size: 100%; /* used with frontpage illustrations */
  height: auto;
}

svg:not([height="0"]) { /* Don't apply style to sprite collection, because those can't be overruled with <use>! */
  stroke-linecap: round;
  vector-effect: non-scaling-stroke; /* keep strokes same width, regardless of size */
}

svg * {
  vector-effect: inherit;
}

/*# sourceMappingURL=3-reset.css.map */