/* MiHakero Public CSS */

/* Root Variables (i token di brand/palette vivono in tokens.css, caricato prima) */
:root {
    --bs-success: #198754;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-secondary: #6c757d;
    --bs-dark: #212529;

    --font-family-sans-serif: var(--mihakero-font-body);
    --transition-base: all 0.15s ease-in-out;

    /* Altezza reale della .site-navbar (sticky-top): usata sia per l'offset
       della sidebar sticky sia per lo scroll-margin delle sezioni con ancora
       (es. #faq), così le due cose restano sempre coerenti tra loro. */
    --site-navbar-height: 77px;
}

@media (min-width: 992px) {
    :root {
        --site-navbar-height: 86px;
    }
}

/* Base Typography */
body {
    font-family: var(--font-family-sans-serif);
    line-height: 1.6;
    color: var(--mihakero-ink);
    background-color: var(--mihakero-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mihakero-font-heading);
    font-weight: 700;
    line-height: 1.2;
}

h1 { font-size: 2.75rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.375rem; font-weight: 500; }
small, .small { font-size: 0.8125rem; font-weight: 500; }

.display-4, .display-5, .display-6 {
    font-family: var(--mihakero-font-heading);
    font-weight: 700;
}

.text-muted {
    color: var(--mihakero-ink-muted) !important;
}

/* Contenuti tecnici (id scan, hash, badge severità) — MAI su titoli/testo discorsivo */
.font-mono {
    font-family: var(--mihakero-font-mono);
}

/* Bordo sinistro colorato per card di severità (report/scan) */
.severity-critical, .severity-high { border-left: 3px solid var(--mihakero-severity-critical); }
.severity-medium { border-left: 3px solid var(--mihakero-severity-medium); }
.severity-low { border-left: 3px solid var(--mihakero-severity-low); }

/* Testo/sfondo tenue per badge ed header raggruppati per severità (report condiviso) */
.severity-text-critical { color: var(--mihakero-severity-critical) !important; }
/* --mihakero-severity-medium (#B8862E) su sfondo chiaro è sotto soglia WCAG AA
   (3.18:1 su superficie bianca, 2.88:1 sul proprio .severity-bg-medium — serve
   4.5:1 per testo normale): usiamo qui la variante -ink, già nel design system
   e pensata proprio per restare leggibile su sfondi chiari (6.24:1/5.65:1). */
.severity-text-medium { color: var(--mihakero-severity-medium-ink) !important; }
.severity-text-low { color: var(--mihakero-severity-low) !important; }
.severity-bg-critical { background-color: rgba(184, 10, 16, .1); }
.severity-bg-medium { background-color: rgba(184, 134, 46, .1); }
.severity-bg-low { background-color: rgba(92, 88, 80, .1); }

/* Eccezione: il chip di riepilogo nell'hero del report (report-hero.php) sta
   sempre su sfondo scuro (--mihakero-ink, vedi .severity-bg-medium lì sopra
   composto sull'inchiostro), dove la variante -ink perderebbe contrasto
   (2.28:1) invece di guadagnarlo. Lì resta il tono chiaro originale, che su
   quello sfondo è già a norma (4.46:1). */
.report-hero-chip.severity-text-medium { color: var(--mihakero-severity-medium) !important; }

/* Card di riepilogo severità cliccabili (report/partials/report-findings.php):
   scrollano alla sezione corrispondente, affordance hover minima */
.report-summary-card:hover { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }


/* Sezioni "raggruppa per modulo" della lista finding
   (report/partials/report-findings.php): un'intestazione collassabile per
   modulo (Security Headers/Shodan/Netlas/AlienVault OTX/SSL-TLS/OWASP ZAP)
   con conteggio, per rendere scansionabile la lista quando un modulo produce
   molti finding (es. Shodan con molte porte). Stesso pattern chevron delle
   card finding singole sotto. */
.module-section-header {
    background: var(--mihakero-bg-alt);
    border: 1px solid var(--mihakero-border);
    border-radius: .5rem;
    padding: .6rem 1rem;
    color: var(--mihakero-ink);
}
@media (max-width: 575.98px) {
    .module-section-header {
        padding: .85rem 1rem;
    }
}
.module-section-header .module-section-chevron {
    transition: transform .15s ease;
}
.module-section-header.collapsed .module-section-chevron {
    transform: rotate(-90deg);
}
.module-section-header[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.module-section > .collapse.show,
.module-section > .collapsing {
    border: 1px solid var(--mihakero-border);
    border-top: none;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    padding: .75rem .75rem 0;
}

/* Gauge SVG del grado nell'header report (report/partials/report-hero.php):
   sostituisce il badge testuale piatto, stesso tono critical/medium/neutro
   di prima (nessun colore fuori palette v2). */
.report-gauge { overflow: visible; }

/* Riepilogo/filtro per severità (report/partials/report-findings.php): le
   card cliccabili filtrano la lista dei finding sotto invece di solo
   scrollare (vedi report-view.js). Stato attivo segnalato da aria-pressed,
   mai solo dal colore. */
.severity-filter-btn { cursor: pointer; }
.severity-filter-btn[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--mihakero-primary) inset;
}

