/* =============================================================
   LIQUID THEME — FINCANTIERI-AI "MAESTRO" v1.0.0
   Layer di re-theme sopra liquid-design-system-v100.css.
   Ground truth: /home/marcello/mockups/home-fincantieri-ai.html
   Rollback: rimuovere il <link> di questo file da index.html.
   Font policy (decisione PM 2026-06-12):
     - Space Grotesk  -> display/heading
     - JetBrains Mono -> UI (nav, bottoni, badge, meta, footer)
     - Inter          -> body lungo (lesson, docs, legal) [invariato]
   ============================================================= */

/* ── Font self-hosted (variable, latin subset) ─────────────── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var-latin.woff2') format('woff2');
}

/* ── Token override ────────────────────────────────────────── */
:root {
  /* Surface */
  --lp-bg: #04060a;
  --lp-bg-elevated: #070b12;
  --lp-surface: rgba(9, 13, 20, 0.6);
  --lp-surface-strong: rgba(9, 13, 20, 0.7);
  --lp-surface-overlay: rgba(10, 14, 22, 0.92);
  --lp-border: rgba(232, 236, 241, 0.14);
  --lp-border-strong: rgba(232, 236, 241, 0.24);
  --lp-border-active: rgba(255, 106, 0, 0.55);

  /* Text */
  --lp-text: #e8ecf1;
  --lp-muted: #8b95a3; /* schiarito vs mockup #6b7684 per WCAG AA su bg #04060a */
  --lp-faint: #6b7684;
  --lp-inverse: #10120f;

  /* Accent: violet/cyan -> orange/steel */
  --lp-accent: #ff6a00;
  --lp-accent-2: #4a7fb5;
  --lp-accent-warm: #ff9a3c;
  --lp-accent-success: #41d98c;

  /* Glow */
  --lp-glow: rgba(255, 106, 0, 0.34);
  --lp-glow-warm: rgba(255, 154, 60, 0.42);
  --lp-glow-cyan: rgba(74, 127, 181, 0.32);

  /* Typography */
  --lp-font-display: 'Space Grotesk', system-ui, sans-serif;
  --lp-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  /* --lp-font-body resta Inter (leggibilità testi lunghi) */

  /* Shadows ricalcolate sul glow orange */
  --lp-shadow-glow: 0 0 30px var(--lp-glow), 0 4px 18px rgba(0, 0, 0, 0.5);
  --lp-shadow-glow-warm: 0 8px 32px rgba(255, 106, 0, 0.35), 0 4px 18px rgba(0, 0, 0, 0.5);
}

