/* ==========================================================
   Studio Dott. Olindo Cervi, foglio di stile del sito
   OC Consulting, oc-consulting.it
   ==========================================================

   PERCHE' QUESTO FILE ESISTE, E SEPARATO DAL SITO.

   Il sito nasce in Claude Design ed esce da li' come un unico
   file che si riscrive da capo a ogni esportazione. Qualunque
   correzione scritta dentro quel file va perduta al giro dopo,
   e va ricucita da adatta_sito.py riga per riga. Le regole di
   impaginazione sono troppe per quella strada.

   Qui stanno in un file loro. Di adatta_sito.py serve un solo
   innesto, la riga che collega questo foglio alla pagina, e
   quella riga non cambia mai. Le regole si possono correggere
   aprendo questo file, senza toccare alcun programma.

   COSA CORREGGE. Sui telefoni il sito era inservibile: dodici
   elementi uscivano dallo schermo, il titolo di apertura veniva
   tagliato a meta' e le righe si accavallavano, il menu in alto
   spariva oltre il bordo destro, le schede dei servizi restavano
   su due o tre colonne larghe centosettanta pixel. Il motivo e'
   che nel sito esportato c'era una sola regola @media, e
   riguardava le animazioni.

   COME E' SCRITTO, E PERCHE' COSI'.

   1. Tutto sta dentro un @media. Sopra i 1024 pixel questo file
      non dice nulla, quindi la resa su schermo grande resta
      identica a prima, garantita.

   2. Quasi ogni regola porta !important. Non e' pigrizia. Claude
      Design scrive l'impaginazione dentro l'attributo style di
      ogni elemento, e uno stile scritto li' batte qualunque
      foglio esterno. Senza !important queste regole verrebbero
      semplicemente ignorate.

   3. Alcuni selettori guardano dentro l'attributo style, per
      esempio [style*="grid-template-columns"]. Serve perche' le
      griglie non hanno una classe propria: l'unico appiglio
      stabile e' il testo dello stile scritto sull'elemento.

   Punti di rottura: 760 pixel fra telefono e tavoletta, 1024 fra
   tavoletta e schermo grande.
   ========================================================== */


/* ==========================================================
   IL MENU, sotto i 1024 pixel
   Le dieci voci in fila occupano circa novecento pixel. Sopra i
   1024 ci stanno, sotto no: le ultime finivano oltre il bordo
   destro, e con loro il pulsante che porta al modulo di contatto.
   Qui vanno a capo invece di uscire.
   ========================================================== */

@media (max-width: 1024px) {

  .nav {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    column-gap: 15px !important;
  }

  .nav a:not(.btn) {
    font-size: 13.5px !important;
    padding: 5px 0 !important;
  }

  .nav .btn {
    font-size: 13.5px !important;
    padding: 9px 18px !important;
  }
}


/* ==========================================================
   TAVOLETTE, da 761 a 1024 pixel
   Le griglie a tre e a quattro colonne diventano due: a queste
   larghezze tre colonne fanno colonne da poco piu' di duecento
   pixel, dove le parole si spezzano una per riga.
   ========================================================== */

