/* =============================================================================
   FooLab — CHROME (barra di navigazione + footer) delle pagine pubbliche
   -----------------------------------------------------------------------------
   Skin FooLab di header e footer, ATTIVA SOLO dove viene richiesta:
     - <x-public.navbar skin="foolab" />        → .public-navbar--foolab
     - $footerSkin = 'foolab' nel controller    → partials/footer-foolab
   Le altre pagine marketing continuano a usare la skin bianco/nero di
   public-site.css: nessuna regola qui è globale, tutte sono scopate sotto
   .public-navbar--foolab o .flf-footer.

   VINCOLO come per foolab-ui.css: solo var(--fl-*) da foolab-tokens.css, che
   va caricato PRIMA di questo file.
   ========================================================================== */

/* Font FooLab (Baloo 2 display + Fredoka testo). Sta QUI e non in foolab-home
   perché il chrome è caricato da tutte le pagine con skin FooLab (home e CV):
   una sola richiesta, nessuna duplicazione. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Baloo+2:wght@500;700;800&display=swap');

/* Font STORICO del marchio. Il sito lo dichiara già in app.css come .foo-font,
   ma le pagine pubbliche caricano guest.css: lo ridichiariamo qui perché
   --fl-font-brand funzioni ovunque la skin FooLab sia attiva. */
@font-face{
  font-family:'Kg Happy';
  src:url('/assets/fonts/KGHAPPY.ttf') format('truetype');
  font-display:swap;
}

/* =========================================================================
   NAVBAR
   ====================================================================== */
.public-navbar--foolab{
  background:var(--fl-panel);
  padding:0;
  border-bottom:var(--fl-border);
  box-shadow:var(--fl-shadow-sm);
}
.public-navbar--foolab .public-navbar-inner{
  border-bottom:0;
  max-width:var(--fl-container-full);
  margin:0 auto;
  padding:var(--fl-space-3) var(--fl-space-5);
  min-height:var(--fl-nav-h);
  display:flex;align-items:center;
}
.public-navbar--foolab .public-nav-row{
  width:100%;
  gap:var(--fl-space-4);
}

/* Marchio: {F} dentro un quadrato giallo cartoon */
.public-navbar--foolab .public-brand{
  gap:var(--fl-space-3);
  color:var(--fl-ink);
}
/* REGOLA NON NEGOZIABILE: il logo è NERO SU BIANCO. Niente fondi colorati —
   il marchio non partecipa alla palette di accento. */
.public-navbar--foolab .public-brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  background:var(--fl-panel);
  color:var(--fl-ink);
  border:var(--fl-border-sm);
  border-radius:var(--fl-radius-md);
  box-shadow:var(--fl-shadow-sm);
  font-size:1.4rem;
  transition:var(--fl-transition);
}
.public-navbar--foolab .public-brand:hover .public-brand-mark{
  transform:translateY(-2px);
  box-shadow:var(--fl-shadow);
}
/* Il nome del marchio va nel font storico (Kg Happy), non nel font display */
.flc-brand-word{
  font-family:var(--fl-font-brand);
  font-weight:var(--fl-fw-brand);
  font-size:var(--fl-fs-xl);
  letter-spacing:.02em;
  line-height:1;
}
.flc-brand-word small{
  display:block;
  font-family:var(--fl-font-body);
  font-weight:var(--fl-fw-regular);
  font-size:var(--fl-fs-xs);
  opacity:.7;
  letter-spacing:.04em;
  margin-top:2px;
}
@media (max-width:720px){.flc-brand-word{display:none}}

/* Menu: pillole cartoon, scorrevoli in orizzontale su mobile */
.public-navbar--foolab .public-nav-menu{
  gap:var(--fl-space-2);
  overflow-x:auto;
  scrollbar-width:none;
  padding:var(--fl-space-1) 0;
  -webkit-overflow-scrolling:touch;
}
.public-navbar--foolab .public-nav-menu::-webkit-scrollbar{display:none}
.public-navbar--foolab .public-nav-divider{display:none}

.public-navbar--foolab a.public-nav-btn,
.public-navbar--foolab a.public-nav-btn:visited{
  flex:0 0 auto;
  background:var(--fl-panel);
  color:var(--fl-ink) !important;
  border:var(--fl-border-xs);
  border-radius:var(--fl-radius-pill);
  padding:var(--fl-space-2) var(--fl-space-4);
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-bold);
  font-size:var(--fl-fs-sm);
  letter-spacing:0;
  box-shadow:none;
  transition:var(--fl-transition);
}
.public-navbar--foolab a.public-nav-btn:hover{
  background:var(--fl-tint-yellow);
  color:var(--fl-ink) !important;
  transform:translateY(-2px);
  box-shadow:var(--fl-shadow-sm);
}
.public-navbar--foolab a.public-nav-btn.is-active,
.public-navbar--foolab a.public-nav-btn.is-active:visited{
  background:var(--fl-blue);
  color:var(--fl-on-blue) !important;
  border:var(--fl-border-sm);
  box-shadow:var(--fl-shadow-sm);
}
.public-navbar--foolab a.public-nav-btn.is-active:hover{
  background:var(--fl-blue-d);
  color:var(--fl-on-blue) !important;
}

