/* =============================================================================
 * petstories.app — stile dei quattro shell di root (indice + tre pagine legali).
 *
 * ⭐ I COLORI NON SONO SCELTI QUI: sono COPIATI da `mypet/mobile/src/theme/index.ts`.
 *    Fino al 2026-08-28 questo foglio usava un viola (`#7c3aed` / `#a78bfa`) che **non esiste in
 *    nessuna parte del prodotto** — non nell'app, non nella landing `/scarica` del backend, non sul
 *    biglietto da visita. Il sito era l'unica superficie che non somigliava a PetStories.
 *    Ora usa la palette `warm` (il default dell'app) e i valori vengono da `neutralPalettes.warm`
 *    e da `colors`: se lì cambiano, qui vanno ricopiati — non reinventati.
 *
 * ⛔ NIENTE WEBFONT, e non è un compromesso: `fontConfig` dell'app è `{ fontFamily: 'System' }`.
 *    Lo stack di sistema qui sotto **è** la tipografia dell'app. Un Google Font, oltre a pesare,
 *    sarebbe un host esterno: lo bloccherebbe il controllo 4 del guard e andrebbe dichiarato fra i
 *    sub-responsabili in §5.1 dell'informativa.
 * ========================================================================== */

:root {
  /* neutralPalettes.warm.light */
  --bg: #f4eee6;
  --surface: #ffffff;
  --surface-alt: #eae3db;
  --ink: #3a342e;
  --muted: #6e6357;
  --soft: #9c907f;
  --line: #e0d6c8;

  /* `colors` — brand. Il tema li dichiara BLOCCATI: non cambiano fra chiaro e scuro,
   * quindi non stanno nel blocco `prefers-color-scheme` qui sotto. */
  --coral: #f5a89a;
  --coral-strong: #e8847a;
  --teal: #7ecec8;

  /* 🔴 Il primo piano sul coral è SEMPRE inchiostro scuro, mai bianco, e non segue il tema.
   * Il coral del brand è chiaro: inchiostro sopra dà 6,4:1, bianco 1,9:1 — sotto qualunque soglia.
   * Se questo token seguisse il tema, in scuro diventerebbe chiaro e il pulsante attivo del
   * selettore di lingua risulterebbe illeggibile. È il difetto che il vecchio foglio aveva
   * (`color: white` sul primary), e che qui non può ripresentarsi. */
  --on-coral: #3a342e;

  --max-width: 780px;
  /* `borderRadius.xl` / `.lg` del tema (16 / 12). */
  --radius: 16px;
  --radius-sm: 12px;

  /* Dalla scala `shadows` del tema: colore #2D2D2D, opacità 0.06 / 0.10 / 0.14,
   * offset 1/2/4, raggio 2/6/12. Tradotte in CSS, non stimate. */
  --shadow-xs: 0 1px 2px rgba(45, 45, 45, 0.06);
  --shadow-sm: 0 2px 6px rgba(45, 45, 45, 0.1);
  --shadow-md: 0 4px 12px rgba(45, 45, 45, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* neutralPalettes.warm.dark — NON un grigio neutro: è un bruno caldo, come nell'app. */
    --bg: #1c1a17;
    --surface: #242220;
    --surface-alt: #2b2824;
    --ink: #f2eae0;
    --muted: #b8ac9f;
    --soft: #7d7366;
    --line: #3a342e;
    /* Le ombre non si vedono su fondo scuro: la definizione la porta `--line` sui bordi.
     * Restano dichiarate perché innocue e perché la regola che le usa è una sola. */
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, Helvetica, Arial,
    sans-serif;
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 24px;
}

/* === Header === */
.site-header {
  text-align: center;
  margin-bottom: 40px;
}

/* Il marchio è un'IMMAGINE, in due varianti di tema (vedi il `<picture>` in index.html).
 * Non è ricolorabile via CSS: «Pet» è coral e «STORIES» è inchiostro o bianco a seconda del
 * fondo, e nessun `filter` trasforma l'una nell'altra senza ALTERARE un marchio.
 * ⚠️ Il coral del logo (#ff9682) non è identico a `--coral` (#f5a89a): la stessa differenza
 * esiste nell'app, dove il marchio è un asset e il token è un colore d'interfaccia. Non è un
 * disallineamento da «correggere» ritoccando il logo. */
.site-title {
  margin: 0;
  line-height: 0;
}

.site-title img {
  width: 220px;
  max-width: 68%;
  height: auto;
  display: inline-block;
}

.site-header .tagline {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}

/* Filo coral sotto l'intestazione: l'unico accento cromatico della pagina, lo stesso stilema
 * della landing `/scarica`. Decorativo, quindi `aria-hidden` non serve: è uno pseudo-elemento. */
.site-header::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin: 24px auto 0;
  border-radius: 2px;
  background: var(--coral);
}

