/* =====================================================================================
   Tema grafico "rinfresco leggero" (novembre 2026).
   Stessa struttura, stesse vetrate e stessi colori del sito: aggiunge profondità e ordine
   (riquadri chiari con ombra, titoli dei riquadri su fascia rossa, un solo carattere per i testi,
   più spazio, effetti al passaggio del mouse, piè di pagina più curato).
   Viene caricato DOPO gli altri fogli di stile (head.inc): per tornare all'aspetto precedente
   basta togliere da head.inc la riga che carica questo file.
   ===================================================================================== */

:root {
    --rosso: #E74F4E;
    /* rosso del sito (intestazione, titoli) */
    --rosso-scuro: #CF3046;
    /* rosso dei pulsanti */
    --crema: #F9F9D9;
    /* fondo del sito */
    --carta: #FFFEF6;
    /* fondo dei riquadri */
    --testo: #3B3B3B;
    --ombra: 0 2px 10px rgba(110, 60, 40, .13);
    --ombra-forte: 0 8px 22px rgba(110, 60, 40, .20);
    --raggio: 8px;
}

/* ---------- Caratteri: un solo carattere per i testi, Roboto Slab per i titoli ----------
   (nel vecchio foglio il testo degli articoli usava "Oswald", mai caricato: compariva il Times) */
body {
    color: var(--testo);
    font-family: "Merriweather Sans", "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    background-image: url(../immagini/interno.jpeg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

article p,
p.lead,
.list-news,
.entry-summary,
.text-info {
    font-family: inherit;
    color: var(--testo);
}

article p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 1em;
}

h1,
h2,
h3,
h4,
header h1,
header h2,
aside h3 {
    font-family: "Roboto Slab", Georgia, serif;
    font-weight: 400;
    letter-spacing: .01em;
}

/* ---------- Intestazione ---------- */
/* Il rosso sta solo dietro logo e indirizzo: se fosse su tutta l'intestazione si vedrebbe
   negli angoli arrotondati in basso della barra del menu (due piccoli triangoli rossi) */
.site-header {
    background: transparent;
}

.site-branding {
    background: linear-gradient(135deg, var(--rosso) 0%, var(--rosso-scuro) 100%);
    border-radius: var(--raggio) var(--raggio) 0 0;
}

.logo {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: transform .3s ease;
}

.site-logo-link:hover .logo {
    transform: scale(1.03);
}

.site-description {
    font-family: "Merriweather Sans", "Segoe UI", Arial, sans-serif;
    /* l'indirizzo resta nel carattere di prima */
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* ---------- Barra del menu ---------- */
.navbar {
    background-color: var(--carta);
    border: 0;
    border-radius: 0 0 var(--raggio) var(--raggio);
    box-shadow: var(--ombra);
}

.navbar-default .navbar-nav>li>a {
    position: relative;
    transition: color .2s ease;
}

/* sottolineatura rossa che si allarga al passaggio del mouse (non sui bottoni social) */
.navbar-default .navbar-nav>li>a:not(.social)::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 8px;
    height: 2px;
    background: var(--rosso);
    transition: left .2s ease, right .2s ease;
}

.navbar-default .navbar-nav>li>a:not(.social):hover::after,
.navbar-default .navbar-nav>li>a:not(.social):focus::after,
.navbar-default .navbar-nav>.open>a::after {
    left: 15px;
    right: 15px;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    color: var(--rosso-scuro);
    background: transparent;
}

/* menu che resta in alto durante lo scorrimento (prima: bordo viola) */
.barramobile {
    background-color: var(--carta);
    border: 0;
    border-radius: 0 0 var(--raggio) var(--raggio);
    box-shadow: var(--ombra-forte);
}

.dropdown-menu {
    border: 0;
    border-radius: 0 0 var(--raggio) var(--raggio);
    box-shadow: var(--ombra-forte);
    background-color: var(--carta);
}

.dropdown-menu>li>a {
    color: var(--rosso);
    padding: 6px 20px;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: var(--rosso);
    color: #fff;
}

