@charset "UTF-8";

/*
@copyright: CAFFEINAPURA Srls Unipersonale - All right reserved
Version: 1.0 - 2026-09-05
Author: Roberto Cheli

Estratto dal blocco <style> della maquette statica (identico su
tutte e 5 le pagine). Design tokens + utility classes comuni a
ogni pagina del tema caffeinapura.it: vive qui (non in common/)
perche non e condiviso con altri temi/tipi di sito — vedi
docs/css-reorganizzazione.md.
*/


:root{
    --ink:#1C1A16;
    --gold:#D8A428;
    --gold-deep:#B98A1E;
    --paper:#F6F1E7;
    --paper-2:#EFE7D4;
    --white:#FFFFFF;
    --gray:#6E6A5F;
}

* { font-family: 'Inter', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }

html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); }

/* --- Colore piatto, niente gradienti --- */
.bg-paper { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
.bg-ink { background: var(--ink); }
.bg-gold { background: var(--gold); }
.bg-white-flat { background: var(--white); }

.text-ink { color: var(--ink); }
.text-gold { color: var(--gold); }
.text-paper { color: var(--paper); }
.text-gray-flat { color: var(--gray); }

.border-ink { border: 2px solid var(--ink); }
.border-ink-t { border-top: 2px solid var(--ink); }
.border-ink-b { border-bottom: 2px solid var(--ink); }
.border-ink-3 { border: 3px solid var(--ink); }

/* --- Ombre "dure", nessuna sfumatura --- */
.shadow-hard { box-shadow: 7px 7px 0 0 var(--ink); }
.shadow-hard-sm { box-shadow: 4px 4px 0 0 var(--ink); }
.shadow-hard-gold { box-shadow: 7px 7px 0 0 var(--gold); }

.hard-btn { transition: transform .15s ease, box-shadow .15s ease; }
.hard-btn:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--ink); }

.card-hard { background: var(--paper); border: 2px solid var(--ink); box-shadow: 7px 7px 0 0 var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.card-hard:hover { transform: translate(-4px, -4px); box-shadow: 11px 11px 0 0 var(--ink); }

.card-hard-gold { background: var(--ink); border: 2px solid var(--ink); box-shadow: 7px 7px 0 0 var(--gold); }

/* --- Eyebrow / tag mono, niente pillole colorate --- */
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.eyebrow::before { content: "// "; color: var(--gold); }

.tag-mono {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 4px 10px;
    border: 1.5px solid var(--ink);
}
.tag-mono-gold { border-color: var(--gold); color: var(--gold-deep); }
.tag-mono-inverse { border-color: var(--paper); color: var(--paper); }

.big-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--gold); }

/* --- Nav --- */
.nav-link { position: relative; font-weight: 600; }
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0;
    width: 0; height: 3px;
    background: var(--gold);
    transition: width .2s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* --- Mini dashboard grafico (no stock photo) --- */
.fake-bar { background: var(--gold); }
.fake-bar-ink { background: var(--ink); }

input, select, textarea, button { border-radius: 2px; }

/* Offset per l'anchor scroll sotto la nav fissa */
section[id] { scroll-margin-top: 100px; }

