/*
 * Stili aggiuntivi delle guide (assets/css/pages/guide.css).
 * Si include solo nelle guide che usano questi componenti: tabelle,
 * box "Cosa fare subito", CTA finale e elenco delle fonti.
 * Riusa le variabili di main.css; non cambia l'aspetto delle guide che non lo includono.
 */

/* Testo solo per lettori di schermo (didascalie delle tabelle) */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visibile per chi naviga da tastiera */
.guide-content a:focus-visible,
.guide-content summary:focus-visible {
    outline: 3px solid var(--accent-hover);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Contrasto WCAG AA: titoli H2 e link dell'indice in azzurro scuro (#0369a1, 5.9:1 su bianco)
   al posto di --primary (#0ea5e9, 2.8:1). Vale solo nelle guide che includono questo file. */
.guide-content h2 {
    color: #0369a1;
}

.guide-content .guide-toc a,
.guide-content .guide-toc a:visited {
    color: #0369a1 !important;
}

/* Ancore: il titolo non finisce sotto la barra di navigazione fissa */
.guide-content [id] {
    scroll-margin-top: 90px;
}

/* Box "Cosa fare subito": stesso alert-info del sito, piu' vicino al lead */
.guide-content .guide-azioni {
    margin-top: 10px;
    margin-bottom: 30px;
}

.guide-content .guide-azioni h2.hn-era-h3 {
    color: var(--dark);
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 1.3rem;
}

.guide-content .guide-azioni ol {
    margin-bottom: 0;
    padding-left: 22px;
}

.guide-content .guide-azioni li {
    margin-bottom: 8px;
    color: var(--dark);
}

/* Indice richiudibile subito dopo il box (niente JavaScript) */
.guide-content .guide-indice {
    margin: 0 0 20px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}

.guide-content .guide-indice summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 700;
    color: var(--dark);
    list-style-position: inside;
}

.guide-content .guide-indice[open] summary {
    border-bottom: 1px solid #e2e8f0;
}

.guide-content .guide-indice .guide-toc {
    margin: 0;
    border: none;
    box-shadow: none;
}

/* Tabelle */
.guide-table-wrap {
    margin: 20px 0 25px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.98rem;
    line-height: 1.5;
    color: #334155;
}

.guide-table th,
.guide-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #e2e8f0;
}

.guide-table thead th {
    background: var(--light-bg);
    color: var(--dark);
    font-weight: 700;
    border-bottom: 2px solid #cbd5e1;
}

.guide-table tbody tr:nth-child(even) {
    background: #fbfdff;
}

.guide-table a {
    color: var(--accent-hover);
    font-weight: 600;
}

/* Su smartphone ogni riga diventa una scheda: niente scorrimento orizzontale */
@media (max-width: 640px) {
    .guide-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .guide-table,
    .guide-table tbody,
    .guide-table tr,
    .guide-table td {
        display: block;
        width: 100%;
    }

    .guide-table tr {
        margin-bottom: 14px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }

    .guide-table tbody tr:nth-child(even) {
        background: #fff;
    }

    .guide-table td {
        border-bottom: 1px solid #eef2f6;
        padding: 10px 12px;
    }

    .guide-table td:last-child {
        border-bottom: none;
    }

    .guide-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #64748b;
        margin-bottom: 2px;
    }

    .guide-table td:first-child {
        background: var(--light-bg);
        color: var(--dark);
        font-weight: 600;
    }
}

/* CTA finale: riusa .cta-box, allineata a sinistra dentro l'articolo */
.guide-content .guide-cta {
    text-align: left;
    margin: 40px 0;
    box-shadow: none;
    border-left: 5px solid var(--accent);
}

.guide-content .guide-cta h2.hn-era-h3 {
    color: var(--dark);
    margin-top: 0;
    font-size: 1.35rem;
}

.guide-content .guide-cta .guide-cta-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0;
}

.guide-content .guide-cta .guide-cta-azioni .btn-primary {
    color: #fff;
    /* indigo del marchio piu' scuro: 7.9:1 con il testo bianco (l'indigo standard e' 4.47:1) */
    background: var(--accent-hover);
}

.guide-content .guide-cta .guide-cta-azioni .btn-primary:hover {
    background: #3730a3;
}

.guide-content .guide-cta .guide-btn-outline {
    background: #fff;
    color: var(--accent-hover);
    border: 2px solid var(--accent-hover);
    box-shadow: none;
}

.guide-content .guide-cta .guide-btn-outline:hover {
    background: #eef2ff;
}

.guide-content .guide-cta .guide-cta-firma {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .guide-content .guide-cta {
        padding: 18px 16px;
    }

    .guide-content .guide-cta .guide-cta-azioni .btn {
        width: 100%;
    }
}

/* Fonti */
.guide-content .guide-fonti li {
    margin-bottom: 6px;
    font-size: 0.98rem;
    overflow-wrap: anywhere;
}

.guide-content .guide-fonti-nota {
    font-size: 0.95rem;
    color: #64748b;
}

/* Prodotti in vendita citati in una guida (es. monitor MSI nella guida monitor) */
.guide-content .guide-prodotti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
    margin: 20px 0 25px;
}

.guide-content .guide-prodotto {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    padding: 18px;
}

.guide-content .guide-prodotto img {
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
    margin-bottom: 14px;
}

.guide-content .guide-prodotto h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.15rem;
}

.guide-content .guide-prodotto ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.guide-content .guide-prodotto li {
    margin-bottom: 4px;
}