/* =========================================================================
   Passeggiata in Rosa — base.css
   Design system: variabili, reset, tipografia, bottoni, motivo "strada".
   Fonte unica dei valori: non scrivere colori/spaziature a mano altrove.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. FONT — self-hosted, nessuna CDN. Variable font: un file per famiglia.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   2. VARIABILI
   ------------------------------------------------------------------------- */

:root {
  /* --- Colori brand (dal logo vettoriale) --- */
  --rosa: #ed6ea7;          /* rosa del logo — DECORATIVO: 2.8:1 su bianco,
                               non usarlo per testo o icone informative */
  --grigio: #706f6f;        /* grigio del logo — la "strada"; 5.0:1 su bianco */

  /* --- Varianti accessibili del rosa (per testo, link, bottoni) --- */
  --rosa-testo: #bf2268;    /* 5.8:1 su bianco — AA testo normale */
  --rosa-scuro: #a51d5a;    /* 7.2:1 su bianco — hover / stati premuti */
  --rosa-tenue: #fbe4ee;    /* fondi e riempimenti tenui */
  --rosa-velo: #fdf3f7;     /* fondo sezione alternata */

  /* --- Neutri --- */
  --testo: #383737;         /* 11.9:1 — testo corrente */
  --testo-tenue: #6b6768;   /* 5.4:1 — testo secondario, didascalie */
  --bordo: #e9e2e5;
  --sfondo: #ffffff;
  --sfondo-alt: #fdf9fa;
  --scuro: #6b1234;         /* bordeaux: fondo scuro brandizzato (footer, sezioni scure) */
  --rosa-chiaro: #f8a6c8;   /* rosa per testo e bottoni SUL fondo scuro: 6,4:1 */

  /* --- Stati --- */
  --errore: #b3261e;
  --successo: #1f7a52;

  /* --- Tipografia --- */
  --font-titoli: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-testo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

  /* Scala fluida mobile-first: il minimo vale a 360px, il massimo a ~1200px */
  --t-xs: 0.8125rem;
  --t-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --t-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --t-2xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.75rem);
  --t-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 4rem);
  --t-4xl: clamp(2.75rem, 1.9rem + 4vw, 5.5rem);

  --lh-stretta: 1.08;
  --lh-titolo: 1.18;
  --lh-media: 1.4;
  --lh-testo: 1.65;

  /* --- Spaziature (scala 4px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- Raggi --- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Ombre (tinte di prugna, mai nero puro) --- */
  --ombra-1: 0 1px 2px rgba(59, 42, 50, 0.06), 0 2px 8px rgba(59, 42, 50, 0.05);
  --ombra-2: 0 4px 12px rgba(59, 42, 50, 0.08), 0 12px 28px rgba(59, 42, 50, 0.07);
  --ombra-3: 0 8px 24px rgba(59, 42, 50, 0.10), 0 24px 56px rgba(59, 42, 50, 0.09);
  --ombra-rosa: 0 6px 20px rgba(237, 110, 167, 0.35);

  /* --- Layout --- */
  --larghezza-max: 1160px;
  --larghezza-testo: 68ch;
  --margine-pagina: clamp(1rem, 5vw, 3rem);

  /* --- Movimento --- */
  --transizione: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------
   3. RESET
   ------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-7);
}

body {
  min-height: 100vh;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: var(--lh-testo);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; }

/* L'attributo hidden deve nascondere DAVVERO. Lo stile del browser e' solo
   `display: none`, quindi qualunque nostra regola che imposti display — per
   esempio `.campo { display: grid }` — lo scavalca e l'elemento resta a
   video pur essendo marcato nascosto. E' un errore silenzioso e insidioso:
   il codice sembra corretto e l'interfaccia mostra cose che non dovrebbe. */
[hidden] { display: none !important; }

p,
li,
h1,
h2,
h3,
h4 { overflow-wrap: break-word; }

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

:target { scroll-margin-top: var(--sp-7); }

