/* Personalizzazioni WM6 per il tema Antra */

/* Palette colori basata sul logo Castelfranco Costruzioni (grigio tortora + verde #21a73f) */
:root {
    --tl-color-theme-primary: #8f8a82;
    --tl-color-theme-primary-dark: #6b6761;
    --tl-color-theme-primary-light: #aaa7a1;
    --tl-color-theme-secondary: #21a73f;
    --tl-color-theme-secondary-dark: #188530;
    --tl-color-theme-secondary-light: #3fc95d;
}

/* Pallino accanto ai kicker di sezione (es. "I NOSTRI SERVIZI"): verde per dare risalto al secondo colore del logo */
.section-heading .sub-heading:before {
    background-color: var(--tl-color-theme-secondary);
}

/* Il tema base appiattisce h1 (.section-title) e h2 (.section-title.title-2) alla stessa
   dimensione sotto i 992px, rendendo i due livelli indistinguibili: qui manteniamo l'h2
   sempre più piccolo dell'h1 anche nei breakpoint mobile. */
@media only screen and (max-width: 992px) {
    .section-heading .section-title.title-2 {
        font-size: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .section-heading .section-title.title-2 {
        font-size: 25px;
    }
}

/* L'h2 "RICHIEDI INFORMAZIONI" del form (section-form.php) non è avvolto in .section-heading
   come gli altri titoli di sezione, quindi non riceve le riduzioni responsive qui sopra e resta
   fisso a 40px (--tl-fs-h2, main.css) anche da mobile. */
@media only screen and (max-width: 992px) {
    .request-form-wrap .section-title.title-2 {
        font-size: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .request-form-wrap .section-title.title-2 {
        font-size: 25px;
    }
}

/* Il valore dei metadati progetto (anno, cliente, ecc.) non è un titolo di sezione, quindi
   in realizzazione-dettaglio.php usa un <p> invece di <h5>: qui si replica lo stile originale */
.project-details-wrap .project-details-meta .details-meta .value {
    font-family: var(--tl-ff-p);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 0;
}

/* Testata (header) sempre chiara, su tutte le pagine e anche da scrollata: il logo non va mai
   ricolorato, quindi risolviamo il contrasto cambiando lo sfondo dell'header e il colore delle
   voci di menu invece del logo. */
.primary-header {
    background-color: var(--tl-color-common-white);
    box-shadow: 0 1px 20px rgba(23, 23, 150, .08);
}

.header .primary-header.fixed {
    background-color: var(--tl-color-common-white);
}

.header .primary-header-inner .header-menu-wrap ul li a {
    color: var(--tl-color-heading-primary);
}

.header .primary-header-inner .header-menu-wrap ul .menu-item-has-children:after {
    color: var(--tl-color-heading-primary);
}

.header .primary-header-inner .header-right-wrap .header-contact .icon,
.header .primary-header-inner .header-right-wrap .header-contact .content .call-text,
.header .primary-header-inner .header-right-wrap .header-contact .content .call-number {
    color: var(--tl-color-heading-primary);
}

.header .primary-header-inner .header-right-wrap .sidebar-icon .sidebar-trigger {
    background: rgba(23, 23, 150, .06);
    border-color: rgba(23, 23, 150, .16);
}

.header .primary-header-inner .header-right-wrap .sidebar-icon .sidebar-trigger svg path {
    fill: var(--tl-color-heading-primary);
}

.header .primary-header-inner .header-right-wrap .sidebar-icon .sidebar-trigger:hover svg path {
    fill: var(--tl-color-common-white);
}

.site-logo-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
}

.header.sticky-active .site-logo-text,
.header:not(.sticky) .site-logo-text {
  color: inherit;
}

.side-menu-logo .site-logo-text,
.side-menu-head .site-logo-text {
  color: #101828;
}

.footer-logo .site-logo-text {
  color: #fff;
}

/* Il logo caricato è a colori (blu/verde): nel footer, su sfondo scuro, va reso bianco via filtro CSS */
.footer-logo img {
  filter: brightness(0) invert(1);
}

.preloader .site-logo-text {
  color: #fff;
  font-size: 28px;
}

.value-item-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.value-item {
  flex: 1 1 220px;
  height: 100%;
  padding: 35px 25px;
  background-color: var(--tl-color-common-white);
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(23, 23, 150, .07);
  transition: transform .3s ease, box-shadow .3s ease;
}

.value-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(23, 23, 150, .14);
}

