/* Reset i zachowanie dokumentu. Typografia znajduje się w typography.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  margin: var(--space-0);
  color: var(--color-text);
  background: var(--color-surface);
  overflow-wrap: break-word;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol) {
  margin: var(--space-0);
}

:where(img, video) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(iframe) {
  max-inline-size: 100%;
}

:where(button, input, textarea, select) {
  font: inherit;
}

a {
  color: var(--color-link);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.screen-reader-text,
.c-contact-section__form .screen-reader-response,
.skip-link:not(:focus) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: var(--z-skip-link);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  background: var(--color-surface);
}