/* =============================================================================
   Studio Alessio Ascanelli — commercialista.info
   Foglio di stile principale — ricostruzione statica del tema Hueman Pro
   -----------------------------------------------------------------------------
   Tutti i valori cromatici, tipografici e dimensionali sono raccolti nel blocco
   :root che segue. Sono impostati sui valori predefiniti di Hueman Pro: se nel
   pannello Aspetto → Personalizza del sito originale erano stati modificati
   (colore d'accento, immagine di testata, larghezze), è sufficiente correggere
   qui le variabili senza toccare il resto del foglio.
   ========================================================================== */

:root {
  /* --- Colori del tema ---------------------------------------------------- */
  --colore-accento:        #3b8dbd;   /* colore d'accento Hueman predefinito  */
  --colore-accento-scuro:  #2f7099;
  --colore-scuro:          #33363b;   /* barra superiore, menu, barra laterale */
  --colore-scuro-2:        #2a2c31;   /* piede pagina, fondo                  */
  --colore-testata:        #454e5c;   /* fascia della testata                 */
  --colore-sfondo:         #eaeaea;   /* fondo pagina                         */
  --colore-carta:          #ffffff;   /* fondo dei blocchi di contenuto       */
  --colore-testo:          #4a4a4a;
  --colore-testo-forte:    #333333;
  --colore-testo-tenue:    #9c9c9c;
  --colore-bordo:          #e4e4e4;
  --colore-testo-scuro-bg: #b1b1b1;   /* testo sulle superfici scure          */

  /* --- Tipografia --------------------------------------------------------- */
  --font-corpo:   'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, Helvetica, Arial, sans-serif;
  --font-titoli:  var(--font-corpo);
  --dim-base:     15px;
  --interlinea:   1.7;

  /* --- Griglia ------------------------------------------------------------ */
  --largh-massima:      1380px;  /* larghezza del contenitore esterno         */
  --largh-contenuto:    1080px;  /* contenuto + barre laterali                */
  --largh-laterale-1:   220px;   /* barra laterale scura (sinistra)           */
  --largh-laterale-2:   300px;   /* barra laterale chiara (destra)            */
  --spazio:             30px;
  --raggio:             3px;
}

/* =============================================================================
   1. Azzeramento e impostazioni di base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-corpo);
  font-size: var(--dim-base);
  line-height: var(--interlinea);
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; }
iframe, video, embed, object { max-width: 100%; }

a { color: var(--colore-accento); text-decoration: none; }
a:hover, a:focus-visible { color: var(--colore-accento-scuro); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titoli);
  color: var(--colore-testo-forte);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 .6em;
}

h1 { font-size: 1.85rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.2em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.6em; }
blockquote {
  margin: 0 0 1.2em;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--colore-accento);
  color: var(--colore-testo-forte);
  font-style: italic;
}
hr { border: 0; border-top: 1px solid var(--colore-bordo); margin: 1.6em 0; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.2em; }
th, td { padding: 8px 10px; border: 1px solid var(--colore-bordo); text-align: left; }
th { background: #f7f7f7; font-weight: 600; }

code, pre {
  font-family: Menlo, Consolas, 'Courier New', monospace;
  font-size: .9em;
  background: #f4f5f6;
}
code { padding: 2px 5px; border-radius: 2px; }
pre { padding: 14px 16px; overflow-x: auto; border-radius: var(--raggio); }

/* Accessibilità: contorno di messa a fuoco sempre visibile da tastiera */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--colore-accento);
  outline-offset: 2px;
}

/* Collegamento di salto contenuto per la navigazione da tastiera */
.salta-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 18px;
  background: var(--colore-accento);
  color: #fff;
}
.salta-contenuto:focus { left: 0; }

/* =============================================================================
   2. Struttura
   ========================================================================== */

.contenitore {
  max-width: var(--largh-contenuto);
  margin: 0 auto;
  padding: 0 20px;
}

#involucro {
  max-width: var(--largh-massima);
  margin: 0 auto;
  background: var(--colore-sfondo);
}

/* =============================================================================
   3. Barra superiore
   ========================================================================== */

.barra-superiore {
  background: var(--colore-scuro);
  color: var(--colore-testo-scuro-bg);
  font-size: .8rem;
}

.barra-superiore .contenitore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  flex-wrap: wrap;
}