/* CTA in coda al menu, sempre visibile */
.public-navbar--foolab a.public-nav-btn.public-nav-cta,
.public-navbar--foolab a.public-nav-btn.public-nav-cta:visited{
  background:var(--fl-yellow);
  color:var(--fl-on-yellow) !important;
  border:var(--fl-border-sm);
  box-shadow:var(--fl-shadow-sm);
}
.public-navbar--foolab a.public-nav-btn.public-nav-cta:hover{
  background:var(--fl-yellow);
  transform:translateY(-2px);
  box-shadow:var(--fl-shadow);
}

/* =========================================================================
   FOOTER
   ====================================================================== */
/* NB: guest.css dichiara `footer{background-color:#fff;margin:20px}` su OGNI
   footer del sito. Su mobile quel margine si vedeva come una cornice bianca
   attorno al footer scuro: va azzerato esplicitamente. */
.flf-footer{
  background:var(--fl-surface-dark);
  color:var(--fl-on-dark);
  font-family:var(--fl-font-body);
  font-size:var(--fl-fs-sm);
  line-height:var(--fl-lh-lead);
  border-top:var(--fl-border);
  padding:var(--fl-space-8) var(--fl-space-5) var(--fl-space-5);
  margin:auto 0 0;
  width:100%;
  letter-spacing:normal;
}
.flf-inner{
  max-width:var(--fl-container-full);
  margin:0 auto;
}
/* Se la pagina è più corta della viewport, sotto al footer si vedrebbe il
   bianco del body: lo portiamo sul colore carta. */
body:has(.flf-footer){background:var(--fl-bg)}
.flf-cols{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:var(--fl-space-7);
  align-items:start;
}

/* Colonna marchio */
.flf-brand{display:flex;align-items:center;gap:var(--fl-space-3);margin-bottom:var(--fl-space-4)}
/* Anche qui: logo nero su bianco, pure sul footer scuro. */
.flf-brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex:0 0 52px;
  background:var(--fl-panel);color:var(--fl-ink);
  border:var(--fl-border-sm);border-radius:var(--fl-radius-md);
  font-size:1.5rem;
}
.flf-brand-name{
  font-family:var(--fl-font-brand);
  font-weight:var(--fl-fw-brand);
  font-size:var(--fl-fs-xl);
  line-height:1.1;
}
.flf-brand-name small{
  display:block;font-family:var(--fl-font-body);font-weight:var(--fl-fw-regular);
  font-size:var(--fl-fs-xs);opacity:.7;margin-top:3px;
}
.flf-pitch{max-width:42ch;opacity:.82;margin:0 0 var(--fl-space-4)}

/* Titoli di colonna */
.flf-col-title{
  font-family:var(--fl-font-display);
  font-weight:var(--fl-fw-black);
  font-size:var(--fl-fs-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fl-yellow);
  margin:0 0 var(--fl-space-4);
}

/* Liste di link/informazioni */
.flf-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--fl-space-3)}
.flf-list li{display:flex;align-items:flex-start;gap:var(--fl-space-3)}
.flf-list i{
  width:1.2em;flex:0 0 1.2em;text-align:center;
  color:var(--fl-yellow);margin-top:.25em;
}
.flf-link{
  color:var(--fl-on-dark);
  text-decoration:none;
  border-bottom:var(--fl-border-w-xs) solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.flf-link:hover{color:var(--fl-yellow);border-bottom-color:var(--fl-yellow)}
.flf-strong{font-weight:var(--fl-fw-bold)}

/* Riga finale */
.flf-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--fl-space-4);
  margin-top:var(--fl-space-7);
  padding-top:var(--fl-space-4);
  border-top:var(--fl-border-w-xs) dashed rgba(234,242,255,.35);
  font-size:var(--fl-fs-xs);
  opacity:.85;
}
.flf-bottom-links{display:flex;flex-wrap:wrap;gap:var(--fl-space-4)}

@media (max-width:900px){
  .flf-cols{grid-template-columns:1fr 1fr;gap:var(--fl-space-6)}
  .flf-brand-col{grid-column:1 / -1}
}
@media (max-width:600px){
  .flf-footer{padding:var(--fl-space-7) var(--fl-space-4) var(--fl-space-5)}
  .flf-cols{grid-template-columns:1fr;gap:var(--fl-space-6)}
  .flf-bottom{flex-direction:column;align-items:flex-start}
}

/* La skin FooLab non stampa: in PDF/print il footer scuro sprecherebbe inchiostro */
@media print{.flf-footer{display:none}}