/* ═══════════════════════════════════════════════════════════════════════════
   ADO Legal — visual-round2.css  ·  Release ?v=20260605b
   ───────────────────────────────────────────────────────────────────────────
   Round 2 visuale/UX no-copy. Modifica solo CSS, no nuovo JS, no nuove
   immagini, no nuovi font, no riscrittura di copy legale. Caricato DOPO
   gli altri CSS (base → nav → layout → boutique → upgrade → visual-round2),
   quindi tutte le regole hanno priorità di cascade naturale.

   Reversibilità: per disattivare il Round 2 basta rimuovere il <link> di
   questo file dagli HTML — nessun altro file è stato toccato.

   Sezioni:
     §1 Hero overlay cinematografico (sez 9-10 brief)
     §2 Hero typography (text-wrap, letter-spacing, line-height)
     §3 Hero copy max-width + lead
     §4 Mobile hero (sez 11)
     §5 Tipografia editoriale (sez 12-13)
     §6 Card premium - linea oro + hover (sez 14)
     §7 CTA premium - focus-visible + tap target (sez 15)
     §8 Navigazione - sticky backdrop + focus (sez 16-17)
     §9 Footer - contrasto + gerarchia (sez 22)
     §10 Microinterazioni (sez 23)
     §11 Reveal animation safe (sez 24)
     §12 Accessibilità globale - focus-visible, contrast, reduced motion (sez 25)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   §1  HERO OVERLAY CINEMATOGRAFICO
   ───────────────────────────────────────────────────────────────────────────
   Stratificazione raffinata: radial-gradient sponda destra (riflesso oro),
   linear-gradient orizzontale (contrasto lato testo), linear-gradient
   verticale (vignettatura basso). Sostituisce l'overlay di upgrade.css con
   stessa specificità → vince per ordine di cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

.editorial-hero.has-video .editorial-hero-bg::after,
.page-header-outer.has-video .editorial-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 74% 32%, rgba(201, 164, 92, 0.13), transparent 34%),
    linear-gradient(90deg, rgba(10, 8, 6, 0.88) 0%, rgba(10, 8, 6, 0.64) 45%, rgba(10, 8, 6, 0.78) 100%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.10) 0%, rgba(10, 8, 6, 0.78) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Home hero (.home-hero senza video, solo background-image) */