/* ---------- Carosello della home ---------- */
#myCarousel {
    border-radius: var(--raggio);
    overflow: hidden;
    box-shadow: var(--ombra-forte);
}

#myCarousel .hero_img {
    border-radius: 0;
}

.carousel-indicators li {
    border-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .4);
}

.hero .page-title,
.hero .homepage-title {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .5);
    letter-spacing: .04em;
}

/* pulsanti "Prega!" e "Dona!" sopra le foto */
.call-action {
    background-color: rgba(40, 20, 10, .45);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 30px;
    color: #fff;
    font-size: 1.3em;
    padding: 8px 1.6em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    transition: background-color .2s ease, transform .2s ease, color .2s ease;
}

.call-action:hover,
.call-action:focus,
.call-action.focus {
    background-color: var(--rosso);
    border-color: var(--rosso);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- Riquadri (well): carta chiara con ombra morbida ---------- */
.well {
    background-color: var(--carta);
    border: 0;
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 15px;
    margin-bottom: 22px;
}

.well article,
.well .entry-summary {
    background-color: transparent;
}

.bollettino article.well {
    padding: 15px !important;
}

/* sostituisce lo stile scritto nella pagina */
.well-lg {
    padding: 20px;
}

/* Titolo del riquadro su fascia rossa (home: articoli, avvisi, bollettino) */
.well>header {
    margin: -15px -15px 15px;
    padding: 10px 15px;
    background: linear-gradient(135deg, var(--rosso) 0%, var(--rosso-scuro) 100%);
    border-radius: var(--raggio) var(--raggio) 0 0;
}

.well>header h2,
.well>header h3,
.well>header .entry-title,
.well>header a {
    color: #fff;
    margin: 0;
    font-size: 21px;
    line-height: 1.3;
    text-align: center;
    text-transform: none;
}

.well>header .link-gestione h3 {
    font-size: 14px;
    margin-bottom: 6px;
}

.well>header .link-gestione a {
    color: var(--crema);
    text-decoration: underline;
}

/* Articoli della home: si sollevano leggermente al passaggio del mouse */
.posizionearticolo {
    min-height: 0;
}

/* niente spazi vuoti sotto gli articoli brevi */
/* Il riquadro sotto il mouse passa in primo piano, così la foto ingrandita copre gli elementi vicini.
   Quando il mouse esce, il primo piano resta per la durata dello zoom in uscita (ritardo sullo z-index). */
section.well.articolo {
    position: relative;
    z-index: 1;
    transition: box-shadow .25s ease, transform .25s ease, z-index 0s linear .5s;
}

section.well.articolo:hover {
    z-index: 15;
    /* sotto il menu fisso durante lo scorrimento (z-index 20) */
    box-shadow: var(--ombra-forte);
    transform: translateY(-2px);
    transition: box-shadow .25s ease, transform .25s ease, z-index 0s;
}

/* Zoom delle foto degli articoli: progressivo sia in entrata sia in uscita.
   La foto si allarga verso l'interno della pagina (colonna sinistra verso destra, colonna destra verso sinistra);
   solo su schermi larghi: sul telefono la foto è già a tutta larghezza. */
.articolo img {
    transform-origin: center center;
    transition: transform .5s ease, translate .5s ease, box-shadow .5s ease, opacity .5s;
    will-change: transform;
}

.articolo img:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

@media (min-width: 992px) {
    .articolo img:hover {
        transform: scale(2);
        translate: 50% 0;
    }

    #articoli .row>.col-md-6:nth-child(2) .articolo img:hover {
        translate: -50% 0;
    }
}

@media (max-width: 991px) {
    .articolo img:hover {
        transform: none;
        translate: none;
    }
}

section.well.articolo .img-indent {
    margin: 0 0 15px;
}

section.well.articolo img,
.img-radius {
    border-radius: 6px;
}

/* Occhiello: barra rossa a sinistra invece del riquadro beige */
p.lead {
    background-color: #FBF6E2;
    border-left: 4px solid var(--rosso);
    border-radius: 0 6px 6px 0;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.5;
    font-style: italic;
}

