/* ── VARIABILI CSS CONDIVISE ── */
:root {
  --orange:      #E8612A;
  --orange-deep: #C44E1F;
  --orange-lt:   #FFF0E6;
  --orange-mid:  #FFDCC7;
  --orange-glow: rgba(232,97,42,.18);
  --ink:         #111110;
  --ink-soft:    #1C1C1A;
  --slate:       #4A4A46;
  --muted:       #8A8A84;
  --white:       #FAFAF7;
  --warm:        #F4F1EC;
  --border:      rgba(232,97,42,.14);
  --border-md:   rgba(232,97,42,.24);
  --border-str:  rgba(232,97,42,.38);
  --r:           14px;
  --ease:        cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--white);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ── UTILITY TAG ── */
.tag {
  display: inline-block;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--orange); background: var(--orange-lt);
  border-radius: 999px; padding: .3em 1.05em;
}

/* ── NAV ── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 5%;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,250,247,.92);
  backdrop-filter: blur(18px);
  transition: box-shadow .3s;
}
.nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.06); }
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.nav-logo span { color: var(--orange); }
.nav-right { display: flex; align-items: center; gap: 1.1rem; }
.nav-note {
  font-size: .75rem; color: var(--muted); font-weight: 500;
  display: flex; align-items: center; gap: .35rem;
}
.nav-dot { width: 6px; height: 6px; background: var(--orange); border-radius: 50%; animation: pulse 2s infinite; }

@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.3; transform:scale(.55); }
}

/* ── NAV — menu principale ibrido (Sessione 53) ── */
.nav-links {
  display: flex; align-items: center; gap: 1.6rem;
  list-style: none;
}
.nav-links > li { display: flex; align-items: center; }
.nav-link {
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
  transition: color .15s;
}
.nav-link:hover, .nav-link.is-active { color: var(--orange); }
.nav-link-soon { color: var(--muted); cursor: default; }
.nav-link-soon:hover { color: var(--muted); }

/* Voce "Blog" (wp_nav_menu / fallback) — stesso stile delle voci statiche */
.nav-blog-menu { display: flex; list-style: none; margin: 0; padding: 0; }
.nav-blog-menu li { display: flex; }
.nav-blog-menu a {
  font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
  transition: color .15s;
}
.nav-blog-menu a:hover, .nav-blog-menu .current-menu-item a { color: var(--orange); }

/* Dropdown "Gestione" — puro CSS/HTML (checkbox hack), nessun JS.
   Il checkbox e' visivamente nascosto ma resta operabile da tastiera; la <label> agisce
   da freccia toggle indipendente dal link "Gestione" (che naviga verso /gestione/).
   Su desktop (hover:hover) si apre anche al passaggio del mouse, senza bisogno di toccare
   il checkbox. */
.nav-dropdown { position: relative; gap: .3rem; }
.nav-dropdown-checkbox {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.nav-dropdown-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.2rem; height: 1.2rem; cursor: pointer; color: var(--muted);
}
.nav-dropdown-arrow::after {
  content: ''; width: .38rem; height: .38rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -.25rem;
  transition: transform .15s;
}
.nav-dropdown-checkbox:checked ~ .nav-dropdown-arrow::after { transform: rotate(-135deg); margin-top: .25rem; }
.nav-dropdown-checkbox:focus-visible ~ .nav-dropdown-arrow { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

.nav-dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0; margin-top: .7rem;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0,0,0,.1);
  min-width: 220px; padding: .45rem; list-style: none; z-index: 200;
}
.nav-dropdown-menu li { display: block; }
.nav-dropdown-menu a {
  display: block; padding: .55em .8em; border-radius: 8px;
  font-size: .82rem; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; transition: background .15s, color .15s;
}
.nav-dropdown-menu a:hover { background: var(--orange-lt); color: var(--orange-deep); }

.nav-dropdown-checkbox:checked ~ .nav-dropdown-menu { display: block; }
@media (hover: hover) {
  .nav-dropdown:hover .nav-dropdown-menu { display: block; }
}

