/* Variabili generali */
:root {
    --bg-color: #0c0c0e;
    --surface-color: #1e1e24;
    --accent-color: #ba1f33;
    --highlight-color: #3a6ea5;
    --text-color: #eaeaea;
    --muted-color: #a0a0a5;
    --border-radius: 8px;
    --transition: 0.3s ease;
}

/* Reset e base */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
}

a {
    color: var(--highlight-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header e navigazione */
header {
    background-color: var(--surface-color);
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.logo {
    font-family: 'Georgia', serif;
    font-weight: bold;
    font-size: 1.6rem;
    color: var(--accent-color);
    margin: 0;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

nav a {
    color: var(--text-color);
    padding: 0.75rem 1rem;
    display: block;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

nav a:hover,
nav .active {
    background-color: var(--highlight-color);
    color: white;
}

/* Hero section */
.hero {
    position: relative;
    height: 70vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}

.hero .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 1rem;
}

.hero-title {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    font-family: 'Georgia', serif;
    font-weight: bold;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.btn,
.btn-secondary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    color: white;
    cursor: pointer;
    transition: var(--transition);
}

.btn {
    background-color: var(--accent-color);
}

.btn:hover {
    background-color: #912333;
}

.btn-secondary {
    background-color: var(--highlight-color);
    margin-top: 1rem;
}

/* Pulsante principale: usato nella home e nell'archivio */
.btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--accent-color);
    color: white;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: #912333;
}

/* Sezione introduttiva della home */
.home-intro {
    padding: 2rem 0;
}

.intro-section h2 {
    margin-top: 0;
    color: var(--accent-color);
    font-family: 'Georgia', serif;
}

.intro-section p {
    margin-bottom: 1rem;
    max-width: 800px;
}

/* Griglia con i punti salienti della home */
.highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.highlight-item {
    background-color: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.highlight-item h3 {
    margin-top: 0;
    color: var(--highlight-color);
    font-family: 'Georgia', serif;
}

.highlight-item p {
    font-size: 0.95rem;
    color: var(--text-color);
}

.cta-center {
    text-align: center;
    margin-top: 2rem;
}

/* Stili per l'archivio delle cronache */
.issue-selector-card {
    background-color: var(--surface-color);
    padding: 2rem;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    max-width: 600px;
    margin: 2rem auto;
    text-align: center;
}

.issue-selector-card h2 {
    margin-top: 0;
    font-family: 'Georgia', serif;
    color: var(--accent-color);
}

.issue-selector-card ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.issue-selector-card li {
    margin: 0.5rem 0;
}

.issue-selector-card a {
    color: var(--highlight-color);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.issue-selector-card a:hover {
    text-decoration: underline;
}

.btn-secondary:hover {
    background-color: #2f558d;
}

/* CTA grid */
.cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.cta-item {
    background-color: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.cta-item h3 {
    margin-top: 0;
    color: var(--highlight-color);
}

.cta-item p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* World section */
.world-section {
    margin-top: 2rem;
}

.world-section h3 {
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.region-list {
    list-style: disc inside;
    margin: 0.5rem 0 0 0;
    padding-left: 1rem;
    line-height: 1.5;
}

/* Villages */
.village {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 3rem;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.village-img {
    flex: 1 1 40%;
    min-width: 250px;
}

.village-img img {
    width: 100%;
    height: auto;
    display: block;
}

.village-content {
    flex: 1 1 60%;
    padding: 1.5rem;
}

.village-content h3 {
    margin-top: 0;
    color: var(--accent-color);
}

.village-content ul {
    list-style: disc inside;
    margin: 0.5rem 0 0 0;
    padding-left: 1rem;
}

.village-content ul li {
    margin-bottom: 0.5rem;
}

/* Fazioni */
.faction {
    margin-top: 2.5rem;
    background-color: var(--surface-color);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.faction h3 {
    margin-top: 0;
    color: var(--accent-color);
}

.faction ul {
    list-style: disc inside;
    margin: 0.5rem 0 0 0;
    padding-left: 1rem;
    line-height: 1.5;
}

.note {
    font-size: 0.9rem;
    color: var(--muted-color);
    margin-top: 0.5rem;
}

/* Personaggi */
#character-search {
    width: 100%;
    padding: 0.75rem;
    margin: 1.5rem 0;
    border-radius: var(--border-radius);
    border: 1px solid #444;
    background-color: var(--surface-color);
    color: var(--text-color);
    font-size: 1rem;
}

.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.character-card {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition);
}

.character-card:hover {
    transform: translateY(-4px);
}

.character-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    background-color: #333;
}

.character-image.placeholder {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200" fill="none"%3E%3Crect width="400" height="200" fill="%23242424"/%3E%3Cpath d="M200 60c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40z" fill="%235a5a5a"/%3E%3Cpath d="M200 0c110.457 0 200 89.543 200 200H0C0 89.543 89.543 0 200 0z" fill="%23333333"/%3E%3C/svg%3E');
    background-size: cover;
    background-position: center;
}

.character-card h4 {
    margin: 1rem;
    margin-bottom: 0.25rem;
    font-size: 1.2rem;
    color: var(--highlight-color);
}

.character-card .role {
    margin: 0 1rem 0.5rem 1rem;
    font-size: 0.95rem;
    color: var(--muted-color);
}

.character-card .toggle-btn {
    margin: 0 1rem 1rem 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--accent-color);
    border: none;
    border-radius: var(--border-radius);
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}

.character-card .toggle-btn:hover {
    background-color: #912333;
}

.character-card .details {
    display: none;
    padding: 0 1rem 1rem 1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-color);
}

/* Footer */
footer {
    background-color: var(--surface-color);
    margin-top: 3rem;
    padding: 1rem 0;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--muted-color);
    font-size: 0.8rem;
}

/* Stile per la pagina delle Cronache (giornale fantasy) */
/* Stile del giornale fantasy */
.newspaper {
    /* Parchment texture background */
    background-image: url('../images/parchment.png');
    background-size: cover;
    background-repeat: repeat-y;
    padding: 2rem;
    color: #2f1a00;
    /* Use imported fantasy fonts */
    font-family: 'MedievalSharp', Georgia, serif;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-top: 2rem;
    border: 1px solid #bba98c;
}

.newspaper .newspaper-header {
    text-align: center;
    border-bottom: 2px solid #bba98c;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
}

.newspaper .newspaper-header h1 {
    /* Visualizza il titolo accanto al loghetto: utilizza il flexbox per allineare l’icona e il testo */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Dragon Hunter', 'IM Fell English SC', 'MedievalSharp', serif;
    letter-spacing: 0.1rem;
    color: #5a3e1b;
    text-transform: uppercase;
    font-size: 3.2rem;
}

/* Info line below the masthead title */
.masthead-info {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    color: #4d3517;
    font-family: 'MedievalSharp', Georgia, serif;
    position: relative;
}

/* Add bullet separators between masthead info items */
.masthead-info span:not(:first-child)::before {
    /* Prepend a centered bullet with surrounding spaces */
    content: ' \2022 ';
    color: #4d3517;
}

.article {
    margin-bottom: 1.5rem;
}

/* legacy article titles for other pages */
.article h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px dashed #bba98c;
    padding-bottom: 0.3rem;
    color: #5a3e1b;
}

/* Titles inside the newspaper */
.news-section h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px dashed #bba98c;
    padding-bottom: 0.3rem;
    color: #5a3e1b;
    font-family: 'IM Fell English SC', 'MedievalSharp', serif;
}

