/*
  mobile.css
  Stili responsive per "Io sono Pablo".
  - Indicatore a pallini (sempre visibile)
  - Frecce laterali nascoste: si naviga con la tab bar e con lo swipe
  - Adattamenti dell'header e del testo su schermi piccoli
  Nota: la tab bar è sempre visibile, non c'è più alcun hamburger.
*/

/* ============================ FRECCE: NASCOSTE ============================ */
/* La navigazione avviene tramite la tab bar in alto e lo swipe. */
.nav-arrow {
  display: none !important;
}

/* ============================ INDICATORE A PALLINI ============================ */
/* Sempre visibile, in basso al centro. */
.page-dots {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--color-link);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.dot.active {
  background: var(--color-yellow); /* pallino attivo giallo */
  border-color: var(--color-link);
  transform: scale(1.15);
}

/* ============================ MOBILE ============================ */
@media (max-width: 640px) {

  /* Tab di navigazione: leggermente più compatte */
  .site-nav a {
    padding: 12px 2px;
    font-size: 13px;
    letter-spacing: 0.03em;
  }

  /* Foto un po' più piccola su mobile */
  .header-avatar {
    width: 75px;
    height: 75px;
  }

  /* Selettore lingua e accessibilità più compatti */
  .lang-select {
    font-size: 0.82rem;
    padding: 5px 10px;
  }

  .font-btn {
    font-size: 0.78rem;
    padding: 0.2rem 0.45rem;
  }

  /* Sezioni: titoli e testo scalati */
  .section__title-band {
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }

  .section__title {
    font-size: clamp(2em, 9vw, 3em);
    max-width: 100%;
  }

  .section__content {
    padding: var(--space-md);
    /* spazio extra in fondo per non finire sotto i pallini */
    padding-bottom: calc(var(--space-md) + 48px);
  }

  .section__content p {
    font-size: 1.05rem;
  }

  /* Full-bleed del menu ancoraggio coerente col padding mobile del content */
  .luoghi-anchors {
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  /* Schede Università: una sola colonna su mobile */
  .universita-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================ MOBILE PICCOLO ============================ */
@media (max-width: 380px) {
  .site-nav a {
    font-size: 12px;
  }

  .header-bottom {
    gap: 6px;
  }
}

/* ── Tab bar scrollabile orizzontalmente sotto i 1024px ── */
@media (max-width: 1023px) {
  .site-nav {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .site-nav .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}