.nav-cta {
  background: var(--orange); color: var(--white);
  font-weight: 700; font-size: .82rem;
  padding: .55em 1.35em; border-radius: 999px;
  text-decoration: none;
  transition: background .17s, transform .12s, box-shadow .17s;
  box-shadow: 0 2px 10px rgba(232,97,42,.25);
}
.nav-cta:hover { background: var(--orange-deep); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,97,42,.35); }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--border);
  padding: 2rem 5%;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  background: var(--white);
}
.footer-logo { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:var(--ink); text-decoration:none; }
.footer-logo span { color: var(--orange); }
.footer-links { display:flex; gap:1.4rem; flex-wrap:wrap; }
.footer-links a { font-size:.74rem; color:var(--muted); text-decoration:none; transition:color .15s; }
.footer-links a:hover { color: var(--orange); }
.footer-copy { font-size:.71rem; color:var(--muted); width:100%; }

/* ── RESPONSIVE NAV — hamburger + accordion (Sessione 63) ──
   Prima di questa sessione, sotto i 900px .nav-links restava la stessa barra orizzontale di
   link ma con overflow-x:auto per farla scorrere quando non ci stava tutta in larghezza. Quel
   overflow-x:auto, senza un overflow-y dichiarato esplicitamente, viene forzato dal browser a
   overflow-y:auto per specifica CSS (quando un asse non e' "visible", l'altro smette di esserlo
   davvero) — questo clippava silenziosamente i sottomenu .nav-dropdown-menu (position:absolute)
   dei dropdown Gestione/Blog, che si estendono oltre il box della barra. Bug preesistente dalla
   Sessione 53, scoperto in Sessione 62 verificando il tap su mobile, mai notato prima. Testata
   anche l'opzione minima overflow-x:auto + overflow-y:visible: non affidabile (la specifica
   forza comunque overflow-y ad auto quando overflow-x non e' visible, quindi non risolve).
   Soluzione scelta: hamburger dedicato + overlay verticale (checkbox hack, nessun JS, stesso
   meccanismo dei dropdown) con i sottomenu Gestione/Blog che diventano accordion IN FLUSSO
   NORMALE (position:static) invece che assoluti — elimina il problema alla radice perche' non
   c'e' piu' alcun overflow da gestire per i sottomenu. L'overlay usa position:absolute ancorato
   a .nav (che e' position:sticky, quindi fa comunque da containing block per i figli assoluti),
   non un'altezza nav misurata a mano: resta corretto anche se .nav va a capo su piu' righe. */
.nav-mobile-checkbox { display: none; }
.nav-mobile-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 2.2rem; height: 2.2rem; cursor: pointer;
}
.nav-mobile-toggle span {
  display: block; width: 100%; height: 2px;
  background: var(--ink-soft); border-radius: 2px;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}

