/* Aspetto di immobili-immobili.it — HomeBased, 15-16/10/2026
   Ritocchi nostri, tenuti fuori dal tema cosi' sopravvivono agli aggiornamenti. */

/* --------------------------------------------------------------------------
   Schede immobile tutte della stessa misura.

   Sono due i posti dove il tema impagina queste schede affiancate:
     - la home, in .rh_section__properties
     - sotto la scheda di un immobile, in "Altre Proprieta'"
       (.rh_property__similar_properties .rh_property__container)
   In entrambi il contenitore e' un flex, quindi gli <article> vengono alti
   uguali, ma il riquadro bianco che si vede (.rh_prop_card__wrap, quello con
   l'ombra) resta alto quanto il suo contenuto: con titoli di lunghezza
   diversa le schede sembrano di misure diverse.
   Per questo le regole stanno sulla scheda, non sul contenitore: cosi'
   valgono in tutti e due i posti. La catena va seguita tutta, se si salta
   __wrap non succede niente.
     article.rh_prop_card--listing   la scheda
       .rh_prop_card__wrap           il riquadro con l'ombra
         figure.rh_prop_card__thumbnail  la foto
         .rh_prop_card__details          il blocco bianco col testo

   Sulla home serve anche "align-items: stretch", perche' lì il tema mette
   "flex-start"; in "Altre Proprieta'" lo stretch e' gia' il valore normale.
   Attenzione: la pagina /listing/ usa un'altra scheda (.rh_list_card, con la
   foto di fianco al testo) e queste regole non la toccano, giustamente.
   -------------------------------------------------------------------------- */

.rh_section__properties {
	align-items: stretch;
}

.rh_prop_card--listing {
	display: flex;
	flex-direction: column;
}

.rh_prop_card--listing .rh_prop_card__wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* Il blocco bianco si allunga fino in fondo: e' quello che pareggia le schede
   quando i titoli hanno lunghezze diverse. */
.rh_prop_card--listing .rh_prop_card__details {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   Foto delle schede, tutte con lo stesso taglio.

   Le foto arrivano dal gestionale con proporzioni diverse e non sempre
   WordPress riesce a produrre il ritaglio che il tema si aspetta: quando
   l'originale e' piu' stretto serve il file a dimensione piena, e quella
   scheda esce con un'immagine di forma diversa dalle altre (ne ho trovata
   una 569x510, quasi quadrata, e una 680x453).
   Imponendo il formato 4:3 e il ritaglio, vengono tutte uguali.
   -------------------------------------------------------------------------- */

.rh_prop_card--listing .rh_prop_card__thumbnail img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   Miniature della galleria nella scheda immobile.

   La foto grande la impagina il tema e il suo JavaScript: non va toccata.
   Qui si danno solo alle miniature la stessa forma, qualunque sia il formato
   dell'originale, perche' il gestionale manda foto di proporzioni diverse.
   -------------------------------------------------------------------------- */

#property-detail-slider-carousel-nav .slides li img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

/* --------------------------------------------------------------------------
   Header bianco: i tre pezzi che il tema non lascia regolare.

   L'header solido si sceglie dalle opzioni del tema (Personalizza > Header >
   Basics > Header Variations: la variante "one" e' quella trasparente sopra
   la foto, le altre tre sono solide) e i colori si danno in
   Personalizza > Styles > Header. Restano fuori tre cose scritte a mano nel
   CSS del tema, pensate per un header scuro:

   1. l'icona dell'utente (Accedi/Registrati) e' grigio chiarissimo
      (#d8d8d8) e sul bianco non si vede;
   2. sotto i 768px la striscia col telefono ha il fondo nero (#1a1a1a):
      l'opzione del tema che la colora ("Bottom Bar Background Color") apre
      una media query e non la chiude mai, quindi inghiotte il CSS che viene
      dopo - non va usata;
   3. l'header bianco su pagina #F7F7F7 non ha nessuno stacco: una riga
      sottile fa da appoggio, come sul sito originale.
   -------------------------------------------------------------------------- */

.user_menu_wrapper .rh_menu__user_profile .user-icon {
	fill: #343a3b;
}

.user_menu_wrapper .rh_menu__user_profile .user-icon:hover {
	fill: #ea723d;
	background: rgba(0, 0, 0, .05);
}

@media (max-width: 767px) {
	.rh_responsive_header_temp .rh_menu__user {
		background: #fff;
	}
}

.rh_var2_nav_wrapper,
.rh_temp_header_responsive_view.rh_header {
	border-bottom: 1px solid #e8e8e8;
}

