/* ==========================================================================
   base.css — Stili degli elementi HTML, focus, utility di accessibilità
   ========================================================================== */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Compensa l'header sticky: il focus non resta coperto (WCAG 2.4.11) */
    scroll-padding-top: 5rem;
  }
  /* Scroll fluido nativo: sostituisce jQuery + scrollTo + localScroll */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    font-family: var(--font-body);
    font-size: var(--fs-0);
    line-height: 1.65;
    color: var(--c-ink);
    background: var(--c-bg);
  }
  main { flex: 1; }

  h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
  p { max-width: 65ch; text-wrap: pretty; }
  p + p { margin-top: 1em; }

  a { color: var(--c-link); text-underline-offset: 0.2em; }
  a:hover { text-decoration-thickness: 2px; }

  /* Focus sempre visibile, contrasto ≥ 3:1 */
  :focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 2px; }
  /* Sulle superfici scure il focus diventa giallo */
  .on-dark { --c-focus: #ffe066; }

  ::selection { background: var(--c-brand); color: var(--c-brand-ink); }

  /* Testo solo per screen reader */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Skip link (WCAG 2.4.1) */
  .skip-link {
    position: absolute; left: 1rem; top: -5rem; z-index: 100;
    padding: 0.75rem 1rem; border-radius: var(--radius);
    background: var(--c-brand); color: var(--c-brand-ink); font-weight: 700;
  }
  .skip-link:focus { top: 1rem; }
}