@media (max-width:900px) {
  .nav { position: relative; }

  .nav-mobile-checkbox {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .nav-mobile-toggle { display: flex; order: 1; }
  .nav-mobile-checkbox:checked ~ .nav-mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-mobile-checkbox:checked ~ .nav-mobile-toggle span:nth-child(2) { opacity: 0; }
  .nav-mobile-checkbox:checked ~ .nav-mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-mobile-checkbox:focus-visible ~ .nav-mobile-toggle { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

  /* #nav (id, non solo classe) per non toccare .blog-index-pagination .nav-links, che riusa la
     stessa classe .nav-links per tutt'altro scopo (paginazione the_posts_pagination()) e non e'
     figlia di #nav — senza questo scoping l'overlay (position/display/max-height) si
     applicherebbe per errore anche li'. */
  #nav .nav-links {
    display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: 80vh; overflow-y: auto;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(0,0,0,.12);
    padding: .5rem 5% 1.2rem;
    z-index: 150;
  }
  #nav .nav-mobile-checkbox:checked ~ .nav-links { display: flex; }
  #nav .nav-links > li { width: 100%; padding: .8rem 0; border-bottom: 1px solid var(--border); }
  #nav .nav-links > li:last-child { border-bottom: none; }
  #nav .nav-link { font-size: .95rem; }

  /* Dropdown Gestione/Blog: da riga assoluta a griglia (link + freccia) con il sottomenu che
     scorre in flusso normale sulla riga sotto (grid-column:1/-1), non piu' sovrapposto. */
  .nav-links > li.nav-dropdown {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
  }
  .nav-dropdown-arrow { width: 2.2rem; height: 2.2rem; justify-self: end; }
  .nav-dropdown-menu {
    grid-column: 1 / -1;
    position: static;
    margin: .6rem 0 0;
    box-shadow: none; border: none;
    background: var(--warm);
    min-width: 0; width: 100%;
  }
}
@media (max-width:720px) { .nav-note { display:none; } }
@media (max-width:540px) { .nav-cta { display:none; } }

@media (prefers-reduced-motion:reduce) {
  .reveal { opacity:1; transform:none; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── Box "copia prompt IA" (blog, single.php) ── componente riutilizzabile: ogni articolo
   puo' incorporare quante istanze vuole con lo stesso markup fisso .ab-copy-box/.ab-copy-head/
   .ab-copy-label/.ab-copy-btn/.ab-copy-text (vedi copy-prompt.js per il comportamento del
   pulsante). Nessun foglio di stile dedicato al blog esiste ancora: vive qui in global.css
   finche' non ne servira' uno solo per il blog. */
.ab-copy-box {
  background: var(--orange-lt);
  border-left: 4px solid var(--orange);
  border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  margin: 2rem 0;
}
.ab-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .7rem;
}
/* wpautop (the_content) inserisce un <br /> tra .ab-copy-label e .ab-copy-btn quando il
   markup multi-riga del box passa dal campo contenuto di un articolo — capita con OGNI post
   che usa questo contratto di markup fisso, non solo con questo articolo. Va neutralizzato qui
   invece che imponendo di scrivere il markup su una sola riga in ogni post futuro. */
.ab-copy-head br { display: none; }
.ab-copy-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: var(--ink);
}
.ab-copy-btn {
  flex-shrink: 0;
  min-height: 40px;
  padding: .5em 1.1em;
  background: var(--white);
  color: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.ab-copy-btn:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: var(--white);
}
.ab-copy-btn.is-copied {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
.ab-copy-text {
  font-family: ui-monospace, Consolas, Menlo, monospace;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}
@media (max-width:600px) {
  .ab-copy-box { padding: 1rem; }
  .ab-copy-head { flex-wrap: wrap; }
}

/* ── Box lead magnet "scheda pulizie" (blog, Milestone 10) ── componente riutilizzabile, stesso
   principio di .ab-copy-box (contratto di markup fisso + JS dedicato in lead-magnet.js) ma
   identita' visiva volutamente distinta (bordo intero + ombra su sfondo bianco, non un accento
   solo a sinistra su sfondo colorato) per non confondersi ne' con .ab-copy-box ne' con .blog-cta
   (box scuro, altro scopo: aggancio MOFU verso i servizi, non raccolta email). */
.ab-lead-magnet {
  background: var(--white);
  border: 1px solid var(--border-md);
  border-radius: var(--r);
  padding: 1.75rem;
  margin: 2.5rem 0;
  box-shadow: 0 4px 20px rgba(0,0,0,.05);
}
.ab-lead-magnet-eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-lt);
  border-radius: 999px;
  padding: .3em 1.05em;
  margin-bottom: .9rem;
}
.ab-lead-magnet-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: .6rem;
}
.ab-lead-magnet-text {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 1.5rem;
}
/* Wrapper introdotto nella rifinitura UX (Sessione 67): raggruppa la riga di prompt sopra il
   campo email e il form vero e proprio, cosi' un solo toggle di classe sul box
   (.ab-lead-magnet-is-success) li nasconde entrambi dopo una submit riuscita, senza dover
   gestire due selettori separati. .ab-lead-magnet-status resta FUORI da questo wrapper (vedi
   markup nel post) proprio per restare visibile quando il form-wrap sparisce. */
.ab-lead-magnet-is-success .ab-lead-magnet-form-wrap { display: none; }
.ab-lead-magnet-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ab-lead-magnet-input {
  width: 100%;
  padding: .75em 1em;
  border: 1px solid var(--border-md);
  border-radius: 8px;
  background: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: var(--ink-soft);
}
.ab-lead-magnet-input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-glow);
}
.ab-lead-magnet-consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--slate);
  cursor: pointer;
}
.ab-lead-magnet-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--orange);
  cursor: pointer;
}
.ab-lead-magnet-consent a { color: var(--orange); }
.ab-lead-magnet-btn {
  align-self: flex-start;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: .88rem;
  padding: .75em 1.8em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .17s, transform .12s, box-shadow .17s;
  box-shadow: 0 2px 10px rgba(232,97,42,.25);
}
.ab-lead-magnet-btn:hover:not(:disabled) {
  background: var(--orange-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,97,42,.35);
}
.ab-lead-magnet-btn:disabled { opacity: .6; cursor: default; transform: none; }
.ab-lead-magnet-status:empty { display: none; }
/* margin-top solo quando non vuoto (rifinitura Sessione 67): lo status e' ora un fratello del
   form-wrap, non piu' un figlio del form con lo spazio dato gratis dal gap del flex — quando e'
   :empty resta display:none quindi il margine non produce spazio vuoto indesiderato. */
