/* =====================================================================
   Skin "Four-Color" (vista pulp da edicola). TUTTO scoped sotto
   html[data-skin="fourcolor"]: ribalta il tema su CARTA chiara con retino
   Ben-Day, colori primari (rosso/ciano/giallo), keyline nere e display
   pesante. Non tocca la Classica ne' Longbox.
   ===================================================================== */

html[data-skin="fourcolor"] {
    --bg: #f3ead4;         /* carta */
    --panel: #fbf5e4;
    --panel-2: #efe5cc;
    --text: #181410;       /* inchiostro */
    --muted: #6d6455;
    --accent: #e02a24;     /* rosso */
    --accent-2: #0f97c4;   /* ciano */
    --read: #1a8a4a;
    --border: #181410;     /* keyline nere */
    --fc-yellow: #f6c025;
    --fc-disp: "Arial Black", Impact, sans-serif;
}

/* --- Sfondo: carta + retino a puntini rosso/ciano --- */
html[data-skin="fourcolor"] body {
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(rgba(224, 42, 36, .16) 1.2px, transparent 1.6px),
        radial-gradient(rgba(15, 151, 196, .14) 1.2px, transparent 1.6px);
    background-size: 12px 12px, 12px 12px;
    background-position: 0 0, 6px 6px;
    background-attachment: fixed;
}

/* --- Topbar: masthead inchiostro, bordo rosso spesso, marchio giallo --- */
html[data-skin="fourcolor"] .topbar {
    background-color: #181410;
    background-image: none;
    border-bottom: 5px solid var(--accent);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}
html[data-skin="fourcolor"] .marvel-mark {
    font-family: var(--fc-disp);
    font-weight: 900; letter-spacing: .02em; text-transform: uppercase;
    color: #f3ead4; -webkit-text-stroke: 0; text-shadow: none; background: none;
}
html[data-skin="fourcolor"] .brand-sub { color: var(--fc-yellow); font-weight: 800; }
/* Nuovo marchio e menu utente sul masthead scuro: testo chiaro (col vecchio
   .marvel-mark non c'entrano piu', ora il brand e' .brand-name). */