.value-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(23, 23, 150, .03);
}

.value-item .icon i {
  font-size: 30px;
  color: var(--tl-color-theme-primary);
}

.value-item .title {
  margin: 15px 0 10px;
  font-weight: 500;
  font-size: 22px;
}

.value-item p {
  margin-bottom: 0;
}

.map-embed-wrap iframe {
  width: 100%;
  height: 420px;
  border: 0;
}

/* Il form contatti nel tema base non ha uno sfondo proprio e si confonde con la sezione:
   qui gli diamo una card bianca sollevata (come nel progetto romagnolistudiolegale),
   in chiaro perché testo dei bottoni e delle label sono pensati per stare su sfondo chiaro. */
.contact-form-card {
  background-color: var(--tl-color-common-white);
  border-radius: 24px;
  padding: 50px;
  box-shadow: 0 30px 70px rgba(23, 23, 150, .08);
}

@media only screen and (max-width: 767px) {
  .contact-form-card {
    padding: 30px;
  }

  .value-item { 
    text-align: center;
  }

  .title-home {
    font-size: 40px;
}
}

/* Testata di pagina senza immagine di sfondo: sfondo chiaro con testo scuro */
.page-header {
  background-color: var(--tl-color-common-white);
}

.page-header .page-header-content .title,
.page-header .page-header-content .sub-title {
  color: var(--tl-color-heading-primary);
}


/* Placeholder decorativo: parte del logo in filigrana, in background a destra della testata */
.page-header::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: -80px;
  width: 720px;
  height: 50%;
  background-image: url('/immagini/placeholder.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .2;
  z-index: 0;
  pointer-events: none;
}

.page-header .page-header-content {
  position: relative;
  z-index: 2;
}

/* Box "hai bisogno di aiuto" nella sidebar dei servizi: il tema base prevede un'immagine di
   sfondo che non abbiamo, quindi usiamo una sfumatura con i due colori del brand (blu + verde,
   vedi palette in cima al file) invece di un colore neutro scollegato dall'identità del sito.
   Il bottone tondo del tema base (pensato per un'icona, non per un testo) è sostituito dal
   pulsante a pillola già usato per le altre CTA del sito (about.php, index.php). */
.service-details-left-content .service-details-cta {
  background: linear-gradient(135deg, var(--tl-color-theme-primary) 0%, var(--tl-color-theme-secondary) 100%);
}

.service-details-left-content .service-details-cta .service-cta-action {
  margin-top: 25px;
}

/* Footer senza immagine di sfondo: il tema base sovrappone overlay semi-trasparenti pensati
   per un'immagine, risultando in un grigio invece che nero pieno. Sfondo richiesto: #090C02. */
.footer-section {
  background-color: #090C02;
}

.footer-section .footer-bg:before {
  background-color: #090C02;
  opacity: 1;
}

.footer-section .footer-shade {
  background: transparent;
  backdrop-filter: none;
  border: none;
}

/* Contatti nel footer: il tema base pensa .footer-address a un solo numero in grande evidenza
   (font-size 30px), non a un elenco telefono/email/indirizzo con icone. Qui viene ridotto e
   allineato allo stile delle altre liste della colonna (.footer-list). */
.footer-widget .footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.footer-widget .footer-contact-list .number,
.footer-widget .footer-contact-list .mail,
.footer-widget .footer-contact-list .address {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
}

.footer-widget .footer-contact-list i {
  color: var(--tl-color-theme-secondary);
  font-size: 16px;
  margin-top: 3px;
}

/* Pagina contatti: il tema base metteva indirizzo/telefono/email affiancati in colonna senza
   icone; qui ogni voce ha la sua icona ed è impilata su una riga propria, come nel footer. */
.contact-page-area .request-content .request-item-wrap {
  flex-direction: column;
  row-gap: 30px;
}

