/* Stili che Joomla inseriva inline nell'<head> (Helix, Easy Cookie Info) + lightbox gallerie */
h1{font-family: 'Arial', sans-serif;}
.logo-image {height:36px;}.logo-image-phone {height:36px;}

#easycookieinfo {
	position: fixed;
	width: 100%;top:0px;
	right: 0;
	left: 0;
	z-index: 10000;
	background: #323A38;
	color: #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
	padding: 25px 0;
	box-sizing: border-box;
}
#easycookieinfo .text { text-align: center; font-size: 14px; padding: 0 15px 30px 15px; box-sizing: border-box; }
#easycookieinfo .text > a { color: #51B7DE; text-decoration: none; }
#easycookieinfo .text > a:hover, #easycookieinfo .text > a:active, #easycookieinfo .text > a:focus { text-decoration: underline; }
#easycookieinfo .accept { text-align: center; box-sizing: border-box; }
#easycookieinfo .accept > a {
	display: inline-block; background: #3C89A7; color: #FFFFFF; padding: 8px 15px; margin: 0;
	font-size: 16px; line-height:20px; text-align: center; vertical-align: middle; font-weight: bold;
	text-transform: uppercase; border: none; border-radius: 4px; text-shadow: none; text-decoration: none;
}
#easycookieinfo .accept > a:hover, #easycookieinfo .accept > a:focus, #easycookieinfo .accept > a:active { background-color: #367B96; color: #FFFFFF; text-decoration: none; }
@media (min-width: 700px) {
	#easycookieinfo .text { float: left; font-size: 14px; width: 70%; text-align: left; padding: 4px 15px 0 30px; }
	#easycookieinfo .accept { float: right; width: 30%; text-align: right; padding: 0 30px 0 15px; }
}

/* Lightbox gallerie (sostituisce OS Gallery / fancybox) */
.site-lightbox { position: fixed; inset: 0; z-index: 10050; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; }
.site-lightbox img { max-width: 92vw; max-height: 86vh; box-shadow: 0 5px 20px rgba(0,0,0,.5); border-radius: 4px; }
.site-lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; padding: 10px 18px; cursor: pointer; }
.site-lightbox .lb-close { top: 10px; right: 10px; }
.site-lightbox .lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.site-lightbox .lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

/* FAQ (sostituisce FAQ Book Pro) */
.faq-topic-title { color: #00a8d7; font-size: 40px; margin: 30px 0 25px; }
.faq-item { border-bottom: 1px solid #00a8d7; padding: 18px 0 18px 12px; }
.faq-question { background: none; border: 0; padding: 0; color: #00a8d7; font-size: 21px; text-align: left; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
.faq-question:hover span:last-child { text-decoration: underline; }
.faq-question .fa { font-size: 14px; transition: transform .15s; }
.faq-item.is-open .faq-question .fa { transform: rotate(90deg); }
.faq-excerpt, .faq-answer { font-size: 15px; color: #333; margin: 10px 0 0 20px; }

/* Pagina galleria: griglia 4 colonne a tutta larghezza come OS Gallery */
.gallery-page-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.gallery-page-item { position: relative; display: block; overflow: hidden; }
.gallery-page-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.gallery-page-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; background: rgba(0,0,0,.45); color: #fff; font-size: 13px; opacity: 0; transition: opacity .2s; }
.gallery-page-item:hover .gallery-page-caption { opacity: 1; }
@media (max-width: 991px) { .gallery-page-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) {
	/* Allineamento come nella pagina originale (colonna di navigazione di FAQ Book a sinistra) */
	.faq-topic { margin-left: 190px; }
	/* Spazio lasciato dalle schede di OS Gallery sopra la griglia */
	.gallery-page { margin-top: 100px; }
}

/* Mobile/tablet: icone Facebook e Instagram nella barra blu, a sinistra del pulsante del menu
   (nel tema originale andavano a capo sotto l'intestazione, sopra lo slider) */
@media (max-width: 991.98px) {
    #sp-header .row { position: relative; }
    #sp-header #sp-position7 {
        position: absolute;
        top: 0;
        right: 56px;
        width: auto;
        height: 60px;
        padding: 0;
        display: flex;
        align-items: center;
    }
    #sp-header #sp-position7 .sp-column,
    #sp-header #sp-position7 .sp-module,
    #sp-header #sp-position7 table { margin: 0; }
}

/* Mobile: il tema originale nascondeva il testo delle slide (restava solo la fascia azzurra vuota) */
@media (max-width: 767.98px) {
    .djslider-default .slide-desc-text-default .slide-title {
        display: block;
        margin-bottom: 0;
        line-height: 1.3;
    }
}

/* ------------------------------------------------------------------
   Menu mobile (offcanvas): più leggibile
   righe alte almeno 52px (tocco comodo), icone in una colonna fissa così
   i testi sono allineati, testo più grande e scuro sulle voci bianche,
   pagina corrente evidenziata, intera intestazione di sezione cliccabile.
   ------------------------------------------------------------------ */
.offcanvas-menu .offcanvas-inner .sp-module ul > li .menu-image-title {
    display: inline;
    padding: 0;
}
/* Intestazioni di sezione (Cammino Mariano, Organizza il pellegrinaggio, Download) */
.offcanvas-menu .offcanvas-inner .sp-module ul > li > .menu-separator {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 10px 52px 10px 16px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li > .menu-separator > img {
    flex: none;
    width: 38px;
    height: 38px;
    object-fit: contain;
}
/* Il pulsante +/− copre tutta l'intestazione: si apre toccando ovunque sulla riga */
.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > .menu-separator > .menu-toggler {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
    -webkit-transform: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 18px 0 0;
    font-size: 20px;
    color: #fff;
}
/* Voci dei sottomenu */
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 8px 16px 8px 24px;
    font-size: 16px;
    line-height: 1.3;
    color: #1f2d33;
    background: #fff;
    border-bottom: 1px solid #dcebf1;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a > img {
    flex: none;
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a:hover,
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a:focus {
    background: #f0f9fc;
    color: #007fa3;
}
/* Pagina corrente */
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li.current > a {
    background: #e3f5fb;
    color: #007fa3;
    font-weight: 700;
    box-shadow: inset 5px 0 0 #00a6d2;
}
/* Voci di primo livello senza sottomenu (es. Richiedi la credenziale): pulsante ben visibile */
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li:not(.menu-parent) > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 56px;
    margin: 20px 16px 0;
    padding: 10px 16px;
    border-radius: 6px;
    background: #fff;
    color: #007fa3;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.offcanvas-menu .offcanvas-inner .sp-module ul.menu > li:not(.menu-parent) > a > img {
    flex: none;
    width: 34px;
    height: 34px;
    object-fit: contain;
}
/* Selettore della lingua */
.offcanvas-menu .offcanvas-inner .mod-languages {
    padding: 8px 16px 24px;
}
.offcanvas-menu .offcanvas-inner .mod-languages select {
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
}
/* Pulsante di chiusura più grande */
.offcanvas-menu .close-offcanvas {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul > li {
    padding-top: 0;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li .menu-image-title {
    font-size: inherit;
}
/* Voce senza icona: testo allineato a quello delle altre (24 + 30 icona + 14 spazio) */
.offcanvas-menu .offcanvas-inner .sp-module ul > li ul li a:not(:has(img)) {
    padding-left: 68px;
}