/* 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: una tela che vive delle tessere caricate per lo
   schermo, la nota su come navigarla, il fumetto, il menu dei livelli e la linguetta del
   permalink. */
#map-canvas,
#map-navigation-help,
#popup,
#layer_selection_menu,
.map_share_link_row {
    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 prima a tutta larghezza, 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;
}

.gallery-hero-portrait .figure {
    width: auto !important;
}

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

.gallery-thumb-img {
    height: auto !important;
    width: 100% !important;
}

.figure {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 !important;
}

.figure img {
    max-height: 7cm !important;
    width: 100% !important;
    object-fit: contain !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;
}