/* ============================================================================
 * Zanshin -- main.css
 * ============================================================================
 * Design system spec v1.1 sez. 8.
 * Palette:
 *   - sumi-paper  #FAFAF7
 *   - sumi-black  #0E0E0F
 *   - indigo      #4A4E8C
 *   - kinpaku     #C9A961
 * Font stack: Source Serif 4 (body) / Inter (titoli) / Geist Mono (code).
 * Fallback su system stack -- no font files in v1.
 * ============================================================================ */

/* ---------- Reset minimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); }
a:hover { text-decoration: underline; }

/* ---------- Color tokens ---------- */
:root {
    --color-bg:        #FAFAF7;
    --color-bg-soft:   #f3f3ee;
    --color-fg:        #0E0E0F;
    --color-muted:     #6b6b6b;
    --color-accent:    #4A4E8C;
    --color-highlight: #C9A961;
    --color-border:    #e3e3dd;
    --color-card-bg:   #ffffff;
    --color-code-bg:   #f0f0e8;

    --severity-critical: #b51e3b;
    --severity-high:     #d97706;
    --severity-medium:   #6b6b6b;
    --severity-low:      #888888;

    --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --font-sans:  Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono:  "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --radius: 6px;
    --max-w-prose: 38rem;
    --max-w-page:  68rem;
}
[data-theme="dark"] {
    --color-bg:        #0E0E0F;
    --color-bg-soft:   #161617;
    --color-fg:        #FAFAF7;
    --color-muted:     #a3a3a3;
    --color-accent:    #8a8eff;
    --color-highlight: #d4b87a;
    --color-border:    #2a2a2a;
    --color-card-bg:   #181818;
    --color-code-bg:   #232323;
}

/* ---------- Layout root ---------- */
body {
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.container {
    width: 100%;
    max-width: var(--max-w-page);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ---------- Header ---------- */
.site-header {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    margin-bottom: var(--space-6);
}
.header-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.site-brand {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.brand-mark {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}
.brand-tag {
    font-size: 0.875rem;
    color: var(--color-muted);
    font-style: italic;
}
.site-nav ul {
    display: flex;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav a {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-fg);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}
.site-nav a:hover {
    border-bottom-color: var(--color-highlight);
    text-decoration: none;
}
.theme-toggle {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-fg);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    cursor: pointer;
}
.theme-toggle:hover {
    border-color: var(--color-highlight);
}

/* ---------- Main / footer ---------- */
.site-main { min-height: 60vh; }
.site-footer {
    margin-top: var(--space-8);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-soft);
    color: var(--color-muted);
    font-size: 0.9rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.footer-title {
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--color-fg);
    margin: 0 0 var(--space-1);
}
.footer-tag { margin: 0; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: var(--space-1); }
.footer-meta p { margin: 0 0 var(--space-2); }

@media (max-width: 720px) {
    .footer-grid { grid-template-columns: 1fr; }
    .site-nav ul { gap: var(--space-3); }
}

/* ---------- Article grid (index/tag/rubrica) ---------- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-7);
}
.card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover {
    transform: translateY(-2px);
    border-color: var(--color-highlight);
}
.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.card-link:hover { text-decoration: none; }
.card-hero {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--color-bg-soft);
}
.card-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.card-body { padding: var(--space-4); }
.card-meta {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--color-muted);
    margin: 0 0 var(--space-2);
}
.card-title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0 0 var(--space-2);
    color: var(--color-fg);
}
.card-lead {
    font-size: 0.95rem;
    color: var(--color-muted);
    margin: 0 0 var(--space-3);
}
.card-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-muted);
    margin: 0;
}

/* ---------- Article detail ---------- */
.article {
    max-width: var(--max-w-prose);
    margin: 0 auto;
}
.article-header { margin-bottom: var(--space-6); }
.article-meta {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: var(--space-3);
}
.article-meta a { text-decoration: none; }
.article-title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 2.25rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
}
.article-lead {
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--color-muted);
    margin: 0 0 var(--space-5);
}
.article-hero {
    margin: var(--space-5) 0;
}
.article-hero img {
    border-radius: var(--radius);
    width: 100%;
}
.article-body {
    font-size: 1.05rem;
    line-height: 1.75;
}
.article-body h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.4rem;
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}
.article-body h3 {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.15rem;
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}
.article-body p { margin: 0 0 var(--space-4); }
.article-body ul, .article-body ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.article-body li { margin-bottom: var(--space-2); }
.article-body code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--color-code-bg);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}
.article-body pre {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    background: var(--color-code-bg);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 0 0 var(--space-4);
}
.article-body pre code { background: none; padding: 0; }
.article-body blockquote {
    border-left: 3px solid var(--color-highlight);
    padding-left: var(--space-4);
    margin: var(--space-4) 0;
    color: var(--color-muted);
    font-style: italic;
}
.article-body a { color: var(--color-accent); }

