/*
Theme Name: Adlp Theme
Theme URI: http://www.henrysmoking.it
Description: Il tema per ADLP a partire da Extra
Author: Enrico Fumanti
Author URI: http://www.henrysmoking.it
Template: Extra
Version: 1.0
*/


/* ═══════════════════════════════════════════════════════════════
   ADLP STUDIO LEGALE — FOGLIO DI STILE DEL CHILD THEME
   ───────────────────────────────────────────────────────────────
   Questo file contiene SOLO le fondamenta del design:
   - Palette CSS (variabili :root)
   - Reset minimo
   - Tipografia globale con specificity bassa (sovrascrivibile dai
     moduli codice scoped delle singole pagine senza !important)
   - Layout container (.adlp-container) per linee madre SX/DX

   La struttura (header, navbar, menu, mega menu, Area Clienti) e
   i contenuti pagina-specifici NON stanno qui: stanno nel Custom
   CSS di Extra e nei moduli codice Divi delle singole pagine.

   Linee guida di modifica:
   - Per cambiare colori: modifica le variabili nel :root
   - Per nuovi settori: aggiungi le variabili --settore-*
   - Evita !important in questo file: qui devono vincere i moduli
     scoped delle pagine nella cascata naturale
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   1. PALETTE — VARIABILI CSS GLOBALI
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─── ROSSI MADRE ──────────────────────────────────────────── */
  --adlp-red:         #B32B0C;   /* ROSSO MADRE — tinta piena, dominante */
  --adlp-red-dark:    #8A1F05;   /* hover stati primari */
  --adlp-bordeaux:    #9E260A;   /* top bar */
  --adlp-red-rgb:     179, 43, 12;   /* per rgba() — pill hero, trasparenze, ombre */
  --adlp-bordeaux-rgb: 158, 38, 10;  /* per rgba() — sfondi pill, overlay */

  /* ─── NEUTRI BASE ──────────────────────────────────────────── */
  --adlp-text:        #1A1A1A;   /* corpo testo, titoli principali */
  --adlp-text-dark:   #111111;   /* titoli H2/H3 su sfondo bianco */
  --adlp-text-soft:   #555555;   /* testi secondari, descrizioni */
  --adlp-text-meta:   #888888;   /* note, footer text, meta */
  --adlp-white:       #FFFFFF;   /* sfondi sezioni, card, navbar sticky */
  --adlp-bianco-caldo:#F5F5F3;   /* sezioni alternate blog/news */
  --adlp-grigio-riga: #F5F5F5;   /* righe tabelle alternate */
  --adlp-bordi:       #EEEEEE;   /* separatori orizzontali */

  /* ─── CREMA / BEIGE ISTITUZIONALE ──────────────────────────── */
  --adlp-panna:         #F0E6D3;   /* sfondo sezioni alternate (urgenze, servizi, lavoriamo) */
  --adlp-panna-dark:    #E8DCC8;   /* hover celle crema, bordi crema */
  --adlp-panna-light:   #F5EED8;   /* sfondo Private Clients ivory */
  --adlp-border-panna:  #DDD4C2;   /* bordi/hr su sfondo crema */
  --adlp-crema-rosato:  #C8B4B0;   /* fallback thumbnail blog */

  /* ─── GRIGI STRUTTURALI ────────────────────────────────────── */
  --adlp-gray:          #7D7D7D;   /* box citazione, card grigie */
  --adlp-gray-soft:     #DDD8CC;   /* retrocompat webmaster (usato in blog/citazione) */
  --adlp-gray-medium:   #6B6B6B;   /* sezione settori, card scure */
  --adlp-gray-dark:     #3A3A3A;   /* footer, contesti dark */
  --adlp-gray-label:    #AAAAAA;   /* label tipo "Alcuni dei nostri clienti" */

  /* ═══════════════════════════════════════════════════════════
     2. SUB-PALETTE SETTORI — 8 SETTORI DI ATTIVITÀ
     Ogni settore ha 4 varianti + _rgb per pill hero rgba()
     ═══════════════════════════════════════════════════════════ */

  /* Banche e Intermediari — blu navy istituzionale */
  --banche-primary:     #1B3A5C;
  --banche-primary-rgb: 27, 58, 92;
  --banche-mid:         #2E5F8A;
  --banche-light:       #B8C8D4;
  --banche-accent:      #8FB0C8;
  --banche-accent-rgb:  143, 176, 200;

  /* Fintech e IMEL — teal digitale */
  --fintech-primary:     #0D7377;
  --fintech-primary-rgb: 13, 115, 119;
  --fintech-mid:         #14A085;
  --fintech-light:       #A8D8D4;
  --fintech-accent:      #7EC8C4;
  --fintech-accent-rgb:  126, 200, 196;

  /* Blockchain – DLT — blu-grigio tech (non più viola) */
  --blockchain-primary:     #2E4A6B;
  --blockchain-primary-rgb: 46, 74, 107;
  --blockchain-mid:         #4A6A8E;
  --blockchain-light:       #B8C4D4;
  --blockchain-accent:      #8AA2BD;
  --blockchain-accent-rgb:  138, 162, 189;

  /* AI-IP & Tech Privacy — antracite/petrolio cyber */
  --aiip-primary:     #1A3A4A;
  --aiip-primary-rgb: 26, 58, 74;
  --aiip-mid:         #2E7D8A;
  --aiip-light:       #A8C8D0;
  --aiip-accent:      #6BAAB8;
  --aiip-accent-rgb:  107, 170, 184;

  /* Contenzioso — ardesia + crema istituzionale */
  --contenzioso-primary:     #2E4057;
  --contenzioso-primary-rgb: 46, 64, 87;
  --contenzioso-mid:         #4A5D7A;
  --contenzioso-light:       #C0C9D4;
  --contenzioso-accent:      #8A99AE;
  --contenzioso-accent-rgb:  138, 153, 174;
  --contenzioso-cream:       #F0E6D3;   /* secondario: richiama --adlp-panna */

  /* Crediti Fiscali & DTA — verde foresta */
  --dta-primary:     #1A4A2A;
  --dta-primary-rgb: 26, 74, 42;
  --dta-mid:         #2F6B42;
  --dta-light:       #B8D0BE;
  --dta-accent:      #7AA385;
  --dta-accent-rgb:  122, 163, 133;

  /* Crisi d'Impresa — mattone caldo */
  --crisi-primary:     #7A3A00;
  --crisi-primary-rgb: 122, 58, 0;
  --crisi-mid:         #9E5118;
  --crisi-light:       #E0C5A8;
  --crisi-accent:      #B88A5E;
  --crisi-accent-rgb:  184, 138, 94;

  /* Clienti Privati — ivory + sage */
  --private-primary:     #A8B2A1;   /* sage come primario */
  --private-primary-rgb: 168, 178, 161;
  --private-mid:         #879180;
  --private-light:       #D4DACF;
  --private-accent:      #6B7565;
  --private-accent-rgb:  107, 117, 101;
  --private-ivory:       #F5EED8;   /* ivory secondario: richiama --adlp-panna-light */

  /* ═══════════════════════════════════════════════════════════
     3. LAYOUT — LINEE MADRE SX/DX + SPAZIATURA VERTICALE
     Padding orizzontale applicato al container globale.
     Rispetta l'allineamento: DI TENDENZA + logo (SX) con lente
     RICERCA + Area Clienti (DX).

     La spaziatura verticale garantisce cadenza uniforme tra
     le sezioni (60px desktop, 40 tablet, 32 mobile).
     ═══════════════════════════════════════════════════════════ */

  --adlp-layout-padding: 40px;
  --adlp-layout-max-width: 1680px;

  --adlp-section-spacing: 60px;   /* padding verticale sezioni (top+bottom) */

  /* ═══════════════════════════════════════════════════════════
     4. TIPOGRAFIA — VARIABILI
     ═══════════════════════════════════════════════════════════ */

  --adlp-font-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ═══════════════════════════════════════════════════════════════
   5. RESET MINIMO
   Poche regole, mirate. Non aggressivo, non toccare regole Divi.
   ═══════════════════════════════════════════════════════════════ */

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


