/* =============================================================================
   FooLab — CORPO delle landing marketing (layouts/public)
   -----------------------------------------------------------------------------
   OVERLAY sopra public-site.css: va caricato PER ULTIMO nel layout pubblico.
   Completa l'integrazione iniziata col chrome (navbar + footer): lì avevamo
   sistemato solo il contorno, qui portiamo sui token FooLab anche il CONTENUTO
   delle 17 landing (check-up, Da Excel, AI, manifesto, FAQ, pacchetti, demo…).

   COSA CAMBIA
   -----------
   - .public-card / --dashed / --solid → superficie card FooLab (bordo pieno,
     ombra piatta, raggio dai token). Sparisce il tratteggio nero ovunque:
     era il "doppio bordo" che si vedeva in giro insieme alle cornici.
   - .public-panel  → pannello con etichetta flottante, ma nel linguaggio nuovo.
   - .public-tag    → chip FooLab.
   - .public-section-title → testata con lo sticker inclinato della home.
   - bottoni Bootstrap (.btn-dark, .btn-outline-dark, .btn-light) → bottoni FooLab.
   - .public-section:nth-child(even) → il nero pieno alternato resta, ma usa
     --fl-surface-dark, così segue i token invece di un #000 hardcoded.

   VINCOLO: solo var(--fl-*) da foolab-tokens.css, caricato prima.
   ========================================================================== */

/* ---- Impianto di pagina ---------------------------------------------------- */
.public-body{
  background:var(--fl-bg);
  color:var(--fl-ink);
  font-family:var(--fl-font-body);
}
.public-body .public-main{background:var(--fl-bg)}
.public-body .container{max-width:var(--fl-container-wide)}

.public-body h1,.public-body h2,.public-body h3,
.public-body h4,.public-body h5,.public-body h6{
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  line-height:var(--fl-lh-tight);
  color:var(--fl-ink);
}
.public-body p,.public-body li{line-height:var(--fl-lh-lead)}
.public-body .text-muted{color:var(--fl-ink) !important;opacity:.72}
.public-body .text-success{color:var(--fl-green) !important}
.public-body .text-danger{color:var(--fl-red) !important}
.public-body .text-dark{color:var(--fl-ink) !important}

/* Sezioni a fondo alternato: il nero resta, ma dai token */
.public-body .public-section{border-bottom:var(--fl-dash-soft)}
.public-body .public-section:last-child{border-bottom:0}
.public-body .public-section:nth-child(even){
  background:var(--fl-surface-dark);
  color:var(--fl-on-dark);
  border-bottom-color:rgba(242,239,233,.3);
}
.public-body .public-section:nth-child(even) h1,
.public-body .public-section:nth-child(even) h2,
.public-body .public-section:nth-child(even) h3{color:var(--fl-on-dark)}

/* ---- Card ------------------------------------------------------------------
   Il tratteggio nero (2px dashed) era la firma della vecchia grafica ed è la
   causa dei "doppi bordi" percepiti quando due card sono adiacenti o annidate.
   Serve !important perché public-site.css dichiara i colori con !important.
------------------------------------------------------------------------------ */
.public-body .public-card,
.public-body .public-card--dashed,
.public-body .public-card--solid{
  background:var(--fl-panel);
  color:var(--fl-ink) !important;
  border:var(--fl-border-sm) solid var(--fl-line);
  border-radius:var(--fl-radius-lg);
  box-shadow:var(--fl-shadow-sm);
}
.public-body .public-card--solid{box-shadow:var(--fl-shadow)}
/* Card dentro card (o dentro un pannello): la figlia perde ombra e alleggerisce
   il bordo. È la regola che elimina i "doppi bordi" percepiti: due contenitori
   annidati non devono avere entrambi bordo pieno + ombra. */
