/* =====================================================================
   PHASE 6.1 — FINAL VISUAL / NAVIGATION FIXES
   Caricato per ultimo in base.html → override sicuro di tutto il resto.
   Ambito: solo usabilità, leggibilità, coerenza. Niente nuove feature.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) HEADER / NAVIGATION
   - Aumento contrasto link nav (era #6E746F borderline su bianco)
   - Anticipo burger a 1199px (sotto, gli 11 link finivano fuori area)
   - Mobile menu: max-width sicura, scroll interno garantito
--------------------------------------------------------------------- */
.header .nav-link {
  color: #102019;            /* era var(--text-muted) ~#6E746F */
  font-weight: 600;          /* era 500 */
}
.header .nav-link:hover { color: #1E7A57; background: #EFFAF4; }

@media (max-width: 1199px) {
  .header .mobile-menu-toggle { display: block !important; }
  /* CAUSA ROOT FIX overflow mobile (allineato a base.html):
     `transform: translateX(100%)` su elementi position:fixed viene comunque
     conteggiato dal browser nello scrollWidth del documento, generando
     overflow orizzontale (~70px su viewport 400px). Sostituito con
     visibility + opacity + pointer-events: il drawer resta a right:0 e
     fade in/out senza contribuire alla scroll area del documento. */
  .header .nav-menu {
    position: fixed;
    top: 72px; right: 0; left: auto;
    bottom: 0;
    width: min(360px, 100vw);
    background: #ffffff;
    box-shadow: -8px 0 32px rgba(0,0,0,0.18);
    padding: 18px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: none;
    transition: opacity .25s ease, visibility .25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 10000;
  }
  .header .nav-menu.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  .header .nav-link {
    display: block;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 16px;
    border-bottom: 1px solid #F2F1EA;
  }
  .header .nav-button {
    display: block;
    text-align: center;
    margin-top: 10px;
    padding: 14px 24px;
  }
}
/* Backdrop scuro quando il menu è aperto su mobile/tablet (chiude al click) */
.nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10, 21, 18,.45);
  z-index: 9999;
}
.nav-backdrop.is-visible { display: block; }
/* Safety net: nessun backdrop possibile su desktop, anche se uno stato stale rimane */
@media (min-width: 1200px) {
  .nav-backdrop { display: none !important; }
}

/* ---------------------------------------------------------------------
   2) BADGE CARDS — niente sovrapposizione PREMIUM ↔ VERIFICATO
   Stack verticale + spazio a destra per heart/compare.
   Selettori molto specifici per battere la cascade esistente.
--------------------------------------------------------------------- */
article.property-card .property-image .property-badges,
.property-card--home .property-image .property-badges,
.property-card .property-badges {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  max-width: calc(100% - 130px) !important; /* lascia spazio alle pill Salva/Confronta a destra */
  pointer-events: none !important;
  z-index: 3 !important;
}
article.property-card .property-image .property-badges > .property-badge,
.property-card--home .property-image .property-badges > .property-badge,
.property-card .property-badges > .property-badge {
  /* CRITICAL: property-badges.css forza absolute+top:15+left:15 su OGNI .property-badge,
     causando sovrapposizione. Qui rimettiamo nel flusso del flex container. */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: 100% !important;
  pointer-events: auto !important;
  box-shadow: 0 2px 6px rgba(15,23,42,.10) !important;
  text-transform: uppercase !important;
}
/* Anche gli stili in main.css per .property-card--home .property-badge usano position:absolute */
.property-card--home .property-image .property-badges > .property-badge--certified,
.property-card--home .property-image .property-badges > .property-badge--high,
.property-card--home .property-image > .property-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
}
/* Home: badge singolo, ma se in futuro ne arrivano 2 stanno in colonna */
.property-card--home .property-badge {
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
   3) CARD HOME ↔ /PROPERTIES — coerenza premium
   Allineamento: ombre, radius, hover, tipografia, badge ROI floating
--------------------------------------------------------------------- */
.property-card--home {
  border-radius: 20px !important;          /* era 16 */
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.06) !important;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s cubic-bezier(.4,0,.2,1) !important;
}
.property-card--home:hover {
  transform: translateY(-6px) !important;  /* allineato a .property-card */
  box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06) !important;
}
.property-card--home .property-image {
  aspect-ratio: 16/10;
  height: auto;
}
.property-card--home .property-content {
  padding: 18px 20px 20px;
  gap: 10px;
}
.property-card--home .property-title {
  font-size: 1.15rem;       /* allineato a .property-card */
  color: #0A1512;
  font-weight: 700;
  line-height: 1.3;
}
.property-card--home .property-location {
  color: #4E5652;           /* più scuro: era #6E746F */
  font-size: 0.875rem;
  font-weight: 500;
}
.property-card--home .property-features {
  font-size: 0.85rem;
  color: #3A423E;           /* da #4E5652 → più contrasto */
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid #F2F1EA;
  border-bottom: 1px solid #F2F1EA;
}

