/* ============================================================
   INCARNE — override tema
   ------------------------------------------------------------
   COLORE TEST (ex blu #0e1927)
   Cambia SOLO --incarne-color-main per provare un altro colore.
   Valore attuale: grigio scuro tendente al nero (#1a1a1a).

   Usato ovunque il CSS compilato aveva #0e1927
   (footer, bottoni, sezioni, testi, bordi).
   Il menu NON usa questa variabile: resta sfondo bianco.
   ============================================================ */
:root {
  --incarne-color-main: #1a1a1a; /* grigio scuro tendente al nero — ex #0e1927 / prova #f5d0d2 */
}

/* MENU: sfondo bianco */
.header,
.header.style-1,
#header_main.is-fixed,
#header_main.is-fixed.is-small {
  background: #fff;
  background-color: #fff;
}

#main-nav .menu li a,
#main-nav .menu > li > a,
#main-nav .sub-menu li a {
  color: #000;
}

.mobile-button::before,
.mobile-button::after,
.mobile-button span {
  background-color: #1a1a1a;
}

/* HEADER PAGINE: immagini di sfondo InCarne
   (i path sono relativi a questo file, quindi ../images/...) */
.page-title.p-contatti {
  background-image: url(../images/contatti/INCARNE-HEADER-CONTATTI.webp);
}

.page-title.p-macelleria {
  background-image: url(../images/la-macelleria/INCARNE-HEADER-LA-MACELLERIA.webp);
}

.page-title.p-carne {
  background-image: url(../images/la-carne/INCARNE-HEADER-LA-CARNE.webp);
}

.page-title.p-livorno {
  background-image: url(../images/livorno/INCARNE-HEADER-LIVORNO.webp);
}

.page-title.p-pietrasanta {
  background-image: url(../images/pietrasanta/INCARNE-HEADER-PIETRASANTA.webp);
}

.page-title.p-pisa {
  background-image: url(../images/pisa/INCARNE-HEADER-PISA.webp);
}

.page-title.p-prenota {
  background-image: url(../images/prenota-ora/INCARNE-HEADER-PRENOTA-ORA.webp);
}

/* Queste pagine non hanno la breadcrumb: il margine sotto al titolo serviva a
   distanziarla, senza va azzerato e il padding reso simmetrico (198px del tema),
   altrimenti la scritta resta 37px sotto al centro. */
.page-title.p-contatti,
.page-title.p-macelleria,
.page-title.p-carne,
.page-title.p-livorno,
.page-title.p-pietrasanta,
.page-title.p-pisa,
.page-title.p-prenota {
  padding-bottom: 198px;
}

.page-title.p-contatti .page-title-main .title,
.page-title.p-macelleria .page-title-main .title,
.page-title.p-carne .page-title-main .title,
.page-title.p-livorno .page-title-main .title,
.page-title.p-pietrasanta .page-title-main .title,
.page-title.p-pisa .page-title-main .title,
.page-title.p-prenota .page-title-main .title {
  margin-bottom: 0;
}

/* FOOTER SEDE LEGALE: senza le etichette "Address/Contact" non ci sono piu
   i pallini rossi, quindi il rientro che il tema riservava a loro va tolto
   per riallineare il testo al titolo della colonna. */
.footer .widget.locations ul {
  padding-left: 0;
}

/* FOOTER BOTTONE PRENOTA: sul fondo scuro serve bianco. Solo dentro .footer,
   perche' style1 e' usato anche su sfondi chiari (home, livorno, fixedbar).
   Il riempimento rosso in hover e' gia' del tema (gradiente che scorre):
   basta tenere il testo bianco per la leggibilita'. */
.footer .tf-button.style1 {
  border-color: #fff;
  color: #fff;
}

.footer .tf-button.style1:hover {
  color: #fff;
}

