/* ==========================================================================
   Baza: reset, typografia, dostępność, prymitywy układu.
   Selektory elementów w :where() (zerowa specyficzność), więc każda klasa komponentu wygrywa.
   Wyjątek: body bez :where(), bo edytor bloków ustawia krój regułą o specyficzności 0-0-1.
   ========================================================================== */

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

:where(html) {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-s));
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text-dark);
  font-family: var(--text-font-family);
  font-size: var(--text-m);
  line-height: var(--text-line-height);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

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

:where(h1, h2, h3, h4, h5, h6) {
  color: var(--heading-color);
  font-weight: 400;
  line-height: 1.2;
}

:where(img, svg, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(a) {
  color: var(--primary);
}

:where(a:hover) {
  color: var(--secondary-dark);
}

:where(address) {
  font-style: normal;
}

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

/* Dostępność */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  background: var(--primary);
  color: var(--text-light);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Prymitywy układu */
.container {
  width: min(100% - 2 * var(--gutter), var(--content-width));
  margin-inline: auto;
}

/* Odsłanianie przy przewijaniu (assets/js/reveal.js). Bez JS albo przy ograniczonym ruchu treść jest widoczna. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal [data-ndk-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s var(--transition-timing), transform 0.9s var(--transition-timing);
    transition-delay: calc(var(--reveal-order, 0) * 80ms);
  }

  .has-reveal [data-ndk-reveal="zoom"] {
    transform: scale(1.03);
    transition-duration: 1.2s;
  }

  .has-reveal [data-ndk-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  [data-ndk-reveal-order="1"] { --reveal-order: 1; }
  [data-ndk-reveal-order="2"] { --reveal-order: 2; }
  [data-ndk-reveal-order="3"] { --reveal-order: 3; }
  [data-ndk-reveal-order="4"] { --reveal-order: 4; }
}