.article p {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.obituaries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.obit-card {
    background-color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #bba98c;
    text-align: center;
    color: #2f1a00;
}

.obit-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 1px solid #bba98c;
    margin-bottom: 0.5rem;
}

.obit-card h3 {
    margin: 0.25rem 0;
    font-size: 1rem;
    color: #5a3e1b;
}

/* Justify text in newspaper articles for a more official look */
.section-content {
    text-align: justify;
    line-height: 1.5;
}

/* Layout for the Cronache newspaper sections */
.newspaper-content {
    display: grid;
    /* Three equal columns for a real-newspaper feel */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
}

/* Layout specifico per la prima pagina. Dopo l’articolo principale,
   vogliamo due colonne che riempiano lo spazio senza lasciare aree vuote. */
.newspaper-page[data-page="1"] .newspaper-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/*------------------*
 *  Font Inclusion  *
 *
 * Importiamo il carattere “Dragon Hunter” caricato dall’utente e lo
 * utilizziamo per titoli e intestazioni della Gazzetta. Il file del
 * font si trova nella cartella fonts della distribuzione.  *
 */
@font-face {
    font-family: 'Dragon Hunter';
    src: url('../fonts/DragonHunter-9Ynxj.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Applica il font Dragon Hunter alle testate principali */
.newspaper-title, .page-heading {
    font-family: 'Dragon Hunter', 'IM Fell English SC', 'MedievalSharp', serif;
    letter-spacing: 0.05rem;
    color: #5a3e1b;
}

/* Stile per le intestazioni delle pagine successive (Economia, Necrologio, ecc.) */
/* Bigger typography for page headings to make them stand out like real newspaper sections */
.page-heading {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid #bba98c;
    padding-bottom: 0.6rem;
}

/* Effetto carta migliorato: alleggerisci leggermente lo sfondo con un overlay
   più chiaro per evocare un tono da foglio stampato di qualità superiore. */
/* Background and paper effect: use a warmer tone and subtler texture to mimic a high-quality printed sheet */
.newspaper {
    background-color: #fbf5e8;
    background-image: url('../images/parchment.png');
    background-size: cover;
    background-repeat: repeat-y;
    position: relative;
}

/* Riduci la trasparenza della texture per migliorare la leggibilità. */
/* Lighter overlay for the parchment texture to enhance legibility while retaining the paper feel */
.newspaper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Una trasparenza leggermente maggiore per rendere la carta ancora più luminosa e leggibile */
    background: rgba(255, 255, 245, 0.4);
    pointer-events: none;
}

/* Collassa inizialmente il contenuto delle sezioni; gli utenti possono
   cliccare la sezione per espanderla.  */
.news-section .section-content {
    max-height: 8rem;
    overflow: hidden;
    transition: max-height 0.4s ease;
    position: relative;
}

/* Quando la sezione è espansa, mostra tutto il contenuto. */
.news-section.expanded .section-content {
    max-height: none;
}

/* Indica visivamente che c’è altro da leggere quando la sezione è collassata.
   Viene nascosto automaticamente quando la sezione è espansa. */
.news-section .section-content::after {
    content: '… Leggi di più';
    position: absolute;
    bottom: 0.1rem;
    right: 0.2rem;
    font-size: 0.85rem;
    color: #5a3e1b;
    font-style: italic;
    background: rgba(251, 245, 232, 0.8);
    padding: 0 0.3rem;
    /* Consenti al lettore di cliccare anche sull’etichetta “Leggi di più” per espandere la sezione.
       Non impedire l’interazione in modo che il tocco su dispositivi mobili funzioni correttamente. */
    pointer-events: auto;
}
.news-section.expanded .section-content::after {
    content: '';
    display: none;
}

/* Indica interattività con il cursore */
.news-section {
    cursor: pointer;
}

/* Effetto di ingrandimento per le immagini all’interno delle sezioni quando
   queste vengono espanse. */
.news-section .section-media img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}
/* Rimuoviamo lo zoom sull’immagine quando la sezione è espansa, per evitare
   che si sovrapponga al testo. L’ingrandimento ora è gestito soltanto
   tramite la modale cliccabile. */
