/* ===========================================================================
   TeamFinder — correzioni di impaginazione

   Caricato dopo style.css e responsive.css. Contiene solo cio che corregge
   il template dopo la ristrutturazione della home: i token restano in
   style.css :root, che resta l'unica fonte di verita per i colori.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   L'immagine della hero veniva tagliata

   La sezione ha height e max-height fissi a 1000px, ma il suo contenuto ne
   occupa 1240: l'immagine del telefono sbordava di 140px oltre il fondo
   della sezione. Con overflow visible non era ritagliata, era coperta.

   A coprirla era il primo blocco funzionalita, che ha sfondo bianco pieno,
   position sticky e z-index 99, mentre l'immagine sta in un contenitore a
   z-index 1. Il bordo netto che si vedeva era il margine superiore di quel
   blocco. Non si notava finche i blocchi stavano piu in basso nella pagina:
   e comparso spostandone uno subito sotto la hero.

   Alzare lo z-index dell'immagine non va: i blocchi funzionalita sono fatti
   per impilarsi uno sull'altro, e l'immagine finirebbe sopra quello che
   arriva. Si toglie invece l'altezza fissa, e la sezione cresce quanto il
   suo contenuto.
   --------------------------------------------------------------------------- */

.banner_section {
  height: auto;
  max-height: none;
}

/* ---------------------------------------------------------------------------
   Il vuoto sopra "L'app per chi ama giocare"

   Erano 860px: 620 di padding sulla sezione piu 240 di margine sul
   contenitore. Servivano a scavalcare l'immagine della hero, che nel
   template sbordava dentro questa sezione. Dopo la ristrutturazione fra le
   due c'e il blocco funzionalita, quindi non c'e piu niente da scavalcare e
   restava solo lo spazio vuoto.
   --------------------------------------------------------------------------- */

/* Dentro la sezione c'e .trusted_section che porta i suoi 100px di .row_am:
   quelli bastano come respiro, e i 620 di qui sopra si azzerano.
   I 240px di margine sul contenitore erano scritti inline nel markup e sono
   stati tolti da li, perche nessuna regola di foglio di stile puo battere
   uno stile inline senza !important. */
.best_features {
  padding-top: 0;
}

/* Il titolo dentro la lettera si centra in glyph-portal.css, che e caricato
   dopo questo foglio: una regola messa qui verrebbe annullata da la. */

/* ---------------------------------------------------------------------------
   Carattere ospitato in locale

   Prima arrivava da fonts.googleapis.com e fonts.gstatic.com. Chiamare
   Google Fonts da una pagina vuol dire mandare a Google l'indirizzo IP di
   chi la apre, per un file da 27 KB che possiamo servire noi.

   Un solo file: e la versione variabile, che copre da sola tutti i pesi da
   200 a 800 usati nel sito.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   overflow: clip al posto di hidden

   `.page_wrapper` del template ha `overflow-x: hidden`, e il body lo ha
   sotto i 992px. Un antenato con overflow diverso da `visible` diventa il
   contenitore di scorrimento, e `position: sticky` si aggancia a quello
   invece che alla pagina: e la stessa cosa che rompeva il blocco fissato del
   portale, e rompeva anche il telefono di "come funziona", il cui `top`
   arrivava a -1900 invece di restare a 0.

   `clip` ritaglia allo stesso modo senza creare un contenitore di
   scorrimento, quindi la barra orizzontale resta nascosta e sticky funziona.
   --------------------------------------------------------------------------- */

.page_wrapper {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Selettore della lingua nel footer

   Il sito e tradotto in tre lingue, ma il selettore stava solo nella
   topbar: nascondendo quella, le traduzioni erano diventate irraggiungibili
   per chi arriva. Qui sotto la riga dei crediti, dove si cerca.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Footer centrato, uguale su desktop e su telefono

   Sotto i 767px il template centrava tutto; sopra, no. Cosi il logo era
   centrato ma i contatti e i bottoni degli store stavano a sinistra, e la
   fascia in fondo era divisa in due colonne con il copyright a sinistra e i
   crediti a destra. Due impaginazioni diverse per la stessa cosa.

   Effetto collaterale utile: i crediti non finiscono piu sotto il pulsante
   torna-in-cima, che sta fisso nell'angolo destro e tagliava il cognome.
   --------------------------------------------------------------------------- */

/* Contatti e bottoni: la colonna prende tutta la larghezza e centra. */
footer .footer_data_section {
  justify-content: center;
}

footer .footer_data_section > div {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
}

/* La lista dei bottoni e flex, quindi il text-align non la sposta. */
footer .abt_side .app_btn {
  justify-content: center;
}
.bottom_footer .row {
  justify-content: center;
  row-gap: 6px;
}

.bottom_footer .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  text-align: center;
}

