/* =========================================================
   Global dark theme
   System fonts only (no external font files to fetch: more
   robust for a static deploy, no network dependency).
   ========================================================= */

:root {
    --bg: #15171c;
    --bg-elevated: #1c1f26;
    --text: #e7e4de;
    --text-muted: #8f8b84;
    --accent: #77adff;
    --border: #2b2e36;

    --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    /* https://clamp.font-size.app */
    --font-size-h1: clamp(3.2rem, 1.95rem + 4vw, 4.2rem);
    --font-size-h2: clamp(2.5rem, 1.875rem + 2vw, 3rem);
    --font-size-h3: clamp(1.5rem, 0.875rem + 2vw, 2rem);
    --font-size-h4: clamp(1.25rem, 1.0875rem + 0.52vw, 1.38rem);

    /* --content-width: 740px;
    --wide-width: 1340px; */
    /*    
    Breakpoint	Class infix	Dimensions
    X-Small	< 576px
    Small	≥ 576px
    Medium	≥ 768px
    Large	≥ 992px
    Extra large	≥ 1200px
    Extra extra large xxl ≥ 1400px
    */

    --content-width: min(750px, 94%);
    --wide-width: min(1200px, 94%);

    /* --padding-inline-mobile:14px; */
}

* {box-sizing: border-box;overflow-wrap:anywhere;}
html {color-scheme: dark;height: 100%;}
body {margin: 0;
    min-height: 100dvh;display: grid;grid-template-rows: auto 1fr auto;
    background: var(--bg);color: var(--text);font-family: var(--font-body);font-size: 1.25rem;line-height: 1.65;-webkit-font-smoothing: antialiased;}
body > main {padding-top: 2.5rem;padding-bottom: 4rem;min-width: 0;}
.wrap-content {max-width: var(--content-width);margin: 0 auto;}
.wrap-wide {max-width: var(--wide-width);margin: 0 auto;}
a {color: var(--accent);text-decoration: none;}
a:hover,a:focus-visible {text-decoration: underline;}
:focus-visible {outline: 2px solid var(--accent);outline-offset: 2px;}
img {max-width: 100%;height: auto;}
strong {font-weight: 700;color:var(--accent);}
h1, h2, h3, h4 {font-family: var(--font-display);font-weight: 600;line-height: 1.25;color: var(--text);}
h1 {font-size: var(--font-size-h1);margin: 0 0 1rem;}
h2 {font-size: var(--font-size-h2);margin: 2.5rem 0 1rem;padding-top: 0.25rem;border-top: 1px solid var(--border);}
h3 {font-size: var(--font-size-h3);margin: 1.75rem 0 0.75rem;}
h4 {font-size: var(--font-size-h4);margin: 1.5rem 0 0.75rem;}
p {margin: 0 0 1rem;}
code {font-family: var(--font-mono);font-size: 0.875rem;display: block;color: var(--text);}

/* ---------- Header / Footer ---------- */

/* header */
.site-header {border-bottom: 1px solid var(--border);}
.site-header > *:first-child {display: flex;align-items: center;justify-content: space-between;padding-top: 1.1rem;padding-bottom: 1.1rem;gap:1rem;}
.site-brand {font-family: var(--font-display);color: var(--text);}
.site-brand:hover {text-decoration: none;color: var(--accent);}
.site-nav a {color: var(--text-muted);margin-right: 1rem;}
.site-nav a:last-child {margin-right:0;}
.site-nav a:hover,.site-nav a:focus-visible {color: var(--accent);}

/* tasto mobile menu */
.nav-toggle {display: none;flex-direction: column;justify-content: center;gap: 5px;width: 34px;height: 34px;padding: 0;background: transparent;border: none;cursor: pointer;}
.nav-toggle span {display: block;width: 100%;height: 2px;background: var(--text);}

/* footer */
.site-footer {border-top: 1px solid var(--border);color: var(--text-muted);font-size: 0.875rem;}
.site-footer > *:first-child {padding-top: 1.25rem;padding-bottom: 1.25rem;}
.site-footer p {margin: 0;}

