/* ============================================
   PM EDIZIONI — CSS COMUNE
   
   Variabili brick, componenti condivisi tra tutti 
   i template (breadcrumb, reveal, texture).
   
   Caricato su TUTTE le pagine.
   ============================================ */

/* ============================================
   SCALA MATTONE
   I 9 slot di Kadence (--global-palette1..9) coprono
   accent, testi e sfondi. Ma ci serve la scala completa
   per sfumature specifiche nei template.
   ============================================ */


:root {
    /* Scala mattone — dal più scuro al più chiaro */
    --brick-900: #4a1c10;
    /* bg scuro: footer, dark sections */
    --brick-800: #6b2518;
    /* bottoni hover scuri */
    --brick-700: #8b3222;
    /* = Kadence palette1 — accent principale */
    --brick-600: #a53d2a;
    /* = Kadence palette2 — hover links */
    --brick-500: #bf4a33;
    /* accent secondario, badge attivi */
    --brick-400: #d4715e;
    /* accent chiaro: scrollbar, icone soft */
    --brick-100: #f5ddd7;
    /* tint leggero: hover card, tag bg */
    --brick-50: #faf0ed;
    /* appena percepibile: highlight, hover TOC */

    /* Accento caldo (gold) — per dettagli speciali */
    --warm-accent: #b8860b;
    --warm-accent-light: #d4a233;

    /* Background — mappati alle palette Kadence */
    --bg-primary: var(--global-palette8);
    /* #faf8f4 — sfondo pagina */
    --bg-secondary: var(--global-palette6);
    /* #f3f0ea — sezioni alternate */
    --bg-card: var(--global-palette9);
    /* #ffffff — card, modali */
    --bg-accent: #eceae4;
    /* sabbia scura: copertina placeholder */
    --bg-dark: #2e1a16;
    /* footer, sezioni scure */

    /* Testi — mappati alle palette Kadence */
    --text-primary: var(--global-palette3);
    /* #1c1c1a */
    --text-secondary: var(--global-palette4);
    /* #5a5a52 */
    --text-muted: var(--global-palette5);
    /* #8a8a80 */
    --text-on-dark: #f0ede7;

    /* Bordi e ombre */
    --border-subtle: rgba(26, 28, 26, 0.08);
    --border-medium: rgba(26, 28, 26, 0.15);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 16px 50px rgba(74, 28, 16, 0.12);

    /* Font — li imposti anche nel Customizer Kadence,
       ma li definiamo qui per i template custom */
    --font-display: 'Libre Baskerville', Georgia, serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Transizioni */
    --transition-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ============================================
   SCROLLBAR CUSTOM
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--brick-400);
    border-radius: 3px;
}


/* ============================================
   TEXTURE GRANA CARTA
   Overlay sottile su tutto il sito per dare 
   sensazione "cartacea" alla pagina.
   ============================================ */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.018'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
}


/* ============================================
   BREADCRUMB — Condiviso tra tutti i template
   ============================================ */
.breadcrumb {
    padding: 3.5rem 3rem 0;
    max-width: 1300px;
    margin: 0 auto;
}

.breadcrumb-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    padding: 0;
    margin: 0;
}

.breadcrumb-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-list a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb-list a:hover {
    color: var(--brick-600);
}

.breadcrumb-sep {
    color: var(--text-muted);
    opacity: 0.4;
}

.breadcrumb-current {
    color: var(--brick-600);
}

S

/* ============================================
   SCROLL REVEAL — Animazione ingresso sezioni
   Usata con IntersectionObserver in pm-main.js
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: all 0.7s var(--transition-smooth);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}


/* ============================================
   LINK GLOBALI — override per i template custom
   ============================================ */
.pm-single-libro a,
.pm-single-autore a,
.pm-collana a,
.pm-catalogo a {
    color: var(--brick-700);
    text-decoration: none;
    transition: color 0.3s var(--transition-smooth);
}

.pm-single-libro a:hover,
.pm-single-autore a:hover,
.pm-collana a:hover,
.pm-catalogo a:hover {
    color: var(--brick-500);
}


/* ============================================
   BOTTONI — Riutilizzabili ovunque
   ============================================ */
.pm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 2rem;
    background: var(--brick-800);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid var(--brick-800);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s var(--transition-smooth);
    text-decoration: none;
}

.pm-btn-primary:hover {
    background: var(--brick-700);
    border-color: var(--brick-700);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(107, 37, 24, 0.25);
}

.pm-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.95rem 2rem;
    background: transparent;
    color: var(--brick-800);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1.5px solid var(--brick-800);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.4s var(--transition-smooth);
    text-decoration: none;
}

.pm-btn-secondary:hover {
    background: var(--brick-50);
    transform: translateY(-2px);
}


/* ============================================
   RESPONSIVE BREADCRUMB
   ============================================ */
@media (max-width: 768px) {
    .breadcrumb {
        padding: 5rem 1.5rem 0;
    }
}