/*
 * CSS su misura di romaclubmatera.it
 *
 * Fino ad agosto 2026 queste regole stavano in "Aspetto > Personalizza >
 * CSS aggiuntivo", cioe' dentro il database (post 867, tipo custom_css):
 * un ripristino da zero se le perdeva. Ora sono un file del tema figlio,
 * versionato nel repo Ansible come roles/wordpress/files/rcm-custom.css
 * e agganciato da functions.php (handle "rcm-custom").
 *
 * NON modificare questo file dalla dashboard: le modifiche fatte qui sul
 * server verrebbero sovrascritte al prossimo deploy. Si edita nel repo.
 */



/* === Prossima partita (SportsPress event_blocks nel banner home) === */
.elementor-element-6b344740 .sp-template-event-blocks .sp-table-wrapper,
.elementor-element-6b344740 .sp-template-event-blocks table.sp-event-blocks,
.elementor-element-6b344740 .sp-template-event-blocks table.sp-event-blocks tr,
.elementor-element-6b344740 .sp-template-event-blocks table.sp-event-blocks td {
  background: transparent !important;
  border: 0 !important;
}
.elementor-element-6b344740 .sp-template-event-blocks thead {
  display: none;
}
/* velo scuro leggero su tutta la fascia per staccare dai colori del campo */
.elementor-element-6b344740 .sp-template-event-blocks .sp-table-wrapper {
  background: rgba(0, 0, 0, 0.35) !important;
  padding: 2.5rem 1rem;
}
/* layout: logo — VS — logo sulla stessa riga, testi sotto */
.elementor-element-6b344740 table.sp-event-blocks td {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  padding: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.elementor-element-6b344740 .team-logo {
  float: none !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
}
.elementor-element-6b344740 .team-logo img {
  width: 200px !important;
  max-width: 200px !important;
  height: auto !important;
  max-height: none !important;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.7));
}
.elementor-element-6b344740 .team-logo.logo-odd { order: 1; }
.elementor-element-6b344740 table.sp-event-blocks td::before {
  content: "VS";
  order: 2;
  font-size: 5rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 3px #fff;
  text-stroke: 3px #fff;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}
.elementor-element-6b344740 .team-logo.logo-even { order: 3; }
.elementor-element-6b344740 .team-logo.logo-even::before { content: none; }
.elementor-element-6b344740 .sp-event-date { order: 4; }
.elementor-element-6b344740 .sp-event-results { order: 5; }
.elementor-element-6b344740 .sp-event-title { order: 6; }
.elementor-element-6b344740 .sp-event-date,
.elementor-element-6b344740 .sp-event-results,
.elementor-element-6b344740 .sp-event-title {
  flex-basis: 100%;
}
.elementor-element-6b344740 .sp-event-date,
.elementor-element-6b344740 .sp-event-date a {
  margin-top: 1.5rem;
  font-size: 1.3rem;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.elementor-element-6b344740 .sp-event-results,
.elementor-element-6b344740 .sp-event-results a,
.elementor-element-6b344740 .sp-event-results .sp-result {
  font-size: 2rem;
  font-weight: 700;
  color: #f0bc42 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.elementor-element-6b344740 .sp-event-title,
.elementor-element-6b344740 .sp-event-title a {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff !important;
  margin: 0.4rem 0 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
@media (max-width: 767px) {
  .elementor-element-6b344740 .team-logo img {
    width: 100px !important;
    max-width: 100px !important;
  }
  .elementor-element-6b344740 table.sp-event-blocks td::before {
    font-size: 2.4rem;
    -webkit-text-stroke: 2px #fff;
  }
  .elementor-element-6b344740 .sp-event-title,
  .elementor-element-6b344740 .sp-event-title a {
    font-size: 1.5rem;
  }
}

/* === Calendario: evidenzia la prossima partita === */
.sp-template-event-list tr.sp-next-match td {
  background: #8e1f2f !important;
}
.sp-template-event-list tr.sp-next-match td,
.sp-template-event-list tr.sp-next-match td a,
.sp-template-event-list tr.sp-next-match td div {
  color: #fff !important;
  font-weight: 700;
}
.sp-template-event-list tr.sp-next-match td.data-event a::before {
  content: "\25B6  ";
  color: #f0bc42;
}
.sp-template-event-list tr.sp-next-match td.data-venue,
.sp-template-event-list tr.sp-next-match td.data-venue div,
.sp-template-event-list tr.sp-next-match td.data-venue a {
  color: #f0bc42 !important;
}

/* === SportsPress: link in amaranto (al posto del verde acqua) === */
.sp-template a,
.sp-data-table a {
  color: #8e1f2f !important;
}
.sp-template a:hover,
.sp-data-table a:hover {
  color: #c99722 !important;
}

/* === Home: la foto trasferte (hover grow) resta dentro il suo riquadro === */
.elementor-element-f719863 {
  overflow: hidden;
}

/* === Modulo tesseramento: due colonne su desktop === */
.rcm-2col {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.rcm-2col > p {
  flex: 1 1 260px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="email"],
.wpcf7 input[type="date"],
.wpcf7 textarea {
  width: 100%;
}

/* === Titoli: cifre "lining" alte quanto le maiuscole (Cormorant Garamond usa old-style di default) === */
h1, h2, h3, h4, h5, h6 {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}


/* === Direttivo: nome e ruolo sotto la foto === */
/* il velo oro pieno serviva a far leggere le icone social sopra la foto;
   senza icone coprirebbe solo la faccia, quindi resta un tocco leggero */
.elementor .our-team .elementor-element-populated:hover .elementor-element.our-img .elementor-widget-container::before {
  background-color: rgba(230, 175, 20, 0.18);
  transition: 0.35s all;
}
/* il ruolo sta sempre in chiaro, non solo al passaggio del mouse */
.our-team .our-role {
  opacity: 1;
  margin-bottom: 0;
}



/* === Pagina Sponsor (1312): hero con le bandiere del club al posto del fondo oro === */
/* foto Gallery-48: bandiere "Eterna Fedelta'" e "Presente" con le sciarpe alzate */
.page-id-1312 .page-hero-section .entry-hero-container-inner {
  background-color: #1a0d00;
  background-image: url("https://romaclubmatera.it/wp-content/uploads/2026/05/Gallery-48.jpg");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
/* velo scuro in sfumatura: le bandiere restano riconoscibili e il testo sopra si legge */
.page-id-1312 .page-hero-section .hero-section-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.78) 100%);
}
/* l'altezza dell'hero e' un min-height (400/300/180px): con il claim il testo
   la supera e senza padding arriverebbe a filo del bordo, soprattutto da telefono */
.page-id-1312 .page-hero-section .entry-header {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 40px;
  padding-bottom: 40px;
}
.rcm-hero-claim {
  margin: 20px 0 0;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.7;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.rcm-hero-claim .rcm-hero-claim-lead {
  display: block;
  margin-bottom: 10px;
  color: #e6af14;
  font-size: 27px;
  line-height: 1.3;
  font-weight: 700;
  font-style: italic;
}
@media (max-width: 767px) {
  .page-id-1312 .page-hero-section .entry-header {
    padding: 34px 8px;
  }
  .rcm-hero-claim {
    font-size: 15px;
  }
  .rcm-hero-claim .rcm-hero-claim-lead {
    font-size: 21px;
  }
}

/* la pagina e' corta: il tema stacca il contenuto dall'hero con margin 5-8em
   (.content-area), che qui lascerebbe due fasce nere vuote sopra e sotto le card */
.page-id-1312 .content-area {
  margin-top: 2.5em;
  margin-bottom: 3em;
}
.page-id-1312 .entry-content-wrap {
  padding-top: 24px;
  padding-bottom: 24px;
}





/* === Il Romanista: rimando alla prima pagina, in fondo alla colonna destra === */
/* markup nel mu-plugin rcm-romanista.php */
.rcm-romanista {
  margin-top: 30px;
  padding-top: 26px;
  /* riga sottile a tutta colonna: stacca la card dai contatti e dalla
     newsletter, cosi' non sembra parte del blocco iscrizione */
  border-top: 1px solid rgba(230, 175, 20, 0.28);
}

.rcm-romanista-card {
  display: block;
  max-width: 260px;
  margin-left: auto; /* la colonna e' allineata a destra */
  padding: 18px 20px 16px;
  border: 1px solid rgba(230, 175, 20, 0.45);
  border-radius: 10px;
  background: rgba(230, 175, 20, 0.05);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
}

.rcm-romanista-card:hover,
.rcm-romanista-card:focus-visible {
  border-color: #e6af14;
  background: rgba(230, 175, 20, 0.12);
}

.rcm-romanista-occhiello {
  display: block;
  margin-bottom: 6px;
  color: #9a9a9a;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rcm-romanista-testata {
  display: block;
  margin-bottom: 10px;
  color: #e6af14;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
}

.rcm-romanista-locandina {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  border-radius: 4px;
}

.rcm-romanista-invito {
  display: block;
  color: #e8e8e8;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.rcm-romanista-invito::after {
  content: " \2192";
}

@media (max-width: 767px) {
  .rcm-romanista-card {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------------------------------------------------------------
   Carosello della sede in home page (widget .our-img)
   Le foto della sede hanno pareti bianche: la didascalia in oro,
   pensata per foto scure, ci finiva sopra e non si leggeva piu'.
   Sfumatura scura solo in fondo alla slide, dietro al testo.
   --------------------------------------------------------------- */
/* La didascalia di Elementor sta dentro la <figure> con "Spazio didascalia"
   a -84px: quel margine negativo accorcia la figure di 44px rispetto
   all'immagine, che quindi le deborda sotto. Una sfumatura ancorata alla
   figure si ferma 44px sopra il bordo vero della foto e lascia scoperta una
   striscia chiara - la "linea sotto la foto", ben visibile sul bancone che
   in fondo ha il pavimento chiaro.
   Quindi la didascalia va posizionata in assoluto: cosi' la figure torna
   alta quanto l'immagine e la sfumatura arriva davvero in fondo.
   Serve la specificita' di Elementor (4 classi) per battere il suo
   margin-block-start. */
.elementor .elementor-element.our-img .swiper-slide-inner {
  position: relative;
  display: block;
}

/* display:block toglie anche il filo di baseline dell'immagine inline */
.elementor .elementor-element.our-img .swiper-slide-image {
  display: block;
}

.elementor .elementor-element.our-img .elementor-image-carousel-caption {
  position: absolute;
  right: 0;
  /* 44px = altezza riga (40) meno lo spazio didascalia (-84): tiene la
     didascalia dov'era prima, ora che non e' piu' il margine a spostarla */
  bottom: 44px;
  left: 0;
  z-index: 1;
  margin: 0;
  margin-block-start: 0;
  padding: 0 20px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.elementor .elementor-element.our-img .swiper-slide-inner::after {
  content: "";
  position: absolute;
  right: 0;
  /* -1px: con altezze frazionarie il browser arrotonda e lascerebbe
     scoperta l'ultima riga di pixel */
  bottom: -1px;
  left: 0;
  height: calc(55% + 1px);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.62) 35%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

@media (max-width: 767px) {
  /* su mobile la riga della didascalia e' 32px, non 40 */
  .elementor .elementor-element.our-img .elementor-image-carousel-caption {
    bottom: 52px;
  }
}