/*
Theme Name: Jarvis for Elementor
Theme URI: https://central.asmec.it
Author: Studio di Comunicazione Ecista
Author URI: https://www.ecista.it
Description: Child theme di Hello Elementor con la grafica "Jarvis" (stile Iron Man: sfondo blu-notte, accenti ciano/blu elettrico, card vetro con glow). Header e footer pensati per essere gestiti con ElementSkit Header Footer Builder (free), contenuti pagina con Elementor. Ottimizzato per l'accessibilità WCAG 2.1 AA.
Template: hello-elementor
Version: 1.1.0
Requires PHP: 7.4
Text Domain: jarvis-theme
*/

/* =========================================================
   1. VARIABILI DI PROGETTO — palette "Jarvis"
   (valori esatti presi da central.asmec.it, il dashboard
   originale in stile Iron Man/Jarvis)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

:root{
  --j-bg:        #00060f;   /* sfondo pagina — AGGIORNATO */
  --j-bg-2:      #010e1f;   /* sfondo card / sidebar / tabelle — AGGIORNATO */
  --j-bg-3:      #021529;   /* sfondo elementi in rilievo — AGGIORNATO */
  --j-card-grad: linear-gradient(to top right, #080f1a 0%, #122030 50%, #213a4f 100%); /* sfondo sfumato diagonale delle card — NUOVO */
  --j-table-grad: linear-gradient(to top right, #080f1a 0%, #1a3045 50%, #334c59 100%); /* sfondo sfumato tabelle — leggermente diverso dalle card */
  --j-primary:   #0088dd;   /* blu — AGGIORNATO (--blue) */
  --j-primary-d: #0055aa;   /* AGGIORNATO (--accent) */
  --j-accent:    #00d4ff;   /* ciano — AGGIORNATO (--cyan) */
  --j-border:    rgba(100,160,200,.2);  /* AGGIORNATO */
  --j-text:      #b8d8f0;   /* AGGIORNATO */
  --j-muted:     #7aa5b8;   /* AGGIORNATO (--muted) */
  --j-warn:      #ff5500;   /* AGGIORNATO (--warn) */
  --j-ok:        #00e87a;   /* AGGIORNATO (--ok) */
  --j-radius:    8px;       /* AGGIORNATO — angoli più morbidi (era 4px) */
  --j-glow:      0 0 20px rgba(0,180,255,.25); /* AGGIORNATO (--glow) */
  --j-glow-sm:   0 0 8px rgba(0,180,255,.2);   /* NUOVO (--glow-sm) */
  --j-bar:       linear-gradient(90deg, transparent, var(--j-accent), transparent); /* AGGIORNATO — ora sfumata ai lati, non più bordo netto */
  --j-font:      'Rajdhani', system-ui, -apple-system, sans-serif;
  --j-font-mono: 'Share Tech Mono', 'Courier New', monospace;
  --j-focus:     #00d4ff;
}

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

html, body{
  background-color: var(--j-bg) !important;
}
body{
  position: relative;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(2,22,40,.6) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%, rgba(3,31,56,.5) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
  color: var(--j-text);
  font-family: var(--j-font);
  font-size: 16px; /* testo leggibile, coerente con gli standard già usati nei progetti */
  line-height: 1.6;
}
/* Elementor a volte imposta uno sfondo/gradiente globale tramite il "Kit" del sito
   (impostazioni che restano salvate anche cambiando tema, anche da un tema precedente).
   Questa regola forza sempre lo sfondo scuro su html/body, indipendentemente da cosa
   Elementor genera o in che ordine carica il CSS — senza toccare gli sfondi che
   deciderai di impostare tu su singole sezioni con Elementor.
   Vedi anche punto "Elementor → Impostazioni del sito → Sfondo" nelle istruzioni. */

/* Trama a griglia tecnica sullo sfondo — firma visiva di central.asmec.it */
body::before{
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,170,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,170,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
#page, #main-content, header, footer{ position: relative; z-index: 1; }

/* Kicker: piccola etichetta maiuscola con linea, esattamente come i "section-title" del dashboard originale */
.jarvis-kicker{
  display:flex; align-items:center; gap:12px;
  font-family: var(--j-font);
  font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  color: var(--j-accent); opacity: .9; margin-bottom: 14px;
}
.jarvis-kicker::after{ content:''; flex:1; height:1px; background: var(--j-border); }
.jarvis-kicker-center{ justify-content: center; }
.jarvis-kicker-center::after{ display: none; }

/* Font monospaziato per numeri/dati (anni, statistiche, cifre in evidenza) — coerente con central.asmec.it */
.jarvis-mono, .jarvis-project-card-year, .jarvis-meta-list dd{
  font-family: var(--j-font-mono);
  letter-spacing: .5px;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--j-font) !important;
  color: #ffffff !important;
  text-shadow: none;
  letter-spacing: .3px;
}
.jarvis-hero-title-accent{ color: var(--j-accent) !important; }

a{ color: var(--j-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover, a:focus{ color: var(--j-accent); }

::selection{ background: var(--j-primary-d); color: #fff; }

/* =========================================================
   3. ACCESSIBILITÀ — WCAG 2.1 AA
   ========================================================= */

/* Focus SEMPRE visibile, ad alto contrasto (requisito 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.elementor-widget:focus-visible{
  outline: 3px solid var(--j-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0,255,255,.25) !important;
}

/* Skip link (Hello Elementor la include già nel markup: qui la rendiamo visibile e coerente con lo stile) */
.skip-link.screen-reader-text{
  background: var(--j-bg-2);
  color: var(--j-accent) !important;
  border: 2px solid var(--j-accent);
  padding: 12px 20px;
  position: fixed;
  top: -100px;
  left: 10px;
  z-index: 100000;
  border-radius: var(--j-radius);
  font-weight: 700;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link.screen-reader-text:focus{
  top: 10px;
}

/* Testo per soli screen reader (usato anche da eventuali label ARIA aggiuntive) */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path: inset(50%);
  height:1px; width:1px; overflow:hidden; position:absolute!important;
  word-wrap:normal!important;
}

/* Dimensione minima target di tocco 44x44px (WCAG 2.5.5) per bottoni/link cliccabili */
button, .elementor-button, a.elementor-button, input[type="submit"]{
  min-height: 44px;
  min-width: 44px;
}

/* Tabelle — identiche alla tabella "Specifiche tecniche" del dashboard (versione aggiornata) */
table{
  border-collapse: collapse; width: 100%; background: var(--j-table-grad);
  border-radius: var(--j-radius); overflow: hidden;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
th, td{ border-bottom: 1px solid var(--j-border); padding: 12px 16px; text-align: right; font-size: 13px; }
th:first-child, td:first-child{ text-align: left; }
th{
  background: rgba(0,140,220,.05); color: var(--j-accent); font-family: var(--j-font-mono);
  text-transform: uppercase; letter-spacing: 3px; font-size: 9px; font-weight: 600; opacity: .8;
  border-bottom: 1px solid var(--j-border); white-space: nowrap;
}
td{ color: var(--j-text); font-family: var(--j-font-mono); font-size: 12px; }
td:first-child{ color: var(--j-muted); font-weight: 600; font-family: var(--j-font); font-size: 14px; }
tr:last-child td{ border-bottom: none; }
tbody tr:hover td{ background: rgba(0,140,220,.04); }

/* =========================================================
   4. COMPONENTI ELEMENTOR — card "Jarvis"
   ========================================================= */
.jarvis-card{
  background: var(--j-card-grad);
  border: 1px solid var(--j-border);
  border-radius: var(--j-radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}
/* Linea superiore sottile e sfumata ai lati (non più bordo netto edge-to-edge) */
.jarvis-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: var(--j-bar); opacity: .6;
}
.jarvis-card:hover{
  border-color: rgba(0,180,255,.35);
  box-shadow: var(--j-glow), inset 0 0 30px rgba(0,140,220,.03);
  transform: translateY(-1px);
}

/* Stessa resa "card" applicata automaticamente ai widget immagine/icona di Elementor
   (regola separata dalla precedente: mai unire selettori :where() in una lista con virgola
   insieme ad altri selettori, altrimenti un motore che non supporta :where() scarta l'intera regola) */
.elementor-widget-image-box .elementor-widget-container,
.elementor-widget-icon-box .elementor-widget-container{
  background: var(--j-card-grad);
  border: 1px solid var(--j-border);
  border-radius: var(--j-radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}
.elementor-widget-image-box .elementor-widget-container:hover,
.elementor-widget-icon-box .elementor-widget-container:hover{
  border-color: rgba(0,180,255,.35);
  box-shadow: var(--j-glow), inset 0 0 30px rgba(0,140,220,.03);
  transform: translateY(-1px);
}
.elementor-widget-image-box .elementor-widget-container::before,
.elementor-widget-icon-box .elementor-widget-container::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: var(--j-bar); opacity: .6;
}

/* Bottoni in stile Jarvis — identici a .btn-nav del sito ufficiale: contorno blu, Rajdhani */
.elementor-button, a.elementor-button, button.elementor-button{
  background: rgba(0,136,221,.1) !important;
  color: var(--j-primary) !important;
  border: 1px solid rgba(0,136,221,.4) !important;
  border-radius: 5px !important;
  font-family: var(--j-font) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  transition: all .2s ease;
}
.elementor-button:hover, a.elementor-button:hover{
  background: rgba(0,170,255,.2) !important;
  box-shadow: var(--j-glow) !important;
  color: var(--j-primary) !important;
}

/* Form (compatibili con Elementor Form / WPForms / Contact Form 7) */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="url"], textarea, select{
  background: rgba(0,15,35,.8);
  border: 1px solid var(--j-border);
  color: var(--j-text);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--j-font);
  font-size: 16px;
}
input::placeholder, textarea::placeholder{ color: var(--j-muted); }
label{ color: var(--j-text); font-weight: 600; }

/* =========================================================
   5. HEADER / FOOTER — ElementSkit Header Footer Builder
   Nota: la costruzione grafica di header e footer avviene
   dentro ElementSkit → qui forniamo solo lo "sfondo" coerente
   nel caso vengano lasciati sezioni trasparenti.
   ========================================================= */
#eshb-header, .eshb-header, header#site-header,
#eshb-footer, .eshb-footer, footer#site-footer{
  background: rgba(0,6,15,.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--j-border);
}
#eshb-footer, .eshb-footer, footer#site-footer{
  border-top: 1px solid var(--j-border);
  border-bottom: none;
}

/* Contenitore principale: leggibilità su schermi larghi */
.elementor-section-boxed{ max-width: 1400px; }

/* =========================================================
   6. LAYOUT DI BASE — contenitori e sezioni
   ========================================================= */
.jarvis-container{ max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.jarvis-container-narrow{ max-width: 860px; }
.jarvis-section{ padding: 72px 0; }
.jarvis-section-alt{ background: linear-gradient(180deg, transparent, rgba(2,22,40,.35), transparent); }
.jarvis-section-title{ font-size: 32px; margin-bottom: 8px; text-shadow: none; }
.jarvis-section-lead{ color: var(--j-muted); font-size: 16px; max-width: 700px; margin-bottom: 40px; }
.jarvis-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom: 32px; }
.jarvis-section-head .jarvis-section-lead{ margin-bottom: 0; }
.jarvis-section-head-text{ flex: 1; min-width: 240px; }

#main-content{ display:block; }

/* =========================================================
   7. HERO — home page
   ========================================================= */
.jarvis-hero{
  position: relative;
  padding: 120px 24px 100px;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--j-border);
}
.jarvis-hero-inner{ max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
.jarvis-hero-eyebrow{
  display:inline-flex; align-items:center; gap: 10px;
  color: var(--j-primary); text-transform: uppercase; letter-spacing: 3px;
  font-family: var(--j-font-mono);
  font-size: 12px; font-weight: 600; margin-bottom: 20px;
}
.jarvis-hero-eyebrow::before, .jarvis-hero-eyebrow::after{ content:''; width:24px; height:1px; background: var(--j-border); }
.jarvis-hero-title{ font-size: 46px; line-height: 1.25; margin-bottom: 24px; text-shadow: none; }
.jarvis-hero-lead{ font-size: 18px; color: var(--j-text); max-width: 680px; margin: 0 auto 36px; }
.jarvis-hero-actions{ display:flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.jarvis-hero-glow{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(0,170,255,.22) 0%, transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(0,255,255,.10) 0%, transparent 50%);
}

/* =========================================================
   8. BOTTONI — identici a .btn-nav del sito ufficiale:
   Rajdhani (non monospace), contorno blu, angoli dritti, maiuscolo
   ========================================================= */
.jarvis-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 26px; border-radius: 5px; font-weight: 600; text-decoration: none;
  font-family: var(--j-font); font-size: 14px; text-transform: uppercase; letter-spacing: 2px;
  transition: all .2s ease; min-height: 44px;
}
.jarvis-btn-primary{
  background: rgba(0,136,221,.1);
  color: var(--j-primary); border: 1px solid rgba(0,136,221,.4);
}
.jarvis-btn-primary:hover{ background: rgba(0,136,221,.2); box-shadow: var(--j-glow-sm); }
.jarvis-btn-ghost{
  background: transparent; color: var(--j-text); border: 1px solid var(--j-border);
}
.jarvis-btn-ghost:hover{ border-color: var(--j-primary); color: var(--j-accent); }
.jarvis-btn-block{ width: 100%; margin-top: 12px; }