/* Card finding singola espandibile (report/partials/report-findings.php):
   sostituisce l'accordion unico per severità. Header = <button> a tutta
   larghezza (focus/tastiera nativi), overflow:hidden sulla card per
   mantenere gli angoli arrotondati anche col header colorato a piena
   larghezza. Il chevron ruota in base alla classe "collapsed" che
   Bootstrap aggiunge/rimuove da solo sul trigger. */
.finding-card { overflow: hidden; }
.finding-card-header {
    background: none;
    border: none;
    padding: .5rem .75rem;
    text-align: left;
    color: var(--mihakero-ink);
}
@media (max-width: 575.98px) {
    .finding-card-header {
        padding: .875rem .75rem;
    }
}
.finding-card-header .finding-card-chevron {
    transition: transform .15s ease;
}
.finding-card-header.collapsed .finding-card-chevron {
    transform: rotate(-90deg);
}

/* Mappa mondo (report/partials/report-findings.php): geometria pura in
   world-map.svg (nessun colore hardcoded nel file), stile solo da qui —
   beige/inchiostro neutro per tutti i paesi, il paese del server nell'unico
   rosso di accento v2 (evidenziato via <style> scoped generato dal partial).
   Mai mostrata con un default: se il paese non è determinabile è omessa a
   monte, non solo nascosta qui. */
.report-worldmap {
    max-width: 220px;
    margin-inline: auto;
}
.report-worldmap svg {
    width: 100%;
    height: auto;
    display: block;
}
.report-worldmap .landxx,
.report-worldmap .coastxx,
.report-worldmap .limitxx,
.report-worldmap .antxx {
    fill: var(--mihakero-border);
    stroke: var(--mihakero-bg-alt);
    stroke-width: .5;
}
.report-worldmap .circlexx,
.report-worldmap .subxx,
.report-worldmap .noxx,
.report-worldmap .unxx {
    opacity: 0;
    fill: var(--mihakero-border);
    stroke: var(--mihakero-ink-muted);
}
.report-worldmap .oceanxx {
    fill: var(--mihakero-bg-alt);
    stroke: none;
}

/* Header pubblico: sfondo beige (non bianco puro) — il logo ha sfondo nativo beige
   identico, quindi si integra senza riquadro visibile */
.site-navbar {
    background-color: var(--mihakero-bg) !important;
    border-bottom: 1px solid var(--mihakero-border);
    min-height: var(--site-navbar-height);
}

/* Sidebar sticky della pagina Contatti (es. box "Informazioni di Contatto"):
   l'offset deve tenere conto dell'altezza della .site-navbar, anch'essa
   sticky-top, altrimenti durante lo scroll la sidebar finisce sotto/sopra
   la navbar sovrapponendosi invece di affiancarla. */
.contact-sidebar-sticky {
    position: sticky;
    top: calc(var(--site-navbar-height) + 1rem);
}

/* Sidebar dell'articolo blog: sticky SOLO da lg in su, e solo se l'intera
   sidebar sta nel viewport. La classe .is-sticky la aggiunge blog-toc.js dopo
   aver misurato l'altezza: una sidebar sticky più alta del viewport non si
   può vedere per intero senza una barra di scroll interna, e con solo alcuni
   blocchi sticky le card successive si sovrappongono. Senza JS (o se non
   sta) la sidebar scorre normalmente con la pagina. */
@media (min-width: 992px) {
    .blog-sticky-block.is-sticky {
        position: sticky;
        top: calc(var(--site-navbar-height) + 1rem);
    }
}

/* Scroll-spy dell'indice contenuti (JS in blog-toc.js): stato attivo */
#blog-toc-list a.active {
    color: var(--mihakero-primary);
    font-weight: 600;
}

.navbar-logo {
    height: 34px;
    width: auto;
    display: block;
}

@media (min-width: 992px) {
    /* Logo ~25% più grande su desktop (navbar-expand-lg): la versione mobile
       resta a 34px, già dimensionata correttamente. */
    .navbar-logo {
        height: 43px;
    }

    /* Spaziatura tra i pulsanti "Accedi" e "Prova Gratis", visibili in riga
       solo da lg in su (sotto lg sono impilati a piena larghezza). */
    .navbar-nav .btn[href="/register"] {
        margin-left: .875rem;
    }
}

