/*!
 * Datepicker Gravity Forms 3.
 *
 * Da GF 2.9 il campo Data non usa più il datepicker di jQuery UI ma un
 * calendario proprietario (.gform-datepicker-calendar). Sul sito l'opzione
 * "Output CSS" di Gravity Forms è disattivata, quindi il calendario arriva
 * completamente privo di stile: questo file lo veste con la palette del tema.
 *
 * Serve anche a neutralizzare le classi che il calendario riusa e che
 * collidono con Bootstrap e con main.css (.nav, .btn, .prev, .next, .select).
 */

/* Campo e pulsante di apertura
------------------------------------------------------------------------- */
.ginput_container_date {
	position: relative;
}

/* Gli elementi con attributo hidden tornano visibili perché Bootstrap dà a
   .btn e a kbd un display esplicito: senza questa riga il calendario mostra
   un doppione di anno e mese accanto alle rispettive tendine. */
.ginput_container_date [hidden] {
	display: none;
}

.ginput_container_date input.gform-datepicker {
	padding-right: 42px !important;
}

.ginput_container_date .gform-datepicker-toggle {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #1c68ac;
	cursor: pointer;
	display: flex;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: 34px;
	min-width: 34px;
	padding: 0;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
}

.ginput_container_date .gform-datepicker-toggle:hover {
	color: #144e83;
}

/* Gravity Forms riporta il focus sul pulsante via script, dopo Esc o dopo la
   scelta di una data: serve anche :focus, non solo :focus-visible, altrimenti
   chi ha aperto il calendario con il mouse non vede dove si trova. */
.ginput_container_date .gform-datepicker-toggle:focus {
	color: #144e83;
	outline: 2px solid #1c68ac;
	outline-offset: 1px;
}

.ginput_container_date .gform-datepicker-toggle:focus-visible {
	color: #144e83;
	outline: 2px solid #1c68ac;
	outline-offset: 1px;
}

/* L'icona di default di Gravity Forms usa il font dashicons, che sul front end
   non viene caricato: la sostituiamo con Font Awesome, già presente nel tema.
   Resta un glifo di testo, così eredita currentColor e sopravvive alle
   modalità a contrasto forzato. */
