/* ═══════════════════════════════════════════════════════════════
   PREMIUM LAYER — Tarcisio Madaschi S.p.A.
   Livello estetico condiviso a tutte le pagine.
   Caricato PER ULTIMO nell'<head>: rifinisce lo stile esistente
   (font proprietari, palette, micro-interazioni, ombre, focus)
   senza modificare layout e contenuti.
   ═══════════════════════════════════════════════════════════════ */

/* ── 0. FONT SELF-HOSTED (niente Google Fonts CDN) ───────────── */
/* Archivo — variable (wdth 62-125, wght 100-900) · SIL OFL */
@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.woff2') format('woff2-variations'),
      url('fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
/* IBM Plex Mono · SIL OFL */
@font-face{ font-family:'IBM Plex Mono'; src:url('fonts/plexmono-regular.woff2') format('woff2');  font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('fonts/plexmono-medium.woff2') format('woff2');   font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'IBM Plex Mono'; src:url('fonts/plexmono-semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ── 1. PALETTE — bianco caldo / crema, blu elettrico ────────── */
:root{
  --bg:         #fdfcfa;
  --bg2:        #f6f4ef;
  --bg3:        #efece4;
  --surface:    #e9e5db;
  --border:     #e1dcd2;
  --border2:    #d0c9bb;
  /* --text-faint resta quello originale: garantisce contrasto sulle sezioni scure */

  --tm-blue:#003399;
  --tm-blue-light:#1a4db3;
  --tm-glow:rgba(0,51,153,.16);
  --tm-ease:cubic-bezier(.2,.7,.3,1);
}

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  font-stretch:100%;
}

/* ── 2. TIPOGRAFIA — display condensato ─────────────────────── */
h1,h2,h3,h4,h5,h6,
.hero-title,.section-title,.card-title,.servizio-title,.valore-title,
.modulo-title,.settore-name,.nav-logo-text,.nav-drawer-brand,
.stat-num,.big-num{
  font-family:'Archivo','Arial Narrow',system-ui,sans-serif;
  font-stretch:86%;
  letter-spacing:-.012em;
}

.hero-title{ font-stretch:80%; letter-spacing:-.03em; }
.section-title{ font-stretch:84%; letter-spacing:-.022em; }
.nav-logo-text,.nav-drawer-brand{ font-stretch:88%; letter-spacing:.11em; }

/* etichette mono: respiro maggiore, look tecnico */
.section-label,.hero-eyebrow,.card-category,.form-label,.perche-label{
  letter-spacing:.26em;
}

/* corpo testo: larghezza normale, lettura confortevole */
p,li,.hero-subtitle,.card-desc,.servizio-desc,.valore-desc,.settore-desc{
  font-stretch:100%;
}

/* ── 3. SELEZIONE, FOCUS, SCROLLBAR ─────────────────────────── */
::selection{ background:var(--tm-blue); color:#fff; }

a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--tm-blue-light);
  outline-offset:3px;
  border-radius:2px;
}

*{ scrollbar-width:thin; scrollbar-color:rgba(0,51,153,.40) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(0,51,153,.35);
  border:3px solid transparent;
  background-clip:content-box;
  border-radius:99px;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(0,51,153,.60); background-clip:content-box; }

/* ── 4. NAVBAR ──────────────────────────────────────────────── */
nav.scrolled{
  background:rgba(253,252,250,.88) !important;
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 1px 0 rgba(13,26,51,.06), 0 10px 34px rgba(13,26,51,.05) !important;
}

.nav-link-item a{ position:relative; }
.nav-link-item a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-7px;
  height:1px; background:currentColor; opacity:.75;
  transition:right .4s var(--tm-ease);
}
.nav-link-item a:hover::after{ right:0; }
.nav-link-item a.nav-cta::after{ display:none; }

.nav-cta{ transition:background .35s var(--tm-ease), color .35s var(--tm-ease), border-color .35s var(--tm-ease), box-shadow .35s var(--tm-ease) !important; }
.nav-cta:hover{ box-shadow:0 6px 18px rgba(0,51,153,.18); }

.nav-logo-img{ transition:transform .5s var(--tm-ease), box-shadow .4s var(--tm-ease); }
.nav-logo:hover .nav-logo-img{ transform:translateY(-1px) scale(1.03); }

/* ── 5. HERO ────────────────────────────────────────────────── */
.hero-eyebrow::before,.hero-eyebrow::after{ width:44px; }
.hero-nav li a{ transition:background .35s var(--tm-ease), color .35s var(--tm-ease), border-color .35s var(--tm-ease), transform .35s var(--tm-ease), box-shadow .35s var(--tm-ease); }
.hero-nav li a:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28); }

