/* LegaleAI shared styles — applies AFTER inline <style> blocks per cascade */

/* ── Tokens canonici ────────────────────────────────────────── */
:root{
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --ink:#111;
  --ink2:#333;
  --ink3:#666;
  --ink4:#999;
  --bg:#fafaf8;
  --bg2:#f3f1ec;
  --bgd:#0f1623;
  --gold:#b5891e;
  --goldl:rgba(181,137,30,.08);
  --goldm:rgba(181,137,30,.18);
  --bdr:#e2ded6;
  --gutter:clamp(24px,6vw,80px);
  --max:1100px;
  --prose:680px;
  --prose-wide:960px;
}

/* ── Reset universale ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

/* ── Tipografia base ────────────────────────────────────────── */
html{font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100vw}
body{font-family:var(--sans);color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}

/* ── Editorial prose (blog body) ────────────────────────────── */
.prose p{
  font-family:var(--serif);
  font-size:1.125rem;
  font-weight:400;
  line-height:1.7;
  color:var(--ink);
  margin-bottom:28px;
  letter-spacing:-.003em;
  max-width:var(--prose);
}
.prose ul,.prose ol{
  margin-bottom:28px;
  padding-left:28px;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:var(--prose);
}
.prose ul li,.prose ol li{
  font-family:var(--serif);
  font-size:1.0625rem;
  font-weight:400;
  color:var(--ink);
  line-height:1.65;
  letter-spacing:-.003em;
  position:relative;
}
.prose ul li::before{content:"\2713";color:var(--gold);font-weight:700;font-size:.75rem;position:absolute;left:-24px;top:5px}
.prose ol{counter-reset:ol}
.prose ol li{counter-increment:ol}
.prose ol li::before{content:counter(ol)".";color:var(--gold);font-weight:600;position:absolute;left:-28px;top:0}
.prose h2{
  font-family:var(--serif);
  font-size:1.875rem;
  line-height:1.18;
  letter-spacing:-.018em;
  margin:72px 0 18px;
  font-weight:500;
  color:var(--ink);
  max-width:var(--prose);
  scroll-margin-top:80px;
}
.prose h3{
  font-family:var(--sans);
  font-size:1.0625rem;
  font-weight:600;
  letter-spacing:.005em;
  margin:44px 0 10px;
  color:var(--ink);
  max-width:var(--prose);
}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic;color:var(--ink2)}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.prose blockquote{
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:400;
  font-style:italic;
  line-height:1.55;
  color:var(--ink);
  border-left:3px solid var(--gold);
  padding:8px 0 8px 24px;
  margin:36px 0;
  max-width:var(--prose);
}
.prose-table-wrap{margin:40px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:var(--prose-wide)}

/* related-section: "Leggi anche" big-tech card (override blog inline) */
.related-section{margin:96px auto 0 !important;padding-top:64px !important;border-top:1px solid var(--bdr);max-width:var(--prose-wide)}
.related-section h2,.related-h{font-family:var(--serif);font-size:1.875rem !important;font-weight:500 !important;letter-spacing:-.018em;color:var(--ink);margin-bottom:32px !important}
.related-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:24px !important}
.related-card,.related-item{
  display:flex !important;
  flex-direction:column !important;
  padding:32px 28px !important;
  background:#fff !important;
  border:1px solid var(--bdr) !important;
  border-radius:14px !important;
  transition:all .3s cubic-bezier(.2,.8,.2,1) !important;
  position:relative;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  min-height:200px;
  cursor:pointer;
}
.related-card::before,.related-item::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(181,137,30,0) 0%,rgba(181,137,30,.06) 100%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.related-card::after,.related-item::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;
  background:var(--gold);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.related-card:hover,.related-item:hover{
  border-color:#d4cfc5 !important;
  box-shadow:0 16px 40px rgba(15,22,35,.08),0 4px 12px rgba(15,22,35,.04) !important;
  transform:translateY(-4px) !important;
}
.related-card:hover::before,.related-item:hover::before{opacity:1}
.related-card:hover::after,.related-item:hover::after{transform:scaleY(1)}
.related-cat,.related-tag{
  font-family:var(--sans) !important;
  font-size:.6875rem !important;
  font-weight:600 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--gold) !important;
  margin-bottom:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}