.ab-lead-magnet-status.is-error,
.ab-lead-magnet-status.is-success {
  margin-top: 1rem;
}
.ab-lead-magnet-status.is-error {
  font-size: .85rem;
  line-height: 1.5;
  color: #C0392B;
}
.ab-lead-magnet-status.is-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
  font-size: .88rem;
  color: var(--ink-soft);
}
.ab-lead-magnet-download {
  display: inline-block;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  font-size: .85rem;
  padding: .65em 1.5em;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s;
}
.ab-lead-magnet-download:hover { background: var(--ink-soft); }
@media (max-width:600px) {
  .ab-lead-magnet { padding: 1.25rem; }
}

/* ── Articolo singolo del blog (single.php) ── nessun foglio blog dedicato esiste ancora,
   vive qui insieme al resto degli stili condivisi.
   .entry-container/.entry-inner sono divisi in due livelli dalla Milestone 7bis per un motivo
   preciso: un padding percentuale ("5%") si calcola sempre rispetto alla larghezza del
   containing block, non rispetto al max-width dell'elemento stesso. Tenendo padding e max-width
   sullo STESSO elemento (come nella Milestone 7), il padding continua a crescere con il
   viewport anche dopo che il max-width ha bloccato la larghezza visibile, mangiando spazio
   dal budget fisso — bug reale misurato in questa sessione: a 1200px di viewport la griglia
   .single-layout (740+320+48=1108px) andava in overflow di 8px, e ricalcolando su tutte le
   larghezze desktop realistiche (1280-1920px) l'overflow non sparisce mai, peggiora anzi
   all'aumentare del viewport. Soluzione: .entry-container fa SOLO da padding (5%, invariato,
   nessun max-width) e .entry-inner (nuovo) fa SOLO da cap (max-width, margin:auto) + ora anche
   da "pannello" (rifinitura successiva, vedi sotto) — il padding del pannello e' in unita'
   fisse (rem), non percentuale, quindi non riapre il bug: non cresce mai con il viewport. */
.entry-container {
  margin: 3rem 0;
  padding: 0 5%;
  background: var(--warm);
}
/* Pannello con elevazione leggera (rifinitura successiva alla Milestone 7bis): l'area esterna
   (.entry-container, sopra) prende lo sfondo caldo --warm, mentre .entry-inner diventa il
   "pannello" vero e proprio — sfondo --white (uguale a quello della pagina: il contrasto e'
   dato solo dalla striscia --warm intorno, non da un bordo rigido), stesso raggio delle card
   del blog (var(--r), coerenza visiva) e un'ombra morbida a bassa opacita' (si legge come
   "sollevato", non come un popup). Il max-width e' 1200px (1120px + 2×40px di padding pieno):
   una volta che .entry-inner raggiunge il proprio cap (viewport larghi), l'area di contenuto
   disponibile per .single-layout torna a essere 1200-80=1120px, la STESSA di prima del pannello.

   **Correzione Sessione 70**: il padding pieno (2.5rem/40px per lato) applicato UNIFORMEMENTE
   aveva costretto il breakpoint di .single-layout a salire da 1250px a 1360px (Sessione 69),
   facendo perdere la vista a due colonne — e quindi la CTA sticky — proprio a 1280px, una
   larghezza desktop comune. Soluzione: il padding del pannello SCALA in tre fasce (sempre in
   unita' assolute, rem — mai percentuali, per non riaprire il bug della Sessione 58):
   - ≥1500px: pieno, 2.5rem (40px per lato) — 80px totali.
   - 1280-1499px: ridotto, 1rem (16px per lato) — 32px totali. Libera 48px extra rispetto al
     padding pieno, quanto basta per far rientrare la griglia (740+320+48=1108px) gia' a 1280px
     di viewport con lo stesso margine di sicurezza (12px) della soglia originale della
     Sessione 58: a 1280px, 0.9×1280=1152px di spazio lasciato da .entry-container, meno 32px
     di padding = 1120px disponibili, ≥1108px richiesti.
   - <1280px: pieno di nuovo (nessun bisogno di ridurlo, sotto quella soglia il layout e' gia' a
     colonna singola — vedi il breakpoint di .single-layout piu' sotto, ora tornato a 1279px).
   Non e' stato necessario ridurre la colonna sidebar (320px) ne' alzare ulteriormente il
   max-width: la sola scala del padding recupera abbastanza spazio con il minor impatto visivo
   possibile (il pannello resta "generoso" ovunque tranne in una fascia intermedia stretta). */
