/* ============================================================
   Nunzio Lella — v6 DEPLOYMENT READINESS LAYER
   --------------------------------------------------------------
   AUDIT: Lead UX/UI · WCAG 2.2 AA · GDPR Officer (2026-02-13)
   Loaded LAST: overrides v5.css, pages.css, styles.css.
   --------------------------------------------------------------
   Goals:
   1) Mobile contrast & spacing fixes (AA 4.5:1)
   2) Touch targets ≥ 44×44 px
   3) Hero blob ↔ text legibility (mobile scrim)
   4) :focus-visible outline ad alto contrasto
   5) Skip-to-content link a11y
   6) Iubenda cookie banner cosmetics
   7) Footer policy links + bottom-bar layout
   8) reduced-motion + reduced-data hardening
   ============================================================ */

/* ============================================================
   1 · COLOR TOKEN OVERRIDES — WCAG AA on --bg #050505
   --------------------------------------------------------------
   Tested with WebAIM contrast checker:
   - --muted  #A6A29B vs #050505 → 8.6:1 (AA pass for all sizes)
   - --muted-2 #878079 vs #050505 → 4.7:1 (AA pass for normal text)
   - --text-hi e --text restano invariati (già conformi)
   ============================================================ */
:root {
  --muted:   #A6A29B;
  --muted-2: #878079;
  --focus:   #FFB800; /* yellow-amber for :focus-visible (>7:1 on dark) */
  --link-touch: 44px;
}

/* small-text-on-very-dark elements: rinforzo aggiuntivo dove serve */
.hero-contact,
.scroll-hint,
.ph-crumb,
.tl-place,
.cs-line .cs-k,
.logo .logo-role,
.f-brand .f-role,
.footer-bottom,
.footer-bottom a,
.lang-menu button .code,
.about-facts .row span:first-child,
.pr-kind,
.pr-label,
.post-meta,
.li-card p,
.li-linkedin .lk-s,
.f-connect .fc-li .lk-s,
.form-note,
.newsletter .nl-small {
  color: var(--muted);
}

/* card descriptions: erano su --muted, ora richiedono --text per ≥7:1 */
.nc-desc,
.pr-desc,
.value p,
.post-card p,
.about-prose p:not(.lead),
.tl-bullets li,
.tl-desc,
.soon-wrap p {
  color: var(--text); /* #C9C5BD = 11.2:1 on #050505 */
}

/* ============================================================
   2 · :focus-visible — outline ad alto contrasto AA
   --------------------------------------------------------------
   - Solid 3px outline, offset 3px
   - Colore amber #FFB800 (visibilità su nero E su rosso accent)
   - Disabilita la mix-blend-mode del custom cursor in focus
   ============================================================ */
*:focus { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.menu-toggle:focus-visible,
.lang-btn:focus-visible,
.btn:focus-visible,
.btn-submit:focus-visible,
.btn-call:focus-visible,
.f-soc:focus-visible,
.nav-card:focus-visible,
.proof-card:focus-visible,
.post-card:focus-visible,
.lang-menu button:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 3px !important;
  border-radius: 1px;
  box-shadow: 0 0 0 6px rgba(255, 184, 0, .22) !important;
  transition: outline-offset .15s var(--ease), box-shadow .15s var(--ease);
}

/* form fields: outline andrebbe sul border-bottom */
.field input:focus-visible,
.field textarea:focus-visible,
.newsletter input[type=email]:focus-visible {
  outline: none !important;
  border-bottom: 2px solid var(--focus) !important;
  box-shadow: 0 1px 0 0 var(--focus), 0 0 0 4px rgba(255,184,0,.18) !important;
}

/* ============================================================
   3 · SKIP-TO-CONTENT — a11y entry point
   ============================================================ */
.skip-link {
  position: fixed;
  top: -100px; left: 16px; z-index: 10020;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 22px; text-decoration: none;
  border: 2px solid var(--accent);
  transition: top .2s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  outline: 3px solid var(--focus) !important;
  outline-offset: 3px !important;
}

/* ============================================================
   4 · TOUCH TARGETS ≥ 44×44 px (WCAG 2.5.5 AAA / 2.5.8 AA)
   ============================================================ */
.burger {
  width: 44px;
  height: 44px;
}

.menu-toggle {
  min-height: 44px;
  min-width: 44px;
}

.lang-btn {
  min-height: 44px;
}

.lang-menu button {
  min-height: 44px;
}

.f-soc {
  width: 44px;
  height: 44px;
}

.btn,
.btn-primary,
.btn-ghost,
.btn-submit,
.btn-call,
.nav-cta {
  min-height: 44px;
}

.nc-arrow,
.cs-line .cs-ic {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
}