.related-cat::before,.related-tag::before{
  content:'';
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}
.related-title{
  font-family:var(--serif) !important;
  font-size:1.1875rem !important;
  font-weight:500 !important;
  line-height:1.3 !important;
  letter-spacing:-.012em !important;
  color:var(--ink) !important;
  margin-bottom:auto !important;
  padding-bottom:24px;
  transition:color .25s !important;
  max-width:none !important;
}
.related-card:hover .related-title,.related-item:hover .related-title{color:var(--gold) !important}
.related-meta{
  font-family:var(--sans);
  font-size:.75rem;
  color:var(--ink4);
  display:flex;
  gap:10px;
  margin-bottom:16px;
}
.related-arrow{
  font-family:var(--sans) !important;
  font-size:.875rem !important;
  font-weight:500 !important;
  color:var(--gold) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:auto !important;
  transition:gap .25s,transform .25s !important;
  align-self:flex-start !important;
}
.related-card:hover .related-arrow,.related-item:hover .related-arrow{gap:14px !important;transform:translateX(2px) !important}
@media(max-width:900px){.related-grid{grid-template-columns:1fr 1fr !important}}
@media(max-width:600px){
  .related-section{margin-top:64px !important;padding-top:40px !important}
  .related-section h2,.related-h{font-size:1.5rem !important}
  .related-grid{grid-template-columns:1fr !important;gap:14px !important}
  .related-card,.related-item{padding:24px 20px !important;min-height:auto !important}
  .related-title{font-size:1.0625rem !important;padding-bottom:18px}
}

/* article-cta: dark box, force white text (override .prose p inheritance) */
.prose .article-cta,.article-cta{background:var(--bgd);border-radius:14px;padding:56px 44px;text-align:center;margin:80px 0 0;max-width:var(--prose-wide)}
.prose .article-cta h3,.article-cta h3{font-family:var(--serif);font-size:1.625rem;font-weight:500;color:#fff;margin-bottom:14px;letter-spacing:-.012em;line-height:1.2;max-width:none}
.prose .article-cta h3 em,.article-cta h3 em{font-style:italic;color:var(--gold);font-weight:500}
.prose .article-cta p,.article-cta p{font-family:var(--sans);font-size:1rem;font-weight:400;color:rgba(255,255,255,.78);margin-bottom:28px;line-height:1.65;max-width:520px;margin-left:auto;margin-right:auto;letter-spacing:-.003em}
.prose .article-cta a,.article-cta a{display:inline-block;font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--bgd);background:var(--gold);padding:14px 32px;border-radius:8px;transition:all .2s;text-decoration:none;letter-spacing:-.005em}
.prose .article-cta a:hover,.article-cta a:hover{background:#cc9d2a;transform:translateY(-1px)}
@media(max-width:600px){
  .prose .article-cta,.article-cta{padding:36px 24px;border-radius:12px}
  .prose .article-cta h3,.article-cta h3{font-size:1.25rem}
  .prose .article-cta p,.article-cta p{font-size:.9375rem}
}

/* ── Reset internal <nav class="..."> ─────────────────────────
   Il selettore nav globale (inline su ogni pagina) matcha TUTTI i
   <nav>, anche quelli annidati come .faq-toc (FAQ chips) e
   .drivers-summary (5-driver indice): essendo dopo nel DOM e con
   z-index uguale, coprivano la nav principale.
   Specificity: nav[class] (0,0,1,1) > nav (0,0,0,1) → vince. */
nav[class]{
  position:static;
  top:auto;
  left:auto;
  right:auto;
  height:auto;
  background:transparent;
  backdrop-filter:none;
  border-bottom:0;
  z-index:auto;
  display:block;
  align-items:initial;
}
/* .faq-toc usa display:flex+wrap, riapplico (sovrascrive il reset) */
nav.faq-toc{display:flex;flex-wrap:wrap;align-items:center}

/* ── Num pill per H2 sequenziali (blog list-style) ──────────────
   Es: <h2><span class="num-pill">1</span>Errore...</h2>
   Usata in: 5-driver, 5-errori-chatgpt, come-scrivere-memoria,
   sentenze-cassazione-2025. */
.prose h2 .num-pill,.prose h2 .driver-num{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:rgba(181,137,30,.08);border:1px solid rgba(181,137,30,.25);color:var(--gold);font-family:var(--sans);font-size:.875rem;font-weight:600;margin-right:.6rem;vertical-align:1px;flex-shrink:0}
@media(max-width:600px){.prose h2 .num-pill,.prose h2 .driver-num{width:1.75rem;height:1.75rem;font-size:.8125rem;margin-right:.5rem}}

/* ── Hamburger button ───────────────────────────────────────── */
.ham{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:8px;transition:background .15s}
.ham:hover{background:var(--bg2)}
.ham span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .15s}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Mobile menu big-tech (overlay sotto la nav fissa) ───────
   La nav resta sempre visibile in alto (logo + hamburger).
   L'overlay si apre da top:60px (sotto la nav) e l'hamburger
   anima a X tramite .ham.open (stesso allineamento, stessa posizione). */