.news-section.expanded .section-media img {
    transform: none;
}

/* Impaginazione per la prima pagina: l'articolo principale occupa
   l'intera larghezza e si distingue dagli altri. */
.news-section.top-story {
    grid-column: 1 / -1;
    border-bottom: 2px solid #bba98c;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Aumenta l'altezza dell'immagine della top story per metterla in risalto */
/* Aumenta l’altezza dell’immagine della top story per mettere in risalto la fotografia di copertina */
.news-section.top-story .section-media img {
    height: 320px;
    width: 100%;
    object-fit: cover;
}

/* Stile del piè di pagina con il numero della pagina */
.page-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: #4d3517;
    border-top: 1px solid #bba98c;
    padding-top: 0.5rem;
    font-family: 'MedievalSharp', Georgia, serif;
}

.page-footer .page-number {
    font-weight: bold;
}

/* Animazione di cambio pagina: effetto di rotazione simile allo sfogliare */
#pages-container {
    perspective: 1200px;
}

.newspaper-page {
    transform-style: preserve-3d;
}

.fade-in {
    animation: pageFlip 0.6s ease;
}

@keyframes pageFlip {
    from {
        transform: rotateY(-90deg);
        opacity: 0;
    }
    to {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

/* Layout a due colonne per le pagine con due sole sezioni (ad esempio la pagina 5) */
.newspaper-page.two-col .newspaper-content {
    grid-template-columns: 1fr 1fr;
}

/*
 * Layout specifico per la pagina 2 (Economia & Affari).
 * La bacheca degli avventurieri occupa due righe nella colonna sinistra,
 * mentre le sezioni Mercato e Bottega degli Annunci occupano la colonna destra.
 */
/* Layout specifico per la pagina 2 (Economia & Gilde).
 * La bacheca degli avventurieri occupa due righe nella colonna sinistra,
 * mentre Mercato e Bottega degli Annunci occupano la colonna destra;
 * la sezione Gilde occupa l’intera larghezza in fondo. */
/* Layout specifico per la pagina 2 (Bacheca & Annunci).
 * La bacheca degli avventurieri occupa due terzi della pagina a sinistra,
 * gli annunci occupano la colonna destra, mentre la sezione delle gilde
 * si estende su tutta la larghezza nella seconda riga. */
.newspaper-page[data-page="2"] .newspaper-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.5rem;
    grid-template-areas:
        "bacheca annunci"
        "gilde gilde";
}
.newspaper-page[data-page="2"] #bacheca-avventurieri-section { grid-area: bacheca; }
.newspaper-page[data-page="2"] #bottega-annunci-section { grid-area: annunci; }
.newspaper-page[data-page="2"] #gilde-section { grid-area: gilde; }

/* Layout specifico per la pagina 3 (Mercato & Botteghe).
 * Vengono utilizzate tre colonne, una per ciascuna sezione: Nuovi Arrivi,
 * Cerco & Offro e Annunci Immobiliari. */
.newspaper-page[data-page="3"] .newspaper-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Layout specifico per la pagina 4 (Misteri & Bestie).
 * I misteri occupano la colonna sinistra più ampia,
 * mentre il Bestiario occupa la colonna destra. */
.newspaper-page[data-page="4"] .newspaper-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    grid-template-areas: "misteri bestiario";
}
.newspaper-page[data-page="4"] #misteri-section { grid-area: misteri; }
.newspaper-page[data-page="4"] #bestiario-section { grid-area: bestiario; }