/* ═══════════════════════════════════════════════════════════════
   6. TIPOGRAFIA GLOBALE BASE
   ───────────────────────────────────────────────────────────────
   PRINCIPIO ADLP: i testi sono NERI PIENI (#1A1A1A) come default
   sulla quasi totalità degli sfondi (bianco, crema, panna).

   Varianti di grigio (#555555, #888888) si usano puntualmente
   nei moduli scoped delle singole pagine quando la soluzione
   estetica lo richiede — NON come default.

   Il quasi-nero (#111111) si usa caso per caso per titoli H2/H3
   su sfondo bianco puro quando serve massimo contrasto.

   Regole a SPECIFICITY BASSA (selettori di elemento puri): i
   moduli scoped delle pagine sovrascrivono senza !important.
   ═══════════════════════════════════════════════════════════════ */

body {
  color: var(--adlp-text);        /* #1A1A1A nero testo — default ovunque */
  font-family: var(--adlp-font-base);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--adlp-text);        /* #1A1A1A nero pieno — default */
  font-family: var(--adlp-font-base);
  line-height: 1.25;
}

h1 { font-weight: 800; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 600; }

p {
  color: var(--adlp-text);        /* #1A1A1A nero pieno */
  line-height: 1.7;
}

a {
  color: var(--adlp-red);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--adlp-red-dark);
}