/* Ancore verso sezioni con id (es. /contact#faq dal redirect di /faq): senza
   questo, la .site-navbar sticky-top copre l'inizio della sezione dopo il
   salto. */
#faq {
    scroll-margin-top: var(--site-navbar-height);
}

/* Hero Sections */
.hero-section {
    position: relative;
    /* z-index:0 (non "auto") fa sì che .hero-section stabilisca il proprio
       stacking context: necessario perché .hero-radar (figlio con
       z-index:-1, vedi sotto) resti dietro SOLO al contenuto di questa
       sezione (testo, emblema) invece di essere risolto rispetto a un
       antenato più esterno e finire dietro allo sfondo dell'intera pagina. */
    z-index: 0;
    overflow: hidden;
}

/* Motivo "linee a circuito": derivato dall'anello del logo — linee sottili (1px)
   con piccoli nodi circolari, texture di sfondo molto tenue. Mai satura di rosso:
   il punto rosso isolato è un motivo a sé (marcatore singolo), non va ripetuto in griglia. */
.hero-circuit {
    background-color: var(--mihakero-bg);
    background-image:
        repeating-linear-gradient(0deg, rgba(31, 31, 29, 0.05) 0, rgba(31, 31, 29, 0.05) 1px, transparent 1px, transparent 56px),
        repeating-linear-gradient(90deg, rgba(31, 31, 29, 0.05) 0, rgba(31, 31, 29, 0.05) 1px, transparent 1px, transparent 56px),
        radial-gradient(circle, rgba(31, 31, 29, 0.10) 1.5px, transparent 1.6px);
    background-size: 56px 56px, 56px 56px, 56px 56px;
    background-position: 0 0, 0 0, 28px 28px;
}

@media (max-width: 768px) {
    .hero-circuit {
        background-image: none;
    }
}

.min-vh-75 {
    min-height: 75vh;
}

/* Emblema decorativo per la hero mobile (nascosto da lg in su, dove l'emblema
   vive già nella colonna col-lg-5): watermark a bassa opacità dietro al testo,
   non occupa spazio nel flusso quindi non allunga lo scroll. */
.hero-emblem-mobile {
    position: absolute;
    top: -8px;
    right: -10vw;
    width: 62vw;
    max-width: 260px;
    height: auto;
    opacity: 0.14;
    z-index: 0;
    pointer-events: none;
    animation: hero-emblem-fade-in 0.9s ease-out both,
               hero-emblem-float 3.8s ease-in-out 0.9s infinite;
}

.hero-text {
    position: relative;
    z-index: 1;
}

@keyframes hero-emblem-fade-in {
    from { opacity: 0; }
    to { opacity: 0.14; }
}

@keyframes hero-emblem-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Sezioni pubbliche alternate: beige primario / beige chiaro, mai bianco puro */
.section-alt {
    background-color: var(--mihakero-bg-alt);
}

/* Pannello "circuito" (about.php, sezione mission): sostituisce una foto stock
   con lo stesso motivo grafico dell'hero (linee sottili + nodi, vedi .hero-circuit)
   più un crest centrale, così l'identità visiva resta coerente col brand invece
   di un'immagine generica scollegata. Nessun colore hardcoded: solo token v2. */
.mission-graphic {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 360px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mihakero-border);
    border-radius: var(--mihakero-radius-card);
    background-color: var(--mihakero-bg);
    overflow: hidden;
}

.mission-graphic-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mission-graphic-lines line,
.mission-graphic-lines circle:not(.mission-graphic-node) {
    fill: none;
    stroke: var(--mihakero-ink);
    stroke-width: 1;
    opacity: 0.12;
}

.mission-graphic-node {
    fill: var(--mihakero-ink);
    opacity: 0.2;
}