/* Layout specifico per la pagina 5 (Cultura, Folklore & Fede).
 * Arti & Feste occupa tutta la colonna sinistra e si estende su tre righe;
 * a destra si dispongono, dall’alto verso il basso, Fede & Inquisizione,
 * Eroi & Infami e Varie dai Lettori. */
.newspaper-page[data-page="5"] .newspaper-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 1.5rem;
    grid-template-areas:
        "arti inquisizione"
        "arti eroi"
        "arti varie";
}
.newspaper-page[data-page="5"] #arti-feste-section { grid-area: arti; }
.newspaper-page[data-page="5"] #inquisizione-section { grid-area: inquisizione; }
.newspaper-page[data-page="5"] #eroi-infami-section { grid-area: eroi; }
.newspaper-page[data-page="5"] #varie-lettori-section { grid-area: varie; }

/* Layout specifico per la pagina 6 (Cronaca Nera).
 * Non utilizza una griglia poiché ospita un unico articolo a tutta pagina. */
.newspaper-page[data-page="6"] .newspaper-content {
    display: block;
}

/* Each news section styled like a newspaper column */
.news-section {
    border-bottom: 1px dashed #bba98c;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* Full-width sections (e.g., obituaries) span across both columns */
.news-section.full-width {
    grid-column: 1 / -1;
}

/* Span two columns for larger articles */
.span-two {
    grid-column: span 2;
}

/* Controls for editing newspaper content */
.edit-controls {
    text-align: right;
    margin-bottom: 1rem;
}
.edit-controls .edit-btn {
    background-color: #5a3e1b;
    color: #fff;
    border: none;
    padding: 0.4rem 0.8rem;
    margin-left: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'MedievalSharp', Georgia, serif;
}
.edit-controls .edit-btn:hover {
    background-color: #7a4c1f;
}

/* -------------------------------------------------
 *  Nuovi stili per la modalità giornale interattivo
 *  - Trafiletti di anteprima sotto l'intestazione
 *  - Pulsante per editor
 *  - Frecce di navigazione flottanti
 *  - Pulsanti aggiungi pagina e sezione
 *  - Pulsante di eliminazione sezione
 * ------------------------------------------------- */

/* Contenitore dei blocchi di anteprima sotto la masthead */
.preview-blocks {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
}

/* Singolo blocco anteprima */
.preview-block {
    flex: 1;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid #bba98c;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.preview-block:hover {
    background-color: rgba(255, 255, 255, 0.95);
}

/* Immagini dei trafiletti */
.preview-block img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border: 1px solid #bba98c;
    border-radius: 4px;
    margin-bottom: 0.4rem;
}