::selection { background: #ff6a00; color: #000; }

/* ── Heading: Space Grotesk leggero, tracking largo ────────── */
.lp-shell-unified h1,
.lp-shell-unified h2,
.lp-shell-unified h3 {
  font-family: var(--lp-font-display);
  font-weight: 300;
  letter-spacing: 0.08em;
}
.lp-shell-unified h1 b, .lp-shell-unified h1 strong,
.lp-shell-unified h2 b, .lp-shell-unified h2 strong {
  font-weight: 600;
  background: linear-gradient(120deg, #ff6a00, #ff9a3c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── UI mono uppercase: nav, bottoni, badge, meta ──────────── */
.lp-navbar-link,
.lp-button,
.lp-badge,
.lp-breadcrumb,
.liquid-footer {
  font-family: var(--lp-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.lp-button { font-size: 0.74rem; border-radius: var(--lp-radius-pill); }
.lp-button--primary {
  background: linear-gradient(120deg, #ff6a00, #ff9a3c);
  color: #10120f;
  font-weight: 700;
}
.lp-button--primary:hover { transform: translateY(-2px); color: #10120f; }
.lp-button--ghost {
  background: rgba(10, 14, 22, 0.4);
  border: 1px solid var(--lp-border);
}
.lp-button--ghost:hover { border-color: #ff6a00; color: #ff9a3c; }

/* ── Navbar: pill flottante stile mockup ───────────────────── */
/* La banda v100 (bg + border-bottom su .lp-navbar) cattura il glow arancione
   di mesh/shader e lo taglia sotto la pill → barra spuria sotto il menu.
   Mockup home-fincantieri-ai.html: header trasparente, solo la pill è glass. */
.lp-navbar {
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lp-navbar-links {
  flex: 0 1 auto;            /* la pill avvolge i link, non tutta la riga (v100: flex:1) */
  margin-inline: auto;       /* centrata fra brand e azioni */
  gap: 0.25rem;
  justify-content: safe center;
  white-space: nowrap;
  overflow-x: auto;          /* 1025–1439px: scroll orizzontale senza scrollbar visibile */
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: rgba(10, 14, 22, 0.72);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-pill);
  padding: 0.45rem 0.7rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lp-navbar-links::-webkit-scrollbar { display: none; }
.lp-navbar-link {
  font-size: 0.72rem;
  letter-spacing: 0.13em;    /* 8 voci su una sola riga entro il container 1440px */
  border-radius: var(--lp-radius-pill);
  padding: 0.45rem 0.6rem;
  white-space: nowrap;
}
.lp-navbar-link:hover { background: rgba(255, 255, 255, 0.08); }
.lp-navbar-link--active { color: #ff9a3c; }
.lp-navbar-brand-text {
  font-family: var(--lp-font-display);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lp-navbar-brand-accent { color: #ff9a3c; }

/* ── Ticker banner (solo route marketing — markup in layout) ─ */
.lp-ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--lp-z-navbar);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.55rem 1.4rem;
  font-family: var(--lp-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  color: var(--lp-muted);
  background: rgba(4, 6, 10, 0.92);
  border-bottom: 1px solid var(--lp-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lp-ticker b { color: #ff9a3c; font-weight: 500; }
.lp-ticker .lp-ticker-sep { color: var(--lp-faint); }
.lp-ticker .lp-ticker-live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-pill);
  padding: 0.18rem 0.8rem;
  color: var(--lp-text);
}
.lp-ticker .lp-ticker-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff6a00;
  box-shadow: 0 0 10px #ff6a00;
  animation: lp-ticker-pulse 2s infinite;
}
@keyframes lp-ticker-pulse { 50% { opacity: 0.35; } }
/* Su marketing il ticker è sempre renderizzato: navbar e contenuto scendono di 34px */
.lp-shell-unified[data-route-kind="marketing"] .lp-navbar { top: 34px; }
.lp-shell-unified[data-route-kind="marketing"] .lp-main-content { padding-top: 114px; }
@media (prefers-reduced-motion: reduce) {
  .lp-ticker .lp-ticker-dot { animation: none; }
}

/* ── Numerazione sezioni "0X / NOME" (utility per template) ── */
.lp-snum {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--lp-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lp-muted);
}
.lp-snum::after { content: ""; width: 48px; height: 1px; background: #ff6a00; }

/* ── Card: hover orange + lift (course card mockup) ────────── */
.lp-shell-unified .lp-content-panel--interactive:hover {
  border-color: rgba(255, 106, 0, 0.4);
  transform: translateY(-6px);
}

/* ── Footer: mono uppercase minimale ───────────────────────── */
.liquid-footer { font-size: 0.62rem; letter-spacing: 0.16em; }
.liquid-footer .accent { color: #ff9a3c; }

/* ── Migrate 'Outfit' → Space Grotesk (liquid-portal-v6.css F4) ───────────── */
.lp-shell-unified .lp-page-title,
.lp-shell-unified .lp-section-title,
.lp-shell-unified .lp-course-title,
.lp-shell-unified .lp-cta-final h3,
.lp-shell-unified .lp-tier-name,
.lp-shell-unified .lp-tier-amount,
.lp-shell-unified .lp-instructor-name,
.lp-shell-unified .lp-stat-num,
.lp-shell-unified .course-title,
.lp-shell-unified .tier-name,
.lp-shell-unified .tier-price,
.lp-shell-unified .testimonial-quote,
.lp-shell-unified .testimonial-quote::before,
.lp-shell-unified .cat-orb,
.lp-shell-unified .section-head h2,
.lp-shell-unified .section-head h3 {
  font-family: var(--lp-font-display);
}
.lp-shell-unified .liquid-footer-brand span { font-family: var(--lp-font-mono); }
.lp-shell-unified .liquid-chat-title { font-family: var(--lp-font-mono); letter-spacing: 0.1em; }

/* ── Grain overlay (cinematico, sotto modali) ──────────────── */
.lp-shell-unified::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--lp-z-floating);
  pointer-events: none;
  opacity: 0.07;
  /* No mix-blend-mode: evita stacking context + compositing cost durante scroll */
  transform: translateZ(0);  /* GPU layer esplicito */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Niente grain dove serve leggibilità piena */
.lp-shell-unified[data-route-kind="admin"]::after,
.lp-shell-unified[data-route-kind="learning"]::after { content: none; }