/* ======================================================================
   MOBILE TWEAKS — misure ridotte su smartphone

   DOVE:    /css/mobile-tweaks.css
   COME:    un <link> in head.php, DOPO metal-theme.css:
              <link rel="stylesheet" href="/css/mobile-tweaks.css">
   COSA FA: riduce SOLO le dimensioni (testo, spazi, altezze dei pulsanti) e
            SOLO sotto i 560px. Colori, layout e desktop non cambiano.
   COME SI TOGLIE: cancella il <link> (o questo file) e torna tutto com'era.

   COME SI REGOLA
   - Per scalare TUTTO insieme cambia i token della sezione 1: il tema li usa
     quasi dappertutto (testi, spazi, schede, pulsanti, pagine degli strumenti).
   - Per un singolo elemento, ritocca la sua riga nelle sezioni successive.
   - Le regole su .articolo hanno "body" davanti perché articolo-theme.css viene
     caricato DOPO questo file: senza, le sue misure vincerebbero.
   ====================================================================== */
@media (max-width: 560px){

  /* ---------- 1. TOKEN: circa -10% su testi e spazi ----------
     prima: xs 12 · sm 13 · base 15 · md 16 · lg 19 · xl 24 · 2xl 32 · 3xl 44
     prima: sp-3 14 · sp-4 20 · sp-5 32 · sp-6 48 · sp-7 72  (sp-1 e sp-2 restano) */
  :root{
    --fs-xs:   11.5px;
    --fs-sm:   12.5px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   17px;
    --fs-xl:   21px;
    --fs-2xl:  28px;
    --fs-3xl:  38px;

    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 34px;
    --sp-7: 52px;
  }

  /* ---------- 2. TITOLI ---------- */
  h1{ font-size: clamp(23px, 6.2vw, var(--fs-3xl)); }   /* prima: minimo 28px */
  h2{ letter-spacing: 1.2px; }                           /* prima: 2px */
  .kicker{ letter-spacing: 2px; }                        /* prima: 3px */

  /* ---------- 3. ARTICOLI ---------- */
  body .articolo{
    font-size: 14.5px;                                   /* prima: 15px */
    line-height: 1.7;                                    /* prima: 1.75 */
    padding: var(--sp-5) 16px var(--sp-4);               /* prima: 32px 18px 20px */
  }
  body .articolo h1{
    font-size: clamp(22px, 6vw, 30px);                   /* prima: minimo 26px */
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
  }
  body .articolo h2{ margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
  body .articolo p{ margin-bottom: 1.15em; }             /* prima: 1.3em */
  body .articolo blockquote{
    padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 4px);
  }
  body .articolo pre{ padding: var(--sp-3); }

  /* ---------- 4. NAVBAR ---------- */
  .navbar{ padding-top: 8px; padding-bottom: 8px; }      /* prima: 14px */
  .navbar-toggler{ padding: .2rem .55rem; font-size: 1rem; }
  .navbar-toggler-icon{ width: 1.3em; height: 1.3em; }
  #toggle-tema{ padding: 5px 10px; font-size: 14px; line-height: 1.2; }  /* prima: 10px 20px */
  .navbar .navbar-nav .nav-link{ padding: 6px var(--sp-3) !important; } /* voci del menu aperto */

  /* ---------- 5. PULSANTI E CAMPI ---------- */
  button,
  input[type="submit"],
  input[type="button"],
  .btn{ padding: 8px var(--sp-3); }                      /* prima: 10px 20px */

  /* 16px nei campi di testo: sotto questa soglia iPhone/Safari ingrandisce da solo
     la pagina quando tocchi un campo (con i 15px di prima succedeva già) */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
  textarea, select{
    font-size: 16px;
    padding: 8px var(--sp-3);
  }

  /* ---------- 6. FOOTER ---------- */
  .footer-moderno .row{ --bs-gutter-y: 1rem; }           /* prima: 1.5rem (gy-4) */
  .footer-moderno .h5{ font-size: 1.05rem; }             /* prima: 1.25rem */
  .footer-moderno .social-icon{                          /* prima: 44px */
    width: 36px; height: 36px; margin-left: 6px; font-size: 1rem;
  }
  .footer-moderno .btn-sostieni{ padding: 7px 16px !important; font-size: 12px; } /* batte px-4/py-2 di Bootstrap */
  .metal-toggle{ width: 30px; height: 30px; margin-left: 6px; }

  /* ---------- 7. HOME E BLOG ---------- */
  .logohome{ height: clamp(64px, 16vh, 110px); }         /* prima: fino a 160px */
  .widgets{ min-height: 64px; }                          /* prima: 80px */

  .post-featured{ padding: var(--sp-4) 18px; }           /* prima: 32px 28px */
  .post-featured .post-title{ font-size: 1.1rem; }
  .post-featured .avatar,
  .post-featured .avatar-img{ width: 44px; height: 44px; }
  .avatar,
  .avatar-img{ width: 36px; height: 36px; }

  /* ---------- 8. ELENCO ARTICOLI (le variabili --mp-* sono scritte sul contenitore) ---------- */
  .mp-articles{
    --mp-2xl: clamp(1.6rem, 1.2rem + 2.5vw, 2.4rem);     /* titolo grande: prima fino a 3.5rem */
    --mp-lg:  clamp(1.05rem, 1rem + .5vw, 1.25rem);      /* titolo delle schede */
    --mp-s6:  1.1rem;                                    /* padding schede: prima 1.5rem */
    --mp-s8:  1.5rem;
    --mp-s12: 2rem;
    --mp-s16: 2.5rem;
    --mp-s20: 3rem;
  }
}