.public-body .public-card .public-card,
.public-body .public-panel .public-card,
.public-body .public-card .public-panel{
  box-shadow:none;
  border-width:var(--fl-border-w-xs);
  border-radius:var(--fl-radius-md);
}
.public-body .public-section:nth-child(even) .public-card{
  background:var(--fl-panel);
  color:var(--fl-ink) !important;
  border-color:var(--fl-line);
}
.public-body .public-section:nth-child(even) .public-card:hover{
  background:var(--fl-panel);
  color:var(--fl-ink) !important;
  box-shadow:var(--fl-shadow);
}

.public-body .public-hero{
  background:var(--fl-panel);
  border:var(--fl-border);
  border-radius:var(--fl-radius-xl);
  box-shadow:var(--fl-shadow);
  padding:var(--fl-space-6);
}

/* ---- Pannello con etichetta flottante -------------------------------------- */
.public-body .public-panel{
  background:var(--fl-panel);
  border:var(--fl-border-sm) solid var(--fl-line);
  border-radius:var(--fl-radius-lg);
  box-shadow:var(--fl-shadow-sm);
  padding:calc(var(--fl-space-6) + var(--fl-space-2)) var(--fl-space-5) var(--fl-space-5);
}
.public-body .public-panel-head{
  left:var(--fl-space-5);
  gap:var(--fl-space-2);
  padding:var(--fl-space-1) var(--fl-space-4);
  background:var(--fl-yellow);
  border:var(--fl-border-sm);
  border-radius:var(--fl-radius-pill);
  box-shadow:var(--fl-shadow-sm);
  transform:translateY(-50%) rotate(-2deg);
}
.public-body .public-panel-title{
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-md);
  color:var(--fl-ink);
}
.public-body .public-panel-icon{font-size:var(--fl-fs-md);color:var(--fl-ink)}

/* ---- Testata di sezione ---------------------------------------------------- */
.public-body .public-section-title{gap:var(--fl-space-4);margin-bottom:var(--fl-space-6)}
.public-body .public-section-title__line{
  border-bottom:var(--fl-dash-sm);
  opacity:.4;
}
.public-body .public-section-title__text{
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-h2);
  letter-spacing:0;
  margin-bottom:var(--fl-space-2);
}

/* ---- Tag / chip ------------------------------------------------------------ */
.public-body .public-tag{
  background:var(--fl-tint-grey);
  color:var(--fl-ink);
  border:var(--fl-border-xs);
  border-radius:var(--fl-radius-pill);
  padding:var(--fl-space-1) var(--fl-space-3);
  font-size:var(--fl-fs-xs);
  font-weight:var(--fl-fw-bold);
  opacity:1;
}
.public-body .public-tag--dark{background:var(--fl-ink);color:var(--fl-on-dark)}
.public-body .public-tag--light{background:var(--fl-tint-blue)}

/* ---- Bottoni --------------------------------------------------------------- */
.public-body .btn{
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-bold);
  border-radius:var(--fl-radius-md);
  border:var(--fl-border-sm) solid var(--fl-line);
  box-shadow:var(--fl-shadow-sm);
  padding:var(--fl-space-2) var(--fl-space-4);
  transition:var(--fl-transition);
}
.public-body .btn:active{transform:translateY(var(--fl-press-y));box-shadow:none}
.public-body .btn-lg{font-size:var(--fl-fs-md);padding:var(--fl-space-3) var(--fl-space-5)}
/* CTA primaria NERA: l'ambra come fondo di bottone non ha contrasto sufficiente
   e, ripetuta su ogni landing, diventava il colore dominante del sito. */
.public-body .btn-dark{background:var(--fl-ink);color:var(--fl-on-dark);border-color:var(--fl-line)}
.public-body .btn-dark:hover{background:var(--fl-ink);color:var(--fl-yellow);box-shadow:var(--fl-shadow)}
.public-body .btn-outline-dark{background:var(--fl-panel);color:var(--fl-ink);border-color:var(--fl-line)}
.public-body .btn-outline-dark:hover{background:var(--fl-tint-yellow);color:var(--fl-ink)}
.public-body .btn-primary{background:var(--fl-blue);color:var(--fl-on-blue);border-color:var(--fl-line)}
.public-body .btn-primary:hover{background:var(--fl-blue-d);color:var(--fl-on-blue)}
.public-body .btn-light{background:var(--fl-panel);color:var(--fl-ink)}