/* =========================================================
   9. SERVIZI / FEATURE CARDS
   ========================================================= */
.jarvis-features-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.jarvis-feature{ text-align: left; }
.jarvis-feature-icon{
  font-size: 26px; width: 26px; height: 26px; color: var(--j-accent);
  margin-bottom: 14px;
}
.jarvis-feature h3{ font-size: 18px; margin-bottom: 8px; text-shadow: none; }
.jarvis-feature p{ color: var(--j-muted); font-size: 14px; margin: 0; }

/* =========================================================
   10. GRIGLIA PROGETTI + CARD
   ========================================================= */
.jarvis-projects-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.jarvis-project-card{
  background: var(--j-card-grad);
  border: 1px solid var(--j-border);
  border-radius: var(--j-radius);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: border-color .3s ease, box-shadow .3s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.jarvis-project-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px; background: var(--j-bar); opacity:.6; z-index:2;
}
.jarvis-project-card:hover{
  border-color: rgba(0,180,255,.35);
  box-shadow: var(--j-glow), inset 0 0 30px rgba(0,140,220,.03);
  transform: translateY(-1px);
}
.jarvis-project-card-media{ display:block; aspect-ratio: 16/10; overflow:hidden; }
.jarvis-project-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .3s ease; }
.jarvis-project-card:hover .jarvis-project-card-media img{ transform: scale(1.05); }
.jarvis-project-card-body{ padding: 20px; display:flex; flex-direction:column; flex:1; }
.jarvis-project-card-title{ font-size: 19px; margin: 10px 0 8px; text-shadow: none; }
.jarvis-project-card-title a{ color:#fff; text-decoration:none; }
.jarvis-project-card-title a:hover{ color: var(--j-accent); }
.jarvis-project-card-sub{ color: var(--j-muted); font-size: 14px; flex:1; margin: 0 0 16px; }
.jarvis-project-card-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top: 12px; border-top: 1px solid var(--j-border); }
.jarvis-project-card-year{ color: var(--j-muted); font-size: 12px; letter-spacing: 1px; }
.jarvis-card-link{ color: var(--j-primary); text-decoration:none; font-weight:600; font-size:13px; text-transform: uppercase; letter-spacing: .5px; display:inline-flex; align-items:center; gap:4px; }
.jarvis-card-link:hover{ color: var(--j-accent); }
.jarvis-link-more{ color: var(--j-primary); text-decoration:none; font-weight:600; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.jarvis-link-more:hover{ color: var(--j-accent); }

/* placeholder immagine (quando il progetto non ha ancora una foto) */
.jarvis-placeholder-img{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  position: relative; color: var(--j-accent);
}
.jarvis-placeholder-letter{ font-size: 64px; font-weight: 800; opacity: .3; font-family: var(--j-font-mono); }
.jarvis-placeholder-img .dashicons{ position:absolute; font-size:28px; width:28px; height:28px; opacity:.5; bottom:14px; right:14px; }

/* badge categoria — maiuscolo, spaziato, mono: come le etichette del dashboard originale */
.jarvis-badge{
  display:inline-flex; align-items:center; padding: 4px 10px; border-radius: 3px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--j-primary);
  font-family: var(--j-font-mono);
  background: rgba(0,170,255,.08); border: 1px solid var(--j-border);
}
.jarvis-badge-lg{ font-size: 12px; padding: 6px 14px; margin-bottom: 18px; }

