/* Il foglio di stampa delle pagine pubbliche.
 *
 * Il pulsante «Stampa» sta nella pastiglia «condividi» (engine/snippets/sharer.html), cioè su
 * ogni memoria, ogni percorso e ogni post del blog; le regole di stampa esistevano invece per
 * le sole memorie, dentro monument/css/style.css. Percorsi e blog uscivano dalla stampante
 * come li vede il browser: menu, piè di pagina, mappa tagliata, e stampando dal tema scuro
 * testo chiaro su carta bianca.
 *
 * Qui c'è quel che vale per tutte: il formato del foglio, la tavolozza da carta, l'arredo che
 * non si stampa (menu, briciole, indice, pulsanti, menu a tendina, modali) e le forme
 * condivise — le righe etichetta/valore, le gallerie, le fisarmoniche. Quel che riguarda una
 * sola pagina sta nel foglio della sua app: monument/css/print.css, pathway/css/print.css.
 *
 * Il file è agganciato con `media="print"` (blocco `print_css` di base.html, quindi NON nel
 * backoffice, che base_simple.html condivide): niente `@media print` qui dentro, e il browser
 * non lo mette in coda al primo disegno della pagina. Sta PRIMA del blocco `css` dei template,
 * così i fogli delle app possono correggerlo.
 */

/* @page al livello più alto: dentro un @media non lo leggono tutti. */
@page {
    size: A4 portrait;
    margin: 1.5cm 2cm;
}

/* ── La tavolozza torna ai valori da carta ──
   Chi legge col tema scuro (o daltonico) stamperebbe testo chiaro su bianco: i token vanno
   riportati alla variante chiara, e con la stessa specificità con cui i temi li hanno cambiati,
   altrimenti non li scavalcano.

   I valori sono quelli di engine/css/style_defs.css detti una seconda volta, e per questo
   derivano: era già successo col ruggine, rimasto al valore di prima dello scurimento del 3
   agosto 2026. Li tiene allineati la guardia PrintPaletteTest in engine/tests/test_css_guards.py. */
:root,
:root[data-theme="dark"],
:root[data-theme="daltonic"] {
    color-scheme: light;
    --memo-body-bg: #ffffff;
    --memo-body-text: rgb(36, 58, 98);
    --memo-body-muted-text: #555;
    --memo-link-color: rgb(143, 71, 22);
    --memo-color-dark-blue: rgb(36, 58, 98);
    --memo-color-blue: rgb(79, 97, 129);
    --memo-color-light-blue: rgb(211, 215, 223);
    --memo-color-salmon: rgb(253, 201, 160);
    --memo-color-light-salmon: rgb(254, 241, 231);
    --memo-color-rust: rgb(143, 71, 22);
    --memo-color-light-rust: rgb(182, 116, 71);
    --memo-accent-on-ground: rgb(143, 71, 22);
}

/* ── Niente animazioni: sulla carta sarebbe un fotogramma a caso ── */
*,
*::before,
*::after {
    transition: none !important;
    animation: none !important;
}

/* ── Corpo del testo ── */
html,
body {
    font-size: 10pt !important;
    color: #000 !important;
    background-color: #fff !important;
}

h1 {
    font-size: 16pt !important;
    margin-top: 0.5rem !important;
}

h2 {
    font-size: 13pt !important;
}

h3 {
    font-size: 11pt !important;
}

a {
    color: #000 !important;
    text-decoration: none !important;
}

/* Un titolo non resta da solo in fondo alla pagina. */
h2,
h3,
h2.menu-section-title {
    break-after: avoid;
    page-break-after: avoid;
}