/* --------------------------------------------------------------------------
   Barra appiccicosa del telefono, bianca.

   L'interruttore e' nelle opzioni del tema (Personalizza > Header > Basics >
   Mobile Sticky Header) e la barra nasce gia' bianca
   (.rh-mobile-sticky-header.sticked ha background-color:#fff), ma sotto i
   768px il tema rimette il fondo scuro dietro al logo, perche' la barra
   l'aveva pensata scura. Qui si rimedia.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.rh-mobile-sticky-header.sticked .rh_logo_wrapper {
		background: #fff;
	}
}

/* --------------------------------------------------------------------------
   Footer bianco: il filetto di appoggio.

   Il colore del footer si da' dalle opzioni del tema (Personalizza > Styles >
   Footer), ma il tema non prevede nessun bordo: un footer bianco sulla pagina
   grigio chiarissimo (#F7F7F7) non si stacca da niente. Una riga sottile
   sopra, come quella sotto l'header.
   -------------------------------------------------------------------------- */

.rh_footer {
	border-top: 1px solid #e8e8e8;
}

/* --------------------------------------------------------------------------
   Footer a tre colonne: la larghezza che il tema si e' dimenticato.

   Nel CSS del tema ci sono le larghezze per .column-1, .columns-2 e
   .columns-4, ma di .columns-3 non c'e' traccia da nessuna parte: con tre
   colonne restano tutte al 100% e si impilano una sotto l'altra a qualunque
   larghezza di schermo. Qui si mette la regola mancante, con gli stessi
   punti di rottura che il tema usa per le quattro colonne.
   -------------------------------------------------------------------------- */

@media (min-width: 576px) {
	.rh_footer__widgets.columns-3 {
		width: 50%;
	}
}

@media (min-width: 1024px) {
	.rh_footer__widgets.columns-3 {
		width: 33.3333%;
	}
}

/* --------------------------------------------------------------------------
   Scheda "Vuoi vendere o affittare" in home.

   Prima era un titolo in maiuscolo corsivo piu' una citazione del tema con
   dentro il logo FIAIP ingrandito oltre misura. Ora e' una scheda vera:
   testo a sinistra, pulsante e numero a destra, incolonnati sotto i 768px.
   Il pulsante usa le classi del tema (.rh-btn .rh-btn-primary), cosi' segue
   il colore principale impostato nelle opzioni senza doverlo ripetere qui.
   -------------------------------------------------------------------------- */

.rh_content .ii-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
	padding: 4rem;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-left: 5px solid var(--rh-global-color-primary);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.rh_content .ii-cta__text {
	flex: 1 1 32rem;
	min-width: 0;
}

.rh_content .ii-cta__kicker {
	margin: 0 0 .8rem;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* la tinta principale piena (#1ea69a) su bianco sta a 3:1, troppo poco per
	   un testo piccolo: la variante scura del tema arriva a 4,7:1 e segue
	   comunque il colore impostato nelle opzioni. */
	color: var(--rh-global-color-primary-dark, #0b8278);
}

.rh_content .ii-cta__title {
	margin: 0 0 1.2rem;
	font-size: 3rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--rh-global-color-headings);
}

.rh_content .ii-cta__body {
	margin: 0;
	max-width: 62rem;
}

.rh_content .ii-cta__actions {
	flex: 0 1 auto;
	text-align: center;
}

.rh_content .ii-cta__btnwrap {
	margin: 0 0 1rem;
}

.rh_content .ii-cta__btnwrap .rh-btn {
	padding: 1.5rem 3rem;
	font-weight: 500;
	white-space: nowrap;
}

.rh_content .ii-cta__phone {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.rh_content .ii-cta {
		padding: 2.5rem;
		gap: 2rem;
	}

	.rh_content .ii-cta__title {
		font-size: 2.4rem;
	}

	.rh_content .ii-cta__actions {
		flex: 1 1 100%;
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Stemma FIAIP nel footer.

   L'unico file FIAIP presente sul sito e' 112x60 pixel (si chiama
   "logo-fiaip-bassa.jpg" e bassa lo e' davvero): in home veniva stirato a
   232 pixel di larghezza, da qui l'effetto sgranato. Qui sta alla sua
   misura naturale, quindi nitido, e la dicitura per esteso la fa il testo
   accanto invece delle tre righe illeggibili dentro l'immagine.
   Il fondo bianco del JPEG sparisce perche' il footer e' bianco.
   -------------------------------------------------------------------------- */

.rh_footer .ii-fiaip {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: .5rem;
}

/* Misurato in altezza e non in larghezza: cosi' il giorno che arriva il logo
   ufficiale ad alta risoluzione basta sostituire il file, qualunque siano le
   sue proporzioni, senza toccare nulla qui. */
.rh_footer .ii-fiaip img {
	flex: 0 0 auto;
	width: auto;
	height: 60px;
	max-width: 100%;
}

.rh_footer .ii-fiaip__text {
	font-size: 1.3rem;
	line-height: 1.45;
}