/* ============================================
   CASSIOPEIA EXTENDED - USER.CSS
   KOMBEL - v3.4
   ============================================ *
 * MODIFICHE v3.3 - v3.4:
 * - Testata home un tono più scura dell'header (--color-hero-bg).
 * - Loghi dei marchi nello stesso riquadro (object-fit).
 * - Footer: spazi attorno ai link legali (.footer-legal .sep).
 * - Contatti: riga PEC/etichette su più righe senza colonne.
 * - Accessibilità: arancione scuro per i testi su fondo chiaro
 *   (--color-text-accent, sezione 22); selettore lingue a testo.
 * - v3.4: tolte le sezioni non usate su Kombel (15, 16, 18).
 */

/**
 * STRUTTURA:
 * 1. VARIABILI CSS
 * 2. BASE (HTML, BODY, IMMAGINI, CONTENITORE)
 * 3. TIPOGRAFIA
 * 4. TOPBAR - TELEFONO + SELETTORE LINGUE
 * 5. HEADER - LOGO + MENU
 * 6. MENU PRINCIPALE + DROPDOWN + HAMBURGER MOBILE
 * 7. FOOTER
 * 8. MOBILE - REGOLE GENERALI (non menu)
 * 9. ACCESSIBILITÀ
 * 10. PERFORMANCE
 * 11. PRINT STYLES
 * 12. BOTTONE "LEGGI TUTTO" BLOG
 * 13. SIDEBAR BLOG
 * 14. PAGINA BLOG - LAYOUT GRID
 * --- SEZIONI DEI CONTENUTI ---
 * 17. SEZIONI HOME - TITOLI E SETTORI (MERCATI)
 * 19. HOME - MARCHI
 * 20. PAGINA CONTATTI
 * 21. TESTATA HOME
 * 22. CONTRASTO TESTI ARANCIONI
 * (15, 16 e 18 - titolo e slider di e-Smart22, hub servizi -
 *  tolte nella v3.4 perché non usate su Kombel. I numeri restano
 *  invariati perché i commenti li citano.)
 *
 * NOTA: il menu mobile usa il layout "Collapsible Dropdown" nativo
 * di Cassiopeia (hamburger a tendina). I fix per l'header chiaro
 * sono nella sezione 6.
 *
 * MODIFICHE RISPETTO ALLA v3.0:
 * - Larghezza unica --container-max per griglia, topbar, header e footer
 *   (prima header/footer erano fissi a 1140px mentre contenuto e topbar
 *   arrivavano a 1320px: disallineati sopra i 1400px).
 * - img: tolto "display: block" globale (rompeva le immagini inserite
 *   dall'editor negli articoli). Applicato solo dove serve.
 * - Sidebar blog: i due blocchi duplicati unificati in uno.
 * - Colori fissi ripetuti spostati in variabili (:root).
 * - Ombre hover calcolate dal colore link del template (color-mix).
 * - Stili del menu limitati all'header (prima colpivano ogni menu).
 * - Tolte variabili non usate e la regola .skip-to-content (classe
 *   non presente nell'HTML di Cassiopeia).
 * - Stampa: nascosti anche menu, hamburger e slider.
 * - Topbar: colore testo con variabile propria (--color-topbar-text),
 *   non più legato al colore del footer.
 *
 * MODIFICHE v3.2 (cornice del sito):
 * - Allineamento: la griglia di Cassiopeia aggiunge uno spazio (gap)
 *   tra le colonne laterali e il contenuto; ora è compensato, così
 *   logo, menu, breadcrumb, contenuto e footer partono dalla stessa linea.
 * - Menu: selettori corretti per Joomla 5/6 (.metismenu-item al posto
 *   di .nav-item, che non esiste). Testo nel colore dell'header,
 *   sottolineatura nel colore link su voce attiva e al passaggio del mouse.
 * - Menu: sottolineatura = pseudo-elemento ::after di Cassiopeia,
 *   ricolorato (niente più bordo nostro: evitava la doppia linea).
 * - Menu mobile: sottomenu con la classe corretta (.mm-collapse);
 *   sottolineatura della voce attiva nel colore link.
 * - Footer: hover dei link con lo stesso selettore del template.
 * - Logo: padding scritto con il selettore completo (vince su Cassiopeia).
 *
 * REVISIONE v3.2.1:
 * - Menu: voci in riga (flex) solo da 992px in su; sotto restano in colonna
 *   nella tendina dell'hamburger.
 * - Menu: sottomenu con sfondo uguale all'header (testo bianco su bianco).
 */