/* Titolo e descrizione dei trafiletti */
.preview-block h3 {
    margin: 0.2rem 0;
    font-size: 1.1rem;
    color: #5a3e1b;
    text-align: center;
    font-family: 'IM Fell English SC', 'MedievalSharp', serif;
}

.preview-block p,
.preview-block span {
    margin: 0;
    font-size: 0.85rem;
    text-align: center;
    color: #4d3517;
}

/* Evidenziazione dei campi modificabili nei trafiletti */
.preview-block .editable[contenteditable="true"] {
    background-color: rgba(255, 255, 255, 0.9);
    outline: 1px dashed #555;
    padding: 0.1rem;
}

/* Bottone per attivare la modalità editor */
.editor-mode-btn {
    display: inline-block;
    margin: 1rem 0;
    background-color: #5a3e1b;
    color: #fff;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'MedievalSharp', Georgia, serif;
    transition: background-color 0.2s ease;
}
.editor-mode-btn:hover {
    background-color: #7a4c1f;
}

/* Pulsante per la selezione della modalità di visualizzazione (desktop/mobile).
   Condivide lo stile di base con il pulsante della modalità editor ma è separato
   per permettere ulteriori personalizzazioni. */
.view-toggle-btn {
    display: inline-block;
    margin: 1rem 0;
    background-color: #5a3e1b;
    color: #fff;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'MedievalSharp', Georgia, serif;
    transition: background-color 0.2s ease;
}
.view-toggle-btn:hover {
    background-color: #7a4c1f;
}