/* ═══════════════════════════════════════════════════════════════
   7. LAYOUT CONTAINER — .adlp-container
   Classe utility da applicare come wrapper esterno nei moduli
   scoped delle pagine per rispettare le linee madre SX/DX.

   Uso previsto:
     <div class="adlp-container">
       ...contenuto del modulo...
     </div>

   Oppure su righe Divi aggiungendo la classe CSS nel modulo:
     Row → Avanzate → ID e classi CSS → classi CSS: adlp-container
   ═══════════════════════════════════════════════════════════════ */

.adlp-container {
  padding-left: var(--adlp-layout-padding);
  padding-right: var(--adlp-layout-padding);
  max-width: var(--adlp-layout-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════
   7b. OVERRIDE DIVI/EXTRA — ALLINEAMENTO AUTOMATICO LINEE MADRE
   ───────────────────────────────────────────────────────────────
   Quando nell'editor Divi usi Section standard (verde) + Row
   (verde), Divi applica alla Row un max-width ristretto (circa
   1080px) centrato, creando bande laterali vuote che NON
   rispettano le linee madre 40/24/16 del layout globale.

   Questa regola forza tutte le Row a:
   - occupare tutta la larghezza disponibile (width 100%)
   - essere centrate fino a --adlp-layout-max-width (1680px)
   - avere padding SX/DX uguale a --adlp-layout-padding

   Risultato: una Row in Section verde si allinea esattamente
   come una Section viola fullwidth, senza bisogno di aprire
   manualmente l'editor e settare padding/margin ogni volta.

   ECCEZIONI: sezioni che devono avere padding 0 (griglie che
   toccano i bordi viewport come .adlp-urg-section o
   .adlp-counters-section) sovrascrivono questa regola con
   selettore a specificity più alta. Funziona automaticamente.

   Per restringere VOLONTARIAMENTE una Row (es. articolo con
   colonna di lettura stretta), usa classe utility
   .adlp-row-narrow sulla Row nell'editor Divi.
   ═══════════════════════════════════════════════════════════════ */

.et_pb_row {
  width: 100% !important;
  max-width: var(--adlp-layout-max-width) !important;
  padding-left: var(--adlp-layout-padding) !important;
  padding-right: var(--adlp-layout-padding) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Sezioni Divi: padding verticale uniforme = --adlp-section-spacing */
#page-container .et_pb_section {
  padding-top: var(--adlp-section-spacing) !important;
  padding-bottom: var(--adlp-section-spacing) !important;
}

/* Hero fullwidth: nessun padding verticale (attaccata a navbar) */
#page-container .et_pb_fullwidth_header,
#page-container .et_pb_section.et_pb_fullwidth_section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Row con restringimento volontario per articoli/colonne lettura */
.adlp-row-narrow {
  max-width: 800px !important;
}


/* ═══════════════════════════════════════════════════════════════
   8. UTILITY CLASSES — per moduli scoped
   Scorciatoie comuni usabili nei moduli codice delle pagine.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Testi (usare caso per caso secondo necessità) ─── */
.adlp-text-black     { color: var(--adlp-text); }         /* #1A1A1A — default, nero pieno */
.adlp-text-black-deep{ color: var(--adlp-text-dark); }    /* #111111 — quasi nero, max contrasto H2/H3 su bianco */
.adlp-text-gray      { color: var(--adlp-text-soft); }    /* #555555 — grigio per testi secondari */
.adlp-text-gray-meta { color: var(--adlp-text-meta); }    /* #888888 — grigio chiaro per note, meta, footer */
.adlp-text-cream     { color: var(--adlp-panna); }        /* #F0E6D3 — testi crema su sfondo rosso/scuro */
.adlp-text-white     { color: var(--adlp-white); }        /* #FFFFFF — testi bianchi su sfondo scuro */

/* ─── Accenti cromatici ─── */
.adlp-text-red       { color: var(--adlp-red); }          /* #B32B0C — rosso madre, enfasi */
.adlp-text-bordeaux  { color: var(--adlp-bordeaux); }     /* #9E260A — bordeaux */

/* ─── Sfondi ─── */
.adlp-bg-red         { background-color: var(--adlp-red); }
.adlp-bg-bordeaux    { background-color: var(--adlp-bordeaux); }
.adlp-bg-panna       { background-color: var(--adlp-panna); }
.adlp-bg-white       { background-color: var(--adlp-white); }
.adlp-bg-gray        { background-color: var(--adlp-gray); }

/* ─── Separatore lineetta rossa dopo titoli ───
   Pattern usato ripetutamente in Home. Sostituisce il ::after
   ripetuto in molte sezioni del Custom CSS. */
.adlp-divider-red::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--adlp-red);
  margin-top: 18px;
}


