/*
 * Testata a tre colonne (§18, §50) e barra di ricerca.
 */

/*
 * Larghezza delle due colonne laterali della testata: identica per costruzione.
 */
:root { --header-side: 210px; }

/*
 * **Una riga sottilissima chiude la testata, e non occupa spazio.** Un
 * `border-bottom` avrebbe fatto la stessa linea aggiungendo però il proprio
 * pixel all'altezza della barra: centoquattro invece di centotré, e quel pixel
 * non resta lì — `sticky.js` pubblica l'altezza misurata, e da quella dipendono
 * l'aggancio della composizione bloccata sulla pagina dei proprietari e la
 * colonna che si ferma sotto la barra. La linea è quindi disegnata sopra il
 * fondo, in posizione assoluta sul bordo inferiore: a schermo è indistinguibile
 * da un bordo, nella geometria non esiste.
 *
 * Il colore è scritto per esteso — non è un token e non deve diventarlo: è una
 * scelta puntuale su questi due soli filetti, quello sotto la testata e quello
 * sopra il piè di pagina, e i bordi del sito continuano a passare da
 * `--color-border`.
 */
.pms-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--color-surface);
}

.pms-header::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: var(--color-header-rule);

	/* È un segno, non un bersaglio: sotto ci passa il dito come se non ci fosse. */
	pointer-events: none;
}

/*
 * **Il centro non dipende dai lati.** Con tre colonne di larghezza libera, un
 * logo più lungo del gruppo di destra sposterebbe la barra di qualche pixel, e
 * nessuno se ne accorgerebbe guardando: se ne accorge chi misura. Le due colonne
 * laterali hanno quindi la stessa larghezza dichiarata, e la centrale è ciò che
 * resta — geometricamente al centro del contenitore, quale che sia il contenuto.
 */
.pms-header__inner {
	display: grid;
	grid-template-columns: var(--header-side) minmax(0, 1fr) var(--header-side);
	align-items: center;
	column-gap: 16px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.pms-header__brand { justify-self: start; min-width: 0; }
.pms-header__search { justify-self: center; width: 100%; }
.pms-header__actions { justify-self: end; }

/*
 * **Un'altezza, e la larghezza la decide l'immagine.** Fissando solo l'altezza e
 * lasciando `width: auto` il marchio non si può deformare: qualunque logo venga
 * sostituito al predefinito mantiene le proprie proporzioni. Gli attributi
 * `width` e `height` nel markup dichiarano quelle native, così il browser riserva
 * lo spazio giusto prima di scaricare il file e la testata non salta.
 */
.pms-header__logo {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
}

.pms-header__logo img {
	display: block;
	height: clamp(21px, 2vw, 27px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.pms-header__brand img { max-height: 34px; width: auto; }

.pms-header__actions {
	/*
	 * Àncora del pannello del menu. Non la testata: quella è alta quanto la barra
	 * di ricerca e il pannello ne sarebbe caduto quaranta pixel sotto il pulsante,
	 * staccato da ciò che lo apre. Questo gruppo è alto quanto l'hamburger e
	 * finisce dove finisce l'hamburger.
	 */
	position: relative;

	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * L'invito della testata è l'unico pulsante del sito con l'angolo più stretto:
 * `--radius-control` vale per tutti gli altri e non si tocca.
 */
.pms-header__cta { padding: 7px 14px; font-size: var(--step-3); border-radius: 12px; }

.pms-header__menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-control);
	cursor: pointer;
}

.pms-header__menu-bars,
.pms-header__menu-bars::before,
.pms-header__menu-bars::after {
	display: block;
	width: 16px;
	height: 2px;
	background: var(--color-text);
	border-radius: 2px;
}

.pms-header__menu-bars { position: relative; }

.pms-header__menu-bars::before,
.pms-header__menu-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.pms-header__menu-bars::before { top: -5px; }
.pms-header__menu-bars::after { top: 5px; }

/*
 * **Il menu è un pannello che galleggia, non una fascia che allunga la testata.**
 * Prima era una riga a tutta larghezza sotto il marchio: apriva e chiudeva, ma
 * cambiando l'altezza della testata spingeva giù la pagina, e su schermo largo
 * quattro voci si distendevano per millecinquecento pixel.
 *
 * Ora è fuori dal flusso — `absolute` dentro il contenitore della testata, che è
 * il solo elemento a sapere dove cade l'hamburger. Il pannello si àncora al suo
 * stesso bordo destro **a ogni larghezza**, senza che qui si debba ricalcolare la
 * centratura del contenitore: quel conto è già scritto una volta, nel contenitore.
 *
 * Aprendolo la Hero non si sposta di un pixel, perché nulla di ciò che è fuori
 * dal flusso occupa spazio.
 */
.pms-navigation {
	position: absolute;

	/*
	 * Sei pixel sotto il pulsante: abbastanza da leggersi come due oggetti
	 * distinti, troppo pochi perché il pannello sembri appartenere alla pagina
	 * invece che all'hamburger.
	 */
	top: calc(100% + 6px);
	right: 0;
	z-index: 1;

	/*
	 * Larga quanto la voce più lunga, con un minimo che le impedisce di sembrare
	 * un francobollo e un massimo che la tiene dentro lo schermo del telefono.
	 */
	width: max-content;
	min-width: 180px;
	max-width: min(280px, calc(100vw - var(--gutter) * 2));

	padding: 6px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);

	/* Il raggio dei contenitori del progetto, non uno solo per il menu. */
	border-radius: var(--radius-container);

	box-shadow: var(--shadow-popover);
}

/* Le voci sono sempre in colonna: è un menu, non una barra di navigazione. */
.pms-navigation__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: none;
	margin: 0;
	padding: 0;
}