/* ── L'arredo che non si stampa ──
   Navigazione, piè di pagina, briciole, indice della pagina, la barra delle sezioni che sul
   telefono sta in basso, il pulsante «vedi tutte», la pastiglia «condividi», il modulo
   «proponi una modifica» con la sua riga di pulsanti, l'invito a partecipare, le modali e i
   link di scaricamento: sono gesti, e su carta non si fanno.

   Il pulsante «vedi tutte» non nasconde niente sulla carta — quel che taglia è tagliato da
   una media query che qui non vale — quindi sul foglio sarebbe un pulsante inerte davanti a
   un elenco già intero.

   `body > header` e non `header`: il menu del sito è figlio del body, ma un <header> annidato è
   il titolo di quel che si sta leggendo. Un post del blog ce l'ha, e con il selettore nudo il
   foglio usciva senza titolo — il pezzo cominciava dalla fotografia. */
body>header,
body>footer,
.detail-breadcrumb,
.detail-page-index,
.page-jump,
.mobile-cap-more,
.btn-group.float-end,
form#draft_generation_form,
form#draft_generation_form+p,
.detail-contribute,
.modal,
a[download],
#picture_tab {
    display: none !important;
}

/* I menu a tendina: il pulsante che li apre e la tendina stessa, che va spenta a mano perché
   una tendina lasciata aperta al momento della stampa finirebbe sul foglio. E i pulsanti che
   aprono una modale, che sulla carta è nascosta: il codice QR del percorso era rimasto sul
   foglio come una pastiglia che non fa niente. */
.dropdown-toggle,
.dropdown-menu,
[data-bs-toggle="modal"] {
    display: none !important;
}

/* Le mappe interattive e il loro corredo: la tela, la nota su come navigarla, il fumetto, il
   menu dei livelli e la linguetta del permalink. La tela non si stampa MAI, e non è una scelta
   di stile: con WebGL — che è il motore di tutti — il browser stampa un riquadro bianco, perché
   il buffer di disegno non esiste più quando la stampa lo va a cercare (verificato: comandi e
   scala escono, la mappa no). Al suo posto va sul foglio la sua fotografia, qui sotto. */
#map-canvas,
#map-navigation-help,
#popup,
#layer_selection_menu,
.map_share_link_row {
    display: none !important;
}

/* ── La mappa sul foglio ──
   La fotografia che il pulsante «stampa» scatta alla mappa prima di aprire la finestra di
   stampa (map_base.js, `paintPrintShot`): la stessa immagine del pulsante «salva la mappa»,
   con la striscia dei crediti in fondo — e su carta quella striscia conta il doppio, perché
   un foglio che gira per conto suo l'attribuzione se la deve portare scritta addosso.

   La regola guarda `[src]`: l'immagine sta in pagina sempre (map_canvas.html) ma nasce vuota,
   e il src ce lo scrive solo una cattura riuscita. Chi stampa con Ctrl+P senza passare dal
   pulsante — o su una pagina dove la cattura non riesce — non si porta a casa un rettangolo
   vuoto: si porta a casa il foglio di prima, senza mappa. L'attributo `hidden` la tiene fuori
   dallo schermo, e qui lo scavalca il display !important. */
#map-print-shot[src] {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 11cm !important;
    margin: 0.2cm auto 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
}

/* ── «vedi su»: le quattro mappe esterne ──
   Sono quattro link a OpenStreetMap, Google, Apple e Bing: un gesto, e su carta un gesto non
   si fa — restavano quattro icone mute in fondo alla mappa. Via la riga intera, che è la
   sola cosa che contiene: l'etichetta «vedi su» da sola sarebbe peggio delle icone.
   (Il foglio dei percorsi ne aveva una versione sua, scritta sulla tendina `maps-dropdown`
   che nel frattempo è sparita: la regola non spegneva più niente.) */
.maps-links,
div:has(>.maps-links) {
    display: none !important;
}

/* La coda di navigazione «Nelle vicinanze», uguale su memorie e percorsi: dieci link e le
   mappe di zona, cioè il contrario di quel che si porta con sé stampato. Il selettore è fatto
   di classi di spaziatura Bootstrap perché quella fascia non ne ha una sua: chi la ritocca
   cambiando `mt-4` la fa ricomparire sul foglio. */
.py-2.mt-4.bg-light-blue {
    display: none !important;
}

