/*
 * gat.to: tema delle pagine pubbliche (settembre 2026).
 * Colori del brand: viola #91278d e azzurro #00aef0. Modalità scura automatica, font di sistema,
 * layout responsive senza JavaScript.
 */

:root {
  --viola: #91278d;
  --viola-scuro: #751f72;
  --viola-tenue: #f6e9f5;
  --azzurro: #00aef0;
  --azzurro-testo: #00739f;
  --pulsante: #91278d;
  --pulsante-sopra: #751f72;
  --pulsante-testo: #ffffff;
  --sfondo: #f5fbff;
  --sfondo-alto: #dbf5ff;
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --bordo: #d5dae1;
  --testo: #1d1b20;
  --testo-tenue: #5b5763;
  --errore: #b42318;
  --errore-sfondo: #fdecea;
  --successo: #1f7a3d;
  --successo-sfondo: #e7f5ec;
  --avviso: #9a5b00;
  --avviso-sfondo: #fff4e0;
  --info: #00739f;
  --info-sfondo: #e5f6fd;
  --ombra: 0 12px 32px rgb(40 20 60 / 0.08), 0 2px 6px rgb(40 20 60 / 0.06);
  --raggio: 18px;
  --raggio-piccolo: 10px;
  --larghezza: 62rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --viola: #e19bdc;
    --viola-scuro: #cf7fca;
    --viola-tenue: #3a2438;
    --azzurro: #4fcaff;
    --azzurro-testo: #86dbff;
    --pulsante: #a33a9f;
    --pulsante-sopra: #b84cb4;
    --sfondo: #121016;
    --sfondo-alto: #1c1a27;
    --superficie: #1f1c24;
    --superficie-2: #29252f;
    --bordo: #3d3844;
    --testo: #eeeaf2;
    --testo-tenue: #b8b1c0;
    --errore: #ff9a8f;
    --errore-sfondo: #3b1f1d;
    --successo: #7fd89c;
    --successo-sfondo: #1b3324;
    --avviso: #ffc46b;
    --avviso-sfondo: #3a2c14;
    --info: #86dbff;
    --info-sfondo: #15303c;
    --ombra: 0 12px 32px rgb(0 0 0 / 0.4);
  }
}

/* Base */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--sfondo-alto) 0, var(--sfondo) 32rem) no-repeat, var(--sfondo);
  color: var(--testo);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--viola);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--azzurro-testo);
}

:focus-visible {
  outline: 3px solid var(--azzurro);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  color: var(--viola);
  line-height: 1.25;
  margin: 1.6em 0 0.6em;
}

h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  text-align: center;
  margin-top: 0.4em;
}

h2 {
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
}

h3 {
  font-size: 1.2rem;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

code {
  font-size: 0.95em;
  background: var(--superficie-2);
  border-radius: 6px;
  padding: 0.05em 0.35em;
  word-break: break-word;
}

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

.gatto-salta {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  background: var(--pulsante);
  color: var(--pulsante-testo);
  padding: 0.6rem 1rem;
  border-radius: var(--raggio-piccolo);
}

.gatto-salta:focus {
  top: 1rem;
  color: var(--pulsante-testo);
}

/* Struttura */

.gatto-contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 1rem;
}

.gatto-testata {
  padding: 1.25rem 0 0.25rem;
  text-align: center;
}

.gatto-marchio {
  display: inline-block;
}

.gatto-marchio img {
  width: min(260px, 70vw);
}

.gatto-principale {
  flex: 1 0 auto;
  padding: 0.5rem 0 3rem;
}

.gatto-testo,
.gatto-scheda {
  background: var(--superficie);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  margin: 0 0 1.5rem;
}

.gatto-testo > :first-child,
.gatto-scheda > :first-child {
  margin-top: 0;
}

.gatto-testo > :last-child,
.gatto-scheda > :last-child {
  margin-bottom: 0;
}

.gatto-testo img {
  border-radius: var(--raggio-piccolo);
}

.gatto-centro {
  text-align: center;
}

.gatto-piccolo {
  font-size: 0.9rem;
  color: var(--testo-tenue);
}