/* ---- Form ------------------------------------------------------------------ */
.public-body .form-control,
.public-body .form-select{
  font-family:var(--fl-font-body);
  color:var(--fl-ink);
  background:var(--fl-panel);
  border:var(--fl-border-sm) solid var(--fl-line);
  border-radius:var(--fl-radius-sm);
  padding:var(--fl-space-2) var(--fl-space-3);
}
.public-body .form-control:focus,
.public-body .form-select:focus{
  border-color:var(--fl-blue);
  box-shadow:none;
  outline:var(--fl-border-sm) solid var(--fl-blue);
}

/* ---- Progress -------------------------------------------------------------- */
.public-body .public-progress{
  background:var(--fl-tint-grey);
  border:var(--fl-border-xs);
  border-radius:var(--fl-radius-pill);
  height:10px;
}
.public-body .public-progress .progress-bar{background:var(--fl-blue)}

/* ---- Elementi obsoleti della vecchia shell --------------------------------- */
/* Il footer sticky tratteggiato è sostituito dal footer FooLab del layout. */
.public-body .public-sticky-footer{display:none}

/* =============================================================================
   Prenotazione call (/book) — pagina pubblica del funnel
   -----------------------------------------------------------------------------
   La view usa la shell dei preventivi (quotation.css) più
   public-booking-schedule.css: qui portiamo sui token gli elementi che si
   vedono, senza toccare la griglia oraria, che è logica funzionante.
   Scoped su #public-booking-schedule: i PREVENTIVI non sono interessati.
   ========================================================================== */
#public-booking-schedule{
  font-family:var(--fl-font-body);
  color:var(--fl-ink);
  max-width:var(--fl-container-full);
  padding:var(--fl-space-6) var(--fl-space-5);
}
#public-booking-schedule .quotation-title,
#public-booking-schedule .quotation-subtitle{
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  color:var(--fl-ink);
  border:0;
}
#public-booking-schedule .quotation-title{font-size:var(--fl-fs-h2)}
#public-booking-schedule .quotation-subtitle{font-size:var(--fl-fs-md)}
#public-booking-schedule .quotation-info-text{
  font-size:var(--fl-fs-sm);
  line-height:var(--fl-lh-lead);
  color:var(--fl-ink);
  opacity:.78;
}
#public-booking-schedule .booking-brand{
  font-family:var(--fl-font-brand);
  font-weight:var(--fl-fw-brand);
  font-size:var(--fl-fs-lg);
  opacity:1;
}

/* Scelta durata: card FooLab, la selezionata prende l'ambra */
#public-booking-schedule .booking-duration-card{
  background:var(--fl-panel);
  border:var(--fl-border-sm) solid var(--fl-line) !important;
  border-radius:var(--fl-radius-lg) !important;
  box-shadow:var(--fl-shadow-sm);
  overflow:hidden;
  transition:var(--fl-transition);
}
#public-booking-schedule .booking-duration-card:hover{box-shadow:var(--fl-shadow)}
#public-booking-schedule .booking-duration-card.is-selected,
#public-booking-schedule .booking-duration-card.selected,
#public-booking-schedule .booking-duration-card.active{
  border-color:var(--fl-line) !important;
  box-shadow:var(--fl-shadow);
  background:var(--fl-tint-yellow);
}

/* Intestazioni di giorno e legenda */
#public-booking-schedule .booking-day-header{
  background:var(--fl-surface-dark);
  color:var(--fl-on-dark);
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  border:0;
}
#public-booking-schedule .booking-day{
  border:var(--fl-border-w-xs) solid var(--fl-line);
  border-radius:var(--fl-radius-md);
  overflow:hidden;
  background:var(--fl-panel);
}
#public-booking-schedule .booking-legend-item{
  font-size:var(--fl-fs-xs);
  font-weight:var(--fl-fw-bold);
  color:var(--fl-ink);
}