/*
Theme Name: NeuralLab
Theme URI: https://neurallab.it
Author: NeuralLab
Author URI: https://neurallab.it
Description: Minimal, accessible, SEO-friendly theme focused on AI & App services. Classic theme with block editor support.
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neurallab
*/

/* ─────────────────────────────────────────────────────────────
   0) DESIGN TOKENS / RESET
   ───────────────────────────────────────────────────────────── */
:root{
  --nl-bg:#0b1220;
  --nl-surface:#121a2b;
  --nl-card:#161f34;
  --nl-text:#e8eefc;
  --nl-text-dim:#b6c2e2;
  --nl-accent:#3da9fc;
  --nl-accent-2:#90cdf4;
  --nl-cta-secondary:#0b1220;
  --nl-cta-secondary-border:#3da9fc;
  --nl-success:#22c55e;
  --nl-warning:#f59e0b;
  --nl-danger:#ef4444;
  --nl-border:#263248;
  --nl-muted:#0e1627;
  --nl-link:#7cc4ff;
  --nl-maxw:1200px;
  --nl-radius:14px;
  --nl-shadow:0 10px 25px rgba(0,0,0,.25);
}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--nl-bg); color:var(--nl-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  line-height:1.6;
}
a{color:var(--nl-link); text-decoration:none}
a:hover{ text-decoration:underline }
.container{ max-width: var(--nl-maxw); margin: 0 auto; padding: 0 20px; }

/* ─────────────────────────────────────────────────────────────
   1) HEADER / BRAND
   ───────────────────────────────────────────────────────────── */
.site-header{
  background: linear-gradient(180deg, #0c1426 0%, #0b1220 100%);
  position:sticky; top:0; z-index:999; border-bottom:1px solid var(--nl-border);
}
.site-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 10px; gap:16px; position:relative; }
.brand{ display:flex; align-items:center; gap:12px;}
.brand-logo{ width:36px; height:36px; border-radius:9px; background: radial-gradient(circle at 30% 20%, var(--nl-accent), #1f2b46); box-shadow: var(--nl-shadow);}
.brand-title{ font-size:1.1rem; font-weight:700; letter-spacing:.3px;}

/* Control custom logo size */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  max-height: 80px;   /* adjust to your header height */
}

.custom-logo {
  height: 80px;       /* or whatever you want */
  width: auto !important;        /* keeps proportions */
}

/* ────────────────────────────────────────────────
   Header: mostra solo logo in mobile, nasconde titolo
   ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .custom-logo {
    height: 55px;       /* or whatever you want */
    width: auto !important;        /* keeps proportions */
  }
}
/* ─────────────────────────────────────────────────────────────
   2) PRIMARY NAV (desktop)
   ───────────────────────────────────────────────────────────── */
.site-nav > ul,
.site-nav > .menu {
  list-style:none; padding:0; margin:0;
  display:flex; gap:18px;        /* solo il livello top è flex */
}
.site-nav li{ position:relative }
.site-nav a{ color: var(--nl-text); text-decoration:none; font-weight:500; }
.site-nav a:hover{ color: var(--nl-accent); text-decoration:none }
.site-nav .menu-item-has-children > a::after{ content:"▾"; font-size:.7rem; margin-left:6px; opacity:.8 }

/* Dropdown (desktop) */
.site-nav .sub-menu{
  position: absolute; left: 0; top: 100%; transform: translateY(8px);
  background: #0a101c; border: 1px solid var(--nl-border);
  border-radius: 12px; padding: 8px 0; min-width: 220px;
  box-shadow: var(--nl-shadow); z-index: 1000;

  opacity: 0; visibility: hidden;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;

  display: flex; flex-direction: column; gap: 0;
}
.site-nav .sub-menu li { display:block; margin:0; }
.site-nav .sub-menu a{
  display:block; padding: 8px 12px; border-radius: 8px;
  color: var(--nl-text-dim); text-decoration:none;
}
.site-nav .sub-menu a:hover{ background: #0f1a2e; color: var(--nl-text); }

/* Keep open on hover/focus */
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu{
  opacity: 1; visibility: visible; transform: translateY(10px); transition-delay: 0s;
}

/* ─────────────────────────────────────────────────────────────
   3) MOBILE NAV (hamburger + menu) — versione Lucide
   ───────────────────────────────────────────────────────────── */

/* Toggle nascosto di default su desktop */
.nav-toggle{ display:none; }

/* Mobile rules */
@media (max-width: 860px){
  /* Bottone hamburger con icona Lucide */
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px; height:44px;
    background:none;          /* niente box scuro */
    border:2px solid var(--nl-border);
    border-radius:8px;           
    cursor:pointer;
    left:10px; top:10px;
    color: var(--nl-text);    /* IMPORTANT: serve all’icona Lucide (currentColor) */
    z-index: 1001;            /* sopra al resto */
  }

  /* L’<i data-lucide="menu"> diventa un <svg>, dimensioniamolo */
  .nav-toggle i {
    width: 28px;
    height: 28px;
    stroke-width: 2.5;
    display: inline-block;
  }

  /* Menu nascosto finché non apri */
  .site-nav{ display:none; }
  .site-header[data-open='true'] .site-nav{
    display:block;
    position:absolute; left:0; right:0; top:100%;
    background:#0a101c; border-bottom:1px solid var(--nl-border);
  }
  .site-header[data-open='true'] .site-nav > ul,
  .site-header[data-open='true'] .site-nav > .menu{
    flex-direction:column; padding:10px 20px; gap:6px;
  }

  /* Submenu in mobile: inline, hidden finché il parent non ha .open */
  .site-nav .sub-menu{
    position:static; transform:none; opacity:1; visibility:visible;
    border:0; border-radius:0; padding:0; background:transparent; box-shadow:none;
    display:none; flex-direction:column;
  }
  .site-nav .menu-item-has-children.open > .sub-menu{ display:block; }

  /* CTA header più compatta in mobile */
  .site-header .cta{
    font-size:0.9rem; padding:6px 10px; border-radius:10px;
    white-space:nowrap; max-width:190px; overflow:hidden; text-overflow:ellipsis;
  }
}

