/* Giovanna Basilico — portfolio
   Palette e valori base come custom properties; il resto degli stili
   e' inline nel markup, cosi ogni blocco e' modificabile dove si legge. */
:root {
  --ink: #1b1e24;
  --body: #3d434b;
  --muted: #4d535c;
  --soft: #5f656c;
  --bg: #fbfaf8;
  --bg-tint: #f1f4f5;
  --bg-accent: #e6f2f4;
  --line: #e5e3de;
  --line-soft: #dfe6e9;
  --petrol: #185c68;
  --petrol-dark: #114650;
  --petrol-deep: #0f4249;
  --sand: #faf5ea;
  --sand-strong: #f3e5c6;
  --gold: #8a6a2f;
  --radius: 12px;
  --radius-sm: 8px;
  --max-width: 1120px;
}
html { scroll-behavior: smooth; }
  body { margin:0; background:#fbfaf8; color:#1b1e24; font-family:'Instrument Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing:antialiased; }
  * { box-sizing: border-box; }
  a { color:#185c68; text-decoration:none; }
  h1,h2,h3,h4,p,ul,ol,li,figure { margin:0; }
  ul { padding:0; list-style:none; }
  :focus-visible { outline:2px solid #185c68; outline-offset:3px; border-radius:3px; }
  @media (max-width: 860px) {
    #seo-geo h2 { white-space: normal !important; }
  }
  @media (max-width: 1040px) {
    #nav-links { display:none !important; }
    #nav-toggle { display:inline-flex !important; }
    #nav-cv { display:inline-flex !important; }
    #proj-nav { display:flex !important; }
    #section-chips { display:flex !important; }
    #clienti-nav { display:flex !important; }
    #clienti-grid {
      display:flex !important;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scrollbar-width:none;
      gap:14px;
      padding-bottom:6px;
      margin-right:calc(-1 * clamp(20px,5vw,40px));
      padding-right:clamp(20px,5vw,40px);
    }
    #clienti-grid > div {
      flex:0 0 82%;
      scroll-snap-align:start;
    }
  }
  @media (max-width: 900px), (hover: none) {
    [data-parallax] { transform: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
[hidden] { display: none !important; }
#proj-nav { display: none; }
#section-chips { display: none; }
#section-chips::-webkit-scrollbar { display: none; }
[role="tablist"]::-webkit-scrollbar { display: none; }
#clienti-grid::-webkit-scrollbar { display: none; }
#clienti-nav { display: none; }

/* stati hover e pseudo-elementi estratti dal markup */
/* Racchiuse in (hover: hover): sui dispositivi touch il primo tocco su un
   elemento con stili :hover applica lo stato hover invece di attivare il
   link, e serve un secondo tocco. Su iOS e' il motivo per cui la freccia
   'torna su' non rispondeva subito. */
@media (hover: hover) {
  a:hover { color:#114650; }
  .x1:hover{color:#185c68}
  .x2:hover{color:#185c68}
  .x3:hover{color:#185c68}
  .x4:hover{color:#185c68}
  .x5:hover{color:#185c68}
  .x6:hover{background:#114650}
  .x7:hover{background:#e6f2f4;color:#185c68}
  .x8:hover{background:#e6f2f4;color:#185c68}
  .x9:hover{background:#e6f2f4;color:#185c68}
  .x9b:hover{background:#e6f2f4;color:#185c68}
  .x10:hover{background:#e6f2f4;color:#185c68}
  .x11:hover{background:#e6f2f4;color:#185c68}
  .x12:hover{background:#e6f2f4;color:#185c68}
  .x13:hover{background:#e6f2f4;color:#185c68}
  .x14:hover{background:#e6f2f4;color:#185c68}
  .x15:hover{background:#e6f2f4;color:#185c68}
  .x16:hover{transform:translateY(-3px);border-color:#185c68;box-shadow:0 10px 26px rgba(16,59,78,.10)}
  .x17:hover{transform:translateY(-3px);border-color:#185c68;box-shadow:0 10px 26px rgba(16,59,78,.10)}
  .x18:hover{transform:translateY(-3px);border-color:#185c68;box-shadow:0 10px 26px rgba(16,59,78,.10)}
  .x19:hover{transform:translateY(-3px);border-color:#185c68;box-shadow:0 10px 26px rgba(16,59,78,.10)}
  .x20:hover{transform:translateY(-2px);border-color:#185c68}
  .x21:hover{transform:translateY(-2px);border-color:#185c68}
  .x22:hover{transform:translateY(-2px);border-color:#185c68}
  .x23:hover{transform:translateY(-2px);border-color:#185c68}
  .x24:hover{transform:translateY(-2px);border-color:#185c68}
  .x25:hover{transform:translateY(-3px);border-color:#185c68;box-shadow:0 10px 26px rgba(16,59,78,.10)}
  .x26:hover{transform:translateY(-3px);border-color:#185c68;box-shadow:0 10px 26px rgba(16,59,78,.10)}
  .x27:hover{transform:translateY(-3px);border-color:#185c68;box-shadow:0 10px 26px rgba(16,59,78,.10)}
  .x28:hover{transform:translateY(-3px);border-color:#185c68;box-shadow:0 10px 26px rgba(16,59,78,.10)}
  .x29:hover{transform:translateY(-3px);border-color:#185c68;box-shadow:0 10px 26px rgba(16,59,78,.10)}
  .x30:hover{transform:translateY(-3px);border-color:#185c68}
  .x31:hover{transform:translateY(-3px);border-color:#185c68}
  .x32:hover{transform:translateY(-3px);border-color:#185c68}
  .x33:hover{transform:translateY(-3px);border-color:#185c68}
  .x34:hover{transform:translateY(-3px);border-color:#185c68}
  .x35:hover{transform:translateY(-3px);border-color:#185c68}
  .x36:hover{transform:translateY(-3px);border-color:#185c68}
  .x37:hover{transform:translateY(-3px);border-color:#185c68}
  .x38:hover{transform:translateY(-3px);border-color:#185c68}
  .x39:hover{background:#c3d9e4;border-color:#c3d9e4}
  .x40:hover{background:rgba(251,250,248,.10);border-color:#fbfaf8}
  .x41:hover{background:rgba(251,250,248,.10);border-color:#fbfaf8}
  .x42:hover{background:#114650;transform:translateY(-3px)}
}

/* --- Header su schermi stretti ---------------------------------------
   Sotto i 1040px compaiono #nav-cv e #nav-toggle accanto al logo.
   A 375px servivano 377px (159 logo + 99 CV + 71 Menu + 48 di gap)
   contro i 335 disponibili: il Menu usciva dal viewport e trascinava
   tutta la pagina in scroll orizzontale.
   Nascondiamo il nome accanto al simbolo del logo, che resta cliccabile
   e da solo libera i 131px necessari. NON toccare il gap del contenitore:
   #nav-cv ha margin-right:-16px, calibrato sul gap di 24px per lasciare
   8px dal Menu. Riducendo il gap i due pulsanti si sovrappongono. */
@media (max-width: 430px) {
  #header-inner > a[href="#top"] span { display: none; }
}

/* --- Blocchi a due colonne su schermi molto stretti -------------------
   Diversi blocchi usano "flex:1 1 460px;min-width:280px". Sotto i 340px
   il min-width, sommato all'indentazione della timeline, supera il
   viewport: a 320px il blocco parte da 72px e arriva a 352px. Lasciamo
   che si restringano liberamente: il flex-basis continua a governare
   il comportamento su tutte le altre larghezze. */
@media (max-width: 400px) {
  [style*="min-width:280px"] { min-width: 0 !important; }
}

/* --- Altezza del menu mobile -----------------------------------------
   #mobile-nav ha inline max-height:calc(100vh - 66px). Su iOS Safari
   100vh e' l'altezza del viewport CON LE BARRE NASCOSTE, quindi maggiore
   dell'area realmente visibile: il menu puo' estendersi sotto la barra
   del browser e le ultime voci restano irraggiungibili anche arrivando
   in fondo allo scroll interno.
   dvh (dynamic viewport height) segue l'area effettivamente visibile.
   Il blocco @supports lascia il fallback in vh ai browser che non lo
   conoscono; !important serve perche' il valore originale e' inline. */
@supports (height: 100dvh) {
  #mobile-nav { max-height: calc(100dvh - 66px) !important; }
}

/* --- Skip link -------------------------------------------------------
   Senza, chi naviga da tastiera deve attraversare header e menu a ogni
   caricamento prima di raggiungere il contenuto (WCAG 2.4.1).
   Resta fuori schermo finche' non riceve il focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #185c68;
  color: #fbfaf8;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-size: 15px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }
/* il target del salto non ha un contorno proprio: lo togliamo */
#top:focus { outline: none; }

/* --- Frecce di navigazione ai capi della sequenza --------------------
   I pulsanti usano l'attributo nativo disabled: esce dal percorso di
   Tab e viene annunciato dagli screen reader, cosa che una semplice
   classe non farebbe. Qui serve solo lo stato visivo, perche' gli
   stili dei pulsanti sono inline (cursor:pointer incluso). */
button[data-proj-move][disabled],
button[data-cli-move][disabled] {
  opacity: .3;
  cursor: default;
}


/* Cursore della digitazione dell'h1.
   NON lampeggia di proposito: il caret che pulsa e' il segnale piu'
   forte di "effetto terminale" ed e' cio' che rende l'animazione di
   cattivo gusto. Qui e' un trattino sottile che accompagna la
   scrittura e sparisce appena finisce. */
.digita::after {
  content: "";
  display: inline-block;
  width: .04em;
  height: .78em;
  margin-left: .06em;
  vertical-align: -.06em;
  background: #185c68;
  opacity: .55;
}

/* --- Striscia dei chip: centrata quando c'e' spazio ------------------
   Con tre voci invece di cinque i chip non riempiono piu' la larghezza
   e restavano allineati a sinistra: a 768px avanzavano 363px.
   "safe" e' necessario: sotto i 340px i chip sforano, e un center
   secco renderebbe il primo irraggiungibile dentro un contenitore che
   scorre. Con safe, in overflow si torna ad allineare a sinistra.
   I browser che non conoscono safe ignorano la riga e restano com'erano. */
@media (max-width: 1040px) {
  #section-chips { justify-content: safe center; }
}

/* --- Icona del menu mobile -------------------------------------------
   Due tracciati nello stesso pulsante, scambiati da aria-expanded: cosi'
   lo stato lo detta l'attributo che gli screen reader gia' leggono,
   invece di una classe parallela. */
#nav-toggle [data-icona="aperto"] { display: none; }
#nav-toggle[aria-expanded="true"] [data-icona="chiuso"] { display: none; }
#nav-toggle[aria-expanded="true"] [data-icona="aperto"] { display: block; }

/* La freccina di "Tutte le sezioni" ruota quando il pannello e' aperto:
   senza, non c'era nessun segnale visivo che fosse aperto ne' come
   richiuderlo. Lo stato lo detta aria-expanded, gia' presente. */
#index-toggle span { display: inline-block; transition: transform .2s ease; }
#index-toggle[aria-expanded="true"] span { transform: rotate(180deg); }

/* --- Strato dietro il menu mobile ------------------------------------
   Il menu vive dentro l'header sticky e sotto continua a scorrere la
   pagina: senza separazione i due si confondono. Lo strato sta a
   z-index 45, cioe' sopra il contenuto e sotto l'header (50), cosi'
   copre la pagina ma non il menu. */
#menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(15, 66, 73, .26);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .22s ease;
}
#menu-scrim.visibile { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #menu-scrim { transition: none; }
}

/* --- Trascinamento del carosello clienti -----------------------------
   Su iOS un trascinamento che parte su testo selezionabile puo' avviare
   una selezione invece dello scorrimento: il paragrafo occupa il 36%
   della card, quindi capitava spesso. Qui la card e' una superficie da
   trascinare, non da selezionare.
   -webkit-touch-callout evita anche il menu contestuale da pressione
   prolungata, che interrompeva il gesto a meta'. */
@media (max-width: 1040px) {
  #clienti-grid,
  #clienti-grid * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* --- Carosello delle referenze ---------------------------------------
   Le schede lasciano sbirciare la successiva: un bordo di card visibile
   dice che c'e' altro da scorrere meglio di qualsiasi freccia. */
#referenze-carosello { --ref-w: 62%; }
@media (max-width: 900px) { #referenze-carosello { --ref-w: 86%; } }
#referenze-carosello::-webkit-scrollbar { display: none; }
/* il trascinamento vince sulla selezione del testo, come nel carosello
   dei clienti: qui scorrere e' l'interazione principale */
#referenze-carosello, #referenze-carosello * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Il testo si taglia con un'altezza massima, non con -webkit-line-clamp:
   quest'ultimo, su un blocco che contiene piu' <p>, si comporta male e in
   espansione sovrapponeva le righe. La sfumatura in basso fa leggere il
   taglio come voluto, invece che come una riga mozzata a meta'.
   Il testo resta intero nel DOM: gli screen reader lo leggono per esteso. */
#referenze-carosello [data-ref-testo] {
  position: relative;
  max-height: 16em;
  overflow: hidden;
}
#referenze-carosello [data-ref-testo]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3.4em;
  background: linear-gradient(to bottom, rgba(251,250,248,0), #fbfaf8 80%);
  pointer-events: none;
}
#referenze-carosello article.aperta [data-ref-testo] { max-height: none; }
#referenze-carosello article.aperta [data-ref-testo]::after { display: none; }
#referenze-nav { display: flex; }

/* Frecce del carosello referenze: risposta al passaggio del mouse, cosi'
   su desktop si capisce che sono cliccabili. Dentro (hover: hover) come
   tutte le altre, per non innescare il doppio tocco su iOS. */
@media (hover: hover) {
  [data-ref-move]:not([disabled]):hover {
    background: #185c68;
    border-color: #185c68;
    color: #fbfaf8;
  }
}
[data-ref-move] { transition: background .18s ease, border-color .18s ease, color .18s ease; }
[data-ref-move][disabled] { opacity: .3; cursor: default; }
/* durante il trascinamento col mouse il cursore lo dichiara */
#referenze-carosello { cursor: grab; }
#referenze-carosello.trascino { cursor: grabbing; scroll-snap-type: none; }

/* Sui telefoni le due righe finali del piede vanno a capo su alcune schede
   e non su altre, e il piede parte ad altezze diverse. Lo spazio viene
   riservato invece di accorciare le parole di chi ha scritto la referenza.

   Relazione: la piu' lunga chiede 255px e la scheda ne lascia 244 a 375px;
   a 390px il margine e' di soli 2px, troppo esiguo per fidarsi, quindi la
   riserva copre fino a 430.
   Ruolo: il piu' lungo chiede una scheda da 282px, cioe' una finestra da
   368px. A 390px restano 19px di margine, percio' li' non serve. */
@media (max-width: 430px) {
  #referenze-carosello footer p:last-child { min-height: 2.4em; }
}
@media (max-width: 385px) {
  #referenze-carosello footer p:nth-child(2) { min-height: 2.4em; }
}