/* Il selettore ha bisogno di `footer` davanti: la regola del template e
   `footer .bottom_footer .developer_text { text-align: right }`, che con
   l'elemento in piu vince sulla specificita e non basta arrivare dopo. */
footer .bottom_footer .developer_text {
  text-align: center;
}

.lang_switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  padding-top: 18px;
  /* Il fondo di questa fascia e chiaro, non scuro: i colori vanno presi dal
     testo, non dal bianco. */
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--body-text);
}

.lang_switch > span {
  opacity: 0.35;
}

.lang_switch .lang-btn {
  min-height: 40px;
  padding: 4px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  /* Le voci non scelte restano leggibili: a opacita troppo bassa non si
     capisce che sono cliccabili. */
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s, background-color 0.2s;
}

.lang_switch .lang-btn:hover {
  opacity: 1;
}

/* i18n.js mette .active sulla lingua corrente. */
.lang_switch .lang-btn.active {
  opacity: 1;
  background: var(--lighter1);
  color: var(--primary);
}

.lang_switch .lang-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Icone SVG al posto di icofont

   Dimensionate in em, cosi seguono la misura del testo accanto come faceva
   il font. Il colore arriva da currentColor, quindi eredita quello del
   pulsante che le contiene.
   --------------------------------------------------------------------------- */

.site_icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  color: currentColor;
}

/* ---------------------------------------------------------------------------
   Sezione "I dettagli che contano"

   Sostituisce due sezioni che ripetevano quello che i tre passaggi nella
   sezione viola gia dicono: il catalogo vi compariva quattro volte, il
   flusso rapido tre. Qui restano solo le cose che li non sono dette, e sono
   le stesse che si vedono nello screenshot accanto.

   Due colonne che diventano una sotto i 992px. Niente card: righe con
   un'icona, che a tre voci si leggono piu in fretta di tre riquadri.
   --------------------------------------------------------------------------- */

.detail_section {
  padding: 100px 0;
  background: var(--white);
  overflow: clip;
}

.detail_inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.detail_media {
  display: flex;
  justify-content: center;
}

.detail_media img {
  width: 100%;
  max-width: 480px;
  height: auto;
}

.detail_text h2 {
  margin: 12px 0 34px;
  font-size: clamp(1.9rem, 1.2rem + 1.7vw, 2.6rem);
  line-height: 1.15;
  color: var(--black);
}

.detail_list {
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 26px;
}

.detail_list li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

/* Il cerchio riprende quello dei riquadri che c'erano prima, cosi la
   sezione non sembra arrivare da un altro sito. */
.detail_icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lighter1);
  color: var(--primary);
}

.detail_icon svg {
  width: 24px;
  height: 24px;
}

.detail_list h3 {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
}

.detail_list p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body-text);
}

/* `.puprple_btn` del template, nonostante il nome, ha lo sfondo nero: il
   viola arriva solo al passaggio del mouse, da uno pseudo-elemento che si
   allarga. Con la topbar nascosta questo e rimasto l'unico invito della
   pagina, e nero era l'unico elemento nero del sito. */
.detail_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  background-color: var(--primary);
}

.detail_cta::before {
  background: #5e2fd4;
}

.detail_cta:hover {
  box-shadow: 0 10px 26px rgba(114, 63, 235, 0.3);
}

@media screen and (max-width: 991px) {
  .detail_inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  /* Prima il testo, poi l'immagine: su schermo stretto la foto in cima
     spingerebbe il contenuto sotto la piega. */
  .detail_media {
    order: 2;
  }
  .detail_media img {
    max-width: 340px;
  }
  .detail_text {
    order: 1;
  }
}

@media screen and (max-width: 767px) {
  .detail_section {
    padding: 60px 0;
  }
  /* Il template centra il testo sotto i 767px, e cosi resta: l'icona va
     sopra invece che di fianco, altrimenti la riga risulta spinta a destra
     dalla sua larghezza. */
  .detail_list li {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
}