/* QA MOBILE — difetti trovati misurando, non guardando.  6 settembre 2026.
   Tenuto separato da hero-scrim.css: quello e' UN componente (la velatura
   dell'hero), questo e' un elenco di correzioni puntuali. Mescolarli
   renderebbe impossibile capire dopo perche' esiste una regola.

   1. LA DATA DEI REPORT ERA GRIGIA AL 50% SU BIANCO: 2,97:1 misurato, sotto la
      soglia di 4,5. Non e' un dettaglio estetico — e' la data, cioe' come si
      capisce se un report e' vecchio. Portata a un grigio pieno.

   2. AREE DI TOCCO SOTTO I 44px. Misurate in LARGHEZZA E ALTEZZA: un controllo
      che guarda solo l'altezza approva una scheggia larga 36px. Gli elementi
      trovati sotto soglia su iPhone erano il logo (36x36), il tasto del menu
      (40x44), il cambio lingua EN/IT (34x22) e i link "Read the report" e
      "View Opportunity" (80x22 e 141x22). Su un telefono, in piedi, un
      bersaglio di 22px si sbaglia. */

.article-date {
  color: #56606b !important;      /* 6,4:1 su bianco, contro 2,97:1 di prima */
}

/* Il bersaglio si allarga con il padding e con un'area minima, senza spostare
   il testo: un tocco piu' grande non deve diventare un bottone piu' grande. */
.lang-switch a,
.lang-toggle a,
a.report-link,
.report-card a,
.opportunity-card a,
.card-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.logo, a.logo, .site-logo {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobile-toggle, .nav-toggle, button[aria-label*="enu"] {
  min-width: 48px;
  min-height: 48px;
}

@media (max-width: 860px) {
  /* Su telefono i link di testo dentro le schede diventano bersagli pieni:
     e' la stessa riga, con lo spazio attorno che la rende toccabile. */
  .report-card a, .opportunity-card a, .card-cta, .article-card a {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}


/* I SELETTORI VERI, chiesti al DOM invece che indovinati.  6 settembre 2026.
   Il primo giro li aveva ipotizzati (`.logo`, `.opportunity-card a`) e non
   corrispondeva a niente: le regole c'erano e non toccavano nessun elemento —
   un fix che sembra applicato ed e' inerte. Questi vengono da un censimento
   degli elementi sotto i 44px sulla pagina resa, con il loro selettore. */

a.brand,
a.card-link,
a.contact-link,
button.pg-btn,
.lang-switch a,
.footer-links a,
.footer-legal a,
.pc-consent-text a { min-height: 44px; display: inline-flex; align-items: center; }
/* `.newsletter-consent a` NON sta qui, e la sua assenza e' una decisione.
   Quel link vive DENTRO una frase ("...you agree to our Privacy Policy. You
   can unsubscribe..."): dargli 44px di altezza e 2px di respiro laterale lo
   trasformava in una scatola e spezzava la frase in colonne con dei vuoti —
   il difetto che Val ha segnalato il 6 settembre. Un bersaglio grande e' un
   bene su un bottone; dentro una riga di testo corrente e' un danno, e la
   riga resta comunque raggiungibile perche' e' alta quanto la sua riga. */

/* Logo e paginazione sono quadrati: serve anche la LARGHEZZA, altrimenti
   restano schegge alte 44 e larghe 34. */
a.brand, button.pg-btn, .lang-switch a { min-width: 44px; justify-content: center; }

/* I bottoni pieni erano a 39-42px: mancava poco, e "quasi" su un bersaglio da
   toccare in piedi vuol dire sbagliarlo. */
a.btn, button.pc-consent-btn { min-height: 46px; }

/* I link dentro il testo del footer e del consenso non diventano blocchi: si
   allarga l'area toccabile attorno alla riga, senza spostare l'impaginato. */
.footer-legal a, .pc-consent-text a { padding: 14px 2px; }


/* TRE REGOLE CON `!important`, e il motivo e' misurato non supposto.
   Dopo il giro precedente logo (36px largo), paginazione (42px larga) e
   bottoni pieni (39px alti) NON si erano mossi: le pagine dichiarano quelle
   misure con selettori piu' specifici del mio foglio, che arriva dopo ma
   perde comunque. Una regola che non vince e' una regola che non c'e', e
   lasciarla li' e' peggio che non scriverla — sembra applicata. */

button.pg-btn { min-width: 44px !important; }
a.btn, button.pc-consent-btn { min-height: 46px !important; }

/* IL MARCHIO A 44px — misurato, non concesso.
   `site.css` sotto 768px impone `.site-header .brand { min-width: 0 !important }`
   per far restringere il marchio ed evitare che l'intestazione sbordi sui
   telefoni stretti. La domanda giusta non era "chi vince" ma "se lo allargo,
   torna lo sbordo?". Provato a 320, 360, 375, 390 e 414px su cinque pagine,
   misurando sia la pagina sia lo scroll interno dell'header: sbordo massimo
   ZERO in tutti e venticinque i casi, con e senza i 44px. Si allarga.
   Per tornare indietro: togliere la regola qui sotto.

   E LA SPECIFICITA' DEVE VINCERE: `a.brand` vale (0,1,1), `.site-header .brand`
   vale (0,2,0) e vince anche a parita' di `!important`. Un `!important` non e'
   una scorciatoia per la specificita': se il selettore perde, la regola resta
   li' a sembrare applicata. */
.site-header a.brand, header a.brand {
  min-width: 44px !important;
  justify-content: center;
}

/* I BOTTONI DELLE SCHEDE di Capital View erano capati a 38px da
   `.page-capital-view .article-grid .article-card .btn { min-height: 38px
   !important }`, ed erano le CTA principali della pagina. Sei pixel, nessun
   rischio di sbordo: stessa specificita' invece di un selettore piu' largo. */
.page-capital-view .article-grid .article-card .btn { min-height: 44px !important; }