.entry-inner {
  max-width: 1200px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--r);
  box-shadow: 0 8px 32px rgba(0,0,0,.06);
  padding: 2.5rem;
}
@media (min-width:1280px) and (max-width:1499px) {
  .entry-inner { padding: 1rem; }
}
@media (max-width:600px) {
  .entry-inner { padding: 1.25rem; }
}

/* Breadcrumb */
.entry-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.entry-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.entry-breadcrumb a:hover { color: var(--orange); }
.entry-breadcrumb-current {
  color: var(--ink-soft);
  font-weight: 500;
  /* Ripete il titolo dell'articolo: su viewport stretti puo' essere piu' largo dello spazio
     disponibile nella riga flex. Senza min-width:0 un flex item non scende mai sotto la sua
     larghezza intrinseca di contenuto, quindi il testo lungo va in overflow orizzontale e viene
     tagliato silenziosamente dal body { overflow-x:hidden } globale invece di andare a capo
     (bug reale osservato su mobile, 390px, con un titolo lungo). */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Immagine in evidenza / fallback gradiente brand — condivisa tra single.php e home.php
   (Milestone 8) via affittarebreve_post_thumbnail_html() in functions.php. */
.entry-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 2rem;
  background: var(--warm);
}
/* Tetto massimo di altezza (rifinitura Sessione 68), SOLO per il fallback gradiente (nessuna
   immagine in evidenza, vedi .entry-thumb-fallback sotto): e' un banner astratto senza
   contenuto reale da perdere, quindi un rapporto fisso 16:9 con tetto di altezza qui non
   "taglia" nulla di informativo — a differenza di una vera immagine in evidenza (Sessione 89,
   vedi la regola dedicata piu' sotto in questa sezione). Scoped con il combinatore diretto ">"
   perche' .entry-thumb e' la STESSA classe riusata dentro .blog-card (home.php/archive.php)
   per le card piccole della griglia, dove il cap non serve mai (16:9 su ~300px di larghezza
   resta gia' ben sotto questa soglia) — niente di nuovo da scoprire li', ma comunque meglio
   non toccarle.
   **Bug reale scoperto e corretto in Sessione 68**: senza un width:100% esplicito su
   .entry-thumb (sopra), Chromium ricalcola la LARGHEZZA del box a partire dall'altezza gia'
   clampata da max-height, usando il rapporto aspect-ratio (420 × 16/9 ≈ 746.67px) invece di
   mantenere la larghezza piena del container — verificato dal vivo: il box misurava 746px
   invece di 1120px, apparendo ristretto e allineato a sinistra. La larghezza del box era
   "auto" (nessuna dichiarazione esplicita, solo il comportamento di riempimento di default dei
   block-level element) — evidentemente non abbastanza "definita" per l'algoritmo di
   trasferimento delle dimensioni di aspect-ratio in questo browser/contesto. Con width:100%
   esplicito la larghezza e' definita a priori e l'algoritmo non la ricalcola piu'. Il bug
   riguardava la combinazione aspect-ratio+max-height, quindi resta rilevante solo per il
   fallback: la regola per le immagini vere qui sotto non usa piu' ne' l'una ne' l'altra
   proprieta', quindi non puo' ripresentarsi li'. */
