/*
Theme Name: Neurallab Architectural
Theme URI: https://neurallab.it
Author: Neurallab
Author URI: https://neurallab.it
Description: "Architectural Intelligence" — editorial dark theme for Neurallab, AI operations boutique per PMI. Newsreader + Inter typography, deep-midnight tonal layering, indigo glow. Classic theme con supporto al block editor e pattern per la homepage.
Version: 3.0.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 — "Architectural Intelligence · Light"
   Light, approachable B2B palette for PMI: cool light neutrals + the
   indigo brand (deepened to work on light) + a warm tertiary accent,
   with near-obsidian "ink" carrying the brand through as text.
   Separation via soft shadows + hairlines (light theme); serif headlines.
   ───────────────────────────────────────────────────────────── */
:root{
  /* Surface hierarchy — light, cool neutrals */
  --nl-bg:#f6f7fb;                 /* canvas                          */
  --nl-bg-lowest:#eaedf7;          /* alt bands / recessed (cool tint)*/
  --nl-surface:#eef1f9;            /* low surface                     */
  --nl-surface-2:#f1f3fb;          /* container                       */
  --nl-card:#ffffff;               /* cards                           */
  --nl-card-bright:#ffffff;
  --nl-surface-bright:#f4f6fd;     /* subtle hover tint               */

  /* Ink — the former obsidian, now text (keeps the brand link) */
  --nl-text:#171a2b;               /* near-obsidian ink               */
  --nl-text-dim:#5a6276;           /* slate muted (body)              */
  --nl-text-soft:#33384d;          /* darker muted (leads/subheads)   */

  /* Accents */
  --nl-accent:#5457ee;             /* confident indigo on light       */
  --nl-accent-strong:#6366f1;      /* gradient end / hover            */
  --nl-on-primary:#ffffff;         /* text on indigo fills            */
  --nl-accent-2:#ea7a2e;           /* warm tertiary accent (deeper)   */
  --nl-success:#1f9d57;
  --nl-warning:#e08a1e;
  --nl-danger:#d8453f;

  --nl-link:#5457ee;
  --nl-cta-secondary:transparent;
  --nl-cta-secondary-border:rgba(20,26,43,.16);

  /* Hairlines for light separation */
  --nl-border:rgba(20,26,43,.12);
  --nl-border-soft:rgba(20,26,43,.07);
  --nl-muted:#eaedf7;

  --nl-maxw:1180px;
  /* Precision instrument: sharp corners (4–8px max) */
  --nl-radius:6px;
  --nl-radius-lg:8px;
  /* Soft, neutral elevation for light surfaces */
  --nl-shadow:0 16px 40px rgba(28,38,86,.12);
  --nl-glow:0 0 0 1px rgba(84,87,238,.12);
  --nl-card-shadow:0 0 0 1px rgba(20,26,43,.06), 0 6px 18px rgba(28,38,86,.06);
  --nl-card-shadow-hover:0 0 0 1px rgba(84,87,238,.22), 0 16px 34px rgba(28,38,86,.12);

  /* Typography */
  --nl-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --nl-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--nl-text);
  background:
    radial-gradient(1100px 700px at 88% -10%, rgba(84,87,238,.07), transparent 60%),
    radial-gradient(900px 600px at 4% 0%, rgba(234,122,46,.04), transparent 55%),
    var(--nl-bg);
  background-attachment: fixed;
  font-family: var(--nl-font-sans);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial serif headlines — high-contrast, tight, generous leading */
h1,h2,h3,h4,.font-serif{
  font-family: var(--nl-font-serif);
  font-weight:500;
  letter-spacing:-0.02em;
  color:var(--nl-text);
}
h1{ line-height:1.0; }
h2,h3{ line-height:1.15; }