.mission-graphic-core {
    position: relative;
    width: 96px;
    height: 96px;
    border: 1.5px solid var(--mihakero-primary);
    border-radius: 50%;
    background: var(--mihakero-surface);
    color: var(--mihakero-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: var(--mihakero-shadow-card);
}

/* Radar-sweep (templates/partials/hero-radar.php): accento decorativo dietro
   il contenuto degli hero pubblici (home, features). Stesso
   linguaggio di .hero-circuit (linee sottili + nodi). z-index negativo:
   l'SVG è figlio diretto di .hero-section (positioned, quindi stacking
   context) e un z-index:-1 lo dipinge subito sopra lo sfondo della sezione
   ma sotto TUTTO il contenuto in-flow (testo, emblema), niente da coordinare
   col loro markup. Un solo punto rosso isolato, mai ripetuto in griglia
   (vedi "punto rosso isolato" in DESIGN_SYSTEM.md). Spento su mobile come
   .hero-circuit, stesso motivo (texture pesante su schermi piccoli). */
.hero-radar {
    position: absolute;
    top: 50%;
    right: -4%;
    z-index: -1;
    width: min(50vw, 560px);
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
}

.hero-radar-ring,
.hero-radar-line {
    fill: none;
    stroke: var(--mihakero-ink);
    stroke-width: 1;
    opacity: 0.08;
}

.hero-radar-node {
    fill: var(--mihakero-ink);
    opacity: 0.16;
}

.hero-radar-dot {
    fill: var(--mihakero-primary);
    opacity: 0.5;
}

@media (max-width: 768px) {
    .hero-radar {
        display: none;
    }
}

/* Shield-circuit (features.php, intro "Cinque aree di controllo"): glifo
   geometrico che introduce la sezione, angoli netti (non arrotondati, vedi
   principio radius del design system) con un accento a circuito interno e
   il punto rosso isolato in punta, come sul logo. Stesso trattamento di
   .mission-graphic-lines: nessun colore hardcoded, solo classi. */
.section-glyph {
    width: 56px;
    height: 56px;
    margin-inline: auto;
}

.section-glyph-shield {
    fill: var(--mihakero-surface);
    stroke: var(--mihakero-ink);
    stroke-width: 1.5;
    opacity: 0.85;
}

.section-glyph-circuit {
    fill: none;
    stroke: var(--mihakero-primary);
    stroke-width: 1.25;
    opacity: 0.55;
}

.section-glyph-node {
    fill: var(--mihakero-ink);
    opacity: 0.4;
}

.section-glyph-dot {
    fill: var(--mihakero-primary);
}

/* Seal-circuit (pricing.php, intro "Quale piano fa per te"): variante
   circolare dello stesso glifo, richiama .hanko (sigillo di verifica) senza
   sostituirlo — qui è un'illustrazione, non un badge di stato. */
.section-glyph-seal {
    fill: var(--mihakero-surface);
    stroke: var(--mihakero-ink);
    stroke-width: 1.5;
    opacity: 0.85;
}

/* Hanko-circuit (contact.php, intro FAQ): variante quadrata leggermente
   irregolare dello stesso glifo, come un vero hanko — qui il tracciato interno
   disegna un punto di domanda con il punto rosso isolato come "puntino",
   stesso principio di .section-glyph-shield/.section-glyph-seal. */
.section-glyph-hanko {
    fill: var(--mihakero-surface);
    stroke: var(--mihakero-ink);
    stroke-width: 1.5;
    opacity: 0.85;
}

/* Token-circuit (pricing.php, intro "Costo per singolo modulo"): variante
   esagonale dello stesso glifo, richiama un gettone/credito con una
   diramazione a circuito interna. */
.section-glyph-token {
    fill: var(--mihakero-surface);
    stroke: var(--mihakero-ink);
    stroke-width: 1.5;
    opacity: 0.85;
}

/* Cerchio-crest: forma ricorrente dall'emblema, per icone feature */
.crest-icon {
    width: 64px;
    height: 64px;
    border: 1.5px solid var(--mihakero-border);
    border-radius: 50%;
    background: var(--mihakero-surface);
    color: var(--mihakero-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
}

.feature-card:hover .crest-icon,
.feature-detailed:hover .crest-icon {
    border-color: var(--mihakero-primary);
    color: var(--mihakero-primary);
}

/* Variante piccola del crest-icon per i bullet della checklist "Cosa controlla
   MiHakero": stesso motivo a cerchio delle feature-card, colorato di default
   (non solo in hover) per restare leggibile come icona di elenco. */
.crest-icon-sm {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--mihakero-primary);
    border-radius: 50%;
    background: var(--mihakero-surface);
    color: var(--mihakero-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

/* Feature Cards */
.feature-card {
    background: var(--mihakero-surface);
    border-radius: var(--mihakero-radius-card);
    transition: var(--transition-base);
    border: 1px solid var(--mihakero-border);
}

.feature-card:hover {
    border-color: var(--mihakero-primary);
    box-shadow: var(--mihakero-shadow-card);
}

.feature-detailed {
    background: var(--mihakero-surface);
    border-radius: var(--mihakero-radius-card);
    border: 1px solid var(--mihakero-border);
    transition: var(--transition-base);
}

.feature-detailed:hover {
    border-color: var(--mihakero-primary);
    box-shadow: var(--mihakero-shadow-card);
}

/* Cards */
.card {
    border: 1px solid var(--mihakero-border);
    border-radius: var(--mihakero-radius-card);
    background-color: var(--mihakero-surface);
    transition: var(--transition-base);
}

.shadow-sm {
    box-shadow: var(--mihakero-shadow-card) !important;
}

/* Hanko: sigillo quadrato rosso con angoli irregolari, per marcare cose
   verificate/certificate. Testo/label restano sempre presenti accanto: il
   sigillo rinforza visivamente, non sostituisce l'informazione accessibile. */
.hanko {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    background: var(--mihakero-primary);
    color: var(--mihakero-bg-alt);
    font-family: var(--mihakero-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 3px 5px 4px 5px;
    transform: rotate(-2deg);
    box-shadow: 0 1px 1px rgba(31, 31, 29, 0.2);
}

/* Buttons */
.btn {
    border-radius: var(--mihakero-radius-btn);
    font-weight: 500;
    transition: var(--transition-base);
    border-width: 1px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 1.1rem;
}

.btn-primary {
    color: var(--mihakero-bg-alt);
    background-color: var(--mihakero-primary);
    border-color: var(--mihakero-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--mihakero-bg-alt);
    background-color: var(--mihakero-primary-dark);
    border-color: var(--mihakero-primary-dark);
}

.btn-outline-primary {
    color: var(--mihakero-ink);
    border-color: var(--mihakero-ink);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: var(--mihakero-bg-alt);
    background-color: var(--mihakero-ink);
    border-color: var(--mihakero-ink);
}

/* Navigation */
.navbar {
    transition: var(--transition-base);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--mihakero-ink);
}

.nav-link {
    font-weight: 500;
    color: var(--mihakero-ink) !important;
    transition: var(--transition-base);
}

.nav-link:hover {
    color: var(--mihakero-primary) !important;
}

/* Footer */
footer {
    background: var(--mihakero-ink) !important;
}

footer a {
    transition: var(--transition-base);
}

footer a:hover {
    color: var(--mihakero-primary) !important;
}

.text-light-50 {
    color: rgba(247, 243, 232, .7) !important;
}

/* Logo su sfondo scuro (footer): il webp ha sfondo nativo beige, qui gli si dà
   un piccolo contenitore coerente invece di lasciarlo "flottare" sul nero-inchiostro */
.footer-logo-chip {
    display: inline-block;
    background: var(--mihakero-bg);
    padding: .4rem .65rem;
    border-radius: var(--mihakero-radius-card);
    line-height: 0;
}

/* Sezione CTA finale: sfondo inchiostro (stesso tono del footer), MAI il rosso
   accento come sfondo esteso — va usato con parsimonia, non come campo colore */
.section-cta-final {
    background: var(--mihakero-ink);
}

/* Pagine di autenticazione (login/register/forgot-password/reset-password): passano dal
   layout pubblico standard (navbar+footer), ma la card resta l'unico fuoco visivo grazie a
   un respiro verticale abbondante al posto del min-height:100vh usato quando erano
   standalone (che qui spingerebbe il footer troppo in basso). */
.auth-shell {
    padding: 4rem 1.5rem 5rem;
}

@media (max-width: 575.98px) {
    .auth-shell {
        padding: 2.5rem 1rem 3rem;
    }
}

.auth-card {
    max-width: 440px;
    width: 100%;
}

.auth-card-wide {
    max-width: 480px;
}

.brand-badge {
    width: 64px;
    height: 64px;
    border: 1.5px solid var(--mihakero-border);
    border-radius: 50%;
    background: var(--mihakero-surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Indicatore forza password (register.php, reset-password.php) */
.strength-bar {
    height: 4px;
    border-radius: 2px;
    transition: width .3s, background .3s;
}

.divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--mihakero-ink-muted);
    font-size: .8rem;
}

.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mihakero-border);
}

/* Utilities */
/* Stili .prose dell'articolo blog: sezione "Articolo blog" in fondo al file */

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Loading Animation */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Badge Improvements */
.badge {
    font-weight: 500;
    padding: 6px 12px;
}

/* Form Improvements */
.form-control, .form-select {
    border-radius: var(--mihakero-radius-btn);
    border: 1px solid var(--mihakero-border);
    transition: var(--transition-base);
}

.form-control:focus, .form-select:focus {
    border-color: var(--mihakero-primary);
    box-shadow: 0 0 0 0.2rem rgba(184, 10, 16, 0.15);
}

/* Accordion Improvements */
.accordion-button {
    font-weight: 500;
    border-radius: var(--mihakero-radius-btn) !important;
}

.accordion-button:not(.collapsed) {
    background-color: var(--mihakero-bg-alt);
    color: var(--mihakero-primary-dark);
}

/* Responsive Design */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2.25rem;
    }

    .hero-section {
        padding: 3rem 0;
    }

    .feature-card,
    .feature-detailed {
        margin-bottom: 2rem;
    }
}