.entry-inner > .entry-thumb.entry-thumb-fallback { max-height: 420px; }
.entry-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.entry-thumb-fallback {
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
}
.entry-thumb-fallback-cat {
  color: rgba(255,255,255,.85);
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}
/* Immagine in evidenza VERA, articolo singolo (Sessione 89): va mostrata per intero, senza
   alcun ritaglio — le copertine possono contenere testo (es. l'articolo sulla commissione
   Airbnb) e il precedente rapporto fisso 16:9 + object-fit:cover tagliava proprio quel testo.
   Il contenitore si adatta all'immagine (non viceversa): niente aspect-ratio fisso, niente
   tetto di altezza — l'altezza la decide l'immagine stessa, in proporzione alla sua larghezza
   reale (100% della colonna). Funziona con qualunque proporzione di copertina, non solo
   1200x630: le dimensioni reali arrivano dagli attributi width/height che WordPress stampa
   gia' su get_the_post_thumbnail() per le dimensioni 'large'/'medium_large' (nessuna
   registrata con crop rigido in questo tema, quindi restano proporzionali all'originale) — quegli
   stessi attributi servono anche a evitare un salto di layout (CLS) durante il caricamento,
   perche' il browser riserva gia' lo spazio corretto prima che l'immagine arrivi, senza bisogno
   di un aspect-ratio CSS esplicito qui.
   Scoped a `:not(.entry-thumb-fallback)` per non toccare il fallback gradiente sopra, ne'
   `.blog-card .entry-thumb` (griglia blog, home.php/archive.php): li' il cover 16:9 resta
   voluto, per l'uniformita' visiva delle card in griglia — vedi la nota su .blog-card
   .entry-thumb piu' avanti in questo file. Nessun media query dedicato: senza aspect-ratio ne'
   max-height fissi, il comportamento e' gia' identico su desktop e mobile. */
.entry-inner > .entry-thumb:not(.entry-thumb-fallback) {
  aspect-ratio: auto;
  max-height: none;
}
.entry-inner > .entry-thumb:not(.entry-thumb-fallback) > .entry-thumb-img {
  height: auto;
}

/* ── Layout due colonne (Milestone 7bis): colonna articolo (740px) + sidebar (320px).
   Breakpoint originale (Sessione 58): 1250px. Il pannello con padding pieno uniforme (Sessione
   69) l'aveva alzato a 1360px, facendo perdere la vista a due colonne — e la CTA sticky, unico
   aggancio di conversione blog→consulenza/gestione — proprio a 1280px, una risoluzione desktop
   comune: problema di conversione segnalato e corretto nella Sessione 70.
   **Fix Sessione 70**: il padding di .entry-inner ora scala (vedi sopra) invece di restare
   fisso — ridotto (1rem/16px per lato) proprio nella fascia 1280-1499px dove altrimenti non
   basterebbe spazio. Breakpoint riportato a 1279px (== due colonne da 1280px in su), stessa
   soglia utile della griglia (1108px) verificata dal vivo su 7 larghezze (1240-1600px). */
.single-layout {
  display: grid;
  grid-template-columns: 740px 320px;
  gap: 48px;
}
.single-main { min-width: 0; }
/* ── Sidebar sticky (Sessione 89 — sostituisce l'approccio Sessione 88) ──────────────────────
   La Sessione 88 aveva reso sticky l'INTERO .single-aside con un tetto di altezza
   (max-height: calc(100vh - 92px - 24px)) + overflow-y:auto, per evitare che "Dallo stesso
   filone" finisse sotto la CTA ormai fissa durante lo scroll. Funzionava, ma introduceva una
   scrollbar interna SEMPRE presente nella sidebar (visibile anche quando CTA+correlati
   c'entravano comodamente nella viewport) — segnalata come indesiderata e sostituita qui.

   **Nuovo approccio**: .single-aside torna a essere un contenitore normale, senza sticky, senza
   max-height, senza overflow — scorre con la pagina come qualunque altro elemento (nessuna
   scrollbar interna, mai, a qualunque altezza di viewport). Solo .single-aside-cta resta
   sticky (invariato: top:92px). Il punto delicato e' impedire che la CTA sticky si sovrapponga
   a "Dallo stesso filone" quando i due "si incontrano" scorrendo — la Sessione 87-e-precedenti
   aveva questo problema esatto (da cui la Sessione 88 era nata).

   **Come si evita la sovrapposizione, senza calcoli di altezza fragili**: un elemento
   position:sticky non puo' mai essere disegnato oltre il bordo inferiore del proprio
   containing block (il piu' vicino antenato a livello di blocco — qui, il suo genitore
   diretto). Se .single-aside-cta fosse figlio diretto di .single-aside, il suo containing
   block sarebbe .single-aside stesso — il cui bordo inferiore, per via dello stiramento di
   CSS Grid (align-items:stretch, default), coincide con la fine dell'intero articolo (molto
   piu' in basso di "Dallo stesso filone", che ha una sua altezza naturale fissa e piccola).
   La CTA continuerebbe quindi a "vedere" tutto quello spazio come proprio raggio d'azione e
   potrebbe sovrapporre "Dallo stesso filone" prima di fermarsi.
   La soluzione (vedi single.php): un wrapper dedicato, .single-aside-cta-wrap, avvolge SOLO la
   CTA ed e' impostato con flex:1 1 auto dentro .single-aside (flex-direction:column) — assorbe
   quindi TUTTO lo spazio in eccesso lasciato dallo stiramento della griglia, mentre "Dallo
   stesso filone" (il fratello successivo, senza flex-grow) mantiene la propria altezza
   naturale. Il bordo INFERIORE di questo wrapper coincide cosi' sempre con l'inizio di "Dallo
   stesso filone" — ed e' quello, non il fondo dell'intero .single-aside, il containing block
   della CTA sticky. Risultato: la CTA sticky raggiunge il bordo del wrapper (= l'inizio dei
   correlati) e si ferma li', tornando al flusso normale invece di sovrapporli — nessun calcolo
   di altezza in px da mantenere aggiornato, la struttura del contenitore basta da sola. */