/* "in 30 secondi" box */
.box-30s {
    border: 1px solid var(--color-highlight);
    border-left-width: 4px;
    background: var(--color-bg-soft);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-6);
}
.box-30s-title {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-2);
    color: var(--color-highlight);
}
.box-30s ul { margin: 0; padding-left: var(--space-5); }
.box-30s li {
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

/* Article footer + nav */
.article-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: 0.9rem;
    color: var(--color-muted);
}
.article-tags {
    margin: 0 0 var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.tag {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-decoration: none;
    border: 1px solid var(--color-border);
    color: var(--color-fg);
}
.tag:hover {
    border-color: var(--color-highlight);
    text-decoration: none;
}
.tag-cve     { color: var(--severity-critical); }
.tag-vendor  { color: var(--color-accent); }
.tag-threat_actor { color: var(--severity-high); }

.article-source { margin: 0; }
.article-source a { color: var(--color-accent); }

.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.article-nav-prev, .article-nav-next {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.article-nav-prev:hover, .article-nav-next:hover {
    border-color: var(--color-highlight);
    text-decoration: none;
}
.article-nav-next { text-align: right; }
.article-nav-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-muted);
    text-transform: uppercase;
}
.article-nav-title {
    font-family: var(--font-sans);
    font-weight: 600;
    margin-top: var(--space-1);
}
@media (max-width: 720px) {
    .article-nav { grid-template-columns: 1fr; }
    .article-title { font-size: 1.75rem; }
}

/* ---------- Badges ---------- */
.rubrica {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px var(--space-2);
    border-radius: 3px;
    color: var(--color-accent);
    background: var(--color-bg-soft);
}
.rubrica-breaking        { color: var(--severity-critical); }
.rubrica-approfondimento { color: var(--color-accent); }
.rubrica-how-to          { color: var(--color-highlight); }
.rubrica-editoriale      { color: var(--severity-high); }

.severity {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.severity-critical { color: var(--severity-critical); }
.severity-high     { color: var(--severity-high); }
.severity-medium   { color: var(--severity-medium); }
.severity-low      { color: var(--severity-low); }

.badge-kev {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.7rem;
    padding: 2px var(--space-2);
    background: var(--severity-critical);
    color: #fff;
    border-radius: 3px;
}

/* ---------- Archive header ---------- */
.archive-header {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.archive-kicker {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-muted);
    text-transform: uppercase;
    margin: 0;
}
.archive-title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 2rem;
    margin: var(--space-2) 0;
}
.archive-meta {
    color: var(--color-muted);
    margin: 0;
    font-size: 0.9rem;
}

/* ---------- Static pages ---------- */
.static-page {
    max-width: var(--max-w-prose);
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.7;
}
.static-page h1 {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 2rem;
    margin-bottom: var(--space-5);
}
.static-page h2 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.3rem;
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

/* ---------- Pagination + states ---------- */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: 0.9rem;
}
.page-info { color: var(--color-muted); }
.empty-state {
    padding: var(--space-7) var(--space-4);
    text-align: center;
    color: var(--color-muted);
}
.empty-state h1 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: var(--space-3);
}
.error-page {
    padding: var(--space-7) var(--space-4);
    text-align: center;
}
.error-code {
    font-family: var(--font-mono);
    font-size: 4rem;
    color: var(--color-highlight);
    margin: 0;
}
.error-page h1 {
    font-family: var(--font-sans);
    font-weight: 700;
    margin: var(--space-3) 0;
}

/* ============================================================================
 * UX-1 PATCH: severity emphasis + tonalita' soft + badge fix
 * ============================================================================ */

/* Palette dark piu' soft (GitHub-style, meno halation del nero puro) */
[data-theme="dark"] {
    --color-bg:        #0d1117;
    --color-bg-soft:   #161b22;
    --color-card-bg:   #161b22;
    --color-border:    #30363d;
}

/* Severity tokens piu' incisivi */
:root {
    --severity-critical: #b51e3b;
    --severity-high:     #d97706;
    --severity-medium:   #6b6b6b;
    --severity-low:      #888888;
}

/* Card: barra verticale colorata robusta (override del border-left base) */
.card {
    border-left-width: 4px !important;
    border-left-style: solid !important;
    border-left-color: var(--color-border) !important;
    transition: transform 0.15s ease, border-left-color 0.2s ease, box-shadow 0.2s ease;
}
.card-critical { border-left-color: var(--severity-critical) !important; }
.card-high     { border-left-color: var(--severity-high)     !important; }
.card-medium   { border-left-color: var(--severity-medium)   !important; }
.card-low      { border-left-color: var(--severity-low)      !important; }
.card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Severity badge con sfondo riempito (era solo colore testo) */
.severity {
    padding: 2px 8px;
    border-radius: 3px;
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.severity-critical { background: var(--severity-critical); }
.severity-high     { background: var(--severity-high); }
.severity-medium   { background: var(--severity-medium); }
.severity-low      { background: var(--severity-low); }

/* KEV badge piu' aggressivo */
.badge-kev {
    background: var(--severity-critical) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
    font-weight: 800;
}

/* Card hero: aspect ratio piu' compatto su desktop (1:1 troppo grande) */
@media (min-width: 720px) {
    .card-hero {
        aspect-ratio: 16 / 9;
    }
}

/* Card title piu' compatto */
.card-title {
    font-size: 1.15rem;
    line-height: 1.3;
}

/* Time ago in card: mono, sottile */
.card-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-muted);
    margin: 0;
    text-transform: lowercase;
}