/* Accessibilita: un solo anello di focus, sempre visibile, mai rimosso. */
:focus-visible {
  outline: 3px solid var(--rosa);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   4. TIPOGRAFIA
   Fraunces e' variabile su opsz/SOFT/WONK: opsz alto stringe le forme nei
   titoli grandi, SOFT arrotonda i terminali (calore), WONK e' riservato a
   pochi accenti perche' a testo corrente stanca.
   ------------------------------------------------------------------------- */

h1, h2, h3, h4,
.titolo {
  font-family: var(--font-titoli);
  font-weight: 600;
  line-height: var(--lh-titolo);
  color: var(--testo);
  letter-spacing: -0.01em;
  font-variation-settings: 'opsz' 48, 'SOFT' 40, 'WONK' 0;
  text-wrap: balance;
}

h1, .t-3xl { font-size: var(--t-3xl); line-height: var(--lh-stretta);
  font-variation-settings: 'opsz' 96, 'SOFT' 50, 'WONK' 0; }
h2, .t-2xl { font-size: var(--t-2xl); }
h3, .t-xl  { font-size: var(--t-xl); }
h4, .t-lg  { font-size: var(--t-lg); }

.t-4xl { font-size: var(--t-4xl); line-height: var(--lh-stretta);
  font-variation-settings: 'opsz' 144, 'SOFT' 60, 'WONK' 1; }

/* Occhiello sopra i titoli di sezione */
.occhiello {
  font-family: var(--font-testo);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rosa-testo);
  line-height: var(--lh-media);
}

.sommario {
  font-size: var(--t-lg);
  color: var(--testo-tenue);
  max-width: var(--larghezza-testo);
  text-wrap: pretty;
}

.piccolo { font-size: var(--t-sm); }
.minuscolo { font-size: var(--t-xs); }
.tenue { color: var(--testo-tenue); }
.testo-rosa { color: var(--rosa-testo); }

p + p { margin-top: var(--sp-4); }

strong, b { font-weight: 650; }

a {
  color: var(--rosa-testo);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--transizione);
}

a:hover { color: var(--rosa-scuro); }

/* -------------------------------------------------------------------------
   5. BOTTONI
   Nota: il rosa del logo (--rosa) NON regge il testo bianco (2.8:1), quindi
   i bottoni pieni usano --rosa-testo. Il rosa del logo resta sui decori.
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85em 1.6em;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transizione), border-color var(--transizione),
    color var(--transizione), transform var(--transizione), box-shadow var(--transizione);
}

.btn:active { transform: translateY(1px); }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--primario {
  background: var(--rosa-testo);
  color: #fff;
  box-shadow: var(--ombra-rosa);
}
.btn--primario:hover { background: var(--rosa-scuro); color: #fff; }

.btn--secondario {
  background: #fff;
  color: var(--rosa-testo);
  border-color: var(--rosa);
}
.btn--secondario:hover {
  background: var(--rosa-velo);
  border-color: var(--rosa-testo);
  color: var(--rosa-scuro);
}

.btn--fantasma {
  background: transparent;
  color: var(--testo);
  border-color: var(--bordo);
}
.btn--fantasma:hover { border-color: var(--grigio); background: var(--sfondo-alt); }

.btn--piccolo { padding: 0.6em 1.1em; font-size: var(--t-sm); }

/* -------------------------------------------------------------------------
   6. MOTIVO "STRADA E CUORE"
   Il logo e' una strada grigia che incornicia un cuore rosa: la strada e' il
   filo che lega le sezioni, il cuore segna i punti di svolta.
   ------------------------------------------------------------------------- */

/* 6a. Strada dritta — separatore orizzontale, sola CSS. */
.strada {
  position: relative;
  height: var(--strada-spessore, 16px);
  border-radius: var(--r-pill);
  background: var(--grigio);
  overflow: hidden;
}

.strada::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    to right,
    #fff 0 20px,
    transparent 20px 40px
  );
}