/* ---------- Home ---------- */

.button {display: inline-block;margin-top: 0.5rem;padding: 0.6rem 1.1rem;background: var(--bg-elevated);border: 1px solid var(--border);border-radius: 6px;color: var(--text);}
.button:hover,
.button:focus-visible {border-color: var(--accent);color: var(--accent);text-decoration: none;}

/* ---------- Article list (blog.php) ---------- */

.article-list {list-style: none;margin: 0;padding: 0;}
.article-list li {border-bottom: 1px solid var(--border);}
.article-list a {display: flex;align-items: baseline;justify-content: space-between;gap: 1rem;padding: 1.5rem 0;color: var(--text);}
.article-list a:hover,
.article-list a:focus-visible {color: var(--accent);text-decoration: none;}
.article-list__title {font-size: var(--font-size-h3);line-height: initial;}
.article-list__date {flex-shrink: 0;color: var(--text-muted);font-size: 0.85rem;}

/* ---------- Pagination ---------- */

.pagination {display: flex;align-items: center;justify-content: center;gap: 1rem;margin: 2rem 0;font-size: 0.9rem;}
.pagination__pages {display: flex;gap: 0.5rem;}
.pagination__pages a,
.pagination__current {display: inline-flex;align-items: center;justify-content: center;min-width: 1.75rem;height: 1.75rem;padding: 0 0.35rem;border-radius: 4px;color: var(--text-muted);}
.pagination__pages a:hover,
.pagination__pages a:focus-visible {color: var(--accent);text-decoration: none;}
.pagination__current {background: var(--bg-elevated);border: 1px solid var(--border);color: var(--text);}
.pagination__prev,
.pagination__next {color: var(--text-muted);}
.pagination__prev:hover,
.pagination__next:hover {color: var(--accent);text-decoration: none;}

/* ---------- Article ---------- */

.article-meta {margin: -0.5rem 0 1.25rem;color: var(--text-muted);font-size: 18px;text-align: center;}
.featured-image {display: block;width: 100%;height: auto;border-radius: 6px;margin: 0 0 1.5rem;}

.article-content {
    margin-top: 1.5rem;
    /* padding:0 1rem; */

    .highlight {
        background: var(--bg-elevated);
        padding: 0.9rem 1.1rem;
        border-radius: 6px;
    }
}

/* ---------- Table of contents ---------- */

/* Populated via JS (see main.js, TableOfContents component). */
.toc {margin: 1.75rem 0 2.25rem;padding: 1rem 1.1rem;background: var(--bg-elevated);border: 1px solid var(--border);border-radius: 6px;font-size: 1rem;}
.toc:empty {display: none;}
.toc-title {margin: 0 0 0.6rem;font-family: var(--font-body);font-weight: 600;font-size: 1rem;text-transform: uppercase;letter-spacing: 0.08em;color: var(--text-muted);}
.toc ul {list-style: none;margin: 0;padding: 0;}
.toc li {margin: 0.35rem 0;}
.toc .toc-h2::before {display: inline-block;content: '›';padding-right: .5rem;}
.toc .toc-h3 {padding-left: 1.1rem;}
.toc .toc-h3::before {display: inline-block;content: '»';padding-right: .5rem;}
.toc a {color: var(--text);}
.toc a:hover,
.toc a:focus-visible {color: var(--accent);text-decoration: none;}

/* ---------- Code blocks ---------- */

.code-block {position: relative;margin: 1.5rem 0;background: var(--bg-elevated);border: 1px solid var(--border);border-radius: 6px;overflow: hidden;}
.code-block pre {margin: 0;padding: 1rem 3rem 1rem 1.1rem;overflow-x: auto;}
.code-block__copy {position: absolute;top: 0.6rem;right: 0.6rem;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;padding: 0;background: var(--bg);border: 1px solid var(--border);border-radius: 5px;color: var(--text-muted);cursor: pointer;}
.code-block__copy:hover,
.code-block__copy:focus-visible {color: var(--accent);border-color: var(--accent);}
.code-block__copy--done {color: var(--accent);border-color: var(--accent);}