/* ─────────────────────────────────────────────────────────────
   4) BUTTONS
   ───────────────────────────────────────────────────────────── */
.cta{
  background:var(--nl-accent); color:#0b1220;
  border-radius:999px; padding:8px 14px; font-weight:600;
  box-shadow:var(--nl-shadow); border:0;
}
.cta:hover{ filter:brightness(1.05); text-decoration:none }
.cta-secondary{
  background: transparent; color: var(--nl-text);
  border: 2px solid var(--nl-cta-secondary-border);
  border-radius: 999px; padding:8px 14px; font-weight:600; box-shadow:none;
}
.cta-secondary:hover{ background: rgba(61,169,252,0.12); text-decoration:none; }

/* ─────────────────────────────────────────────────────────────
   5) HERO / SECTIONS / CARDS
   ───────────────────────────────────────────────────────────── */
.hero{
  background: radial-gradient(1200px 600px at 10% 0%, rgba(61,169,252,.25), transparent 50%),
              radial-gradient(800px 400px at 90% 10%, rgba(144,205,244,.2), transparent 50%);
  padding:70px 0 60px; border-bottom:1px solid var(--nl-border);
}
.hero h1{ font-size: clamp(28px, 4vw, 44px); margin:0 0 10px; line-height:1.15}
.hero p{ color:var(--nl-text-dim); max-width:720px}
.hero-actions{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}

.section{ padding:48px 0; }

.cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:18px; margin-top:18px
}
.card{ background:var(--nl-card); padding:18px; border-radius:var(--nl-radius); border:1px solid var(--nl-border)}
.card h3{ margin:0 0 6px}
.badge{ display:inline-block; padding:4px 10px; border-radius:999px; background:#0f1a2e; border:1px solid var(--nl-border); color:var(--nl-text-dim); font-size:.85rem}

/* ─────────────────────────────────────────────────────────────
   6) FOOTER
   ───────────────────────────────────────────────────────────── */
.site-footer{ background:#0a101c; color:var(--nl-text-dim); padding:28px 0; }
.footer-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px }
.footer-nav h4{ margin:0 0 10px; color: var(--nl-text) }
.footer-nav ul{ list-style:none; padding:0; margin:0 }
.footer-nav a{ color: var(--nl-text-dim) }
.footer-nav a:hover{ color: var(--nl-accent) }
.footer-bottom{ border-top:1px solid var(--nl-border); margin-top:18px; padding-top:16px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap }

/* ─────────────────────────────────────────────────────────────
   7) ACCESSIBILITY
   ───────────────────────────────────────────────────────────── */
.screen-reader-text{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ─────────────────────────────────────────────────────────────
   8) CONTENT BASICS
   ───────────────────────────────────────────────────────────── */
main{min-height:50vh}
.post-card{ background:var(--nl-surface); padding:18px; border-radius:var(--nl-radius); border:1px solid var(--nl-border)}

.icon-inline { display: inline-flex; align-items: center; gap: 6px; }
.icon-inline i { width: 22px; height: 22px; color: var(--nl-accent); }

/* Spaziatura contenuti principali */
.site-content p,
.site-content ul,
.site-content ol,
.site-content h2,
.site-content h3 { margin-top: 0.5em; }

.site-content h2 { margin-top: 1em; font-size: 1.6rem; }
.site-content h3 { margin-top: 1.5em; font-size: 1.3rem; }
.site-content ul { padding-left: 1.4em; list-style: disc; }

/* Hero grid (immagine a destra) */
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero-text { z-index: 2; }
.hero-visual img{
  width: 100%; max-width: 400px; height: auto;
  border-radius: var(--nl-radius); box-shadow: var(--nl-shadow);
  margin: 0 auto; display: block;
}

/* ─ Responsivo hero */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-visual img { margin-top: 20px; }
}