/* ── 6. CARD & BLOCCHI ──────────────────────────────────────── */
.progetto-card,.servizio-card,.valore-card,.modulo-card,.settore-item{
  transition:transform .5s var(--tm-ease), box-shadow .5s var(--tm-ease), border-color .5s var(--tm-ease), background .5s var(--tm-ease);
}
.progetto-card:hover,.servizio-card:hover,.valore-card:hover,.modulo-card:hover{
  transform:translateY(-5px);
  box-shadow:0 1px 1px rgba(13,26,51,.05),
             0 10px 26px rgba(13,26,51,.08),
             0 28px 60px rgba(0,51,153,.09);
}

.card-img{ overflow:hidden; }
.card-img img,.progetto-card img{ transition:transform .9s var(--tm-ease); }
.progetto-card:hover .card-img img,.progetto-card:hover img{ transform:scale(1.045); }

.card-arrow,.servizio-link{ transition:transform .4s var(--tm-ease), color .3s var(--tm-ease); }
.progetto-card:hover .card-arrow,.servizio-card:hover .card-arrow{ transform:translateX(5px); }

.servizio-icon,.valore-icon{ transition:transform .5s var(--tm-ease); }
.servizio-card:hover .servizio-icon,.valore-card:hover .valore-icon{ transform:translateY(-3px) scale(1.04); }

/* ── 7. FORM ────────────────────────────────────────────────── */
.form-input,input[type=text],input[type=email],input[type=tel],
input[type=date],textarea,select{
  transition:border-color .3s var(--tm-ease), box-shadow .3s var(--tm-ease), background .3s var(--tm-ease);
}
.form-input:focus,input[type=text]:focus,input[type=email]:focus,
input[type=tel]:focus,input[type=date]:focus,textarea:focus,select:focus{
  border-color:var(--tm-blue) !important;
  box-shadow:0 0 0 3px var(--tm-glow);
  outline:none;
}

/* ── 8. FOOTER ──────────────────────────────────────────────── */
.footer-legal{ letter-spacing:.09em; }
.footer-links a{ transition:color .3s var(--tm-ease), opacity .3s var(--tm-ease); }

/* ── 9. ANIMAZIONI D'INGRESSO ───────────────────────────────── */
.fade-up{ transition:opacity .9s var(--tm-ease), transform .9s var(--tm-ease); }

/* ── 10. PULSANTI FLOTTANTI MOBILE ──────────────────────────── */
.floating-contact a{ transition:transform .3s var(--tm-ease), box-shadow .3s var(--tm-ease); }

/* ── 11. ACCESSIBILITÀ MOVIMENTO ────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── 12. MENU LATERALE: niente overflow orizzontale ──────────
   Il drawer chiuso resta traslato fuori schermo e su alcune pagine
   allargava la pagina di 300px (scroll orizzontale su mobile).
   visibility lo toglie anche dal focus da tastiera quando è chiuso. */
html{ overflow-x:clip; }
body{ overflow-x:clip; }
.nav-drawer{
  visibility:hidden;
  transition:transform .35s var(--tm-ease), visibility 0s linear .35s;
}
.nav-drawer.open{
  visibility:visible;
  transition:transform .35s var(--tm-ease), visibility 0s linear 0s;
}

/* ── 13. HERO HOMEPAGE: comparsa senza dipendere dal JS ──────
   .hero-content parte a opacity:0 e attendeva una classe "in" che
   nessuno script aggiungeva: titolo e sottotitolo della home erano
   invisibili. Qui la comparsa è affidata a una animazione CSS. */
.hero-content{
  opacity:0;
  animation:tm-hero-in .9s var(--tm-ease) .25s forwards;
}
.hero-content.in{ animation:none; opacity:1; transform:none; }
@keyframes tm-hero-in{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-content{ opacity:1; animation:none; transform:none; }
}

/* ── 14. HOME: titolo solo per Google e screen reader ────────
   Il video di copertina contiene gia il lettering, quindi il blocco
   testuale non viene disegnato — ma resta nel DOM, quindi la pagina
   mantiene il suo H1 e la descrizione per i motori di ricerca. */
.hero-content.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
  opacity:1 !important; animation:none !important; transform:none !important;
}
/* senza testo da proteggere, la vignettatura sul video puo alleggerirsi:
   resta solo la sfumatura in alto, che tiene leggibile la navbar */
#hero .hero-overlay{
  background:linear-gradient(to bottom,
    rgba(4,12,30,.55) 0%,
    rgba(4,12,30,.10) 16%,
    rgba(4,12,30,0)   40%,
    rgba(4,12,30,0)   78%,
    rgba(4,12,30,.35) 100%);
}