/* Frecce di navigazione flottanti */
.floating-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: rgba(90, 62, 27, 0.8);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-family: 'MedievalSharp', Georgia, serif;
    z-index: 1500;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transition: background-color 0.2s ease;
}
.floating-nav:hover {
    background-color: rgba(122, 76, 31, 0.9);
}
.floating-prev {
    left: 10px;
}
.floating-next {
    right: 10px;
}

/* Pulsanti aggiungi pagina e aggiungi sezione */
#add-page-btn,
#add-section-btn {
    background-color: #5a3e1b;
    color: #fff;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'MedievalSharp', Georgia, serif;
    margin-left: 0.5rem;
    transition: background-color 0.2s ease;
}
#add-page-btn:hover,
#add-section-btn:hover {
    background-color: #7a4c1f;
}

/* Pulsante di eliminazione sezione */
.delete-section-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #ba1f33;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    z-index: 10;
}
.delete-section-btn:hover {
    background-color: #912333;
}

/* Nasconde i pulsanti di navigazione “Precedente” e “Successiva” nel piè di pagina.
   Le frecce flottanti garantiscono già la navigazione tra le pagine. */
#prev-page,
#next-page {
    display: none;
}

/* Toolbar per la modalità editor: stile compatto e visibilità solo durante la modifica. */
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #5a3e1b;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.editor-toolbar .toolbar-btn {
    background-color: #f5e6c3;
    border: none;
    color: #5a3e1b;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.editor-toolbar .toolbar-btn:hover {
    background-color: #e8d6b5;
}
.editor-toolbar .toolbar-color {
    width: 32px;
    height: 32px;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Stile per le sezioni ridimensionabili. Durante la modalità editor
   permette di trascinare l'angolo inferiore per modificare l'altezza. */
.resizable-section {
    /* Permetti all'utente di ridimensionare liberamente la sezione sia
       in verticale che in orizzontale. L'uso di "both" consente di
       trascinare l'angolo inferiore destro come nei moderni editor WYSIWYG. */
    resize: both;
    overflow: auto;
    min-height: 50px;
    max-height: none;
    border: 1px dashed #bba98c;
    padding: 0.5rem;
}

/* Stile per le sezioni pubblicitarie aggiunte dinamicamente. Queste
   sezioni sono visivamente differenti dalle notizie e occupano lo spazio
   come un riquadro di sponsorizzazione. */
.news-section.ad-section {
    background-color: rgba(255, 248, 227, 0.8);
    border: 1px dotted #d4b88a;
    padding: 1rem;
    text-align: center;
    font-style: italic;
}

/* Stile per i trafiletti aggiunti dinamicamente (breve articolo). Non
   richiede regole specifiche aggiuntive, ma la classe è disponibile per
   eventuali personalizzazioni future. */
.news-section.blurb-section {
    /* lascia lo stile di base del news-section */
}

/* ==========================================
 *  Modalità Mobile View
 *
 * Quando l'utente attiva la modalità "mobile", il body riceve la classe
 * `mobile-view`. Le regole seguenti adattano l'impaginazione del giornale,
 * le dimensioni dei testi e l'organizzazione della griglia per una
 * visualizzazione confortevole su dispositivi più piccoli. La modalità
 * mobile è attivabile manualmente tramite il pulsante dedicato e non
 * interferisce con i breakpoint automatici.  
 */
body.mobile-view .container {
    max-width: 480px;
    padding: 0 0.5rem;
}

body.mobile-view .newspaper {
    padding: 1rem;
    margin-top: 1rem;
}

/* Riduci le dimensioni del titolo del masthead e delle informazioni */
body.mobile-view .newspaper-header h1 {
    font-size: 2.4rem;
}
body.mobile-view .masthead-info {
    font-size: 0.75rem;
}

/* Adatta i titoli delle pagine e delle sezioni per schermi piccoli */
body.mobile-view .page-heading {
    font-size: 2rem;
}
body.mobile-view .news-section h2 {
    font-size: 1.2rem;
}

/* Riduci la dimensione del testo dei contenuti e dei paragrafi */
body.mobile-view .section-content,
body.mobile-view .news-section .section-content {
    font-size: 0.9rem;
}

/* Organizza i trafiletti in colonna e riduci le immagini */
body.mobile-view .preview-blocks {
    flex-direction: column;
    gap: 0.75rem;
}
body.mobile-view .preview-block img {
    height: 60px;
}

/* Imposta una singola colonna per la griglia del giornale per evitare
   sovrapposizioni e spazi ristretti sui dispositivi mobili */
body.mobile-view .newspaper-content {
    grid-template-columns: 1fr;
    gap: 1rem;
}
body.mobile-view .newspaper-page[data-page="1"] .newspaper-content {
    grid-template-columns: 1fr;
    gap: 1rem;
}
body.mobile-view .news-section.top-story {
    grid-column: 1;
}

/* Ridimensiona le frecce flottanti per non occupare troppo spazio */
body.mobile-view .floating-nav {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
}

/* Modal overlay for viewing images in full. It remains hidden until
   activated by adding the class `.show`. */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 2000;
    cursor: pointer;
}

