/* =========================================================
   INFOHOTEL - USER.CSS
   Joomla 6 / Cassiopeia Extended

   Variabili globali, font e stile base
   ========================================================= */

/* ---------------------------------------------------------
   FONT LOCALI
   --------------------------------------------------------- */

@font-face {
    font-family: "Mulish IH ExtraLight";
    src: url("/media/infohotel/fonts/mulish-light.woff2") format("woff2");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Mulish";
    src: url("/media/infohotel/fonts/mulish-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mulish";
    src: url("/media/infohotel/fonts/mulish-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Mulish";
    src: url("/media/infohotel/fonts/mulish-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hind";
    src: url("/media/infohotel/fonts/hind-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hind";
    src: url("/media/infohotel/fonts/hind-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hind";
    src: url("/media/infohotel/fonts/hind-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



/* ---------------------------------------------------------
   1. COLORI E VARIABILI GLOBALI
   --------------------------------------------------------- */

:root {

    /* Font */
    --ih-font-body: "Muli", Arial, sans-serif;
    --ih-font-heading: "Muli", Arial, sans-serif;
    --ih-font-accent: "Hind", Arial, sans-serif;
    --ih-font-reading:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif;

    /* Colore principale InfoHOTEL */
    --ih-primary: #d20b22;
    --ih-primary-dark: #890716;

    /* Testi */
    --ih-text: #686868;
    --ih-heading: #282828;
    --ih-muted: #9b9b9b;

    /* Fondi */
    --ih-white: #ffffff;
    --ih-light: #f2f2f2;
    --ih-light-alt: #f1f2f6;

    /* Aree scure */
    --ih-dark: #20232a;
    --ih-dark-alt: #1b1e23;
    --ih-dark-deep: #17181d;

    /* Testi su fondo scuro */
    --ih-dark-text: #c1c1c1;
    --ih-dark-heading: #e8e8e8;

    /* Bordi */
    --ih-border: rgba(136, 136, 136, .25);

    /* Layout */
    --ih-radius: .1875rem;

}


/* ---------------------------------------------------------
   2. BASE
   --------------------------------------------------------- */

body {
    color: var(--ih-text);
    background-color: var(--ih-white);
    font-family: var(--ih-font-body);
    font-size: 1rem;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ---------------------------------------------------------
   3. LINK
   --------------------------------------------------------- */

a {
    color: var(--ih-primary);
    transition: color .2s ease;
}

a:hover,
a:focus {
    color: var(--ih-primary-dark);
}


/* ---------------------------------------------------------
   4. TITOLI
   --------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ih-heading);
    font-family: var(--ih-font-heading);
    font-weight: 700;
}

.ih-section-title,
.ih-module-title {
    font-family: var(--ih-font-accent);
}

/* Dimensioni di riferimento del vecchio sito */

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.75rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}


/* ---------------------------------------------------------
   5. TESTO
   --------------------------------------------------------- */

p {
    margin: 0 0 1rem;
}

.text-muted,
small {
    color: var(--ih-muted);
}


/* ---------------------------------------------------------
   6. ELEMENTI BASE
   --------------------------------------------------------- */

hr {
    border: 0;
    border-bottom: 1px solid var(--ih-border);
}

img {
    max-width: 100%;
    height: auto;
}

/* fine stili di base */

/* =========================================================
   LEGACY COMPATIBILITY
   Compatibilità con contenuti migrati dal vecchio sito
   ========================================================= */


/* ---------------------------------------------------------
   1. BOTTONI LEGACY
   Vecchie classi RocketTheme: .button
   --------------------------------------------------------- */

.button {
    display: inline-block;
    font-weight: 700;
    background-color: var(--ih-primary, #c51f2f);
    color: #ffffff !important;
    font-size: 1rem;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    margin: 0 0 .5rem;
    padding: .5rem 1.5rem;
    vertical-align: middle;
    text-shadow: none;
    cursor: pointer;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.button:hover,
.button:focus,
.button:active {
    background-color: var(--ih-primary-dark, #a91a28);
    color: #ffffff !important;
    text-decoration: none;
}

.button.button-2 {
    border-radius: 2rem;
}

/* Variante outline */
.button.button-3 {
    background-color: transparent;
    color: var(--ih-primary, #c51f2f) !important;
    border-color: var(--ih-primary, #c51f2f);
    border-radius: 2rem;
    box-shadow: none;
}

.button.button-3:hover,
.button.button-3:focus,
.button.button-3:active {
    background-color: transparent;
    color: var(--ih-primary-dark, #a91a28) !important;
    border-color: var(--ih-primary-dark, #a91a28);
}


/* Varianti colore legacy */

.button.button-orange {
    background-color: #ee7933;
}

.button.button-orange:hover,
.button.button-orange:focus,
.button.button-orange:active {
    background-color: #c45410;
}

.button.button-blue {
    background-color: #279fba;
}

.button.button-blue:hover,
.button.button-blue:focus,
.button.button-blue:active {
    background-color: #1a697b;
}

.button.button-orange.button-3 {
    background-color: transparent;
    color: #ee7933 !important;
    border-color: #ee7933;
}

.button.button-orange.button-3:hover,
.button.button-orange.button-3:focus,
.button.button-orange.button-3:active {
    color: #c45410 !important;
    border-color: #c45410;
}

.button.button-blue.button-3 {
    background-color: transparent;
    color: #279fba !important;
    border-color: #279fba;
}

.button.button-blue.button-3:hover,
.button.button-blue.button-3:focus,
.button.button-blue.button-3:active {
    color: #1f7f95 !important;
    border-color: #1f7f95;
}



/* ---------------------------------------------------------
   2. GANTRY LEGACY GRID
   Compatibilità con vecchi contenuti che utilizzano
   .g-grid, .g-block, .g-size-* e .size-*
   --------------------------------------------------------- */

.g-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.g-block {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    flex-grow: 0;
    flex-shrink: 0;
}


/* Larghezze Gantry con prefisso g-size */

.g-block.g-size-100 {
    flex-basis: 100%;
    max-width: 100%;
}

.g-block.g-size-75 {
    flex-basis: 75%;
    max-width: 75%;
}

.g-block.g-size-67,
.g-block.g-size-66 {
    flex-basis: 66.666666%;
    max-width: 66.666666%;
}

.g-block.g-size-60 {
    flex-basis: 60%;
    max-width: 60%;
}

.g-block.g-size-50 {
    flex-basis: 50%;
    max-width: 50%;
}

.g-block.g-size-40 {
    flex-basis: 40%;
    max-width: 40%;
}

.g-block.g-size-33 {
    flex-basis: 33.333333%;
    max-width: 33.333333%;
}

.g-block.g-size-25 {
    flex-basis: 25%;
    max-width: 25%;
}

.g-block.g-size-20 {
    flex-basis: 20%;
    max-width: 20%;
}


/* Alcuni vecchi contenuti possono usare size-* senza g- */

.g-block.size-100 {
    flex-basis: 100%;
    max-width: 100%;
}

.g-block.size-75 {
    flex-basis: 75%;
    max-width: 75%;
}

.g-block.size-67,
.g-block.size-66 {
    flex-basis: 66.666666%;
    max-width: 66.666666%;
}

.g-block.size-60 {
    flex-basis: 60%;
    max-width: 60%;
}

.g-block.size-50 {
    flex-basis: 50%;
    max-width: 50%;
}

.g-block.size-40 {
    flex-basis: 40%;
    max-width: 40%;
}

.g-block.size-33 {
    flex-basis: 33.333333%;
    max-width: 33.333333%;
}

.g-block.size-25 {
    flex-basis: 25%;
    max-width: 25%;
}

.g-block.size-20 {
    flex-basis: 20%;
    max-width: 20%;
}


/* Immagini responsive nei vecchi blocchi Gantry */

.g-block img {
    max-width: 100%;
    height: auto;
}


/* Su smartphone i blocchi legacy vengono impilati */

@media (max-width: 767.98px) {

    .g-block[class*="g-size-"],
    .g-block[class*="size-"] {
        flex-basis: 100%;
        max-width: 100%;
    }

}



/* ---------------------------------------------------------
   3. ALERT LEGACY
   Compatibilità con box inseriti nei vecchi articoli.
   Bootstrap 5 mantiene .alert, ma questi stili conservano
   maggiormente l'aspetto dei contenuti precedenti.
   --------------------------------------------------------- */

.alert {
    border-radius: .1875rem;
    padding: .938rem;
    margin-bottom: 1.5rem;
    text-shadow: none;
}

.alert-info {
    color: #3a87ad;
    background-color: #e2eff5 !important;
    border: 1px solid #c7e0ec !important;
}

.alert-success {
    color: #468847;
    background-color: #dfeedf !important;
    border: 1px solid #c4e0c4 !important;
}



/* ---------------------------------------------------------
   4. LABEL E BADGE LEGACY
   Bootstrap moderno non utilizza più .label.
   Necessario per vecchi contenuti Joomla/RocketTheme.
   --------------------------------------------------------- */

.label,
.badge {
    display: inline-block;
    padding: 2px 4px;
    font-size: 11.844px;
    font-weight: 700;
    line-height: 14px;
    color: #ffffff;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 3px;
}

.label-info,
.label-info[href] {
    background-color: #2d6987;
    color: #ffffff;
}

/* fine stili legacy */

/* =========================================================
   INFOHOTEL - HEADER / TOPBAR
   Joomla 6 / Cassiopeia Extended
   ========================================================= */


/* ---------------------------------------------------------
   1. CONTENITORE HEADER CASSIOPEIA
   --------------------------------------------------------- */

.container-header {
    position: relative;
    z-index: 1030;

    width: 100%;

    background: #ffffff;
    background-image: none;

    box-shadow: none;
}


/*
 * La posizione menu di Cassiopeia deve occupare
 * tutta la larghezza.
 */

.container-header .container-nav {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* Il modulo HTML occupa tutta la larghezza */

.container-header .container-nav > div,
.container-header .mod-custom {
    width: 100%;
}


/* =========================================================
   2. TOPBAR INFOHOTEL
   ========================================================= */

.ih-topbar {
    position: relative;

    width: 100%;

    background-color: #ffffff;
}


.ih-topbar > .container {
    width: 100%;

    margin-right: auto;
    margin-left: auto;
}

body:not(.home) .ih-topbar > .container {
    border-bottom: 1px solid #e8e8e8;
}


/*
 * Tre colonne:
 *
 * sinistra = hamburger
 * centro   = logo
 * destra   = social
 *
 * Le due colonne laterali hanno identica larghezza,
 * quindi il logo resta perfettamente centrato.
 */

.ih-topbar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    width: 100%;
    min-height: 88px;
}


/* =========================================================
   3. HAMBURGER
   ========================================================= */

.ih-topbar-menu {
    justify-self: start;
}

.ih-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0;
    padding: 0;

    color: var(--ih-heading);

    background-color: rgba(0, 0, 0, .05);

    border: 0;
    border-radius: 4px;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        color .2s ease,
        background-color .2s ease;
}

.ih-menu-toggle i {
    display: block;

    font-size: 27px;
    line-height: 1;
}

.ih-menu-toggle:hover,
.ih-menu-toggle:focus {
    color: var(--ih-primary);

    background-color: rgba(0, 0, 0, .08);
}

.ih-menu-toggle:focus-visible {
    outline: 2px solid var(--ih-primary);
    outline-offset: 3px;
}


/* =========================================================
   4. LOGO
   ========================================================= */

.ih-topbar-logo {
    justify-self: center;
}


.ih-topbar-logo a {
    display: block;

    line-height: 0;
    text-decoration: none;
}


.ih-topbar-logo img {
    display: block;

    width: 220px;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   5. SOCIAL
   ========================================================= */

.ih-topbar-social {
    justify-self: end;

    display: flex;
    align-items: center;

    gap: 8px;
}

.ih-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    background-color: #d6d6d6;
    color: #ffffff;

    font-size: 15px;
    line-height: 1;

    text-decoration: none;

    border-radius: 4px;

    transition:
        background-color .2s ease,
        opacity .2s ease;
}

.ih-social-link i {
    display: block;

    color: #ffffff;

    line-height: 1;
}


/* Facebook */

.ih-social-link:has(.fa-facebook-f):hover,
.ih-social-link:has(.fa-facebook-f):focus {
    background-color: #0866ff;
}


/* LinkedIn */

.ih-social-link:has(.fa-linkedin-in):hover,
.ih-social-link:has(.fa-linkedin-in):focus {
    background-color: #0a66c2;
}


/* Hover / focus */

.ih-social-link:hover,
.ih-social-link:focus {
    color: #ffffff;

    text-decoration: none;
}


/* Focus da tastiera */

.ih-social-link:focus-visible {
    outline: 2px solid var(--ih-primary);
    outline-offset: 2px;
}

/* =========================================================
   6. HOME DESKTOP
   Header trasparente sopra il carosello
   ========================================================= */

@media (min-width: 768px) {

    body.home .container-header {
        position: absolute;

        top: 0;
        right: 0;
        left: 0;

        width: 100%;

        background: transparent;
        background-image: none;

        box-shadow: none;
    }

    body.home .ih-topbar {
        background: transparent;
    }

    body.home .ih-menu-toggle {
        color: --ih-heading;

        background-color: rgba(255, 255, 255, .58);
    }

    body.home .ih-menu-toggle:hover,
    body.home .ih-menu-toggle:focus {
        color: var(--ih-primary);

        background-color: rgba(255, 255, 255, .82);
    }

}


/* =========================================================
   7. PAGINE INTERNE
   ========================================================= */

body:not(.home) .container-header {
    position: relative;

    background: #ffffff;
    background-image: none;
}


body:not(.home) .ih-topbar {
    background-color: #ffffff;
}


/* =========================================================
   8. OFFCANVAS
   ========================================================= */

.ih-offcanvas {
    width: min(380px, 90vw);

    color: var(--ih-text);

    background-color: #ffffff;

    border-right: 0;
}


.ih-offcanvas .offcanvas-header {
    min-height: 76px;

    padding: 1.25rem 1.5rem;

    border-bottom: 1px solid var(--ih-border);
}


.ih-offcanvas .offcanvas-title {
    margin: 0;

    font-family: var(--ih-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;

    color: var(--ih-heading);
}


.ih-offcanvas .btn-close {
    margin: 0;

    opacity: .65;
}


.ih-offcanvas .btn-close:hover,
.ih-offcanvas .btn-close:focus {
    opacity: 1;
}


.ih-offcanvas .offcanvas-body {
    padding: .5rem 1.5rem 2rem;
}


/* =========================================================
   9. MODULO MENU JOOMLA NELL'OFFCANVAS
   ========================================================= */

/*
 * Joomla genera:
 *
 * <ul class="mod-menu mod-list nav">
 *
 * .nav di Bootstrap è flex; nell'offcanvas
 * lo trasformiamo in un normale menu verticale.
 */

.ih-offcanvas .mod-menu {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Voci principali */

.ih-offcanvas .mod-menu > li {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    border-bottom: 1px solid var(--ih-border);
}


/* Link principali */

.ih-offcanvas .mod-menu > li > a {
    display: block;

    width: 100%;

    padding: 1rem 0;

    font-family: var(--ih-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;

    color: var(--ih-heading);

    background: transparent;

    text-decoration: none;

    transition:
        color .2s ease,
        padding-left .2s ease;
}


.ih-offcanvas .mod-menu > li > a:hover,
.ih-offcanvas .mod-menu > li > a:focus {
    color: var(--ih-primary);

    padding-left: .25rem;

    text-decoration: none;
}


/* Voce corrente */

.ih-offcanvas .mod-menu > .active > a,
.ih-offcanvas .mod-menu > .current > a {
    color: var(--ih-primary);
    font-weight: 700;
}


/* Eventuali sottomenu */

.ih-offcanvas .mod-menu ul {
    display: block;

    margin: 0;
    padding: 0 0 .65rem 1rem;

    list-style: none;
}


.ih-offcanvas .mod-menu ul li {
    display: block;

    margin: 0;
    padding: 0;
}


.ih-offcanvas .mod-menu ul a {
    display: block;

    padding: .5rem 0;

    font-family: var(--ih-font-body);
    font-size: .94rem;
    font-weight: 400;
    line-height: 1.35;

    color: var(--ih-text);

    text-decoration: none;
}


.ih-offcanvas .mod-menu ul a:hover,
.ih-offcanvas .mod-menu ul a:focus {
    color: var(--ih-primary);
}


/* =========================================================
   10. MOBILE
   Header sempre bianco
   ========================================================= */

@media (max-width: 767.98px) {

    .container-header,
    body.home .container-header,
    body:not(.home) .container-header {
        position: relative;

        background: #ffffff;
        background-image: none;

        box-shadow: none;
    }


    .ih-topbar,
    body.home .ih-topbar {
        background-color: #ffffff;
    }


    /*
     * Manteniamo tre colonne simmetriche.
     *
     * I social sono nascosti ma la colonna destra resta
     * disponibile per mantenere il logo centrato.
     */

    .ih-topbar-inner {
        grid-template-columns: 48px 1fr 48px;

        min-height: 74px;
    }


    .ih-topbar-menu {
        grid-column: 1;

        justify-self: start;
    }


    .ih-topbar-logo {
        grid-column: 2;

        justify-self: center;
    }


    .ih-topbar-social {
        grid-column: 3;

        display: none;
    }


    .ih-topbar-logo img {
        width: 200px;
    }


    /*
     * In home desktop hamburger e social sono bianchi.
     * Su mobile l'hamburger deve tornare scuro.
     */

    body.home .ih-menu-toggle {
        color: var(--ih-heading);
    }


    body.home .ih-menu-toggle:hover,
    body.home .ih-menu-toggle:focus {
        color: var(--ih-primary);
    }

}


/* =========================================================
   11. TELEFONI PICCOLI
   ========================================================= */

@media (max-width: 420px) {

    .ih-topbar > .container {
        padding-right: 12px;
        padding-left: 12px;
    }


    .ih-topbar-inner {
        min-height: 70px;
    }


    .ih-topbar-logo img {
        width: 180px;
    }


    .ih-menu-toggle {
        width: 40px;
        height: 40px;
    }


    .ih-menu-toggle i {
        font-size: 22px;
    }

}

/* =========================================================
   INFOHOTEL - HOME CAROUSEL
   ========================================================= */

.ih-home-carousel {
    position: relative;

    width: 100%;

    background-color: var(--ih-dark);

    overflow: hidden;
}


/* Immagini: altezza proporzionale alla larghezza */

.ih-home-carousel .ih-carousel-image {
    display: block;

    width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   Sfumatura verso la sezione scura successiva
   --------------------------------------------------------- */

.ih-home-carousel .carousel-item::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -2px;
    left: 0;

    height: 55%;

    background: linear-gradient(
        to bottom,
        rgba(32, 35, 42, 0) 0%,
        rgba(32, 35, 42, .12) 20%,
        rgba(32, 35, 42, .38) 48%,
        rgba(32, 35, 42, .72) 72%,
        var(--ih-dark) 90%,
        var(--ih-dark) 100%
    );

    pointer-events: none;

    z-index: 1;
}


/* ---------------------------------------------------------
   Contenuto centrale
   --------------------------------------------------------- */

.ih-carousel-content {
    position: absolute;

    top: 40%;
    left: 50%;

    width: min(1100px, 90%);

    transform: translate(-50%, -50%);

    text-align: center;

    color: #000000;

    z-index: 2;
}


.ih-carousel-title {
    margin-bottom: .9rem;

    font-family: "Mulish IH ExtraLight", Arial, sans-serif;
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.1;

    color: #000000;
}

.ih-carousel-desc {
    margin-bottom: 1.6rem;

    font-family: "Mulish IH ExtraLight", Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.5;

    color: #000000;
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.ih-carousel-btn {
    padding: .65rem 1.6rem;

    background-color: var(--ih-primary);
    border-color: var(--ih-primary);

    color: #ffffff;

    font-weight: 700;

    text-decoration: none;
}


.ih-carousel-btn:hover,
.ih-carousel-btn:focus {
    background-color: var(--ih-primary-dark);
    border-color: var(--ih-primary-dark);

    color: #ffffff;
}


/* ---------------------------------------------------------
   Indicatori
   --------------------------------------------------------- */

.ih-home-carousel .carousel-indicators {
    bottom: 26%;

    margin-bottom: 0;

    z-index: 3;
}

@media (min-width: 1200px) {

    .ih-home-carousel .carousel-indicators {
        bottom: 28%;
    }

}

.ih-home-carousel .carousel-indicators [data-bs-target] {
    width: 14px;
    height: 14px;

    margin-right: 5px;
    margin-left: 5px;

    background-color: var(--ih-text);

    border: 0;
    border-radius: 50%;

    opacity: .65;
}


.ih-home-carousel .carousel-indicators .active {
    background-color: var(--ih-primary);

    opacity: 1;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 959.98px) {

    .ih-carousel-title {
        font-size: 2.75rem;
    }

}


@media (max-width: 767.98px) {

    .ih-carousel-title {
        font-size: 2.25rem;
    }

    .ih-carousel-desc {
        display: none;
    }

    .ih-home-carousel .carousel-indicators {
        bottom: 12px;
    }

}


@media (max-width: 480px) {

    .ih-carousel-title {
        margin-bottom: .8rem;

        font-size: 1.5rem;
    }

    .ih-carousel-btn {
        padding: .4rem 1rem;

        font-size: .8rem;
    }

}

/* =========================================================
   INFOHOTEL - HOME CONTENUTI IN EVIDENZA
   ========================================================= */

.ih-home-featured {
    position: relative;

    background-color: var(--ih-dark);

    padding-bottom: 4rem;
}


/*
 * Il blocco viene sollevato sopra il bordo inferiore
 * del carousel, mantenendo visibile sotto di esso
 * l'immagine sfumata del carousel.
 */

.ih-home-featured-content {
    position: relative;

    max-width: 1200px;

    z-index: 5;

    transform: translateY(-150px);

    margin-bottom: -150px;
}


/* ---------------------------------------------------------
   Tablet / mobile
   --------------------------------------------------------- */

@media (max-width: 991.98px) {

    .ih-home-featured {
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    .ih-home-featured-content {
        transform: none;

        margin-bottom: 0;
    }

}

/* =========================================================
   HOME - BLOCCHI LATERALI
   ========================================================= */

.ih-home-side-blocks {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* ---------------------------------------------------------
   Card
   --------------------------------------------------------- */

.ih-side-card {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 3px;
}

.ih-side-card-image {
    display: block;

    width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   Etichetta superiore
   --------------------------------------------------------- */

.ih-side-card-tag {
    position: absolute;

    top: 16px;
    left: 16px;

    padding: 6px 10px;

    background-color: rgba(32, 35, 42, .72);
    color: #ffffff;

    font-size: .9rem;
    line-height: 1.2;

    border-radius: 2px;
}


/* ---------------------------------------------------------
   Icona superiore destra
   --------------------------------------------------------- */

.ih-side-card-icon {
    position: absolute;

    top: 17px;
    right: 16px;

    color: #ffffff;

    font-size: 16px;
    line-height: 1;

    text-decoration: none;
}

.ih-side-card-icon:hover,
.ih-side-card-icon:focus {
    color: var(--ih-primary);
}


/* ---------------------------------------------------------
   Contenuto inferiore
   --------------------------------------------------------- */

.ih-side-card-content {
    position: absolute;

    left: 30px;
    bottom: 30px;

    z-index: 2;
}


/* Titolo secondo blocco */

.ih-side-card-title {
    margin-bottom: .55rem;

    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
}

.ih-side-card-title a {
    color: #ffffff;

    text-decoration: none;
}

.ih-side-card-title a:hover,
.ih-side-card-title a:focus {
    color: #ffffff;
}


/* CTA */

.ih-side-card-button {
    display: inline-block;

    padding: .8rem 1.6rem;

    background-color: var(--ih-primary);
    color: #ffffff;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;

    transition: background-color .2s ease;
}

.ih-side-card-button:hover,
.ih-side-card-button:focus {
    background-color: var(--ih-primary-dark);
    color: #ffffff;

    text-decoration: none;
}


/* ---------------------------------------------------------
   Esperto: leggero gradiente per rendere leggibile il titolo
   --------------------------------------------------------- */

.ih-side-card-expert::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    height: 65%;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),
        rgba(0, 0, 0, .28)
    );

    pointer-events: none;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767.98px) {

    .ih-side-card-content {
        left: 20px;
        bottom: 20px;
    }

    .ih-side-card-tag {
        top: 12px;
        left: 12px;
    }

    .ih-side-card-icon {
        top: 14px;
        right: 12px;
    }

    .ih-side-card-title {
        font-size: 1.2rem;
    }

    .ih-side-card-button {
        padding: .65rem 1.2rem;

        font-size: .9rem;
    }

}

/* =========================================================
   HOME - ARTICOLI IN EVIDENZA
   Modulo Articoli Joomla 6
   ========================================================= */


/* ---------------------------------------------------------
   Griglia 2 x 2
   --------------------------------------------------------- */

.ih-home-featured-main .mod-articles-items {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Ogni elemento della griglia deve occupare tutta l'altezza */

.ih-home-featured-main .mod-articles-items > li {
    min-width: 0;
}


/* ---------------------------------------------------------
   Card
   --------------------------------------------------------- */

.ih-home-featured-main .mod-articles-item {
    height: 100%;

    background-color: #ffffff;

    border-radius: 2px;

    overflow: hidden;
}


/*
 * Joomla genera:
 * titolo → immagine → testo → leggi tutto
 *
 * Con flexbox portiamo l'immagine sopra il titolo.
 */

.ih-home-featured-main .mod-articles-item-content {
    display: flex;
    flex-direction: column;

    height: 100%;
}


/* ---------------------------------------------------------
   Immagine
   --------------------------------------------------------- */

.ih-home-featured-main .mod-articles-image {
    order: 1;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


.ih-home-featured-main .mod-articles-image img {
    display: block;

    width: 100%;
    aspect-ratio: 1.56 / 1;

    object-fit: cover;
}


/* ---------------------------------------------------------
   Titolo
   --------------------------------------------------------- */

.ih-home-featured-main .mod-articles-title {
    order: 2;

    margin: 0;
    padding: 22px 15px 0;

    font-family: var(--ih-font-accent);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}


.ih-home-featured-main .mod-articles-title a {
    color: var(--ih-primary);

    text-decoration: none;
}


.ih-home-featured-main .mod-articles-title a:hover,
.ih-home-featured-main .mod-articles-title a:focus {
    color: var(--ih-primary-dark);

    text-decoration: none;
}


/* ---------------------------------------------------------
   Introduzione
   --------------------------------------------------------- */

.ih-home-featured-main .mod-articles-item-content > p:not(.readmore) {
    order: 3;

    margin: 5px 15px 0;
    padding: 0;

    font-family: var(--ih-font-body);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;

    color: var(--ih-muted);
}


/*
 * Evita che eventuali <strong> dell'introduzione
 * rendano visivamente irregolare il testo della card.
 */

.ih-home-featured-main .mod-articles-item-content > p:not(.readmore) strong {
    font-weight: 400;
}


/* ---------------------------------------------------------
   Leggi tutto
   --------------------------------------------------------- */

.ih-home-featured-main .readmore {
    order: 4;

    margin: auto 15px 0;
    padding: 14px 0 12px;
}


.ih-home-featured-main .readmore .btn {
    display: inline;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;

    color: var(--ih-primary);

    font-family: var(--ih-font-body);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none;

    box-shadow: none;
}


.ih-home-featured-main .readmore .btn:hover,
.ih-home-featured-main .readmore .btn:focus {
    background: transparent;

    color: var(--ih-primary-dark);

    text-decoration: none;

    box-shadow: none;
}


/* Elimina la freccia aggiunta dal modulo Joomla */

.ih-home-featured-main .readmore .icon-chevron-right {
    display: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {

    .ih-home-featured-main .mod-articles-items {
        grid-template-columns: 1fr;

        gap: 24px;
    }

}

/* banner fiere */

.fierebanner img {
    border-radius:3px;
}

.home .container-banner {
  margin-bottom:0;
}

.home .container-component > :first-child {
  margin-top:0;
}

/* parte argomenti + categorie catalogo home */

.home-forniture-band {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  padding: 10px 0 16px;
  background: url("/images/forniture-attrezzature-alberghiere-2.jpg") bottom center / cover no-repeat;
}

.home-forniture-band .row > [class*="col-"] {
  display: flex;
}

.home-forniture-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: rgba(255, 255, 255, 0.90);
}

.home-forniture-panel__title {
  margin: 0;
  padding: 11px 20px;
  background: rgba(255, 255, 255, 0.98);
  color: #14243c;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
}

.home-forniture-panel__content {
  flex: 1;
  padding: 24px 25px;
}

.home-forniture-panel__content .moduletable {
  margin: 0;
  padding: 0;
}

/* Colonna sinistra: tag Argomenti */
.home-forniture-panel--topics .home-forniture-panel__content {  
  text-align: center;
}

.home-forniture-panel--topics .tagspopular {
  margin: 0;
  padding: 0;
}

.home-forniture-panel--topics .tagspopular .tag {
  display: block;
  margin: 0;
  padding: 0;
}

.home-forniture-panel--topics .tagspopular .tag-name {
  display: inline-block;
  color: #ed0615;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 19px !important;
  font-weight: 300;
  line-height: 1.45;
  text-decoration: none;
}

.home-forniture-panel--topics .tagspopular .tag-name:hover,
.home-forniture-panel--topics .tagspopular .tag-name:focus {
  color: #a8000a;
  text-decoration: underline;
}

/* Colonna destra: categorie principali */
.home-forniture-panel--categories {
  background: rgba(255, 255, 255, 0.96);
}

.home-forniture-panel--categories .home-forniture-panel__content {
  padding-top: 20px;
}

.home-forniture-panel--categories .ifn-cc-root,
.home-forniture-panel--categories .ifn-cc-children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-forniture-panel--categories .ifn-cc-root > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mantiene visibili soltanto le prime nove categorie, come nel riferimento. */
.home-forniture-panel--categories .ifn-cc-root > li:nth-child(n + 10) {
  display: none;
}

.home-forniture-panel--categories .ifn-cc-row {
  display: block !important;
}

.home-forniture-panel--categories .ifn-cc-toggle,
.home-forniture-panel--categories .ifn-cc-children {
  display: none !important;
}

.home-forniture-panel--categories .ifn-cc-link {
  display: block;
  padding: 6px 0;
  color: #132b4d;
  border-bottom: 1px solid #dedede;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.25;
  text-decoration: none;
}

.home-forniture-panel--categories .ifn-cc-link:hover,
.home-forniture-panel--categories .ifn-cc-link:focus {
  color: #d40614;
}

@media (max-width: 767px) {
  .home-forniture-band {
    padding: 10px 0;
  }

  .home-forniture-panel {
    margin-bottom: 15px;
  }

  .home-forniture-panel__title {
    font-size: 17px;
  }

  .home-forniture-panel__content,
  .home-forniture-panel--topics .home-forniture-panel__content,
  .home-forniture-panel--categories .home-forniture-panel__content {
    min-height: 0;
  }
}

/* Blocco articoli home */

/* Griglia news home */
.blocco-articoli-home .mod-articles-items {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blocco-articoli-home .mod-articles-items > li {
  margin: 0;
  padding: 0;
}

/* Card */
.blocco-articoli-home .mod-articles-item {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.blocco-articoli-home .mod-articles-item-content {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

/* Nel markup titolo e immagine sono invertiti: riportiamo l'immagine in alto. */
.blocco-articoli-home .mod-articles-image {
  order: 1;
  margin: 0 0 21px;
  overflow: hidden;
  aspect-ratio: 1.58;
}

.blocco-articoli-home .mod-articles-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Titolo */
.blocco-articoli-home .mod-articles-title {
  order: 2;
  margin: 0 0 6px;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.28;
}

.blocco-articoli-home .mod-articles-title a {
  color: #2d2d2d;
  text-decoration: none;
}

.blocco-articoli-home .mod-articles-title a:hover,
.blocco-articoli-home .mod-articles-title a:focus {
  color: #e40016;
}

/* Introtext: Joomla lo stampa come <p> senza classe. */
.blocco-articoli-home .mod-articles-item-content > p:not(.readmore) {
  order: 3;
  margin: 0 0 14px;
  color: #999;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.48;
}

.blocco-articoli-home .mod-articles-item-content > p:not(.readmore) strong {
  font-weight: inherit;
}

/* Link finale */
.blocco-articoli-home .readmore {
  order: 4;
  margin: 0 0 2px;
}

.blocco-articoli-home .readmore .btn {
  padding: 0;
  color: #e40016;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 0;
  font-weight: 300;
  text-decoration: none;
}

.blocco-articoli-home .readmore .btn::after {
  content: "Leggi tutto";
  font-size: 16px;
}

.blocco-articoli-home .readmore .icon-chevron-right {
  display: none;
}

.blocco-articoli-home .readmore .btn:hover,
.blocco-articoli-home .readmore .btn:focus {
  color: #a9000c;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 991px) {
  .blocco-articoli-home .mod-articles-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .blocco-articoli-home .mod-articles-items {
    grid-template-columns: 1fr;
  }

  .blocco-articoli-home .mod-articles-title {
    font-size: 18px;
  }
}

/* Parte bassa home */ 

.home-bottom-area {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* Blocco consulenza */
.home-esperto {
  background: #f8f9fb;
}

.home-esperto .container {
  padding-top: 95px;
  padding-bottom: 85px;
}

.home-esperto__text {
  max-width: 540px;
}

.home-esperto__text h2 {
  margin: 0 0 12px;
  color: #687687;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 31px;
  font-weight: 300;
  line-height: 1.3;
}

.home-esperto__text p {
  margin: 0;
}

.home-esperto__text a {
  color: #687687;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-decoration: underline;
}

.home-esperto__text a:hover,
.home-esperto__text a:focus {
  color: #e40016;
}

.home-esperto__image {
  text-align: center;
}

.home-esperto__image img {
  display: inline-block;
  width: 100%;
  max-width: 380px;
  height: auto;
}

/* Fascia logo finale */
.home-logo-footer {
  padding: 70px 0 80px;
  background: #20242c;
}

.home-logo-footer__link,
.home-logo-footer__link img {
  display: block;
}

.home-logo-footer__link img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.home-esperto .container {
  max-width: 1100px;
}

/* Mobile */
@media (max-width: 767px) {
  .home-esperto .container {
    padding-top: 55px;
    padding-bottom: 45px;
  }

  .home-esperto__text {
    max-width: none;
    text-align: center;
  }

  .home-esperto__text h2 {
    font-size: 25px;
  }

  .home-esperto__image {
    margin-top: 35px;
  }

  .home-esperto__image img {
    max-width: 270px;
  }

  .home-logo-footer {
    padding: 45px 0;
  }

  .home-logo-footer__link img {
    max-width: 100%;
  }
}

/* Footer */

footer.container-footer.footer.full-width > .grid-child {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer.container-footer.footer.full-width #mod-custom142 {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Newsletter */

.footer-newsletter {
  width: 100%;
  margin: 0;
  padding: 55px 0;
  background: #1B1E23;
}

.footer-newsletter > .container,
.footer-legal > .container {
  width: 100%;
  max-width: 1100px !important;
  margin-right: auto;
  margin-left: auto;
}

.footer-newsletter__intro {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.footer-newsletter__intro h2 {
  margin: 0 0 10px;
  color: #fff;
  font-family: "Mulish", Arial, sans-serif;
  font-size: 27px;
  font-weight: 300;
  line-height: 1.25;
}

.footer-newsletter__intro p {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto !important;
  color: rgba(255, 255, 255, 0.75);
  font-family: "Mulish", Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  text-align: center !important;
}

.footer-newsletter__form {
  width: 100%;
  margin-top: 30px;
  text-align: center;
}

.footer-newsletter__form .moduletable {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Informazioni legali */

.footer-legal {
  width: 100%;
  margin: 0;
  padding: 22px 0;
  background: #17181D;
  color: rgba(255, 255, 255, 0.46);
  font-family: "Mulish", Arial, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.45;
}

.footer-legal a {
  color: #e4e4e4;
  text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus {
  color: #fff;
  text-decoration: underline;
}

/* Layout responsive */

@media (max-width: 1199px) {
  .footer-newsletter .container,
  .footer-legal .container {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 767px) {
  .footer-newsletter {
    padding: 42px 0;
  }

  .footer-newsletter__intro h2 {
    font-size: 23px;
  }

  .footer-legal {
    padding: 18px 0;
    font-size: 13px;
  }
}

.container-bottom-a > *,
.container-bottom-b > * {
  margin-bottom: 0;
}

.footer {
  margin-top: 0;
}

/* =========================================================
   SIDEBAR - IN EVIDENZA
   Modulo Articoli Joomla 6
   ========================================================= */


/* ---------------------------------------------------------
   Contenitore modulo
   --------------------------------------------------------- */

.sidebar-news {
    padding: 22px 24px 28px;

    background-color: var(--ih-light);
    color: var(--ih-text);
}


/* Titolo modulo "IN EVIDENZA" */

.sidebar-news > h3 {
    margin: 0 0 28px;
    padding: 0;

    font-family: var(--ih-font-body);
    font-size: 1.25rem;
    font-weight: 200;
    line-height: 1.2;

    color: var(--ih-text);

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Lista articoli
   --------------------------------------------------------- */

.sidebar-news .mod-articles-items {
    display: block;

    margin: 0;
    padding: 0;

    list-style: none;
}


.sidebar-news .mod-articles-items > li {
    margin: 0 0 30px;
    padding: 0;
}


.sidebar-news .mod-articles-items > li:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Struttura articolo
   --------------------------------------------------------- */

/*
 * Joomla genera:
 * titolo → immagine → testo → leggi tutto
 *
 * Riordiniamo:
 * immagine → titolo → testo → leggi tutto
 */

.sidebar-news .mod-articles-item-content {
    display: flex;
    flex-direction: column;
}


/* ---------------------------------------------------------
   Immagine
   --------------------------------------------------------- */

.sidebar-news .mod-articles-image {
    order: 1;

    width: 100%;

    margin: 0 0 22px;
    padding: 0;
}


.sidebar-news .mod-articles-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
}


/* ---------------------------------------------------------
   Titolo articolo
   --------------------------------------------------------- */

.sidebar-news .mod-articles-title {
    order: 2;

    margin: 0 0 8px;
    padding: 0;

    font-family: var(--ih-font-accent);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}


.sidebar-news .mod-articles-title a {
    color: var(--ih-primary);

    text-decoration: none;
}


.sidebar-news .mod-articles-title a:hover,
.sidebar-news .mod-articles-title a:focus {
    color: var(--ih-primary-dark);

    text-decoration: none;
}


/* ---------------------------------------------------------
   Testo introduttivo
   --------------------------------------------------------- */

.sidebar-news .mod-articles-item-content > p:not(.readmore) {
    order: 3;

    margin: 0 0 8px;
    padding: 0;

    font-family: var(--ih-font-body);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;

    color: var(--ih-muted);

    text-align: left !important;
}


/* Mantiene uniforme il testo anche se l'intro contiene strong */

.sidebar-news .mod-articles-item-content > p:not(.readmore) strong {
    font-weight: 400;
}


/* ---------------------------------------------------------
   Leggi tutto
   --------------------------------------------------------- */

.sidebar-news .readmore {
    order: 4;

    margin: 0;
    padding: 0;
}


.sidebar-news .readmore .btn {
    display: inline;

    margin: 0;
    padding: 0;

    background: transparent;
    border: 0;
    border-radius: 0;

    color: var(--ih-primary);

    font-family: var(--ih-font-body);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.4;

    text-decoration: none;

    box-shadow: none;
}


.sidebar-news .readmore .btn:hover,
.sidebar-news .readmore .btn:focus {
    background: transparent;

    color: var(--ih-primary-dark);

    text-decoration: none;

    box-shadow: none;
}


/* Rimuove la freccia del pulsante Joomla */

.sidebar-news .readmore .icon-chevron-right {
    display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .sidebar-news {
        padding: 20px;
    }

}

/* =========================================================
   SIDEBAR - CERCA
   Joomla Smart Search / Finder
   ========================================================= */

.cerca-sidebar {
    padding: 15px;

    background-color: var(--ih-light);
}


/* Form */

.cerca-sidebar .mod-finder,
.cerca-sidebar search,
.cerca-sidebar .awesomplete {
    display: block;

    width: 100%;
}


/* Label accessibile ma non visibile */

.cerca-sidebar label.finder {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}


/* Campo di ricerca */

.cerca-sidebar .js-finder-search-query {
    width: 100%;
    height: 48px;

    margin: 0;
    padding: 0 16px;

    background-color: #ffffff;

    border: 1px solid #999999;
    border-radius: 24px;

    color: var(--ih-text);

    font-family: var(--ih-font-body);
    font-size: .875rem;
    font-weight: 400;

    box-shadow: none;
}


/* Placeholder */

.cerca-sidebar .js-finder-search-query::placeholder {
    color: #aaaaaa;

    opacity: 1;
}


/* Focus */

.cerca-sidebar .js-finder-search-query:focus {
    background-color: #ffffff;

    border-color: #777777;

    box-shadow: none;
    outline: none;
}

/* =========================================================
   SIDEBAR - PUBBLICITÀ & COLLABORAZIONI
   ========================================================= */

.sidebar-grey {
    border: 0;
    border-radius: 0;

    background-color: var(--ih-light);

    box-shadow: none;
}


/* Corpo card */

.sidebar-grey .card-body {
    padding: 15px;
}


/* Modulo custom */

.sidebar-grey .mod-custom {
    margin: 0;
}


/* Pulsante */

.sidebar-grey .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: .65rem 1.6rem;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #eef8fd 45%,
        #a9dcf5 100%
    );

    border: 1px solid #b8cbd4;

    color: #52636b;

    font-family: var(--ih-font-body);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;

    border-radius: 999px;

    text-decoration: none;

    box-shadow: none;

    transition:
        border-color .2s ease,
        color .2s ease,
        filter .2s ease;
}


/* Hover / focus */

.sidebar-grey .btn-secondary:hover,
.sidebar-grey .btn-secondary:focus {
    background: linear-gradient(
        90deg,
        #f7fcff 0%,
        #dceff9 45%,
        #80c8eb 100%
    );

    border-color: #8db9cc;

    color: #344c57;

    text-decoration: none;

    box-shadow: none;
}

/* =========================================================
   INFOHOTEL - ARTICOLO
   Joomla 6 / com_content
   ========================================================= */


/* ---------------------------------------------------------
   Titolo articolo
   --------------------------------------------------------- */

.com-content-article.item-page .page-header {
    margin: 0 0 .5rem;
    padding: 0;

    border: 0;
}

.com-content-article.item-page .page-header h1 {
    margin: 0;
    padding: 0;

    font-family: var(--ih-font-accent);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;

    color: var(--ih-heading);
}


/* ---------------------------------------------------------
   Informazioni articolo
   --------------------------------------------------------- */

.com-content-article.item-page .article-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem 1rem;

    margin: 0 0 .5rem;
    padding: 0;

    color: var(--ih-muted);

    font-family: var(--ih-font-body);
    font-size: .9rem;
    font-weight: 300;
    line-height: 1.5;
}


/* "Dettagli" non visibile */

.com-content-article.item-page .article-info-term {
    display: none;
}


.com-content-article.item-page .article-info dd {
    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 0;
}


/* Icone data */

.com-content-article.item-page .article-info [class^="icon-"],
.com-content-article.item-page .article-info [class*=" icon-"] {
    margin-right: .35rem;
}


/* ---------------------------------------------------------
   Tag
   --------------------------------------------------------- */

.com-content-article.item-page .tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;

    margin: 0 0 1rem;
    padding: 0;

    list-style: none;
}


.com-content-article.item-page .tags .list-inline-item {
    margin: 0;
}

.com-content-article.item-page .tags a:hover,
.com-content-article.item-page .tags a:focus {
    background-color: var(--ih-primary);

    color: #ffffff;

    text-decoration: none;

    box-shadow: none;
}


/* ---------------------------------------------------------
   Immagine principale
   --------------------------------------------------------- */

.com-content-article.item-page > .item-image {
    clear: both;

    width: 100%;

    margin: 0 0 1.5rem;
    padding: 0;
}


.com-content-article.item-page > .item-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
}


/* ---------------------------------------------------------
   Corpo articolo
   --------------------------------------------------------- */

.com-content-article__body {
    font-family: var(--ih-font-reading);

    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;

    letter-spacing: 0;

    color: #4f4f4f;;
}


.com-content-article__body p {
    margin: 0 0 1rem;
}


.com-content-article__body strong,
.com-content-article__body b {
    font-weight: 600;
}


/* Link */

.com-content-article__body a {
    color: var(--ih-primary);

    text-decoration: none;
}


.com-content-article__body a:hover,
.com-content-article__body a:focus {
    color: var(--ih-primary-dark);

    text-decoration: underline;
}


/* ---------------------------------------------------------
   H2
   --------------------------------------------------------- */

.com-content-article__body h2 {
    margin: 2.25rem 0 .9rem;

    font-family: var(--ih-font-body);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;

    color: var(--ih-heading);
}


/* ---------------------------------------------------------
   H3
   --------------------------------------------------------- */

.com-content-article__body h3 {
    margin: 1.9rem 0 .75rem;

    font-family: var(--ih-font-body);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;

    color: var(--ih-heading);
}


/* H4 */

.com-content-article__body h4 {
    margin: 1.6rem 0 .65rem;

    font-family: var(--ih-font-body);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;

    color: var(--ih-heading);
}


/* ---------------------------------------------------------
   Liste
   --------------------------------------------------------- */

.com-content-article__body ul,
.com-content-article__body ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}


.com-content-article__body li {
    margin-bottom: .35rem;
}


/* ---------------------------------------------------------
   Immagini nel corpo
   --------------------------------------------------------- */

.com-content-article__body img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   Citazioni
   --------------------------------------------------------- */

.com-content-article__body blockquote {
    margin: 1.75rem 0;
    padding: .25rem 0 .25rem 1.25rem;

    border-left: 4px solid var(--ih-primary);

    color: var(--ih-text);

    font-size: 1.05rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */


/* 960 - 1199 px */

@media (min-width: 960px) and (max-width: 1199.98px) {

    .com-content-article.item-page .page-header h1 {
        font-size: 2.75rem;
    }

}


/* 768 - 959 px */

@media (min-width: 768px) and (max-width: 959.98px) {

    .com-content-article.item-page .page-header h1 {
        font-size: 2.5rem;
    }

}


/* Mobile */

@media (max-width: 767.98px) {

    .com-content-article.item-page .page-header h1 {
        font-size: 2rem;
    }

    .com-content-article__body h2 {
        margin-top: 1.8rem;

        font-size: 1.75rem;
    }

    .com-content-article__body h3 {
        font-size: 1.5rem;
    }

    .com-content-article__body h4 {
        font-size: 1.3rem;
    }

}

/* Larghezza editoriale articolo */

.com-content-article.item-page {
    width: 100%;
    max-width: 850px;
    padding-top:2rem;
    margin-inline: auto;
}

@media (max-width: 767.98px) {
    .com-content-article.item-page {
        padding-top: 1.25rem;
    }
}