.gatto-piede {
  border-top: 1px solid var(--bordo);
  padding: 1.5rem 0 2rem;
  text-align: center;
  font-size: 0.95rem;
  color: var(--testo-tenue);
}

.gatto-menu {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
}

.gatto-menu a[aria-current="page"] {
  font-weight: 700;
  text-decoration: none;
}

.gatto-copyright,
.gatto-nota {
  margin: 0.25rem 0;
}

.gatto-nota {
  font-size: 0.85rem;
}

/* Moduli */

.gatto-campo {
  margin: 0 0 1.1rem;
}

.gatto-campo > label,
.gatto-etichetta {
  display: block;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.gatto-obbligatorio {
  color: var(--errore);
}

input[type="text"],
input[type="email"],
input[type="url"],
textarea {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  color: var(--testo);
  background: var(--superficie-2);
  border: 2px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
  padding: 0.75rem 0.95rem;
  transition: border-color 0.15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
textarea:focus {
  border-color: var(--viola);
  outline: 3px solid color-mix(in srgb, var(--viola) 25%, transparent);
  outline-offset: 0;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

[aria-invalid="true"] {
  border-color: var(--errore) !important;
}

.gatto-errore-campo {
  color: var(--errore);
  font-size: 0.95rem;
  margin-top: 0.3rem;
}

.gatto-spunta {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
}

.gatto-spunta input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--pulsante);
}

.gatto-pulsante,
button.gatto-pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pulsante-testo);
  background: var(--pulsante);
  border: 2px solid var(--pulsante);
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.gatto-pulsante:hover {
  color: var(--pulsante-testo);
  background: var(--pulsante-sopra);
  border-color: var(--pulsante-sopra);
}

.gatto-pulsante:active {
  transform: translateY(1px);
}

.gatto-pulsante:disabled {
  opacity: 0.65;
  cursor: progress;
}

.gatto-pulsante-secondario,
button.gatto-pulsante-secondario {
  color: var(--viola);
  background: transparent;
  border-color: currentColor;
}

.gatto-pulsante-secondario:hover {
  color: var(--pulsante-testo);
  background: var(--pulsante);
  border-color: var(--pulsante);
}

.gatto-copiato {
  background: var(--successo) !important;
  border-color: var(--successo) !important;
}

.gatto-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

altcha-widget {
  display: block;
  margin: 0 0 1.1rem;
  --altcha-max-width: 100%;
  --altcha-border-radius: var(--raggio-piccolo);
  --altcha-border-color: var(--bordo);
  --altcha-color-base: var(--superficie-2);
  --altcha-color-base-content: var(--testo);
  --altcha-color-primary: var(--pulsante);
  --altcha-color-primary-content: #ffffff;
  --altcha-color-error: var(--errore);
  --altcha-color-success: var(--successo);
  --altcha-checkbox-border-color: var(--bordo);
}

/* Messaggi */

.gatto-messaggio {
  border-left: 5px solid var(--info);
  background: var(--info-sfondo);
  border-radius: var(--raggio-piccolo);
  padding: 0.85rem 1.1rem;
  margin: 0 0 1.25rem;
}

.gatto-messaggio-errore {
  border-color: var(--errore);
  background: var(--errore-sfondo);
}

.gatto-messaggio-successo {
  border-color: var(--successo);
  background: var(--successo-sfondo);
}

.gatto-messaggio-avviso {
  border-color: var(--avviso);
  background: var(--avviso-sfondo);
}

/* Home */