/* Immagine principale nelle pagine degli articoli (prima: cornice rossa) */
.img-article {
    border: 0;
    padding: 0;
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    margin: 0 auto 1.5em;
}

.well h1 {
    font-size: 28px;
    margin-top: 5px;
}

/* Schede con intestazione rossa (orari, gruppi, attività): un solo riquadro, niente cornice doppia */
.thumbnail.well {
    padding: 0;
    overflow: hidden;
}

.thumbnail .caption {
    background: linear-gradient(135deg, var(--rosso) 0%, var(--rosso-scuro) 100%);
    border-radius: 0;
    padding: 10px;
}

.thumbnail .caption h3 {
    color: #fff;
}

.thumbnail .caption h5 {
    color: var(--crema);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
}

.thumbnail .listaorari.well,
.thumbnail .thumbnail-pad .well {
    border: 0;
    box-shadow: none;
    background: transparent;
    margin: 0;
}

.listaorari h6 {
    color: var(--rosso);
    font-size: 14px;
    font-weight: bold;
    margin-top: 12px;
}

.listaorari .alternate {
    background: #F6EFD3;
    border-radius: 4px;
}

/* Pannelli (gruppi, attività): stessa scheda con fascia rossa */
.panel {
    background-color: var(--carta);
    border: 0;
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    overflow: hidden;
    margin-bottom: 22px;
}

.panel>.panel-heading {
    background: linear-gradient(135deg, var(--rosso) 0%, var(--rosso-scuro) 100%);
    border: 0;
    border-radius: 0;
    color: #fff !important;
    /* anche sui pannelli "panel-warning" di Bootstrap */
    font-family: "Roboto Slab", Georgia, serif;
    font-size: 19px;
    text-align: center;
    padding: 10px 15px;
}

.panel>.panel-body {
    background: transparent;
}

.panel .list-group {
    margin-bottom: 0;
    background: transparent;
}

.panel .list-group-item {
    background: transparent;
    border: 0;
    border-bottom: 1px dashed rgba(207, 48, 70, .25);
    padding: 10px 5px;
}

.panel .list-group-item:last-child {
    border-bottom: 0;
}

.panel .list-group-item .btn-group {
    margin-right: 10px;
}

/* Pagine dei sacerdoti (parroco, don Michele...): la colonna di sinistra non ha più l'ombra "dura" grigia;
   "Post recenti" diventa un riquadro come gli altri (profilo.css è caricato dopo: servono selettori più specifici) */
.row>.card {
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
}

.row>.card>.well-lg {
    background-color: var(--carta);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 15px 20px;
    margin-bottom: 22px;
}

.row>.card .cardimg {
    border-radius: 50%;
    box-shadow: var(--ombra);
}

.post-format-link {
    padding-left: 18px;
}

.post-format-link li {
    margin: 4px 0;
}

/* ---------- Pulsanti ---------- */
.btn_,
a.btn_ {
    border-radius: 20px;
    padding: 8px 18px;
    letter-spacing: .05em;
    transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn_:hover,
.btn_:focus {
    background: var(--rosso);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

#videoefoto .menulink {
    width: 80%;
    margin: 6px auto;
    display: block;
}

/* ---------- Avvisi ---------- */
.list-news {
    padding-left: 0;
}

.list-news li {
    padding: 4px 0;
}

.btnavvisi {
    display: inline-block;
    margin: 6px 0 8px;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    letter-spacing: .04em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}

.btnavvisi::before {
    font-family: FontAwesome;
    content: "\f073";
    /* calendario */
    margin-right: 6px;
}

.list-news hr {
    border-top: 1px dashed rgba(207, 48, 70, .3);
    margin: 14px 0 6px;
}

.list-news li:last-child hr {
    display: none;
}

.list-news a.underline {
    font-weight: bold;
}

/* ---------- Bollettino ---------- */
.bollettino {
    border-top: 0 !important;
}

/* ---------- Piè di pagina ---------- */
.footer {
    text-align: center;
}

.indirizzo-footer {
    border: 0;
    border-left: 4px solid var(--rosso);
    border-radius: 0 var(--raggio) var(--raggio) 0;
    background-color: #fff;
    box-shadow: var(--ombra);
    padding: 18px 20px;
    font-family: "Roboto Slab", Georgia, serif;
    font-style: normal;
    font-size: 15px;
    line-height: 1.7;
    color: var(--testo);
}

#googlemappa,
#googlestrada {
    width: 100%;
    border-radius: var(--raggio) !important;
    box-shadow: var(--ombra);
}