/* Print Styles */
@media print {
    .navbar,
    footer,
    .btn,
    .alert {
        display: none !important;
    }

    .container {
        max-width: none !important;
        width: 100% !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus Styles (visibile da tastiera — non rimuovere) */
.btn:focus,
.form-control:focus,
.form-select:focus,
.finding-card-header:focus,
.severity-filter-btn:focus,
.nav-link:focus {
    outline: 2px solid var(--mihakero-primary);
    outline-offset: 2px;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--mihakero-primary);
    color: var(--mihakero-bg-alt);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 100;
}

.skip-link:focus {
    top: 6px;
}

/* Cookie consent banner (markup iniettato da public.js, vedi showCookieBanner()) */
.cookie-banner {
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.15);
}


/* ==========================================================================
   Articolo blog (templates/public/blog/single.php)
   Un solo linguaggio visivo: superficie + bordo + raggio del sito + ombra
   morbida. Tutti i valori sono token --blog-* qui sotto; i colori derivano da
   tokens.css. Coppie testo/sfondo verificate WCAG AA (tema chiaro: il sito
   pubblico non ha un tema scuro).
   ========================================================================== */
.blog-article-page {
    --blog-surface: var(--mihakero-surface);            /* card articolo/sidebar */
    --blog-radius: var(--mihakero-radius-card);
    --blog-shadow: 0 1px 2px rgba(31, 31, 29, .05), 0 8px 24px -10px rgba(31, 31, 29, .12);
    --blog-shadow-hover: 0 2px 4px rgba(31, 31, 29, .06), 0 14px 30px -10px rgba(31, 31, 29, .22);
    --blog-card-pad: clamp(1.25rem, 4.5vw, 3rem);
    --blog-measure: 66ch;                                /* ~72 caratteri medi per riga */
    --blog-leading: 1.75;
    --blog-font-size: 1.0625rem;
    --blog-accent: var(--mihakero-primary);
    --blog-accent-soft: #FBF1EB;                         /* tinta vermiglio 5% su surface: citazioni */
    --blog-code-bg: #F3EDDC;                             /* codice inline */
    --blog-pre-bg: var(--mihakero-ink);                  /* blocchi di codice */
    --blog-pre-ink: var(--mihakero-bg-alt);
    --blog-hero-wash: radial-gradient(60rem 22rem at 100% 0, rgba(184, 10, 16, .07), transparent 70%);
    --blog-page-wash: linear-gradient(to bottom, var(--mihakero-bg-alt), var(--mihakero-bg) 22rem);
    --blog-ease: 200ms cubic-bezier(.2, .6, .2, 1);
}

