/* ============================================================================
   sk-custom.css — personalizzazioni Stella Kamikaze sopra il tema journal.
   Vive fuori da screen.css (che un rebuild gulp del tema rigenererebbe da zero,
   portandosi via tutto) ed è caricato da default.hbs DOPO {{ghost_head}}:
   arriva quindi dopo /public/cards.min.css: dove basta l'ordine niente !important,
   dove serve si pareggia la specificita dei selettori Ghost (vedi box iscrizione).
   Estratto da screen.css il 2026-08-16; storia delle singole regole nei commenti.
   ============================================================================ */
/* --- sk newsletter CTA (2026-07-15, vedi post.hbs/page.hbs; backup .bak-newsletter-20260715) --- */
.sk-post-cta{margin:6rem 0 2rem;padding:5.6rem 0}
.sk-newsletter-hint{color:var(--color-secondary-text);font-size:1.5rem;font-style:italic;margin:2rem 0 0}
.sk-newsletter-hint a{cursor:pointer;text-decoration:underline}
@media (max-width:767px){.sk-post-cta{margin:4rem 0 1rem;padding:4rem 0}}
.sk-cta-text{margin-top:0}
/* --- AIL badge (2026-08-05, vedi partials/ail-badge.hbs; backup .bak-ail-20260805) --- */
.sk-ail{display:inline-flex;align-items:center;gap:.5rem;margin-left:1rem;vertical-align:middle;text-decoration:none;white-space:nowrap}
.sk-ail-mark{background:#3a3a3a;color:#fff;font-size:1.2rem;font-weight:700;letter-spacing:.05em;padding:.2rem .5rem;border-radius:3px;line-height:1.2}
.sk-ail-num{font-weight:700;font-size:1.3rem;color:inherit}
.sk-ail-rail{display:inline-flex;gap:.25rem}
.sk-ail-rail i{width:.9rem;height:.9rem;border-radius:2px;background:#e3e0d8;display:block}
.sk-ail-1 .sk-ail-rail i:nth-child(-n+1){background:#9caf88}
.sk-ail-2 .sk-ail-rail i:nth-child(-n+2){background:#a8a96c}
.sk-ail-3 .sk-ail-rail i:nth-child(-n+3){background:#c29a5e}
.sk-ail-4 .sk-ail-rail i:nth-child(-n+4){background:#c07f56}
.sk-ail-5 .sk-ail-rail i:nth-child(-n+5){background:#b4634f}

/* --- Box iscrizione nel footer: da finto-input a form vero (2026-08-13) --- */
.sk-footer-form{flex-wrap:wrap;height:auto;min-height:56px;padding-top:0;padding-bottom:0}
.sk-footer-form .gh-subscribe-input-text{flex:0 0 auto}
.sk-footer-email{flex:1 1 auto;min-width:0;margin:0 1.2rem 0 .8rem;padding:0;border:0;background:transparent;font:inherit;color:var(--color-darker-gray);outline:none;height:54px}
.sk-footer-email::placeholder{color:var(--color-secondary-text);opacity:1}
button.gh-subscribe-input-btn{flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.sk-footer-msg{display:none;flex-basis:100%;font-size:1.3rem;line-height:1.4;padding:0 0 1.2rem;text-align:left;color:var(--color-secondary-text)}
.sk-footer-form.success .sk-msg-ok{display:block}
.sk-footer-form.error .sk-msg-err{display:block;color:var(--sk-color-error)}
.sk-footer-form.loading .gh-subscribe-input-btn{opacity:.5}

/* Leggi anche + commenti nativi — onsite 2026-08-15 */
.sk-related{margin:5rem auto 0;padding-top:2.4rem;border-top:1px solid var(--color-lighter-gray)}
.sk-related-title{font-size:1.3rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-secondary-text);margin:0 0 1.6rem}
.sk-related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.sk-related-item{display:flex;flex-direction:column;gap:.6rem;text-decoration:none;color:inherit;box-shadow:none}
.sk-related-item-title{font-size:1.8rem;font-weight:600;line-height:1.3}
.sk-related-item-date{font-size:1.3rem;color:var(--color-secondary-text)}
.sk-related-item:hover .sk-related-item-title{text-decoration:underline;text-underline-offset:.3rem}
@media (max-width:767px){.sk-related{margin-top:3.6rem}.sk-related-list{grid-template-columns:1fr;gap:1.8rem}}

/* Box iscrizione a fine post/pagina: la signup card di Ghost nasce come landing
   a tutta pagina e dentro un articolo diventa un buco bianco alto una schermata
   (padding min(6.4vmax,120px), titolo clamp(1.7em,5vw,3.3em)). Qui la compattiamo.
   Vale solo dentro .sk-subscribe (partial subscribe-inline), NON per le card nel
   testo né per la landing /iscriviti/, dove il formato grande e voluto.
   [!] I selettori ricalcano quelli di /public/cards.min.css
   (.kg-signup-card.kg-width-wide h2.kg-signup-card-heading, 0-3-1): con la sola
   .sk-subscribe .kg-signup-card-heading (0-2-0) il titolo torna a 52,8px anche
   caricando questo foglio per ultimo — la specificita batte l ordine.
   Pareggiandola qui, gli !important non servono piu. 2026-08-16 */
.sk-subscribe .kg-signup-card.kg-width-wide h2.kg-signup-card-heading{font-size:2.8rem;line-height:1.25}
.sk-subscribe .kg-signup-card.kg-width-wide .kg-signup-card-subheading{font-size:1.7rem;line-height:1.5;margin-top:.8rem}
.sk-subscribe .kg-width-wide .kg-signup-card-text{padding-top:3.2rem;padding-bottom:3.2rem}
.sk-subscribe .kg-signup-card-form{margin-top:2rem}
@media (max-width:767px){
  .sk-subscribe .kg-signup-card.kg-width-wide h2.kg-signup-card-heading{font-size:2.4rem}
  .sk-subscribe .kg-signup-card.kg-width-wide .kg-signup-card-subheading{font-size:1.6rem}
  .sk-subscribe .kg-width-wide .kg-signup-card-text{padding-top:2.8rem;padding-bottom:2.8rem}
}

/* Respiro sotto il box iscrizione: in home il box finiva incollato alla riga
   ALTRI ARTICOLI / ABOUT (0px di stacco, contro i 120px che ha sopra).
   Il margine collassa con quello di .sk-related nel post, quindi non si somma. 2026-08-15 */
.sk-subscribe{margin-bottom:8rem}
@media (max-width:767px){.sk-subscribe{margin-bottom:4.8rem}}
/* Allineamento del box di iscrizione (17/10/2026). Nei post e nelle pagine la signup card sta nella colonna del
   testo (main), come i paragrafi: prima era larga (wide) e partiva 240px più a sinistra del testo. In home i bordi
   del box coincidono con quelli del contenuto (gh-inner), che lì è allineato a sinistra. */
.post-template .sk-subscribe.gh-canvas>.kg-signup-card.kg-width-wide,.page-template .sk-subscribe.gh-canvas>.kg-signup-card.kg-width-wide,
.post-template .gh-content .kg-signup-card.kg-width-wide{grid-column:main-start/main-end}
.home-template .sk-subscribe.gh-canvas>.kg-signup-card.kg-width-wide{grid-column:full-start/full-end}
.post-template .sk-subscribe.gh-canvas>.kg-signup-card.kg-width-wide,.page-template .sk-subscribe.gh-canvas>.kg-signup-card.kg-width-wide{margin-top:4.8rem}
.post-template .sk-subscribe .kg-width-wide .kg-signup-card-text,.page-template .sk-subscribe .kg-width-wide .kg-signup-card-text{padding-left:3.2rem;padding-right:3.2rem}
@media (max-width:767px){.post-template .sk-subscribe .kg-width-wide .kg-signup-card-text,.page-template .sk-subscribe .kg-width-wide .kg-signup-card-text{padding-left:2rem;padding-right:2rem}}
/* Articolo precedente e successivo nella colonna del testo, allineati a titolo, paragrafi e box (17/10/2026). */
.post-template .gh-navigation{grid-column:main-start/main-end}

/* --- Rassegna del 28/10/2026 (backup tema: /mnt/user/backups/stellakamikaze/theme-journal-20261028-pre.tgz) --- */
/* Accento: resta il magenta di Federico #ff1a75 (decisione del 28/10/2026, contrasto 3,7:1 accettato) */
::selection{background:var(--ghost-accent-color);color:#fff}
/* Header su telefono: il titolo lungo con nowrap allargava la pagina a 585px su 390 */
@media (max-width:767px){
  #gh-head .gh-head-brand{grid-template-columns:minmax(0,1fr) auto auto;column-gap:12px}
  #gh-head .gh-head-brand-wrapper{min-width:0}
  #gh-head .gh-head-logo{white-space:normal;font-size:1.7rem;line-height:1.2;text-wrap:balance}
}
/* Focus da tastiera visibile (il tema azzerava l'outline dei bottoni icona) */
a:focus-visible,button:focus-visible,input:focus-visible,.gh-icon-btn:focus-visible,.gh-burger:focus-visible{outline:2px solid var(--ghost-accent-color);outline-offset:3px;border-radius:2px}
/* Link per saltare al contenuto, visibile solo col tab */
.sk-skip{position:absolute;left:1.6rem;top:-100px;z-index:1000;background:var(--color-darker-gray);color:#fff;padding:1rem 1.6rem;border-radius:4px;font-size:1.5rem;font-weight:600;text-decoration:none}
.sk-skip:focus{top:1.6rem}
/* Copertine: spazio riservato prima del caricamento (CLS), poi la proporzione vera */
.gh-article-image img,.gh-card-image img{height:auto;aspect-ratio:auto 3/2}
/* Footer: link alla versione in altra lingua e indirizzo fediverso */
.sk-foot-extra{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.6rem;justify-content:center;font-size:1.3rem;color:var(--color-secondary-text)}
.sk-foot-extra a{text-decoration:underline;text-underline-offset:2px}
/* Pagina 404 */
.sk-404{text-align:center;padding:4rem 0 2rem}
.sk-404-code{font-size:1.4rem;font-weight:600;letter-spacing:.08em;color:var(--color-secondary-text)}
.sk-404 h1{margin:.8rem 0 1.2rem}
.sk-404 p{max-width:52ch;margin:0 auto 2.4rem}
.sk-404-actions{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}

/* --- Revisione del 31/10/2026 (impeccable + hallmark, tre P1) --- */
/* Scorrimento laterale (WCAG 1.4.10). Il tema mette tutto il footer in nowrap: a 320 px la riga
   "Nel fediverso: @index@stellakamikaze.org" allargava la pagina a 372 px, a 768 px la colonna
   di destra arrivava a 843. Il footer va a capo fra le parole; link e voci di menu restano interi. */
.gh-foot{white-space:normal}
.gh-foot-inner>*{min-width:0}
.gh-foot-menu .nav li,.gh-powered-by a,.sk-foot-extra a{white-space:nowrap}
.sk-foot-extra span{overflow-wrap:anywhere}
/* Da 768 a 991 px tre colonne non bastano (il menu prende 384 px e l'indirizzo fediverso si spezza a
   metà parola): una colonna centrata, come sul telefono, col menu in riga. */
@media (min-width:768px) and (max-width:991px){
  .gh-foot-inner{grid-template-columns:1fr;gap:2.4rem;text-align:center}
  .gh-powered-by{text-align:center}
}
/* Header da 768 a 991 px: il layout stacked del tema parte da 992 e le regole del telefono si
   fermano a 767. In mezzo il titolo lungo in nowrap (549 px) spingeva le azioni a 868 su 768.
   Qui il titolo va a capo come sul telefono. */
@media (min-width:768px) and (max-width:991px){
  #gh-head .gh-head-brand{min-width:0}
  #gh-head .gh-head-logo{white-space:normal;font-size:2rem;line-height:1.2;text-wrap:balance;text-align:center}
}
/* Campo email della signup card: cards.min.css toglie il focus
   (.kg-signup-card-input:focus-visible{outline:none}, specificità 0-2-0) e batte input:focus-visible
   qui sopra (0-1-1). Questa regola è 0-3-0. Anello dentro il campo bianco: #ff1a75 su #fff fa 3,7:1. */
.kg-signup-card .kg-signup-card-input:focus-visible{outline:2px solid var(--ghost-accent-color);outline-offset:-2px}

/* --- Revisione del 31/10/2026, seconda passata (P1 menu, P2, P3) --- */
/* Menu da 768 a 991 px: il burger del tema si ferma a 767 e il layout stacked parte da 992. In mezzo il
   menu finiva in una colonna larga 0-90 px: nessuna voce a 768 e 820, tutte dietro i tre puntini a 900.
   Qui vale il layout di 992: menu su una riga sua fra due filetti. Le colonne laterali larghe quanto
   Accedi + Iscriviti (169 px) obbligano il titolo ad andare a capo invece di finire sotto i pulsanti. */
@media (min-width:768px) and (max-width:991px){
  .is-head-stacked .gh-head-inner{padding:0;grid-template-columns:minmax(17rem,1fr) auto minmax(17rem,1fr)}
  .is-head-stacked .gh-head-brand{align-items:center;display:flex;height:80px}
  .is-head-stacked .gh-head-menu{grid-column:1/4;grid-row-start:2;height:56px;justify-content:center;margin:0}
  .is-head-stacked .gh-head-menu:after,.is-head-stacked .gh-head-menu:before{background-color:var(--color-light-gray);content:"";height:1px;left:0;position:absolute;top:80px;width:100%}
  .is-head-stacked .gh-head-menu:after{top:136px}
  .is-head-stacked .gh-head-actions{grid-column:1/4;grid-row-start:1;justify-content:space-between}
}
/* Riga di lettura: Lora 18 px su 720 px faceva 84 caratteri di media (max 91). Solo il testo corrente
   si ferma a 600 px, allineato a sinistra con il titolo; il corpo e il font restano quelli del tema.
   La colonna resta 720: titolo, signup card e immagini non si stringono (con la colonna a 600 il campo
   email di /iscriviti/ usciva dalla prima schermata e il titolo della card andava su 4 righe). */
.gh-content>:is(p,ul,ol,blockquote:not(.kg-blockquote-alt)){max-width:60rem}
/* Campo email delle signup card: il filetto #e6e6e6 fra campo bianco e card #f0f0f0 faceva 1,10:1.
   #767676 fa 3,99:1 sul grigio e 4,54:1 sul bianco. Lo stato di errore tiene il suo bordo rosso. */
.kg-signup-card-form:not(.error) .kg-signup-card-fields{border-color:var(--color-secondary-text)}
/* Target (WCAG 2.5.8): il bottone del footer era 55x19 px, i link del footer 21 px, le voci
   dei temi in home 23 px. Il bottone sta in una riga alta 56 px e arriva a 44; gli altri a 24 px,
   con lo spazio che hanno già intorno. */
button.gh-subscribe-input-btn{min-height:44px;min-width:44px;padding:0 .8rem;margin:0 -.8rem}
.gh-foot a{display:inline-flex;align-items:center;min-height:2.4rem}
a.gh-topic-item{min-height:2.4rem}
/* Titoli e paragrafi: niente parola sola sull'ultima riga */
.gh-card-title{text-wrap:balance}
.gh-content>p{text-wrap:pretty}
/* Colore dell'errore come token (era #c00 scritto a mano) */
:root{--sk-color-error:#c00}
/* Burger: anima solo ciò che cambia, non "all" */
.gh-burger:after,.gh-burger:before{transition-property:top,bottom,transform}