.single-aside {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* Linea di separazione verticale sottile (rifinitura "pannello"): ora interna al pannello
     stesso, non un bordo di cornice separato. Si appoggia sul gap di 48px della griglia (1px di
     bordo + 1.5rem di padding, ~25px), lasciando comunque spazio libero su entrambi i lati. */
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
}
.single-aside-cta-wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.single-aside-cta {
  position: sticky;
  top: 92px;
}

@media (max-width:1279px) {
  .single-layout { grid-template-columns: 1fr; gap: 2rem; }
  .single-aside-cta {
    position: static;
    top: auto;
  }
  .single-aside {
    border-left: none;
    padding-left: 0;
  }
}

/* Header articolo */
.entry-header { margin-bottom: 2rem; }
.entry-title {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: .8rem;
}
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: var(--muted);
}
.entry-meta-sep { color: var(--border-str); }
.entry-meta-cat { text-decoration: none; }

/* Corpo articolo */
.entry-content {
  font-size: .95rem;
  line-height: 1.78;
  color: var(--slate);
}
.entry-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.25;
  margin: 2.4rem 0 1rem;
}
.entry-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin: 1.8rem 0 .8rem;
}
.entry-content p { margin-bottom: 1.2rem; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2rem 1.3rem; }
.entry-content li { margin-bottom: .5rem; }
.entry-content a { color: var(--orange); }
.entry-content strong { color: var(--ink-soft); }

/* Box autore */
.entry-author {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--warm);
  border-radius: var(--r);
}
.entry-author-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.entry-author-info { display: flex; flex-direction: column; }
.entry-author-name {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.entry-author-role {
  font-size: .78rem;
  color: var(--orange);
  font-weight: 600;
  margin-bottom: .5rem;
}
.entry-author-bio {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--slate);
}

/* CTA per categoria (Milestone 7) — invariata: e' .single-aside-cta, dentro
   .single-aside-cta-wrap (Sessione 89), a gestire posizione/comportamento sticky in sidebar,
   non queste regole. */
.blog-cta {
  background: var(--ink);
  border-radius: var(--r);
  padding: 2rem;
  margin: 2.5rem 0;
  text-align: center;
}
.blog-cta-eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .6rem;
}
.blog-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: .7rem;
}
.blog-cta-text {
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(250,250,247,.78);
  max-width: 480px;
  margin: 0 auto 1.4rem;
}
.blog-cta-btn {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  font-size: .85rem;
  padding: .7em 1.6em;
  border-radius: 999px;
  text-decoration: none;
  transition: background .17s, transform .12s, box-shadow .17s;
  box-shadow: 0 2px 10px rgba(232,97,42,.25);
}
.blog-cta-btn:hover { background: var(--orange-deep); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,97,42,.35); }

/* Articoli correlati (Milestone 7bis): elenco verticale compatto in sidebar, non piu' card a
   griglia — nessuna immagine, solo link al titolo + etichetta categoria, leggero rispetto al
   box CTA sopra (bordo superiore sottile invece di card con bordo pesante). */