@media (min-width: 768px) {
    .blog-article-page { --blog-font-size: 1.125rem; }
}

/* Sfondo pagina: accento statico e tenue, sempre dietro card opache (mai dietro al testo) */
.blog-hero {
    background: var(--blog-hero-wash), var(--mihakero-bg-alt);
    border-bottom: 1px solid var(--mihakero-border);
}
.blog-body {
    background: var(--blog-page-wash);
}

/* Header */
.blog-hero .breadcrumb { margin-bottom: 1.5rem; }

.blog-hero-figure { margin: 0 0 1.75rem; }
.blog-hero-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--blog-radius);
    border: 1px solid var(--mihakero-border);
    box-shadow: var(--blog-shadow);
}
@media (min-width: 768px) {
    .blog-hero-frame { aspect-ratio: 2 / 1; }
}
.blog-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
.blog-hero-credit {
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--mihakero-ink-muted);
}

.blog-badges { margin: 0 0 .9rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-badge {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: var(--mihakero-radius-btn);
    background: var(--mihakero-primary);
    color: var(--mihakero-bg-alt);                       /* 6.13:1 */
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.blog-title {
    font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.85rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 1rem;
    text-wrap: balance;
    overflow-wrap: break-word;
}
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.5rem;
    margin: 0;
    font-size: .9rem;
    color: var(--mihakero-ink-muted);                    /* 6.38:1 su bg-alt */
}

/* Nessuna immagine: header tipografico con filetto verticale vermiglio */
.blog-hero--plain .blog-hero-text {
    border-left: 4px solid var(--blog-accent);
    padding-left: clamp(1rem, 3vw, 1.5rem);
}

/* Card articolo */
.blog-article-card {
    background: var(--blog-surface);
    border: 1px solid var(--mihakero-border);
    border-radius: var(--blog-radius);
    box-shadow: var(--blog-shadow);
    padding: var(--blog-card-pad);
    min-width: 0;
}
.blog-article-inner {
    max-width: var(--blog-measure);
    margin-inline: auto;
}

/* Tipografia del contenuto */
.prose {
    font-size: var(--blog-font-size);
    line-height: var(--blog-leading);
    color: var(--mihakero-ink);                          /* 16.2:1 su surface */
    overflow-wrap: break-word;
}
.prose > .blog-article-inner > :last-child { margin-bottom: 0; }

.prose .lead {
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.6;
    color: var(--mihakero-ink);
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--mihakero-border);
}

