/* Correzioni al tema mob-nature-10 (public/tema/style.css, che resta com'era). Tutto il resto
   dell'aspetto viene dal tema: qui solo ciò che cambia per le decisioni di Mauro (docs/00).

   Decisione 12, variante A: la barra laterale non c'è più, la cornice resta di 957 px e la colonna
   del contenuto (660 px) va al centro. */
#content { float: none; margin: 0 auto; width: 800px; }

/* Decisione 11, versione responsive (variante R di docs/04): sotto i 960 px la cornice segue lo
   schermo; colori, font, immagini e dimensioni del testo restano quelli del tema. */
@media (max-width: 960px) {
  #outline, #wrapper, #header, #navbar, #footer { width: 100%; box-sizing: border-box; }
  #header { background-size: auto 100%; background-position: left top; }
  #content { width: 100%; max-width: 800px; }
  .pages, .page-title { width: 100%; }
  .postentry img, .post img, .postentry iframe { max-width: 100%; height: auto; box-sizing: border-box; }
  .postentry iframe { aspect-ratio: 16 / 9; }
  .form { width: auto; }
}
@media (max-width: 600px) {
  #header { height: 150px; }
  #header h1 { padding: 8px 0 0 16px; font-size: 1.8em; }
  .description { padding-left: 16px; }
  ul.menu { padding: 0 4px; }
  ul.menu li a { padding: 3px 10px 0 12px; }
  /* Quattro voci (con i Principia): sul telefono il menu va a capo, la barra si allunga. Con
     JavaScript si apre invece dall'hamburger, in colonna (più sotto, «.js»). */
  #navbar { height: auto; background-size: 100% 100%; }
  ul.menu li a { height: 26px; }
  .post { padding: 16px 16px; }
  .page-previous { padding-left: 16px !important; }
  .page-next { padding-right: 16px !important; }
}

/* Il vecchio blog era in XHTML 1.0 Transitional, che mette il browser in modalità «quasi standard»:
   una riga con solo un'immagine è alta quanto l'immagine, senza lo spazio sotto per le lettere come
   «g» o «p». In HTML5 quello spazio c'è (circa 5 px): si toglie allineando l'immagine in basso. */
.post img { vertical-align: bottom; }

/* Commenti (Fase 4): il markup del tema (.commentlist, .form), con il modulo senza email e un vero
   pulsante (l'immagine del vecchio pulsante non c'era più). */
#commenti { padding: 0 40px 20px; }
.nascosto { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .textarea { background: #fff; border: solid 1px #ccc; padding: 4px; margin-bottom: 10px; box-sizing: border-box; font: inherit; }
.form input.submitcomment { border: solid 1px #ccc; cursor: pointer; font: inherit; height: auto; }
.form .cf-turnstile { margin-bottom: 10px; }
.nota-commenti { color: #666; }
#esito-commento { margin-top: 10px; font-weight: bold; }
#esito-commento.errore { color: #a00; }
.commenti-chiusi { color: #666; }
@media (max-width: 600px) { #commenti { padding: 0 16px 16px; } }
/* Nome e data in due righe strette, come nella modalità «quasi standard» del vecchio XHTML. */
.commentlist .listuser, .commentlist .listdate { display: block; }
.commentlist .listuser { line-height: 16px; }
.commentlist .listdate { line-height: 12px; }

/* Hamburger (Fase 5): solo sui telefoni e solo con JavaScript; colori e lettere del menu del tema. */
.apri-menu { display: none; }
@media (max-width: 600px) {
  .js #navbar { background: #c9dfa6 url(images/menu.jpg) repeat-x 0 0; }
  .js .apri-menu { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 16px; border: 0; background: none;
    color: #48791e; font: inherit; font-weight: bold; text-transform: uppercase; cursor: pointer; }
  .js .apri-menu .righe, .js .apri-menu .righe::before, .js .apri-menu .righe::after {
    display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform .15s; }
  .js .apri-menu .righe::before, .js .apri-menu .righe::after { content: ""; position: absolute; left: 0; }
  .js .apri-menu .righe::before { top: -6px; }
  .js .apri-menu .righe::after { top: 6px; }
  .js #navbar.aperto .righe { background: transparent; }
  .js #navbar.aperto .righe::before { transform: translateY(6px) rotate(45deg); }
  .js #navbar.aperto .righe::after { transform: translateY(-6px) rotate(-45deg); }
  .js ul.menu { display: none; float: none; padding: 0 0 6px; }
  .js #navbar.aperto ul.menu { display: block; }
  .js ul.menu li, .js ul.menu li a { float: none; }
  .js ul.menu li a { height: auto; padding: 6px 16px 6px 46px; }
  .apri-menu:focus-visible, ul.menu li a:focus-visible { outline: 2px solid #48791e; outline-offset: -2px; }
}

/* Leggibilità (Mauro, 2026-11-06: «mangiare un po' di margine nella parte bianca e ingrandire i font…
   porterei il testo a 16 anche su desktop»): colonna da 660 a 800 px (sopra), testo di articoli,
   pagine e commenti da 13 a 16 px con interlinea 1,6. Intestazione, menu, date e titoli come nel tema. */
.post { padding: 20px 40px; }
.postentry, .commentlist .listcontent { font-size: 16px; }
.postentry p, .postentry li, .commentlist .listcontent p { line-height: 1.6; }
@media (max-width: 600px) { .post { padding: 16px; } #commenti { padding: 0 16px 16px; } }
/* Nessuna immagine più larga della colonna, anche su desktop. */
.postentry img, .postentry iframe { max-width: 100%; height: auto; box-sizing: border-box; }