.single-aside-related {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.single-aside-related-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 1rem;
}
.single-aside-related-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.single-aside-related-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.single-aside-related-link {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color .15s;
}
.single-aside-related-link:hover { color: var(--orange); }
.single-aside-related-cat {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

@media (max-width:600px) {
  .entry-title { font-size: 1.6rem; }
  .entry-author { flex-direction: column; align-items: flex-start; }
  .blog-cta { padding: 1.5rem; }
  .entry-inner > .entry-thumb.entry-thumb-fallback { max-height: 240px; }
}

/* ── Elenco blog (home.php, Milestone 8) ── pagina dei post (page_for_posts). Stesso pattern
   di .entry-container/.entry-inner ma qui su un unico elemento e' sicuro: la griglia usa
   minmax()/auto-fit (non colonne a larghezza fissa), quindi si adatta sempre allo spazio
   disponibile senza il rischio di overflow gia' risolto per .single-layout. */
.blog-index-container {
  max-width: 1120px;
  margin: 3rem auto;
  padding: 0 5%;
}
.blog-index-header {
  margin-bottom: 2.5rem;
  max-width: 640px;
}
.blog-index-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
  margin: .8rem 0 .8rem;
}
.blog-index-sub {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--slate);
}
.blog-index-empty {
  font-size: 1rem;
  color: var(--slate);
  text-align: center;
  padding: 3rem 0;
}

/* Griglia card: auto-fit/minmax da' naturalmente 3 colonne su desktop largo, 2 su tablet,
   1 su mobile, senza bisogno di breakpoint dedicati (si adatta allo spazio disponibile). */
.blog-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.blog-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Stesso valore gia' usato come base in .blog-index-grid (minmax(300px, 1fr)): con auto-fit,
     ogni riga (completa o no, quindi anche con 1 solo post, o l'ultima riga incompleta con
     piu' post) stira le sue colonne a 1fr per riempire tutta la larghezza disponibile — con 1
     post questo significa l'intero container (1120px), con card e immagine 16:9 sproposita-
     tamente enormi. Il cap qui e' intenzionalmente applicato a OGNI card (non solo al caso di
     un post singolo): anche in una griglia a 3 colonne piena le colonne risultano piu' larghe
     di 300px (es. ~352px in un container da 1120px), quindi il cap crea un piccolo margine
     centrato per card anche li' — effetto voluto e uniforme, non solo una toppa per il caso
     degenere. La responsivita' della griglia (3/2/1 colonne) resta invariata: cambia solo
     quanto spazio la card occupa dentro la sua colonna, non il numero di colonne. */
  max-width: 300px;
  justify-self: center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .17s, box-shadow .17s;
}
.blog-card:hover { border-color: var(--border-str); box-shadow: 0 10px 28px rgba(0,0,0,.05); }
/* L'immagine/fallback condivisa (.entry-thumb) porta margine e raggio pensati per l'articolo a
   piena larghezza — dentro la card bastano quelli della card stessa (.blog-card gia' arrotonda
   e ritaglia con overflow:hidden), altrimenti si sommerebbero i due margini/raggi.
   NOTA (Sessione 89): questa card NON e' toccata dalle nuove regole "immagine per intero" di
   single.php, scoped esplicitamente a `.entry-inner > .entry-thumb` — qui .entry-thumb resta
   16:9 con object-fit:cover invariato, voluto per l'uniformita' visiva della griglia. */
.blog-card .entry-thumb { margin-bottom: 0; border-radius: 0; }
.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem 1.25rem 1.5rem;
}
.blog-card-cat { align-self: flex-start; }
.blog-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: .2rem 0 0;
}
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: var(--orange); }
.blog-card-excerpt {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--slate);
}
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  color: var(--muted);
  margin-top: .3rem;
}
.blog-card-meta-sep { color: var(--border-str); }

/* Paginazione (the_posts_pagination) — scoperta dentro .blog-index-pagination per non
   influenzare altri usi futuri delle classi generiche di WordPress (.page-numbers ecc.) */
.blog-index-pagination { margin-top: 3rem; }
.blog-index-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.blog-index-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .7rem;
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.blog-index-pagination .page-numbers:hover { background: var(--orange-lt); color: var(--orange-deep); }
.blog-index-pagination .page-numbers.current { background: var(--orange); color: var(--white); }
.blog-index-pagination .page-numbers.dots { background: none; }

/* Link "torna a tutti gli articoli" (archive.php, Milestone 9) — unico punto di uscita da un
   archivio di categoria verso l'indice blog completo, nessun pattern simile gia' esistente da
   riusare. */
.blog-index-back {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.blog-index-back:hover { color: var(--orange); }

@media (max-width:600px) {
  .blog-index-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}