/*
 * Il bersaglio è la riga intera, non la parola: con il riempimento l'area
 * premibile supera i 40 px di altezza e lo sfondo del passaggio del mouse ha una
 * forma, invece di accendersi sulle sole lettere.
 */
.pms-navigation__list a {
	display: block;
	padding: 12px;
	font-size: var(--step-4);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-text);
	border-radius: var(--radius-control);
	transition: background-color var(--motion-fast) ease;
}

/*
 * **La voce si illumina, non cambia colore.** Il testo che passa al colore
 * d'accento sotto il cursore fa sembrare la voce già scelta, e in un elenco di
 * quattro righe accende ogni volta quella sbagliata. Lo stato lo dice il fondo:
 * si vede, non si legge.
 */
.pms-navigation__list a:hover,
.pms-navigation__list a:focus-visible {
	color: var(--color-text);
	background: var(--color-surface-hover);
}

/*
 * Il fondo tenue basta al puntatore, non alla tastiera: chi naviga con `Tab` deve
 * vedere dove si trova senza doverlo cercare, e il contorno resta l'unico segnale
 * che non dipende dal contrasto del fondo.
 */
.pms-navigation__list a:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: 2px;
}

/* La voce della pagina in cui ci si trova non è un link come gli altri. */
.pms-navigation__list .current-menu-item > a,
.pms-navigation__list .current_page_item > a { color: var(--color-primary); }

/*
 * Su telefono la testata guadagna cinque pixel di respiro sopra il marchio. Solo
 * sopra: sotto c'è già il vuoto della pagina, ed è il bordo superiore — quello
 * schiacciato contro la cornice dello schermo — a chiedere aria.
 */
@media (max-width: 640px) {
	.pms-header__inner { padding-top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
	.pms-navigation__list a { transition: none; }
}

/* --------------------------------------------------------- barra di ricerca. */

/*
 * La barra non si allarga per riempire lo spazio: ha una larghezza propria e sta
 * al centro. Una barra distesa da un capo all'altro della finestra allontana i
 * campi fra loro senza aggiungere nulla, e su schermi larghi la ricerca diventa
 * un gesto da compiere con il braccio.
 */
.pms-searchbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}

.pms-searchbar--compact { gap: 5px; max-width: 620px; }

/* Lo switch sta sopra la barra, e sopra il suo centro. */
.pms-searchbar__kind {
	display: inline-flex;
	gap: 3px;
	margin: 0;
	padding: 2px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-surface-soft);
	align-self: center;
}

.pms-searchbar__kind-label {
	padding: 3px 12px;
	font-size: var(--step-3);
	font-weight: 700;
	color: var(--color-muted-strong);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.pms-searchbar__kind-input:checked + .pms-searchbar__kind-label {
	background: var(--color-accent);
	color: var(--color-on-accent);
}

.pms-searchbar__kind-input:focus-visible + .pms-searchbar__kind-label {
	outline: 2px solid var(--color-outline);
	outline-offset: 2px;
}

.pms-searchbar__fields {
	display: flex;
	align-items: flex-end;
	gap: 0;
	width: 100%;
	padding: 6px;
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-container);
	box-shadow: var(--shadow-soft);
}

