/* ==========================================================================
   FocusAI Studio — style motywu (uzupełnienie CSS z projektu)
   Ładowane po assets/css/style.css.
   ========================================================================== */

/* Skalowanie rem z oryginalnego projektu (Canva): 12–16 px w zależności od szerokości. */
html {
  font-size: clamp(12px, 10.2241px + 0.4228vw, 16px);
  scroll-behavior: smooth;
}

/* Body: oryginał używał display:flow-root (inline), trzymamy to w CSS. */
body {
  display: flow-root;
}

/* Odtworzenie inline'owych stylów nawigacji z projektu (żeby markup był czysty). */
.site-nav > a,
.site-nav .menu-item > a {
  display: block;
  padding: 0.5rem 0;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: normal;
  white-space: pre-wrap;
  text-decoration: none;
}

.site-nav > a:hover,
.site-nav .menu-item > a:hover,
.site-nav > a:focus-visible,
.site-nav .menu-item > a:focus-visible {
  color: #48d4da;
}

@media (min-width: 1024px) {
  .site-nav > a,
  .site-nav .menu-item > a {
    padding: 0.25rem 0;
  }
}

/* Nazwa marki w nagłówku. */
.site-brand {
  color: rgb(245, 243, 236);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.025em;
  line-height: normal;
  white-space: pre-wrap;
}

/* Logo w nagłówku / stopce — oryginalne klasy Tailwinda zostają, to tylko bezpiecznik. */
.site-header img,
.site-footer img {
  max-width: none;
}