.mob-menu{
  position:fixed;
  top:60px;
  left:0;
  right:0;
  bottom:0;
  background:var(--bg);
  z-index:150;
  display:none;
  flex-direction:column;
  padding:32px 24px 48px;
  overflow-y:auto;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.mob-menu.open{display:flex;opacity:1;pointer-events:auto}
.mob-menu-inner{
  max-width:560px;
  margin:0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
}
.mob-menu .mm-eyebrow{
  font-family:var(--sans);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:24px;
  display:block;
}
.mob-menu .mm-item{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--bdr);
  text-decoration:none;
  transition:padding .2s,color .2s;
}
.mob-menu .mm-item:hover,.mob-menu .mm-item:active{padding-left:8px;color:var(--gold)}
.mob-menu .mm-num{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:500;
  color:var(--ink4);
  letter-spacing:.05em;
  min-width:28px;
  font-variant-numeric:tabular-nums;
}
.mob-menu .mm-txt{
  font-family:var(--serif);
  font-size:1.875rem;
  font-weight:400;
  letter-spacing:-.018em;
  line-height:1.1;
  color:var(--ink);
}
.mob-menu .mm-item:hover .mm-txt,.mob-menu .mm-item:active .mm-txt{color:var(--gold)}
.mob-menu .mm-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:36px;
  padding:18px 24px;
  background:var(--ink);
  color:#fff;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:500;
  letter-spacing:-.005em;
  border-radius:10px;
  text-decoration:none;
  transition:background .15s,transform .15s;
}
.mob-menu .mm-cta:hover,.mob-menu .mm-cta:active{background:var(--ink2);transform:translateY(-1px)}
.mob-menu .mm-foot{
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid var(--bdr);
  display:flex;
  flex-wrap:wrap;
  gap:18px 24px;
}
.mob-menu .mm-foot a{
  font-family:var(--sans);
  font-size:.8125rem;
  color:var(--ink3);
  letter-spacing:-.005em;
  text-decoration:none;
}
.mob-menu .mm-foot a:hover{color:var(--gold)}
/* logo+close interni overlay nascosti: la nav esterna resta visibile e
   l'hamburger anima a X via .ham.open (stessa identica posizione). */
.mob-menu-close{display:none}
.mob-menu-logo{display:none}
@media(max-width:768px){.ham{display:flex}.nl{display:none !important}}

/* ── Mobile protect globale ─────────────────────────────────── */
@media(max-width:600px){
  body{min-width:0;overflow-x:hidden}
  .article-wrap,.page-wrap,.section-wrap,.wrap,main{
    min-width:0 !important;
    max-width:100vw !important;
    box-sizing:border-box !important;
  }
  .article-wrap,.page-wrap,.section-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .prose,.article-wrap > *,.page-wrap > *,.section-wrap > *{
    min-width:0 !important;
    max-width:100% !important;
  }
  .prose-table-wrap{max-width:calc(100vw - 32px) !important}
  pre,code{
    white-space:pre-wrap !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  img,iframe,video{max-width:100% !important;height:auto !important}
  table{max-width:100% !important}

  /* prose typography mobile */
  .prose p{font-size:1.0625rem;line-height:1.65;margin-bottom:22px}
  .prose ul li,.prose ol li{font-size:1rem;line-height:1.6}
  .prose h2{font-size:1.5rem;margin:48px 0 14px;line-height:1.2}
  .prose h3{font-size:1rem;margin:32px 0 8px}
  .prose blockquote{font-size:1.0625rem;padding:6px 0 6px 18px;margin:24px 0}
}