/* Visual theme: fresh green, rounded corners, tactile buttons, numbered steps.
   Loaded AFTER assets/stile.css (which owns the page layout). System fonts only, no external resources. */

:root {
  /* palette: one guiding green, a warm accent, a cool accent, soft neutrals */
  --tema-verde: #2e8b1a;
  --tema-verde-scuro: #1d5c0f;
  --tema-verde-profondo: #12381a;
  --tema-verde-chiaro: #e3f5dc;
  --tema-accento-caldo: #cf6a12; /* >= 3:1 on white and on the page background (graphic elements) */
  --tema-accento-freddo: #2a8fd6;
  --tema-neutro-chiaro: #f6f8f4;
  --tema-neutro-medio: #cfd6cb;
  --tema-neutro-scuro: #2b322a;
  --tema-testo: #1f2a1e;
  --tema-testo-attenuato: #4a5748;
  --tema-sfondo: #f1f6ee;
  --tema-ombra: 0 1px 2px rgba(18, 56, 26, 0.08), 0 8px 24px rgba(18, 56, 26, 0.08);

  /* button colours (text/background contrast checked by tests/tema.test.sh) */
  --tema-bottone-sfondo: #2e7d18;
  --tema-bottone-bordo: #1d5c0f;
  --tema-bottone-testo: #ffffff;

  /* corner radius: must stay >= 16px, never a pill */
  --tema-raggio: 18px;
  --tema-bordo-3d: 5px;
  --tema-font:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

.btn-3d {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.5rem;
  min-height: 3rem;
  font-family: var(--tema-font);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tema-bottone-testo);
  background: var(--tema-bottone-sfondo);
  border: 0 solid transparent;
  border-bottom: var(--tema-bordo-3d) solid var(--tema-bottone-bordo);
  border-radius: var(--tema-raggio);
  box-shadow: 0 6px 16px rgba(29, 92, 15, 0.25);
  cursor: pointer;
}

.btn-3d:hover {
  color: var(--tema-bottone-testo);
  filter: brightness(1.1);
}

.btn-3d:active {
  border-bottom-width: 1px;
  transform: translateY(4px);
  box-shadow: none;
}

.btn-3d:focus-visible {
  outline: 3px solid var(--tema-accento-freddo);
  outline-offset: 3px;
}

.card-tema {
  padding: 1.5rem;
  color: var(--tema-testo);
  background: #ffffff;
  border: 1px solid var(--tema-neutro-medio);
  border-bottom: 5px solid var(--tema-neutro-medio);
  border-radius: var(--tema-raggio);
  box-shadow: var(--tema-ombra);
}

.card-tema h2,
.card-tema h3 {
  margin-top: 0;
  color: var(--tema-verde-scuro);
}

.tappe {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tappa;
}

.tappe > li {
  position: relative;
  min-height: 2.75rem;
  margin: 0 0 1.1rem;
  padding: 0.5rem 0 0 3.5rem;
  counter-increment: tappa;
}

.tappe > li::before {
  content: counter(tappa);
  position: absolute;
  top: 0;
  left: 0;
  width: 2.75rem;
  height: 2.75rem;
  line-height: 2.75rem;
  font-weight: 800;
  text-align: center;
  color: #ffffff;
  background: var(--tema-accento-freddo);
  border-bottom: 4px solid rgba(0, 0, 0, 0.25);
  border-radius: 14px;
}

.tappe > li.fatta::before {
  background: var(--tema-verde);
  border-bottom-color: var(--tema-verde-scuro);
}

.serie {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tema-neutro-scuro);
  background: #fde3c8;
  border-bottom: 3px solid var(--tema-accento-caldo);
  border-radius: 12px;
}

.evidenza {
  color: var(--tema-verde);
}

.btn-secondario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.5rem;
  min-height: 3rem;
  font-family: var(--tema-font);
  font-weight: 700;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tema-verde-scuro);
  background: #ffffff;
  border: 2px solid var(--tema-verde);
  border-bottom: var(--tema-bordo-3d) solid var(--tema-verde);
  border-radius: var(--tema-raggio);
}

.btn-secondario:hover {
  background: var(--tema-verde-chiaro);
}

.btn-secondario:focus-visible {
  outline: 3px solid var(--tema-accento-freddo);
  outline-offset: 3px;
}

.badge {
  padding: 0.35rem 0.9rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--tema-verde-profondo);
  background: #ffffff;
  border: 1px solid var(--tema-neutro-medio);
  border-bottom: 3px solid var(--tema-verde);
  border-radius: 12px;
}

.badge a {
  color: inherit;
  text-decoration: none;
}

.badge a:hover {
  text-decoration: underline;
}

.badge-stelle {
  color: #b45309; /* stars: 5:1 on white, orange tone */
}

.riquadro-caldo {
  border-bottom-color: var(--tema-accento-caldo);
}

.riquadro-freddo {
  border-bottom-color: var(--tema-accento-freddo);
}

.riquadro-verde {
  border-bottom-color: var(--tema-verde);
}

.riquadro-neutro {
  border-bottom-color: var(--tema-neutro-scuro);
}

.fumetto {
  margin: 0;
  padding: 0.5rem 0.9rem;
  font-weight: 700;
  color: var(--tema-neutro-scuro);
  background: #ffffff;
  border: 2px solid var(--tema-neutro-medio);
  border-radius: 14px;
}

.mascotte {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .btn-3d,
  .btn-secondario {
    transition:
      transform 0.08s ease,
      border-bottom-width 0.08s ease,
      background-color 0.15s ease,
      filter 0.15s ease;
  }
}