/* ============================================================
   Claudio Zannoni — Personal Website
   Style moderno — Aprile 2026
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --navy:          #000099;
    --navy-dark:     #000066;
    --navy-light:    #0033cc;
    --gold:          #cc6600;
    --text:          #003380;       /* navy blue leggibile su panna */
    --bg:            #f0ebe0;       /* panna/beige per il body esterno */
    --nav-bg:        #1a2744;
    --nav-text:      #e8d880;
    --nav-link:      #ffe066;
    --nav-hover-bg:  rgba(255,255,255,0.12);
    --nav-hover:     #ffffff;
    --link:          #000099;
    --link-visited:  #4b0082;
    --link-hover:    #0033cc;
    --border:        #c8c0a8;
    --sidebar-w:     190px;
    --content-max:   960px;
}

/* ── Base ─────────────────────────────────────────────────── */
html, body { height: 100%; }

body {
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
}

/* Area contenuto: Times New Roman uniforme come nelle pubblicazioni */
.content {
    font-family: "Times New Roman", Times, Georgia, serif;
}

/* ── Two-column layout ────────────────────────────────────── */
.layout {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar / Navigation ─────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--nav-bg);
    color: var(--nav-text);
    padding: 1rem 0.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar img.nematic {
    width: 100%;
    max-width: 108px;
    display: block;
    margin: 0.3rem auto 0.6rem;
    border-radius: 3px;
}

.sidebar a {
    color: var(--nav-link);
    text-decoration: none;
    font-size: 0.97rem;
    font-weight: 600;
    display: block;
    padding: 0.28rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}
.sidebar a:hover,
.sidebar a.active {
    background: var(--nav-hover-bg);
    color: var(--nav-hover);
}

.sidebar .nav-divider {
    border-top: 1px solid rgba(255,255,255,0.18);
    margin: 0.5rem 0 0.2rem;
}

.sidebar .nav-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: rgba(255,220,100,0.55);
    padding: 0 0.5rem;
}

.sidebar .book-cover {
    display: block;
    width: 88%;
    max-width: 108px;
    margin: 0.4rem auto;
    border-radius: 3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

/* ── Main Content ─────────────────────────────────────────── */
.content {
    flex: 1;
    padding: 1.6rem 2.2rem 3rem;
    overflow-y: auto;
    min-width: 0;
    max-width: calc(100vw - var(--sidebar-w));
    background: #fffef8;            /* panna chiarissima */
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: "Times New Roman", Times, Georgia, serif;
    color: var(--navy);
    line-height: 1.25;
}
h1 { font-size: 1.45rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.25rem; margin: 1.4rem 0 0.5rem; }
h3 { font-size: 1.05rem; margin: 1.1rem 0 0.4rem; }
h4 { font-size: 0.95rem; margin: 0.8rem 0 0.3rem; }

p { margin-bottom: 0.65rem; }

strong, b { color: inherit; }

/* ── Links ────────────────────────────────────────────────── */
a           { color: var(--link); }
a:visited   { color: var(--link-visited); }
a:hover     { color: var(--link-hover); text-decoration: underline; }

/* ── Lists ────────────────────────────────────────────────── */
ul, ol { padding-left: 2rem; margin-bottom: 0.7rem; }
li { margin-bottom: 0.25rem; }
/* Distanza aggiuntiva dal bordo sinistro nel pannello contenuto */
.content ul,
.content ol { margin-left: 1.2rem; }

/* ── Tables ───────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; max-width: 100%; }
td, th {
    padding: 0.3rem 0.5rem;
    vertical-align: top;
    text-align: left;
}

/* ── Rules ────────────────────────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.6rem 0;
}

/* ── Utility ──────────────────────────────────────────────── */
.center, [align="center"] { text-align: center; }
.navy   { color: var(--navy); }

/* ── Intestazione uniforme per tutte le pagine principali ─── */
.page-heading {
    font-family: "Times New Roman", Times, Georgia, serif;
    font-size: 1.45rem;
    font-weight: bold;
    color: var(--navy);
    margin-bottom: 0.4rem;
}
/* alias per retrocompatibilità */
.pub-heading { font-family: "Times New Roman", Times, Georgia, serif;
               font-size: 1.45rem; font-weight: bold;
               color: var(--navy); margin-bottom: 0.3rem; }

/* ── Publication entries (artdx.htm) ──────────────────────── */
.testocz, .pubblicazione, .pubtitolo {
    font-family: "Times New Roman", Times, Georgia, serif;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text);
}
.pubblicazione { font-weight: bold; }

/* Publication list items */
.content li {
    font-family: "Times New Roman", Times, Georgia, serif;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.55;
    margin-bottom: 0.1rem;
}
.content li a { color: var(--link); }

/* Images */
img { max-width: 100%; height: auto; }

/* Address block */
#address td {
    font-size: 1rem;
    color: var(--navy);
    font-style: italic;
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .layout { flex-direction: column; }
    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0.5rem;
        gap: 0.3rem;
    }
    .sidebar img.nematic,
    .sidebar .book-cover,
    .sidebar .nav-label { display: none; }
    .sidebar a { font-size: 0.88rem; padding: 0.2rem 0.4rem; }
    .content {
        padding: 1rem;
        max-width: 100vw;
    }
}