/* ================================================================
   Powercar — Header & Footer Elementor Templates
   Widget usati: image, icon-list, button, heading, text-editor
   (tutti Elementor Free — nessun Pro widget).
   Classi custom .pc-* abbinate ai css_classes nei JSON.
   Nessun ID, nessun selettore .elementor-element-XXXXX.

   NOTA SPECIFICITÀ:
   Elementor genera regole con specificità (0,1,0)–(0,2,0) e usa
   !important in alcuni casi. Qui usiamo selettori tripli (.e-con.e-flex.pc-*)
   → (0,3,0) oppure !important dove Elementor lo fa già lui.
   ================================================================ */

:root {
  --pc-red:        #ed1b30;
  --pc-red-dark:   #c41526;
  --pc-dark:       #111111;
  --pc-muted:      #aaaaaa;
  --pc-wa:         #25D366;
  --pc-wa-dark:    #1ebe5d;
  --pc-white:      #ffffff;
  --pc-border-dim: rgba(255, 255, 255, 0.10);
  --pc-header-h:   8vh;
  --pc-trans:      0.22s ease;
}

/* ================================================================
   HEADER — layout
   ================================================================ */

/* ── Barra fissa a tutta larghezza ───────────────────────────── */
.pc-header-bar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow var(--pc-trans);
}

/* Forza flex-row esplicito sull'outer container */
.e-con.e-flex.pc-header-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  min-height: var(--pc-header-h) !important;
}

/* Offset WordPress admin bar */
.admin-bar .pc-header-bar {
  top: 32px !important;
}

@media (max-width: 782px) {
  .admin-bar .pc-header-bar {
    top: 46px !important;
  }
}

/* ── Blocco logo rosso ───────────────────────────────────────── */
.e-con.e-flex.pc-logo-box,
.e-con.pc-logo-box {
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Logo immagine bianca su sfondo rosso */
.pc-logo-box .pc-site-logo img,
.pc-logo-box img {
  display: block;
  width: 150px;
  max-width: 150px;
  height: auto;
}

.pc-logo-box .pc-site-logo.elementor-widget-image a {
  display: block;
}

/* ── Area navigazione ────────────────────────────────────────── */
.e-con.e-flex.pc-nav-area,
.e-con.pc-nav-area {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  gap: 24px !important;
}

/* ================================================================
   HEADER — icon-list nav (layout orizzontale forzato)
   ================================================================ */

.pc-nav-main .elementor-icon-list-items,
.pc-nav-secondary .elementor-icon-list-items {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pc-nav-main .elementor-icon-list-item,
.pc-nav-secondary .elementor-icon-list-item {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Rimuove icone vuote */
.pc-nav-main .elementor-icon-list-icon,
.pc-nav-secondary .elementor-icon-list-icon {
  display: none !important;
}

/* Stile link nav */
.pc-nav-main .elementor-icon-list-item > a,
.pc-nav-secondary .elementor-icon-list-item > a {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--pc-trans);
}

.pc-nav-main .elementor-icon-list-item > a:hover,
.pc-nav-secondary .elementor-icon-list-item > a:hover {
  color: var(--pc-white);
}

/* Voce attiva (classe aggiunta da main.js) */
.pc-nav-main .elementor-icon-list-item.pc-nav-active > a,
.pc-nav-secondary .elementor-icon-list-item.pc-nav-active > a {
  color: var(--pc-white);
  font-weight: 700;
}

/* ── Fallback strutturale nav ────────────────────────────────── */
.pc-nav-area .elementor-widget-icon-list .elementor-icon-list-items {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pc-nav-area .elementor-widget-icon-list .elementor-icon-list-item {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pc-nav-area .elementor-widget-icon-list .elementor-icon-list-icon {
  display: none !important;
}

.pc-nav-area .elementor-widget-icon-list .elementor-icon-list-item > a {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--pc-trans);
}

#pc-mobile-nav.pc-nav-area .elementor-widget-icon-list .elementor-icon-list-item > a:hover {
  color: var(--pc-dark);
}

.pc-header-bar.pc-nav-open #pc-mobile-nav .elementor-icon-list-text {
  color: var(--pc-dark);
}

.elementor-76 .elementor-element.elementor-element-88e456a .elementor-icon-list-text {
  color: #FFFFFFD9;
  transition: color 0.3s;
}

/* ── Fix visibilità logo — bypass Elementor lazy-load opacity ── */
.pc-header-bar .elementor-widget-image img {
  opacity: 1 !important;
  visibility: visible !important;
}

.pc-header-bar .elementor-element {
  opacity: 1 !important;
}

/* ── CTA "Vendi la tua auto" ─────────────────────────────────── */
.pc-btn-vendi .elementor-button {
  background-color: var(--pc-white) !important;
  color: var(--pc-red) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  white-space: nowrap;
  transition: background-color var(--pc-trans), color var(--pc-trans), box-shadow var(--pc-trans);
}

.pc-header-bar.pc-nav-open #pc-mobile-nav .pc-btn-vendi .elementor-button:hover {
  background-color: #f5f5f5 !important;
  color: var(--pc-red-dark) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.pc-header-bar.pc-nav-open #pc-mobile-nav .pc-btn-vendi {
	margin-top: 0px !important;
}

