/* =====================================================
   TOPHOST SHOPIFY — CSS STANDALONE v2
   Fix completo per conflitti Divi/WordPress:
   tutti i colori testo critici hanno !important
   ===================================================== */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── VARIABILI COLORI ── */
:root {
    --sh:          #5a8a00;
    --sh-dark:     #3d5c00;
    --sh-light:    #edffd0;
    --sh-mid:      #b3e868;
    --tophost:     #FF6B35;
    --blue:        #0f4c81;
    --green:       #10b981;
    --yellow:      #f59e0b;
    --red:         #ef4444;
    --green-light: #dcfce7;
    --yellow-light:#fef3c7;
    --red-light:   #fee2e2;
    --text:        #1e293b;
    --text-light:  #64748b;
    --border:      #e2e8f0;
    --bg:          #f8fafc;
    --white:       #ffffff;
    --shadow:      0 4px 24px rgba(90,138,0,.10);
    --radius:      12px;
}

/* ── FIX ANNO ── */
.yr::after,
.current-year::after,
.current-year-inline::after {
    content: '' !important;
    display: none !important;
}

/* ── RESET BASE ── */
*, *::before, *::after { box-sizing: border-box; }

/* =====================================================
   TESTO — FORZA COLORE SCURO OVUNQUE (fix Divi)
   ===================================================== */

/* Paragrafi — il problema più comune in Divi */
.article-container p,
.cs p,
.box p,
.hcard p,
.rv p,
.rv .rtext,
.rv .verdict {
    color: #1e293b !important;
    font-family: 'Sora', sans-serif !important;
}

/* Liste */
.cs ul li,
.cl li,
.pros ul li,
.cons ul li,
.toc-col ul li,
.toc-col ul li a {
    color: #1e293b !important;
}