.home-hero {
  position: relative;
  isolation: isolate;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §2  HERO TYPOGRAPHY — text-wrap balance, letter-spacing, line-height
   ───────────────────────────────────────────────────────────────────────────
   I selettori targetizzano gli H1 reali del sito: .page-title (pagine
   interne con .page-header-shell) e .home-hero-title (home).
   text-wrap:balance è supportato da Chrome 114+, Safari 17.4+, Firefox 121+ —
   degrada silenziosamente nei browser più vecchi (nessun visual fallback).
   ═══════════════════════════════════════════════════════════════════════════ */

.page-title,
.editorial-hero-copy h1,
.home-hero-title {
  text-wrap: balance;
  letter-spacing: -0.025em;
}

/* Line-height controllato sui titoli hero per maggiore compattezza visiva */
.editorial-hero-copy h1.page-title,
.page-header-shell h1.page-title {
  line-height: 1.02;
}





/* ═══════════════════════════════════════════════════════════════════════════
   §3  HERO LEAD MAX-WIDTH
   ───────────────────────────────────────────────────────────────────────────
   Limito SOLO il lead a 64ch per leggibilità editoriale. Il titolo mantiene
   la max-width del contenitore (1280px da upgrade.css) per impatto pieno.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-header .page-lead,
.editorial-hero-copy .page-lead {
  max-width: 64ch;
  line-height: 1.72;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §4  MOBILE HERO (≤700px)
   ───────────────────────────────────────────────────────────────────────────
   Hero più compatta, titolo respirato, overlay più scuro.
   Niente video su mobile (già garantito da upgrade.css + JS short-circuit).
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* Overlay mobile più scuro per leggibilità su poster statico */
  .editorial-hero.has-video .editorial-hero-bg::after,
  .page-header-outer.has-video .editorial-hero-bg::after {
    background:
      linear-gradient(180deg, rgba(10, 8, 6, 0.22) 0%, rgba(10, 8, 6, 0.86) 100%),
      linear-gradient(90deg, rgba(10, 8, 6, 0.72) 0%, rgba(10, 8, 6, 0.52) 50%, rgba(10, 8, 6, 0.72) 100%);
  }

  /* H1 hero mobile: compatto, max 11ch per evitare orfani */
  .editorial-hero-copy h1.page-title,
  .page-header-shell h1.page-title {
    font-size: clamp(2.4rem, 11.5vw, 3.8rem);
    line-height: 1.0;
    letter-spacing: -0.028em;
    max-width: 14ch;
  }

  /* Lead mobile leggermente più grande per leggibilità */
  .page-header .page-lead,
  .editorial-hero-copy .page-lead {
    font-size: 1.0rem;
    line-height: 1.66;
    max-width: 100%;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §5  TIPOGRAFIA EDITORIALE — leggibilità body, balance H1/H2/H3
   ───────────────────────────────────────────────────────────────────────────
   - Paragrafi: max-width 68ch (era 56-64ch in upgrade.css) per range editoriale
   - text-wrap:balance sui titoli generali
   - text-wrap:pretty sui paragrafi lunghi (evita orfani in finale)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Balance generale sui titoli (in aggiunta a quelli hero) */
h1, h2,
.col-heading,
.manifesto-heading,
.lawyer-editorial-name,
.section--ruled-label {
  text-wrap: balance;
}

/* Pretty paragraph (evita orfani su paragrafi >= 2 righe) */
.article-body p,
.insight-body p,
.editorial-body p,
.lawyer-editorial-bio,
.scenari-body,
.manifesto-body {
  text-wrap: pretty;
}

/* Paragrafi editoriali: range comodo 64-68ch (range editoriale premium) */
.article-body,
.insight-body,
.editorial-body {
  --measure-editorial: 68ch;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §6  CARD PREMIUM — linea oro verticale + hover lift + ombra raffinata
   ───────────────────────────────────────────────────────────────────────────
   Le card reali del sito ADO sono:
     .when-card          (5x in pagine interne: "Quando intervenire")
     .insight-item       (in approfondimenti e insights)
     .lawyer-editorial   (in professionisti)
     .diff-item          (in homepage e altrove: "Differentiators")
     .scenari article    (scenari pratici)

   Applico un linguaggio comune: linea oro sottile a sx (apparizione hover),
   leggero lift su hover, micro-shadow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Linea oro verticale ::before — apparizione su hover/focus-within */
.when-card,
.insight-item,
.diff-item {
  position: relative;
  transition:
    transform 240ms cubic-bezier(0.22, 0.1, 0.36, 1),
    background-color 240ms ease;
}

.when-card::before,
.insight-item::before,
.diff-item::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(196, 162, 74, 0.78), rgba(196, 162, 74, 0));
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: top;
  transition:
    opacity 280ms ease,
    transform 320ms cubic-bezier(0.22, 0.1, 0.36, 1);
  pointer-events: none;
}

.when-card:hover,
.when-card:focus-within,
.insight-item:hover,
.insight-item:focus-within,
.diff-item:hover,
.diff-item:focus-within {
  transform: translateY(-3px);
}

.when-card:hover::before,
.when-card:focus-within::before,
.insight-item:hover::before,
.insight-item:focus-within::before,
.diff-item:hover::before,
.diff-item:focus-within::before {
  opacity: 1;
  transform: scaleY(1);
}

/* Lawyer editorial — versione più sobria (foto-card è già premium) */
.lawyer-editorial {
  transition: background-color 240ms ease;
}

.lawyer-editorial-photo {
  transition: filter 320ms ease;
}

.lawyer-editorial:hover .lawyer-editorial-photo {
  filter: grayscale(0.05) brightness(1.0);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §7  CTA PREMIUM — focus-visible, tap target, micro-hover
   ───────────────────────────────────────────────────────────────────────────
   I bottoni del sito hanno già hover translateY(-1px) (upgrade.css).
   Aggiungo focus-visible esplicito con outline oro + tap target ≥ 44px mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus-visible coerente per tutti i CTA */
.btn:focus-visible,
.btn-white:focus-visible,
.btn-accent:focus-visible,
.btn-outline:focus-visible,
.hero-cta:focus-visible,
.intake-submit:focus-visible,
.contact-submit:focus-visible,
.lawyer-editorial-cta:focus-visible,
.home-cta-primary:focus-visible,
.home-cta-secondary:focus-visible {
  outline: 2px solid rgba(196, 162, 74, 0.78);
  outline-offset: 3px;
  outline-style: solid;
}

/* CTA hover più ricco: micro-shadow oro discreta */
.btn-accent {
  transition:
    background 220ms ease,
    border-color 220ms ease,
    transform 180ms cubic-bezier(0.22, 0.1, 0.36, 1),
    box-shadow 220ms ease;
}

.btn-accent:hover {
  box-shadow: 0 6px 20px rgba(26, 56, 50, 0.22) !important;
}

.btn-white:hover,
.hero-cta:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* Tap target mobile — almeno 44×44px per WCAG 2.5.5 (Level AAA) */
@media (max-width: 700px) and (hover: none) {
  .btn,
  .btn-white,
  .btn-accent,
  .btn-outline,
  .hero-cta,
  .home-cta-primary,
  .home-cta-secondary {
    min-height: 44px;
    padding-top: 0.92rem;
    padding-bottom: 0.92rem;
  }

  .lawyer-editorial-cta,
  .insights-cta-link {
    min-height: 44px;
    padding: 0.7rem 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8  NAVIGAZIONE — focus, sticky enhancement, contrasto
   ───────────────────────────────────────────────────────────────────────────
   La nav è un custom element <ado-nav> renderizzato da nav.js. Modifico
   solo le foglie tramite selettori di discendenza (no modifica JS).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus-visible accessibile sulla navigazione */
ado-nav a:focus-visible,
ado-nav button:focus-visible {
  outline: 2px solid rgba(196, 162, 74, 0.78);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Underline animato per i link nav (sezione 23 brief) */
ado-nav a {
  position: relative;
}

ado-nav a:not(.nav-cta):not(.nav-lang)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: rgba(196, 162, 74, 0.58);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms cubic-bezier(0.22, 0.1, 0.36, 1);
}

ado-nav a:not(.nav-cta):not(.nav-lang):hover::after,
ado-nav a:not(.nav-cta):not(.nav-lang):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Aria-current per la pagina attiva */
ado-nav a[aria-current="page"]::after,
ado-nav a.active::after {
  transform: scaleX(1);
  background: rgba(196, 162, 74, 0.85);
  height: 1.5px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §8b  MOBILE NAV FIX — Round 2.1
   ───────────────────────────────────────────────────────────────────────────
   Root cause identificata via Playwright (viewport 360px):
     - nav.nav ha padding 0 24px → spazio utile: 360 - 48 = 312px
     - .nav-logo: 266px (img 78px + gap 16px + text 172px)
     - .header-controls: 89px (lang-switch 46px + gap 12.8px + nav-toggle 30px)
     - Totale 266 + 89 = 355px → disavanzo 43px → scrollWidth = 402 (overflow 42)

   Fix strutturale (non clip): riduco gap/padding e abilito min-width:0
   sugli elementi flex per consentire shrink naturale del logo a viewport
   stretto, mantenendo i contenuti visibili e funzionanti.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* Permetti agli elementi flex del nav di restringersi quando lo spazio scarseggia */
  ado-nav .nav,
  ado-nav .nav-logo,
  ado-nav .nav-logo-text,
  ado-nav .header-controls {
    min-width: 0;
  }

  /* header-controls: blocco compatto, non si espande oltre il necessario */
  ado-nav .header-controls {
    flex-shrink: 0;
    flex-wrap: nowrap;
  }

  /* nav-toggle: sempre intero, mai compresso */
  ado-nav .nav-toggle {
    flex-shrink: 0;
  }

  /* Logo text può andare a capo / troncarsi se necessario, ma di solito si comprime */
  ado-nav .nav-logo-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Viewport stretti (≤ 420px): riduzione padding nav + gap controlli */
@media (max-width: 420px) {
  ado-nav .nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  ado-nav .nav-logo {
    gap: 0.7rem !important;
  }

  ado-nav .header-controls {
    gap: 0.55rem !important;
  }

  ado-nav .lang-switch {
    gap: 0.32rem !important;
    font-size: 0.6rem !important;
  }
}

/* Viewport molto stretti (≤ 380px): nascondo il logo-text per dare priorità a logo+controlli */
@media (max-width: 380px) {
  ado-nav .nav {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  /* A 380px il logo testo "Studio Legale d'Onofrio" sfora — lo nascondo,
     mantenendo solo l'immagine logo (logo SVG resta perfettamente riconoscibile) */
  ado-nav .nav-logo-text {
    display: none;
  }

  /* Compatto ulteriormente i controlli */
  ado-nav .header-controls {
    gap: 0.45rem !important;
  }

  ado-nav .nav-toggle {
    padding-inline: 0.5rem;
  }
}

/* Safety net globale: nessun elemento può causare scroll orizzontale */
html, body {
  overflow-x: clip;
}


/* ═══════════════════════════════════════════════════════════════════════════
   §9  FOOTER — leggibilità, gerarchia
   ───────────────────────────────────────────────────────────────────────────
   Il footer è caricato via /partials/footer.html. Modifico solo l'aspetto
   visuale tramite selettori contenitore presenti nel partial.
   ═══════════════════════════════════════════════════════════════════════════ */

footer a:focus-visible,
.site-footer a:focus-visible {
  outline: 2px solid rgba(196, 162, 74, 0.78);
  outline-offset: 3px;
  border-radius: 2px;
}

footer a,
.site-footer a {
  transition: color 220ms ease, opacity 220ms ease;
}

footer a:hover,
.site-footer a:hover {
  color: rgba(196, 162, 74, 0.92);
}


/* ═══════════════════════════════════════════════════════════════════════════
   §10  MICROINTERAZIONI — link sottolineati nel testo, transizioni 180-260ms
   ───────────────────────────────────────────────────────────────────────────
   ═══════════════════════════════════════════════════════════════════════════ */

/* Link inline nel body — underline animato discreto */
.article-body a,
.insight-body a,
.editorial-body a,
.page-lead a,
.manifesto-body a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(180deg, transparent calc(100% - 1px), rgba(196, 162, 74, 0.5) calc(100% - 1px), rgba(196, 162, 74, 0.5));
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-image 220ms ease, color 220ms ease;
}

.article-body a:hover,
.insight-body a:hover,
.editorial-body a:hover,
.page-lead a:hover,
.manifesto-body a:hover {
  color: var(--accent, #8B6914);
  background-image: linear-gradient(180deg, transparent calc(100% - 1px), rgba(196, 162, 74, 0.95) calc(100% - 1px), rgba(196, 162, 74, 0.95));
}


/* ═══════════════════════════════════════════════════════════════════════════
   §11  REVEAL ANIMATION — fail-safe
   ───────────────────────────────────────────────────────────────────────────
   Il sito ha già una classe .reveal usata in homepage (.btn.reveal,
   .when-card.reveal, .cta-pre.reveal). La rendo fail-safe: di default
   visibile, animata solo se il JS attiva .js sul root e l'utente non
   ha richiesto reduced motion.
   ═══════════════════════════════════════════════════════════════════════════ */

/* DEFAULT — visibile sempre (no JS fail, no flash invisibile) */
.reveal {
  opacity: 1;
  transform: none;
}

/* Se main.js aggiunge .js sul <html>, e questo CSS è caricato dopo,
   la .reveal può ricevere lo stato iniziale animato. Solo se il JS è
   già operativo: in main.js esiste già lo stato hardware-accelerated. */
html.js .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 480ms cubic-bezier(0.22, 0.1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 0.1, 0.36, 1);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Sicurezza: se prefers-reduced-motion, reveal sempre visibile */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  html.js .reveal,
  html.js .reveal:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   §12  ACCESSIBILITÀ GLOBALE — focus-visible, reduced motion, contrast
   ───────────────────────────────────────────────────────────────────────────
   Outline coerente su tutti gli elementi interattivi non già coperti.
   Reduced motion: blanket override per tutte le transizioni Round 2.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus-visible globale per elementi interattivi senza style dedicato */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(196, 162, 74, 0.78);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link — se esiste, nasconde finché non focus */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--hero, #0A0806);
  color: var(--surface, #F5F0E8);
  padding: 12px 20px;
  z-index: 9999;
  text-decoration: none;
  font-family: var(--sans, 'Jost'), sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: top 200ms ease;
}

.skip-link:focus {
  top: 0;
}

/* Reduced motion blanket — disattiva ogni transizione/animazione introdotta in R2 */
@media (prefers-reduced-motion: reduce) {
  .when-card,
  .insight-item,
  .diff-item,
  .when-card::before,
  .insight-item::before,
  .diff-item::before,
  .lawyer-editorial-photo,
  ado-nav a::after,
  .article-body a,
  .insight-body a,
  .editorial-body a {
    transition: none !important;
    transform: none !important;
  }

  .when-card:hover,
  .insight-item:hover,
  .diff-item:hover {
    transform: none !important;
  }

  .when-card:hover::before,
  .insight-item:hover::before,
  .diff-item:hover::before {
    opacity: 1;
    transform: scaleY(1) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FINE visual-round2.css  ·  Release ?v=20260605b
   ═══════════════════════════════════════════════════════════════════════════ */