/* ======================================================================== CHIESE EVANGELICHE ITALIA - MOBILE & TABLET OVERRIDE STYLES Versione Finale con Pulsante Accedi Visibile e Breakpoint Multipli ======================================================================== */ /* ======================================================================== REGOLE GLOBALI (Fuori dalle Media Query) ======================================================================== */ /* SOLUZIONE B (Alternativa): Se vuoi mostrare l'immagine sopra il testo. Commenta la regola sopra e decommenta questa: #tabs .tab-pane .row { flex-direction: column-reverse; } #tabs .tab-pane img { width: 100%; max-width: 300px; margin: 0 auto 25px auto; display: block; border-radius: 8px; } */ /* BLINDA LO SCHERMO ED EVITA LA FASCIA BIANCA LATERALE (SCROLL ORIZZONTALE) */ html, body { max-width: 100vw !important; overflow-x: hidden !important; } /* FIX MARGINI NEGATIVI BOOTSTRAP SU MOBILE */ .row { margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================== PULSANTE DINAMICO MAPPA (GLOBALE / DESKTOP) ========================================================== */ body.ricerca-page #globalResultsMapContainer { position: relative; } body.ricerca-page .btn-dynamic-list { position: absolute; bottom: 0; /* Appiccicato al bordo inferiore */ right: 20px; /* Spostato leggermente dal bordo destro */ z-index: 1001; /* Inversione colori */ background-color: #001900 !important; /* Sfondo verdone */ color: #E0CD00 !important; /* Testo dorato */ border: 2px solid #E0CD00 !important; border-bottom: none !important; /* Rimuove il bordo sotto per attaccarsi perfettamente */ font-weight: 800 !important; text-transform: uppercase; letter-spacing: .5px; /* Riduzione dimensioni del ~25% */ padding: 6px 16px; font-size: 13px; /* Arrotondato solo sopra, piatto sotto (effetto linguetta) */ border-radius: 8px 8px 0 0; /* L'ombra ora va verso l'alto (valore Y negativo: -2px) */ box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; } body.ricerca-page .btn-dynamic-list:hover, body.ricerca-page .btn-dynamic-list:focus { background-color: #E0CD00 !important; /* Torna oro all'hover */ color: #001900 !important; /* Torna verdone all'hover */ box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.6); outline: none; } /* ===================================================== BASE (Desktop default ≥992px) ===================================================== */ body.eventi-page #hero .container { max-width: 100%; } body.eventi-page .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } body.eventi-page .custom-table { width: 100%; } body.eventi-page .custom-table td:last-child { white-space: nowrap; } /* ===================================================== RIPRISTINO VISUALIZZAZIONE DESKTOP (≥ 992px) ===================================================== */ @media (min-width: 992px) { body.eventi-page .tipo-full { display: inline !important; } body.eventi-page .tipo-short { display: none !important; } body.eventi-page .mobile-actions-wrapper { display: none !important; } body.eventi-page .mobile-text-wrapper { display: block; } } /* ====================================================== EVENTI PROVINCIALI – parte globale valida sempre ====================================================== */ /* --- FIX GLOBALI (Sempre attivi per questa pagina) --- */ body.eventi-page.eventi-provinciali section#hero > .container { padding-top: 0 !important; } body.eventi-page.eventi-provinciali .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* NASCONDE SEMPRE LA COLONNA "TIPOLOGIA" (Sia Desktop che Mobile) */ body.eventi-page.eventi-provinciali #tabellaEventiProvinciali th:nth-child(4), body.eventi-page.eventi-provinciali #tabellaEventiProvinciali td:nth-child(4) { display: none !important; } /* ====================================================== EVENTI REGIONALI – parte globale valida sempre ====================================================== */ /* Allinea comportamento container come provinciali */ body.eventi-page.eventi-regionali #hero .container { max-width: 100%; } /* Wrapper scroll coerente */ body.eventi-page.eventi-regionali .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Tabella più fluida su mobile */ body.eventi-page.eventi-regionali #tabellaEventiRegionali { width: 100%; table-layout: auto; } body.eventi-regionali section#hero > .container { padding-top: 0 !important; } /* ========================================= COMPORTAMENTO DEFAULT (DESKTOP) ========================================= */ body.eventi-page.eventi-regionali .evento-miniatura-mobile { display: none !important; /* Su desktop, nasconde la miniatura in riga */ } body.eventi-page.eventi-regionali .evento-testo-desktop { display: inline !important; /* Su desktop, mostra il testo "Evento" */ } /* ====================================================== EVENTI NAZIONALI – RESPONSIVE OVERRIDE (CLEAN) Scope sicuro: solo body.eventi-page.eventi-nazionali ====================================================== */ body.eventi-nazionali section#hero > .container{ padding-top: 0 !important; } /* Wrapper scroll coerente */ body.eventi-page.eventi-nazionali .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================== FIX ACCORDION: FRECCE E LAYOUT GLOBALE (Valido per Desktop e Mobile) ========================================== */ body.registrazione-page .section-toggle { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100%; cursor: pointer; padding-right: 15px; position: relative; /* Rimuove l'eventuale background grigio di default dei bottoni */ background: transparent; } body.registrazione-page .section-toggle::after { content: ""; width: 12px; height: 12px; border-right: 2px solid #D8C40A; border-bottom: 2px solid #D8C40A; transform: rotate(45deg); transition: transform 0.3s ease; margin-left: 10px; } /* Quando l'accordion è chiuso (freccia in giù o laterale a seconda del design) */ body.registrazione-page .section-toggle.collapsed::after { transform: rotate(45deg); } /* Quando l'accordion è aperto (freccia in su) */ body.registrazione-page .section-toggle:not(.collapsed)::after { transform: rotate(-135deg); } /* ======================================================= */ /* REGOLE GLOBALI PER GESTIONE TESTI DESKTOP/MOBILE */ /* Ambito limitato alla pagina Dettaglio Chiesa */ /* ======================================================= */ #dettagliochiesa-page .desktop-text { display: inline; } #dettagliochiesa-page .mobile-text { display: none; } /* Nascondiamo la legenda su desktop */ #dettagliochiesa-page .mobile-legend { display: none; } /* Nasconde il titolo iniettato su desktop nel caso la finestra venga ridimensionata */ #dettagliochiesa-page .mobile-injected-title { display: none; } /* ======================================================================== BREAKPOINT: TABLET E INFERIORI (fino a 991.98px) ======================================================================== */ @media (max-width: 991.98px) { /* FIX GLOBALI E BLOCCO SCROLL */ html, body { max-width: 100vw !important; overflow-x: hidden !important; } .row { margin-left: 0 !important; margin-right: 0 !important; } html.mobile-nav-active, body.mobile-nav-active { overflow: hidden !important; height: 100vh !important; } [data-aos] { opacity: 1 !important; transform: none !important; visibility: visible !important; transition: none !important; animation: none !important; pointer-events: auto !important; } /* HEADER FISSO */ body { padding-top: 65px !important; } #header.header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 65px !important; z-index: 99999 !important; background-color: #001900 !important; /* COLORE VERDE SCURO BLINDATO */ border-bottom: 2px solid #D8C40A !important; } /* CONTENITORE HEADER (Sintassi Webkit) */ #header > .container-fluid.container-xl { padding-left: 12px !important; padding-right: 12px !important; display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; -webkit-box-pack: justify !important; -webkit-justify-content: space-between !important; justify-content: space-between !important; -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important; height: 100% !important; } /* LOGO (Senza clamp moderno) */ #header a.logo { -webkit-flex: 0 1 auto !important; flex: 0 1 auto !important; min-width: 0; margin-right: 10px; overflow: hidden; } #header a.logo .sitename { font-size: 16px !important; /* Misura fissa sicura */ line-height: 1.1 !important; margin: 0 !important; color: #ffffff !important; } #header a.logo .sitename .second-line { display: block !important; padding-left: 20px !important; font-size: inherit !important; } /* CONTENITORE BOTTONI DESTRA (Sintassi Webkit corazzata) */ #header .header-right-actions { display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important; -webkit-box-pack: end !important; -webkit-justify-content: flex-end !important; justify-content: flex-end !important; margin-top: 0 !important; gap: 15px !important; } #header .welcome-bar, .navmenu ul { display: none !important; } /* TASTI AZIONE (Avatar e Accedi) */ #header .btn-auth-action, #header .mobile-header-avatar { -webkit-box-ordinal-group: 2 !important; -webkit-order: 1 !important; order: 1 !important; margin: 0 !important; padding: 0 12px !important; display: -webkit-inline-box !important; display: -webkit-inline-flex !important; display: inline-flex !important; -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important; height: 40px !important; font-size: 14px !important; background-color: #D8C40A !important; color: #001900 !important; border-radius: 8px !important; border: none !important; text-decoration: none !important; } /* NASCONDIAMO FORZATAMENTE IL TASTO "ESCI" SULL'HEADER MOBILE */ #header .btn-auth-action.esci-desktop { display: none !important; } /* TASTO HAMBURGER */ #header .mobile-nav-toggle { -webkit-box-ordinal-group: 3 !important; -webkit-order: 2 !important; order: 2 !important; margin: 0 !important; padding: 0 !important; width: 40px !important; height: 40px !important; display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important; -webkit-box-pack: center !important; -webkit-justify-content: center !important; justify-content: center !important; background-color: #D8C40A !important; border-radius: 8px !important; border: none !important; box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important; color: #001900 !important; font-size: 26px !important; z-index: 10000 !important; cursor: pointer !important; pointer-events: auto !important; } #header .mobile-nav-toggle::before, #header .mobile-nav-toggle::after { display: none !important; content: none !important; } #header .mobile-nav-toggle i { display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; -webkit-box-align: center !important; -webkit-align-items: center !important; align-items: center !important; -webkit-box-pack: center !important; -webkit-justify-content: center !important; justify-content: center !important; width: 100%; height: 100%; line-height: 1 !important; pointer-events: none !important; } #header .mobile-nav-toggle i.bi-x { font-size: 36px !important; } /* ========================================================== MENU APERTO ========================================================== */ body.mobile-nav-active #header .navmenu ul { display: block !important; position: fixed !important; top: 65px !important; right: 15px !important; left: auto !important; width: 220px !important; max-width: 90vw !important; max-height: calc(100dvh - 80px) !important; overflow-y: auto !important; overflow-x: hidden !important; background-color: #001900 !important; padding: 15px !important; box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important; border: 1px solid #D8C40A !important; border-radius: 12px !important; margin: 0 !important; z-index: 999999 !important; } body.mobile-nav-active #header .navmenu ul a { padding: 8px 15px !important; margin-bottom: 5px !important; text-align: right !important; display: block !important; font-size: 14px !important; font-weight: 500 !important; color: #ffffff !important; border: 1px solid rgba(216,196,10,0.2); border-radius: 6px !important; text-decoration: none !important; } body.mobile-nav-active #header .navmenu ul a.active { color: #D8C40A !important; border-color: #D8C40A !important; background-color: rgba(216, 196, 10, 0.1) !important; font-weight: bold !important; } body.mobile-nav-active #header .navmenu > ul > li.dropdown > a { position: relative; margin-bottom: 0 !important; } body.mobile-nav-active #header .navmenu ul .toggle-dropdown { position: absolute !important; left: 15px !important; top: 50% !important; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-color: #D8C40A; color: #001900; border-radius: 50%; font-size: 14px; z-index: 10; } body.mobile-nav-active #header .navmenu ul .dropdown ul { display: block !important; position: relative !important; max-height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; background-color: transparent !important; border: none !important; transition: max-height .35s ease, opacity .2s ease !important; } body.mobile-nav-active #header .navmenu ul .dropdown ul.dropdown-active { max-height: 800px !important; margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 5px !important; opacity: 1 !important; } body.mobile-nav-active #header .navmenu ul .dropdown ul a { font-size: 13px !important; padding-right: 25px !important; margin: 0 0 2px 0 !important; border: none !important; border-radius: 0 !important; } body.mobile-nav-active #header .navmenu ul .dropdown ul li:hover > a { color: #D8C40A !important; } body.mobile-nav-active #header .navmenu ul a.menu-simple-logout { border-color: #D8C40A !important; margin-top: 15px !important; color: #D8C40A !important; } body.mobile-nav-active #header .navmenu ul::-webkit-scrollbar { width: 6px !important; } body.mobile-nav-active #header .navmenu ul::-webkit-scrollbar-track { background: rgba(0, 25, 0, 0.4) !important; border-radius: 10px !important; } body.mobile-nav-active #header .navmenu ul::-webkit-scrollbar-thumb { background-color: #D8C40A !important; border-radius: 10px !important; } /* ========================================================== FIX SOTTOMENU MOBILE (Spazi vuoti e accavallamenti) ========================================================== */ /* Resettiamo i container genitori per evitare altezze fisse ereditate */ body.mobile-nav-active #header .navmenu ul li { position: relative !important; height: auto !important; } /* Sottomenu: annulliamo il top, left e transform del desktop */ body.mobile-nav-active #header .navmenu ul .dropdown ul { display: block !important; position: relative !important; /* FIX CRITICI PER LO SPAZIO E L'ACCAVALLAMENTO */ top: 0 !important; left: 0 !important; transform: none !important; clear: both !important; max-height: 0 !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; background-color: transparent !important; border: none !important; transition: max-height .35s ease, opacity .2s ease !important; } /* Stato attivo del sottomenu */ body.mobile-nav-active #header .navmenu ul .dropdown ul.dropdown-active { max-height: 800px !important; margin-top: 5px !important; margin-bottom: 5px !important; padding-top: 5px !important; opacity: 1 !important; } /* Sicurezza extra: evitiamo che i singoli list-item del sottomenu sballino */ body.mobile-nav-active #header .navmenu ul .dropdown ul li { top: 0 !important; left: 0 !important; transform: none !important; position: relative !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== PAGINA HOME ========================================================== */ body.index-page #hero.hero.section { position: relative !important; overflow: hidden !important; background-color: #000000 !important; padding-top: 50px !important; padding-bottom: 50px !important; min-height: 100vh !important; display: flex; align-items: flex-start !important; } body.index-page #hero.hero.section::before { content: "" !important; position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.65) !important; z-index: 2 !important; } body.index-page .hero-bg-picture { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; z-index: 1 !important; } body.index-page .hero-bg-picture img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; } body.index-page #hero .container { position: relative !important; z-index: 5 !important; text-align: left; } body.index-page #hero .col-lg-6 { width: 100% !important; padding-left: 15px; padding-right: 15px; } body.index-page #hero h2 { font-size: 26px; line-height: 1.3; } body.index-page #hero .btn-get-started { position: relative !important; z-index: 10 !important; pointer-events: auto !important; } body.index-page #ricerca { position: relative !important; z-index: 10 !important; background-color: #001900 !important; padding-top: 40px !important; padding-bottom: 40px !important; } body.index-page #ricerca .service-item { padding: 20px 15px !important; flex-direction: column; align-items: flex-start; text-align: left; } body.index-page #ricerca .service-item p { display: none !important; } /* ========================================================== PAGINA RICERCA ========================================================== */ body.ricerca-page section#ricerca, body.ricerca-page section#hero.section_ricerca, body.ricerca-page .ricerca-bg { background-color: #001900 !important; background-image: none !important; } body.ricerca-page section#ricerca { padding-bottom: 0 !important; margin-bottom: 0 !important; } body.ricerca-page section#hero.section_ricerca { padding-top: 15px !important; } body.ricerca-page section#ricerca .section-title h2 { font-size: 1.8rem !important; margin-bottom: 10px !important; } body.ricerca-page section#ricerca .section-title p { font-size: 14px !important; } body.ricerca-page .col-lg-3, body.ricerca-page .col-md-3 { display: none !important; } body.ricerca-page .col-lg-6, body.ricerca-page .col-md-6, body.ricerca-page .col-12 { width: 100% !important; padding-left: 0; padding-right: 0; } body.ricerca-page .search-box-container { padding: 10px !important; border-radius: 14px; display: flex; flex-direction: column; } body.ricerca-page .search-box-container #results { order: 2; } body.ricerca-page .search-box-container #globalResultsMapContainer { order: 3; } body.ricerca-page #searchTabs.nav-tabs { flex-wrap: nowrap !important; overflow-x: auto; gap: 8px; scrollbar-width: none; } body.ricerca-page #searchTabs.nav-tabs::-webkit-scrollbar { display: none; } body.ricerca-page #searchTabs .nav-item { flex-shrink: 0; } body.ricerca-page #searchTabs .nav-link { white-space: nowrap; padding: 10px 12px; border-radius: 10px; } body.ricerca-page .container_search_common_item .form-select, body.ricerca-page .container_search_common_item .form-control, body.ricerca-page .container_search_common_item button[type="submit"] { width: 100% !important; } /* Accordion Risultati (Mobile) */ body.ricerca-page #resultsAccordion .accordion-header { display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 8px 10px; align-items: center; padding: 0 5px 0 0 !important; } body.ricerca-page #resultsAccordion .accordion-button { grid-column: 1 / 2; grid-row: 1 / 3; width: auto !important; flex: 1 1 auto !important; padding-right: 2.5rem; font-size: 14px; line-height: 1.15; } body.ricerca-page #resultsAccordion .church-name-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; } body.ricerca-page #resultsAccordion .btn-gold-map { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; justify-self: end; font-size: 12px; padding: 6px 10px; border-radius: 999px; margin: 0 6px 0 auto; } body.ricerca-page #resultsAccordion .status-badge-bottom { grid-column: 1 / 2; grid-row: 2; position: relative !important; width: fit-content !important; font-size: 10px; padding: 3px 8px; border-radius: 999px; } /* ========================================================== RICERCA - MOBILE/TABLET Fix UX: in vista MAPPA nascondi i filtri e fai vedere la mappa ========================================================== */ /* 1) In vista "MAPPA" (body.mobile-map-view viene gestita dal tuo JS) nascondo completamente i filtri: così lo scroll non finisce sui controlli */ body.ricerca-page.mobile-map-view #resultsHeader .filters-block { display: none !important; } /* Compatta header risultati in vista MAPPA per far entrare subito la mappa nel viewport */ body.ricerca-page.mobile-map-view #resultsHeader { margin-bottom: .5rem !important; } body.ricerca-page.mobile-map-view .search-title-container { margin-bottom: .5rem !important; padding: 10px !important; } body.ricerca-page.mobile-map-view #searchTypeHeader { font-size: 1.35rem !important; /* più adatto a tablet/phone */ letter-spacing: 1px !important; } /* Avvicina la mappa al toggle (il mt-4 del container altrimenti spinge giù) */ body.ricerca-page.mobile-map-view #globalResultsMapContainer { margin-top: .5rem !important; } /* Mappa più “tablet friendly” (override degli inline style height:400px) */ body.ricerca-page.mobile-map-view #globalResultsMap { height: 62vh !important; min-height: 320px !important; max-height: 520px !important; } /* ========================================================== TOGGLE Mobile "Mappa / Lista" - ordine: Mappa a sinistra, Lista a destra - colori: attivo oro + testo #001900; non attivo verde scuro + testo oro ========================================================== */ body.ricerca-page #mobileViewToggle .btn-group { display: flex !important; width: 100%; } /* 2) Ordine visivo dei pulsanti (senza toccare l’HTML/JS) */ body.ricerca-page #mobileViewToggle .btn[data-view="map"] { order: 1; } body.ricerca-page #mobileViewToggle .btn[data-view="list"] { order: 2; } /* 3) Stato NON selezionato */ body.ricerca-page #mobileViewToggle .btn.btn-outline-gold { flex: 1 1 50% !important; background-color: #000f00 !important; /* verde più scuro di #001900 */ color: #E0CD00 !important; /* testo dorato */ border: 2px solid #E0CD00 !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .5px; } /* Hover/focus (rimuove l’effetto "celestino" e lo rende dorato) */ body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:focus, body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:focus-visible { box-shadow: 0 0 0 .2rem rgba(224, 205, 0, 0.28) !important; outline: 0 !important; } body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:hover { background-color: #001200 !important; color: #E0CD00 !important; border-color: #E0CD00 !important; } /* 4) Stato SELEZIONATO */ body.ricerca-page #mobileViewToggle .btn.btn-outline-gold.active, body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:active, body.ricerca-page #mobileViewToggle .btn.btn-outline-gold.show { background-color: #E0CD00 !important; color: #001900 !important; /* testo verdone richiesto */ border-color: #E0CD00 !important; box-shadow: none !important; } /* Bottone MAPPA: solo icona, resta a destra */ body.ricerca-page #resultsAccordion .btn-gold-map{ font-size: 0 !important; /* nasconde il testo "MAPPA" */ padding: 8px 12px !important; min-width: 44px !important; /* target touch */ border-radius: 999px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; } body.ricerca-page #resultsAccordion .btn-gold-map i{ font-size: 16px !important; /* dimensione icona */ margin: 0 !important; } body.ricerca-page #resultsAccordion .accordion-button{ position: relative !important; padding-right: 28px !important; /* spazio per la freccia */ } body.ricerca-page #resultsAccordion .accordion-button::after{ position: absolute !important; right: -2px !important; /* avvicina al bordo destro (verso MAPPA) */ top: 50% !important; transform: translateY(-50%) !important; margin-left: 0 !important; } /* titolo (accordion-button) SOLO in riga 1: non deve sovrapporsi al badge */ body.ricerca-page #resultsAccordion .accordion-button{ grid-row: 1 !important; align-self: start !important; padding-top: 12px !important; padding-bottom: 6px !important; } /* testo chiesa leggermente più in alto */ body.ricerca-page #resultsAccordion .church-name-text{ transform: translateY(-2px) !important; } /* badge in riga 2, separato dal titolo */ body.ricerca-page #resultsAccordion .status-badge-bottom{ grid-row: 2 !important; margin-top: -2px !important; } /* mappa a destra su entrambe le righe */ body.ricerca-page #resultsAccordion .btn-gold-map{ grid-row: 1 / 3 !important; } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after{ content: attr(data-full-title); position: absolute; left: 12px; right: 12px; top: -8px; transform: translateY(-100%); z-index: 50; background: rgba(0, 15, 0, 0.96); border: 1px solid rgba(224, 205, 0, 0.55); color: #E0CD00; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; letter-spacing: .2px; line-height: 1.2; box-shadow: 0 10px 25px rgba(0,0,0,.55); } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::before{ content: ""; position: absolute; top: -8px; left: 34px; width: 12px; height: 12px; transform: rotate(45deg); background: rgba(0, 15, 0, 0.96); border-left: 1px solid rgba(224, 205, 0, 0.55); border-top: 1px solid rgba(224, 205, 0, 0.55); z-index: 51; } /* Permette al tooltip di uscire dai box senza essere tagliato */ body.ricerca-page .search-box-container, body.ricerca-page #results, body.ricerca-page #resultsAccordion, body.ricerca-page #resultsAccordion .accordion-item, body.ricerca-page #resultsAccordion .accordion-header { overflow: visible !important; } /* Z-index “forte” quando il tooltip è attivo */ body.ricerca-page #resultsAccordion .accordion-header { position: relative !important; /* necessario per z-index + pseudo-elementi */ z-index: 1; } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip { z-index: 9999 !important; } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after, body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::before { z-index: 10000 !important; } /* Riduce lo spazio tra testo (colonna 1) e bottone mappa (colonna 2) */ body.ricerca-page #resultsAccordion .accordion-header { gap: 6px 6px !important; /* prima era 8px 10px */ } /* Freccia ancora più a destra (verso mappa) */ body.ricerca-page #resultsAccordion .accordion-button::after { right: -12px !important; /* aumenta se vuoi ancora più a destra: -14 / -16 */ } /* opzionale: riduci anche il margine del bottone mappa */ body.ricerca-page #resultsAccordion .btn-gold-map { margin-right: 2px !important; } /* Disattiva eventuale tooltip "interno" precedente */ body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip .accordion-button::before{ content: "" !important; display: none !important; } /* Tooltip esterno sovrapposto all'item */ body.ricerca-page #resultsAccordion .accordion-header{ position: relative !important; } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after{ content: attr(data-full-title); position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; left: 12px !important; /* spazio riservato a freccia + zona destra */ right: 54px !important; z-index: 9999 !important; pointer-events: none !important; background: rgba(0, 15, 0, 0.96) !important; border: 1px solid rgba(224, 205, 0, 0.60) !important; color: #E0CD00 !important; padding: 10px 12px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.15 !important; /* fallback multi-line senza proprietà webkit */ display: block !important; overflow: hidden !important; max-height: 2.3em !important; /* ~2 righe (1.15 * 2) */ } /* assicurati che l'header abbia un'altezza prevedibile */ body.ricerca-page #resultsAccordion .accordion-header{ min-height: 62px !important; align-items: center !important; } /* bottone: deve riempire l’altezza della cella per centrare bene l’after */ body.ricerca-page #resultsAccordion .accordion-button{ height: 100% !important; align-self: stretch !important; display: flex !important; align-items: center !important; position: relative !important; } /* freccia: centrata Y e spinta verso destra */ body.ricerca-page #resultsAccordion .accordion-button::after{ position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; /* spingi verso destra: valori tipici -12/-14/-16. ATTENZIONE: se vai troppo, rischi overlap col bottone mappa. */ right: -16px !important; margin-left: 0 !important; } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after{ /* più grande */ font-size: 15px !important; padding: 12px 14px !important; border-radius: 12px !important; line-height: 1.2 !important; /* larghezza “dinamica”: si adatta al testo, ma non supera un massimo */ right: auto !important; /* importante: disattiva la larghezza “full” */ max-width: calc(100% - 12px - 64px) !important; /* 12px = left, 64px = spazio riservato a freccia/zona destra (aumenta se serve) */ /* opzionale: se vuoi anche più righe */ max-height: 3.6em !important; /* ~3 righe con line-height 1.2 */ } /* assicurati che il riferimento sia il bottone */ body.ricerca-page #resultsAccordion .accordion-button{ position: relative !important; } /* stato chiuso */ body.ricerca-page #resultsAccordion .accordion-button.collapsed::after{ position: absolute !important; top: 50% !important; right: -16px !important; /* il tuo offset verso destra */ margin: 0 !important; transform: translateY(-50%) rotate(0deg) !important; } /* stato aperto */ body.ricerca-page #resultsAccordion .accordion-button:not(.collapsed)::after{ position: absolute !important; top: 50% !important; right: -16px !important; margin: 0 !important; transform: translateY(-50%) rotate(-180deg) !important; } body.ricerca-page #resultsAccordion .accordion-header{ align-items: stretch !important; } body.ricerca-page #resultsAccordion .accordion-button{ align-self: stretch !important; display: flex !important; align-items: center !important; } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after{ white-space: normal !important; overflow: hidden !important; line-height: 1.2 !important; max-height: 4.8em !important; /* 4 righe */ } /* ========================================================== CEI / RICERCA - Mobile & Tablet UX (<= 991.98px) Da incollare in FONDO a mobile-overrides.css ========================================================== */ /* ---------- MAP VIEW: mostra (quasi) solo mappa + toggle ---------- */ body.ricerca-page.mobile-map-view #resultsHeader .search-title-container, body.ricerca-page.mobile-map-view #resultsHeader .filters-block { display: none !important; } body.ricerca-page.mobile-map-view #resultsHeader { margin-bottom: 0.5rem !important; } /* Toggle sempre accessibile mentre scorri la mappa */ body.ricerca-page #mobileViewToggle { position: sticky; top: 72px; /* se il tuo header fisso è più alto/basso, regola questo valore */ z-index: 1050; background: #001900; padding-top: 6px; padding-bottom: 6px; } body.ricerca-page.mobile-map-view #globalResultsMapContainer { margin-top: 0.5rem !important; /* riduce l'effetto mt-4 */ } body.ricerca-page.mobile-map-view #globalResultsMap { height: 70vh !important; min-height: 320px !important; max-height: 620px !important; } /* ---------- Toggle MAPPA/LISTA: colori tema ---------- */ body.ricerca-page #mobileViewToggle .btn-group { width: 100%; display: flex; } body.ricerca-page #mobileViewToggle .btn { flex: 1 1 50%; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.5px; } /* non selezionato */ body.ricerca-page #mobileViewToggle .btn.btn-outline-gold:not(.active) { background-color: #000f00 !important; /* verde più scuro di #001900 */ color: #E0CD00 !important; border: 2px solid #E0CD00 !important; } /* selezionato */ body.ricerca-page #mobileViewToggle .btn.btn-outline-gold.active { background-color: #E0CD00 !important; color: #001900 !important; border-color: #E0CD00 !important; box-shadow: none !important; } body.ricerca-page #mobileViewToggle .btn:focus, body.ricerca-page #mobileViewToggle .btn:focus-visible { outline: 0 !important; box-shadow: 0 0 0 0.2rem rgba(224, 205, 0, 0.28) !important; } /* ---------- Accordion header: layout stabile + freccia centrata ---------- */ body.ricerca-page #resultsAccordion .accordion-header { display: flex !important; /* forza flex (evita i side-effect del grid) */ align-items: stretch !important; gap: 6px !important; padding-right: 6px !important; min-height: 66px !important; overflow: visible !important; /* per tooltip overlay */ } body.ricerca-page #resultsAccordion .accordion-button { flex: 1 1 auto !important; min-width: 0 !important; height: 100% !important; align-self: stretch !important; /* spazio sotto per badge + spazio a destra per freccia */ padding: 12px 2.25rem 28px 14px !important; position: relative !important; display: flex !important; align-items: flex-start !important; /* testo leggermente più “in alto” */ overflow: visible !important; } /* Freccia: assoluta e centrata verticalmente sull'ITEM */ body.ricerca-page #resultsAccordion .accordion-button::after { position: absolute !important; right: 6px !important; top: 50% !important; margin: 0 !important; transform: translateY(-50%) rotate(0deg) !important; } body.ricerca-page #resultsAccordion .accordion-button:not(.collapsed)::after { transform: translateY(-50%) rotate(-180deg) !important; } /* Titolo chiesa: 2 righe senza -webkit-line-clamp */ body.ricerca-page #resultsAccordion .church-name-text { display: block !important; white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.15 !important; max-height: 2.3em !important; /* ~2 righe */ padding-right: 6px !important; } /* Bottone MAPPA: solo icona, a destra */ body.ricerca-page #resultsAccordion .btn-gold-map { margin-left: 6px !important; margin-right: 2px !important; font-size: 0 !important; /* nasconde “MAPPA” */ padding: 0 !important; width: 44px !important; height: 44px !important; min-width: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } body.ricerca-page #resultsAccordion .btn-gold-map i { font-size: 18px !important; margin: 0 !important; } /* Badge: fuori dal flow per non “alzare” visivamente la freccia */ body.ricerca-page #resultsAccordion .status-badge-bottom { position: absolute !important; left: 14px !important; bottom: 8px !important; transform: none !important; z-index: 2 !important; white-space: nowrap !important; max-width: calc(100% - 14px - 60px) !important; /* lascia spazio a freccia + mappa */ overflow: hidden !important; text-overflow: ellipsis !important; } /* ---------- Tooltip mobile (overlay multi-line, tema) ---------- */ body.ricerca-page #resultsAccordion .accordion-item, body.ricerca-page #resultsAccordion .accordion-header { overflow: visible !important; } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip { z-index: 9999 !important; position: relative !important; } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::after { content: attr(data-full-title); position: absolute !important; left: 12px !important; right: 72px !important; /* spazio riservato a freccia + bottone mappa */ top: 50% !important; transform: translateY(-50%) !important; pointer-events: none !important; z-index: 10000 !important; background: rgba(0, 25, 0, 0.96) !important; border: 1px solid rgba(224, 205, 0, 0.65) !important; color: #E0CD00 !important; padding: 10px 12px !important; border-radius: 10px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.55) !important; white-space: normal !important; line-height: 1.2 !important; /* multi-line “vera”: nessun clamp webkit */ max-height: 40vh !important; overflow: auto !important; } body.ricerca-page #resultsAccordion .accordion-header.show-title-tooltip::before { content: ""; position: absolute; left: 24px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); background: rgba(0, 25, 0, 0.96); border-left: 1px solid rgba(224, 205, 0, 0.65); border-bottom: 1px solid rgba(224, 205, 0, 0.65); z-index: 10001; pointer-events: none; } /* Spazio reale (compatibile Android 8): usa margin, NON gap */ body.ricerca-page #resultsAccordion .btn-gold-map{ margin-left: 12px !important; /* crea spazio tra freccia e cerchio */ } /* Freccia un po’ più a sinistra (dentro al bottone) */ body.ricerca-page #resultsAccordion .accordion-button::after{ right: 18px !important; } /* Centro PERFETTO dell’icona nel cerchio (no baseline/line-height issues) */ body.ricerca-page #resultsAccordion .btn-gold-map{ position: relative !important; } body.ricerca-page #resultsAccordion .btn-gold-map i{ position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; line-height: 1 !important; } /* ========================================================== CEI - Hint temporaneo post-scroll (Mobile/Tablet) ========================================================== */ /* Hint overlay sulla MAPPA (iniettato dentro #globalResultsMap) */ body.ricerca-page #globalResultsMap{ position: relative; /* sicurezza: contesto per l'absolute */ } body.ricerca-page #globalResultsMap .cei-mobile-scroll-hint{ position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 10px); opacity: 0; max-width: min(92%, 560px); width: max-content; background: rgba(0, 25, 0, 0.92); color: #fff; border: 1px solid rgba(224, 205, 0, 0.70); box-shadow: 0 12px 28px rgba(0,0,0,.55); border-radius: 12px; padding: 10px 12px; z-index: 2000; /* sopra tiles/marker */ pointer-events: none;/* non blocca tap/drag sulla mappa */ transition: opacity .35s ease, transform .35s ease; } body.ricerca-page #globalResultsMap .cei-mobile-scroll-hint strong{ color: #E0CD00; } body.ricerca-page #globalResultsMap .cei-mobile-scroll-hint.is-visible{ opacity: 1; transform: translate(-50%, 0); } body.ricerca-page #globalResultsMap .cei-mobile-scroll-hint.is-hidden{ opacity: 0; transform: translate(-50%, 10px); } /* ========================================================== SOVRASCRITTURA MOBILE: PULSANTE DINAMICO MAPPA E SELECT ========================================================== */ body.ricerca-page #globalResultsMapContainer { position: relative !important; } /* NUOVO STILE MOBILE: Piccolo, a destra, Verdone/Bianco */ body.ricerca-page .btn-dynamic-list { width: auto !important; height: auto !important; margin: 0 !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; position: absolute !important; bottom: 0px !important; right: 15px !important; z-index: 9999 !important; padding: 6px 14px !important; font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; background-color: #001900 !important; color: #FFFFFF !important; border: 1px solid #E0CD00 !important; border-bottom: none !important; border-radius: 8px 8px 0 0 !important; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5) !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; pointer-events: auto !important; transition: none !important; } /* Disattiva hover su mobile */ body.ricerca-page .btn-dynamic-list:hover { background-color: #001900 !important; color: #FFFFFF !important; } /* Effetto tocco: Giallo Oro */ body.ricerca-page .btn-dynamic-list:active, body.ricerca-page .btn-dynamic-list:focus { background-color: #E0CD00 !important; color: #001900 !important; border-color: #E0CD00 !important; outline: none !important; } /* ========================================================== CORRETTIVI RICHIESTI: BADGE E SPAZIATURA MOBILE ========================================================== */ /* 1. Fissa il badge al bordo inferiore dell'accordion (ripristina stile desktop) */ body.ricerca-page #resultsAccordion .status-badge-bottom { position: absolute !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; /* Centra perfettamente il badge */ border-radius: 6px 6px 0 0 !important; /* Ripristina la forma a linguetta (squadrato sotto) */ margin: 0 !important; max-width: none !important; width: max-content !important; z-index: 5 !important; } /* Rimuove l'eccessivo padding inferiore del bottone che causava troppo vuoto interno */ body.ricerca-page #resultsAccordion .accordion-button { padding-bottom: 14px !important; /* Sostituisce il 28px assegnato in precedenza */ } /* 2. Riduce lo spazio verticale tra i contenitori delle chiese */ body.ricerca-page #resultsAccordion .accordion-item { margin-bottom: 8px !important; /* Compatterà la lista riducendo lo spazio vuoto tra le box */ } /* Allarga gli item dell'accordion riducendo lo spazio laterale vuoto */ body.ricerca-page #resultsAccordion { margin-left: -10px !important; margin-right: -10px !important; width: auto !important; } /* Assicura che l'header dell'accordion sfrutti tutto lo spazio recuperato */ body.ricerca-page #resultsAccordion .accordion-header { width: 100% !important; } /* ========================================================== PAGINAZIONE - LAYOUT MOBILE (MOBILE-OVERRIDE) ========================================================== */ /* Struttura sicura e spaziata */ body.ricerca-page #paginationControls { padding: 0 15px !important; gap: 12px !important; box-sizing: border-box !important; } /* Testo centrato */ body.ricerca-page #pageInfoContainer { width: 100% !important; text-align: center !important; font-size: 0.95rem !important; margin-bottom: 0 !important; } /* Adattamento della Capsula */ body.ricerca-page .pagination-btn-group { width: 100% !important; max-width: 280px !important; /* Evita che diventi un "serpentone" su schermi larghi */ height: 42px !important; /* Leggermente più alto per facilitare il tap (Touch target) */ margin: 0 auto !important; /* Lo mantiene centrato */ } /* I pulsanti ereditano già il 25% esatto dal desktop. Aumentiamo solo l'icona. */ body.ricerca-page #paginationControls .pagination-btn-custom { font-size: 16px !important; } /* ===================================================== REGISTRAZIONE – RESPONSIVE FIX Scoped: body.registrazione-page ===================================================== */ /* ========================================== SEZIONI COLLASSABILI – VERSIONE DEFINITIVA ========================================== */ body.registrazione-page .section-toggle { display: flex; /* Torna a occupare tutta la larghezza */ justify-content: space-between; align-items: center; width: 100%; cursor: pointer; padding-right: 15px; /* Spazio interno, non bordo estremo */ } body.registrazione-page .section-toggle::after { content: ""; width: 10px; height: 10px; border-right: 2px solid #D8C40A; border-bottom: 2px solid #D8C40A; transform: rotate(45deg); transition: transform 0.3s ease; } body.registrazione-page .section-toggle:not(.collapsed)::after { transform: rotate(-135deg); } /* ===================================================== APPUNTAMENTI-PAGE – ACCORDION MOBILE (<= 991.98px) Allineamento Flex Nativo, Troncamento Testo, Override Completo ===================================================== */ /* --- 1. RIDUZIONE SPAZI LATERALI --- */ body.appuntamenti-page #hero > .container { padding-left: 5% !important; padding-right: 5% !important; max-width: 100% !important; } body.appuntamenti-page .search-box-container { padding: 20px 5% !important; width: 100% !important; border-radius: 12px; } /* --- 2. RESET TOTALE BORDI E PADDING (Override forzato) --- */ body.appuntamenti-page #appuntamentiForm .table-container table.custom-table, body.appuntamenti-page #appuntamentiForm .custom-table tbody, body.appuntamenti-page #appuntamentiForm .custom-table tr, body.appuntamenti-page #appuntamentiForm .custom-table td { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 0 !important; border: none !important; background-color: transparent !important; /* Uccide sfondi sfasati */ } body.appuntamenti-page #appuntamentiForm table.custom-table thead, body.appuntamenti-page .calendar-heading { display: none !important; } body.appuntamenti-page .table-container::before { content: "CALENDARIO ATTUALE"; display: block; text-align: center; color: var(--gold); font-family: 'Raleway', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: 1.5px; margin: 5px 0 20px 0; } /* --- 3. CONTENITORI E COLORE (TUTTO SCURO) --- */ body.appuntamenti-page #appuntamentiForm .custom-table tbody tr, body.appuntamenti-page #appuntamentiForm .custom-table tbody tr:nth-child(even), body.appuntamenti-page #appuntamentiForm .custom-table tbody tr:nth-child(odd) { background-color: #001900 !important; color: #ffffff !important; } /* LA MAGIA CHE ELIMINA LE STRISCE NERE */ body.appuntamenti-page #appuntamentiForm .custom-table tbody td { background-color: transparent !important; } body.appuntamenti-page #appuntamentiForm .custom-table tr.master-row, body.appuntamenti-page #appuntamentiForm .custom-table tr.slave-row { border-left: 1px solid var(--gold) !important; border-right: 1px solid var(--gold) !important; border-radius: 0; margin-bottom: 0; overflow: hidden; } body.appuntamenti-page #appuntamentiForm .custom-table tr.master-row { border-bottom: 1px solid rgba(224, 205, 0, 0.3) !important; } body.appuntamenti-page #appuntamentiForm .custom-table tr.master-row:first-child { border-top: 1px solid var(--gold) !important; border-top-left-radius: 12px; border-top-right-radius: 12px; } body.appuntamenti-page #appuntamentiForm .custom-table tr.is-last-row { border-bottom: 1px solid var(--gold) !important; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } body.appuntamenti-page #appuntamentiForm .custom-table tr td:nth-child(1) { color: var(--gold) !important; } body.appuntamenti-page #appuntamentiForm .custom-table tr td:nth-child(3) { color: rgba(255,255,255,0.85) !important; } /* Separatore appuntamenti multipli */ body.appuntamenti-page #appuntamentiForm .custom-table tr.slave-row.show-slave { border-top: 1px dashed rgba(224, 205, 0, 0.4) !important; } /* --- 4. GESTIONE FRECCIA ED HEADER --- */ body.appuntamenti-page #appuntamentiForm .custom-table tr td:nth-child(1) { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; padding: 16px 20px !important; font-size: 1.15rem !important; font-weight: 700 !important; text-transform: uppercase; cursor: pointer; } body.appuntamenti-page #appuntamentiForm .custom-table tr.master-row.accordion-open td:nth-child(1) { border-bottom: 1px solid rgba(224, 205, 0, 0.4) !important; } /* --- 5. NASCONDI CONTENUTI QUANDO CHIUSO --- */ body.appuntamenti-page #appuntamentiForm .custom-table tr.master-row:not(.accordion-open) td:nth-child(n+2), body.appuntamenti-page #appuntamentiForm .custom-table tr.slave-row:not(.show-slave) { display: none !important; } /* --- 6. LAYOUT APERTO: ALLINEAMENTO NATIVO E TRONCAMENTO --- */ body.appuntamenti-page #appuntamentiForm .custom-table tr.master-row.accordion-open, body.appuntamenti-page #appuntamentiForm .custom-table tr.slave-row.show-slave { display: flex !important; flex-wrap: wrap !important; align-items: center !important; } body.appuntamenti-page #appuntamentiForm .custom-table tr td:nth-child(1) { flex: 0 0 100% !important; } /* Orario */ body.appuntamenti-page #appuntamentiForm .custom-table tr td:nth-child(2) { display: block !important; flex: 0 0 auto !important; width: auto !important; padding: 16px 8px 16px 15px !important; font-size: 1.05rem !important; font-weight: 700 !important; white-space: nowrap !important; line-height: 1 !important; } /* Evento */ body.appuntamenti-page #appuntamentiForm .custom-table tr td:nth-child(3) { display: block !important; flex: 1 1 0px !important; min-width: 0 !important; width: 100% !important; padding: 16px 8px 16px 0 !important; font-size: 0.95rem !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1 !important; } /* Azioni */ body.appuntamenti-page #appuntamentiForm .custom-table tr td.centered-content { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 0 auto !important; width: auto !important; flex-direction: row !important; gap: 6px !important; padding: 16px 12px 16px 0 !important; } body.appuntamenti-page #appuntamentiForm .custom-table td.centered-content .btn-icon { width: 32px !important; height: 32px !important; min-width: 32px !important; margin: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 0.9rem !important; } body.appuntamenti-page #appuntamentiForm .custom-table td.centered-content form, body.appuntamenti-page #appuntamentiForm .custom-table td.centered-content a { display: inline-flex !important; margin: 0 !important; } /* ===================================================== OVERRIDE EVENTI - TABLET E MOBILE (≤ 991.98px) ==================================================== */ /* 1. LARGHEZZA FORM E PADDING MINIMO (Recupera tutto lo spazio possibile) */ body.eventi-page #eventiChiesaForm { width: 96% !important; /* Espanso per riempire meglio lo schermo */ margin: 0 auto !important; padding: 10px 5px !important; /* Padding ridottissimo */ } body.eventi-page .table-container { overflow-x: hidden !important; } /* 2. RESET TABELLA E CELLE VISIBILI */ body.eventi-page .custom-table { table-layout: auto !important; width: 100% !important; } /* Mostriamo solo le colonne necessarie al centro */ body.eventi-page .custom-table th:nth-child(3), body.eventi-page .custom-table td:nth-child(3), body.eventi-page .custom-table th:nth-child(4), body.eventi-page .custom-table td:nth-child(4), body.eventi-page .custom-table th:nth-child(5), body.eventi-page .custom-table td:nth-child(5) { display: table-cell !important; text-align: center !important; vertical-align: middle !important; } /* 3. RIDUZIONE MASSIMA DEGLI SPAZI (PADDING E FONT) */ body.eventi-page .custom-table th, body.eventi-page .custom-table td { padding: 8px 3px !important; /* Padding strettissimo tra le colonne */ font-size: 0.75rem !important; /* Testo leggermente più piccolo */ white-space: nowrap !important; /* Forza la riga a stare su un rigo */ } /* Riduciamo l'icona espandi a sinistra al minimo spazio */ body.eventi-page .custom-table th:nth-child(1), body.eventi-page .custom-table td:nth-child(1) { width: 25px !important; padding-left: 2px !important; text-align: left !important; } /* 4. STILE SIGLA TIPOLOGIA */ body.eventi-page .tipo-short { display: inline !important; font-weight: 800; color: var(--gold); letter-spacing: 0.5px; } body.eventi-page .tipo-full { display: none !important; } /* 5. DIMENSIONI IMMAGINE PERFETTE PER MOBILE */ body.eventi-page .image-container { width: 45px !important; /* Leggermente più compatta per evitare fuoriuscite */ height: 35px !important; margin: 0 auto !important; border: 1px solid var(--gold); border-radius: 4px; overflow: hidden; display: flex !important; align-items: center; justify-content: center; } body.eventi-page .custom-table img { max-width: 45px !important; max-height: 35px !important; width: 100% !important; height: 100% !important; object-fit: cover; display: block !important; border: none !important; } /* 6. LAYOUT ACCORDION (TESTO SCROLLABILE E PULSANTI FISSI IN FONDO) */ /* Assicuriamo che il contenitore principale non tagli i contenuti su mobile */ body.eventi-page .accordion-trigger.expanded + .accordion-content .description-container { max-height: 1000px !important; /* Forza lo sblocco dell'altezza tagliata */ } body.eventi-page .mobile-accordion-flex { display: flex; flex-direction: column; align-items: stretch; gap: 0; /* Togliamo il gap per gestirlo con i margini */ } /* Area Testo: diventerà scrollabile se troppo lunga */ body.eventi-page .mobile-text-wrapper { width: 100%; max-height: 120px; /* Altezza massima prima che compaia la barra di scorrimento */ overflow-y: auto; /* Aggiunge la scrollbar verticale */ padding-right: 8px; /* Spazio per non far toccare il testo alla scrollbar */ display: flex; flex-direction: column; gap: 8px; white-space: normal !important; text-align: left; } /* Personalizzazione Scrollbar elegante e dorata per il box di testo */ body.eventi-page .mobile-text-wrapper::-webkit-scrollbar { width: 4px; } body.eventi-page .mobile-text-wrapper::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } body.eventi-page .mobile-text-wrapper::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; } /* Area Pulsanti: sempre fissa e visibile sotto il testo */ body.eventi-page .mobile-actions-wrapper { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 25px; /* Spazio tra i due pulsanti */ width: 100%; padding-top: 15px; margin-top: 15px; border-left: none !important; /* Rimuove il vecchio bordo laterale */ border-top: 1px solid rgba(224, 205, 0, 0.3); /* Linea dorata separatrice in alto */ } body.eventi-page .mobile-actions-wrapper .btn-icon { margin: 0 !important; width: 42px !important; /* Leggermente più grandi per il dito su mobile */ height: 42px !important; font-size: 1.1rem !important; display: flex !important; align-items: center; justify-content: center; } /* ====================================================== EVENTI PROVINCIALI – OVERRIDE MOBILE E FIX LAYOUT ====================================================== */ /* --- 1. FIX SPAZI LATERALI ECCESSIVI (Risolve il form compresso) --- */ body.eventi-page.eventi-provinciali #hero .container { padding-left: 8px !important; padding-right: 8px !important; max-width: 100%; overflow-x: hidden; } body.eventi-page.eventi-provinciali .row { margin-left: 0 !important; margin-right: 0 !important; width: 100%; } body.eventi-page.eventi-provinciali .search-box-container { padding: 15px 10px !important; width: 100% !important; margin: 0 auto 20px auto !important; box-sizing: border-box; } body.eventi-page.eventi-provinciali #eventiProvincialiForm { width: 100% !important; } /* --- 2. TABELLA MOBILE (SOLO 2 COLONNE DATI + FRECCIA) --- */ body.eventi-page.eventi-provinciali #tabellaEventiProvinciali { width: 100% !important; table-layout: fixed !important; border-collapse: collapse; } /* Nasconde tutto tranne colonna 1 (Freccia), 2 (Data) e 3 (Immagine) */ body.eventi-page.eventi-provinciali #tabellaEventiProvinciali th:nth-child(n+4), body.eventi-page.eventi-provinciali #tabellaEventiProvinciali td:nth-child(n+4) { display: none !important; } /* Dimensioni precise colonne visibili */ body.eventi-page.eventi-provinciali #tabellaEventiProvinciali th:nth-child(1), body.eventi-page.eventi-provinciali #tabellaEventiProvinciali td:nth-child(1) { width: 40px !important; /* Spazio stretto solo per la freccina */ text-align: center; vertical-align: middle; padding: 10px 2px 10px 5px !important; } body.eventi-page.eventi-provinciali #tabellaEventiProvinciali th:nth-child(2), body.eventi-page.eventi-provinciali #tabellaEventiProvinciali td:nth-child(2) { width: 35% !important; /* Colonna DATA */ vertical-align: middle; white-space: normal !important; padding: 10px 5px !important; } body.eventi-page.eventi-provinciali #tabellaEventiProvinciali th:nth-child(3), body.eventi-page.eventi-provinciali #tabellaEventiProvinciali td:nth-child(3) { width: calc(65% - 40px) !important; /* Il resto dello spazio per la LOCANDINA */ text-align: center; vertical-align: middle; padding: 5px !important; } /* Rinomina Header colonna 3 in "LOCANDINA EVENTO" */ body.eventi-page.eventi-provinciali #tabellaEventiProvinciali th:nth-child(3) { display: table-cell !important; font-size: 0 !important; pointer-events: none; } body.eventi-page.eventi-provinciali #tabellaEventiProvinciali th:nth-child(3)::before { content: "LOCANDINA EVENTO"; font-size: 0.8rem !important; letter-spacing: 0.5px; color: var(--gold); display: block; } body.eventi-page.eventi-provinciali #tabellaEventiProvinciali th:nth-child(3) .sort-icon { display: none !important; } body.eventi-page.eventi-provinciali .mobile-table-img { width: 70px; height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid var(--gold); display: block; margin: 0 auto; } /* --- 3. ELIMINAZIONE STRISCIA GRIGIA E FIX ACCORDION MOBILE --- */ /* Specificità ESTREMA per sovrascrivere l'interferenza di nth-child(1) e bordi globali */ body.eventi-page.eventi-provinciali #tabellaEventiProvinciali tr.accordion-content td { background-color: transparent !important; border: none !important; border-top: 0px solid transparent !important; /* Distrugge il bordo superiore ereditato */ padding: 0 !important; /* Distrugge il padding ereditato dalla colonna 1 */ margin: 0 !important; height: 0 !important; line-height: 0 !important; font-size: 0 !important; } body.eventi-page.eventi-provinciali .description-container { background-color: transparent !important; } body.eventi-page.eventi-provinciali .inner-description { background: linear-gradient(145deg, rgba(0, 30, 0, 0.95), rgba(0, 10, 0, 0.98)) !important; margin: 0 !important; padding: 15px !important; border-left: 2px solid var(--gold) !important; border-bottom: 1px solid var(--gold) !important; border-radius: 0 0 8px 0 !important; /* Ripristina la tipografia normale solo DENTRO il box espanso */ line-height: 1.5 !important; font-size: 1rem !important; } body.eventi-page.eventi-provinciali .accordion-text-wrapper { width: 100% !important; text-align: left !important; font-size: 0.9rem !important; } /* ====================================================== EVENTI REGIONALI – RESPONSIVE UNIFICATO (<= 991.98px) ====================================================== */ /* --- 1. RECUPERO SPAZIO LATERALE --- */ body.eventi-page.eventi-regionali .container { max-width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; } body.eventi-page.eventi-regionali #eventiRegionaliForm { width: 100% !important; margin: 0 auto; } body.eventi-page.eventi-regionali .search-box-container { padding: 15px 10px !important; } /* --- 2. SETUP TABELLA E COLONNE --- */ body.eventi-page.eventi-regionali .table-responsive { overflow-x: hidden !important; /* Blocca scorrimento orizzontale */ } body.eventi-page.eventi-regionali .custom-table { table-layout: fixed !important; width: 100% !important; } body.eventi-page.eventi-regionali .custom-table th, body.eventi-page.eventi-regionali .custom-table td { padding: 10px 4px !important; /* Riduce i padding interni per salvare spazio */ font-size: 0.85rem !important; } /* Colonna 1: Icona Accordion (piccolissima) */ body.eventi-page.eventi-regionali .custom-table th:nth-child(1), body.eventi-page.eventi-regionali .custom-table td:nth-child(1) { width: 30px !important; } /* Colonna 2: Data (larghezza fissa) */ body.eventi-page.eventi-regionali .custom-table th:nth-child(2), body.eventi-page.eventi-regionali .custom-table td:nth-child(2) { width: 75px !important; } /* ========================================= Colonna 3 (Mobile): Switch Testo -> Miniatura ========================================= */ body.eventi-page.eventi-regionali .evento-testo-desktop { display: none !important; /* Nasconde testo in riga */ } body.eventi-page.eventi-regionali .evento-miniatura-mobile { display: block !important; /* Mostra miniatura in riga */ width: 45px !important; height: 45px !important; object-fit: cover !important; border-radius: 6px !important; border: 1px solid var(--gold) !important; margin: 0 auto; } /* Configura la colonna "INFO" stretta */ body.eventi-page.eventi-regionali .custom-table th:nth-child(3), body.eventi-page.eventi-regionali .custom-table td:nth-child(3) { width: 70px !important; text-align: center !important; padding: 5px !important; } body.eventi-page.eventi-regionali .custom-table th:nth-child(3) { font-size: 0 !important; } body.eventi-page.eventi-regionali .custom-table th:nth-child(3)::before { content: "INFO"; font-size: 0.80rem; } /* ========================================= Colonna 4 (Mobile): COMUNE elastico ========================================= */ body.eventi-page.eventi-regionali .custom-table th:nth-child(4), body.eventi-page.eventi-regionali .custom-table td:nth-child(4) { width: auto !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ========================================= ACCORDION (Mobile): Nasconde l'immagine grande ========================================= */ body.eventi-page.eventi-regionali .image-container { display: none !important; /* Nasconde l'immagine dentro l'accordion su mobile */ } body.eventi-page.eventi-regionali .accordion-text-wrapper { width: 100% !important; /* Il testo della descrizione prende tutto lo spazio */ } /* Colonna 5: CHIESA (NASCOSTA SU MOBILE - Mostrata nell'accordion) */ body.eventi-page.eventi-regionali .custom-table th:nth-child(5), body.eventi-page.eventi-regionali .custom-table td:nth-child(5) { display: none !important; } /* --- 3. FORMATTAZIONE ACCORDION IN COLONNA --- */ body.eventi-page.eventi-regionali .inner-description { margin: 0 0 10px 0 !important; /* Rimuove margini per allargare il box */ padding: 15px !important; } body.eventi-page.eventi-regionali .accordion-body-flex { display: flex !important; flex-direction: column !important; /* Impagina in verticale */ align-items: flex-start !important; gap: 15px !important; } body.eventi-page.eventi-regionali .image-container { width: 100% !important; max-width: 250px !important; /* Limita larghezza massima locandina */ height: auto !important; aspect-ratio: 16/9; /* Proporzione per evitare sbalzi */ margin: 0 auto; /* Centra l'immagine */ } body.eventi-page.eventi-regionali .image-clickable { width: 100% !important; height: 100% !important; object-fit: cover !important; } body.eventi-page.eventi-regionali .accordion-text-wrapper { width: 100% !important; } /* Formattazione Testata Risultati */ body.eventi-page.eventi-regionali #risultatiHeader h3 { font-size: 1.2rem; display: flex; flex-direction: column; } body.eventi-page.eventi-regionali .risultati-count { margin-left: 0; margin-top: 5px; } body.eventi-page.eventi-regionali .filter-toolbar { flex-direction: column; align-items: flex-start !important; } /* ========================================= 1. FIX LARGHEZZA TABELLA (Recupero spazio Comune) ========================================= */ body.eventi-page.eventi-regionali #tabellaContainer, body.eventi-page.eventi-regionali .table-responsive { width: 100% !important; padding: 0 !important; } body.eventi-page.eventi-regionali .custom-table { min-width: 100% !important; width: 100% !important; table-layout: fixed !important; margin: 0 !important; } /* ========================================= 3. FIX TESTI ACCORDION (Centrati e a capo) ========================================= */ /* Centra tutto il contenuto testuale dell'accordion */ body.eventi-page.eventi-regionali .inner-description { text-align: center !important; } /* Forza l'allineamento centrale dei flexbox */ body.eventi-page.eventi-regionali .accordion-body-flex { align-items: center !important; text-align: center !important; } /* Centra l'etichetta "Dettagli evento" */ body.eventi-page.eventi-regionali .accordion-internal-header { justify-content: center !important; } /* Targetizza specificamente il DIV del TITOLO EVENTO per evitare troncature */ body.eventi-page.eventi-regionali .inner-description > div:first-child { text-align: center !important; white-space: normal !important; /* Annulla eventuali no-wrap */ word-wrap: break-word !important; /* Manda a capo le parole troppo lunghe */ width: 100% !important; } /* ========================================= FORZATURA ESPANSIONE TABELLA (Mobile) ========================================= */ /* Annulla il comportamento "auto-restringente" */ body.eventi-page.eventi-regionali #tabellaEventiRegionali { width: 100% !important; min-width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; } /* La colonna COMUNE deve spingere fino al margine destro */ body.eventi-page.eventi-regionali .custom-table th:nth-child(4), body.eventi-page.eventi-regionali .custom-table td:nth-child(4) { width: 100% !important; /* In table-layout:fixed, obbliga la colonna a prendere tutto lo spazio rimanente */ text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ============================================================ EVENTI NAZIONALI – MOBILE/TABLET UNIFICATO (≤991.98px) ============================================================ */ /* --- Layout generale hero/form --- */ body.eventi-page.eventi-nazionali #hero { padding: clamp(28px, 5vw, 32px) 0 clamp(60px, 8vw, 70px) 0; } body.eventi-page.eventi-nazionali #hero > .container { padding-left: 10px; padding-right: 10px; max-width: 100%; } body.eventi-page.eventi-nazionali #hero .row { --bs-gutter-x: 0.75rem; } body.eventi-page.eventi-nazionali #eventiNazionaliForm { width: clamp(90%, 96%, 100%); margin: 0 auto; } body.eventi-page.eventi-nazionali #eventiNazionaliForm.search-box-container { padding: clamp(12px, 3vw, 22px) clamp(10px, 3vw, 18px); } /* --- Header risultati --- */ body.eventi-page.eventi-nazionali #risultatiHeader { flex-direction: column; align-items: flex-start; gap: 10px; } body.eventi-page.eventi-nazionali #risultatiHeader h3 { font-size: clamp(1.15rem, 3vw, 1.4rem); } body.eventi-page.eventi-nazionali .risultati-count { display: block; margin-left: 0; margin-top: 4px; font-size: 0.8rem; } body.eventi-page.eventi-nazionali #perPageSelectWrapper { width: 100%; justify-content: space-between; } /* --- Tabella: cella base --- */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali th, body.eventi-page.eventi-nazionali #tabellaEventiNazionali td { padding: clamp(6px, 1.5vw, 10px) clamp(4px, 1.5vw, 8px); font-size: clamp(0.75rem, 2vw, 0.9rem); white-space: nowrap; } /* ============================================================ MOBILE: Chevron | Data | Locandina | Comune Evento e Chiesa confluiscono nell'accordion (nascosti qui) ============================================================ */ #tabellaEventiNazionali, #tabellaEventiNazionali thead, #tabellaEventiNazionali tbody { display: block; width: 100%; } #tabellaEventiNazionali thead tr, #tabellaEventiNazionali tbody tr.accordion-trigger { display: flex; width: 100%; align-items: center; } /* Nascondi Evento (col.3) e Chiesa (col.4) */ #tabellaEventiNazionali thead th:nth-child(3), #tabellaEventiNazionali thead th:nth-child(4), #tabellaEventiNazionali tbody tr.accordion-trigger td:nth-child(3), #tabellaEventiNazionali tbody tr.accordion-trigger td:nth-child(4) { display: none !important; } /* CHEVRON (col.1) -> sinistra, come desktop. Apre/chiude l'accordion */ #tabellaEventiNazionali thead th:nth-child(1), #tabellaEventiNazionali tbody tr.accordion-trigger td:nth-child(1) { order: 1; flex: 0 0 32px; width: 32px; max-width: 32px; overflow: hidden; text-align: center; padding-left: 4px; padding-right: 0; } /* DATA (col.2) */ #tabellaEventiNazionali thead th:nth-child(2), #tabellaEventiNazionali tbody tr.accordion-trigger td:nth-child(2) { order: 2; flex: 0 0 90px; width: 90px; max-width: 90px; overflow: hidden; white-space: nowrap; } #tabellaEventiNazionali thead th:nth-child(2) .sort-icon { display: none; /* niente icona ordinamento in mobile: risparmia spazio ed evita overflow */ } /* LOCANDINA (colonna iniettata via JS: immagine cliccabile, mai toggle) */ #tabellaEventiNazionali .locandina-header, #tabellaEventiNazionali .locandina-cell { order: 3; flex: 0 0 56px; width: 56px; max-width: 56px; text-align: center; } #tabellaEventiNazionali .locandina-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--gold); cursor: zoom-in; } /* COMUNE (col.5) */ #tabellaEventiNazionali thead th:nth-child(5), #tabellaEventiNazionali tbody tr.accordion-trigger td:nth-child(5) { order: 4; flex: 1 1 auto; width: auto; min-width: 0; max-width: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } /* Riga accordion-content: blocco a piena larghezza, NON flex */ #tabellaEventiNazionali tbody tr.accordion-content { display: block; width: 100%; } /* Niente immagine duplicata nell'accordion: già visibile in colonna Locandina */ #tabellaEventiNazionali tbody tr.accordion-content .accordion-body-flex { display: block; } #tabellaEventiNazionali tbody tr.accordion-content .image-container { display: none; } /* --- Riga colspan dell'accordion: SEMPRE 100%, mai ereditare larghezze colonna --- */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-content > td { width: 100% !important; max-width: none !important; text-align: left; overflow: visible; white-space: normal; padding: 0 !important; border: none !important; } /* --- Contenuto accordion: wrap corretto, mai troncato --- */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-content .accordion-text-wrapper { display: block; min-width: 0; max-width: 100%; white-space: pre-line; overflow-wrap: break-word; word-break: normal; } /* Nessun clipping quando aperto (il JS imposta max-height inline via scrollHeight, qui garantiamo solo che non ci siano limiti residui dopo un resize) */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-trigger.expanded + tr.accordion-content .description-container { max-height: none !important; overflow: visible; } body.eventi-page.eventi-nazionali .inner-description { margin: 0 clamp(6px, 2vw, 8px) clamp(8px, 2vw, 10px) clamp(6px, 2vw, 8px); padding: clamp(10px, 3vw, 12px); } body.eventi-page.eventi-nazionali .accordion-internal-header { font-size: clamp(0.9rem, 2.2vw, 0.95rem); letter-spacing: 0.8px; flex-wrap: wrap; gap: 6px; } /* Layout immagine+testo: griglia, colonna immagine fissa piccola */ body.eventi-page.eventi-nazionali .accordion-body-flex { display: grid; grid-template-columns: clamp(52px, 12vw, 60px) minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start; } body.eventi-page.eventi-nazionali .image-container { width: clamp(52px, 12vw, 60px); height: clamp(36px, 8vw, 42px); align-self: start; } body.eventi-page.eventi-nazionali .accordion-text-wrapper { font-size: clamp(0.82rem, 2vw, 0.85rem); line-height: 1.35; } body.eventi-page.eventi-nazionali #paginationControls { flex-wrap: wrap; } /* La riga accordion-content non deve MAI ricevere lo sfondo zebra chiaro */ #eventiNazionaliForm .custom-table tbody tr.accordion-content, #eventiNazionaliForm .custom-table tbody tr.accordion-content:nth-child(odd), #eventiNazionaliForm .custom-table tbody tr.accordion-content:nth-child(even) { background-color: transparent !important; } #tabellaEventiNazionali tbody tr.accordion-content .description-container { background-color: rgba(0, 20, 0, 0.95); } /* ============================================================ FIX: STRISCE VERDINI E ALLINEAMENTO HEADER ============================================================ */ /* Spostiamo lo sfondo dalle singole celle all'intera riga per evitare buchi (strisce) causati dalle diverse altezze dei contenuti */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-trigger { background-color: rgba(0, 0, 0, 0.6) !important; /* var(--dark-cell) */ border-bottom: 1px solid rgba(255,255,255,0.05); } body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-trigger td { background-color: transparent !important; border-bottom: none !important; } /* Fix per l'effetto hover (anch'esso spostato sulla riga) */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-trigger:hover { background-color: rgba(224, 205, 0, 0.1) !important; } body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-trigger:hover td { background-color: transparent !important; } /* Stile uniforme per l'header flex */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali thead tr { background-color: rgba(0, 0, 0, 0.4) !important; border-bottom: 1px solid var(--gold); } body.eventi-page.eventi-nazionali #tabellaEventiNazionali thead th { background-color: transparent !important; border-bottom: none !important; font-size: clamp(0.7rem, 2vw, 0.8rem); /* Riduce il font per schermi piccoli */ padding-top: 10px !important; padding-bottom: 10px !important; } /* --- Ricalibrazione degli spazi delle colonne --- */ /* 1. Chevron */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali thead th:nth-child(1), body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-trigger td:nth-child(1) { flex: 0 0 28px; width: 28px; padding-left: 4px !important; padding-right: 0 !important; } /* 2. Data */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali thead th:nth-child(2), body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-trigger td:nth-child(2) { flex: 0 0 75px; /* Diminuito leggermente per far spazio */ width: 75px; text-align: left; padding-left: 4px !important; padding-right: 4px !important; } /* 3. INFO (ex Locandina) */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali .locandina-header, body.eventi-page.eventi-nazionali #tabellaEventiNazionali .locandina-cell { flex: 0 0 52px; width: 52px; text-align: center; padding-left: 2px !important; padding-right: 2px !important; } /* 4. Comune */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali thead th:nth-child(5), body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-trigger td:nth-child(5) { flex: 1 1 auto; text-align: left; /* Allineato a sx per migliore leggibilità accanto all'immagine */ padding-left: 8px !important; padding-right: 8px !important; } /* ============================================================ FIX 1: ALLINEAMENTO BORDI HEADER E RIGHE ============================================================ */ /* Rimuoviamo imperativamente qualsiasi bordo dalle singole celle (TH e TD) per evitare frammentazioni in modalità flex */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali thead th, body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody td { border: none !important; } /* Applichiamo linee pulite ed intere SOLO ai contenitori di riga (TR) */ body.eventi-page.eventi-nazionali #tabellaEventiNazionali thead tr { border-top: 1px solid var(--gold) !important; border-bottom: 1px solid var(--gold) !important; width: 100% !important; box-sizing: border-box; } body.eventi-page.eventi-nazionali #tabellaEventiNazionali tbody tr.accordion-trigger { border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; width: 100% !important; box-sizing: border-box; } /* ============================================================ FIX 2: MODALE IMMAGINE RESPONSIVE (Previene il taglio) ============================================================ */ /* Assicuriamo che il contenitore della modale non sbrodoli fuori schermo */ .image-modal-content { width: 90vw !important; max-width: 90vw !important; padding: 20px 15px !important; box-sizing: border-box !important; display: flex; flex-direction: column; align-items: center; } /* Forziamo l'immagine a scalare proporzionalmente senza superare i limiti */ #modalImagePreview { max-width: 100% !important; max-height: 65vh !important; /* Lascia spazio per il titolo e il bottone */ width: auto !important; height: auto !important; object-fit: contain !important; /* Mantiene l'aspect ratio originale */ } /* Rendiamo la X di chiusura più facile da tappare su mobile */ .close-button { top: 5px !important; right: 15px !important; font-size: 2.5rem !important; } /* Inverti la visualizzazione dei testi */ #dettagliochiesa-page .desktop-text { display: none !important; } #dettagliochiesa-page .mobile-text { display: inline !important; } /* 1. Spazio immagine e Chiesa + Grandezza carattere responsiva */ #dettagliochiesa-page .detail-hero .church-photo { margin-bottom: 25px !important; width: 100%; display: block; } #dettagliochiesa-page .detail-hero h1 { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; margin-bottom: 20px; } /* 2. Ottimizzazione box Contatti e Indirizzo in COLONNA */ #dettagliochiesa-page .card ul.ps-5 { padding-left: 0 !important; } #dettagliochiesa-page .card ul li { position: relative; padding-left: 35px; /* Crea lo spazio fisso a sinistra per l'icona */ margin-bottom: 20px; display: flex; flex-direction: column; /* Impila etichetta e valore verticalmente */ align-items: flex-start; /* Allinea tutto a sinistra */ text-align: left; word-break: break-word; } #dettagliochiesa-page .card ul li i { position: absolute; left: 0; top: 2px; /* Allinea l'icona verticalmente alla label */ font-size: 1.2rem; } #dettagliochiesa-page .card ul li span.label-golden-style { display: block; margin-bottom: 4px; /* Spazio tra label e il valore sottostante */ width: 100%; line-height: 1.2; } /* 3. Evitare sbordamenti generali tabelle */ #dettagliochiesa-page .appointment-table { width: 100% !important; table-layout: fixed; } /* ======================================================= */ /* FIX LARGHEZZE TABELLA "APPUNTAMENTI REGOLARI" MOBILE */ /* ======================================================= */ /* Usiamo :not(.custom-table) per colpire SOLO la prima tabella (Appuntamenti) e non intaccare la seconda (Eventi) */ /* Colonna 1: Giorno */ #dettagliochiesa-page .appointment-table:not(.custom-table) th:nth-child(1), #dettagliochiesa-page .appointment-table:not(.custom-table) td:nth-child(1) { width: 32% !important; } /* Colonna 2: Orario (Ridotta) */ #dettagliochiesa-page .appointment-table:not(.custom-table) th:nth-child(2), #dettagliochiesa-page .appointment-table:not(.custom-table) td:nth-child(2) { width: 23% !important; } /* Colonna 3: Evento (Allargata e testo ridotto) */ #dettagliochiesa-page .appointment-table:not(.custom-table) th:nth-child(3), #dettagliochiesa-page .appointment-table:not(.custom-table) td:nth-child(3) { width: 45% !important; font-size: 0.85rem !important; /* Rimpicciolisce il testo */ /* Regole salva-vita per evitare sbordamenti futuri: forza l'andata a capo */ white-space: normal !important; word-wrap: break-word !important; } /* ======================================================= */ /* LAYOUT EVENTI MOBILE A 4 COLONNE E FIX CLICK (DEFINITIVO)*/ /* ======================================================= */ /* 1. Reset totale della tabella per annullare main.css */ #dettagliochiesa-page #appointments .custom-table, #dettagliochiesa-page #appointments .custom-table thead, #dettagliochiesa-page #appointments .custom-table tbody { display: block !important; width: 100% !important; border-collapse: collapse !important; border: none !important; /* FONDAMENTALE: Annulla l'overflow: hidden del main.css che taglia la hitbox */ overflow: visible !important; } /* 2. Fix Allineamento Header (Uccide lo sticky del main.css) */ #dettagliochiesa-page #appointments .custom-table thead th { position: static !important; border-bottom: none !important; } #dettagliochiesa-page #appointments .custom-table thead tr { border-bottom: 2px solid #E0CD00 !important; } /* Ripristina la visibilità e adatta l'accordion per il mobile */ #dettagliochiesa-page .custom-table tr.accordion-content { display: block !important; width: 100% !important; border-bottom: none !important; } #dettagliochiesa-page .custom-table tr.accordion-content td { display: block !important; width: 100% !important; padding: 0 !important; } /* 3. COSTRUZIONE GRIGLIA ESATTA (Sulle righe) */ #dettagliochiesa-page .custom-table thead tr, #dettagliochiesa-page .custom-table tbody tr.accordion-trigger { display: grid !important; /* L'immagine prende 1fr (spazio rimanente), Tipologia prende 55px fissi */ grid-template-columns: 35px 75px 1fr 55px !important; align-items: center; width: 100% !important; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* Rende la riga cliccabile */ cursor: pointer !important; position: relative; z-index: 5; } /* Reset base per tutte le celle in modo che si adattino alla griglia */ #dettagliochiesa-page .custom-table th, #dettagliochiesa-page .custom-table td { display: block !important; padding: 0 !important; border: none !important; background: transparent !important; /* Permette al tocco di essere registrato e "risalire" (bubble) alla riga */ pointer-events: auto !important; } /* ========================================== */ /* ORDINAMENTO E VISIBILITÀ DELLE COLONNE */ /* ========================================== */ /* NASCONDI Colonna 2 (Titolo) */ #dettagliochiesa-page .custom-table th:nth-child(2), #dettagliochiesa-page .custom-table td:nth-child(2) { display: none !important; } /* Colonna 1: Freccia */ #dettagliochiesa-page .custom-table th:nth-child(1), #dettagliochiesa-page .custom-table td:nth-child(1) { order: 1 !important; text-align: center !important; } /* Colonna 4: Data (Diventa la 2a) */ #dettagliochiesa-page .custom-table th:nth-child(4), #dettagliochiesa-page .custom-table td:nth-child(4) { order: 2 !important; text-align: left !important; font-size: 0.85rem; padding-left: 5px !important; } /* Colonna 5: Immagine/Evento (Diventa la 3a) */ #dettagliochiesa-page .custom-table th:nth-child(5), #dettagliochiesa-page .custom-table td:nth-child(5) { order: 3 !important; text-align: center !important; } /* Colonna 3: Tipologia (Diventa la 4a) */ #dettagliochiesa-page .custom-table th:nth-child(3), #dettagliochiesa-page .custom-table td:nth-child(3) { order: 4 !important; /* Allineiamo a destra per poter gestire lo spazio finale con precisione */ text-align: right !important; font-weight: bold; /* 👇 MODIFICA QUESTO VALORE (es. 10px, 20px, 25px) PER ALLONTANARE O AVVICINARE IL TESTO AL BORDO DESTRO 👇 */ padding-right: 25px !important; } /* Dimensione immagine coerente */ #dettagliochiesa-page .custom-table td:nth-child(5) img { max-width: 90px !important; height: auto; margin: 0 auto; } /* Mostra il titolo iniettato all'interno dell'accordion solo su mobile */ #dettagliochiesa-page .mobile-injected-title { display: block !important; } /* Rende visibile e formatta la legenda creata dal JS */ #dettagliochiesa-page .mobile-legend { display: block !important; margin-top: 30px; padding: 15px; background-color: #283929; /* Stesso sfondo delle card */ border: 1px solid #D8C40A; border-radius: 8px; } } /*fine 991.98px*/ /* ========================= TABLET (768px–991px) ========================= */ @media (max-width: 991.98px) { body.registrazione-page .registrazione-box { padding: 30px 25px; } body.registrazione-page #hero { padding: 30px 0 30px 0 !important; } body.registrazione-page .section-title h2 { font-size: 26px !important; letter-spacing: 1px !important; } /* Riduciamo padding inferiore hero */ body.registrazione-page #hero { padding-bottom: 15px !important; } /* Riduciamo spazio sotto il blocco titolo */ body.registrazione-page .section-title { padding-bottom: 5px !important; } /* Riduciamo spazio sopra il box */ body.registrazione-page .registrazione-box { margin-top: 10px; } body.registrazione-page #registrazioneForm { width: 100% !important; margin: 0 !important; padding: 0 !important; /* padding già gestito dal box */ border: none !important; box-shadow: none !important; background-color: transparent !important; } } /* ========================= MOBILE (<= 767px) ========================= */ @media (max-width: 767.98px) { /* Ripristiniamo un minimo di gutter laterale perché il container è stato azzerato globalmente */ body.registrazione-page .container { padding-left: 15px !important; padding-right: 15px !important; } body.registrazione-page .registrazione-box { padding: 25px 20px; border-radius: 12px; } body.registrazione-page .section-title h2 { font-size: 22px !important; } body.registrazione-page .section-title p { font-size: 0.95rem; } /* Titoli sezioni */ body.registrazione-page #registrazioneForm h4 { font-size: 1rem; letter-spacing: 0.5px; margin-bottom: 18px; } /* Checkbox allineate a sinistra per UX migliore */ body.registrazione-page .privacy-wrapper { justify-content: flex-start !important; align-items: flex-start !important; } body.registrazione-page .custom-privacy-label { font-size: 0.9rem !important; line-height: 1.4; } /* Bottone full width */ body.registrazione-page .btn-registra { width: 100%; padding: 12px 20px; } body.registrazione-page #registrazioneForm h4 { position: sticky; top: 0; background: #002b00; padding-top: 10px; z-index: 5; } body.registrazione-page .collapse-mobile { display: none; } /* ========================================== OTTIMIZZAZIONE SPAZIO LATERALE MOBILE ========================================== */ /* Riduciamo padding box */ body.registrazione-page .registrazione-box { padding-left: 15px; padding-right: 15px; } /* Riduciamo gutter colonne interne */ body.registrazione-page .registrazione-box .row { --bs-gutter-x: 10px; } } /* ========================= MOBILE SMALL (<= 480px) ========================= */ @media (max-width: 480px) { body.registrazione-page .registrazione-box { padding: 20px 15px; } body.registrazione-page .section-title h2 { font-size: 20px !important; } body.registrazione-page .section-title p { font-size: 0.9rem; } /* Labels più compatte */ body.registrazione-page .form-label { font-size: 0.75rem; } /* Input leggermente più compatti */ body.registrazione-page .form-control, body.registrazione-page .form-select { padding: 10px 12px; font-size: 0.9rem; } /* Riduciamo leggermente altezza barra password */ body.registrazione-page #password-strength-bar { height: 3px; } } /* ===================================================== LOGIN PAGE – MOBILE RESPONSIVE OVERRIDE File: mobile-override.css Scoped: body.login-page ===================================================== */ /* ===================================================== TABLET (768px – 991px) ===================================================== */ @media (max-width: 991.98px) { body.login-page main.main { /* Evita centratura forzata quando lo spazio è ridotto */ align-items: flex-start; padding-top: 40px; } body.login-page .login-card { max-width: 460px; padding: 32px; } body.login-page .login-title-section { padding-top: 30px; } body.login-page .login-title-section .section-title h2 { font-size: 28px; letter-spacing: 1.5px; } } /* ===================================================== MOBILE (481px – 767px) ===================================================== */ @media (max-width: 767.98px) { body.login-page main.main { align-items: flex-start; padding-top: 30px; padding-bottom: 30px; } /* Riduciamo padding container Bootstrap */ body.login-page main.main .container { padding-left: 20px; padding-right: 20px; } body.login-page .login-card { padding: 28px; border-radius: 14px; } body.login-page .login-title-section { padding-top: 20px; } body.login-page .login-title-section .section-title h2 { font-size: 24px; letter-spacing: 1px; } body.login-page .login-title-section .section-title p { font-size: 1rem; margin-top: 12px; } body.login-page .btn-gold-login { padding: 14px; font-size: 0.95rem; } body.login-page .login-footer-links { font-size: 0.85rem; } } /* ===================================================== MOBILE SMALL (<= 480px) ===================================================== */ @media (max-width: 480px) { body.login-page main.main { align-items: flex-start; padding-top: 20px; padding-bottom: 25px; } body.login-page main.main .container { padding-left: 16px; padding-right: 16px; } body.login-page .login-card { padding: 22px; border-radius: 12px; } body.login-page .login-title-section { padding-top: 10px; } body.login-page .login-title-section .section-title h2 { font-size: 20px; letter-spacing: 0.5px; padding-bottom: 15px; } body.login-page .login-title-section .section-title h2:after { width: 40px; height: 2px; } body.login-page .login-title-section .section-title p { font-size: 0.95rem; } body.login-page .form-control { padding: 10px 12px; font-size: 0.95rem; } body.login-page .btn-gold-login { margin-top: 15px; } body.login-page .login-footer-links { margin-top: 20px; } body.login-page .alert { font-size: 0.85rem; } } /* ===================================================== APPUNTAMENTI Scoped lo stile successivo probabilmente non fa parte del break-point e probabilmente la porteremo in alto ===================================================== */ body.appuntamenti-page section#hero { padding: 20px 0 40px 0 !important; } /* ===================================================== OTTIMIZZAZIONE PER SCHERMI MOLTO PICCOLI (<= 480px) ===================================================== */ @media (max-width: 480px) { body.appuntamenti-page .custom-table tr.master-row.accordion-open, body.appuntamenti-page .custom-table tr.slave-row.show-slave { grid-template-columns: 1fr auto; /* Orario e Evento si impilano a sinistra, Azioni a destra */ grid-template-areas: "day day" "time actions" "event actions"; } body.appuntamenti-page .custom-table tr.slave-row.show-slave { grid-template-areas: "time actions" "event actions"; } /* Avvicina visivamente l'orario al nome dell'evento */ body.appuntamenti-page .custom-table tr td:nth-child(2) { padding: 15px 10px 2px 15px !important; } body.appuntamenti-page .custom-table tr td:nth-child(3) { padding: 2px 10px 15px 15px !important; } body.appuntamenti-page .custom-table tr td.centered-content { flex-direction: column; justify-content: center; padding-right: 15px !important; } } .eventi-page .eventi-header-section .container{ padding-left: 12px !important; padding-right: 12px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================== SCHEDA PROFILO UTENTE NEL MENU MOBILE ========================================================== */ @media (max-width: 991.98px) { /* Box principale del profilo dentro l'hamburger */ .mobile-profile-card { background-color: rgba(216, 196, 10, 0.08) !important; /* Sfondo giallino trasparente per staccare */ border: 1px solid rgba(216, 196, 10, 0.3) !important; border-radius: 8px !important; padding: 15px !important; margin-bottom: 15px !important; text-align: left !important; /* Allineamento a sinistra per distinguersi dai link del menu */ } /* Icona utente */ .profile-icon-mobile { font-size: 28px; color: #D8C40A; margin-right: 10px; } /* Nome utente */ .user-name-mobile { font-size: 16px; line-height: 1.2; } /* Contenitore dei badge */ .mobile-profile-card .mobile-badges { flex-wrap: wrap; /* Se ci sono troppi badge, vanno a capo */ } /* Pulsante "Gestione Profilo" specifico per il mobile */ .mobile-nav-active .navmenu ul .mobile-profile-card a.btn-profilo-mobile { display: block !important; text-align: center !important; background-color: #D8C40A !important; color: #001900 !important; /* Testo scuro su fondo giallo */ font-weight: bold !important; padding: 10px !important; border-radius: 6px !important; margin: 0 !important; border: none !important; } /* Effetto hover sul pulsante profilo mobile */ .mobile-nav-active .navmenu ul .mobile-profile-card a.btn-profilo-mobile:hover { background-color: #f0dd40 !important; } } /* ========================================================================== OVERRIDE MOBILE/TABLET PER INDEX-PAGE (Max-width: 991px) ========================================================================== */ @media (max-width: 991px) { /* --------------------------------------------------- 1. SPLASH SCREEN (#betaSplashScreen) --------------------------------------------------- */ /* Trasforma gli elementi in una griglia 2x2 per non schiacciarli */ .index-page #betaSplashScreen .features-grid-splash { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px; margin-bottom: 20px; } /* Ottimizza le dimensioni dei testi interni alla griglia */ .index-page #betaSplashScreen .f-item { font-size: 0.85rem; text-align: center; padding: 5px; } /* Ridimensiona leggermente i testi della modale */ .index-page #betaSplashScreen .welcome-static-title { font-size: 1.3rem; } .index-page #betaSplashScreen .welcome-username { font-size: 1.8rem; } .index-page #betaSplashScreen .btn-gold-splash { font-size: 0.9rem; padding: 10px; } /* --------------------------------------------------- 2. NEWS TICKER --------------------------------------------------- */ /* Nasconde completamente la barra scorrevole per recuperare spazio */ .index-page .news-ticker { display: none !important; } /* --------------------------------------------------- 3. HERO SECTION (#hero) --------------------------------------------------- */ /* Annulla il 55% forzato dal CSS principale e centra tutto */ .index-page #hero .col-lg-6 { width: 100% !important; /* FORZA AL 100% */ flex: 0 0 100% !important; /* FORZA AL 100% */ max-width: 100% !important; /* FORZA AL 100% */ text-align: center; display: flex; flex-direction: column; align-items: center; padding-left: 15px !important; padding-right: 15px !important; } /* Adatta il titolo */ .index-page #hero h2 { font-size: 2rem; line-height: 1.3; margin-bottom: 15px; } /* Gestione del paragrafo (Visivamente "ristretto" ma leggibile) */ .index-page #hero p { max-width: 85%; margin: 0 auto 20px auto !important; font-size: 1rem; } /* Centra il pulsante e ne riduce l'ingombro visivo */ .index-page #hero .d-flex { justify-content: center !important; width: 100%; } .index-page #hero .btn-get-started { padding: 8px 25px; font-size: 15px; } /* --------------------------------------------------- 4. SEZIONE TABS (Layout Definitivo: Griglia Bottoni/Immagine) --------------------------------------------------- */ /* La Griglia Principale */ .index-page #tabs .container { display: grid !important; /* Usiamo 'fr' (frazioni). Il lato sx prende 1.3 spazi, il dx 1 spazio. Super elastico! */ grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 15px; /* Lo spazio centrale che ti piace */ align-items: stretch !important; /* Forza l'altezza identica */ padding-right: 15px !important; /* RIPRISTINA LO SPAZIO DESTRO! */ } .index-page #tabs .container::after { display: none !important; } /* -- QUADRANTE 1: I BOTTONI -- */ .index-page #tabs .nav-tabs { grid-column: 1 / 2; grid-row: 1 / 2; display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 8px !important; border-bottom: none; margin: 0 !important; padding: 0 !important; height: 100% !important; } .index-page #tabs .nav-tabs .nav-item { width: 100% !important; margin: 0 !important; } .index-page #tabs .nav-tabs .nav-link { width: 100%; height: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 10px 12px !important; border-radius: 8px !important; text-align: left; } .index-page #tabs .nav-tabs .nav-link h4 { font-size: 0.95rem !important; margin: 0 0 0 10px !important; line-height: 1.2; } .index-page #tabs .nav-tabs .nav-link i { font-size: 1.2rem !important; margin: 0 !important; } /* -- MAGIA CSS: SCIOGLIAMO I CONTENITORI -- */ .index-page #tabs .tab-content, .index-page #tabs .tab-pane.active, .index-page #tabs .tab-pane.active > .row { display: contents !important; } .index-page #tabs .tab-pane:not(.active) { display: none !important; } /* -- QUADRANTE 2: IL CONTENITORE DELL'IMMAGINE -- */ .index-page #tabs .tab-pane.active > .row > div:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; display: block !important; width: 100% !important; height: 100% !important; padding: 0 !important; } /* -- L'IMMAGINE (Correzione Altezza e Spazio) -- */ .index-page #tabs .tab-pane.active > .row > div:nth-child(2) img { display: block !important; /* RISOLVE IL PROBLEMA DELL'ALTEZZA SFALSATA DEI 4 PIXEL */ width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.4); margin: 0 !important; } /* -- QUADRANTE 3: IL TESTO SOTTOSTANTE -- */ .index-page #tabs .tab-pane.active > .row > div:nth-child(1) { grid-column: 1 / 3; grid-row: 2 / 3; margin-top: 15px; } .index-page #tabs .tab-pane h3 { font-size: 1.25rem !important; line-height: 1.2 !important; margin-bottom: 12px !important; } .index-page #tabs .tab-pane p, .index-page #tabs .tab-pane .fst-italic { font-size: 0.95rem !important; line-height: 1.45 !important; margin-bottom: 10px !important; text-align: left !important; } .index-page #tabs .tab-pane ul { padding-left: 0 !important; margin-bottom: 15px !important; } .index-page #tabs .tab-pane ul li { font-size: 0.95rem !important; line-height: 1.4 !important; margin-bottom: 8px !important; display: flex; align-items: flex-start; } .index-page #tabs .tab-pane ul li i { margin-right: 8px !important; font-size: 1.1rem !important; margin-top: 2px !important; } /* --------------------------------------------------- 5. SPAZIATURE E CARD (#ricerca) --------------------------------------------------- */ /* Riduce il padding verticale generico delle sezioni su mobile */ .index-page .section { padding: 40px 0 !important; } /* Riduce lo spazio vuoto (gap) tra una card e l'altra (sovrascrive il .gy-4 di Bootstrap) */ .index-page #ricerca .row.gy-4 { --bs-gutter-y: 15px; } /* TRASFORMAZIONE CARD: Da enormi blocchi verticali a snelle card orizzontali */ .index-page #ricerca .service-item { flex-direction: row; /* Icona a sx, testo a dx */ align-items: center; /* Centra verticalmente */ text-align: left; /* Allinea il testo a sinistra */ padding: 12px 15px; /* Padding drasticamente ridotto */ min-height: auto; } /* Rimpicciolisce l'icona e le ridà il margine a destra */ .index-page #ricerca .service-item .icon { width: 45px; height: 45px; font-size: 20px; margin-bottom: 0; /* Rimuove il margine inferiore */ margin-right: 15px; /* Spazio tra icona e testo */ flex-shrink: 0; /* Evita che l'icona si schiacci */ } /* Ottimizza le dimensioni dei testi interni per il mobile */ .index-page #ricerca .service-item .title { font-size: 1rem; /* Titolo più compatto */ margin-bottom: 2px; /* Avvicina il titolo alla descrizione */ } .index-page #ricerca .service-item .description { font-size: 0.8rem; /* Descrizione più piccola */ line-height: 1.3; margin: 0; display: block; } /* Ridimensiona i pulsanti all'interno della modale eventi */ .index-page #sceltaEventiModal .btn-search-gold { font-size: 0.9rem; padding: 10px; } /* --------------------------------------------------- 6. SEZIONE CHI SIAMO (#about) --------------------------------------------------- */ /* Riduciamo lo spazio enorme (gy-5) tra il testo e l'accordion sottostante */ .index-page #about .row.gy-5 { --bs-gutter-y: 20px; } /* Ottimizza il titolo: più proporzionato allo schermo mobile */ .index-page #about .content h3 { font-size: 1.4rem; /* Riduce la grandezza */ line-height: 1.3; margin-bottom: 15px; /* Dà spazio prima del testo */ } /* Ottimizza il paragrafo: leggibilità e respiro */ .index-page #about .content p { font-size: 0.95rem; line-height: 1.65; /* FONDAMENTALE: Aumenta lo spazio tra le righe */ color: #b0c4b0; /* Usa il verdino/grigio del tema invece del bianco puro per non stancare gli occhi */ text-align: left; /* Allineamento a sinistra (più facile da leggere su mobile rispetto al giustificato) */ } } /* ========================================================================== FOOTER MOBILE & TABLET OVERRIDES Progetto: CHIESE EVANGELICHE ITALIA ========================================================================== */ /* -------------------------------------------------------------------------- REGOLE COMUNI PER ENTRAMBI (Max-width: 991px) (Reset di allineamenti, ordine elementi e nascondimento Logo) -------------------------------------------------------------------------- */ @media (max-width: 991px) { /* Setup Griglia Flex */ #footer .row { display: flex !important; flex-wrap: wrap !important; } /* Ordine dei blocchi nella riga */ #footer .footer-links:nth-of-type(2) { order: 1; } /* Link Utili */ #footer .footer-links:nth-of-type(3) { order: 2; } /* Servizi */ #footer .footer-newsletter { order: 3; } #footer .footer-about { order: 4; } /* Contatti in fondo */ /* Nascondi il Logo */ #footer .logo { display: none !important; } /* Allineamenti generali a Sinistra per le liste */ #footer .footer-links h4 { text-align: left !important; padding-bottom: 12px !important; } #footer .footer-links ul { align-items: flex-start !important; margin: 0 !important; } #footer .footer-links ul li { justify-content: flex-start !important; padding: 6px 0 !important; } /* Allineamenti generali Newsletter */ #footer .footer-newsletter h4, #footer .footer-newsletter p { text-align: left !important; padding-left: 0 !important; } /* Contatti in fondo (100% larghezza) */ #footer .footer-about { width: 100% !important; margin-top: 20px !important; } #footer .footer-contact p { text-align: left !important; display: block !important; margin-bottom: 8px !important; } #footer .footer-contact span { margin-left: 5px !important; word-break: break-word; } #footer .social-links { justify-content: flex-start !important; } /* Pulizia Spaziature HTML */ #footer .footer-top { padding-bottom: 0 !important; } #footer .copyright { padding-top: 0 !important; border-top: none !important; } } /* -------------------------------------------------------------------------- SCENARIO 1: TABLET (Da 481px a 991px) Layout: 3 Colonne affiancate (Link, Servizi, Newsletter) -------------------------------------------------------------------------- */ @media (min-width: 481px) and (max-width: 991px) { /* Assegnazione larghezze: 30% ai link, 40% alla newsletter */ #footer .footer-links:nth-of-type(2) { width: 30% !important; flex: 0 0 30% !important; padding-left: 15px !important; } #footer .footer-links:nth-of-type(3) { width: 30% !important; flex: 0 0 30% !important; padding-left: 10px !important; } #footer .footer-newsletter { width: 40% !important; flex: 0 0 40% !important; padding-left: 15px !important; padding-right: 15px !important; } /* Incolonniamo il form Newsletter altrimenti il 40% è troppo stretto */ #footer .newsletter-group { flex-direction: column !important; background: transparent !important; gap: 10px; } #footer #newsletterEmail, #footer #newsletterSubmit { width: 100% !important; border-radius: 4px !important; } #footer #newsletterEmail { background: #ffffff !important; text-align: left !important; padding: 10px 15px !important; } } /* -------------------------------------------------------------------------- SCENARIO 2: SMARTPHONE (Fino a 480px) Layout: 2 Colonne (Link/Servizi) + Newsletter a capo -------------------------------------------------------------------------- */ @media (max-width: 480px) { /* Link Utili (50%) - QUI APPLICHIAMO IL PADDING 30PX INIZIALE */ #footer .footer-links:nth-of-type(2) { width: 50% !important; flex: 0 0 50% !important; padding-left: 30px !important; /* Sposta il gruppo di link a destra */ margin-bottom: 25px !important; } /* Servizi (50%) - Scorre accanto ai Link Utili */ #footer .footer-links:nth-of-type(3) { width: 50% !important; flex: 0 0 50% !important; padding-left: 10px !important; /* Normale distanza dalla colonna 1 */ margin-bottom: 25px !important; } /* Newsletter a capo (100%) - QUI APPLICHIAMO IL PADDING 30PX INIZIALE */ #footer .footer-newsletter { width: 100% !important; flex: 0 0 100% !important; padding-left: 30px !important; /* Allineato ai Link Utili */ padding-right: 30px !important; /* Evita che input sbatta sul lato destro */ margin-bottom: 25px !important; } /* Impiliamo l'input e il bottone per occupare in modo pulito lo spazio */ #footer .newsletter-group { flex-direction: column !important; background: transparent !important; gap: 10px; width: 100% !important; } #footer #newsletterEmail, #footer #newsletterSubmit { width: 100% !important; border-radius: 4px !important; } #footer #newsletterEmail { background: #ffffff !important; text-align: left !important; padding: 12px 15px !important; } /* Anche i Contatti e i Social ereditano i 30px per creare una linea retta perfetta */ #footer .footer-about { padding-left: 30px !important; } } /* ========================================================== FIX SPLASH SCREEN (SOLO PER DISPOSITIVI MOBILE E TABLET) ========================================================== */ @media (max-width: 991.98px) { .modal-overlay-splash { position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; display: flex !important; align-items: center !important; justify-content: center !important; padding: 15px !important; box-sizing: border-box; width: 100% !important; /* Previene lo slittamento a destra */ z-index: 100000; } .modal-container-splash { width: 100%; max-width: 400px; /* Non lo fa allargare troppo sui tablet */ max-height: 90vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* 3. Il "Cuore" della modale si schiaccia o scorre */ .modal-body-splash { overflow-y: auto !important; /* Se lo schermo è troppo piccolo, scorre col dito! */ flex-shrink: 1 !important; /* Permette alla modale di comprimersi elasticamente */ padding-bottom: 10px !important; } } /* ========================================================== 4. EXTRA: Compressione automatica per schermi bassi (es. Honor 7A) ========================================================== */ @media (max-height: 650px) { .modal-header-splash { padding-top: 15px !important; padding-bottom: 10px !important; } .logo-img-splash { max-height: 50px !important; } /* Rimpicciolisce il logo */ .promo-card { padding: 10px !important; margin-bottom: 0 !important; } .features-grid-splash { gap: 5px !important; } .f-item { font-size: 13px !important; margin-bottom: 5px !important; } .btn-gold-splash { padding: 8px 20px !important; font-size: 14px !important; } .modal-footer-splash { padding-bottom: 15px !important; } } /* HONOR 7A FIX: Sotto i 400px rimuove completamente il rientro */ @media (max-width: 400px) { #header a.logo .sitename .second-line { padding-left: 0 !important; text-align: left !important; } }