/* 
Theme Name: Soccorso Illuminato
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Soccorso Illuminato is a child theme
Author: Gianmarco Rossi
Author URI: https://nkey.it
Template: hello-elementor
Version: 2.0.0
Text Domain: si
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* GLITCH EFFECT per Elementor */

/* Ogni parola ha il suo effetto glitch indipendente */
.glitch-word {
  position: relative;
  display: inline-block;
  animation: glitch-skew 0.7s infinite steps(2) alternate-reverse;
}

/* Layer RGB - ereditano tutto dallo stile della parola */
.glitch-word::before,
.glitch-word::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  mix-blend-mode: screen;
  white-space: nowrap;
}

.glitch-word::before {
  color: #00e5ff; /* ciano neon */
  z-index: -1;
  animation: glitch-before 0.6s infinite steps(4) alternate-reverse;
}

.glitch-word::after {
  color: #ff00c8; /* magenta neon */
  z-index: -1;
  animation: glitch-after 0.65s infinite steps(4) alternate-reverse;
}

/* Aggiungi delay random a ogni parola per effetto asincrono */
.glitch-word:nth-child(2n) {
  animation-delay: -0.3s;
}

.glitch-word:nth-child(2n)::before {
  animation-delay: -0.2s;
}

.glitch-word:nth-child(2n)::after {
  animation-delay: -0.4s;
}

.glitch-word:nth-child(3n) {
  animation-delay: -0.6s;
}

.glitch-word:nth-child(3n)::before {
  animation-delay: -0.5s;
}

.glitch-word:nth-child(3n)::after {
  animation-delay: -0.7s;
}