/* ---------- Math blocks (KaTeX) ---------- */

/* Displayed as its own block, like a code block, with a larger font
   size than the surrounding text. */
.math-block {margin: 1.75rem 0;padding: 1.25rem 1.1rem;background: var(--bg-elevated);border: 1px solid var(--border);border-radius: 6px;font-size: 1.15em;text-align: center;overflow-x: auto;}

/* ---------- Gallery ---------- */

.gallery {display: flex;flex-wrap: wrap;gap: 0.6rem;margin: 1.5rem 0;}
.gallery__thumb {width: 140px;height: 100px;object-fit: cover;border-radius: 6px;border: 1px solid var(--border);cursor: pointer;}
.gallery__thumb:hover,
.gallery__thumb:focus-visible {border-color: var(--accent);}
/* Single standalone image marked as enlargeable. */
img.zoomable {cursor: pointer;border-radius: 6px;}

/* ---------- Lightbox overlay ---------- */

.lightbox-overlay {position: fixed;inset: 0;display: none;align-items: center;justify-content: center;background: rgba(10, 11, 14, 0.92);z-index: 100;padding: 2rem;}
.lightbox-overlay.is-open {display: flex;flex-direction: column;}
.lightbox-overlay__image {max-width: 100%;max-height: 80vh;object-fit: contain;border-radius: 4px;}
.lightbox-overlay__caption {margin: 0.75rem 0 0;color: var(--text-muted);font-size: 0.85rem;text-align: center;}
.lightbox-overlay__close,
.lightbox-overlay__prev,
.lightbox-overlay__next {position: absolute;background: transparent;border: none;color: var(--text);cursor: pointer;}
.lightbox-overlay__close {top: 1rem;right: 1.25rem;font-size: 2rem;line-height: 1;}
.lightbox-overlay__prev,
.lightbox-overlay__next {top: 50%;transform: translateY(-50%);font-size: 2.5rem;padding: 0.5rem 0.75rem;}
.lightbox-overlay__prev {left: 0.5rem;}
.lightbox-overlay__next {right: 0.5rem;}
.lightbox-overlay__close:hover,
.lightbox-overlay__prev:hover,
.lightbox-overlay__next:hover {color: var(--accent);}
body.lightbox-lock-scroll {overflow: hidden;}

/* ---------- Responsive ---------- */

@media (width < 480px) {
    /* body {
        .site-footer, .site-header, main {padding-inline: var(--padding-inline-mobile);}
        .article-content {padding:0;}
    } */
    .article-list a {flex-direction: column;gap: 0.15rem;}
    .gallery__thumb {width: calc(50% - 0.3rem);height: 90px;}
    .lightbox-overlay__prev,.lightbox-overlay__next {font-size: 2rem;padding: 0.4rem 0.5rem;}

    /* gestione mobile menu */
    .nav-toggle { display: flex; }
    .site-nav {
        position: fixed;top: 0;right: 0;height: 100%;width: min(280px, 80vw);
        background: var(--bg-elevated);border-left: 1px solid var(--border);
        display: flex;flex-direction: column;gap: 0.25rem;
        padding: 2.5rem 1.5rem 1.5rem;
        transform: translateX(100%);transition: transform 0.25s ease;
        z-index: 101;
        overflow-y: auto;
    }
    .site-nav.is-open { transform: translateX(0); }
    .site-nav a {margin-right: 0;padding: 0.75rem 0;border-bottom: 1px solid var(--border);}
    .nav-backdrop {
        position: fixed;inset: 0;background: rgba(10, 11, 14, 0.6);
        z-index: 100;opacity: 0;pointer-events: none;transition: opacity 0.25s ease;
    }
    .nav-backdrop.is-open { opacity: 1;pointer-events: auto; }
}