/* Foto di Kelly: stesso zoom progressivo delle foto degli articoli (prima: cambio di altezza a scatti
   con uno spazio vuoto fisso di 190px sotto). Si ingrandisce verso l'alto, sopra il testo, senza spostare la pagina. */
.contenitore-kelly {
    margin: 8px 0 4px;
}

.footer img.foto-kelly {
    height: 40px;
    border-radius: 4px;
    box-shadow: var(--ombra);
    position: relative;
    z-index: 1;
    transform-origin: center bottom;
    transition: transform .5s ease, box-shadow .5s ease, border-radius .5s ease, z-index 0s linear .5s;
}

.footer img.foto-kelly:hover {
    z-index: 15;
    transform: scale(4.6);
    /* 40px -> circa 185px, come prima */
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
    transition: transform .5s ease, box-shadow .5s ease, border-radius .5s ease, z-index 0s;
}

/* ---------- Varie ---------- */
a {
    transition: color .15s ease;
}

::selection {
    background: var(--rosso);
    color: #fff;
}

/* ---------- Vetrate laterali "di sbieco" ----------
   Le due vetrate, dopo l'animazione di apertura, ruotano in prospettiva come due ante aperte:
   la cerniera è sul bordo dello schermo e il bordo verso il contenuto si allontana.
   La classe vetrate-sbieco viene aggiunta da js/sito.js solo sugli schermi larghi (sul telefono le vetrate sono nascoste).
   Geometria: ogni vetrata è larga il 50% della finestra e ne resta visibile il 20%;
   la sinistra occupa da -30% a 20% (bordo dello schermo = 60% della sua larghezza),
   la destra da 80% a 130% (bordo dello schermo = 40% della sua larghezza). */
#panelleft,
#panelright {
    transition: transform 1.4s cubic-bezier(.25, .8, .3, 1);
    backface-visibility: hidden;
}

#panelleft {
    transform-origin: 60% 50%;
}

#panelright {
    transform-origin: 40% 50%;
}

body.vetrate-sbieco #panelleft {
    transform: perspective(700px) rotateY(32deg);
}

body.vetrate-sbieco #panelright {
    transform: perspective(700px) rotateY(-32deg);
}

/* luce che si attenua verso l'interno, per dare profondità */
#panelleft::after,
#panelright::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}

#panelleft::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35) 100%);
}

#panelright::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .35) 100%);
}

body.vetrate-sbieco #panelleft::after,
body.vetrate-sbieco #panelright::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

    #panelleft,
    #panelright,
    #panelleft::after,
    #panelright::after {
        transition: none;
    }
}

/* ---------- Sfondo omogeneo e contenuto più largo ----------
   Lo sfondo della pagina era grigio (#e1dfdf, dal vecchio tema WordPress) e il contenitore crema era alto
   solo quanto la finestra: scorrendo, ai lati del contenuto e oltre la prima schermata compariva il grigio. */
html,
body {
    background-color: var(--crema);
}

#container {
    background-color: var(--crema);
    min-height: 100%;
}

/* Contenuto centrale: dal 20%-80% al 15%-85% della finestra. Le vetrate di sbieco occupano circa il 14% per lato.
   Sul telefono js/sito.js lo porta a tutta larghezza come prima. */
@media (min-width: 768px) {
    #main {
        left: 15%;
        width: 70%;
    }
}