/* ============================================================================
 * UX-2 FILTER BAR PATCH: barra filtri rapida client-side
 * ============================================================================ */
.filter-bar {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-2) 0;
    background: var(--color-bg-soft);
    margin-top: calc(-1 * var(--space-6));
    margin-bottom: var(--space-5);
}
.filter-bar-inner {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}
.filter-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-muted);
    letter-spacing: 0.08em;
    margin-right: var(--space-2);
}
.filter-btn {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.filter-btn:hover {
    border-color: var(--color-highlight);
}
.filter-btn.active {
    background: var(--color-fg);
    color: var(--color-bg);
    border-color: var(--color-fg);
}
.filter-btn.filter-critical.active {
    background: var(--severity-critical);
    border-color: var(--severity-critical);
    color: #fff;
}
.filter-btn.filter-high.active {
    background: var(--severity-high);
    border-color: var(--severity-high);
    color: #fff;
}
.filter-btn.filter-kev.active {
    background: var(--severity-critical);
    border-color: var(--severity-critical);
    color: #fff;
}
.filter-counter {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-muted);
}

.card.is-hidden { display: none; }

/* ============================================================================
 * UX-H CARD TAGS PATCH: tag compatti sotto titolo card
 * ============================================================================ */
.card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}
.card-tags .tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 1px 6px;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    color: var(--color-muted);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s, border-color 0.15s;
}
.card-tags .tag:hover {
    color: var(--color-fg);
    border-color: var(--color-highlight);
}
.card-tags .tag-topic { background: var(--color-bg-soft); }
.card-tags .tag-actor { color: var(--severity-critical); border-color: var(--severity-critical); }
.card-tags .tag-product { color: var(--color-fg); }


/* -- UX3_INLINE_EXPANSION_CSS ----------------------------------------------
   Inline card expansion: blocco "In 30 secondi" collassabile in card list
   (homepage, /tag/<slug>, /rubrica/<rubrica>). Riusa --color-highlight per
   richiamare lo stile della .box-30s in pagina articolo.
   -------------------------------------------------------------------------- */

.card-hero-link {
    display: block;
    text-decoration: none;
}
.card-hero-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.card-title a {
    color: inherit;
    text-decoration: none;
}
.card-title a:hover,
.card-title a:focus-visible {
    color: var(--color-accent);
    text-decoration: underline;
}

.card-30s {
    margin: var(--space-3) 0;
    border-left: 3px solid var(--color-highlight);
    background: var(--color-bg-soft);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    font-size: 0.92rem;
}
.card-30s summary {
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-highlight);
    list-style: none;
    user-select: none;
    padding: var(--space-1) 0;
}
.card-30s summary::-webkit-details-marker { display: none; }
.card-30s summary::before {
    content: "+";
    display: inline-block;
    width: 1.2em;
    font-weight: 700;
}
.card-30s[open] summary::before { content: "-"; }
.card-30s[open] summary { margin-bottom: var(--space-2); }
.card-30s ul {
    margin: 0;
    padding-left: var(--space-5);
}
.card-30s li {
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

.card-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: var(--space-3) 0 0;
    gap: var(--space-3);
    font-size: 0.85rem;
}
.card-read-more {
    font-family: var(--font-sans);
    font-weight: 500;
}


/* -- TOPBAR_HIGHLIGHTS_CSS -------------------------------------------------
   Top CVE + Top Threat Actors highlights bar (homepage only). Posizionata
   sopra article-grid. Stile editoriale "sidebar" con due colonne flex.
   -------------------------------------------------------------------------- */

.highlights-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-highlight);
}
.highlights-section { min-width: 0; }
.highlights-title {
    margin: 0 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
}
.highlights-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.highlights-list li { margin: 0; }
.highlights-list .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.18em 0.6em;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
    background: var(--color-card-bg);
}
.highlights-list .tag:hover {
    background: currentColor;
    color: var(--color-card-bg);
}
.highlights-list .tag:hover .highlights-count {
    color: var(--color-card-bg);
}
.highlights-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.7;
    background: var(--color-bg-soft);
    padding: 0 0.4em;
    border-radius: 4px;
    color: var(--color-muted);
}