/* --- Nessun rientro laterale su tablet/desktop: contenuti a piena
larghezza, come da richiesta originale. Da mobile (<768px) invece
NON si applica, cosi il padding normale (px-4/sm:px-6/lg:px-8)
resta attivo e i contenuti non toccano i bordi dello schermo. --- */
@media (min-width: 768px) {
    [class*="max-w-7xl"][class*="px-4"],
    [class*="max-w-5xl"][class*="px-4"],
    [class*="max-w-3xl"][class*="px-4"],
    [class*="max-w-2xl"][class*="px-4"],
    section[class*="px-4"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* Eccezione: il corpo testo lungo (articolo) mantiene un margine di lettura */
.reading-gutter {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* --- Niente ombre offset/doppie: solo bordo netto --- */
.shadow-hard, .shadow-hard-sm, .shadow-hard-gold { box-shadow: none; }
.card-hard { box-shadow: none; transition: transform .15s ease; }
.card-hard:hover { transform: translateY(-3px); box-shadow: none; }
.card-hard-gold { box-shadow: none; }
.hard-btn:hover { transform: translateY(2px); box-shadow: none; }

/* --- Processo: stesso trattamento per ogni step, nessuna evidenziazione --- */
.process-item { padding: 2rem; border-bottom: 2px solid var(--ink); }
@media (min-width: 768px) {
    .process-item { border-bottom: none; border-left: 2px solid var(--ink); }
    .process-item:first-child { border-left: none; }
}

/* --- Cookie banner: colori (il layout è in common/base.css, sempre caricato prima) --- */
.cb-banner { background: var(--paper); border-top: 2px solid var(--ink); box-shadow: 0 -4px 24px rgba(0,0,0,.14); }
.cb-banner-text { color: var(--ink); }
.cb-banner-text a { color: var(--gold-deep); font-weight: 700; text-decoration: underline; }

.btn { font-family: 'Inter', sans-serif; }
.btn-green { background: var(--ink); color: var(--paper) !important; }
.btn-green:hover { background: #000; }
.btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

.cb-modal-backdrop { background: rgba(28,26,22,.6); }
.cb-modal-dialog { background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 16px 56px rgba(0,0,0,.22); }
.cb-modal-title { color: var(--ink); }
.cb-modal-close { color: var(--gray); }
.cb-modal-close:hover { color: var(--ink); }
.cb-modal-text { color: var(--gray); }
.cb-check { border-top: 1px solid var(--paper-2); }
.cb-check-input { accent-color: var(--ink); }
.cb-check-label { color: var(--ink); }

.logo img {max-width:250px;}
@media (max-width: 640px) {
    .logo img {max-width:180px !important;}
}

/* --- Fallback padding orizzontale (2026-09-06) ---
   Il sito usa Tailwind via CDN (compilazione delle classi lato browser,
   in JS): se quello script non fa in tempo a girare, o non gira per
   niente, tutte le utility di Tailwind restano senza effetto — incluso
   il padding orizzontale, che su mobile lascia il contenuto attaccato
   ai bordi. Questo blocco replica ESATTAMENTE gli stessi valori che
   Tailwind genererebbe da solo per le classi già in uso in tutto il
   sito (px-4 / sm:px-6 / lg:px-8, agli stessi breakpoint 640px/1024px),
   in CSS puro: se Tailwind funziona non cambia nulla (stessi valori),
   se non funziona il padding c'è comunque. */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}

/* --- Tipografia corpo articolo blog (contenuto CMS raw) --- */
.art-content { font-size: 1.05rem; line-height: 1.8; color: var(--ink); }
.art-lead {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--gray);
    line-height: 1.6;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--ink);
}
.art-lead p { margin-bottom: 0; } /* se il CMS avvolge comunque l'abstract in un <p>, evita doppio spazio col wrapper */
.art-content h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em; margin: 2.5rem 0 1rem; line-height: 1.25; }
.art-content h3 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 .75rem; }
.art-content p { margin-bottom: 1.4rem; }
.art-content strong { font-weight: 700; }
.art-content a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.art-content a:hover { color: var(--ink); }
.art-content ul { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; }
.art-content ul li { position: relative; padding-left: 1.3rem; margin-bottom: .5rem; }
.art-content ul li::before { content: ''; position: absolute; left: 0; top: .75rem; width: 6px; height: 6px; background: var(--gold); }
.art-content ol { list-style: none; counter-reset: art-ol; margin: 1.2rem 0 1.6rem; padding: 0; }
.art-content ol li { counter-increment: art-ol; position: relative; padding-left: 2rem; margin-bottom: .5rem; }
.art-content ol li::before {
    content: counter(art-ol); position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; background: var(--ink); color: var(--paper);
    font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.art-content blockquote { margin: 2rem 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--gold); background: var(--paper-2); }
.art-content blockquote p { font-style: italic; margin-bottom: 0; }
.art-content table { width: 100%; border-collapse: collapse; margin: 2rem 0; border: 2px solid var(--ink); font-size: .92rem; }
.art-content th { background: var(--ink); color: var(--paper); text-align: left; padding: .75rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.art-content td { padding: .7rem 1rem; border-bottom: 1px solid var(--paper-2); }
.art-content img { border: 2px solid var(--ink); margin: 2rem 0; }

.art-content hr { border: none; border-top: 2px solid var(--ink); margin: 2.5rem 0; }
.art-content small { color: var(--gray); font-size: .82rem; line-height: 1.6; }

/* --- Pagina di contenuto a colonna singola (privacy/cookie policy) --- */
.doc-page { max-width: 820px; margin: 0 auto; }
.doc-page-header { padding-bottom: 2rem; margin-bottom: 2.5rem; border-bottom: 2px solid var(--ink); }
.doc-page-header h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin-top: .75rem; }