/* ─────────────────────────────────────────────────────────────
   9) BLOG / ARCHIVE LISTING
   ───────────────────────────────────────────────────────────── */
/* C) Forza layout verticale degli articoli (no 4 colonne) */
.blog .post-grid,
.archive .post-grid { display:block; }

.blog .post-card,
.archive .post-card { margin-bottom:24px; }

/* Se la pagina usa .cards per i post, portala a colonna singola */
.blog .cards,
.archive .cards { display:block; }

/* ─────────────────────────────────────────────────────────────
   10) POST META (categorie / tag / autore / data)
   ───────────────────────────────────────────────────────────── */
.post-meta{
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--nl-border);
  font-size: 0.9rem; color: var(--nl-text-dim);
  display: flex; flex-wrap: wrap; gap: 12px;
}
.post-meta a{ color: var(--nl-link); text-decoration: none; font-weight: 500; }
.post-meta a:hover{ color: var(--nl-accent); text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────
   HOME / INSIGHTS: card blog con altezza uniforme e footer allineato
   Struttura HTML:
   .section > .container > .cards.nl-cols-3 > article.card
   ───────────────────────────────────────────────────────────── */

.section .cards.nl-cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch; /* tutte le colonne stessa altezza */
}

.section .cards.nl-cols-3 .card {
  display: flex;
  flex-direction: column;
  /*height: 100%;*/
  min-height: 360px; /* regola a piacere (360–420) */
}

/* Titolo ed elementi meta: spazi coerenti */
.section .cards.nl-cols-3 .card h3 { margin-top: 0; }
.section .cards.nl-cols-3 .card .meta { margin: .25rem 0; opacity: .8; }

/* L'estratto occupa lo spazio flessibile centrale */
.section .cards.nl-cols-3 .card .excerpt {
  flex: 1 1 auto;
}

/* Footer (paragrafo finale con CTA + data) fissato in basso */
.section .cards.nl-cols-3 .card > p:last-of-type {
  margin-top: auto !important; /* override inline style */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Evita che la data vada a capo e sballi l’allineamento */
.section .cards.nl-cols-3 .card > p:last-of-type span {
  white-space: nowrap;
}

/* Mobile: passaggio a colonna singola */
@media (max-width: 860px) {
  .section .cards.nl-cols-3 {
    grid-template-columns: 1fr;
  }
  .section .cards.nl-cols-3 .card {
    min-height: 0; /* lascia adattare in verticale su mobile */
  }
}

/* ─────────────────────────────────────────────────────────────
   Breadcrumb
   ───────────────────────────────────────────────────────────── */
.nl-breadcrumbs {
  margin: 10px 5px 14px;
  font-size: 0.92rem;
  color: var(--nl-text-dim);
}
.nl-breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.nl-breadcrumbs li {
  display: inline-flex; align-items: center; gap: 8px;
}
.nl-breadcrumbs li::after {
  content: "›";
  opacity: .6;
  margin-left: 8px;
}
.nl-breadcrumbs li:last-child::after { content: ""; margin: 0; }
.nl-breadcrumbs a {
  color: var(--nl-link); text-decoration: none; font-weight: 500;
}
.nl-breadcrumbs a:hover { color: var(--nl-accent); text-decoration: underline; }
.nl-breadcrumbs [aria-current="page"] { color: var(--nl-text); font-weight: 600; }

@media (max-width: 860px) {
  .nl-breadcrumbs { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   Contact form
   ───────────────────────────────────────────────────────────── */
.nl-form .nl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nl-form .nl-field { display: flex; flex-direction: column; }
.nl-form .nl-col-2 { grid-column: span 2; }
.nl-form label { font-weight: 600; margin-bottom: 6px; }
.nl-form input[type="text"],
.nl-form input[type="email"],
.nl-form input[type="tel"],
.nl-form select,
.nl-form textarea {
  background: var(--nl-surface);
  border: 1px solid var(--nl-border);
  color: var(--nl-text);
  border-radius: 10px;
  padding: 10px 12px;
}
.nl-form textarea { resize: vertical; }

@media (max-width: 860px){
  .nl-form .nl-grid { grid-template-columns: 1fr; }
  .nl-form .nl-col-2 { grid-column: span 1; }
}