.prose p { margin-bottom: 1.25em; }

.prose h2, .prose h3, .prose h4 {
    /* Offset per i link dell'indice contenuti (id assegnati da
       BlogService::injectHeadingIdsAndBuildToc()): senza questo la
       .site-navbar sticky-top copre l'inizio della sezione dopo il salto,
       stesso motivo di #faq più sopra in questo file. */
    scroll-margin-top: calc(var(--site-navbar-height) + 1rem);
    text-wrap: balance;
}
.prose h2 {
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 2.75rem 0 1rem;
    padding-bottom: .75rem;
    position: relative;
}
.prose h2::after {                                       /* accento sottile: 3rem su bordo 1px */
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--mihakero-border);
}
.prose h2::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3rem;
    height: 3px;
    background: var(--blog-accent);
    z-index: 1;
}
.prose h3 { font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin: 2.1rem 0 .75rem; }
.prose h4 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin: 1.75rem 0 .6rem; }
.prose > .blog-article-inner > :is(h2, h3, h4):first-child { margin-top: 0; }

/* Link: sottolineati sempre (non solo col colore), evidenti in hover/focus */
.prose a {
    color: var(--mihakero-primary);                      /* 6.68:1 */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color var(--blog-ease), text-decoration-thickness var(--blog-ease);
}
.prose a:hover {
    color: var(--mihakero-primary-dark);                 /* 9.74:1 */
    text-decoration-thickness: 2px;
}

.blog-article-page a:focus-visible {
    outline: 2px solid var(--mihakero-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.prose ul, .prose ol { margin-bottom: 1.25em; padding-left: 1.5rem; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--blog-accent); font-weight: 600; }
.prose li > ul, .prose li > ol { margin-top: .45em; margin-bottom: 0; }

.prose blockquote {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem;
    background: var(--blog-accent-soft);                 /* testo ink 14.85:1 */
    border-left: 4px solid var(--blog-accent);
    border-radius: 0 var(--blog-radius) var(--blog-radius) 0;
    color: var(--mihakero-ink);
}
.prose blockquote > :last-child { margin-bottom: 0; }

.prose code {
    font-family: var(--mihakero-font-mono);
    font-size: .88em;
    padding: .12em .4em;
    background: var(--blog-code-bg);
    color: var(--mihakero-primary-dark);                 /* 8.47:1 */
    border: 1px solid var(--mihakero-border);
    border-radius: 4px;
    overflow-wrap: anywhere;
}
.prose pre {
    margin: 1.75rem 0;
    padding: 1.1rem 1.25rem;
    background: var(--blog-pre-bg);
    color: var(--blog-pre-ink);                          /* 14.89:1 */
    border-radius: var(--blog-radius);
    overflow-x: auto;
    max-width: 100%;
    font-size: .9rem;
    line-height: 1.6;
    tab-size: 4;
}
.prose pre:focus-visible {
    outline: 2px solid var(--mihakero-primary);
    outline-offset: 2px;
}
.prose pre code {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-size: inherit;
    overflow-wrap: normal;
    white-space: pre;
}

.prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.75rem auto;
    border-radius: var(--blog-radius);
    border: 1px solid var(--mihakero-border);
}
.prose hr {
    height: 1px;
    margin: 2.5rem 0;
    border: 0;
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--mihakero-border) 15%, var(--mihakero-border) 85%, transparent);
}

/* Sidebar, CTA, indice: stesse superfici dell'articolo (ombra + bordo + raggio) */
.blog-article-page .card {
    box-shadow: var(--blog-shadow);
    transition: transform var(--blog-ease), box-shadow var(--blog-ease), border-color var(--blog-ease);
}
.blog-sidebar .card:hover,
.blog-sidebar .card:focus-within {
    box-shadow: var(--blog-shadow-hover);
}
.blog-cta-box, .blog-cta-inline { border-top-width: 3px; }

.blog-sidebar a:hover { text-decoration: underline !important; }

#blog-toc-list a {
    display: block;
    padding: .2rem 0 .2rem .6rem;
    border-left: 2px solid transparent;
}
#blog-toc-list a.active { border-left-color: var(--mihakero-primary); }