a{color:var(--nl-link); text-decoration:none}
a:hover{ text-decoration:underline }
.container{ max-width: var(--nl-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ─────────────────────────────────────────────────────────────
   1) HEADER / BRAND
   ───────────────────────────────────────────────────────────── */
.site-header{
  /* Frosted light glass + soft hairline under, no hard divider line */
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  position:sticky; top:0; z-index:999;
  box-shadow: inset 0 -1px 0 0 var(--nl-border-soft), 0 8px 30px rgba(28,38,86,.06);
}
.site-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:20px 10px; gap:16px; position:relative; }
.brand{ display:flex; align-items:center; gap:12px;}
/* Editorial serif wordmark: glyph + Neurallab */
.brand-link{ display:inline-flex; align-items:center; gap:10px; color:var(--nl-text); }
.brand-link:hover{ text-decoration:none; }
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--nl-radius);
  background: linear-gradient(135deg, var(--nl-accent), var(--nl-accent-strong));
  color: var(--nl-on-primary);
}
.brand-mark i{ width:22px; height:22px; }
.brand-name{ font-family:var(--nl-font-serif); font-size:1.5rem; font-weight:600; letter-spacing:-.03em; color:var(--nl-text); }
.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-link .custom-logo {
  height: 80px;
  width: auto;
}

/* ────────────────────────────────────────────────
   Header: mostra solo logo in mobile, nasconde titolo
   ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .custom-logo-link .custom-logo {
    height: 55px;
    width: auto;
  }
}
/* ─────────────────────────────────────────────────────────────
   2) PRIMARY NAV (desktop)
   ───────────────────────────────────────────────────────────── */
.site-nav > ul,
.site-nav > .menu {
  list-style:none; padding:0; margin:0;
  display:flex; gap:26px;        /* solo il livello top è flex */
  align-items:center;
}
.site-nav li{ position:relative }
.site-nav a{ font-family:var(--nl-font-serif); color: var(--nl-text-dim); text-decoration:none; font-weight:400; font-size:1.05rem; transition: color .3s ease; }
.site-nav a:hover{ color: var(--nl-text); text-decoration:none }
.site-nav .menu-item-has-children > a::after{ content:"▾"; font-size:.7rem; margin-left:6px; opacity:.8 }

/* Dropdown (desktop) — recessed obsidian panel, no structural border */
.site-nav .sub-menu{
  position: absolute; left: 0; top: 100%; transform: translateY(8px);
  background: var(--nl-bg-lowest);
  border-radius: var(--nl-radius-lg); padding: 8px 0; min-width: 220px;
  box-shadow: var(--nl-shadow), var(--nl-glow); 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: rgba(84,87,238,.08); color: var(--nl-accent); }

/* 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:#ffffff; box-shadow: 0 16px 30px rgba(28,38,86,.12), inset 0 1px 0 0 var(--nl-border-soft);
  }
  .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; }

  /* Su mobile la CTA dell'header viene nascosta per evitare overflow:
     la navigazione passa dall'hamburger e l'hero ha già le CTA principali.
     Specificità .site-header per vincere sulla regola base .header-ctas. */
  .site-header .header-ctas{ display:none; }
}

/* ─────────────────────────────────────────────────────────────
   4) LAYOUT UTILITIES
   ───────────────────────────────────────────────────────────── */
.header-ctas { display: flex; gap: 10px; }
.social-icons { display: flex; gap: 10px; margin-top: 8px; }
.social-icons a { color: var(--nl-text-dim); transition: color .2s ease; }
.social-icons a:hover { color: var(--nl-accent); text-decoration: none; }

/* ─────────────────────────────────────────────────────────────
   5) BUTTONS
   ───────────────────────────────────────────────────────────── */
.cta{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, var(--nl-accent), var(--nl-accent-strong));
  color:var(--nl-on-primary);
  border-radius:var(--nl-radius); padding:11px 22px; font-weight:600;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.18), 0 8px 24px rgba(128,131,255,.22);
  border:0; transition: filter .2s ease, box-shadow .2s ease;
}
.cta:hover{ filter:brightness(1.08); color:var(--nl-on-primary); text-decoration:none; box-shadow: inset 0 1px 0 0 rgba(255,255,255,.25), 0 10px 30px rgba(128,131,255,.32); }
.cta-secondary{
  background: transparent; color: var(--nl-accent);
  border: 1px solid var(--nl-cta-secondary-border);
  border-radius: var(--nl-radius); padding:10px 20px; font-weight:600; box-shadow:none;
  transition: background .2s ease, border-color .2s ease;
}
.cta-secondary:hover{ background: rgba(84,87,238,.06); border-color: var(--nl-accent); color: var(--nl-accent); text-decoration:none; }