/* Headings dentro i componenti */
.cs h2 { color: #3d7a00 !important; }
.cs h3 { color: #1e293b !important; }
.cs h4 { color: #1e293b !important; }
.hcard h3 { color: inherit; }   /* override per-card sotto */
.hcard h4 { color: #1e293b !important; }
.box h4   { color: inherit; }   /* override per box-type sotto */

/* Testo nelle tabelle */
.ct td,
.ct th,
.spectrum .sp-cell { color: #1e293b !important; }
.ct thead th { color: #ffffff !important; }
.spectrum .sp-cell.hc { color: rgba(255,255,255,.9) !important; }

/* Testo nei box info */
.box p,
.box-ok p, .box-ok h4,
.box-wa p, .box-wa h4,
.box-er p, .box-er h4,
.box-th p, .box-th h4,
.box-bl p, .box-bl h4,
.box-sh p, .box-sh h4 {
    color: #1e293b !important;
}

/* Fix h4 colorati dei box */
.box-ok h4 { color: #065f46 !important; }
.box-wa h4 { color: #92400e !important; }
.box-er h4 { color: #991b1b !important; }
.box-th h4 { color: #cc4e1a !important; }
.box-bl h4 { color: #0f4c81 !important; }

/* Stats labels */
.stat-lab { color: #64748b !important; }

/* Small text */
.spectrum small { color: #64748b !important; }

/* =====================================================
   HEADER
   ===================================================== */
.article-header {
    color: white !important;
    padding: 48px 20px 56px;
    position: relative;
    overflow: hidden;
}
.header-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.article-header h1,
.article-header .article-title {
    font-family: 'DM Serif Display', Georgia, serif !important;
    font-size: clamp(24px, 4.5vw, 42px) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin: 0 0 20px 0 !important;
}
.article-header .article-subtitle {
    font-size: 15.5px !important;
    color: rgba(255,255,255,.9) !important;
    line-height: 1.7 !important;
    max-width: 780px;
    margin-bottom: 32px;
}
.article-header .article-subtitle strong {
    background: rgba(255,255,255,.2);
    padding: 2px 7px;
    border-radius: 4px;
    color: #ffffff !important;
}
.breadcrumb {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.breadcrumb a {
    color: rgba(255,255,255,.8) !important;
    text-decoration: none;
}
.breadcrumb span { color: rgba(255,255,255,.35) !important; }

.article-navigation { display: flex; gap: 10px; flex-wrap: wrap; }
.nav-link {
    background: rgba(255,255,255,.13);
    color: rgba(255,255,255,.9) !important;
    text-decoration: none !important;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,.22);
    transition: background .2s;
    display: inline-block;
}
.nav-link:hover { background: rgba(255,255,255,.28); }

/* =====================================================
   CONTAINER
   ===================================================== */
.article-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* =====================================================
   FEATURED IMAGE BANNER
   ===================================================== */
.featured-image {
    height: 200px;
    border-radius: 0 0 var(--radius) var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 36px;
    overflow: hidden;
}
.fi-text {
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    opacity: .85;
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* =====================================================
   CONTENT SECTIONS (.cs)
   ===================================================== */
.cs {
    background: #ffffff !important;
    border-radius: var(--radius);
    padding: 36px 40px;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.cs h2 {
    font-family: 'DM Serif Display', Georgia, serif !important;
    font-size: 26px !important;
    font-weight: 400 !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 16px;
    border-bottom: 2px solid #edffd0;
    color: #3d7a00 !important;
}
.cs h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 32px 0 14px 0;
}
.cs h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 24px 0 10px 0;
}
.cs p  { margin-bottom: 16px; }
.cs ul { padding-left: 20px; margin-bottom: 16px; }
.cs ul li { margin-bottom: 10px; line-height: 1.65; }

/* =====================================================
   INFO BOXES
   ===================================================== */
.box {
    border-radius: 8px;
    padding: 20px 24px;
    margin: 24px 0;
}
.box h4 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 15px !important;
}
.box p { margin-bottom: 0; font-size: 14.5px !important; line-height: 1.7 !important; }

.box-ok { background: #dcfce7 !important; border-left: 4px solid #10b981; }
.box-ok h4 { color: #065f46 !important; }
.box-ok p  { color: #134e2a !important; }

.box-wa { background: #fef3c7 !important; border-left: 4px solid #f59e0b; }
.box-wa h4 { color: #92400e !important; }
.box-wa p  { color: #78350f !important; }

.box-er { background: #fee2e2 !important; border-left: 4px solid #ef4444; }
.box-er h4 { color: #991b1b !important; }
.box-er p  { color: #7f1d1d !important; }

.box-th { background: #fff3ee !important; border-left: 4px solid #FF6B35; }
.box-th h4 { color: #cc4e1a !important; }
.box-th p  { color: #7c3010 !important; }

.box-bl { background: #dbeafe !important; border-left: 4px solid #0f4c81; }
.box-bl h4 { color: #0f4c81 !important; }
.box-bl p  { color: #1e3a5f !important; }

/* =====================================================
   STATS BOX
   ===================================================== */
.stats-box {
    border-radius: var(--radius);
    padding: 24px;
    margin: 24px 0;
    border: 1px solid #b3e868;
}
.stats-box h4 {
    text-align: center;
    margin: 0 0 20px 0;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #3d5c00 !important;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
}
.stat-item {
    background: #ffffff !important;
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.stat-num {
    display: block !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    margin-bottom: 6px;
    font-family: 'DM Serif Display', Georgia, serif !important;
}
.stat-lab {
    display: block !important;
    font-size: 11px !important;
    color: #64748b !important;
    font-weight: 500;
    line-height: 1.4;
}

/* =====================================================
   SPECTRUM TABLE
   ===================================================== */
.spectrum {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    margin: 24px 0;
}
.sp-row {
    display: grid;
    grid-template-columns: 2.5fr 1fr 2fr;
    border-bottom: 1px solid var(--border);
}
.sp-row:last-child { border-bottom: none; }
.sp-cell {
    padding: 13px 16px;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    color: #1e293b !important;
}
.sp-cell.hc {
    color: rgba(255,255,255,.9) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 11px 16px;
}
.sp-row.ok { background: #f0fdf4 !important; }
.sp-row.wn { background: #fefce8 !important; }
.sp-row.bd { background: #fff7f0 !important; }
.sp-type {
    font-weight: 700 !important;
    font-size: 13px !important;
    display: block;
    margin-bottom: 4px;
}
.sp-row.ok .sp-type { color: #166534 !important; }
.sp-row.wn .sp-type { color: #92400e !important; }
.sp-row.bd .sp-type { color: #9a3412 !important; }
.spectrum small { color: #64748b !important; font-size: 12px !important; }

.sbadge {
    display: inline-flex;
    align-items: center;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.sbadge.sg { background: #10b981 !important; color: #ffffff !important; }
.sbadge.sw { background: #f59e0b !important; color: #ffffff !important; }
.sbadge.sr { background: #ef4444 !important; color: #ffffff !important; }

/* =====================================================
   TABLE OF CONTENTS
   ===================================================== */
.toc {
    border-radius: var(--radius);
    padding: 28px 32px;
    margin: 28px 0;
    background: #edffd0 !important;
    border: 1px solid #b3e868;
}
.toc h3 {
    color: #3d5c00 !important;
    margin: 0 0 20px 0;
    font-size: 15px !important;
    font-weight: 700 !important;
}
.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}
.toc-col h4 {
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748b !important;
    margin: 0 0 10px 0;
    font-weight: 700 !important;
}
.toc-col ul { list-style: none !important; padding: 0 !important; margin: 0; }
.toc-col ul li { margin-bottom: 7px; }
.toc-col ul li a {
    color: #3d7a00 !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 500;
}
.toc-col ul li a:hover { text-decoration: underline !important; }

/* =====================================================
   PROS / CONS
   ===================================================== */
.pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}
.pros {
    background: #f8fafc !important;
    border-radius: 8px;
    padding: 18px 20px;
    border-top: 3px solid #10b981;
}
.cons {
    background: #f8fafc !important;
    border-radius: 8px;
    padding: 18px 20px;
    border-top: 3px solid #ef4444;
}
.pros h5 { color: #059669 !important; margin: 0 0 12px 0; font-size: 13.5px !important; font-weight: 700 !important; }
.cons h5 { color: #dc2626 !important; margin: 0 0 12px 0; font-size: 13.5px !important; font-weight: 700 !important; }
.pros ul, .cons ul { list-style: none !important; padding: 0 !important; margin: 0; }
.pros ul li, .cons ul li {
    font-size: 13.5px !important;
    padding: 5px 0 5px 22px !important;
    position: relative;
    line-height: 1.55;
    color: #1e293b !important;
}
.pros ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981 !important;
    font-weight: 700;
}
.cons ul li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: #ef4444 !important;
    font-weight: 700;
}

/* =====================================================
   CODE BLOCK
   ===================================================== */
.code-block {
    background: #0a2030 !important;
    color: #cbd5e1 !important;
    border-radius: 8px;
    padding: 18px 22px;
    font-family: 'Courier New', monospace !important;
    font-size: 13px !important;
    line-height: 1.8;
    margin: 20px 0;
    overflow-x: auto;
    border: 1px solid rgba(90,138,0,.2);
}
.code-block .cm  { color: #3a6070 !important; }
.code-block .ck  { color: #7dd3f5 !important; }
.code-block .cv  { color: #f59e0b !important; }
.code-block .cc  { color: #86efac !important; }
.code-block .cs2 { color: #a5f3a0 !important; }

/* =====================================================
   BUTTONS
   ===================================================== */
.cta-group { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 13px 24px;
    border-radius: 8px;
    font-weight: 700 !important;
    font-size: 14px;
    transition: all .2s;
    cursor: pointer;
}
.btn-sg   { background: #00843d !important; box-shadow: 0 4px 14px rgba(0,132,61,.28); }
.btn-blue { background: #0f4c81 !important; box-shadow: 0 4px 14px rgba(15,76,129,.22); }
.btn-or   { background: #FF6B35 !important; box-shadow: 0 4px 14px rgba(255,107,53,.25); }
.btn-sg:hover, .btn-blue:hover, .btn-or:hover { transform: translateY(-2px); }
.btn-sec {
    background: #ffffff !important;
    color: #5a8a00 !important;
    border: 2px solid #5a8a00 !important;
    box-shadow: none !important;
}
.btn-sec:hover { background: #edffd0 !important; }

/* Badge */
.bdg {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 12px;
}
.bdg-g { background: #10b981 !important; color: #ffffff !important; }
.bdg-b { background: #0f4c81 !important; color: #ffffff !important; }
.bdg-o { background: #FF6B35 !important; color: #ffffff !important; }

/* =====================================================
   HOSTING CARDS
   ===================================================== */
.hcards { display: flex; flex-direction: column; gap: 24px; margin: 24px 0; }
.hcard {
    border: 2px solid #e2e8f0;
    border-radius: var(--radius);
    padding: 28px 32px;
    background: #ffffff !important;
    transition: box-shadow .2s;
}
.hcard:hover { box-shadow: 0 8px 32px rgba(0,0,0,.10); }

.hcard.sg {
    border-color: #10b981 !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
}
.hcard.sg h3 { color: #065f46 !important; }
.hcard.sg p  { color: #1e293b !important; }
.hcard.sg .cl li { color: #1e293b !important; }
.hcard.sg .cl li strong { color: #0f3d28 !important; }

.hcard.sp { border-color: #0f4c81 !important; }
.hcard.sp h3 { color: #0f4c81 !important; }
.hcard.sp p  { color: #1e293b !important; }
.hcard.sp .cl li { color: #1e293b !important; }
.hcard.sp .cl li strong { color: #0a3060 !important; }

.hcard.vh { border-color: #FF6B35 !important; }
.hcard.vh h3 { color: #cc4e1a !important; }
.hcard.vh p  { color: #1e293b !important; }
.hcard.vh .cl li { color: #1e293b !important; }
.hcard.vh .cl li strong { color: #8b3010 !important; }

.hcard h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0;
    font-family: 'DM Serif Display', Georgia, serif !important;
}
.hcard h4 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    margin: 20px 0 10px 0;
    color: #1e293b !important;
}
.hcard p { font-size: 14.5px !important; line-height: 1.7 !important; }

/* Prezzo */
.price {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f4c81 !important;
    margin: 8px 0 16px 0;
    font-family: 'DM Serif Display', Georgia, serif !important;
}
.price span {
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
}

/* Checklist */
.cl { list-style: none !important; padding: 0 !important; }
.cl li {
    padding: 10px 0 10px 30px !important;
    position: relative;
    border-bottom: 1px solid #f1f5f9;
    color: #1e293b !important;
    font-size: 14px !important;
    line-height: 1.6;
}
.cl li:last-child { border-bottom: none; }
.cl li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981 !important;
    font-weight: 800;
    font-size: 15px;
    top: 11px;
}

/* =====================================================
   REVIEWS
   ===================================================== */
.rc { display: flex; flex-direction: column; gap: 20px; }
.rv {
    background: #ffffff !important;
    border-radius: var(--radius);
    padding: 24px 28px;
    border-left: 4px solid #5a8a00;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.rv.neutral { border-left-color: #f59e0b !important; }
.rv.neg     { border-left-color: #ef4444 !important; }
.rv h4 { font-size: 15px !important; font-weight: 700 !important; margin: 0 0 4px 0; color: #1e293b !important; }
.rv .rating { font-size: 13px !important; color: #64748b !important; margin-bottom: 12px; }
.rv .rtext {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin-bottom: 14px;
    font-style: italic;
    color: #334155 !important;
}
.rv .verdict { font-size: 13.5px !important; font-weight: 600 !important; }

/* =====================================================
   COMPARISON TABLE
   ===================================================== */
.ct {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 13.5px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.ct thead tr { background: #5a8a00 !important; }
.ct th {
    padding: 13px 14px;
    text-align: left;
    font-weight: 600 !important;
    font-size: 12px;
    letter-spacing: .3px;
    color: #ffffff !important;
}
.ct td {
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
    color: #1e293b !important;
}
.ct tbody tr:nth-child(even) { background: #f8fafc !important; }
.ct tbody tr:hover           { background: #edffd0 !important; }
.ct tbody tr:last-child td   { border-bottom: none; }
.tg { color: #10b981 !important; font-weight: 600 !important; }
.tw { color: #92400e !important; }
.tb { color: #dc2626 !important; }

/* =====================================================
   CTA FINALE
   ===================================================== */
.cta-f {
    border-radius: var(--radius);
    padding: 48px 40px;
    text-align: center;
    margin-bottom: 28px;
}
.cta-f h2 {
    font-family: 'DM Serif Display', Georgia, serif !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    margin: 0 0 16px 0 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    background: none !important;
}
.cta-f p {
    font-size: 16px !important;
    max-width: 600px;
    margin: 0 auto 32px;
    color: rgba(255,255,255,.9) !important;
    line-height: 1.65;
}
.cta-f-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cf-sg {
    background: #00843d !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700 !important;
    font-size: 14px;
    transition: all .2s;
    display: inline-block;
}
.cf-sg:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,132,61,.45); }
.cf-out {
    background: transparent !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700 !important;
    font-size: 14px;
    border: 2px solid rgba(255,255,255,.45);
    transition: all .2s;
    display: inline-block;
}
.cf-out:hover { background: rgba(255,255,255,.15) !important; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
    .cs         { padding: 22px 16px; }
    .cta-f      { padding: 32px 18px; }
    .cta-f h2   { font-size: 24px !important; }
    .hcard      { padding: 20px 16px; }
    .pros-cons  { grid-template-columns: 1fr; }
    .toc-grid   { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .sp-row     { grid-template-columns: 1fr; }
    .sp-cell.hc { display: none; }
    .cta-group  { flex-direction: column; }
    .cta-f-btns { flex-direction: column; align-items: center; }
    .btn        { justify-content: center; text-align: center; }
    .ct         { font-size: 12px; }
    .ct th, .ct td { padding: 9px 10px; }
}