/*
Theme Name: Zoelia Alloggi
Template: twentytwentyfive
Description: Tema per i siti degli alloggi turistici collegati a Zoelia. Figlio di Twenty Twenty-Five: qui c'e' solo la grafica, strutture e disponibilita' le porta il plugin Zoelia Prenotazioni.
Version: 0.8.1
Requires at least: 6.7
Requires PHP: 8.1
Author: Zoelia
Text Domain: zoelia-alloggi
*/

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* L'intestazione resta in alto: senza, un'ancora porterebbe il titolo della sezione sotto di lei. */
[id] {
	scroll-margin-top: 96px;
}

/* La ricerca che si sovrappone al fondo dell'apertura. */
.zoelia-sollevata {
	position: relative;
	z-index: 2;
}

.zoelia-occhiello {
	margin-bottom: 0.5rem;
}

/*
 * Il banner del consenso: un biglietto in un angolo, non una fascia che taglia la pagina.
 *
 * La prima versione era larga quanto lo schermo: su schermo largo sembrava un errore. La seconda
 * era un biglietto stretto in basso a SINISTRA, e dall'altra parte era troppo piccolo e fuori
 * dallo sguardo -- si legge al centro, non in un angolo. Questa e' la terza: un biglietto
 * centrato, largo quanto basta per stare su una riga sola, che sparisce alla prima scelta.
 * Sotto i 600px torna in colonna, perche' li' affiancare testo e pulsanti non ci sta.
 */