/* ============================================
   1. VARIABILI CSS
   ============================================ */

:root {
    /* CONTENITORE: larghezza massima unica per tutto il sito */
    --container-max: 540px;
    --container-pad: 15px;
    /* Spazio tra le colonne della griglia di Cassiopeia (grid-gap: 0 1em) */
    --grid-gap: 1em;

    /* TRANSIZIONI */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;

    /* SPACING */
    --spacing-sm: 0.5rem;
    --spacing-lg: 1.5rem;

    /* OMBRE */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    /* Ombra hover delle card: tinta del colore link del template */
    --shadow-hover: 0 4px 16px color-mix(in srgb, var(--link-color, #1d7989) 15%, transparent);
    --shadow-hover-strong: 0 8px 20px rgba(0, 0, 0, 0.10);

    /* Z-INDEX */
    --z-toast: 1000;

    /* COLORI LOCALI (non gestiti da Joomla) - DA ADATTARE A KOMBEL */
    --color-accent: var(--link-color);  /* cerchi icone, sottolineature card: arancione Kombel */
    --color-topbar-bg: #dde0e2;
    --color-topbar-text: #3c3c3c;  /* testo topbar: indipendente da header e footer */
    --color-border: #e0e0e0;
    --color-border-light: #f0f0f0;
    --color-bg: #f8f9fa;
    --color-card-bg: #ffffff;
    --color-footer-link-hover: var(--btnbg);  /* link del footer al passaggio del mouse */
    /* Sfondo della testata home: un tono più scuro dell'header, così
       header e testata si distinguono. Per tornare a un unico blocco
       grigio: --color-hero-bg: var(--headerbg); */
    --color-hero-bg: color-mix(in srgb, var(--headerbg, #454444) 80%, #000);
    /* Arancione per i TESTI su fondo chiaro: l'arancione del logo
       (#f58220) su bianco ha contrasto 2,6:1, sotto il minimo WCAG 4,5:1.
       Questo tono arriva a 4,8:1. Pulsanti, icone e linee restano
       nell'arancione del logo. */
    --color-text-accent: #b35a08;
    --color-text-accent-hover: #8f4806;
}

@media (min-width: 768px)  { :root { --container-max: 720px; } }
@media (min-width: 992px)  { :root { --container-max: 960px; } }
@media (min-width: 1200px) { :root { --container-max: 1140px; } }
@media (min-width: 1400px) { :root { --container-max: 1320px; } }

/* ============================================
   2. BASE - RESET, HTML, BODY, IMMAGINI, CONTENITORE
   ============================================ */

html {
    box-sizing: border-box;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    overflow-x: hidden;
}

/* Solo responsive: niente display:block globale, così le immagini
   allineate o in linea nell'editor mantengono il loro comportamento. */
img {
    max-width: 100%;
    height: auto;
}

/* La griglia di Cassiopeia ha una colonna vuota ai lati del contenuto
   e uno spazio (--grid-gap) tra le colonne: il contenuto parte quindi
   1em più a destra del bordo della griglia. Allarghiamo la griglia di
   quello spazio e togliamo il padding: così il contenuto ha la stessa
   larghezza e lo stesso bordo sinistro di logo, menu e footer.
   Sotto la larghezza massima il contenuto resta a 1em dal bordo
   (header e footer a 15px: differenza di 1px, invisibile). */
.site-grid {
    width: 100%;
    max-width: calc(var(--container-max) - 2 * var(--container-pad) + 2 * var(--grid-gap));
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================
   3. TIPOGRAFIA
   ============================================ */

p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

/* ============================================
   4. TOPBAR - TELEFONO + SELETTORE LINGUE
   ============================================ */

/* Il padding laterale allinea il contenuto della topbar alla stessa
   larghezza di header e contenuto, con un'unica regola per tutti
   i breakpoint (prima: 4 media query con larghezze fisse). */
.container-topbar {
    background-color: var(--color-topbar-bg);
    width: 100%;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    padding-left: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
    padding-right: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    color: var(--color-topbar-text);
}

/* Se il modulo è scritto con un paragrafo, azzeriamo il margine
   del <p> per non alzare la topbar. */
.container-topbar .mod-custom p {
    margin: 0;
    line-height: 1.4;
}

.container-topbar .mod-custom a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-topbar-text);
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 0.875rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: color var(--transition-fast), border-bottom-color var(--transition-fast);
}

.container-topbar .mod-custom a:hover,
.container-topbar .mod-custom a:focus-visible {
    color: var(--link-hover-color, var(--link-color));
    border-bottom-color: var(--link-hover-color, var(--link-color));
}

.container-topbar .mod-custom a:focus-visible {
    outline: 2px solid var(--link-hover-color, var(--link-color));
    outline-offset: 2px;
}

.container-topbar .mod-custom a i {
    font-size: 0.85em;
}

.container-topbar .mod-languages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.container-topbar .mod-languages ul {
    display: flex;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.container-topbar .mod-languages li {
    display: flex;
    align-items: center;
}

.container-topbar .mod-languages a {
    display: block;
    padding: 1px 6px;
    border: 2px solid transparent;
    border-radius: 3px;
    transition: all var(--transition-fast);
    /* Selettore lingua come testo (IT / EN): modulo Lingue con
       "Usa bandiere immagine: No". Le bandiere GIF di Joomla sono
       piccole e Google le segnala come immagini a bassa risoluzione. */
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-topbar-text);
}

.container-topbar .mod-languages a:hover {
    border-color: var(--color-topbar-text);
}

/* Se si torna alle bandiere: riquadro compatto attorno all'immagine */
.container-topbar .mod-languages a:has(img) {
    padding: 2px;
    line-height: 0;
}

.container-topbar .mod-languages a:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

.container-topbar .mod-languages img {
    display: block;
    width: 22px;
    height: auto;
}

.container-topbar .mod-languages li:not(.lang-active) a img {
    filter: grayscale(70%);
    opacity: 0.55;
    transition: all var(--transition-fast);
}

.container-topbar .mod-languages li:not(.lang-active) a:hover img,
.container-topbar .mod-languages li:not(.lang-active) a:focus-visible img {
    filter: grayscale(0%);
    opacity: 1;
}

.container-topbar .mod-languages li.lang-active a {
    border-color: var(--btnbg);
}

.container-topbar .mod-languages li.lang-active a img {
    filter: none;
    opacity: 1;
}

/* ============================================
   5. HEADER - LOGO + MENU + SEARCH
   ============================================ */

header.header.container-header {
    background-color: var(--headerbg);
    box-shadow: var(--shadow-sm);
    position: relative;
}

header.header.container-header > .grid-child {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

.navbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar-brand img {
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
}

@media (min-width: 1200px) {
    .navbar-brand img {
        max-width: 250px;
        max-height: 70px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-brand img {
        max-width: 180px;
        max-height: 60px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-brand img {
        max-width: 150px;
        max-height: 50px;
    }
}

.container-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.container-nav .mod-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Voci in riga solo da desktop: sotto i 992px il menu è la tendina
   dell'hamburger e le voci devono restare una sotto l'altra. */
@media (min-width: 992px) {
    .container-nav .mod-menu {
        display: flex;
        gap: var(--spacing-sm);
    }
}

.container-search {
    flex-shrink: 0;
}

/* Respiro sopra e sotto il logo. Selettore completo: la regola di
   Cassiopeia ".container-header .navbar-brand" è più specifica
   del semplice ".navbar-brand". */
header.header.container-header .navbar-brand {
    padding-top: 1.25rem;
    padding-bottom: 0.5rem;
}

/* ============================================
   6. MENU PRINCIPALE + DROPDOWN + HAMBURGER MOBILE
   ============================================ */

/* Limitato al menu dell'header: prima ".mod-menu a" colpiva
   anche i menu di footer e sidebar. */
.container-nav .mod-menu a {
    color: var(--headercolor, #333);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    transition: color var(--transition-normal);
    display: inline-block;
}

/* Joomla 5/6: le voci del menu hanno la classe .metismenu-item
   ("active" = voce nel percorso della pagina, "current" = pagina attuale).
   Il testo resta nel colore dell'header (leggibile su qualsiasi sfondo). */
header.header.container-header .container-nav .mod-menu .metismenu-item > a:hover,
header.header.container-header .container-nav .mod-menu .metismenu-item > a:focus-visible,
header.header.container-header .container-nav .mod-menu .metismenu-item.active > a,
header.header.container-header .container-nav .mod-menu .metismenu-item.current > a {
    color: var(--headercolor, #333);
}

/* SOTTOLINEATURA (desktop >= 992px).
   Cassiopeia la disegna con uno pseudo-elemento ::after sotto il link
   (template.css: ".container-header .metismenu > li > a:after",
   opacità 0.2 e colore bianco sfumato da colors.css: per questo appariva
   grigia). Ne cambiamo solo colore e opacità, stesso selettore del
   template con prefisso header.header per vincere. */
header.header.container-header .metismenu > li > a:hover::after,
header.header.container-header .metismenu > li > button:hover::before,
header.header.container-header .metismenu > li.active > a::after,
header.header.container-header .metismenu > li.active > button::before {
    background: var(--link-color);
    opacity: 1;
}

/* Cassiopeia ha anche una seconda linea, più vecchia, sul <li>
   (".container-header .mod-menu > li:after"): la spegniamo per
   evitare una doppia sottolineatura. */
header.header.container-header .mod-menu > li::after {
    display: none;
}

header.header.container-header .container-nav .mod-menu .metismenu-item > a:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

/* Sottomenu (desktop e tendina mobile): Cassiopeia li disegna su sfondo
   bianco, ma i link ereditano --headercolor (bianco su header grigio
   scuro): sarebbero invisibili. Sfondo = colore dell'header. */
header.header.container-header .metismenu.mod-menu .mm-collapse {
    background-color: var(--headerbg);
}

/* Fix "header chiaro" per il menu mobile.
   Cassiopeia sotto i 992px assume un header SCURO e colora di bianco
   sia il testo del sottomenu sia l'icona hamburger. Con header chiaro
   diventano invisibili: ripristiniamo il colore dell'header. */
@media (max-width: 991.98px) {
    header.container-header .mod-menu .mm-collapse a,
    header.container-header .mod-menu .mm-collapse span {
        color: var(--headercolor);
    }

    /* Sotto i 992px Cassiopeia usa text-decoration: underline sulla
       voce attiva: la coloriamo come la linea desktop. */
    header.container-header .mod-menu > li.active > a,
    header.container-header .mod-menu > li > a:hover {
        text-decoration-color: var(--link-color);
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
    }

    .container-header .navbar-toggler {
        color: var(--headercolor, #1d7989);
        border-color: var(--headercolor, #1d7989);
    }
}

/* ============================================
   7. FOOTER
   ============================================ */

footer.container-footer {
    background-color: var(--footerbg);
    color: var(--footercolor);
}

footer.container-footer > .grid-child {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 1.5rem var(--container-pad);
    text-align: center;
}

/* Il template (template.css) colora i link del footer con
   ".footer a:not(.btn)" e al passaggio del mouse li porta a
   var(--gray-200) con ".footer a:not(.btn):hover". Usiamo lo stesso
   selettore: a parità di specificità vince user.css, caricato per ultimo. */
.footer a:not(.btn) {
    color: var(--footercolor, #ecf0f1);
    transition: color var(--transition-normal);
}

.footer a:not(.btn):hover,
.footer a:not(.btn):focus {
    color: var(--color-footer-link-hover);
}

footer.container-footer a:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Link legali: gli spazi attorno alla barra | nell'override del footer
   vengono azzerati, quindi la distanza è data dal CSS (margine sul
   separatore, non sottolineato). */
.footer-legal .sep {
    margin: 0 0.6em;
    text-decoration: none;
}

/* Distanza tra il copyright/P.IVA e il primo link legale */
.footer-legal {
    margin-left: 1.25em;
}

/* ============================================
   8. MOBILE - REGOLE GENERALI (non menu)
   ============================================ */

@media (max-width: 767.98px) {
    header.header.container-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1rem var(--container-pad);
        gap: 1rem;
    }

    header.header.container-header > .grid-child {
        width: auto;
        max-width: none;
    }

    .navbar-brand {
        justify-content: flex-start;
    }

    .navbar-brand img {
        max-width: 140px;
        max-height: 60px;
    }

    main {
        padding: 2rem 0;
    }
}

/* ============================================
   9. ACCESSIBILITÀ - WCAG 2.1 AA
   ============================================ */

/* Per il link "Salta al contenuto" usa il plugin core
   "Sistema - Skip To" (sezione: Sito): ha già il suo stile. */

a:focus-visible {
    outline: 3px solid var(--link-color);
    outline-offset: 2px;
    border-radius: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

/* ============================================
   10. PERFORMANCE - PREFERS-REDUCED-MOTION
   ============================================ */

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

/* ============================================
   11. PRINT STYLES
   ============================================ */

@media print {
    .container-topbar,
    .container-nav,
    .navbar-toggler,
    footer {
        display: none;
    }

    body {
        color: black;
        background: white;
    }
}

/* ============================================
   12. BOTTONE "LEGGI TUTTO" BLOG
   ============================================ */

.com-content-category-blog__read-more a,
p.readmore a.btn.btn-secondary,
.mod-articles-item a.btn.btn-secondary {
    background-color: var(--link-color, #1d7989);
    border: 2px solid var(--link-color, #1d7989);
    color: white;
    border-radius: 4px;
    padding: 0.4rem 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
    display: inline-block;
}

.com-content-category-blog__read-more a:hover,
p.readmore a.btn.btn-secondary:hover,
.mod-articles-item a.btn.btn-secondary:hover {
    background-color: var(--link-hover-color, #14343f);
    border-color: var(--link-hover-color, #14343f);
    color: white;
}

/* ============================================
   13. SIDEBAR BLOG
   Un solo blocco (prima erano due quasi identici).
   Funziona sia con stile modulo "card" di Joomla
   (h3.card-header + .card-body) sia senza.
   Classe "blog-sidebar" impostata nel modulo
   (Avanzate > Classe modulo).
   ============================================ */

.blog-sidebar {
    border: none;
    border-left: 3px solid var(--footerbg, #1d7989);
    border-radius: 0;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

/* Sidebar sticky su desktop (breakpoint desktop di Cassiopeia).
   max-height + overflow-y: se è più alta della finestra resta scorrevole. */
@media (min-width: 992px) {
    .container-sidebar-right .blog-sidebar {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
}

.blog-sidebar h3,
.blog-sidebar .card-header {
    background: none;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 0.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--footerbg, #1d7989);
}

.blog-sidebar .card-body {
    padding: 0;
}

.blog-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-sidebar ul li {
    padding: 0;
    border-bottom: 1px solid var(--color-border-light);
}

.blog-sidebar ul li a {
    display: block;
    padding: 0.65rem 0.25rem;
    color: var(--link-color, var(--bodycolor, #707372));
    font-weight: 600;
    letter-spacing: 0.02em;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-bottom-color var(--transition-fast), padding-left var(--transition-fast);
}

.blog-sidebar ul li a:hover,
.blog-sidebar ul li a:focus-visible {
    color: var(--link-hover-color, var(--link-color));
    border-bottom-color: var(--link-hover-color, var(--link-color));
    padding-left: 0.5rem;
}

.blog-sidebar ul li a:focus-visible {
    outline: none;
}

/* ============================================
   14. PAGINA BLOG - LAYOUT GRID (stile modulo articoli)
   Agganciato alla classe "blog-grid" impostata nella
   voce di menu (campo Classe Blog).
   Font titoli: stessa formula fluida di Cassiopeia.
   ============================================ */

.blog-grid .com-content-category-blog__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    float: none;
    width: 100%;
}

.blog-grid .com-content-category-blog__item {
    float: none;
    width: auto;
    margin: 0;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    background: var(--color-card-bg);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.blog-grid .com-content-category-blog__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--link-color);
}

.blog-grid .com-content-category-blog__item h2 {
    font-size: calc(1.275rem + .3vw);
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
    overflow-wrap: break-word;
}

.blog-grid .com-content-category-blog__item h2 a {
    font-size: inherit;
    line-height: inherit;
}

.blog-grid .com-content-category-blog__item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

/* ####################################################
   SEZIONI DEI CONTENUTI: HOME E CONTATTI
   #################################################### */

/* ============================================
   17. SEZIONI HOME - TITOLI E SETTORI (MERCATI)
   ============================================ */

.home-section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--bodycolor, #707372);
    position: relative;
    padding-bottom: 0.75rem;
}

.home-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--link-color);
    border-radius: 2px;
}

/* ---- SETTORI ---- */
.home-mercato {
    padding: 3rem 0;
}

.home-mercato-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.home-mercato-card {
    flex: 1;
    min-width: 200px;
    max-width: 250px;
    text-align: center;
    padding: 1.5rem 1rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.home-mercato-card:hover {
    border-color: var(--link-color);
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.home-mercato-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.home-mercato-icon i {
    font-size: 1.5rem;
    color: white;
}

.home-mercato-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--link-color);
}

.home-mercato-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--bodycolor, #707372);
    margin: 0;
}

@media (max-width: 767.98px) {
    .home-mercato-grid {
        flex-direction: column;
        align-items: center;
    }
    .home-mercato-card {
        max-width: 100%;
    }
}

/* ============================================
   19. HOME - MARCHI
   ============================================ */

.home-partner {
    padding: 3rem 0;
}

.home-partner-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.home-partner-card {
    flex: 1;
    min-width: 240px;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.75rem 1.25rem;
    text-decoration: none;
    color: var(--bodycolor, #707372);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.home-partner-card:hover {
    border-color: var(--link-color);
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
    color: var(--bodycolor, #707372);
}

/* Loghi tutti nello stesso riquadro (alto 56px, largo quanto la card):
   object-fit mantiene le proporzioni, così loghi larghi (Victron) e
   loghi compatti (MK) hanno un peso visivo simile. */
.home-partner-card img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: 56px;
    object-fit: contain;
    margin: 0 auto 1.25rem;
}

.home-partner-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--link-color);
    margin: 0 0 0.5rem 0;
}

.home-partner-card p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 767.98px) {
    .home-partner-grid {
        flex-direction: column;
        align-items: center;
    }
    .home-partner-card {
        max-width: 100%;
    }
}

/* ============================================
   20. PAGINA CONTATTI
   Modulo laterale: classe "contatti-sidebar" (Avanzate >
   Classe modulo), posizione sidebar-right.
   Mappa: <div class="mappa-osm"> con l'iframe di OpenStreetMap
   dentro l'articolo.
   ============================================ */

.contatti-sidebar {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--link-color);
    border-radius: 8px;
    background: var(--color-bg);
    padding: 1.25rem 1.25rem 0.25rem;
}

/* Con stile modulo "card" Joomla aggiunge header e body: li neutralizziamo */
.contatti-sidebar .card-header {
    background: none;
    border: none;
    padding: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contatti-sidebar .card-body {
    padding: 0;
}

.contatti-sidebar h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--link-color);
    margin: 0 0 1rem 0;
}

.contatti-sidebar address {
    font-style: normal;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.contatti-sidebar .contatti-recapiti {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.contatti-sidebar .contatti-recapiti li {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border-light);
}

.contatti-sidebar .contatti-recapiti li:last-child {
    border-bottom: none;
}

.contatti-sidebar .contatti-recapiti i {
    width: 1rem;
    color: var(--link-color);
    text-align: center;
    flex-shrink: 0;
}

.contatti-sidebar .contatti-recapiti a {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;  /* niente a capo dentro email e telefono (es. "e-smart22") */
}

/* Testo di una voce su più righe (es. etichetta + PEC): resta un blocco
   unico accanto all'icona invece di dividersi in colonne. */
.contatti-sidebar .contatti-recapiti li > span {
    min-width: 0;
}

.contatti-sidebar .contatti-label {
    font-size: 0.875rem;
    color: var(--bodycolor);
}

.contatti-sidebar .contatti-recapiti a:hover {
    text-decoration: underline;
}

.contatti-sidebar .contatti-fiscali {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--bodycolor);
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
}

/* Mappa responsive: occupa tutta la colonna, proporzione 4:3 */
.mappa-osm {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg);
    margin-bottom: 0.75rem;
}

.mappa-osm iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mappa-osm-link {
    font-size: 0.875rem;
}

@media (max-width: 767.98px) {
    .mappa-osm {
        aspect-ratio: 1 / 1;
    }
}

/* ============================================
   21. TESTATA HOME (al posto dello slider)
   Fascia a tutta larghezza nel grigio dell'header con
   H1, sottotitolo e due pulsanti. Modulo personalizzato
   nella stessa posizione dello slider.
   La colonna .home-hero-visual è pronta per accogliere
   l'illustrazione SVG: finché è vuota non occupa spazio.
   ============================================ */

.home-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: var(--color-hero-bg, var(--headerbg, #454444));
    color: #ffffff;
}

.home-hero-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 4.5rem var(--container-pad) 5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
}

.home-hero-inner:has(.home-hero-visual:not(:empty)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.home-hero-visual:empty {
    display: none;
}

.home-hero-visual svg,
.home-hero-visual img {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Su telefono l'illustrazione va sotto i pulsanti: più piccola */
@media (max-width: 767.98px) {
    .home-hero-visual img,
    .home-hero-visual svg {
        max-width: 360px;
    }
}

.home-hero-text {
    max-width: 680px;
}

.home-hero h1 {
    margin: 0 0 1.25rem 0;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}

/* Piccolo tratto arancione sopra il titolo: richiama la k del logo */
.home-hero h1::before {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    margin-bottom: 1.25rem;
    background-color: var(--link-color);
    border-radius: 2px;
}

.home-hero p {
    margin: 0 0 2rem 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #e4e4e4;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.home-hero-btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Testo scuro sull'arancione: più leggibile del bianco */
.home-hero-btn--primary {
    background-color: var(--btnbg, #f58220);
    border: 2px solid var(--btnbg, #f58220);
    color: #2a2929;
}

.home-hero-btn--primary:hover,
.home-hero-btn--primary:focus-visible {
    background-color: var(--btnbgh, #d96a0b);
    border-color: var(--btnbgh, #d96a0b);
    color: #2a2929;
}

.home-hero-btn--secondary {
    border: 2px solid #ffffff;
    color: #ffffff;
}

.home-hero-btn--secondary:hover,
.home-hero-btn--secondary:focus-visible {
    background-color: #ffffff;
    color: #2a2929;
}

.home-hero-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 991.98px) {
    .home-hero-inner:has(.home-hero-visual:not(:empty)) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .home-hero-inner {
        padding: 3rem var(--container-pad) 3.5rem;
    }
    .home-hero p {
        font-size: 1rem;
    }
}

/* ============================================
   22. CONTRASTO TESTI ARANCIONI (accessibilità)
   Su fondo chiaro i testi arancioni usano --color-text-accent,
   più scuro dell'arancione del logo. Limitato al contenuto e alle
   colonne laterali: testata, header e footer (fondo scuro) non
   cambiano.
   ============================================ */

.container-component a:not(.btn),
.container-sidebar-left a:not(.btn),
.container-sidebar-right a:not(.btn),
.main-top a:not(.btn),
.main-bottom a:not(.btn),
.container-top-a a:not(.btn),
.container-top-b a:not(.btn),
.container-bottom-a a:not(.btn),
.container-bottom-b a:not(.btn),
.mod-breadcrumbs a {
    color: var(--color-text-accent);
}

.container-component a:not(.btn):hover,
.container-sidebar-left a:not(.btn):hover,
.container-sidebar-right a:not(.btn):hover,
.main-top a:not(.btn):hover,
.main-bottom a:not(.btn):hover,
.container-top-a a:not(.btn):hover,
.container-top-b a:not(.btn):hover,
.container-bottom-a a:not(.btn):hover,
.container-bottom-b a:not(.btn):hover,
.mod-breadcrumbs a:hover {
    color: var(--color-text-accent-hover);
}

.home-mercato-card h3,
.home-partner-card h3,
.contatti-sidebar h4,
.blog-grid .com-content-category-blog__item h2 a {
    color: var(--color-text-accent);
}