/* === Titoli di sezione ===
 * L'indice ha DUE sezioni («Scarica l'app» e «Documenti legali»). In inchiostro, non nel colore
 * d'accento: il coral su fondo chiaro non arriva a 3:1 e come testo non si usa. */
.section-title {
  margin: 0 0 16px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* === Sezione download === */
.download-card {
  padding: 24px;
  margin-bottom: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.download__lede {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 0.95rem;
}

/* `line-height: 0` sull'ancora: senza, il discendente della riga aggiunge qualche pixel sotto
 * l'immagine e i due badge risultano disallineati sulla base.
 * `flex-wrap` è la rete di sicurezza: alle misure calcolate sotto non serve mai. */
.download__stores {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.download__stores a {
  display: block;
  line-height: 0;
}

.download__badge {
  display: block;
  width: auto;
}

/* ⛔ I BADGE NON SI RESTILIZZANO. Sono marchi di Apple e Google: niente cornici, niente fondi,
 * niente filtri, nessun adattamento al tema. Sono un plate #040707 con bordo #a6a6a6 e si leggono
 * su entrambi i fondi (misurato: ~7,2:1 di bordo contro il #1c1a17 del tema scuro).
 * Le due altezze NON coincidono di proposito: il PNG di Google incorpora il proprio spazio di
 * rispetto (visibile 646×192 in un file 646×250), l'SVG di Apple no. Pareggiano il risultato
 * OTTICO, e sono gli stessi 46/56 di `/scarica` e del biglietto: una misura sola, tre superfici. */
.download__badge--apple {
  height: 46px;
}

.download__badge--google {
  height: 56px;
}

/* === Card dei documenti === */
.legal-links {
  display: grid;
  gap: 16px;
  margin-bottom: 48px;
}

/* ⚠️ IL PADDING DESTRO È 56px, NON 24: la freccia è in posizione assoluta a `right: 24px` ed è
 * larga ~24. Con un padding uniforme il testo le finiva SOTTO — a 360px in modo visibile, e il box
 * del paragrafo la sforava di 21px a QUALUNQUE larghezza (misurato a 360, 414, 640, 1200 sulla
 * pagina live). Era un difetto presente da quando esistono le card: si è visto la prima volta che
 * qualcuno ha guardato questa pagina a 360px. */
.legal-card {
  display: block;
  padding: 24px 56px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.legal-card:hover {
  background: var(--surface-alt);
  border-color: var(--coral);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* `h3` e non `h2`: sopra c'è il titolo di sezione «Documenti legali», e i livelli non si saltano.
 * In inchiostro, non nel colore d'accento — l'affordance di link la portano la freccia, il bordo
 * coral in hover e il sollevamento. */
.legal-card h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
}

.legal-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.legal-card .arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--coral-strong);
  font-size: 1.5rem;
  opacity: 0.85;
}

.legal-card:hover .arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(4px);
}

/* === Intestazione dei documenti (le tre pagine legali) ===
 * ⚠️ `flex-direction: column` con un `gap`, e NON due margini. Prima il link «Torna all'indice» e
 * il selettore di lingua erano due `inline-flex` dentro un `div`: finivano sulla STESSA riga,
 * appiccicati, e il `margin-bottom: 16px` del link — che dice chiaramente quale fosse l'intento —
 * non produceva nulla, perché su un elemento in linea quel margine non separa le due righe. Una
 * dichiarazione inerte è peggio di una assente: sembra che la spaziatura ci sia. */
.doc-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.doc-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.doc-header .back-link:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--coral);
}