/* Correlati e prev/next: sollevamento leggero (solo transform + ombra) */
@media (hover: hover) {
    .blog-card-lift:hover,
    .blog-adjacent-link:hover {
        transform: translateY(-3px);
        box-shadow: var(--blog-shadow-hover);
    }
}
.blog-card-lift:focus-within,
.blog-adjacent-link:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--blog-shadow-hover);
}
.blog-card-lift a:focus-visible { outline-offset: 4px; }

.blog-adjacent {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}
@media (min-width: 576px) {
    .blog-adjacent { grid-template-columns: 1fr 1fr; }
    .blog-adjacent-link--next { grid-column: 2; text-align: right; }
}
.blog-adjacent-link {
    display: block;
    min-height: 44px;
    padding: 1rem 1.25rem;
    background: var(--blog-surface);
    border: 1px solid var(--mihakero-border);
    border-radius: var(--blog-radius);
    box-shadow: var(--blog-shadow);
    color: var(--mihakero-ink);
    text-decoration: none;
    transition: transform var(--blog-ease), box-shadow var(--blog-ease), border-color var(--blog-ease);
}
.blog-adjacent-link:hover { color: var(--mihakero-ink); border-color: var(--mihakero-primary); }
.blog-adjacent-label { display: block; margin-bottom: .25rem; color: var(--mihakero-ink-muted); }
.blog-adjacent-title { font-weight: 600; line-height: 1.35; }

.blog-related { background: var(--mihakero-bg-alt); border-top: 1px solid var(--mihakero-border); }

/* Target di tocco adeguati (>= 44px) sui dispositivi touch */
@media (pointer: coarse) {
    #blog-toc-list a,
    .blog-sidebar .list-unstyled a,
    .blog-share .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    #blog-toc-list a { display: flex; }
    .blog-sidebar .list-unstyled a.d-block { display: flex !important; }
}

/* Barra di avanzamento lettura. Base: scaleX(0), guidata da CSS dove
   supportato (@supports), altrimenti da blog-toc.js (classe .is-js). */
.blog-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1035;                                        /* sopra .sticky-top (1020) */
    pointer-events: none;
    display: none;
}
.blog-progress-bar {
    display: block;
    height: 100%;
    background: var(--mihakero-primary);
    transform-origin: 0 50%;
    transform: scaleX(0);
}
.blog-progress.is-js { display: block; }
@supports (animation-timeline: scroll()) {
    .blog-progress { display: block; }
    .blog-progress-bar {
        animation: blog-progress-grow linear both;
        animation-timeline: scroll(root block);
    }
    @keyframes blog-progress-grow { to { transform: scaleX(1); } }
}

/* Reveal dei blocchi sotto l'articolo (mai sul testo principale). Senza JS
   nessuna regola si applica: il blocco è visibile. La classe la mette e la
   toglie blog-toc.js solo per i blocchi ancora fuori dal viewport. */
[data-reveal] { transition: opacity 250ms ease-out, transform 250ms ease-out; }
[data-reveal].is-reveal-pending {
    opacity: 0;
    transform: translateY(12px);
}

@media (prefers-reduced-motion: reduce) {
    .blog-progress { display: none !important; }
    .blog-card-lift:hover,
    .blog-card-lift:focus-within,
    .blog-adjacent-link:hover,
    .blog-adjacent-link:focus-visible { transform: none; }
    [data-reveal].is-reveal-pending { opacity: 1; transform: none; }
}

/* Stampa: solo contenuto, niente ombre/sfondi/effetti */
@media print {
    .blog-sidebar,
    .blog-share,
    .blog-cta-inline,
    .blog-progress,
    .blog-adjacent,
    .blog-related,
    .blog-article-page .section-cta-final {
        display: none !important;
    }
    .blog-hero, .blog-body, .blog-related { background: none !important; border: 0 !important; }
    .blog-article-card, .blog-hero-frame, .prose blockquote, .prose img {
        box-shadow: none !important;
        background: none !important;
    }
    .blog-article-card { border: 0; padding: 0; }
    .blog-article-inner { max-width: none; }
    .prose, .prose a, .prose code { color: #000; }
    .prose a { text-decoration: underline; }
    .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; overflow-wrap: anywhere; }
    .prose pre {
        background: none;
        color: #000;
        border: 1px solid #999;
        white-space: pre-wrap;
        overflow: visible;
    }
    .prose code { background: none; border: 0; }
    .prose h2, .prose h3, .prose h4 { break-after: avoid; }
    .prose pre, .prose blockquote, .prose img { break-inside: avoid; }
}