/* =========================================================
   11. INTESTAZIONE PAGINA / BREADCRUMB
   ========================================================= */
.jarvis-page-header{
  padding: 64px 0 40px; border-bottom: 1px solid var(--j-border);
  position: relative; overflow: hidden;
  background-size: cover; background-position: right center; background-repeat: no-repeat;
}
.jarvis-page-header .jarvis-container{ position:relative; z-index:1; }
.jarvis-page-title{ font-size: 36px; margin: 10px 0 14px; text-shadow: none; }
.jarvis-page-lead{ color: var(--j-text); font-size: 17px; max-width: 720px; }
.jarvis-breadcrumb{ font-size: 12px; color: var(--j-muted); margin-bottom: 14px; font-family: var(--j-font-mono); letter-spacing: .5px; }
.jarvis-breadcrumb a{ color: var(--j-muted); text-decoration:none; }
.jarvis-breadcrumb a:hover{ color: var(--j-accent); }
.jarvis-breadcrumb span[aria-hidden]{ margin: 0 6px; }
.jarvis-breadcrumb span[aria-current]{ color: var(--j-text); }

.jarvis-page-cover{ max-height: 480px; overflow:hidden; }
.jarvis-page-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

.jarvis-page-content{ font-size: 16px; }
.jarvis-page-content > *:last-child{ margin-bottom: 0; }