.zoelia-consenso {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 16px;
	z-index: 95;
	width: min(620px, calc(100% - 32px));
	background: var(--wp--preset--color--bianco, #fff);
	color: var(--wp--preset--color--contrast, #3E3E3E);
	border: 1px solid rgba(62, 62, 62, 0.12);
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(62, 62, 62, 0.16);
	padding: 18px 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Il testo prende lo spazio che avanza, i pulsanti stanno sulla stessa riga: su schermo largo
   e' un biglietto che si legge in un colpo, non una colonnina schiacciata in un angolo. */
.zoelia-consenso p {
	flex: 1 1 22rem;
}

.zoelia-consenso[hidden] {
	display: none;
}

.zoelia-consenso p {
	margin: 0;
	color: var(--wp--preset--color--accent-4, #6F6A63);
}

.zoelia-consenso p strong {
	color: var(--wp--preset--color--contrast, #3E3E3E);
	font-weight: 600;
}

.zoelia-consenso a {
	color: inherit;
}

.zoelia-consenso__scelte {
	display: flex;
	gap: 8px;
	flex: 0 0 auto;
}

/* Sotto i 600px torna una colonna: due pulsanti affiancati a un testo lungo non ci stanno. */
@media (max-width: 600px) {
	.zoelia-consenso {
		display: grid;
		gap: 12px;
	}
	.zoelia-consenso__scelte button {
		flex: 1;
	}
}

.zoelia-consenso__scelte button {
	flex: 1;
	font: inherit;
	font-size: 0.8rem;
	padding: 8px 10px;
	border-radius: 9px;
	cursor: pointer;
}

.zoelia-consenso__no {
	background: none;
	border: 1px solid rgba(62, 62, 62, 0.18);
	color: inherit;
}

.zoelia-consenso__si {
	border: none;
}

/* Col foglio della prenotazione aperto il banner sparisce: si sceglie una cosa alla volta. */
body.zoelia-foglio-aperto .zoelia-consenso {
	display: none;
}

/* Lo stesso col menu a panino aperto: il menu sta dentro l'intestazione (z-index 10) e il banner
   (95) gli restava sopra. has-modal-open la mette WordPress su <html> finche' il menu e' aperto;
   chiuso il menu, il banner torna. */
html.has-modal-open .zoelia-consenso {
	display: none;
}

/* Dove c'e' la barra di prenotazione, il biglietto sale quanto basta. */
body:has(.zoelia-barra) .zoelia-consenso {
	bottom: 86px;
}

@media (max-width: 600px) {
	.zoelia-consenso {
		left: 12px;
		right: 12px;
		width: auto;
		bottom: 12px;
	}

	body:has(.zoelia-barra) .zoelia-consenso {
		bottom: 80px;
	}
}

/*
 * La copertina della casa e la riga di quello che c'è dentro.
 *
 * Le icone sono disegnate a mano in SVG dentro la pagina: niente libreria di icone da caricare per
 * sei simboli, e niente font di icone -- che è il modo più sicuro di far comparire quadratini neri
 * il giorno che qualcosa non si scarica.
 */
.zoelia-casa-copertina {
	position: relative;
	min-height: min(62vh, 560px);
	display: flex;
	align-items: flex-end;
}

.zoelia-casa-copertina .wp-block-cover__inner-container {
	width: 100%;
}

.zoelia-casa-zona {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
	opacity: 0.85;
}

.zoelia-dotazioni {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.zoelia-dotazioni li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.92rem;
	line-height: 1.2;
}

.zoelia-dotazioni svg {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.85;
}

/* Dentro la copertina le dotazioni stanno su fondo scuro; nel corpo della pagina no. */
.zoelia-casa-copertina .zoelia-dotazioni {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-top: 1.2rem;
}

@media (max-width: 600px) {
	.zoelia-casa-copertina {
		min-height: 58vh;
	}

	.zoelia-dotazioni {
		gap: 10px 18px;
		font-size: 0.85rem;
	}
}

/*
 * "Powered by Zoelia.io" nel piede.
 *
 * Il logo e' quello di app.zoelia.io, la versione PER FONDO SCURO: scritta bianca e ".io" con il
 * gradiente turchese-blu. E' lo stesso marchio che si vede entrando nel pannello, ed e' voluto --
 * chi arriva qui da cliente e poi diventa gestore deve riconoscere la stessa cosa.
 *
 * Sta in fondo a destra, sulla stessa riga del copyright, dove si guarda per ultimo: e' una
 * firma, non un annuncio. Vettoriale, quindi resta nitido su qualunque schermo.
 */
.zoelia-firma {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.zoelia-firma:hover,
.zoelia-firma:focus-visible {
	opacity: 1;
}

.zoelia-firma img {
	display: block;
	height: 22px;
	width: auto;
}

/*
 * La fascia dei portali, fra il contenuto e il piede.
 *
 * Serve a una domanda sola, che su un sito piccolo che chiede la carta viene sempre: "ma chi
 * siete?". Dire che le stesse case stanno su Airbnb, Booking e Vrbo la chiude in un colpo.
 *
 * Per questo e' in fondo e in grigio, e non in mezzo alla pagina a colori: piu' su, e per giunta
 * accanto alla sezione che spiega perche' conviene prenotare diretto, sarebbe un invito ad andare
 * a prenotare altrove. Qui e' una credenziale, non una scorciatoia -- e infatti non sono link.
 */
.zoelia-portali {
	background: var(--wp--preset--color--base, #FAF8F6);
	border-top: 1px solid rgba(62, 62, 62, 0.08);
	padding: clamp(2rem, 5vw, 3rem) var(--wp--preset--spacing--50, 1.5rem);
	text-align: center;
}

.zoelia-portali__intro {
	margin: 0 0 1.4rem;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3, #B7B0A7);
}

.zoelia-portali__elenco {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.2rem 2.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zoelia-portali__elenco img {
	display: block;
	width: auto;
}

/*
 * Tre altezze diverse, e non e' una svista: sono marchi con proporzioni e peso molto diversi
 * (Booking e' largo sei volte la sua altezza e in grassetto, Vrbo e' un filo di linea), e
 * messi alla stessa altezza Booking schiaccia gli altri due. Questi numeri vengono dal
 * guardarli affiancati, non dal calcolo.
 */
.zoelia-portali__elenco li:nth-child(1) img { height: 26px; }
.zoelia-portali__elenco li:nth-child(2) img { height: 18px; }
.zoelia-portali__elenco li:nth-child(3) img { height: 28px; }

.zoelia-portali__nota {
	margin: 1.5rem auto 0;
	max-width: 34rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-4, #6F6A63);
}

@media (max-width: 600px) {
	.zoelia-portali__elenco {
		gap: 1rem 1.75rem;
	}
	.zoelia-portali__elenco li:nth-child(1) img { height: 22px; }
	.zoelia-portali__elenco li:nth-child(2) img { height: 15px; }
	.zoelia-portali__elenco li:nth-child(3) img { height: 24px; }
}

/*
 * Il pulsante WhatsApp.
 *
 * Resta il pulsante scuro del sito, con il solo segno in verde: il verde pieno di WhatsApp su
 * una pagina di beige e terracotta stona, ma il segno da solo basta a farlo riconoscere prima
 * di leggere l'etichetta -- che e' tutto quello che serve.
 *
 * Non c'e' una bolla flottante in basso a destra, che sarebbe il posto solito: sulle schede
 * delle case li' c'e' gia' la barra di prenotazione, e le due si coprirebbero.
 */
.zoelia-whatsapp .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.zoelia-whatsapp__segno {
	flex: 0 0 auto;
	color: #25D366;
}

/* Nel piede, accanto alla mail: stessa riga di testo, non un pulsante. */
.zoelia-whatsapp-riga {
	margin: 0.35rem 0 0;
}

.zoelia-whatsapp-riga__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/*
 * Il secondo pulsante, in contorno.
 *
 * NON si usa `is-style-outline` del core: i colori dei pulsanti stanno in theme.json come stile
 * dell'elemento, e vincono sullo stile del core -- il risultato sarebbe il testo bianco su fondo
 * trasparente, cioe' invisibile sul beige della pagina. Meglio scriverlo qui, dove si vede.
 */
.zoelia-tasto-morbido .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast, #3E3E3E);
	box-shadow: inset 0 0 0 1px rgba(62, 62, 62, 0.22);
}

.zoelia-tasto-morbido .wp-block-button__link:hover,
.zoelia-tasto-morbido .wp-block-button__link:focus {
	background: var(--wp--preset--color--contrast, #3E3E3E);
	color: var(--wp--preset--color--bianco, #fff);
}

/*
 * Il selettore di lingua, nell'intestazione.
 *
 * E' un <details>: niente JavaScript per aprirlo, quindi funziona anche se lo script non parte.
 * Mostra la sigla della lingua corrente e non la bandiera -- una bandiera indica un paese, non
 * una lingua, e su cinque lingue europee genera sempre la stessa discussione.
 */
.zoelia-lingue {
	position: relative;
	flex: 0 0 auto;
}

.zoelia-lingue > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.6rem;
	border-radius: 9px;
	cursor: pointer;
	list-style: none;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4, #6F6A63);
	transition: background 0.15s ease, color 0.15s ease;
}

/* Il triangolino di serie di <details> va tolto in due modi: i browser non sono d'accordo. */
.zoelia-lingue > summary::-webkit-details-marker { display: none; }
.zoelia-lingue > summary::marker { content: ""; }

.zoelia-lingue > summary:hover,
.zoelia-lingue[open] > summary {
	background: var(--wp--preset--color--accent-5, #F2EDE7);
	color: var(--wp--preset--color--contrast, #3E3E3E);
}

.zoelia-lingue__freccia {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.6;
	transition: transform 0.15s ease;
}

.zoelia-lingue[open] .zoelia-lingue__freccia {
	transform: rotate(180deg);
}

.zoelia-lingue__elenco {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 120;
	min-width: 10.5rem;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	background: var(--wp--preset--color--bianco, #fff);
	border: 1px solid rgba(62, 62, 62, 0.12);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(62, 62, 62, 0.14);
}

.zoelia-lingue__elenco a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: 8px;
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #3E3E3E);
}

.zoelia-lingue__elenco a:hover,
.zoelia-lingue__elenco a:focus-visible {
	background: var(--wp--preset--color--accent-5, #F2EDE7);
}

.zoelia-lingue__elenco a.attuale {
	font-weight: 600;
	color: var(--wp--preset--color--accent-1, #C9A7A0);
}

/*
 * L'intestazione sugli schermi stretti: logo, menu, lingua e il pulsante "Verifica le date".
 *
 * Stanno tutti su una riga flessibile che non va a capo, e quando lo spazio manca il browser
 * stringe quello che si lascia stringere. Il pulsante di WordPress ha word-break: break-word, e
 * cosi' era lui la cosa piu' comprimibile di tutte: sul telefono finiva largo 45px, una lettera o
 * due per riga, con l'intestazione alta 330px. Da qui in giu' tre regole, misurate in tutte e
 * cinque le lingue perche' le scritte cambiano di lunghezza.
 *
 * 1) Il pulsante non va mai a capo: se non c'e' posto, si toglie (regola 3), non si schiaccia.
 */
.zoelia-intestazione__cta .wp-block-button__link {
	white-space: nowrap;
	word-break: normal;
}

/*
 * 2) Sotto i 1024px il menu resta a panino anche dove WordPress aprirebbe le voci (lo fa da 600px).
 *    Logo, tre voci, lingua e pulsante stanno su una riga da 836px in inglese, 890 in tedesco,
 *    898 in italiano, 962 in francese e 1000 in spagnolo -- quest'ultimo senza un pixel d'avanzo, e
 *    su Windows la barra di scorrimento se ne mangia altri 17. Prima, in quella fascia, le voci
 *    andavano a capo su due o tre righe e il logo si stringeva. 1024 e' anche il tablet in
 *    orizzontale, che cosi' tiene il menu aperto.
 *    Le due regole sono quelle di WordPress rovesciate; `header` davanti basta a vincere su di loro
 *    e lascia stare un eventuale menu nel piede.
 */
@media (min-width: 600px) and (max-width: 1023px) {
	header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * 3) Sotto i 600px il pulsante sparisce per far posto al menu: con logo, panino e lingua non ci
 *    sta (sul telefono il logo finiva a zero). Dove serve non manca: in home lo stesso "Verifica le
 *    date" e' nel riquadro subito sotto l'apertura, nelle case c'e' la barra in basso. Il selettore
 *    di lingua invece resta, perche' e' proprio li' che serve -- chi arriva da fuori apre il sito
 *    col telefono.
 *    Due classi e non una: WordPress mette "body .is-layout-flex { display: flex }" negli stili
 *    globali, che arrivano dopo questo file e vincerebbero su una classe sola.
 */
@media (max-width: 599px) {
	.wp-block-buttons.zoelia-intestazione__cta {
		display: none;
	}
}

@media (max-width: 600px) {
	.zoelia-lingue > summary {
		padding: 0.4rem 0.45rem;
	}
	.zoelia-lingue__sigla {
		font-size: 0.85rem;
	}
}