/* ── Quel che sullo schermo è chiuso, sulla carta è aperto ──
   Le fisarmoniche (nota di contesto, tappe del percorso) e i pannelli a linguetta: nessuno può
   cliccarli su un foglio, e il loro contenuto è la parte che serve. */
.accordion-collapse {
    display: block !important;
}

.accordion-button::after {
    display: none !important;
}

.tab-pane {
    display: block !important;
}

/* ── Righe etichetta/valore ──
   La forma dei «Dettagli» in tutto il sito: `.row.border-bottom` con una colonna grassetto e
   il valore accanto. Alla larghezza di un A4 (17 cm, sotto il breakpoint md) le due colonne si
   impilerebbero, ed è la forma peggiore per una tabella di dati. */
.row.border-bottom {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 0.2rem 0 !important;
    border-bottom: 0.5pt solid #bbb !important;
    border-top: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
}

.row.border-bottom>.col-12.col-md-4 {
    flex: 0 0 10rem !important;
    width: 10rem !important;
    max-width: 10rem !important;
    padding: 0 !important;
}

.row.border-bottom>.col {
    flex: 1 1 0 !important;
    padding: 0 !important;
}

.row.border-bottom p {
    margin-bottom: 0.15rem !important;
}

/* ── Fotografie ──
   La principale grande quanto il foglio la regge, le altre a due per riga, e nessuna spezzata
   fra due fogli. */
.gallery-thumbs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.4cm !important;
}

/* le figure riempiono la propria cella: annulla il 50% dello schermo */
.gallery-thumbs .figure {
    width: auto !important;
}

.figure {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 !important;
    /* la fotografia è più stretta della sua cella quando è verticale: sta in mezzo, non a
       sinistra con un vuoto accanto (il credito sotto è già centrato) */
    text-align: center;
}

/* ── La cornice è la fotografia ──
   Il bordo grigio che si vede intorno a ogni foto (`.image-border`) sta sul tag IMG, non su un
   riquadro della figura: quel che stiramo stiriamo la cornice. Con `width: 100%` e
   `object-fit: contain` l'immagine prendeva tutta la colonna e la fotografia ci galleggiava
   dentro rimpicciolita — una verticale in un A4 dava 17 cm di cornice per 5 di fotografia, e
   sulla principale una cornice alta 7 cm e larga quanto il foglio. Qui l'immagine tiene le sue
   proporzioni e si dà due tetti: la larghezza della colonna e un'altezza da carta. Con
   larghezza e altezza `auto` le due misure massime le applica il browser sul rapporto vero
   dell'immagine, e la cornice torna a essere quel che dice di essere. */
.figure img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 7cm !important;
}

/* La principale è la fotografia della memoria, e sul foglio se lo può prendere qualche
   centimetro in più delle altre: resta comunque dentro la larghezza del testo. */
.gallery-hero .figure img {
    max-height: 9cm !important;
}

.figure-caption {
    font-size: 7pt !important;
}

/* Le strisce di pastiglie — le memorie che si incontrano lungo un percorso, i percorsi vicini —
   sono righe alte 250 px, e con le orfane/vedove di serie (due) una striscia di due righe non si
   può spezzare: finiva tutta sul foglio dopo, lasciandone uno mezzo vuoto. Una riga sola di qua e
   il resto di là va benissimo, perché la pastiglia è comunque intera: è un blocco in linea, e il
   taglio cade fra una riga e l'altra, mai dentro una scheda. */
p:has(>.memo-link) {
    orphans: 1;
    widows: 1;
}

/* ── Fondi decorativi via: sono inchiostro, non informazione ── */
.bg-light-blue,
.bg-light-salmon {
    background-color: transparent !important;
}

/* ── La firma in coda al foglio ──
   Su `main`, quindi su qualunque pagina pubblica stampata: da dove viene questo foglio è la
   sola cosa che la carta non porta con sé. */
main#main-content::after {
    content: "Fonte: memo.anpi.it";
    display: block;
    text-align: center;
    font-size: 8pt;
    color: #555;
    margin-top: 0.8cm;
    padding-top: 0.3cm;
    border-top: 0.5pt solid #bbb;
}