/* Template "Jarvis Pieno" — area sotto l'header completamente libera, nessun vincolo di larghezza:
   sarà Elementor stesso a decidere larghezza/boxed di ogni sezione che ci costruisci dentro. */
.jarvis-pieno-content{ width: 100%; }
.jarvis-page-content h2{ font-size: 25px; margin-top: 32px; text-shadow: none; }
.jarvis-page-content h3{ font-size: 20px; margin-top: 24px; text-shadow: none; }
.jarvis-page-content img{ max-width:100%; border-radius: var(--j-radius); }

.jarvis-comments-wrap{ margin-top: 28px; }

/* =========================================================
   12. FILTRO CATEGORIE (archivio progetti)
   ========================================================= */
.jarvis-filter-bar{ border-bottom: 1px solid var(--j-border); background: rgba(2,15,30,.4); }
.jarvis-filter-inner{ display:flex; gap:6px; padding: 16px 24px; flex-wrap:wrap; }
.jarvis-filter-pill{
  padding: 9px 18px; border-radius: 3px; border: 1px solid transparent; border-left: 3px solid transparent;
  color: var(--j-muted); text-decoration:none; font-size: 13px; font-weight:600; text-transform: uppercase; letter-spacing: 1px;
  transition: all .15s ease;
}
.jarvis-filter-pill:hover{ color: var(--j-text); background: rgba(0,170,255,.05); border-left-color: var(--j-primary); }
.jarvis-filter-pill.is-active{
  background: rgba(0,255,255,.06); border-left-color: var(--j-accent); color: var(--j-accent);
}

