/* ══════════════════════════════════════════════════════════════════════════
   EURICA — PAGINE DI CONTENUTO (22 settembre 2026)
   Foglio a sé, usato SOLO dalle pagine servite da content/_shell.html.
   Non è style.css (14.900 righe, tutte per l'app) e non è il CSS della
   landing (dentro landing.html, tarato su GSAP e sulle foto): qui serve
   una colonna di testo che si legge, e basta.
   I token vengono dal brand — se cambia un colore in eurica-brand-identity.md
   va cambiato qui, in style.css e nella landing. Sono tre posti, si sappia.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --violet:    #6A5AC7;
  --violet-h:  #5A4AB5;
  --lilac:     #C6BDFB;
  --night:     #1B1A1A;
  --night-2:   #211F20;
  --night-3:   #2A2728;
  --night-line:#3A3637;
  --cloud:     #F3EFEC;

  --paper:     #FAF7F4;
  --surface:   #FFFFFF;
  --ink:       #211F20;
  --ink-2:     #5A5452;
  --ink-3:     #7A726E;
  --line:      #E3DCD6;
  --on-violet: #F3EFEC;

  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px;
  --col: 46rem;               /* la colonna di lettura */
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   var(--night);
    --surface: var(--night-2);
    --ink:     var(--cloud);
    --ink-2:   #B8B1AE;
    --ink-3:   #8C8582;
    --line:    var(--night-line);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Urbanist, system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
}

/* ── Testata ──────────────────────────────────────────────────────────── */
.ct-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  max-width: calc(var(--col) + 8rem);
  margin: 0 auto; padding: 1.25rem 1.5rem;
}
.ct-nav a.ct-brand { display: inline-flex; align-items: center; }
.ct-nav img { display: block; height: 26px; width: auto; }

/* ── Bottoni ──────────────────────────────────────────────────────────── */
.ct-btn {
  display: inline-block;
  background: var(--violet); color: var(--on-violet);
  font: inherit; font-weight: 600; text-decoration: none;
  padding: .6rem 1.15rem; border-radius: 999px;
  transition: background .16s ease;
}
.ct-btn:hover { background: var(--violet-h); }
.ct-btn-lg { padding: .8rem 1.6rem; font-size: 1.0625rem; }

/* ── Corpo ────────────────────────────────────────────────────────────── */
main { max-width: var(--col); margin: 0 auto; padding: 1rem 1.5rem 4rem; }

/* Bricolage Regular sui titoli grandi: è la regola del brand (MEMORY,
   2026-09-15), non una svista. Il 700 vale solo sui titoletti h3. */
h1, h2 {
  font-family: 'Bricolage Grotesque', Urbanist, system-ui, sans-serif;
  font-weight: 400; line-height: 1.12; letter-spacing: -.015em;
  color: var(--ink); margin: 0 0 .75rem;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-top: 3rem; }
h3 {
  font-family: 'Bricolage Grotesque', Urbanist, system-ui, sans-serif;
  font-weight: 700; font-size: 1.1rem; margin: 2rem 0 .5rem;
}

.ct-lead { font-size: 1.2rem; color: var(--ink-2); margin: 0 0 2rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--violet); text-underline-offset: .18em; }
@media (prefers-color-scheme: dark) { a { color: var(--lilac); } }

ul, ol { padding-left: 1.3rem; margin: 0 0 1.1rem; }
li { margin-bottom: .45rem; }
strong { font-weight: 700; }

/* ── Tabelle (servono al confronto e a «cosa arriva dentro») ──────────── */
.ct-table-wrap { overflow-x: auto; margin: 0 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: .97rem; }
th, td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 700; color: var(--ink); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

/* ── Riquadro di richiamo ─────────────────────────────────────────────── */
.ct-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.4rem 1.5rem; margin: 2rem 0;
}
.ct-box h3 { margin-top: 0; }
.ct-box > :last-child { margin-bottom: 0; }