/* ═══════════════════════════════════════════════════════════════
   9. RESPONSIVE — LINEE MADRE SX/DX + SPAZIATURA VERTICALE
   ───────────────────────────────────────────────────────────────
   Riduce le variabili layout progressivamente al ridurre
   del viewport. Simmetria SX = DX sempre garantita (stessa
   variabile).

   Linee madre orizzontali:
   Desktop  ≥ 1200px  →  40px
   Tablet   768-1199  →  24px
   Mobile   < 768px   →  16px

   Spaziatura verticale sezioni:
   Desktop  ≥ 1200px  →  60px
   Tablet   768-1199  →  40px
   Mobile   < 768px   →  32px

   Le variabili sono modificate su :root, quindi TUTTI gli elementi
   che le usano si adeguano automaticamente:
   - .adlp-container
   - .et_pb_row (override Divi)
   - .et_pb_section (override Divi)
   - Top bar, navbar (quando il Custom CSS di Extra le userà)
   - Qualsiasi modulo scoped che usi le variabili
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1199px) {
  :root {
    --adlp-layout-padding: 24px;
    --adlp-section-spacing: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --adlp-layout-padding: 16px;
    --adlp-section-spacing: 32px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   10. FIX STRUTTURALI PUNTUALI
   ───────────────────────────────────────────────────────────────
   Correzioni mirate che NON riguardano l'header completo, lo
   sticky, il menu o il bottone Area Clienti (quelli stanno nel
   Custom CSS di Extra).

   Qui stanno solo fix atomici di elementi strutturali globali:
   - 10.1 Top bar: simmetria padding SX/DX (era 40/56, corretto a 40/40)
   - 10.2 Navbar: rimozione gradient rosso (sostituito con tinta piena)
   - 10.3 Icona X Twitter: SVG corretto (era vuota)
   ═══════════════════════════════════════════════════════════════ */


/* ─── 10.1 TOP BAR — padding simmetrico SX = DX ────────────────
   Il CSS originale del webmaster aveva padding-left 40 e
   padding-right 56 (asimmetrico). Questo rompe l'allineamento
   verticale tra lente RICERCA (top bar) e bottone Area Clienti
   (navbar). Ripristiniamo simmetria usando --adlp-layout-padding. */

#top-header .container {
  padding-left: var(--adlp-layout-padding) !important;
  padding-right: var(--adlp-layout-padding) !important;
}


/* ─── 10.2 NAVBAR — rimozione gradient ─────────────────────────
   Il CSS originale usava linear-gradient(to bottom, #e02b20,
   #c6281c) sia per stato normale che sticky. Sostituiamo con
   tinta piena coerente con --adlp-red (rosso madre ADLP).

   Copre sia #main-header (a riposo) che #main-header.et-fixed-header
   (sticky). Le altre regole di layout (height, padding, flex)
   restano nel Custom CSS di Extra. */

#main-header,
#main-header.et-fixed-header {
  background: var(--adlp-red) !important;
}


/* ─── 10.3 ICONA X (ex Twitter) — font icon Extra sostituito con SVG ─── */

/* Nascondo il glyph dell'uccellino del font ET-Extra */
li.et-extra-social-icon.twitter a.et-extra-icon::before {
  content: "" !important;
  font-family: inherit !important;
  font-size: 0 !important;
}

/* Inietto la X via mask-image, ereditando il colore del link */
li.et-extra-social-icon.twitter a.et-extra-icon {
  position: relative !important;
}

li.et-extra-social-icon.twitter a.et-extra-icon::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 14px !important;
  transform: translate(-50%, -50%) !important;
  background-color: currentColor !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>");
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  pointer-events: none !important;
}