.jarvis-empty-state{ color: var(--j-muted); text-align:center; padding: 60px 0; font-size: 16px; }
.jarvis-pagination{ margin-top: 48px; display:flex; justify-content:center; gap: 10px; }
.jarvis-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:38px;
  padding: 0 10px; border-radius: 3px; border: 1px solid var(--j-border); color: var(--j-text);
  text-decoration:none; font-weight:600; font-family: var(--j-font-mono); font-size: 13px;
}
.jarvis-pagination .page-numbers.current{ background: rgba(0,255,255,.08); border-color: var(--j-accent); color: var(--j-accent); }
.jarvis-pagination .page-numbers:hover{ border-color: var(--j-primary); color: var(--j-accent); }

/* =========================================================
   13. SINGOLO PROGETTO — hero, sidebar, galleria
   ========================================================= */
.jarvis-project-hero{ position: relative; overflow:hidden; }
.jarvis-project-hero-media{ position:absolute; inset:0; z-index:0; }
.jarvis-project-hero-media img, .jarvis-project-hero-media .jarvis-placeholder-img{ width:100%; height:100%; object-fit:cover; }
.jarvis-project-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(1,13,26,.55) 0%, rgba(1,13,26,.85) 70%, var(--j-bg) 100%);
}
.jarvis-project-hero-content{ position:relative; z-index:1; padding: 100px 24px 56px; }

