/*
 * cea-custom.css
 * Correzioni e personalizzazioni CEA sopra il tema Cherito.
 * Non modificare cherito.css — mettere qui tutte le regole CEA-specifiche.
 */

/* ---------------------------------------------------------------
   Override colore principale: #E23B33 → #F26422 (arancio CEA)
--------------------------------------------------------------- */
:root {
  --cherito-base: #F26422;
  --cherito-base-rgb: 242, 100, 34;
}

/* ---------------------------------------------------------------
   Download / Documenti cards  (usate in download.html e chi-siamo.html)
--------------------------------------------------------------- */
.download-year-card {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.10);
  transition: transform .3s ease, box-shadow .3s ease;
  height: 100%;
}
.download-year-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0,0,0,.16);
}
.download-year-card__header {
  background-color: #1e2d3d;
  color: #ffffff;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.download-year-card__header .year-badge {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -1px;
}
.download-year-card__header .year-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.55);
}
.download-year-card__header .doc-count {
  margin-left: auto;
  background: rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.8rem;
  color: rgba(255,255,255,.85);
}
.download-year-card__body {
  background: #ffffff;
  padding: 8px 0;
}
.download-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: #3a3a3a;
  transition: background .2s ease, color .2s ease;
}
.download-item:last-child { border-bottom: none; }
.download-item:hover {
  background: #f7f3f0;
  color: #E23B33;
  text-decoration: none;
}
.download-item .pdf-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #E23B33;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .5px;
}
.download-item .doc-name {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  flex: 1;
}
.download-item .dl-arrow {
  flex-shrink: 0;
  color: #cccccc;
  font-size: 0.75rem;
  transition: color .2s ease;
}
.download-item:hover .dl-arrow { color: #E23B33; }

/* ---------------------------------------------------------------
   Footer bottom bar — sfondo rosso (--cherito-base)
   Il tag globale  a { color: var(--cherito-base) }  renderebbe
   il link "Privacy Policy" rosso su rosso → invisibile.
--------------------------------------------------------------- */
.main-footer__bottom a {
  color: var(--cherito-white, #ffffff);
}
.main-footer__bottom a:hover {
  color: var(--cherito-white, #ffffff);
  opacity: 0.75;
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Service card — hover overlay rosso
   Al passaggio del mouse ::after diventa var(--cherito-base).
   Il tag  a { color: red }  tiene il testo dei link rosso anche
   quando il testo circostante è già diventato bianco → invisibile.
--------------------------------------------------------------- */
.service-card:hover .service-card__text a,
.service-card:hover .service-card__title a {
  color: var(--cherito-white, #ffffff);
}
.service-card:hover .service-card__text a:hover,
.service-card:hover .service-card__title a:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------
   Titoli in corsivo (font Caveat / sec-title__tagline) → blu
--------------------------------------------------------------- */
.sec-title__tagline,
.about-five__tagline,
.blog-one__tagline,
[class$="__tagline"] {
  color: #8299CD;
}

/* ---------------------------------------------------------------
   Preloader — immagine più grande
--------------------------------------------------------------- */
.preloader__image {
  background-size: 120px auto;
}

/* ---------------------------------------------------------------
   Menu principale — rimuovi capitalize (rispetta il testo scritto)
--------------------------------------------------------------- */
.main-menu .main-menu__list > li > a,
.main-menu .main-menu__list li ul li > a {
  text-transform: none;
}

/* ---------------------------------------------------------------
   Rimuovi text-transform: capitalize ovunque nel tema
--------------------------------------------------------------- */
.about-five__inner__title,
.about-six__inner__title,
.become-volunteer__title,
.blog-card-seven__title,
.blog-card-three__meta li,
.blog-card-seven__meta li,
.blog-details__meta__title,
.blog-two__card__image__text,
.client-carousel__title,
.comments-one__name,
.demo-one__title,
.donate-form__title,
.donate-two__title,
.donation-card__title,
.donation-card-two__title,
.donation-card-three__title,
.donation-card-five__title,
.donation-list__title,
.event-card__title,
.event-details__title,
.event-details__info__title,
.event-list__title,
.faq-contact__info__title,
.faq-one__info__title,
.features-four__card__title,
.features-one__bottom__title,
.footer-widget__links li,
.footer-widget__title,
.main-header__call__number,
.organizer-card__name,
.organizer-card__designation,
.page-header__title,
.sec-title__title,
.service-card__title,
.service-card-three__title,
.service-card-five__title,
.sidebar-donation__social__title,
.testimonial-card__designation,
.testimonial-card-two__name,
.testimonial-card-two__designation,
.testimonial-card-four__designation,
.testimonials-two__designation,
.volunteer-card__name,
.volunteer-card__designation,
.why-choose-one__card__title,
.join-volunteer__card__title,
.about-one__inner__title,
.about-five__title {
  text-transform: none;
}

/* ---------------------------------------------------------------
   Icone about-one__inner (chi-siamo, emporio) — assicura visibilità
--------------------------------------------------------------- */
.about-one__inner__icon {
  z-index: 3;
  background-color: var(--cherito-base, #F26422);
}
.about-one__inner__icon::after {
  background-color: var(--cherito-base, #F26422);
}

/* ---------------------------------------------------------------
   Colore logo CEA — #8299CD (blu complementare)
   Usato: striscia share + cerchio decorativo immagine about
--------------------------------------------------------------- */

/* Cerchio decorativo attorno all'immagine (about-one, chi siamo) */
.about-one__image__one::after {
  border-color: #8299CD;
}

/* ---------------------------------------------------------------
   contatti.html — sfondo recapiti e pulsanti neri → blu
--------------------------------------------------------------- */
.contact-info__inner {
  background-color: #8299CD;
}

/* ---------------------------------------------------------------
   cosa-facciamo.html — sfondo box Scrivici/Telefonaci → blu
--------------------------------------------------------------- */
.faq-contact__inner {
  background-color: #8299CD;
}

/* ---------------------------------------------------------------
   cosa-facciamo.html — fisarmonica aperta: intestazione arancione
--------------------------------------------------------------- */
.faq-accordion .active .accordion-title {
  background-color: var(--cherito-base, #F26422);
  border-radius: 10px 10px 0 0;
}
.faq-accordion .active .accordion-title h4 {
  color: var(--cherito-white, #ffffff);
}
/* cerchietto attivo → bianco semitrasparente su sfondo arancione */
.faq-accordion .active .accordion-title__box {
  background-color: rgba(255, 255, 255, 0.35);
}
.faq-accordion .active .accordion-title__box::after {
  background-color: #ffffff;
}

/* ---------------------------------------------------------------
   sostienici.html — sezione "Diventa volontario del C.E.A."
   Titolo, testo e pulsante centrato su sfondo scuro
--------------------------------------------------------------- */
.join-volunteer .sec-title__title,
.join-volunteer .sec-title__tagline {
  color: #ffffff;
}
.join-volunteer__text {
  color: rgba(255, 255, 255, 0.9);
}
.join-volunteer__btns {
  text-align: center;
  justify-content: center;
}

/* ---------------------------------------------------------------
   join-volunteer (emporio/index) — overlay scuro sull'immagine
   per garantire leggibilità del testo bianco
--------------------------------------------------------------- */
.join-volunteer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(22, 34, 48, 0.72);
}

/* ---------------------------------------------------------------
   Service card — fondo del pulsante freccia → blu
--------------------------------------------------------------- */
.service-card__btn-box {
  background-color: #8299CD;
}

/* Sfondo sezione "Chiamaci" nell'header (sagoma a destra) */
.main-header {
  background-color: #8299CD;
}
.main-header .container-fluid::after {
  background-color: #8299CD;
}

/* ---------------------------------------------------------------
   Share box — striscia "Condividi questa pagina" sopra il footer bottom
--------------------------------------------------------------- */
.qrcode-box {
  background-color: #8299CD;
  padding: 18px 0;
}
.qrcode-box__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.qrcode-box__label {
  color: rgba(255,255,255,.65);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  white-space: nowrap;
}
.qrcode-box__qr {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  flex-shrink: 0;
}
.share-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  padding: 0;
  line-height: 1;
}
.btn-share:hover { color: #fff; background: rgba(255,255,255,.25); }
.btn-share.btn-whatsapp:hover  { background: #25d366; }
.btn-share.btn-facebook:hover  { background: #1877f2; }
.btn-share.btn-telegram:hover  { background: #0088cc; }
.btn-share.btn-copylink:hover  { background: #E23B33; }

/* ---------------------------------------------------------------
   Slider homepage — filtro colorato per ogni slide
   mix-blend-mode: luminosity sull'immagine usa il colore di sfondo
   del pannello destro come tinta → bianco = bianco/nero, colore = tinta
--------------------------------------------------------------- */
.slider-item--yellow .main-slider-one__bg__right {
  background-color: #E8B800;   /* giallo caldo */
}
.slider-item--orange .main-slider-one__bg__right {
  background-color: #E8621A;   /* arancione CEA */
}
.slider-item--blue .main-slider-one__bg__right {
  background-color: #2C5DAE;   /* blu */
}

/* ---------------------------------------------------------------
   About home — immagine secondaria (about-1-4.jpg) centrata nella sagoma
   mask-size: auto fa sì che la SVG (900px) sbordi dal contenitore
   e si veda solo una striscia laterale. Sovrascriviamo con cover.
--------------------------------------------------------------- */
.about-one__image__two {
  -webkit-mask-size: cover;
  mask-size: cover;
}
.about-one__image__two__inner {
  width: 290px;
  height: 310px;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.about-one__image__two img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ---------------------------------------------------------------
   Footer — testo più leggibile (grigio chiaro tendente al bianco)
--------------------------------------------------------------- */
.footer-widget__info__text,
.footer-widget__links li {
  color: #cccccc;
}

/* ---------------------------------------------------------------
   Fix logo sgranato su desktop
   Il tema applica image-rendering: crisp-edges (per pixel art) che
   rende sfocato un logo vettoriale/smooth come il nostro. Override.
--------------------------------------------------------------- */
.main-header__logo img,
.logo-retina img {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-transform: none;
  transform: none;
}

/* ---------------------------------------------------------------
   Nascondi about-1-4.jpg su mobile
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .about-one__image__two {
    display: none;
  }
}

/* ---------------------------------------------------------------
   Fix logo tagliato su mobile
   Problema: il logo HTML è width="200" ma l'area bianca (::before)
   è solo 190px su mobile → il logo straborda nell'arancione.
   Soluzione: riduci il logo e allarga leggermente l'area bianca.
--------------------------------------------------------------- */
@media (max-width: 767px) {
  .main-header__logo img {
    width: 170px;
  }
  .main-header::before {
    width: 200px;
  }
}
@media (max-width: 390px) {
  .main-header__logo img {
    width: 155px;
  }
  .main-header::before {
    width: 185px;
  }
}