/* Yield: rendiamo la riga compatta e inline con il prezzo come su /properties */
.phc-yield {
  border-top: none !important;
  padding: 4px 0 0 !important;
  margin-top: 0 !important;
  align-items: baseline;
}
.phc-yield__num {
  font-size: 1.5rem;        /* era 1.7 */
}
.phc-price {
  font-size: 1.5rem;        /* era 1.15 — promosso a "prezzo grande" come su /properties */
  font-weight: 800;
  color: #0A1512;
  letter-spacing: -0.02em;
}
.phc-cta {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #F2F1EA;
  font-size: 0.92rem;
  color: #1E7A57;
}
.phc-cta i { transition: transform .2s; }
.property-card--home:hover .phc-cta i { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   4) FILTRI — campi chiaramente compilabili
   Background tinta + bordo più scuro + label più visibile
--------------------------------------------------------------------- */
.filter-form .filter-group > label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #102019;
  margin-bottom: 4px;
}
.filter-form .filter-select,
.filter-form .range-input {
  background: #F2F1EA !important;     /* era bianco puro: ora si stacca dalla card */
  border: 1.5px solid #9FA39D !important;
  color: #102019 !important;
  font-weight: 500;
  min-height: 40px;
}
.filter-form .filter-select:hover,
.filter-form .range-input:hover {
  border-color: #4E5652 !important;
  background: #fff !important;
}
.filter-form .filter-select:focus,
.filter-form .range-input:focus {
  background: #fff !important;
  border-color: #1E7A57 !important;
  box-shadow: 0 0 0 3px rgba(30,122,87,.18) !important;
}
.filter-form .range-input::placeholder {
  color: #6E746F;            /* era #9FA39D — leggibile */
  opacity: 1;
}
.filter-form .filter-help { color: #4E5652; }
.filter-form .filter-coverage { color: #6E746F; font-style: normal; font-size: .72rem; }
.filter-form .filter-section-title {
  color: #0A1512;            /* era #1E7A57, più scuro = più ancorato */
  font-size: .78rem;
}
.filter-form .filter-section--investor .filter-section-title { color: #047857; }

/* ---------------------------------------------------------------------
   5) CONTRASTO TESTI / SFONDI scuri
--------------------------------------------------------------------- */
.properties-header p { color: rgba(255,255,255,0.85) !important; }     /* era 0.65 */
.cta-section .cta-content p { color: rgba(255,255,255,0.85) !important; }
.footer-col p { color: rgba(255,255,255,0.78) !important; }            /* era 0.6 */
.footer-link { color: rgba(255,255,255,0.75) !important; }             /* era 0.55 */
.copyright { color: rgba(255,255,255,0.6) !important; }                /* era 0.4 */
.property-card-stretched + meta + meta { /* niente, hook for future */ }

/* ---------------------------------------------------------------------
   6) "Salva" e "Confronta" — pill con label visibile
   SCOPED: solo overlay sulle card listing/home, NON tocca i pulsanti
   delle pagine detail/sticky CTA che usano gli stessi class-name.
--------------------------------------------------------------------- */
article.property-card .property-image .property-favorite,
article.property-card .property-image .property-compare,
.property-card--home .property-image .property-favorite,
.property-card--home .property-image .property-compare {
  position: absolute !important;
  right: 12px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 999px !important;
  padding: 7px 12px 7px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(15,23,42,0.10) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.10) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: #102019 !important;
  z-index: 4 !important;
  cursor: pointer;
}
article.property-card .property-image .property-favorite,
.property-card--home .property-image .property-favorite { top: 12px !important; }
article.property-card .property-image .property-compare,
.property-card--home .property-image .property-compare  { top: 52px !important; }

article.property-card .property-image .property-favorite svg,
article.property-card .property-image .property-compare svg,
.property-card--home .property-image .property-favorite svg,
.property-card--home .property-image .property-compare svg {
  width: 16px !important; height: 16px !important;
  flex: 0 0 auto;
  display: block;
}
article.property-card .property-image .property-favorite svg { color: #ef4444; }
article.property-card .property-image .property-compare svg  { color: #1E7A57; }

article.property-card .property-image .property-favorite::after,
.property-card--home .property-image .property-favorite::after { content: 'Salva'; }
article.property-card .property-image .property-compare::after,
.property-card--home .property-image .property-compare::after  { content: 'Confronta'; }

article.property-card .property-image .property-favorite:hover,
article.property-card .property-image .property-compare:hover {
  transform: translateY(-1px) !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(15,23,42,.16) !important;
}

/* Stati attivi (scoped) */
article.property-card .property-image .property-favorite.is-favorited {
  background: #fff !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}
article.property-card .property-image .property-favorite.is-favorited svg {
  fill: #ef4444; stroke: #ef4444; color: #ef4444 !important;
}
article.property-card .property-image .property-compare.is-compared {
  background: #1E7A57 !important;
  border-color: #1E7A57 !important;
  color: #fff !important;
}
article.property-card .property-image .property-compare.is-compared svg { color: #fff !important; }

@media (max-width: 360px) {
  article.property-card .property-image .property-favorite,
  article.property-card .property-image .property-compare {
    font-size: 11px !important; padding: 6px 10px 6px 8px !important;
  }
}

/* ===== DARK MODE ===== */
/* NB: molte regole qui usano !important; gli override dark devono ripetere
   !important e la stessa specificità (prefissati da html[data-theme="dark"]). */

/* 1) HEADER / NAVIGATION — link e drawer mobile */
html[data-theme="dark"] .header .nav-link {
  color: var(--color-text);
}
html[data-theme="dark"] .header .nav-link:hover {
  color: var(--color-text-link);
  background: var(--color-accent-soft);
}
@media (max-width: 1199px) {
  html[data-theme="dark"] .header .nav-menu {
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
  }
  html[data-theme="dark"] .header .nav-link {
    border-bottom: 1px solid var(--color-border);
  }
}

/* 3) CARD HOME — coerenza con .property-card scura */
html[data-theme="dark"] .property-card--home {
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-card) !important;
}
html[data-theme="dark"] .property-card--home:hover {
  box-shadow: var(--shadow-card-hover) !important;
}
html[data-theme="dark"] .property-card--home .property-title {
  color: var(--color-text-strong);
}
html[data-theme="dark"] .property-card--home .property-location {
  color: var(--color-text-muted);
}
html[data-theme="dark"] .property-card--home .property-features {
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
html[data-theme="dark"] .phc-price {
  color: var(--color-text-strong);
}
html[data-theme="dark"] .phc-cta {
  border-top: 1px solid var(--color-border);
  color: var(--color-text-link);
}

/* 4) FILTRI — campi su superficie scura */
html[data-theme="dark"] .filter-form .filter-group > label {
  color: var(--color-text-strong);
}
html[data-theme="dark"] .filter-form .filter-select,
html[data-theme="dark"] .filter-form .range-input {
  background: var(--color-surface) !important;
  border: 1.5px solid var(--color-border-strong) !important;
  color: var(--color-text) !important;
}
html[data-theme="dark"] .filter-form .filter-select:hover,
html[data-theme="dark"] .filter-form .range-input:hover {
  border-color: var(--color-accent) !important;
  background: var(--color-surface-raised) !important;
}
html[data-theme="dark"] .filter-form .filter-select:focus,
html[data-theme="dark"] .filter-form .range-input:focus {
  background: var(--color-surface-raised) !important;
  border-color: var(--color-accent) !important;
  box-shadow: var(--shadow-focus-ring) !important;
}
html[data-theme="dark"] .filter-form .range-input::placeholder {
  color: var(--color-text-muted);
}
html[data-theme="dark"] .filter-form .filter-help,
html[data-theme="dark"] .filter-form .filter-coverage {
  color: var(--color-text-muted);
}
html[data-theme="dark"] .filter-form .filter-section-title {
  color: var(--color-text-strong);
}
html[data-theme="dark"] .filter-form .filter-section--investor .filter-section-title {
  color: var(--color-success);
}

/* 5) Testi su sfondi scuri by design (hero/CTA/footer): già gestiti,
   rgba bianco su fondo scuro resta valido — non toccare. */

/* 6) Pill "Salva"/"Confronta" overlay card — superficie scura su foto */
html[data-theme="dark"] article.property-card .property-image .property-favorite,
html[data-theme="dark"] article.property-card .property-image .property-compare,
html[data-theme="dark"] .property-card--home .property-image .property-favorite,
html[data-theme="dark"] .property-card--home .property-image .property-compare {
  background: rgba(18, 33, 26, 0.94) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--color-text) !important;
}
html[data-theme="dark"] article.property-card .property-image .property-favorite:hover,
html[data-theme="dark"] article.property-card .property-image .property-compare:hover {
  background: var(--color-surface-raised) !important;
  box-shadow: var(--shadow-md) !important;
}
html[data-theme="dark"] article.property-card .property-image .property-favorite.is-favorited {
  background: var(--color-surface-raised) !important;
  border-color: var(--color-danger) !important;
  color: #ef4444 !important;
}