.jarvis-project-layout{ display:grid; grid-template-columns: 1fr 340px; gap: 32px; align-items:start; }
.jarvis-project-main{ display:flex; flex-direction:column; gap: 28px; }
.jarvis-project-sidebar{ display:flex; flex-direction:column; gap: 20px; position: sticky; top: 24px; }

.jarvis-meta-box-title{ font-size: 16px; margin-bottom: 16px; text-shadow: none; text-transform: uppercase; letter-spacing: 1px; color: var(--j-primary); }
.jarvis-meta-list{ margin: 0 0 16px; }
.jarvis-meta-list > div{ display:flex; justify-content:space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--j-border); font-size: 13px; }
.jarvis-meta-list > div:last-child{ border-bottom: none; }
.jarvis-meta-list dt{ color: var(--j-muted); text-transform: uppercase; letter-spacing: .5px; font-size: 11px; }
.jarvis-meta-list dd{ color: var(--j-text); font-weight:600; text-align:right; }

.jarvis-gallery-wrap h2{ font-size: 19px; margin-bottom: 18px; text-shadow: none; text-transform: uppercase; letter-spacing: 1px; color: var(--j-primary); }
.jarvis-gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jarvis-gallery-item{ display:block; border-radius: var(--j-radius); overflow:hidden; border: 1px solid var(--j-border); }
.jarvis-gallery-item img{ width:100%; height:150px; object-fit:cover; display:block; transition: transform .2s ease; }
.jarvis-gallery-item:hover img{ transform: scale(1.06); }

/* =========================================================
   14. CTA finale
   ========================================================= */
.jarvis-cta-box{
  text-align:center; padding: 56px 40px; border-radius: var(--j-radius);
  background: var(--j-card-grad); border: 1px solid var(--j-border);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  position: relative; overflow: hidden;
}
.jarvis-cta-box::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background: var(--j-bar); opacity:.6; }
.jarvis-cta-box h2{ font-size: 27px; margin-bottom: 10px; text-shadow: none; }
.jarvis-cta-box p{ color: var(--j-text); margin-bottom: 24px; }

/* =========================================================
   15. DAL MONDO — layout con sidebar + widget standard WordPress
   ========================================================= */
.jarvis-blog-layout{ display:grid; grid-template-columns: 1fr 320px; gap: 32px; align-items:start; }
.jarvis-blog-main{ min-width: 0; }
.jarvis-blog-sidebar{ display:flex; flex-direction:column; gap: 20px; position: sticky; top: 24px; }

