/* 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 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.

   `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,
.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;
}