/* ─────────────────────────────────────────────────────────────
   6) HERO / SECTIONS / CARDS
   ───────────────────────────────────────────────────────────── */
.hero{
  background:
    radial-gradient(1100px 560px at 8% -10%, rgba(84,87,238,.10), transparent 55%),
    radial-gradient(800px 420px at 92% 0%, rgba(234,122,46,.05), transparent 55%);
  padding:clamp(64px,9vw,110px) 0 clamp(48px,6vw,72px);
}
.hero h1{ font-family:var(--nl-font-serif); font-weight:500; font-size: clamp(36px, 6vw, 68px); margin:0 0 16px; line-height:1.0; letter-spacing:-0.03em; }
.hero h1 em{ font-style:italic; color:var(--nl-accent); }
.hero p{ color:var(--nl-text-dim); max-width:720px; font-size:clamp(1.05rem,1.6vw,1.25rem); font-weight:300; line-height:1.7; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap}

.section{ padding:clamp(48px,7vw,88px) 0; }

.cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:20px; margin-top:24px
}
/* Light cards: white surface, hairline + soft shadow, lift on hover */
.card{ background:var(--nl-card); padding:24px; border-radius:var(--nl-radius-lg); border:0; box-shadow: var(--nl-card-shadow); transition: box-shadow .25s ease, transform .25s ease; }
.card:hover{ box-shadow: var(--nl-card-shadow-hover); transform: translateY(-2px); }
.card h3{ margin:0 0 6px}
.card__footer{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; margin:8px 0 0;
}
.card__footer span{ white-space:nowrap; opacity:.7; }
.card__thumbnail{ width:100%; height:auto; border-radius:12px; margin:.25rem 0; }
.card h3{ margin-top:0; }
.section-head{ margin-bottom:12px; }
.section-head h2{ margin:0; }
.badge{ display:inline-block; padding:5px 12px; border-radius:var(--nl-radius); background:rgba(84,87,238,.10); color:var(--nl-accent); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-family:var(--nl-font-sans); }

/* ─────────────────────────────────────────────────────────────
   6) FOOTER
   ───────────────────────────────────────────────────────────── */
.site-footer{ background:var(--nl-bg-lowest); color:var(--nl-text-dim); padding:clamp(56px,7vw,88px) 0 0; box-shadow: inset 0 1px 0 0 var(--nl-border-soft); }
.footer-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:40px }
.footer-brand h4{ font-family:var(--nl-font-serif); font-size:1.35rem; font-weight:600; }
.footer-nav h4{ margin:0 0 18px; color: var(--nl-text); font-family:var(--nl-font-sans); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.footer-nav ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.footer-nav a{ color: var(--nl-text-dim); transition:color .2s ease; }
.footer-nav a:hover{ color: var(--nl-accent); text-decoration:none; }
.footer-bottom{ margin-top:56px; padding:24px 0; box-shadow: inset 0 1px 0 0 var(--nl-border); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.82rem; }

/* ─────────────────────────────────────────────────────────────
   7) ACCESSIBILITY
   ───────────────────────────────────────────────────────────── */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* Global focus-visible ring */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--nl-accent);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   8) CONTENT BASICS
   ───────────────────────────────────────────────────────────── */
main{min-height:50vh}
.post-card{ background:var(--nl-card); padding:24px; border-radius:var(--nl-radius-lg); border:0; box-shadow: var(--nl-card-shadow); }

.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;
  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;
  }
}
@media (max-width: 900px) { .nl-cols-4 .card { grid-column: span 2; } }
@media (max-width: 700px) { .section .cards { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────
   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: 0;
  border-bottom: 2px solid var(--nl-border);
  color: var(--nl-text);
  border-radius: var(--nl-radius) var(--nl-radius) 0 0;
  padding: 12px 14px;
  font-family: var(--nl-font-sans);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nl-form input:focus,
.nl-form select:focus,
.nl-form textarea:focus {
  outline: none;
  border-bottom-color: var(--nl-accent);
  box-shadow: 0 4px 14px -6px rgba(84,87,238,.5);
}
.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; }
}