.image-modal img {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 10px #000;
    border: 4px solid #f5e6c3;
}

.image-modal.show {
    display: flex;
}

/* Highlight editable fields when in edit mode */
.editable[contenteditable="true"] {
    background-color: rgba(255, 255, 255, 0.8);
    outline: 1px dashed #555;
    padding: 0.2rem;
}

/*--------------------------------------------*/
/*  Nuovi stili per La Gazzetta del Regno     */
/*--------------------------------------------*/

/* Controlli per la navigazione tra le pagine del giornale */
.page-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    font-family: 'MedievalSharp', Georgia, serif;
    font-size: 0.95rem;
}

.page-controls .page-btn {
    background-color: #5a3e1b;
    color: #fff;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'MedievalSharp', Georgia, serif;
    transition: background-color 0.2s ease;
}

.page-controls .page-btn:hover:not(:disabled) {
    background-color: #7a4c1f;
}

.page-controls .page-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.page-controls #current-page-info {
    font-weight: bold;
    color: #4d3517;
}

/* Pulsante per scaricare il giornale in PDF */
.download-btn {
    background-color: #4d3517;
    color: #fff;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'MedievalSharp', Georgia, serif;
    font-size: 0.9rem;
    margin-left: 0.5rem;
    transition: background-color 0.2s ease;
}
.download-btn:hover {
    background-color: #7a4c1f;
}

/* Stili di stampa: nasconde controlli e mostra tutte le pagine in sequenza */
@media print {
    header,
    .page-controls,
    .edit-controls,
    #download-pdf {
        display: none !important;
    }
    .newspaper-header {
        display: block !important;
    }
    .newspaper-page {
        display: block !important;
        page-break-after: always;
    }
    body {
        background-color: #fbf5e8;
    }
}

/* Sezioni con immagine e testo */
.section-media {
    margin-bottom: 0.5rem;
}

.section-media img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border: 1px solid #bba98c;
    border-radius: 4px;
    display: block;
}

/* Input file per le immagini; nascosto di default, visibile in modalità modifica.
 * Stilizzato per integrarsi con l'estetica del giornale. */
.section-media .image-input,
.obit-card .image-input {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem;
    font-size: 0.8rem;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px dashed #bba98c;
    border-radius: 4px;
    color: #2f1a00;
    font-family: 'MedievalSharp', Georgia, serif;
    cursor: pointer;
}

/* Obituary image input wrapper adjustment */
.obit-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-bottom: 1px solid #bba98c;
    margin-bottom: 0.5rem;
}


.obit-card p {
    margin: 0;
    font-size: 0.85rem;
    color: #4d3517;
}