html[data-skin="fourcolor"] .brand-name { color: #f3ead4; }
html[data-skin="fourcolor"] .user-badge { color: #f3ead4; background: rgba(255, 255, 255, .06);
    border-color: rgba(243, 234, 212, .4); }
html[data-skin="fourcolor"] .nav-more-sum { color: #f3ead4; }
html[data-skin="fourcolor"] #site-nav a {
    color: #f3ead4; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
}
html[data-skin="fourcolor"] #site-nav a.active,
html[data-skin="fourcolor"] #site-nav a:hover { color: var(--fc-yellow); }

/* Selettore vista sul masthead scuro: in questa skin --text e' inchiostro
   scuro, ma la topbar e' scura, quindi il testo del select va tenuto chiaro. */
html[data-skin="fourcolor"] .skin-select { border-color: rgba(243, 234, 212, .4); background: rgba(255, 255, 255, .06); }
html[data-skin="fourcolor"] .skin-select select { color: #f3ead4; }
html[data-skin="fourcolor"] .skin-select-ic { color: #d8cfb8; }

/* --- Titoli: pesanti ma leggibili, con una keyline nera pulita (niente doppia
   ombra rosso/ciano, che rendeva il testo confuso e faticoso da leggere). --- */
html[data-skin="fourcolor"] .hero-title {
    font-family: "Arial Black", Impact, sans-serif; font-weight: 700; text-transform: uppercase;
    color: var(--text); letter-spacing: .01em;
    text-shadow: none;
}
html[data-skin="fourcolor"] .hero-title .hl { color: var(--text); }
html[data-skin="fourcolor"] .section-title,
html[data-skin="fourcolor"] .page-title {
    font-family: var(--fc-disp); font-weight: 900; text-transform: uppercase; letter-spacing: .01em;
}
html[data-skin="fourcolor"] .hero-kicker {
    display: inline-block; background: var(--fc-yellow); color: #181410;
    border: 2px solid #181410; box-shadow: 3px 3px 0 #181410; transform: rotate(-2deg);
    text-transform: uppercase; font-weight: 900; letter-spacing: .04em; padding: 5px 12px;
}
html[data-skin="fourcolor"] .hero-desc { color: var(--text); font-weight: 500; }
html[data-skin="fourcolor"] .hero-desc strong { color: var(--accent); }

/* Il pannello hero del tema base parte da un grigio scuro fisso (#20232c):
   su carta stona e rende illeggibile il testo. Qui e' carta con keyline nera,
   e la decorazione a puntini/linee (pensata per lo scuro) va quasi spenta. */
html[data-skin="fourcolor"] .home-hero {
    background: var(--panel);
    border: 3px solid #181410;
    box-shadow: 5px 5px 0 #181410;
}
html[data-skin="fourcolor"] .home-hero::before { opacity: .08; }

/* --- Ricerche: campi bianchi con keyline nera e ombra piena --- */
html[data-skin="fourcolor"] .home-searches { background: transparent; border: none; padding: 0; box-shadow: none; backdrop-filter: none; }
html[data-skin="fourcolor"] .home-search .search,
html[data-skin="fourcolor"] .filters .search {
    background: #fff; border: 3px solid #181410; border-radius: 0;
    box-shadow: 4px 4px 0 #181410; color: #181410;
}
html[data-skin="fourcolor"] .home-search .search:focus,
html[data-skin="fourcolor"] .filters .search:focus { border-color: var(--accent); }
html[data-skin="fourcolor"] .search-label { color: var(--accent); font-weight: 900; text-transform: uppercase; }

/* --- CTA a blocchi con ombra piena --- */
html[data-skin="fourcolor"] .cta {
    border: 3px solid #181410; border-radius: 0; box-shadow: 4px 4px 0 #181410;
    background: #fff; color: #181410; font-weight: 900; text-transform: uppercase;
}
html[data-skin="fourcolor"] .cta:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #181410; filter: none; }
html[data-skin="fourcolor"] .cta-primary { background: var(--accent); color: #fff; }

/* --- Card come albi in edicola: keyline nere, ombra piena, niente rounding --- */
html[data-skin="fourcolor"] .vol-card {
    background: var(--panel); border: 3px solid #181410; border-radius: 0;
    box-shadow: 4px 4px 0 #181410; transition: transform .12s ease, box-shadow .12s ease;
}
html[data-skin="fourcolor"] .vol-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #181410; }
/* Nome volume: NON il display compresso (illeggibile sui nomi lunghi), ma un
   bold di lettura in caso alto/basso. Il look pulp resta nei titoloni. */
html[data-skin="fourcolor"] .vol-name { font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: 700; text-transform: none; letter-spacing: 0; }
html[data-skin="fourcolor"] .vol-sub,
html[data-skin="fourcolor"] .vol-title { color: var(--muted); }

/* --- Riprendi / stat / feature card --- */
html[data-skin="fourcolor"] .resume-box {
    background: var(--fc-yellow); border: 3px solid #181410; border-radius: 0;
    box-shadow: 4px 4px 0 #181410; color: #181410;
}
html[data-skin="fourcolor"] .resume-kicker { color: var(--accent); }
html[data-skin="fourcolor"] .resume-label { color: #181410; }
html[data-skin="fourcolor"] .stat,
html[data-skin="fourcolor"] .feature-card {
    background: var(--panel); border: 3px solid #181410; border-radius: 0; box-shadow: 3px 3px 0 #181410;
}
html[data-skin="fourcolor"] .stat-num { color: var(--accent); font-family: var(--fc-disp); }

/* --- Suggerimenti / testo generico su carta --- */
html[data-skin="fourcolor"] .suggest-box { background: #fff; border: 3px solid #181410; border-radius: 0; }
html[data-skin="fourcolor"] .suggest-item { border-bottom: 1px solid rgba(24, 20, 16, .15); }
html[data-skin="fourcolor"] .suggest-item.active,
html[data-skin="fourcolor"] .suggest-item:hover { background: var(--fc-yellow); }
html[data-skin="fourcolor"] .count,
html[data-skin="fourcolor"] .section-intro { color: var(--muted); }
html[data-skin="fourcolor"] .back { color: var(--muted); }
html[data-skin="fourcolor"] .back:hover { color: var(--accent); }

/* Decorazione laterale piu' tenue su carta */
html[data-skin="fourcolor"] .deco { opacity: .5; }