.doc-header .lang-toggle {
  display: inline-flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.doc-header .lang-toggle button {
  background: transparent;
  border: none;
  padding: 6px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}

/* 🔴 `--on-coral`, NON `--ink` e NON `white`. Vedi la nota su quel token: in tema scuro `--ink`
 * diventa chiaro e questo pulsante sarebbe illeggibile; `white` non passa il contrasto in nessuno
 * dei due temi. Il coral non segue il tema, e nemmeno il suo primo piano. */
.doc-header .lang-toggle button.active {
  background: var(--coral);
  color: var(--on-coral);
  font-weight: 600;
}

.doc-header .lang-toggle button:not(.active):hover {
  background: var(--surface-alt);
  color: var(--ink);
}

/* === Contenuto (markdown reso) === */
#content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

#content h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--ink);
}

#content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 40px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

#content h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--ink);
}

#content h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 24px 0 8px;
  color: var(--ink);
}

#content p {
  margin: 12px 0;
}

/* I link del testo restano in INCHIOSTRO con sottolineatura CORAL: né il coral né il teal, come
 * testo, arrivano a 4,5:1 su fondo chiaro (2,6:1 e 2,4:1 — calcolati). L'accento sta nella
 * sottolineatura, che è decorativa; la leggibilità resta quella dell'inchiostro. */
#content a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

#content a:hover {
  text-decoration-color: var(--coral-strong);
}

#content blockquote {
  margin: 16px 0;
  padding: 12px 20px;
  border-left: 3px solid var(--coral);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--muted);
  font-style: italic;
}

#content ul,
#content ol {
  padding-left: 28px;
  margin: 12px 0;
}

#content li {
  margin: 6px 0;
}

#content code {
  font-family: 'SF Mono', Consolas, 'Courier New', monospace;
  font-size: 0.9em;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}

#content table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.9rem;
}

#content th,
#content td {
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--line);
}

#content th {
  background: var(--surface-alt);
  font-weight: 600;
  color: var(--ink);
}

#content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 32px 0;
}

#content strong {
  color: var(--ink);
}

/* === Footer === */
.site-footer {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--coral);
}

.site-footer a:hover {
  text-decoration-color: var(--coral-strong);
}

.site-footer .meta {
  font-size: 0.8rem;
  margin-top: 8px;
  opacity: 0.7;
}

/* === Stato di caricamento === */
.loading {
  text-align: center;
  padding: 48px 0;
  color: var(--soft);
}

/* === Mobile === */
@media (max-width: 640px) {
  .container {
    padding: 32px 16px;
  }

  .site-title img {
    width: 180px;
  }

  #content h1 {
    font-size: 1.6rem;
  }

  #content h2 {
    font-size: 1.3rem;
  }

  #content table {
    font-size: 0.85rem;
  }

  #content th,
  #content td {
    padding: 8px;
  }
}

/* === Telefoni stretti ===
 * DEVE stare DOPO il blocco 640px: sotto i 480px valgono entrambi, hanno la stessa specificità,
 * e vince l'ultimo scritto.
 *
 * I numeri sono MISURATI al render. Lo spazio utile dentro la card non è (viewport − padding):
 * `box-sizing: border-box` più `border: 1px` sottraggono DUE pixel che è facilissimo dimenticare —
 * ed è per quei due pixel che la prima stesura faceva andare a capo i badge a 320px, per ZERO
 * VIRGOLA 28 di pixel.
 * A 40/49 con gap 8 la riga misura 254,27px; con padding 12 lo spazio utile a 320px è 262px.
 * Sotto i 320px `flex-wrap` li impila, ed è il ripiego giusto: due badge leggibili uno sopra
 * l'altro valgono più di due schiacciati, e rimpicciolire l'artwork ufficiale è proprio ciò che le
 * linee guida di Apple e Google chiedono di evitare. */
@media (max-width: 480px) {
  .download-card {
    padding: 12px;
  }

  .download__stores {
    gap: 8px;
  }

  .download__badge--apple {
    height: 40px;
  }

  .download__badge--google {
    height: 49px;
  }

  /* La freccia resta a `right: 24px`: il padding destro scende, ma non sotto lo spazio che le
   * serve, altrimenti torna il difetto che questo foglio ha appena chiuso. */
  .legal-card {
    padding: 20px 52px 20px 20px;
  }
}