.ginput_container_date .gform-datepicker-toggle-icon--default::before {
	content: "\f073";
	display: inline-block;
	font-family: FontAwesome;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

/* Suggerimento da tastiera: Gravity Forms lo rivela togliendo l'attributo
   hidden. Senza queste regole eredita lo stile kbd di Bootstrap, cioè una
   pillola scura con angoli arrotondati fuori palette. */
.ginput_container_date kbd[id^="keyboardHint_"]:not([hidden]) {
	background-color: #1c68ac;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	display: block;
	font-family: Lato, sans-serif;
	font-size: 12px;
	line-height: 1.4;
	margin-top: 6px;
	max-width: 100%;
	padding: 4px 8px;
	position: static;
	white-space: normal;
}

/* Calendario
------------------------------------------------------------------------- */
.gform-datepicker-calendar {
	background-color: #fff;
	border: 1px solid #8d8d8d;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
	color: #5d5d5d;
	font-family: Lato, sans-serif;
	font-size: 14px;
	left: 0;
	margin-top: 6px;
	max-width: calc(100vw - 30px);
	padding: 12px;
	position: absolute;
	top: 100%;
	width: 288px;
	/* Sopra le navbar fisse di Bootstrap (1030), sotto i modali (1040). */
	z-index: 1035;
}

.gform-datepicker-calendar [hidden] {
	display: none;
}

/* La tabella esce del tutto dal layout tabellare e diventa una griglia di 7
   colonne. Le due righe di intestazione hanno 3 celle invece di 7: lasciandole
   nella tabella il browser le impacchetta in una riga anonima e le larghezze
   delle colonne diventano imprevedibili. La tabella è role="presentation",
   quindi cambiare display non tocca la semantica. */
.gform-datepicker-calendar table.calendar {
	display: block;
	margin: 0;
	max-width: 100%;
	min-width: 196px;
	width: 100%;
}

.gform-datepicker-calendar table.calendar > tbody {
	display: block;
}

.gform-datepicker-calendar table.calendar > tbody > tr {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.gform-datepicker-calendar table.calendar td,
.gform-datepicker-calendar table.calendar th {
	background: none;
	border: 0;
	font-weight: 400;
	padding: 0;
	text-align: center;
	vertical-align: middle;
}

/* Intestazione: selettori di anno e mese
------------------------------------------------------------------------- */
.gform-datepicker-calendar table.calendar > tbody > tr.monthSelector,
.gform-datepicker-calendar table.calendar > tbody > tr.yearSelector {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.gform-datepicker-calendar tr.yearSelector {
	margin-bottom: 4px;
}

.gform-datepicker-calendar tr.monthSelector {
	margin-bottom: 10px;
}

/* height, width, line-height e text-transform azzerano la regola .btn del
   tema, che altrimenti darebbe alle frecce 230x48 px in maiuscolo. */
.gform-datepicker-calendar td.nav.btn {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #1c68ac;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 400;
	height: auto;
	justify-content: center;
	line-height: 1;
	margin: 0;
	min-height: 30px;
	min-width: 30px;
	padding: 0;
	text-transform: none;
	white-space: nowrap;
	width: auto;
}

.gform-datepicker-calendar td.nav.btn:hover {
	background-color: #eaf1f8;
}

.gform-datepicker-calendar td.nav.btn.disabled,
.gform-datepicker-calendar td.nav.btn[aria-disabled="true"] {
	color: #949494;
	cursor: default;
}

.gform-datepicker-calendar td.nav.btn.disabled:hover,
.gform-datepicker-calendar td.nav.btn[aria-disabled="true"]:hover {
	background: none;
}

.gform-datepicker-calendar td.nav.btn:focus {
	outline: 2px solid #1c68ac;
	outline-offset: 2px;
}

.gform-datepicker-calendar td.nav.btn:focus-visible {
	outline: 2px solid #1c68ac;
	outline-offset: 2px;
}

.gform-datepicker-calendar td.month,
.gform-datepicker-calendar td.year {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
	padding: 0 6px;
}

.gform-datepicker-calendar select.nav.select {
	-moz-appearance: menulist;
	-webkit-appearance: menulist;
	appearance: menulist;
	background-color: #fff;
	border: 1px solid #8d8d8d;
	border-radius: 0;
	color: #5d5d5d;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	max-width: 100%;
	min-height: 32px;
	padding: 4px;
	text-transform: none;
	width: 100%;
}

/* Safari su macOS disegna il controllo nativo e ignora il bordo: senza
   outline la tendina resterebbe senza indicatore di focus. */
.gform-datepicker-calendar select.nav.select:focus {
	border-color: #1c68ac;
	outline: 2px solid #1c68ac;
	outline-offset: 1px;
}

/* Griglia dei giorni
------------------------------------------------------------------------- */
.gform-datepicker-calendar th.week {
	align-items: center;
	color: #6f6f6f;
	display: flex;
	font-size: 12px;
	font-weight: 700;
	justify-content: center;
	letter-spacing: .5px;
	min-height: 28px;
	padding: 4px 0;
	text-transform: uppercase;
}

.gform-datepicker-calendar td.day {
	padding: 1px;
}

.gform-datepicker-calendar td.day > span {
	align-items: center;
	background-color: transparent;
	border: 1px solid transparent;
	color: #5d5d5d;
	cursor: pointer;
	display: flex;
	font-size: 14px;
	justify-content: center;
	min-height: 32px;
	width: 100%;
}

.gform-datepicker-calendar td.day:not(.disabled):not(.dayMarked) > span:hover {
	background-color: #eaf1f8;
	color: #144e83;
}

/* Tratteggio per oggi, bordo pieno per il giorno su cui è la tastiera, sfondo
   pieno per la data scelta: i tre stati restano distinguibili anche senza
   percepire il colore. */
.gform-datepicker-calendar td.day[aria-current="date"] > span {
	border-color: #1c68ac;
	border-style: dashed;
	color: #1c68ac;
	font-weight: 700;
}

.gform-datepicker-calendar td.day.selected > span {
	border-color: #1c68ac;
	border-style: solid;
}

.gform-datepicker-calendar td.day.dayMarked > span,
.gform-datepicker-calendar td.day.dayMarked > span:hover {
	background-color: #1c68ac;
	border-color: #1c68ac;
	border-style: solid;
	color: #fff;
}

.gform-datepicker-calendar td.day.disabled > span {
	color: #767676;
	cursor: default;
	text-decoration-color: currentColor;
	text-decoration-line: line-through;
	text-decoration-thickness: 1px;
}

/* Il contorno va sullo span e verso l'esterno, con un alone bianco: sulla data
   già scelta un contorno blu inserito finirebbe sopra uno sfondo blu e
   sarebbe invisibile, proprio sulla cella su cui il calendario apre.
   I giorni ricevono il focus via script, quindi serve anche :focus. */
.gform-datepicker-calendar td.day:focus {
	outline: none;
}

.gform-datepicker-calendar td.day:focus-visible {
	outline: none;
}

.gform-datepicker-calendar td.day:focus > span {
	box-shadow: 0 0 0 2px #fff;
	outline: 2px solid #1c68ac;
	outline-offset: 2px;
	position: relative;
	z-index: 1;
}

.gform-datepicker-calendar td.day:focus-visible > span {
	box-shadow: 0 0 0 2px #fff;
	outline: 2px solid #1c68ac;
	outline-offset: 2px;
	position: relative;
	z-index: 1;
}

/* Testo di aiuto
------------------------------------------------------------------------- */
.gform-datepicker-calendar .monthMessage {
	margin-top: 10px;
}

.gform-datepicker-calendar .monthMessage p {
	color: #6f6f6f;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
}

/* Sotto il breakpoint di Bootstrap il campo occupa tutta la riga: allineiamo
   il calendario al campo invece di ancorarlo a sinistra, così non esce dallo
   schermo quando il campo è vicino al bordo destro. */
@media (max-width: 767px) {
	.gform-datepicker-calendar {
		left: 0;
		max-width: none;
		right: 0;
		width: auto;
	}
}

/* Modalità a contrasto forzato: i colori dichiarati vengono sostituiti e le
   ombre eliminate, quindi gli stati vanno ridefiniti con i colori di sistema.
------------------------------------------------------------------------- */
@media (forced-colors: active) {
	.ginput_container_date .gform-datepicker-toggle {
		color: ButtonText;
	}

	.ginput_container_date .gform-datepicker-toggle:focus,
	.ginput_container_date .gform-datepicker-toggle:focus-visible {
		outline-color: CanvasText;
	}

	.ginput_container_date kbd[id^="keyboardHint_"]:not([hidden]) {
		background-color: Canvas;
		border: 1px solid CanvasText;
		color: CanvasText;
	}

	.gform-datepicker-calendar {
		background-color: Canvas;
		border-color: CanvasText;
		box-shadow: none;
		color: CanvasText;
	}

	.gform-datepicker-calendar td.nav.btn {
		color: ButtonText;
	}

	.gform-datepicker-calendar td.nav.btn:hover {
		background-color: Highlight;
		color: HighlightText;
	}

	.gform-datepicker-calendar td.nav.btn.disabled,
	.gform-datepicker-calendar td.nav.btn[aria-disabled="true"] {
		color: GrayText;
	}

	.gform-datepicker-calendar td.nav.btn:focus,
	.gform-datepicker-calendar td.nav.btn:focus-visible {
		outline-color: CanvasText;
	}

	.gform-datepicker-calendar select.nav.select {
		background-color: Field;
		border-color: FieldText;
		color: FieldText;
	}

	.gform-datepicker-calendar select.nav.select:focus {
		border-color: Highlight;
		outline-color: CanvasText;
	}

	.gform-datepicker-calendar .monthMessage p,
	.gform-datepicker-calendar th.week {
		color: CanvasText;
	}

	.gform-datepicker-calendar td.day > span {
		border-color: Canvas;
		color: CanvasText;
	}

	.gform-datepicker-calendar td.day:not(.disabled):not(.dayMarked) > span:hover {
		background-color: Highlight;
		color: HighlightText;
	}

	.gform-datepicker-calendar td.day[aria-current="date"] > span {
		border-color: CanvasText;
		border-style: dashed;
		color: CanvasText;
	}

	.gform-datepicker-calendar td.day.selected > span {
		border-color: CanvasText;
		border-style: solid;
	}

	.gform-datepicker-calendar td.day.dayMarked > span,
	.gform-datepicker-calendar td.day.dayMarked > span:hover {
		background-color: Highlight;
		border-color: Highlight;
		color: HighlightText;
	}

	.gform-datepicker-calendar td.day.disabled > span {
		color: GrayText;
	}

	.gform-datepicker-calendar td.day:focus > span,
	.gform-datepicker-calendar td.day:focus-visible > span {
		box-shadow: none;
		outline-color: CanvasText;
	}
}