.pc-header-bar.pc-nav-open #pc-mobile-nav .pc-btn-vendi.elementor-widget-button .elementor-button-content-wrapper {
    justify-content: flex-start;
	border-bottom: 1px solid #f0f0f0 !important;
	padding: 18px 0 !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
}

/* ── Offset contenuto sotto header fisso ─────────────────────── */
body.has-elementor-header #page,
body.elementor-page #page {
  padding-top: var(--pc-header-h);
}

/* ── Hamburger — visibile solo su mobile ─────────────────────── */
.pc-hamburger {
  display: none;
}

.pc-hamburger .elementor-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 8px 10px !important;
  cursor: pointer;
  line-height: 1;
}

.pc-hamburger .elementor-button-icon svg,
.pc-hamburger .elementor-button-icon i {
  font-size: 1.4rem !important;
  width: 22px !important;
  height: 22px !important;
  color: var(--pc-white) !important;
  fill: var(--pc-white) !important;
  transition: color var(--pc-trans), fill var(--pc-trans);
}

.pc-hamburger .elementor-button:hover .elementor-button-icon svg,
.pc-hamburger .elementor-button:hover .elementor-button-icon i {
  color: rgba(255, 255, 255, 0.70) !important;
  fill: rgba(255, 255, 255, 0.70) !important;
}

/* Icona menu aperto: rimane bianca */
.pc-header-bar.pc-nav-open .pc-hamburger .elementor-button-icon svg,
.pc-header-bar.pc-nav-open .pc-hamburger .elementor-button-icon i {
  color: var(--pc-white) !important;
  fill: var(--pc-white) !important;
}

/* ================================================================
   HEADER RESPONSIVE — mobile / tablet
   ================================================================ */

/*
  Struttura HTML (Elementor):
    .pc-header-bar (position: fixed)
      .pc-logo-box
        img (logo)
      .pc-nav-area
        .pc-nav-main   (icon-list)
        .pc-btn-vendi  (button CTA)
        .pc-nav-secondary (icon-list)
        .pc-hamburger  (button icona)

  Strategia mobile:
  - CLOSED: nav-area in flow, larghezza auto, mostra solo hamburger a destra.
  - OPEN:   nav-area diventa position:absolute sotto l'header (dropdown).
            L'hamburger, essendo l'ultimo figlio di nav-area (ora absolute),
            viene riposizionato via position:absolute con top negativo
            per restare visivamente nell'header row.
*/

