/* ============================================================
   lornova.it — palette ispirata a claude.com/blog
   Titoli: Source Serif 4 (alternativa open ad Anthropic Serif)
   Body: Inter (alternativa open ad Anthropic Sans)
   Mono: JetBrains Mono (stesso fallback usato da Claude)
   Accent: Clay #d97757 (palette Claude)
   ============================================================ */

:root {
  --lz-primary: #d97757;        /* clay — accent principale Claude */
  --lz-primary-dark: #7a3200;   /* arancione scuro per hover/active */
  --lz-secondary: #c46686;      /* fig — riservato a usi mirati */
  --lz-bg: #faf9f5;             /* bianco caldo */
  --lz-bg-soft: #f0ebe0;        /* oat più chiaro */
  --lz-bg-warm: #e3dacc;        /* oat — Claude */
  --lz-text: #1a1a1a;           /* near-black */
  --lz-text-soft: #5a5a5a;      /* gray medio */
  --lz-border: #e3dacc;
  --lz-code-bg: #faf6f0;        /* sfondo blocchi di codice */

  --lz-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --lz-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --lz-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ----- Body / global ----- */
body,
html,
.container,
.main-content {
  background-color: var(--lz-bg) !important;
  color: var(--lz-text) !important;
  font-family: var(--lz-font-sans) !important;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- Titoli: Source Serif 4 (selettori generici + Diary-specific) ----- */
h1, h2, h3, h4, h5, h6,
.post-title,
.post-item-title,
.post-subtitle,
.nav-title,
article h1,
article h2,
article h3,
.sidebar h1,
.site-title {
  font-family: var(--lz-font-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: var(--lz-text) !important;
  line-height: 1.2;
}

/* Page title (single post) — usa div.post-title nel tema Diary */
.post-title {
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.3em;
}

.post-subtitle {
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  color: var(--lz-text-soft) !important;
  font-style: italic;
}

/* Post list (home) item title */
.post-item-title {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
}

.post-item-summary {
  font-family: var(--lz-font-sans) !important;
  color: var(--lz-text-soft) !important;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Sidebar site title (.nav-title) */
.nav-title {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
  color: var(--lz-text) !important;
}

.nav-subtitle {
  font-family: var(--lz-font-sans) !important;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--lz-text-soft) !important;
}

/* Heading sizes within post body */
h1 { font-size: 2.4rem; font-weight: 700 !important; }
h2 { font-size: 1.75rem; margin-top: 2em; }
h3 { font-size: 1.35rem; margin-top: 1.5em; }

/* ----- Link ----- */
a, a:visited {
  color: var(--lz-primary) !important;
  text-decoration: none;
  transition: color 0.15s;
}
a:hover, a:focus {
  color: var(--lz-primary-dark) !important;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ----- Sidebar ----- */
.sidebar,
aside {
  background-color: var(--lz-bg) !important;
  color: var(--lz-text) !important;
  border-right: 1px solid var(--lz-border);
}

.sidebar .description,
.site-description {
  color: var(--lz-text-soft) !important;
  font-family: var(--lz-font-sans) !important;
  font-style: italic;
  font-size: 0.95rem;
}

/* ----- Menu nav ----- */
.nav-link, nav a {
  color: var(--lz-text) !important;
  font-family: var(--lz-font-sans) !important;
  font-weight: 500;
}
.nav-link:hover, .nav-link.active, nav a:hover {
  color: var(--lz-primary) !important;
}

/* ----- Post titles in feed ----- */
.post-title a,
article h1 a {
  color: var(--lz-text) !important;
}
.post-title a:hover,
article h1 a:hover {
  color: var(--lz-primary) !important;
  text-decoration: none;
}

/* ----- Meta (date, autore, tags) ----- */
.post-meta, .post-date, .meta, time {
  color: var(--lz-text-soft) !important;
  font-family: var(--lz-font-sans) !important;
  font-size: 0.875rem;
}

/* ----- Tag chips ----- */
.tag, .tags a, a.tag {
  background-color: var(--lz-bg-soft) !important;
  color: var(--lz-primary) !important;
  border: 1px solid var(--lz-primary) !important;
  border-radius: 4px;
  padding: 0.1em 0.6em;
  margin-right: 0.3em;
  font-size: 0.8em;
  font-family: var(--lz-font-sans) !important;
  font-weight: 500;
}
.tag:hover, .tags a:hover {
  background-color: var(--lz-primary) !important;
  color: var(--lz-bg) !important;
}

/* ----- Code inline ----- */
code, p code, li code {
  background-color: var(--lz-bg-soft) !important;
  color: var(--lz-primary) !important;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  font-family: var(--lz-font-mono) !important;
  font-size: 0.88em;
}

/* ----- Code blocks ----- */
pre, .chroma, pre.chroma {
  background-color: var(--lz-code-bg) !important;
  border: 1px solid var(--lz-border);
  border-radius: 8px;
  padding: 1em 1.25em !important;
  font-family: var(--lz-font-mono) !important;
  font-size: 0.9em;
  overflow-x: auto;
}
pre code, .highlight pre {
  background-color: transparent !important;
  font-family: var(--lz-font-mono) !important;
}

/* ----- Blockquote ----- */
blockquote {
  border-left: 3px solid var(--lz-primary) !important;
  background-color: var(--lz-bg-soft) !important;
  color: var(--lz-text) !important;
  padding: 0.8em 1.2em;
  margin: 1.5em 0;
  border-radius: 0 6px 6px 0;
  font-family: var(--lz-font-serif) !important;
  font-style: italic;
}

/* ----- Language toggle (extrabar a destra, sopra il dark mode) ----- */
.pagination-action.lang-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  color: var(--lz-text-soft) !important;
  transition: color 0.15s;
}

.pagination-action.lang-toggle:hover {
  color: var(--lz-primary) !important;
}

.pagination-action.lang-toggle .lang-toggle-label {
  font-family: var(--lz-font-sans) !important;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: -2px;
  text-transform: uppercase;
}

/* ----- Footer / copyright ----- */
footer, .copyright, .footer {
  color: var(--lz-text-soft) !important;
  background-color: var(--lz-bg) !important;
  border-top: 1px solid var(--lz-border);
  font-family: var(--lz-font-sans) !important;
  font-size: 0.85rem;
}

/* ----- TOC ----- */
.toc, .toc ul, .toc li, nav#TableOfContents {
  background-color: var(--lz-bg-soft) !important;
  color: var(--lz-text) !important;
  border-radius: 6px;
  font-family: var(--lz-font-sans) !important;
}
.toc a, nav#TableOfContents a { color: var(--lz-text-soft) !important; }
.toc a:hover, nav#TableOfContents a:hover { color: var(--lz-primary) !important; }

/* ----- Pagination ----- */
.pagination .page-link, .page-link {
  color: var(--lz-primary) !important;
  background-color: var(--lz-bg) !important;
  border-color: var(--lz-border) !important;
  font-family: var(--lz-font-sans) !important;
}
.pagination .page-item.active .page-link, .page-link.active {
  background-color: var(--lz-primary) !important;
  color: var(--lz-bg) !important;
  border-color: var(--lz-primary) !important;
}

/* ----- HR ----- */
hr {
  border-top: 1px solid var(--lz-border) !important;
}

/* ----- Tables ----- */
table { border-collapse: collapse; font-family: var(--lz-font-sans); }
table th {
  background-color: var(--lz-bg-soft) !important;
  color: var(--lz-text) !important;
  border-bottom: 2px solid var(--lz-primary) !important;
  font-weight: 600;
  text-align: left;
  padding: 0.5em 0.75em;
}
table td {
  border-bottom: 1px solid var(--lz-border) !important;
  padding: 0.5em 0.75em;
}

/* ----- Override aggressivo dei blu del tema (Material #1976d2) ----- */

/* Sidebar nav items hover/active: il tema usa blu ($color-accent) */
.nav-link-item:hover,
.nav-link-item.active,
.nav-link-item:focus,
.a-block:hover .nav-link-item,
.a-block.active .nav-link-item {
  color: var(--lz-primary-dark) !important;
  background-color: rgba(217, 119, 87, 0.06) !important;
}

/* Indicatore right-border (sidebar è a destra → border è a dx) */
.side-container .nav-head:hover,
.side-container .nav-head.active,
.side-container .a-block:hover,
.side-container .a-block.active,
.side-container .nav-link-item:hover,
.side-container .nav-link-item.active {
  border-right: 2px solid var(--lz-primary) !important;
}

/* Post item wrapper hover: testo accent arancione scuro su TUTTI i discendenti
   (il tema applica `* { color: $dark-accent }` blu — overrido). Sfondo lasciato
   al default del tema (rgba(0,0,0,0.03), molto leggero). */
.post-item-wrapper:not(.post-item-wrapper-no-hover):hover,
.post-item-wrapper:not(.post-item-wrapper-no-hover):hover * {
  color: var(--lz-primary-dark) !important;
}

.post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title {
  text-decoration-color: var(--lz-primary-dark) !important;
}

/* Pagination action buttons (extrabar a destra): hover arancione scuro */
.pagination-action,
.pagination-action .material-icons {
  color: var(--lz-text-soft) !important;
  transition: color 0.15s;
}
.pagination-action:hover,
.pagination-action:hover .material-icons {
  color: var(--lz-primary-dark) !important;
}

/* Focus outline browser: arancione, non blu */
*:focus,
*:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline-color: var(--lz-primary) !important;
}

/* Bootstrap btn-primary, btn-link, btn-outline-primary residui */
.btn-primary,
.btn-link,
a.btn,
.btn:hover,
.btn-outline-primary {
  color: var(--lz-primary) !important;
  border-color: var(--lz-primary) !important;
}
.btn-primary {
  background-color: var(--lz-primary) !important;
  color: var(--lz-bg) !important;
}
.btn-primary:hover,
.btn-link:hover,
a.btn:hover {
  background-color: var(--lz-primary-dark) !important;
  border-color: var(--lz-primary-dark) !important;
  color: var(--lz-bg) !important;
}

/* Material icons di default (se ereditano blu) */
.material-icons {
  color: inherit;
}

/* Post pagination (next/prev in fondo al post) */
.post-pagination .newer-posts:hover,
.post-pagination .older-posts:hover {
  color: var(--lz-primary-dark) !important;
  background-color: var(--lz-bg-soft) !important;
}

/* Hover su qualsiasi elemento "active" o "selected" del tema */
.active,
.selected {
  color: var(--lz-primary-dark) !important;
}

/* ----- Selection highlight in primary tone ----- */
::selection {
  background-color: var(--lz-primary);
  color: var(--lz-bg);
}

/* ----- Dark mode ----- */
/* Il tema attiva la notte aggiungendo la classe `night` al body (toggle
   nell'extrabar, persistito in cookie), NON via prefers-color-scheme.
   Tutte le regole sopra usano le variabili --lz-*, quindi basta ridefinirle
   qui perché valgano anche a tema scuro, !important compresi. */
body.night {
  --lz-primary: #e29676;        /* clay schiarito per contrasto su scuro */
  --lz-primary-dark: #f2b596;   /* hover/active: su scuro si schiarisce */
  --lz-secondary: #d488a3;
  --lz-bg: #1f1d1a;             /* near-black caldo */
  --lz-bg-soft: #2a2723;
  --lz-bg-warm: #33302a;
  --lz-text: #ece9e2;
  --lz-text-soft: #a8a49b;
  --lz-border: #3a362f;
  --lz-code-bg: #262320;
}

/* dark-mode.scss del tema reintroduce i suoi blu con selettori più specifici
   e !important: vanno ribattuti a parità di specificità (custom.css è
   caricato dopo, quindi a parità vince). */
body.night a,
body.night a:visited {
  color: var(--lz-primary) !important;
}
body.night a:hover,
body.night a:focus {
  color: var(--lz-primary-dark) !important;
}

body.night blockquote,
body.night blockquote * {
  color: var(--lz-text) !important;
}

body.night code:not([data-lang]) {
  color: var(--lz-primary) !important;
}

body.night .side-container .nav-head:hover,
body.night .side-container .nav-head.active,
body.night .side-container .nav-link-list .nav-link-item:hover,
body.night .side-container .nav-link-list .nav-link-item.active {
  color: var(--lz-primary-dark) !important;
  border-right: 2px solid var(--lz-primary) !important;
  background: rgba(217, 119, 87, 0.08) !important;
}

body.night .stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover,
body.night .stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover * {
  color: var(--lz-primary-dark) !important;
}

/* Card dei post: il tema usa grigi neutri (#282828), qui armonizzate col
   warm scuro; sotto i 1020px (layout a colonna singola) il tema le fonde
   con lo sfondo, e così anche qui. */
body.night .stream-container .post,
body.night .stream-container .post-list-container {
  background: var(--lz-bg-soft);
}
@media screen and (max-width: 1020px) {
  body.night .stream-container .post,
  body.night .stream-container .post-list-container {
    background: var(--lz-bg);
  }
}