.barra-superiore__contatti {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

.barra-superiore a { color: var(--colore-testo-scuro-bg); }
.barra-superiore a:hover { color: #fff; text-decoration: none; }

.barra-superiore__social {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barra-superiore__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  transition: background .2s ease;
}

.barra-superiore__social a:hover { background: var(--colore-accento); color: #fff; }
.barra-superiore__social svg { width: 15px; height: 15px; fill: currentColor; }

/* =============================================================================
   4. Testata
   ========================================================================== */

.testata {
  background: var(--colore-testata);
  color: #fff;
  text-align: center;
  padding: 34px 0;
}

.testata__marchio {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.testata__marchio:hover { text-decoration: none; color: #fff; }

.testata__logo { max-height: 90px; width: auto; }

.testata__nome {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  line-height: 1.2;
}

.testata__sottotitolo {
  margin: 0;
  font-size: .92rem;
  color: rgba(255, 255, 255, .72);
  font-weight: 400;
}

/* =============================================================================
   5. Navigazione principale
   ========================================================================== */

.navigazione {
  background: var(--colore-scuro);
  position: relative;
  z-index: 50;
}

.navigazione .contenitore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.navigazione__apri {
  display: none;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 14px 0;
  cursor: pointer;
}

.navigazione__apri svg { width: 20px; height: 20px; fill: currentColor; }

.menu {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li { position: relative; }

.menu > li > a {
  display: block;
  padding: 15px 16px;
  color: #fff;
  font-size: .87rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: background .2s ease;
}

.menu > li > a:hover,
.menu > li:focus-within > a,
.menu > li.corrente > a {
  background: var(--colore-accento);
  color: #fff;
  text-decoration: none;
}

/* Indicatore dei sottomenu */
.menu li.ha-figli > a::after {
  content: '';
  display: inline-block;
  margin-left: 7px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  vertical-align: middle;
  transform: translateY(2px);
}

/* Sottomenu (desktop: a comparsa) */
.sotto-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--colore-scuro-2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.menu li:hover > .sotto-menu,
.menu li:focus-within > .sotto-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sotto-menu li > a {
  display: block;
  padding: 10px 16px;
  color: var(--colore-testo-scuro-bg);
  font-size: .85rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sotto-menu li > a:hover {
  background: var(--colore-accento);
  color: #fff;
  text-decoration: none;
}

/* Sottomenu di terzo livello */
.sotto-menu .sotto-menu { top: 0; left: 100%; }

/* Ricerca nella barra di navigazione */
.navigazione__ricerca { display: flex; align-items: center; }

.navigazione__ricerca input {
  width: 170px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font: inherit;
  font-size: .82rem;
}

.navigazione__ricerca input::placeholder { color: rgba(255, 255, 255, .5); }

/* =============================================================================
   6. Corpo pagina: contenuto e barre laterali
   ========================================================================== */

.pagina {
  max-width: var(--largh-contenuto);
  margin: 0 auto;
  padding: var(--spazio) 20px 50px;
  display: grid;
  gap: var(--spazio);
  grid-template-columns: var(--largh-laterale-1) minmax(0, 1fr) var(--largh-laterale-2);
  grid-template-areas: 'lat1 principale lat2';
  align-items: start;
}

/* Varianti di impaginazione */
.pagina--due-colonne {
  grid-template-columns: minmax(0, 1fr) var(--largh-laterale-2);
  grid-template-areas: 'principale lat2';
}

.pagina--piena {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'principale';
}

.principale { grid-area: principale; min-width: 0; }
.laterale-1  { grid-area: lat1; }
.laterale-2  { grid-area: lat2; }

/* --- Briciole di pane ---------------------------------------------------- */

.briciole {
  font-size: .82rem;
  color: var(--colore-testo-tenue);
  margin-bottom: 14px;
}
.briciole a { color: var(--colore-testo-tenue); }
.briciole a:hover { color: var(--colore-accento); }
.briciole span + span::before { content: '›'; margin: 0 7px; }

/* --- Blocco di contenuto -------------------------------------------------- */

.blocco {
  background: var(--colore-carta);
  border-radius: var(--raggio);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  padding: 32px 34px 34px;
  margin-bottom: var(--spazio);
}

.blocco__titolo {
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--colore-bordo);
  font-size: 1.55rem;
}

/* Contenuto redazionale importato da WordPress */
.contenuto-articolo { word-wrap: break-word; }
.contenuto-articolo img { border-radius: var(--raggio); height: auto; }
.contenuto-articolo iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.contenuto-articolo figure { margin: 0 0 1.2em; }
.contenuto-articolo figcaption {
  font-size: .82rem;
  color: var(--colore-testo-tenue);
  text-align: center;
  padding-top: 6px;
}
.contenuto-articolo .wp-block-image { margin-bottom: 1.2em; }
.contenuto-articolo a { word-break: break-word; }

/* Moduli importati (PayPal, contatti) */
.contenuto-articolo input[type="text"],
.contenuto-articolo input[type="email"],
.contenuto-articolo input[type="tel"],
.contenuto-articolo textarea,
.contenuto-articolo select {
  width: 100%;
  max-width: 420px;
  padding: 9px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  font: inherit;
  margin-bottom: 10px;
}
.contenuto-articolo textarea { min-height: 130px; }

/* =============================================================================
   7. Elenco degli articoli
   ========================================================================== */

.elenco-articoli { display: flex; flex-direction: column; gap: var(--spazio); }

.scheda-articolo {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  background: var(--colore-carta);
  border-radius: var(--raggio);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.scheda-articolo:hover,
.scheda-articolo:focus-within {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .11);
  transform: translateY(-2px);
}

.scheda-articolo--senza-media { grid-template-columns: minmax(0, 1fr); }

.scheda-articolo__media {
  display: block;
  background: #dfe3e6;
  overflow: hidden;
}

.scheda-articolo__media img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  object-fit: cover;
  display: block;
}

.scheda-articolo__corpo { padding: 24px 26px 26px; }

.scheda-articolo__categorie {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 9px;
}

.etichetta-categoria {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--colore-accento);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.etichetta-categoria:hover { background: var(--colore-accento-scuro); color: #fff; text-decoration: none; }

.scheda-articolo__titolo { font-size: 1.22rem; margin: 0 0 8px; }
.scheda-articolo__titolo a { color: var(--colore-testo-forte); }
.scheda-articolo__titolo a:hover { color: var(--colore-accento); text-decoration: none; }

.meta-articolo {
  font-size: .78rem;
  color: var(--colore-testo-tenue);
  margin-bottom: 10px;
}
.meta-articolo span + span::before { content: '·'; margin: 0 8px; }

.scheda-articolo__estratto { margin: 0; font-size: .93rem; }

/* --- Intestazione dell'articolo singolo ---------------------------------- */

.intestazione-articolo { margin-bottom: 22px; }
.intestazione-articolo h1 { margin-bottom: 10px; }

/* --- Navigazione tra articoli e paginazione ------------------------------ */

.navigazione-articoli {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--spazio);
  font-size: .88rem;
}

.navigazione-articoli a {
  flex: 1 1 0;
  padding: 14px 18px;
  background: var(--colore-carta);
  border-radius: var(--raggio);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  color: var(--colore-testo-forte);
}
.navigazione-articoli a:hover { color: var(--colore-accento); text-decoration: none; }
.navigazione-articoli .successivo { text-align: right; }
.navigazione-articoli small { display: block; color: var(--colore-testo-tenue); font-size: .76rem; }

.paginazione {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: var(--spazio);
}

.paginazione a,
.paginazione span {
  min-width: 38px;
  padding: 8px 12px;
  text-align: center;
  background: var(--colore-carta);
  border-radius: var(--raggio);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  color: var(--colore-testo-forte);
  font-size: .88rem;
}

.paginazione a:hover { background: var(--colore-accento); color: #fff; text-decoration: none; }
.paginazione .corrente { background: var(--colore-accento); color: #fff; }

/* =============================================================================
   8. Barre laterali e riquadri
   ========================================================================== */

.riquadro { margin-bottom: 26px; }

.riquadro__titolo {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 0 0 14px;
  padding-bottom: 9px;
}

.riquadro ul { list-style: none; margin: 0; padding: 0; }
.riquadro li { margin-bottom: 8px; font-size: .89rem; }

/* Barra laterale scura (sinistra) */
.laterale-1 {
  background: var(--colore-scuro);
  border-radius: var(--raggio);
  padding: 26px 22px;
  color: var(--colore-testo-scuro-bg);
}
.laterale-1 .riquadro__titolo { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.laterale-1 a { color: var(--colore-testo-scuro-bg); }
.laterale-1 a:hover { color: #fff; text-decoration: none; }
.laterale-1 .riquadro:last-child { margin-bottom: 0; }

/* Barra laterale chiara (destra) */
.laterale-2 .riquadro {
  background: var(--colore-carta);
  border-radius: var(--raggio);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  padding: 22px 22px 24px;
}
.laterale-2 .riquadro__titolo {
  color: var(--colore-testo-forte);
  border-bottom: 1px solid var(--colore-bordo);
}

/* Riquadro contatti */
.contatti-studio { font-size: .86rem; line-height: 1.6; }
.contatti-studio strong { color: var(--colore-testo-forte); display: block; margin-bottom: 4px; }
.laterale-1 .contatti-studio strong { color: #fff; }
.contatti-studio dl { margin: 0; }
.contatti-studio dt {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--colore-testo-tenue);
  margin-top: 10px;
}
.contatti-studio dd { margin: 0; word-break: break-word; }

/* Elenco categorie con conteggio */
.elenco-categorie li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.laterale-1 .elenco-categorie li { border-bottom-color: rgba(255, 255, 255, .08); }
.elenco-categorie li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.elenco-categorie .conteggio { color: var(--colore-testo-tenue); font-size: .8rem; }

/* Selettore archivio */
.riquadro select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio);
  font: inherit;
  font-size: .86rem;
  background: #fff;
  color: var(--colore-testo);
}

/* Banner e loghi collegati */
.riquadro__banner { display: block; text-align: center; }
.riquadro__banner img { max-width: 100%; border-radius: var(--raggio); }
.riquadro__banner + .riquadro__banner { margin-top: 14px; }

/* =============================================================================
   9. Piè di pagina
   ========================================================================== */

.piede { background: var(--colore-scuro); color: var(--colore-testo-scuro-bg); padding: 44px 0 0; }

.piede__colonne {
  max-width: var(--largh-contenuto);
  margin: 0 auto;
  padding: 0 20px 30px;
  display: grid;
  gap: var(--spazio);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.piede .riquadro__titolo { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.piede a { color: var(--colore-testo-scuro-bg); }
.piede a:hover { color: #fff; text-decoration: none; }

.piede__coda {
  background: var(--colore-scuro-2);
  padding: 16px 0;
  font-size: .8rem;
}

.piede__coda .contenitore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Torna su */
.torna-su {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--colore-accento);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  z-index: 90;
}
.torna-su.visibile { display: flex; }
.torna-su svg { width: 18px; height: 18px; fill: currentColor; }

/* =============================================================================
   10. Adattamento agli schermi
   ========================================================================== */

/* Tablet orizzontale: la barra laterale scura passa sotto */
@media (max-width: 1100px) {
  .pagina {
    grid-template-columns: minmax(0, 1fr) var(--largh-laterale-2);
    grid-template-areas:
      'principale lat2'
      'lat1       lat1';
  }
  .pagina--due-colonne {
    grid-template-columns: minmax(0, 1fr) var(--largh-laterale-2);
    grid-template-areas: 'principale lat2';
  }
}

/* Tablet verticale e telefono: colonna unica */
@media (max-width: 900px) {
  :root { --spazio: 20px; }

  .pagina,
  .pagina--due-colonne {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'principale'
      'lat2'
      'lat1';
  }

  .navigazione__apri { display: inline-flex; }
  .navigazione .contenitore { flex-wrap: wrap; }

  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .09);
  }
  .menu.aperto { display: flex; }

  .menu > li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .menu > li > a { padding: 13px 4px; }

  /* Su schermo ridotto i sottomenu restano nel flusso, sempre visibili */
  .sotto-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(0, 0, 0, .18);
    min-width: 0;
  }
  .sotto-menu li > a { padding-left: 22px; }
  .sotto-menu .sotto-menu li > a { padding-left: 40px; }
  .menu li.ha-figli > a::after { float: right; margin-top: 9px; }

  .navigazione__ricerca { order: -1; padding: 10px 0; }
  .navigazione__ricerca input { width: 100%; }

  .blocco { padding: 24px 20px 26px; }

  .scheda-articolo { grid-template-columns: minmax(0, 1fr); }
  .scheda-articolo__media img { min-height: 0; aspect-ratio: 16 / 9; }

  .testata { padding: 26px 0; }
  .testata__nome { font-size: 1.45rem; }
}

@media (max-width: 600px) {
  :root { --dim-base: 15px; }

  .barra-superiore .contenitore { justify-content: center; }
  .barra-superiore__contatti { justify-content: center; font-size: .76rem; }

  .blocco { padding: 20px 16px 22px; }
  .blocco__titolo { font-size: 1.28rem; }
  h1 { font-size: 1.5rem; }

  .navigazione-articoli { flex-direction: column; }
  .navigazione-articoli .successivo { text-align: left; }

  .piede__coda .contenitore { justify-content: center; text-align: center; }
}

/* =============================================================================
   11. Preferenze di sistema
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .barra-superiore, .navigazione, .laterale-1, .laterale-2,
  .piede, .torna-su, .navigazione-articoli, .paginazione { display: none !important; }
  .pagina { grid-template-columns: 1fr; grid-template-areas: 'principale'; }
  body { background: #fff; }
  .blocco { box-shadow: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
}