/* ==========================================================================
   Adattamento a tablet e cellulari.

   Le pagine sono generate con tutti gli stili scritti negli attributi
   style="..." dei singoli elementi. Dentro un attributo inline non si possono
   scrivere media query, quindi l'unico modo per cambiare il layout sotto una
   certa larghezza e' intercettare qui quegli stili e sovrascriverli con
   !important, che ha la precedenza sugli stili inline.

   Da cui i selettori [style*="..."]: agganciano gli elementi in base al valore
   che hanno scritto inline. Se un domani il sito viene rigenerato dal builder
   con misure diverse, sono queste stringhe da riallineare.

   Sopra gli 860px non cambia assolutamente nulla: il desktop resta com'e'.
   ========================================================================== */

@media (max-width: 860px) {

  /* --- Impianto generale ------------------------------------------------ */

  /* Ogni griglia diventa una colonna sola: affiancare due o quattro colonne
     su uno schermo stretto e' la causa principale dello sfondamento. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Di default un elemento dentro una griglia non si restringe sotto la
     larghezza del suo contenuto: basta una parola lunga o un'immagine per
     spingere la pagina oltre il bordo. min-width:0 glielo consente. */
  [style*="display:grid"] > *,
  [style*="display:flex"] > * {
    min-width: 0;
  }

  /* Margini laterali: 40px su uno schermo da 375 si mangiano un quinto
     della larghezza utile. */
  [style*="px 40px"],
  [style*="0 40px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Le distanze pensate per il desktop diventano buchi enormi in colonna. */
  [style*="gap:70px"],
  [style*="gap:64px"],
  [style*="gap:60px"],
  [style*="gap:56px"],
  [style*="gap:44px"] {
    gap: 36px !important;
  }

  /* Nessuna immagine puo' superare la larghezza dello schermo. */
  img {
    max-width: 100%;
  }

  /* --- Barra di navigazione --------------------------------------------- */

  /* Logo e menu non ci stanno affiancati: li mando a capo e li centro. */
  header > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  header nav {
    gap: 22px !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* La barra e' sticky: resta visibile mentre si scorre, quindi ogni pixel che
     occupa e' spazio tolto al contenuto per tutta la navigazione. */
  header img {
    height: 38px !important;
  }

  /* Voci di menu piu' alte: un bersaglio da 15px e' difficile da centrare
     col dito, la soglia comoda sta intorno ai 44px. */
  header nav a {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* --- Titoli ------------------------------------------------------------ */

  /* I corpi da 40-60px sono tarati sul desktop e in mobile spezzano le parole. */
  h1 {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }

  h2 {
    font-size: 27px !important;
    line-height: 1.2 !important;
  }

  h3 {
    font-size: 17px !important;
  }

  /* Numeri e occhielli decorativi in Cormorant, che non sono heading. */
  [style*="font:500 38px"],
  [style*="font:500 32px"],
  [style*="font:500 30px"] {
    font-size: 26px !important;
  }

  [style*="font:500 24px"] {
    font-size: 19px !important;
  }

  /* --- Immagini a colonna ------------------------------------------------ */

  /* In desktop stanno di fianco al testo con un'altezza fissa; in colonna
     singola quell'altezza diventa sproporzionata. */
  [style*="height:460px"],
  [style*="height:400px"] {
    height: 280px !important;
  }

  /* --- Copertina della home ---------------------------------------------- */

  [style*="height:min(88vh,760px)"] {
    min-height: 520px !important;
    height: auto !important;
    padding: 90px 0 !important;
  }

  /* La sfumatura corre da sinistra a destra: pensata per il testo incolonnato
     a sinistra. In mobile il testo occupa tutta la larghezza, quindi la
     ribalto dall'alto verso il basso per tenerlo leggibile. */
  [style*="linear-gradient(90deg,rgba(10,17,13,0.92)"] {
    background: linear-gradient(180deg, rgba(10, 17, 13, 0.55) 0%, rgba(10, 17, 13, 0.88) 100%) !important;
  }

  /* Le frecce del carosello finiscono sopra al testo: le tolgo e lascio i
     pallini, che restano toccabili. */
  [data-harrow] {
    display: none !important;
  }

  /* --- Modulo di contatto ------------------------------------------------- */

  form {
    padding: 28px 22px !important;
  }

  /* Campi a tutta larghezza e testo da 16px: sotto i 16px iOS ingrandisce
     automaticamente la pagina quando si tocca un campo, e resta storta. */
  form input,
  form select,
  form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  /* La casella del consenso deve restare quadrata e ben toccabile. */
  form input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    flex: none !important;
  }

  /* --- Pagina informativa ------------------------------------------------- */

  /* La tabella delle finalita' scorre gia' nel suo contenitore: le tolgo la
     larghezza minima cosi' si adatta senza scorrimento. */
  table {
    min-width: 0 !important;
    font-size: 12.5px !important;
  }

  table th,
  table td {
    padding: 10px 8px !important;
  }

  /* --- Pie' di pagina ----------------------------------------------------- */

  footer > div {
    flex-direction: column !important;
    gap: 30px !important;
  }
}

/* Sui telefoni la barra andrebbe su due righe, arrivando a 120px di altezza:
   il 15% dello schermo occupato in permanenza. Togliendo la scritta di fianco
   al marchio, logo e menu tornano su una riga sola e l'ingombro si dimezza.
   Il marchio resta, quindi il sito e' comunque riconoscibile. */
@media (max-width: 640px) {

  header > div {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* La scritta "CASENTINO CONSULTING" accanto al logo, non i link del menu. */
  header > div > a > span {
    display: none !important;
  }

  header nav {
    gap: 15px !important;
    flex-wrap: nowrap !important;
    font-size: 11.5px !important;
  }

  header nav a[style*="background:#9fd8c0"] {
    padding: 9px 14px !important;
  }
}

/* Schermi molto stretti (iPhone SE e simili): ultima rifinitura. */
@media (max-width: 400px) {

  h1 {
    font-size: 29px !important;
  }

  h2 {
    font-size: 24px !important;
  }

  [style*="px 40px"],
  [style*="0 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* I due pulsanti affiancati non ci stanno: uno sopra l'altro, a tutta
     larghezza, cosi' restano facili da centrare. */
  [style*="padding:17px 38px"],
  [style*="padding:16px 32px"] {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
  }
}