/* tag/chip clickable areas: aumentati su mobile (in section 5) */
.nc-tags span,
.tools-cloud span,
.tl-chips .chip,
.pr-tag {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

/* form .field touch */
.field input,
.field textarea,
.newsletter input[type=email] {
  min-height: 44px;
}

/* footer column links: spaziatura touch-friendly */
.f-col a,
.ov-foot .ovf-col a {
  min-height: 32px;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
}

/* nav links interno top: garantisco hit area */
.nav-links a {
  padding: 12px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   5 · MOBILE SPACING + READABILITY — < 768 px
   ============================================================ */
@media (max-width: 768px) {

  /* Hero spacing */
  .hero {
    padding-top: 110px;
    padding-bottom: 60px;
    min-height: auto;
  }

  /* hide scroll indicator on mobile portrait — overlaps with hero-contact */
  .scroll-hint { display: none !important; }
  .hero h1 {
    font-size: clamp(48px, 16vw, 80px) !important;
    line-height: .9;
  }
  .hero-lead-p {
    font-size: 16px !important;
    line-height: 1.6;
    max-width: 100%;
  }

  /* Hero contact: blocchi più ariosi per touch + leggibilità */
  .hero-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px !important;
    padding-top: 22px;
    margin-top: 36px;
    font-size: 13px !important;
  }
  .hero-contact > a,
  .hero-contact > span {
    min-height: 32px;
    padding: 4px 0;
    line-height: 1.4;
  }

  /* HERO SCRIM — blob non deve "mangiare" il testo */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(110% 70% at 20% 50%,
        rgba(5,5,5,.78) 0%,
        rgba(5,5,5,.55) 40%,
        rgba(5,5,5,0) 75%);
  }
  .hero .hero-canvas {
    opacity: .55; /* blob più tenue su mobile */
  }
  .hero .wrap { z-index: 3; }

  /* CTA hero verticale, full-width per touch */
  .hero-cta {
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }

  /* SECTION head: titoli mobile più compatti */
  .section { padding-block: clamp(60px, 14vw, 100px); }
  .section-title {
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.05;
  }

  /* nav-card mobile: padding più generoso, gerarchia chiara */
  .nav-card {
    padding: 28px 22px 26px !important;
    min-height: 200px;
  }
  .nc-title {
    font-size: clamp(22px, 7vw, 30px) !important;
    margin: 22px 0 10px;
  }
  .nc-desc {
    font-size: 14.5px;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .nc-tags { gap: 6px; }
  .nc-tags span {
    font-size: 10.5px;
    padding: 6px 10px;
  }

  /* Stat strip mobile leggibilità */
  .stat-strip .stat {
    padding: 32px 22px !important;
  }
  .stat-strip .s-num {
    font-size: clamp(40px, 12vw, 60px) !important;
  }
  .stat-strip .s-label {
    font-size: 11px;
    color: var(--text); /* boosted da --muted */
  }

  /* Proof card mobile */
  .proof-card {
    padding: 28px 22px !important;
  }
  .pr-num {
    font-size: clamp(40px, 11vw, 56px) !important;
  }
  .pr-desc {
    font-size: 14.5px;
    color: var(--text);
  }
  .pr-kind {
    font-size: 9.5px;
    color: var(--muted);
  }

  /* Logo strip placeholder leggibili */
  .logo-strip { padding: 22px 18px 26px; margin-top: 36px; }
  .ls-row { grid-template-columns: 1fr 1fr; }
  .logo-ph { font-size: 16px; }
  .logo-sub { font-size: 9.5px; color: var(--muted); }

  /* Mega CTA mobile */
  .mg-word {
    font-size: clamp(40px, 16vw, 80px) !important;
  }
  .mg-link { gap: 18px; }
  .mg-row { padding-top: 20px; }
  .mg-note { font-size: 14px; }

  /* Footer mobile: leggibilità + ordine logico */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding-bottom: 36px;
  }
  .f-col h4, .f-connect h4 {
    margin-bottom: 14px;
    font-size: 11px;
  }
  .f-col ul { gap: 10px; }
  .f-col a {
    font-size: 14px;
    color: var(--text);
  }
  .f-brand p { font-size: 14px; color: var(--text); }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 0 32px;
    font-size: 11px;
  }
  .footer-bottom .fb-right {
    gap: 14px 18px;
    width: 100%;
  }

  /* Overlay menu mobile: testi più piccoli + meno scroll */
  .ov-inner { padding: 100px 24px 40px; }
  .ov-links .ov-txt {
    font-size: clamp(28px, 8vw, 42px) !important;
  }
  .ov-links a { padding: 13px 0; }

  /* Page hero (inner pages): meno padding */
  .page-hero {
    padding-top: 120px !important;
    padding-bottom: 36px;
  }
  .page-hero h1 {
    font-size: clamp(38px, 11vw, 64px) !important;
  }
  .page-hero .ph-lead {
    font-size: 16px !important;
    color: var(--text);
  }
  .ph-watermark { font-size: clamp(160px, 50vw, 280px); opacity: .8; }

  /* Form fields mobile */
  .form-card { padding: 24px 20px !important; }
  .field input,
  .field textarea {
    font-size: 16px !important; /* iOS no-zoom on focus */
  }

  /* Side rail nascosta su mobile (era già da 1280px ma esplicito) */
  .side-rail { display: none !important; }

  /* Cursor: già nascosto da pointer:coarse, doppio safeguard */
  .cur-dot, .cur-ring { display: none !important; }
}