/* FOOTER EMAIL: il tema da' all'ultimo paragrafo della colonna (qui l'email)
   colore rosso e corpo 20px. Va bianco e della stessa misura dell'indirizzo
   sopra, che non ha un font-size proprio ed eredita i 15px del body:
   inherit lo allinea di conseguenza. */
.footer .widget.locations ul li:last-child p:last-child,
.footer .widget.locations ul li p a {
  color: #fff;
  font-size: inherit;
}

.footer .widget.locations ul li p a:hover {
  color: #bc1823;
}

/* FOOTER COPYRIGHT: il tema lo dava rosso (#bc1823), va bianco come i
   link PRIVACY/COOKIE affiancati. Il link all'agenzia eredita il colore,
   quindi va incluso, con hover rosso come gli altri link della riga. */
.footer .bottom-main p,
.footer .bottom-main p a {
  color: #fff;
}

.footer .bottom-main p a:hover {
  color: #bc1823;
}

/* TOP BAR: testi bianchi */
.top-bar,
.top-bar ul li,
.top-bar ul li a,
.top-bar ul li i,
.top-bar .language,
.top-bar .language span,
.top-bar .language a {
  color: #fff;
}

/* HOME, TAB CARNE: il tema mette gli elenchi su due colonne (li al 50%),
   qui vanno uno sotto l'altro. */
.choose .list li {
  width: 100%;
}

/* RIQUADRI SERVIZI: il tema disegna gia' il cerchio da 108px, qui cambiano
   solo il colore (era grigio-blu #212b38) e il contenuto, ora un'icona
   Font Awesome al posto delle png del template. */
.services-box .icon {
  background: #bc1823;
}

.services-box .icon i {
  font-size: 42px;
  color: #fff;
  line-height: 1;
}

/* PAGINE A COLONNA UNICA (La Carne, La Macelleria): al posto dei layout
   blog+sidebar e portfolio del template. */
.s-carne,
.s-macelleria {
  padding: 120px 0 130px;
}

/* Stessa larghezza usata dalle altre sezioni del tema: senza questo il
   contenitore arriverebbe ai 1320px di bootstrap sui monitor larghi. */
.s-carne .container,
.s-macelleria .container {
  max-width: 1200px;
}

.s-carne .block-text,
.s-macelleria .block-text {
  margin-bottom: 60px;
}

/* Griglie di immagini: la proporzione e' fissata dalla classe ratio-*, cosi'
   le foto restano allineate anche se i file hanno formati diversi. */
.in-grid {
  margin-bottom: 60px;
}

.in-figure {
  margin-bottom: 30px;
}

.in-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.in-grid.ratio-169 .in-figure img {
  aspect-ratio: 16 / 9;
}

.in-grid.ratio-43 .in-figure img {
  aspect-ratio: 4 / 3;
}

.in-grid.ratio-11 .in-figure img {
  aspect-ratio: 1 / 1;
}

.in-figure .caption {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 18px;
  margin-bottom: 0;
}

/* PAGINA PRENOTA ORA */
.s-prenota {
  padding: 120px 0 130px;
}

.s-prenota .container {
  max-width: 1200px;
}

.s-prenota .block-text {
  margin-bottom: 40px;
}

.prenota-tel {
  margin-bottom: 70px;
}

.prenota-tel-box {
  text-align: center;
  margin-bottom: 30px;
}

.prenota-tel-box h5 {
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.prenota-tel-box a {
  font-size: 22px;
  color: #bc1823;
}

.prenota-tel-box a:hover {
  color: var(--incarne-color-main);
}

.prenota-form .form-control {
  background: transparent;
  border: 1px solid var(--incarne-color-main);
  border-radius: 0;
  color: var(--incarne-color-main);
  box-shadow: none;
  padding: 14px;
  font-size: 15px;
  line-height: 21px;
  height: auto;
  margin-bottom: 18px;
}

.prenota-form .form-control::placeholder {
  color: var(--incarne-color-main);
}

.prenota-form .prenota-checks {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px;
  text-align: left;
}

.prenota-form .send-wrap {
  text-align: center;
  margin-top: 10px;
}

#reservationssuccess,
#reservationserror {
  text-align: center;
  margin-top: 30px;
}