.jarvis-blog-layout .jarvis-projects-grid{ grid-template-columns: repeat(2, 1fr); }

/* Ogni widget è già avvolto in .jarvis-card dal registro sidebar: qui rifiniamo tipografia
   e liste, che WordPress genera con markup e classi proprie (widget_categories, widget_recent_entries...) */
.jarvis-widget-title{
  font-size: 13px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--j-accent); margin-bottom: 16px; text-shadow: none;
}
.jarvis-widget ul{ list-style:none; margin:0; padding:0; }
.jarvis-widget ul li{
  padding: 10px 0; border-bottom: 1px solid var(--j-border); font-size: 14px;
}
.jarvis-widget ul li:last-child{ border-bottom:none; }
.jarvis-widget ul li a{ color: var(--j-text); text-decoration:none; }
.jarvis-widget ul li a:hover{ color: var(--j-accent); }
.jarvis-widget .wp-block-archives-list li,
.jarvis-widget .wp-block-categories-list li{ padding: 8px 0; }
.jarvis-widget select{
  width:100%; background: var(--j-bg-3); border:1px solid var(--j-border); color: var(--j-text);
  padding: 8px 10px; border-radius: 4px; font-family: var(--j-font);
}
/* Contatore accanto al nome categoria (es. "Meteo (3)") */
.jarvis-widget .wp-block-categories-list li,
.jarvis-widget ul li{ display:flex; justify-content:space-between; gap:8px; }

/* =========================================================
   16. MENU MOBILE (ElementSkit off-canvas) — pannello scuro
   coerente col tema. Di default ElementSkit lo genera con
   sfondo bianco e testo grigio scuro: qui lo riportiamo in tema.
   ========================================================= */
.elementskit-menu-offcanvas-elements{
  background: var(--j-bg) !important;
  border-left: 1px solid var(--j-border);
}
.elementskit-menu-offcanvas-elements .elementskit-nav-identity-panel{
  border-bottom: 1px solid var(--j-border);
}
.elementskit-menu-offcanvas-elements .ekit-menu-nav-link{
  color: var(--j-text) !important;
  font-family: var(--j-font);
  border-bottom: 1px solid var(--j-border);
}
.elementskit-menu-offcanvas-elements .ekit-menu-nav-link:hover,
.elementskit-menu-offcanvas-elements .ekit-menu-nav-link.active{
  color: var(--j-accent) !important;
}
.elementskit-menu-hamburger.elementskit-menu-toggler,
.elementskit-menu-hamburger.elementskit-menu-toggler svg{
  color: var(--j-accent) !important;
  fill: var(--j-accent) !important;
}
.elementskit-menu-close.elementskit-menu-toggler{
  color: var(--j-accent) !important;
  border-color: var(--j-border) !important;
}

/* =========================================================
   17. RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .jarvis-features-grid{ grid-template-columns: repeat(2, 1fr); }
  .jarvis-projects-grid{ grid-template-columns: repeat(2, 1fr); }
  .jarvis-project-layout{ grid-template-columns: 1fr; }
  .jarvis-project-sidebar{ position: static; }
  .jarvis-blog-layout{ grid-template-columns: 1fr; }
  .jarvis-blog-layout .jarvis-projects-grid{ grid-template-columns: repeat(2, 1fr); }
  .jarvis-blog-sidebar{ position: static; }
}
@media (max-width: 640px){
  .jarvis-hero{ padding: 90px 20px 70px; }
  .jarvis-hero-title{ font-size: 32px; }
  .jarvis-features-grid{ grid-template-columns: 1fr; }
  .jarvis-projects-grid{ grid-template-columns: 1fr; }
  .jarvis-blog-layout .jarvis-projects-grid{ grid-template-columns: 1fr; }
  .jarvis-gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .jarvis-section{ padding: 48px 0; }
  .jarvis-section-head{ flex-direction:column; align-items:flex-start; }
  .jarvis-page-title{ font-size: 28px; }
}