/* ============================================================
   6 · SMALL MOBILE — < 420 px (iPhone SE etc.)
   ============================================================ */
@media (max-width: 420px) {
  :root { --gut: 18px; }
  .hero h1 { font-size: clamp(42px, 14vw, 64px) !important; }
  .nc-title { font-size: 22px !important; }
  .section-title { font-size: 26px !important; }
  .mg-word { font-size: clamp(36px, 14vw, 64px) !important; }
}

/* ============================================================
   7 · LANDSCAPE PHONES — hero non claustrofobico
   ============================================================ */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: auto; padding-top: 90px; padding-bottom: 40px; }
  .scroll-hint { display: none; }
}

/* ============================================================
   8 · PRINT — niente animazioni, niente background pesanti
   ============================================================ */
@media print {
  .nav, .nav-overlay, .page-curtain, .scroll-hint,
  .hero-canvas, .bg-fluid, .intro-loader,
  .scroll-progress, .side-rail, .cur-dot, .cur-ring,
  .km-track, .band-marquee, .proof-glow,
  body::after, .hero-grid-bg, .ph-watermark { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* ============================================================
   9 · prefers-reduced-motion + reduced-data — hardening
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-canvas, .bg-fluid { opacity: .25 !important; }
  body::after { display: none !important; }
}
@media (prefers-reduced-data: reduce) {
  .hero-canvas, .bg-fluid { display: none !important; }
  body::after { display: none !important; }
}

/* ============================================================
   10 · IUBENDA cosmetics — match brand
   ============================================================ */
#iubenda-cs-banner,
#iubenda-cs-banner * {
  font-family: var(--mono) !important;
}
.iubenda-tp-btn,
.iub-cs-default {
  --iub-cs-bg: var(--bg) !important;
}

/* small badge "Privacy Policy" link via Iubenda */
.iubenda-white,
.iubenda-nostyle {
  font-family: var(--mono) !important;
  font-size: 11.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color .25s !important;
}
.iubenda-white:hover,
.iubenda-nostyle:hover {
  color: var(--accent-2) !important;
}

/* ============================================================
   11 · FOOTER LEGAL ROW (iniettato da site.js)
   ============================================================ */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .06em;
}
.footer-legal a,
.footer-legal button {
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 6px 0;
  font: inherit;
  cursor: pointer;
  transition: color .22s;
  text-decoration: none;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.footer-legal a:hover,
.footer-legal button:hover {
  color: var(--accent-2);
}
.footer-legal .sep {
  color: var(--muted-2);
  opacity: .6;
}

/* ============================================================
   12 · POLICY PAGES (privacy + cookie)
   ============================================================ */
.policy-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 140px var(--gut) clamp(80px, 12vw, 140px);
}
.policy-wrap h1 {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--text-hi);
  margin-bottom: 24px;
  line-height: 1;
}
.policy-wrap .policy-kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.policy-wrap .policy-kicker::before {
  content: "";
  width: 28px;
  height: 6px;
  background: var(--accent);
  display: inline-block;
}
.policy-wrap .policy-intro {
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 36px;
}
.policy-wrap .policy-frame {
  border: 1px solid var(--line-soft);
  background: var(--surface);
  padding: clamp(22px, 3vw, 44px);
  min-height: 480px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
}
.policy-wrap .policy-frame iframe {
  width: 100%;
  min-height: 1200px;
  border: 0;
  background: transparent;
  color-scheme: dark;
}
.policy-wrap .policy-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 22px;
  line-height: 1.7;
}
.policy-wrap .policy-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-2);
  border: 1px solid var(--line);
  padding: 14px 22px;
  margin-top: 36px;
  min-height: 44px;
  transition: border-color .25s, color .25s, background .25s, transform .25s var(--ease);
}
.policy-wrap .policy-back:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  transform: translate(-2px,-2px);
}