/* La località è la domanda più lunga: le altre stanno in meno spazio. */
.pms-searchbar__field {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	padding: 3px 14px;
	border-right: 1px solid var(--color-border);
}

.pms-searchbar__field:last-of-type { border-right: 0; }
.pms-searchbar__field:first-of-type { flex: 1.6 1 0; }
.pms-searchbar__field--guests { flex: 0.7 1 0; }

.pms-searchbar__label {
	display: block;
	font-size: var(--step-1);
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.pms-searchbar__control {
	width: 100%;
	padding: 2px 0;
	font: inherit;
	font-size: var(--step-4);
	color: var(--color-text);
	background: transparent;
	border: 0;
}

.pms-searchbar__control:focus { outline: none; }

/*
 * **La selezione di riserva non sembra una selezione.** Il campo «Dove» della
 * barra a pannelli è un controllo del sito con il proprio elenco; questo
 * `select` è il gemello che invia il criterio, e si vede soltanto dove i
 * pannelli non ci sono — senza JavaScript, o sulle larghezze in cui la barra
 * mostra i campi di riserva. Anche lì deve leggersi come gli altri campi: nessun
 * fondo grigio di sistema, il carattere del sito, la freccia disegnata in linea.
 */
select.pms-searchbar__control {
	appearance: none;
	padding-inline-end: 18px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23111'%3E%3Cpath d='M480-361.85 253.85-588 296-630.15l184 184 184-184L706.15-588 480-361.85Z'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 14px 14px;
	cursor: pointer;
	text-overflow: ellipsis;
}

/* Senza località a catalogo non c'è nulla da scegliere, e si vede. */
select.pms-searchbar__control:disabled {
	color: var(--color-muted);
	cursor: not-allowed;
	opacity: 1;
}

.pms-searchbar__field:focus-within {
	background: var(--color-surface-hover);
	border-radius: var(--radius-control);
}

/*
 * Il pulsante del ripiego senza JavaScript è **identico** a quello della barra a
 * pannelli: stessa forma, stessa icona, stessa area premibile. Due pulsanti
 * diversi per la stessa azione sarebbero due cose da mantenere allineate.
 */
.pms-searchbar__submit {
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0 6px;
	padding: 0;
	color: var(--color-on-primary);
	background: var(--color-primary);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.pms-searchbar__submit:hover { background: var(--color-primary-hover); }
.pms-searchbar__submit:active { background: var(--color-primary-active); transform: scale( 0.96 ); }

.pms-searchbar__submit:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: 3px;
}

.pms-searchbar__submit svg { display: block; }

@media (max-width: 1080px) {
	:root { --header-side: auto; }
	.pms-header__inner { grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "search search"; row-gap: 8px; }
	.pms-header__brand { grid-area: brand; }
	.pms-header__actions { grid-area: actions; justify-content: flex-end; }
	.pms-header__search { grid-area: search; }
}

/*
 * Sotto i 900 px la barra **esce dalla testata**. A quella larghezza andrebbe a
 * capo su tre righe e la testata sfiorerebbe i trecento pixel: su uno schermo
 * alto ottocento, una testata appiccicata che ne occupa un terzo non è una
 * comodità. La ricerca resta dove serve — la homepage e la pagina di ricerca —
 * e la testata torna a essere una testata.
 */
@media (max-width: 900px) {
	.pms-header__search { display: none; }
	.pms-header__inner { grid-template-columns: 1fr auto; grid-template-areas: "brand actions"; }

	.pms-searchbar__fields { flex-wrap: wrap; border-radius: var(--radius-container); }
	.pms-searchbar__field { flex: 1 1 45%; border-right: 0; }
	/* La località è la domanda più lunga: a metà riga il segnaposto si tronca. */
	.pms-searchbar__field:first-of-type { flex: 1 1 100%; }
	.pms-searchbar__submit { margin-left: auto; }
}

/*
 * **L'invito resta anche senza la barra.** Sotto i 900 px era nascosto perché la
 * ricerca gli stava accanto e i tre elementi non entravano in riga; ora la barra
 * esce dalla testata e lo spazio c'è. Sotto i 420 px si stringe invece di
 * sparire: è l'unica porta d'ingresso per chi possiede una casa, e nasconderla
 * sul dispositivo più usato la chiude a metà del pubblico.
 */
.pms-header__cta { white-space: nowrap; }

@media (max-width: 420px) {
	.pms-header__cta { padding: 7px 11px; font-size: var(--step-2); }
}

/* ------------------------------- la barra a pannelli dentro la ricerca. */

/*
 * Nella testata e nella homepage la barra prende la forma allungata della
 * ricerca: una riga sola, il pulsante in fondo, il campo località più largo
 * perché la domanda che ospita è la più lunga.
 */
.pms-searchbar .pms-bar { width: 100%; margin: 0; }

/*
 * **Quattro colonne, non cinque.** Dove, Quando, Chi e il pulsante: quando le
 * due date erano due controlli distinti le colonne erano cinque, e unendole il
 * pulsante è scivolato in una colonna larga come gli altri campi — da lì il
 * rettangolo grande. L'ultima resta `auto`: al pulsante serve lo spazio
 * dell'icona, non una frazione della barra.
 */
.pms-searchbar .pms-bar__row--search {
	grid-template-columns: 1.6fr 1fr 1fr auto;
	padding-right: 0;
	align-items: stretch;
	box-shadow: var(--shadow-soft);
}

/*
 * **Senza la domanda sulle date le colonne sono tre.** Spente le prenotazioni
 * online la barra chiede solo dove e per quante persone: lasciando le quattro
 * colonne di prima il pulsante scivolava in una colonna larga come un campo, e
 * accanto restava un vuoto che sembrava un pezzo mancante.
 *
 * **Pesa quanto la regola che corregge, non di più.** Sopra c'è la barra a
 * quattro colonne di questo stesso foglio, che questa riga supera perché viene
 * dopo; sotto — nel pannello di ricerca del telefono, che ha un foglio suo e
 * arriva più tardi — i tre controlli tornano a impilarsi, ed è giusto così.
 * Alzare la specificità per «vincere e basta» avrebbe rotto proprio quello.
 */
.pms-bar[data-pms-dates="no"] .pms-bar__row--search {
	grid-template-columns: 1.6fr 1fr auto;
}

.pms-bar__control--text { cursor: text; }

.pms-bar__input {
	width: 100%;
	padding: 0;
	font: inherit;
	font-size: var(--step-4);
	font-weight: 700;
	color: var(--color-text);
	background: transparent;
	border: 0;
}

.pms-bar__input:focus { outline: none; }

.pms-bar__control--text:focus-within { background: var(--color-surface-hover); }

/*
 * **Un cerchio attorno all'icona, e nient'altro.** Il contenitore non deve
 * occupare più dello stretto necessario: è l'icona ad avere un fondo, non la
 * colonna. Quaranta pixel di diametro restano sopra la soglia in cui un dito
 * trova il bersaglio, senza che il controllo si veda grande.
 */
.pms-bar__search {
	align-self: center;
	justify-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	margin: 0 6px;
	padding: 0;
	color: var(--color-on-primary);
	background: var(--color-primary);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}

.pms-bar__search:hover { background: var(--color-primary-hover); }
.pms-bar__search:active { background: var(--color-primary-active); transform: scale( 0.96 ); }

.pms-bar__search:focus-visible {
	outline: 2px solid var(--color-outline);
	outline-offset: 3px;
}

.pms-bar__search svg { display: block; }

/*
 * **Il nome del pulsante è scritto ma non si vede, e la regola sta qui.** Il
 * pulsante è disegnato in questo foglio, che ogni pagina carica: la riga che ne
 * nasconde l'etichetta deve stare accanto a lui, non nel foglio di un altro
 * componente. Ci era finita, e su tutte le pagine che quel componente non
 * caricano — le schede, i testi, i proprietari — la parola «Cerca» compariva
 * dentro il cerchio da quaranta pixel. Chi vuole mostrarla la riaccende a casa
 * propria.
 */
.pms-bar__search-text { display: none; }

/*
 * **Resta un cerchio anche qui.** Su schermo stretto la barra va a capo, ma il
 * pulsante non diventa una barra a tutta larghezza: allargarlo lo trasformerebbe
 * nell'elemento più grande della ricerca, cioè in ciò che si preme per sbaglio.
 * Cresce invece a 44 px, che è la misura in cui un dito lo trova.
 */
@media (max-width: 900px) {
	.pms-searchbar .pms-bar__row--search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pms-bar[data-pms-dates="no"] .pms-bar__row--search { grid-template-columns: 1fr auto; }
	.pms-searchbar .pms-bar__control--text { grid-column: 1 / -1; }

	.pms-bar__search {
		grid-column: 2;
		justify-self: end;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		margin: 6px 0;
	}
}