/* ==========================================================================
   Akademia Claude CFS — reset, typografia, układ
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--cfs-ink);
  background: var(--cfs-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--cfs-ink);
  margin: 0 0 var(--space-4);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

/* §2.2 — krótkie akapity, dużo światła */
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--cfs-green-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--cfs-ink); }

small, .small { font-size: var(--fs-small); line-height: var(--lh-small); }

strong { font-weight: 650; }

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--cfs-bg-soft);
  border: 1px solid var(--cfs-line);
  border-radius: 6px;
  padding: 1px 5px;
}

ul, ol { margin: 0 0 var(--space-4); padding-left: 1.35em; }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--cfs-line);
  margin: var(--space-8) 0;
}

/* --- Dostępność (§6) ------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--cfs-green);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: calc(var(--z-header) + 1);
  background: var(--cfs-ink);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: top var(--dur-base) var(--ease);
}
.skip-link:focus { top: var(--space-4); color: #fff; }

/* --- Układ ---------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Kolumna tekstu w lekcji (§4.5). Wyśrodkowana — dosunięta do lewej zostawiała
   pół ekranu pustki i strona sprawiała wrażenie, jakby nagle się zwężała. */
.measure { max-width: var(--measure); margin-inline: auto; }

/* Hero i nagłówki sekcji: ta sama kolumna, ale przy lewej krawędzi kontenera. */
.measure--left { margin-inline: 0; }

.section { padding-block: var(--space-12); }
.section--soft { background: var(--cfs-bg-soft); }
.section--tight { padding-block: var(--space-8); }

.stack > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }

.row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.muted { color: var(--cfs-muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

#app { min-height: 100vh; display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }

/* Widok wchodzi delikatnie — motion 120–240 ms (§2.4) */
.view-enter { animation: fade-up var(--dur-slow) var(--ease); }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view-enter { animation: none; }
}