/* ----- KEYFRAMES - Effetto scattoso e veloce, vicino al testo ----- */
@keyframes glitch-before {
  0% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  10% {
    transform: translate(-3px, -1px);
    clip-path: inset(10% 0 85% 0);
  }
  20% {
    transform: translate(3px, 1px);
    clip-path: inset(40% 0 50% 0);
  }
  30% {
    transform: translate(-2px, 0);
    clip-path: inset(70% 0 20% 0);
  }
  40% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  50% {
    transform: translate(2px, -1px);
    clip-path: inset(20% 0 75% 0);
  }
  60% {
    transform: translate(-3px, 1px);
    clip-path: inset(60% 0 30% 0);
  }
  70% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  80% {
    transform: translate(3px, 0);
    clip-path: inset(5% 0 90% 0);
  }
  90% {
    transform: translate(-2px, 1px);
    clip-path: inset(80% 0 15% 0);
  }
  100% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-after {
  0% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  15% {
    transform: translate(3px, 1px);
    clip-path: inset(30% 0 65% 0);
  }
  25% {
    transform: translate(-4px, -1px);
    clip-path: inset(15% 0 80% 0);
  }
  35% {
    transform: translate(2px, 0);
    clip-path: inset(50% 0 45% 0);
  }
  45% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  55% {
    transform: translate(-3px, 1px);
    clip-path: inset(75% 0 20% 0);
  }
  65% {
    transform: translate(4px, 0);
    clip-path: inset(5% 0 90% 0);
  }
  75% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  85% {
    transform: translate(-2px, 1px);
    clip-path: inset(40% 0 55% 0);
  }
  95% {
    transform: translate(3px, -1px);
    clip-path: inset(85% 0 10% 0);
  }
  100% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-skew {
  0% { transform: skew(0deg); }
  25% { transform: skew(-1.5deg); }
  50% { transform: skew(1.5deg); }
  75% { transform: skew(-1deg); }
  100% { transform: skew(0deg); }
}

/* ----- GLITCH EFFECT PER BOTTONI ELEMENTOR ----- */

/* Applica la classe .glitch-button al widget Bottone di Elementor */
.glitch-button .elementor-button {
  position: relative;
  animation: glitch-skew-button 0.7s infinite steps(2) alternate-reverse;
  flex-grow: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* Disabilita effetti hover */
.glitch-button .elementor-button:hover {
  transform: none !important;
}

/* Layer RGB per i bordi del bottone */
.glitch-button .elementor-button::before,
.glitch-button .elementor-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-width: inherit;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
}

.glitch-button .elementor-button::before {
  border-color: #00e5ff; /* ciano neon */
  background: transparent;
  z-index: -1;
  animation: glitch-button-before 0.6s infinite steps(4) alternate-reverse;
}

.glitch-button .elementor-button::after {
  border-color: #ff00c8; /* magenta neon */
  background: transparent;
  z-index: -1;
  animation: glitch-button-after 0.65s infinite steps(4) alternate-reverse;
}

/* Animazioni per i bordi del bottone */
@keyframes glitch-button-before {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  25% {
    transform: translate(-3px, -1px);
    opacity: 0.8;
  }
  50% {
    transform: translate(3px, 1px);
    opacity: 1;
  }
  75% {
    transform: translate(-2px, 0);
    opacity: 0.9;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes glitch-button-after {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  25% {
    transform: translate(3px, 1px);
    opacity: 0.9;
  }
  50% {
    transform: translate(-4px, -1px);
    opacity: 0.8;
  }
  75% {
    transform: translate(2px, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes glitch-skew-button {
  0% { transform: skew(0deg); }
  25% { transform: skew(-1.5deg); }
  50% { transform: skew(1.5deg); }
  75% { transform: skew(-1deg); }
  100% { transform: skew(0deg); }
}

/* ----- EFFETTO Y2K STATICO PER CTA (CALL TO ACTION) ELEMENTOR ----- */

/* Applica la classe .glitch-cta al widget Call To Action di Elementor */
.glitch-cta .elementor-cta {
  position: relative;
  border: 3px solid #ffd500 !important;
  overflow: hidden !important;
  box-shadow: 2px 2px 0 #00e5ff, 3px 3px 0 #ff00c8 !important;
}

/* Assicura che il contenuto della CTA rimanga fermo e sopra i layer */
.glitch-cta .elementor-cta__content {
  position: relative;
  z-index: 1;
  transform: none !important;
}

/* Mantieni fermi anche i figli del contenuto */
.glitch-cta .elementor-cta * {
  transform: none !important;
}

/* ----- EFFETTO Y2K UNIVERSALE ----- */

/* Classe universale per bordi con effetto Y2K giallo (stile calendario) */
.y2k-calendario-box {
  position: relative;
  background: linear-gradient(135deg, #fffbf0 0%, #fff9e6 100%);
  border: 3px solid #ffd500;
  border-radius: 12px;
  padding: 2rem;
  overflow: hidden;
  box-shadow: 2px 2px 0 #00e5ff, 3px 3px 0 #ff00c8;
}

/* Classe solo bordo Y2K viola (legacy) */
.y2k-border {
  position: relative;
  overflow: visible !important;
  border: 4px solid #3b1a71;
}

/* Layer RGB per i bordi - effetto aberrazione cromatica Y2K */
.y2k-border::before,
.y2k-border::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.8;
  border: 3px solid;
}

.y2k-border::before {
  border-color: #00e5ff; /* ciano */
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  transform: translate(-3px, -3px);
}

.y2k-border::after {
  border-color: #ff00c8; /* magenta */
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  transform: translate(3px, 3px);
}

/* Assicura che il contenuto rimanga fermo e sopra i layer */
.y2k-border > * {
  position: relative;
  z-index: 1;
  transform: none !important;
}

/* ----- GLITCH EFFECT PER CONTAINER ELEMENTOR ----- */

/* La classe .glitch-container ora eredita da .y2k-border per compatibilità */

/* Animazioni per il box container - più marcate e visibili */
@keyframes glitch-container-before {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5px, -3px);
  }
  20% {
    transform: translate(5px, 2px);
  }
  30% {
    transform: translate(-4px, 1px);
  }
  40% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(4px, -2px);
  }
  60% {
    transform: translate(-5px, 3px);
  }
  70% {
    transform: translate(0, 0);
  }
  80% {
    transform: translate(5px, -1px);
  }
  90% {
    transform: translate(-3px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes glitch-container-after {
  0% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(5px, 3px);
  }
  25% {
    transform: translate(-6px, -2px);
  }
  35% {
    transform: translate(4px, 1px);
  }
  45% {
    transform: translate(0, 0);
  }
  55% {
    transform: translate(-5px, 2px);
  }
  65% {
    transform: translate(6px, -1px);
  }
  75% {
    transform: translate(0, 0);
  }
  85% {
    transform: translate(-4px, 3px);
  }
  95% {
    transform: translate(5px, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes glitch-skew-container {
  0% { transform: skew(0deg); }
  25% { transform: skew(-1.5deg); }
  50% { transform: skew(1.5deg); }
  75% { transform: skew(-1deg); }
  100% { transform: skew(0deg); }
}

/* ----- CUSTOM SKIN ARCHIVE POSTS CON GLITCH ----- */

.si-glitch-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  width: 100%;
}

.si-glitch-archive-item {
  width: 100%;
}

.si-archive-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background: #fff;
  border: 2px solid #3b1a71;
}

.si-archive-thumbnail {
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
}

.si-archive-thumbnail a {
  display: block;
  line-height: 0;
}

.si-archive-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.si-archive-thumbnail a:hover img {
  transform: scale(1.05);
}

.si-archive-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.si-archive-title {
  margin: 0 0 15px 0;
  font-size: 24px;
  line-height: 1.3;
}

.si-archive-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.si-archive-title a:hover {
  color: #3b1a71;
}

.si-archive-date {
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.si-archive-excerpt {
  margin-bottom: 20px;
  flex-grow: 1;
  line-height: 1.6;
  color: #333;
}

.si-archive-readmore {
  margin-top: auto;
}

.si-archive-button {
  display: inline-block;
  padding: 12px 30px;
  background-color: #3b1a71;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  font-weight: 600;
}

.si-archive-button:hover {
  background-color: #2a1253;
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .si-glitch-archive-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .si-archive-title {
    font-size: 20px;
  }
}

/* ----- ARCHIVIO EVENTI CON SIDEBAR E FILTRI AJAX ----- */

/* Wrapper principale */
.eventi-archive-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Box categorie sidebar - ora usa la classe universale y2k-border */

.eventi-archive-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

/* ----- SIDEBAR CATEGORIE ----- */
.eventi-sidebar {
  position: sticky;
  top: 100px;
}

.eventi-sidebar-inner {
  background: #fff;
  border: 3px solid #3b1a71;
  padding: 25px;
  border-radius: 8px;
}

.eventi-sidebar-title {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 700;
  color: #3b1a71;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.eventi-category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.eventi-category-list li {
  margin-bottom: 8px;
}

.evento-category-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: transparent;
  border: 2px solid transparent;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  text-align: left;
}

.evento-category-btn .category-icon {
  color: #3b1a71;
  font-size: 10px;
  flex-shrink: 0;
}

.evento-category-btn .category-name {
  flex-grow: 1;
}

.evento-category-btn .category-count {
  font-size: 13px;
  color: #999;
  font-weight: 400;
}

.evento-category-btn:hover {
  background-color: rgba(59, 26, 113, 0.05);
  border-color: #3b1a71;
  color: #3b1a71;
}

.evento-category-btn.active {
  background-color: #3b1a71;
  border-color: #3b1a71;
  color: #fff;
}

.evento-category-btn.active .category-icon,
.evento-category-btn.active .category-count {
  color: #fff;
}

/* ----- CONTENUTO PRINCIPALE ----- */
.eventi-main-content {
  min-height: 500px;
}

.eventi-page-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 3px solid #3b1a71;
}

.eventi-page-title {
  margin: 0 0 10px 0;
  font-size: 42px;
  font-weight: 800;
  color: #3b1a71;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.eventi-count {
  margin: 0;
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

/* ----- GRIGLIA EVENTI 3 COLONNE ----- */
.eventi-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
  transition: opacity 0.3s ease;
}

.evento-card {
  width: 100%;
}

.evento-glitch-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 4px solid #ffd500;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 4px 4px 0 #00e5ff, 8px 8px 0 #ff00c8;
}

.evento-glitch-box:hover {
  transform: translateY(-5px);
  box-shadow: 6px 6px 0 #00e5ff, 12px 12px 0 #ff00c8;
}

/* Immagine evento */
.evento-image {
  width: 100%;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  background: #f5f5f5;
  border-radius: 12px 12px 0 0;
}

.evento-image a {
  display: block;
  width: 100%;
  height: 100%;
}

.evento-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.evento-image a:hover img {
  transform: scale(1.1);
}

/* Body della card */
.evento-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 25px;
}

.evento-card-title {
  margin: 0 0 15px 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
}

.evento-card-title a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s ease;
}

.evento-card-title a:hover {
  color: #3b1a71;
}

/* Meta informazioni */
.evento-meta {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.evento-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background-color: rgba(59, 26, 113, 0.1);
  color: #3b1a71;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
}

.evento-date-badge svg {
  flex-shrink: 0;
}

/* Estratto */
.evento-excerpt-text {
  margin-bottom: 20px;
  flex-grow: 1;
  line-height: 1.6;
  color: #555;
  font-size: 15px;
}

/* Footer con pulsante */
.evento-footer {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.evento-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 24px !important;
  background-color: #ffd500 !important;
  color: #000000 !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: 3px solid #000000 !important;
}

.evento-btn:hover {
  background-color: #ffdf33 !important;
  color: #000000 !important;
  transform: translateX(5px) !important;
  border-color: #000000 !important;
}

.evento-btn svg {
  transition: transform 0.3s ease;
}

.evento-btn:hover svg {
  transform: translateX(3px);
}

/* ----- LOADER ----- */
.eventi-loading {
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: #3b1a71;
  font-weight: 600;
  grid-column: 1 / -1;
}

.eventi-loading span {
  display: inline-block;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* No results */
.eventi-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  font-size: 18px;
  color: #666;
}

/* ----- PAGINAZIONE ----- */
.pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 50px 0 20px 0;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  padding: 12px 20px;
  background-color: #fff;
  border: 2px solid #3b1a71;
  color: #3b1a71;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background-color: #3b1a71;
  color: #fff;
  transform: translateY(-2px);
}

/* ----- RESPONSIVE ----- */

/* Tablet */
@media (max-width: 1200px) {
  .eventi-grid-3col {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media (max-width: 992px) {
  .eventi-archive-container {
    grid-template-columns: 240px 1fr;
    gap: 30px;
  }

  .eventi-sidebar {
    top: 80px;
  }

  .eventi-page-title {
    font-size: 36px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .eventi-archive-wrapper {
    padding: 20px 15px;
  }

  .eventi-archive-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .eventi-sidebar {
    position: static;
  }

  .eventi-sidebar-inner {
    padding: 20px;
  }

  .eventi-grid-3col {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .evento-card-title {
    font-size: 20px;
  }

  .eventi-page-title {
    font-size: 28px;
  }

  .evento-body {
    padding: 20px;
  }

  .evento-btn {
    width: 100%;
    justify-content: center;
  }
}

a.text-gray-900.hover\:text-\[\#3b1a71\].transition-colors.duration-300.titolo-evento-feed {
    font-family: 'Tiny';
    color: black;
    font-size: 1.2em;
    text-transform: uppercase;
}

span.inline-flex.items-center.gap-2.px-3.py-1\.5.bg-\[\#3b1a71\]\/10.text-\[\#3b1a71\].text-xs.font-semibold.data-evento {
    font-family: tiny;
    text-transform: uppercase;
    font-size: 1em;
}


.menu-categoria {
    font-size: 1.27rem !important;
    font-family: 'Tiny';
    line-height: 1.05;
    font-weight: bolder;
}

.label {
    position: relative;
    display: inline-flex !important;
    background: #ffffff !important;
    border: 3px solid #ca8a04 !important;
    color: #000000 !important;
    font-size: 0.85em !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
    padding: 6px 12px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s ease !important;
    box-shadow: 2px 2px 0 rgba(202, 138, 4, 0.3) !important;
    text-decoration: none !important;
    cursor: pointer;
}

.label:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 rgba(202, 138, 4, 0.4) !important;
    background: #fffbf0 !important;
}

/* Link etichette categoria - stile consistente */
a.label {
    color: #000000 !important;
}

a.label:hover {
    color: #000000 !important;
}

/* Etichetta data con stile speciale */
.data-evento.label {
    background: linear-gradient(135deg, #ffd500 0%, #ffdf33 100%) !important;
    color: #854d0e !important;
    border-color: #ffd500 !important;
    box-shadow: 2px 2px 0 rgba(0, 229, 255, 0.4), 4px 4px 0 rgba(255, 0, 200, 0.3) !important;
}

.data-evento.label:hover {
    box-shadow: 3px 3px 0 rgba(0, 229, 255, 0.5), 5px 5px 0 rgba(255, 0, 200, 0.4) !important;
}

.showmore-button {
    border: 3px solid #606060;
    text-transform: uppercase;
    color: #606060 !important;
    font-family: inherit !important;
    font-size: 0.95em !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

.comments-area a, .page-content a {
    text-decoration: none;
}