.gatto-eroe {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.gatto-logo-grande {
  margin: 0;
  font-size: 1rem;
  line-height: 1;
}

.gatto-logo-grande img {
  width: min(560px, 92vw);
}

.gatto-slogan {
  color: var(--viola);
  font-size: clamp(1.15rem, 3vw, 1.4rem);
  font-weight: 700;
  margin: 0.4rem 0 1.25rem;
}

.gatto-passi {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  font-weight: 700;
  font-size: 1.1rem;
}

.gatto-passi li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gatto-passi img {
  width: 30px;
  height: 30px;
}

.gatto-modulo-link {
  max-width: 46rem;
  margin: 0 auto 1.5rem;
}

.gatto-riga-url {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.gatto-riga-url input {
  flex: 1 1 18rem;
  font-size: 1.15rem;
  padding: 0.85rem 1rem;
}

.gatto-riga-url .gatto-pulsante {
  flex: 0 0 auto;
}

.gatto-scopri {
  text-align: center;
  font-weight: 700;
}

/* Risultato */

.gatto-risultato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2rem;
  align-items: start;
}

.gatto-link-corto input {
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 700;
  color: var(--viola);
  text-align: center;
  margin-bottom: 0.75rem;
}

.gatto-esito-copia {
  min-height: 1.6em;
  margin: 0.4rem 0 0;
  color: var(--successo);
  font-weight: 700;
}

.gatto-qr {
  margin: 0;
  text-align: center;
}

.gatto-qr a {
  display: inline-block;
  background: #ffffff;
  border-radius: var(--raggio-piccolo);
  padding: 0.5rem;
  box-shadow: var(--ombra);
  line-height: 0;
}

.gatto-qr svg {
  width: 210px;
  height: 210px;
}

.gatto-qr figcaption {
  font-size: 0.9rem;
  color: var(--testo-tenue);
  margin-top: 0.5rem;
}

.gatto-originale {
  word-break: break-all;
  color: var(--testo-tenue);
  font-size: 0.95rem;
}

.gatto-avvisi {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

@media (max-width: 40rem) {
  .gatto-risultato {
    grid-template-columns: minmax(0, 1fr);
  }

  .gatto-riga-url .gatto-pulsante {
    flex: 1 1 100%;
  }
}

/* Pagina 404 */

.gatto-box {
  margin-top: 2rem;
}

.gatto-box h2 {
  margin-top: 0;
}

.gatto-box-elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1rem;
}

.gatto-box-voce a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--superficie-2);
  border-radius: var(--raggio-piccolo);
  overflow: hidden;
  color: var(--testo);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.gatto-box-voce a:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombra);
}

.gatto-box-voce img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 0;
}

.gatto-box-titolo {
  padding: 0.6rem 0.8rem 0.3rem;
  font-weight: 600;
  line-height: 1.35;
}

.gatto-box-dettaglio {
  padding: 0 0.8rem 0.7rem;
  margin-top: auto;
  color: var(--viola);
  font-weight: 700;
  font-size: 0.95rem;
}

/* Pagina intermedia di Amazon */

.gatto-amazon {
  text-align: center;
}

.gatto-amazon-dominio {
  font-size: 1.6rem;
  margin: 0.5rem 0;
}

.gatto-amazon-indirizzo {
  word-break: break-all;
  color: var(--testo-tenue);
}

.gatto-amazon-avviso {
  font-weight: 600;
  margin: 1.5rem 0 1rem;
}

/* Informazioni */

.gatto-confronto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.gatto-confronto > div {
  background: var(--superficie-2);
  border-radius: var(--raggio-piccolo);
  padding: 1rem 1.25rem;
}

.gatto-confronto ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.gatto-confronto li {
  position: relative;
  padding-left: 1.8rem;
  margin: 0.45rem 0;
  word-break: break-word;
}

.gatto-confronto li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}

.gatto-si li::before {
  content: "✓";
  color: var(--successo);
}

.gatto-no li::before {
  content: "✗";
  color: var(--errore);
}

.gatto-esempio {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  word-break: break-all;
}

.gatto-figura {
  margin: 1rem 0 1.5rem;
  text-align: center;
}

.gatto-data {
  text-align: center;
  font-size: 0.9rem;
  color: var(--testo-tenue);
}

.gatto-annuncio {
  margin: 1.5rem 0;
  text-align: center;
  overflow: hidden;
}

/* Modalità scura: i loghi hanno parti scure, restano su un fondo chiaro */

@media (prefers-color-scheme: dark) {
  .gatto-marchio img,
  .gatto-logo-grande img {
    background: #f5fbff;
    border-radius: 22px;
    padding: 0.4rem 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}