@media (max-width: 860px) {
  :root { --pc-header-h: 80px; }

  /* ── Logo a 80px ── */
  .pc-logo-box .pc-site-logo img,
  .pc-logo-box img {
    width: 80px !important;
    max-width: 80px !important;
  }

  .e-con.e-flex.pc-logo-box,
  .e-con.pc-logo-box {
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ── Header bar: riga singola, no wrap ── */
  .e-con.e-flex.pc-header-bar {
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }

  /* ── Nav area: slim, mostra solo hamburger a destra ── */
  .e-con.e-flex.pc-nav-area,
  .e-con.pc-nav-area {
    flex: 1 1 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 12px !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* ── Link e CTA nascosti nel closed state ── */
  .pc-nav-main,
  .pc-nav-secondary,
  .pc-btn-vendi {
    display: none !important;
  }

  /* ── Hamburger visibile ── */
  .pc-hamburger {
    display: flex !important;
    align-items: center !important;
  }

  /* ══ OPEN STATE ════════════════════════════════════════════════ */

  /* Nav area: diventa dropdown assoluto sotto l'header */
  .pc-header-bar.pc-nav-open .e-con.pc-nav-area {
    position: absolute !important;
    top: var(--pc-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 16px 24px 28px !important;
    background: #ffffff !important;
    border-top: 2px solid var(--pc-red) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    z-index: 99 !important;
    gap: 0 !important;
  }

  /*
    Hamburger: ora è dentro .pc-nav-area che è position:absolute.
    Con position:absolute e top negativo, "risale" nell'header row.
    Il containing block diventa .pc-nav-area (position:absolute).
    top: calc(-1 * 80px) = -80px → visivamente a y=0 dell'header.
  */
  .pc-header-bar.pc-nav-open .pc-hamburger {
    position: absolute !important;
    top: calc(-1 * var(--pc-header-h)) !important;
    right: 12px !important;
    height: var(--pc-header-h) !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Nav link visibili nel dropdown */
  .pc-header-bar.pc-nav-open .pc-nav-main,
  .pc-header-bar.pc-nav-open .pc-nav-secondary {
    display: flex !important;
    width: 100% !important;
  }

  /* CTA "Vendi" come bottone full-width nel dropdown */
  .pc-header-bar.pc-nav-open .pc-btn-vendi {
    display: flex !important;
    width: 100% !important;
    margin-top: 20px !important;
  }

  .pc-header-bar.pc-nav-open .pc-btn-vendi .elementor-button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Nav link: layout verticale */
  .pc-header-bar.pc-nav-open .pc-nav-main .elementor-icon-list-items,
  .pc-header-bar.pc-nav-open .pc-nav-secondary .elementor-icon-list-items {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  .pc-header-bar.pc-nav-open .pc-nav-main .elementor-icon-list-item,
  .pc-header-bar.pc-nav-open .pc-nav-secondary .elementor-icon-list-item {
    width: 100% !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .pc-header-bar.pc-nav-open .pc-nav-main .elementor-icon-list-item > a,
  .pc-header-bar.pc-nav-open .pc-nav-secondary .elementor-icon-list-item > a {
    display: block !important;
    padding: 14px 0 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--pc-dark) !important;
  }

  .pc-header-bar.pc-nav-open .pc-nav-main .elementor-icon-list-item > a:hover,
  .pc-header-bar.pc-nav-open .pc-nav-secondary .elementor-icon-list-item > a:hover {
    color: var(--pc-red) !important;
  }

  /* Piccolo separatore visivo tra i due gruppi link */
  .pc-header-bar.pc-nav-open .pc-nav-secondary {
    margin-top: 4px !important;
  }

  /* Fallback strutturale: dropdown verticale senza classe widget */
  .pc-header-bar.pc-nav-open .pc-nav-area .elementor-widget-icon-list .elementor-icon-list-items {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  .pc-header-bar.pc-nav-open .pc-nav-area .elementor-widget-icon-list .elementor-icon-list-item {
    width: 100% !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  .pc-header-bar.pc-nav-open .pc-nav-area .elementor-widget-icon-list .elementor-icon-list-item > a {
    display: block !important;
    padding: 14px 0 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
  }
}

@media (max-width: 767px) {
  :root { --pc-header-h: 70px; }

  /* Logo a 70px su mobile piccolo */
  .pc-logo-box .pc-site-logo img,
  .pc-logo-box img {
    width: 150px !important;
    max-width: 150px !important;
  }

  .e-con.e-flex.pc-logo-box,
  .e-con.pc-logo-box {
    flex: 0 0 102px !important;
    width: 102px !important;
    min-width: 102px !important;
    max-width: 102px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ================================================================
   FOOTER — layout
   ================================================================ */

.pc-footer-wrap {
  font-family: 'Outfit', sans-serif;
}

/* ── Riga principale: forza row + wrap ───────────────────────── */
.e-con.e-flex.pc-footer-inner,
.e-con.pc-footer-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 48px !important;
}

/* ── Colonna brand (prima colonna, più larga) ────────────────── */
.e-con.e-flex.pc-ftr-brand,
.e-con.pc-ftr-brand {
  flex: 0 0 26% !important;
  width: 26% !important;
  max-width: 26% !important;
  min-width: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* ── Colonne secondarie (Esplora, Servizi, Contatti) ─────────── */
.e-con.e-flex.pc-ftr-col,
.e-con.pc-ftr-col {
  flex: 1 1 160px !important;
  min-width: 140px !important;
  max-width: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

/* ── Logo testuale footer ────────────────────────────────────── */
.pc-ftr-logo-text .elementor-heading-title {
  line-height: 1 !important;
  margin-bottom: 20px !important;
}

.pc-brand-accent {
  color: var(--pc-red);
}

/* ── Titoli colonne con lineetta rossa ───────────────────────── */
.pc-col-title {
  position: relative !important;
  padding-bottom: 16px !important;
  margin-bottom: 0 !important;
}

.pc-col-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--pc-red);
}

.pc-col-title .elementor-heading-title {
  margin-bottom: 0 !important;
}

/* Spazio sotto il titolo (sopra i link) */
.pc-col-title + * {
  margin-top: 20px;
}

/* ── Icon list contatti ──────────────────────────────────────── */
.pc-ftr-contacts .elementor-icon-list-icon svg,
.pc-ftr-contacts .elementor-icon-list-icon i {
  color: var(--pc-red);
  fill: var(--pc-red);
  width: 13px !important;
  height: 13px !important;
}

.pc-ftr-contacts .elementor-icon-list-item > a,
.pc-ftr-contacts .elementor-icon-list-item > span {
  color: var(--pc-muted);
  transition: color var(--pc-trans);
  font-size: 0.88rem;
  line-height: 1.7;
}

.pc-ftr-contacts .elementor-icon-list-item > a:hover {
  color: var(--pc-red);
}

/* ── Icon list Esplora (senza icone, layout verticale) ───────── */
.pc-ftr-links .elementor-icon-list-icon {
  display: none !important;
}

.pc-ftr-links .elementor-icon-list-item > a {
  color: var(--pc-muted);
  font-size: 0.9rem;
  transition: color var(--pc-trans), transform var(--pc-trans);
  display: inline-block;
}

.pc-ftr-links .elementor-icon-list-item > a:hover {
  color: var(--pc-red);
  transform: translateX(4px);
}

/* ── Icon list Servizi Rapidi ────────────────────────────────── */
.pc-ftr-action-links .elementor-icon-list-icon svg,
.pc-ftr-action-links .elementor-icon-list-icon i {
  color: var(--pc-red);
  fill: var(--pc-red);
  width: 13px !important;
  height: 13px !important;
}

.pc-ftr-action-links .elementor-icon-list-item > a {
  color: var(--pc-white);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color var(--pc-trans);
}

.pc-ftr-action-links .elementor-icon-list-item > a:hover {
  color: var(--pc-red);
}

/* ── Orari ───────────────────────────────────────────────────── */
.pc-ftr-hours p {
  margin: 0;
  color: var(--pc-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ── Bottone WhatsApp ────────────────────────────────────────── */
.pc-btn-whatsapp .elementor-button {
  background-color: var(--pc-wa) !important;
  color: var(--pc-white) !important;
  border: none;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  transition: background-color var(--pc-trans), transform var(--pc-trans), box-shadow var(--pc-trans);
}

.pc-btn-whatsapp .elementor-button:hover {
  background-color: var(--pc-wa-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

/* ── Fallback strutturale — titoli colonne footer ─────────────── */
.pc-ftr-col .elementor-widget-heading {
  position: relative !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px;
}

.pc-ftr-col .elementor-widget-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: var(--pc-red);
}

/* ── Fallback strutturale — link legali footer bottom ────────── */
.pc-footer-bottom .elementor-widget-icon-list .elementor-icon-list-items {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pc-footer-bottom .elementor-widget-icon-list .elementor-icon-list-icon {
  display: none !important;
}

.pc-footer-bottom .elementor-widget-icon-list .elementor-icon-list-item {
  padding: 0 !important;
}

.pc-footer-bottom .elementor-widget-icon-list .elementor-icon-list-item > a {
  color: #777777;
  font-size: 0.85rem;
  transition: color var(--pc-trans);
}

.pc-footer-bottom .elementor-widget-icon-list .elementor-icon-list-item > a:hover {
  color: var(--pc-white);
}

/* ── Barra copyright ─────────────────────────────────────────── */
.e-con.e-flex.pc-footer-bottom,
.e-con.pc-footer-bottom {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  padding: 28px 60px !important;
  border-top: 1px solid var(--pc-border-dim) !important;
}

.pc-ftr-copyright p {
  margin: 0;
  color: #777777;
  font-size: 0.85rem;
}

/* ── Link legali (Privacy, Cookie) — forza orizzontale ───────── */
.pc-ftr-legal .elementor-icon-list-icon {
  display: none !important;
}

.pc-ftr-legal .elementor-icon-list-items {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pc-ftr-legal .elementor-icon-list-item {
  padding: 0 !important;
  margin: 0 !important;
}

.pc-ftr-legal .elementor-icon-list-item > a {
  color: #777777;
  font-size: 0.85rem;
  transition: color var(--pc-trans);
}

.pc-ftr-legal .elementor-icon-list-item > a:hover {
  color: var(--pc-white);
}

/* ================================================================
   RESPONSIVE FOOTER
   ================================================================ */

@media (max-width: 1024px) {
  .e-con.pc-footer-inner {
    padding: 60px 32px 40px !important;
    gap: 32px !important;
  }

  .e-con.pc-ftr-brand {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .e-con.pc-footer-bottom {
    padding: 24px 32px !important;
  }
}

@media (max-width: 767px) {
  .e-con.pc-footer-inner {
    padding: 48px 20px 32px !important;
    gap: 24px !important;
  }

  .e-con.pc-ftr-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .e-con.pc-footer-bottom {
    padding: 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}