.strada--sottile { --strada-spessore: 10px; }
.strada--sottile::after { height: 2px; }

/* 6b. Separatore di sezione: la strada che incornicia il cuore. */
.strada-sep {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-8) 0;
}

.strada-sep .strada { flex: 1; }

.strada-sep .cuore {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--rosa);
  filter: drop-shadow(0 2px 6px rgba(237, 110, 167, 0.45));
}

/* 6c. Cuore riutilizzabile (icona, pallino di elenco, accento). */
.cuore {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: var(--rosa);
  fill: currentColor;
  vertical-align: -0.125em;
}

/* Elenco puntato con cuori al posto dei bullet. */
.elenco-cuori {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.elenco-cuori > li {
  position: relative;
  padding-left: 1.9em;
}

.elenco-cuori > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1em;
  height: 1em;
  background: var(--rosa);
  -webkit-mask: var(--cuore-mask) center / contain no-repeat;
  mask: var(--cuore-mask) center / contain no-repeat;
}

:root {
  --cuore-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}

/* 6d. Strada curva — accento SVG a piena larghezza fra le sezioni.
   Markup: vedi lo snippet riutilizzabile in styleguide.html. */
.strada-curva { width: 100%; height: auto; overflow: visible; }
.strada-curva__asfalto {
  fill: none;
  stroke: var(--grigio);
  stroke-width: 24;
  stroke-linecap: round;
}
.strada-curva__linea {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 18 20;
}

/* -------------------------------------------------------------------------
   7. UTILITA' DI LAYOUT
   ------------------------------------------------------------------------- */

.contenitore {
  width: 100%;
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--margine-pagina);
}

.sezione { padding-block: var(--sp-9); }
.sezione--velo { background: var(--rosa-velo); }
.sezione--alt { background: var(--sfondo-alt); }

.pila { display: grid; gap: var(--sp-4); }
.pila--larga { gap: var(--sp-6); }

.scheda {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--ombra-1);
}

/* Fondo scuro brandizzato: inverte i colori del testo mantenendo il rosa. */
.su-scuro {
  background: var(--scuro);
  color: #f6eef2;
}
.su-scuro h1,
.su-scuro h2,
.su-scuro h3,
.su-scuro h4 { color: #fff; }
.su-scuro .tenue { color: #cbb8c1; }

/* :not(.btn) e' necessario: senza, questa regola vince sul colore del testo
   dei bottoni (piu' specifica di .btn--primario) e li manda fuori contrasto. */
.su-scuro a:not(.btn) { color: var(--rosa-chiaro); }
.su-scuro a:not(.btn):hover { color: #fff; }

/* Sul bordeaux il rosa chiaro fa da riempimento: con il testo --scuro sopra
   da' 6,4:1, ben oltre la soglia. */
.su-scuro .btn--primario {
  background: var(--rosa-chiaro);
  color: var(--scuro);
  box-shadow: none;
}
.su-scuro .btn--primario:hover { background: #fdc9de; color: var(--scuro); }

.su-scuro .btn--secondario {
  background: transparent;
  color: #fff;
  border-color: var(--rosa-chiaro);
}
.su-scuro .btn--secondario:hover {
  background: rgba(237, 110, 167, 0.18);
  border-color: #fff;
  color: #fff;
}

.su-scuro .btn--fantasma { color: #f6eef2; border-color: rgba(246, 238, 242, 0.35); }
.su-scuro .btn--fantasma:hover { background: rgba(246, 238, 242, 0.1); border-color: #f6eef2; }

/* Solo per lettori di schermo. */
.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;
}

/* Salta al contenuto — primo elemento focusabile della pagina. */
.salta-al-contenuto {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--rosa-testo);
  color: #fff;
  border-radius: var(--r-sm);
  text-decoration: none;
  transform: translateY(-200%);
}
.salta-al-contenuto:focus { transform: translateY(0); color: #fff; }