.contact-page-area .request-content .request-item-wrap .request-item .contact-info-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.contact-page-area .request-content .request-item-wrap .request-item .contact-info-link:last-child {
  margin-bottom: 0;
}

.contact-page-area .request-content .request-item-wrap .request-item .contact-info-link i {
  color: var(--tl-color-theme-secondary);
  font-size: 18px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* .tl-primary-btn di per sé è un pulsante outline che si riempie di colore solo in hover
   (vedi main.css): il pulsante "SCRIVICI" in header lo riempie di blu in modo permanente
   tramite una regola annidata sotto .header, che qui non si applica. Replichiamo lo stesso
   stile per il pulsante di invio del form contatti. */
.contact-submit-btn {
  background-color: var(--tl-color-theme-primary);
  color: var(--tl-color-common-white);
  border: none;
}

.contact-submit-btn:before {
  background-color: var(--tl-color-common-white);
}

.contact-submit-btn:hover {
  color: var(--tl-color-heading-primary);
}


/* I bottoni a pillola (.tl-primary-btn, usati ovunque: header, slide, card, form) hanno lo
   stesso padding e la stessa icona rotonda da 40px del desktop anche da mobile, risultando
   sproporzionati rispetto al testo/schermo. Qui li rendiamo più compatti sotto i 767px,
   mantenendo comunque un'area di tocco adeguata (~40px). */
@media only screen and (max-width: 767px) {
  .tl-primary-btn {
    padding: 8px 20px;
    font-size: 15px;
  }

  .tl-primary-btn .icon {
    width: 34px;
    height: 34px;
    margin-left: 8px;
  }

  .tl-primary-btn i {
    font-size: 14px;
  }

  .service-carousel-pagination { 
    text-align: center;
  }
}

@media only screen and (max-width: 992px) {
  .page-header .page-header-content .title {
    font-size: 42px;
  }
}

@media only screen and (max-width: 767px) {
  .page-header .page-header-content .title {
    font-size: 34px;
  }
}


@media (max-width: 768px) {
    .process-item .process-content {
        padding: 20px 20px 25px 20px;
    }
    .service-item-3 .service-thumb {
        height: 300px;
    }
}

.service-item-3 {
    display: block;
    width: 100%;
}

.service-item-3 .service-thumb:before {
    background: #191919;
  background: linear-gradient(0deg, rgba(25, 25, 25, 0.84) 20%, rgba(25, 25, 25, 0) 80%);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 24px;
    z-index: 1
}
.post-card .post-content .title a  { 
  font-size: 20px;
    line-height: 1.1;
}

.service-item-3 .service-content p { 
  max-width: none;
}

.service-item-3 .service-content {
    position: absolute;
    left: 35px;
    bottom: 35px;
    right: 35px;
    width: calc(100% - 70px);
    z-index: 2;
}

.service-item-3 .service-content .title { 
  font-size: 25px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.service-item-3 .service-content p {
    font-size: 15px;
    line-height: 1.3;

}


.gallary-inner-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.gallary-inner-items .gallary-inner-item-2 a {
    height: 340px;
}

@media only screen and (max-width: 767px) {
    .gallary-inner-items {
        grid-template-columns: repeat(1, 1fr);
    }

    .gallary-inner-items .gallary-inner-item-2 a {
        height: 260px;
    }
}

.service-faq .faq-accordion .accordion-item .accordion-button { 
  gap: 10px;
}

.service-details-left-content .service-category-list { 
  padding:35px 20px 20px 20px;
}

.about-img-wrap-3 .about-img-2 { 
  bottom: 100px;
}

.about-img-wrap-3 .about-img-2 {
  height: 200px;

}

/* Testo bianco su .about-counter (main.css) contro --tl-color-theme-primary dà un
   contrasto di 3.43:1, insufficiente per WCAG AA (serve 4.5:1 per testo normale).
   Qui si usa la variante scura della palette, già prevista ma inutilizzata. */
.about-img-wrap-3 .about-counter {
  background-color: var(--tl-color-theme-primary-dark);
}

/* Contatti della sidebar (mail, telefono, indirizzo): il tema base dava alla mail un font
   molto più grande (26px) delle altre due voci (18px, senza icona) e nessuna delle due andava
   a capo su schermi piccoli. Qui replichiamo lo stile del footer (.footer-contact-list): stessa
   dimensione per tutte le voci, icona a fianco, testo che va a capo se troppo lungo. */
.side-menu-content .side-menu-contact .side-menu-list li {
  display: block;
}

.side-menu-content .side-menu-contact .side-menu-list li a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.side-menu-content .side-menu-contact .side-menu-list li i {
  background: none;
  width: auto;
  height: auto;
  line-height: 1.5;
  border-radius: 0;
  color: var(--tl-color-theme-secondary);
  font-size: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Footer da mobile: il tema base lascia logo, contatti, menu, servizi e copyright allineati
   a sinistra; su schermi piccoli il footer deve invece apparire tutto centrato. */
@media only screen and (max-width: 767px) {
  .footer-wrap {
    text-align: center;
  }

  .footer-widget .widget-header .footer-logo {
    margin: 0 auto;
  }

  .footer-widget .footer-contact-list {
    align-items: center;
  }

  .footer-widget .footer-contact-list .number,
  .footer-widget .footer-contact-list .mail,
  .footer-widget .footer-contact-list .address {
    justify-content: center;
  }

  .footer-widget.footer-col-2 .row {
    justify-content: center;
  }

  .copyright-text {
    text-align: center;
  }
}

/* L'immagine della prima slide (LCP) è un tag <img fetchpriority="high"> invece di un
   data-background impostato via JS, per essere scopribile subito dal browser. Il tema base
   applicava l'immagine come background-image di .bg-img: qui la riproduciamo sull'<img>
   figlio con object-fit, mantenendo lo stesso overlay scuro (.bg-img:before, invariato in
   main.css) sopra l'immagine tramite z-index. */
.antra-slider .slider-item .bg-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.service-carousel-pagination {
  position: static;
  margin-top: 24px;
  text-align: left;
}
/* Prima slide (e slide in generale) della home da mobile: il tema base non ha un breakpoint
   sotto i 992px per il titolo dello slider "antra" (resta a 50px, troppo grande su telefono,
   a differenza delle varianti slider-2/slider-3 che hanno già un override a 767px), e lo slide
   ha un'altezza fissa (850px) con solo padding-top: il testo resta quindi ancorato in alto
   invece di risultare centrato nello slide. */
@media only screen and (max-width: 767px) {
  .antra-slider .slider-item {
    height: auto;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0;
  }

  .slider-content-wrap {
    padding-top: 0;
    padding-bottom: 20px;
  }

  .slider-content-wrap .section-heading .section-title {
    font-size: 34px;
    line-height: 1.1;
  }
    .service-carousel-pagination { 
    text-align: center;
  }

  .slider-content-wrap .section-heading { 
    margin-bottom: 20px;
  }
}


.service-carousel-pagination .swiper-pagination-bullet {
  background-color: var(--tl-color-common-white);
  opacity: 0.4;
  transition: opacity 0.3s, transform 0.3s;
}

.service-carousel-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.2);
}

.btn-whatsapp {
    position: fixed;
    right: 28px;
    bottom: 28px;
    background: #25d366;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(37, 211, 102, .45);
    transition: transform .2s ease, box-shadow .2s ease;
    text-decoration: none;
}

.btn-whatsapp::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #25d366;
    animation: whatsapp-pulse 2s ease-out infinite;
    z-index: -1;
}

.btn-whatsapp:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, .65);
    color: #fff;
}

@keyframes whatsapp-pulse {
    0% {
        transform: scale(1);
        opacity: .6
    }

    70% {
        transform: scale(1.5);
        opacity: 0
    }

    100% {
        transform: scale(1.5);
        opacity: 0
    }
}

/* Loghi enti (Confindustria, Ance) sotto il testo about: i file sorgente sono molto grandi
   (fino a 4096x4096px), quindi vanno limitati in altezza mantenendo le proporzioni. */
.loghi-enti img {
    width: 220px;
    height: auto;
    max-height: none;
    object-fit: contain;
}