@media (min-width: 761px) and (max-width: 1024px) {

  [style*="repeat(3, 1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  section {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  h1 { font-size: clamp(38px, 5.6vw, 52px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(28px, 3.9vw, 36px) !important; }
}


/* ==========================================================
   TELEFONI, fino a 760 pixel
   ========================================================== */

@media (max-width: 760px) {

  /* --- Rete di sicurezza contro lo scorrimento laterale ---
     Una pagina che si sposta di lato al primo tocco da' subito
     l'impressione di un sito rotto. I cerchi decorativi dello
     sfondo sono posizionati con valori negativi e sporgono.

     ATTENZIONE, trappola gia' pagata una volta. Qui la scrittura
     abituale, overflow-x: hidden, blocca del tutto lo scorrimento
     verticale di questo sito: la pagina resta inchiodata in cima e
     non si muove nemmeno con la rotellina. Il motivo e' che hidden
     trasforma l'elemento in un contenitore che scorre per conto
     suo, e messo insieme allo scorrimento morbido che il sito
     imposta su se stesso la pagina non si sposta piu'.

     clip taglia quello che sporge senza creare quel contenitore,
     e lo scorrimento resta intatto. Verificato: con hidden la
     pagina si ferma a zero, con clip arriva dove deve. I browser
     piu' vecchi di Safari 16 ignorano clip, e va bene lo stesso:
     e' una rete di sicurezza, e oggi non sporge nulla. */
  html, body {
    overflow-x: clip !important;
  }

  img, svg, video {
    max-width: 100% !important;
    height: auto;
  }

  /* --- Intestazione ---
     Su schermo grande resta appiccicata in alto, ed e' giusto.
     Sul telefono le dieci voci occupano tre righe: appiccicata,
     si mangerebbe un sesto dello schermo per tutta la lettura.
     Qui scorre via con la pagina.

     Il nome dello Studio prende una riga sua. Senza, restava
     spinto a sinistra da una spaziatura automatica, con un vuoto
     largo in mezzo e le prime due voci del menu appese al bordo
     destro: leggibile ma sciatto, e l'intestazione e' la prima
     cosa che si vede. */
  header[data-header] {
    position: static !important;
  }

  .nav {
    row-gap: 9px !important;
    column-gap: 14px !important;
    padding: 14px 20px 16px !important;
  }

  .nav-brand {
    flex: 1 0 100% !important;
    margin-right: 0 !important;
    margin-bottom: 2px !important;
    font-size: 20px !important;
  }

  .nav a:not(.btn) {
    font-size: 13px !important;
  }

  /* Quarantaquattro pixel e' la misura sotto la quale un dito
     sbaglia bersaglio. Vale per i pulsanti, non per le voci di
     testo del menu, che starebbero larghissime. */
  .btn {
    min-height: 44px !important;
  }

  /* --- Titoli a dimensione fluida ---
     Il titolo di apertura era fissato a 58 pixel: su 390 pixel di
     schermo la parola "l'intelligenza" da sola ne misurava 366 e
     usciva dal bordo, mentre l'interlinea stretta faceva
     accavallare le righe. Con clamp la dimensione segue la
     larghezza vera dello schermo, fra un minimo leggibile e il
     valore di prima. */
  h1 {
    font-size: clamp(30px, 8.4vw, 44px) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.015em !important;
  }

  h2 {
    font-size: clamp(25px, 6.6vw, 34px) !important;
    line-height: 1.18 !important;
  }

  h3 {
    font-size: clamp(19px, 5vw, 24px) !important;
    line-height: 1.22 !important;
  }

  h4 {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  h1, h2, h3, h4 {
    overflow-wrap: break-word;
  }

  /* Ogni parola del titolo e' avvolta in uno span per
     l'animazione di entrata. Uno span cosi' non si spezza da
     solo: se una parola resta comunque piu' larga dello schermo,
     questa regola le permette di andare a capo. */
  .om-word {
    max-width: 100% !important;
    overflow-wrap: break-word;
  }

  /* --- Margini laterali ---
     Trentadue pixel per lato su uno schermo da 390 lasciano 326
     pixel al testo. Venti ne lasciano 350, e la differenza si
     vede su ogni riga. Si tocca solo il lato: gli spazi sopra e
     sotto restano quelli decisi nel disegno del sito. */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Griglie ---
     Tutte a una colonna. Comprese quelle a due colonne dei campi
     dei moduli, dove due caselle affiancate su un telefono
     diventano due caselle troppo strette per scriverci dentro. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* --- Larghezze minime ---
     Il riquadro dell'area clienti chiede almeno 320 pixel per se'.
     Su uno schermo da 360, tolti i margini, ne restano 320 in
     tutto: il riquadro sporgeva di ventiquattro pixel oltre il
     bordo. Una larghezza minima ha senso finche' lo schermo e'
     piu' largo del minimo, e sul telefono non lo e' quasi mai.
     Nel sito ce n'e' una sola, questa. */
  [style*="min-width"] {
    min-width: 0 !important;
  }

  /* --- Cerchi decorativi dello sfondo ---
     Restano, perche' danno carattere alla pagina, ma rimpiccioliti
     e piu' tenui: a piena dimensione, su schermo stretto,
     coprirebbero il testo invece di accompagnarlo. */
  [data-float] {
    transform: scale(0.5) !important;
    opacity: 0.35 !important;
  }
}


/* ==========================================================
   SCHERMI MOLTO STRETTI, fino a 400 pixel
   ========================================================== */

@media (max-width: 400px) {

  /* I due pulsanti dell'apertura, affiancati, si riducono a
     etichette strette. Uno sotto l'altro, a tutta larghezza, si
     leggono e si toccano. */
  .btn-primary,
  .btn-secondary {
    width: 100% !important;
  }

  .nav .btn {
    width: auto !important;
  }
}