.ct-cta { text-align: center; margin: 3rem 0 0; }
.ct-cta .ct-fine { display: block; margin-top: .7rem; color: var(--ink-3); font-size: .95rem; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.ct-faq h3 { margin-bottom: .3rem; }

/* ── Piede ────────────────────────────────────────────────────────────── */
.ct-foot {
  border-top: 1px solid var(--line);
  max-width: calc(var(--col) + 8rem);
  margin: 0 auto; padding: 2rem 1.5rem 3rem;
  color: var(--ink-3); font-size: .95rem;
}
.pg-cols { display: flex; flex-wrap: wrap; gap: 1.5rem 4rem; margin-bottom: 1.5rem; }
.pg-col { display: flex; flex-direction: column; gap: .5rem; }
.pg-col h4 {
  margin: 0 0 .15rem; font-family: Urbanist, sans-serif; font-size: .75rem;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.pg-col a { font-size: .95rem; }
.ct-foot a { color: var(--ink-2); text-decoration: none; }
.ct-foot a:hover { color: var(--violet); text-decoration: underline; }
@media (prefers-color-scheme: dark) { .ct-foot a:hover { color: var(--lilac); } }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--violet); color: var(--on-violet);
  padding: .6rem 1rem; border-radius: var(--r);
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 10; }

/* ══════════════════════════════════════════════════════════════════════════
   MOCKUP — figure di prodotto disegnate in HTML, non screenshot.
   Stessa scelta della landing: restano nitidi, seguono chiaro e scuro e non
   invecchiano quando l'interfaccia cambia di un pixel. Sono ILLUSTRAZIONI:
   se un giorno servono prove vere (ricerca immagini) ci vogliono screenshot.
   Colori di categoria dal brand, pieni e con testo scuro sopra (--on-color):
   la regola «niente trasparenze» vale anche qui.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --cat-transport:     #8FCBF0;
  --cat-culture:       #C6BDFB;
  --cat-food:          #D5EE6E;
  --cat-leisure:       #F6A98C;
  --cat-accommodation: #F3C969;
  --on-color:          #141213;
  --todo:              #F57C00;
  --success:           #22C55E;
}

figure { margin: 2rem 0; }
figcaption { color: var(--ink-3); font-size: .93rem; margin-top: .7rem; }

.mk {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.2rem;
  font-size: .95rem; line-height: 1.45;
}
.mk-head {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 700; padding-bottom: .8rem; margin-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.mk-file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }

/* Esito dell'import: una riga per cosa è arrivato */
.mk-row { display: flex; gap: .6rem; align-items: baseline; padding: .28rem 0; }
.mk-tick { font-weight: 700; color: var(--success); }
.mk-warn { font-weight: 700; color: var(--todo); }
.mk-dim  { color: var(--ink-3); }

/* Timeline di un giorno: orario a sinistra, card della tappa a destra */
.mk-tl { display: grid; grid-template-columns: 3.6rem 1fr; gap: .1rem .9rem; }
.mk-h  { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: .88rem; padding-top: .55rem; }
.mk-stop {
  background: var(--c, var(--cat-culture)); color: var(--on-color);
  border-radius: var(--r); padding: .5rem .75rem; margin: .18rem 0;
}
.mk-stop b { display: block; font-weight: 700; }
.mk-stop span { font-size: .87rem; }
.mk-walk { grid-column: 2; color: var(--ink-3); font-size: .85rem; padding: .25rem 0 .25rem .2rem; }
.mk-gap  { grid-column: 1 / -1; height: .35rem; }

/* Tappa con il biglietto attaccato */
.mk-pdf {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .55rem .7rem; margin-top: .7rem;
}
.mk-pdf-tag {
  background: var(--violet); color: var(--on-violet);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  padding: .18rem .4rem; border-radius: 5px;
}
.mk-pdf-sub { color: var(--ink-3); font-size: .85rem; }

/* Blocco del prompt da copiare */
.ct-prompt {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.2rem; margin: 1.2rem 0 1.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88rem; line-height: 1.6; white-space: pre-wrap;
  overflow-x: auto;
}

/* Confronto a due colonne dentro un mockup (la lista contro i giorni) */
.mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
@media (max-width: 620px) { .mk-split { grid-template-columns: 1fr; } }
.mk-col h5 {
  margin: 0 0 .55rem; font-family: Urbanist, sans-serif; font-size: .72rem;
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
}
.mk-li { padding: .2rem 0; font-size: .92rem; }
.mk-daylabel {
  font-weight: 700; font-size: .82rem; margin: .55rem 0 .2rem; color: var(--ink-2);
}
.mk-daylabel:first-child { margin-top: 0; }
.mk-cut { color: var(--ink-3); text-decoration: line-through; }
/* Tratta a piedi: quella lunga si vede */
.mk-leg { display: flex; align-items: baseline; gap: .6rem; padding: .3rem 0; font-size: .92rem; }
.mk-leg .min { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 4.2rem; }
.mk-leg.is-long .min { color: var(--todo); }