/* FORM CONTATTI: checkbox privacy/newsletter */
.location-main .contatti-checks {
  text-align: left;
  margin: 10px 0 24px;
  max-width: 100%;
}

/* Il tema da' margin-top 30px a TUTTI i link nella colonna del form:
   sul link Privacy spaginava la riga. */
.p-contact .location .location-main .content .in-check a,
.p-contact .location.s2 .location-main .content .in-check a {
  margin-top: 0;
}

.prenota-form span.error,
.location-main span.error {
  display: block;
  color: #bc1823;
  font-size: 12px;
  letter-spacing: 0.5px;
  margin: -10px 0 12px;
  text-align: left;
}

/* Checkbox nativi: niente classi Bootstrap form-check (float + appearance:none
   li rendevano invisibili/incliccabili). */
.in-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  text-align: left;
}

.in-check input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: auto;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 4px 0 0;
  padding: 0;
  float: none;
  flex-shrink: 0;
  accent-color: #bc1823;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.in-check label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--incarne-color-main);
  cursor: pointer;
}

.in-check label a {
  color: #bc1823;
  text-decoration: underline;
}

/* MENU MOBILE: Prenota e lingue solo nell'hamburger
   (il bottone header sparisce da 1200px, la top-bar lingua da 767px). */
#main-nav .menu li.only-mobile {
  display: none;
}

#main-nav-mobi ul li.only-mobile {
  display: block;
}

#main-nav-mobi ul li.menu-lang {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
}

#main-nav-mobi ul li.menu-lang a,
#main-nav-mobi ul li.menu-lang span {
  padding: 0;
  font-weight: 700;
  letter-spacing: 1px;
}

#main-nav-mobi ul li.menu-lang span {
  color: #bc1823;
}

.mySwiper .contact-info .left h4 a {
  color: #fff;
}

/* HOME, VETRINA RISTORANTI: tre colonne solo da tablet in su.
   Sotto, una colonna intera: il 33% del tema override lasciava tre
   strisce minuscole e l'hover (scale 0.5) su tap sballava il testo. */
@media (min-width: 992px) {
  .home1 .gallery-box {
    width: 33.3333%;
  }
}

@media (max-width: 991px) {
  .mySwiper .contact-info {
    width: 100%;
    height: auto;
    padding: 16px 20px;
    align-items: center;
  }

  .mySwiper .contact-info .icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }

  .mySwiper .contact-info .icon svg {
    width: 22px;
    height: 22px;
  }

  .mySwiper .contact-info .left {
    margin-left: 14px;
  }

  .mySwiper .contact-info .left h6 {
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 4px;
  }

  .mySwiper .contact-info .left h4 {
    font-size: 20px;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .choose .choose-content .flat-tabs .menu-tab,
  .p-about .event .event-main .event-content .flat-tabs .menu-tab {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 20px;
  }

  .choose .choose-content .flat-tabs .menu-tab li,
  .p-about .event .event-main .event-content .flat-tabs .menu-tab li {
    margin: 0;
  }

  .choose .choose-content .flat-tabs .menu-tab li h5,
  .p-about .event .event-main .event-content .flat-tabs .menu-tab li h5 {
    font-size: 13px;
  }

  .p-about .event .event-main .event-content .flat-tabs .content-tab {
    padding: 0;
  }

  .home1 .gallery .gallery-main {
    flex-direction: column;
  }

  .home1 .gallery-box {
    width: 100%;
  }

  .home1 .gallery-box .image {
    height: 380px;
  }

  .home1 .gallery-box .content,
  .home1 .gallery-box:hover .content {
    opacity: 1;
    visibility: visible;
    transform: none;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 20px 26px;
    background: rgba(26, 26, 26, 0.88);
  }

  .home1 .gallery-box .content .text {
    margin-bottom: 16px;
  }
}