/* TMT Calendar - date picker behind "#tmt-calendar" links (see includes/date-picker.php). */

.tmt-picker {
	--tp-orange: #EB6909;
	--tp-orange-dark: #D45F08;
	--tp-orange-soft: #F6C7A2;
	--tp-green: #2E520F;
	--tp-ink: #162B32;
	--tp-body: #4A4A4A;
	--tp-peach: #FEEBDC;
	--tp-cream: #FFF5EC;
	--tp-sage: #D1D6D2;
	--tp-dark: #1C1C1C;
	--tp-pad: 28px;
	/* The visitor's selection: orange for trail running (and until a trip is
	   known), green for trekking - set by .is-trail / .is-trek. */
	--tp-acc: var(--tp-orange);
	--tp-acc-soft: #FCE1CC;
	/* Height left for the six week rows once the head, month bar, weekday
	   row, legend and footer are drawn: the day cells grow into it, so a
	   month fits without scrolling on an ordinary laptop screen. */
	--tp-avail: calc(100vh - 456px);
	--tp-avail: calc(100dvh - 456px);

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	font-family: "Barlow", sans-serif;
	color: var(--tp-body);
	-webkit-font-smoothing: antialiased;
}

.tmt-picker.is-trek {
	--tp-acc: var(--tp-green);
	--tp-acc-soft: #DDE7D3;
}

.tmt-picker[hidden] {
	display: none !important;
}

.tmt-picker-lock,
.tmt-picker-lock body {
	overflow: hidden !important;
}

/* Hello's reset gives every button a pink border and a pink hover. */
.tmt-picker button {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	letter-spacing: inherit;
	text-transform: none;
	cursor: pointer;
}

.tmt-picker button:hover,
.tmt-picker button:focus {
	background: none;
	color: inherit;
}

.tmt-picker button:focus-visible,
.tmt-picker a:focus-visible,
.tmt-picker__panel:focus-visible {
	outline: 2px solid var(--tp-ink);
	outline-offset: 2px;
}

.tmt-picker__panel:focus {
	outline: none;
}

.tmt-picker h2,
.tmt-picker h3,
.tmt-picker h4,
.tmt-picker p,
.tmt-picker ul {
	margin: 0;
	padding: 0;
}

/* ----------------------------------------------------------- frame */

.tmt-picker__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 13, 10, 0.62);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tmt-picker.is-open .tmt-picker__backdrop {
	opacity: 1;
}

.tmt-picker__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--tp-peach);
	box-shadow: 0 30px 80px rgba(11, 13, 10, 0.35);
}

/* Popup: a window in the middle of the screen. */
.tmt-picker--popup {
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.tmt-picker--popup .tmt-picker__panel {
	max-width: 1180px;
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	opacity: 0;
	transform: translateY(14px) scale(0.985);
	transition: opacity 0.26s ease, transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tmt-picker--popup.is-open .tmt-picker__panel {
	opacity: 1;
	transform: none;
}

/* Slide up: a full-width panel from the bottom. */
.tmt-picker--slide {
	align-items: flex-end;
	--tp-avail: calc(92vh - 390px);
	--tp-avail: calc(92dvh - 390px);
}

.tmt-picker--slide .tmt-picker__panel {
	max-height: 92vh;
	max-height: 92dvh;
	border-top: 4px solid var(--tp-orange);
	transform: translateY(100%);
	transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
	--tp-pad: max(28px, calc((100% - 1400px) / 2));
}

.tmt-picker--slide.is-open .tmt-picker__panel {
	transform: none;
}

/* ----------------------------------------------------------- head */

.tmt-picker__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 24px var(--tp-pad) 10px;
}

.tmt-picker__kicker {
	font-family: "Jost", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tp-orange);
}

.tmt-picker .tmt-picker__title {
	margin-top: 6px;
	font-family: "Jost", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--tp-ink);
}

.tmt-picker__trip {
	margin-top: 8px !important;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--tp-green);
}

.tmt-picker .tmt-picker__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -6px -10px 0 0;
	color: var(--tp-ink);
	transition: background-color 0.15s ease;
}

.tmt-picker .tmt-picker__close:hover {
	background: rgba(22, 43, 50, 0.08);
	color: var(--tp-ink);
}

/* ----------------------------------------------------------- body */

.tmt-picker__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 28px;
	align-items: start;
	padding: 8px var(--tp-pad) 16px;
}

.tmt-picker__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.tmt-picker .tmt-picker__month {
	font-family: "Jost", sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tp-ink);
	text-align: center;
}

.tmt-picker .tmt-picker__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(22, 43, 50, 0.22);
	color: var(--tp-ink);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tmt-picker .tmt-picker__arrow:hover:not(:disabled) {
	border-color: var(--tp-orange);
	background: var(--tp-cream);
	color: var(--tp-ink);
}

.tmt-picker .tmt-picker__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.tmt-picker__weekdays,
.tmt-picker__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 6px;
}

.tmt-picker__weekdays {
	margin: 16px 0 8px;
	font-family: "Jost", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	color: #6B7066;
}

.tmt-picker__grid {
	transition: opacity 0.2s ease;
}

.tmt-picker__grid.is-loading {
	opacity: 0.45;
}

.tmt-picker .tmt-picker__day {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 3px;
	height: clamp(62px, calc(var(--tp-avail) / 6), 100px);
	min-width: 0;
	padding: 5px 6px;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 6px;
	text-align: left;
	background: var(--tp-cream);
	font-family: "Jost", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--tp-ink);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tmt-picker__num {
	align-self: flex-start;
	line-height: 16px;
}

.tmt-picker .tmt-picker__day.is-open:hover {
	border-color: var(--tp-acc);
	background: var(--tp-cream);
	color: var(--tp-ink);
}

.tmt-picker .tmt-picker__day.is-busy {
	background: #E6E5E0;
	color: #8A8E86;
}

.tmt-picker .tmt-picker__day.is-busy:hover {
	background: #DCDDD7;
	color: #8A8E86;
}

.tmt-picker .tmt-picker__day.is-past {
	background: transparent;
	color: rgba(22, 43, 50, 0.28);
	cursor: default;
}

/* A group of this trip leaves that day and can be joined: a ring in the
   trip's colour. */
.tmt-picker .tmt-picker__day.has-dep,
.tmt-picker .tmt-picker__day.has-dep:hover {
	background: var(--tp-cream);
	color: var(--tp-ink);
	box-shadow: inset 0 0 0 2px var(--tp-acc);
}

.tmt-picker .tmt-picker__day.is-today .tmt-picker__num {
	box-shadow: inset 0 -2px 0 var(--tp-orange);
	padding-bottom: 1px;
}

/* The day the side panel is talking about, when nothing can start on it. */
.tmt-picker .tmt-picker__day.is-chosen,
.tmt-picker .tmt-picker__day.is-chosen:hover {
	box-shadow: inset 0 0 0 2px var(--tp-ink);
}

/* The visitor's dates, in the trip's colour: green for trekking, orange for
   trail running. */
.tmt-picker .tmt-picker__day.in-range,
.tmt-picker .tmt-picker__day.in-range:hover {
	background: var(--tp-acc-soft);
	color: var(--tp-ink);
	box-shadow: none;
}

.tmt-picker .tmt-picker__day.is-start,
.tmt-picker .tmt-picker__day.is-end,
.tmt-picker .tmt-picker__day.is-start:hover,
.tmt-picker .tmt-picker__day.is-end:hover {
	background: var(--tp-acc);
	border-color: var(--tp-acc);
	color: #FFFFFF;
	box-shadow: none;
}

/* ----------------------------------------------------------- trip pills */

.tmt-picker__chips {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* Trail running orange, trekking green. The day a group leaves: solid. While
   it is out: tinted. The day it comes back: dashed outline. */
.tmt-picker__chip {
	--chip: var(--tp-orange);
	--chip-ink: #A94A05;
	--chip-tint: #F8D2B3;

	display: block;
	overflow: hidden;
	padding: 0 7px;
	border-radius: 8px;
	font-family: "Barlow", sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 15px;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--chip-ink);
}

.tmt-picker__chip.is-trek {
	--chip: var(--tp-green);
	--chip-ink: var(--tp-green);
	--chip-tint: #CCDBBF;
}

.tmt-picker__chip.is-ink {
	--chip: var(--tp-ink);
	--chip-ink: var(--tp-ink);
	--chip-tint: #D5D8D6;
}

.tmt-picker__chip.is-leaving {
	background: var(--chip);
	color: #FFFFFF;
	font-weight: 700;
}

.tmt-picker__chip.is-out {
	background: var(--chip-tint);
}

.tmt-picker__chip.is-return {
	border: 1px dashed var(--chip);
	line-height: 13px;
}

.tmt-picker__chips.is-single .tmt-picker__chip {
	display: -webkit-box;
	white-space: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.tmt-picker__chip.is-more {
	padding: 0;
	border: 0;
	background: none;
	color: var(--tp-body);
}

/* On the visitor's own start and end days (solid colour) the pills turn light. */
.tmt-picker__day.is-start .tmt-picker__chip,
.tmt-picker__day.is-end .tmt-picker__chip {
	color: #FFFFFF;
}

.tmt-picker__day.is-start .tmt-picker__chip.is-leaving,
.tmt-picker__day.is-end .tmt-picker__chip.is-leaving {
	background: #FFFFFF;
	color: var(--chip-ink);
}

.tmt-picker__day.is-start .tmt-picker__chip.is-out,
.tmt-picker__day.is-end .tmt-picker__chip.is-out {
	background: rgba(255, 255, 255, 0.24);
}

.tmt-picker__day.is-start .tmt-picker__chip.is-return,
.tmt-picker__day.is-end .tmt-picker__chip.is-return {
	border-color: rgba(255, 255, 255, 0.85);
}

/* ----------------------------------------------------------- legend */

.tmt-picker__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	margin-top: 12px;
	font-size: 14px;
	color: var(--tp-body);
}

.tmt-picker__keys {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	list-style: none;
}

.tmt-picker__keys li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.tmt-picker__keys--pills {
	gap: 6px 8px;
}

.tmt-picker__keys--pills .tmt-picker__chip {
	display: inline-block;
	padding: 1px 9px;
	font-size: 12px;
	line-height: 16px;
}

.tmt-picker__keys--pills .tmt-picker__chip.is-return {
	line-height: 14px;
}

.tmt-picker__key {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--tp-cream);
	border: 1px solid rgba(22, 43, 50, 0.15);
}

.tmt-picker__key.has-dep {
	border: 2px solid var(--tp-acc);
}

.tmt-picker__key.is-busy {
	background: #E6E5E0;
	border-color: transparent;
}

/* ----------------------------------------------------------- info */

.tmt-picker__info {
	padding: 20px;
	background: var(--tp-cream);
	border-top: 3px solid var(--tp-orange);
	font-size: 16px;
	line-height: 1.55;
}

.tmt-picker__status > * + * {
	margin-top: 10px !important;
}

.tmt-picker .tmt-picker__info-title {
	font-family: "Jost", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--tp-ink);
}

.tmt-picker__note {
	font-size: 14px;
	color: var(--tp-green);
}

.tmt-picker__hint {
	color: var(--tp-body);
}

.tmt-picker .tmt-picker__link {
	display: inline;
	font-family: "Barlow", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: var(--tp-orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tmt-picker .tmt-picker__link:hover {
	color: var(--tp-orange-dark);
}

.tmt-picker__error {
	color: #9B2C1F;
}

.tmt-picker__list {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid rgba(22, 43, 50, 0.12);
}

.tmt-picker .tmt-picker__list-title {
	margin-bottom: 10px;
	font-family: "Jost", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tp-green);
}

.tmt-picker__deps {
	display: grid;
	gap: 10px;
	list-style: none;
}

.tmt-picker__dep {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px 14px;
	border-radius: 0 6px 6px 0;
	background: var(--tp-peach);
	border-left: 4px solid var(--tp-orange);
}

.tmt-picker__dep.is-trek {
	border-left-color: var(--tp-green);
}

/* Out on the chosen day or the visitor's dates, or the group being joined. */
.tmt-picker__dep.is-on-day {
	box-shadow: inset 0 0 0 2px var(--tp-ink);
}

.tmt-picker__dep-name {
	font-family: "Jost", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--tp-ink);
}

.tmt-picker__dep-meta {
	font-size: 14px;
	line-height: 1.4;
	color: var(--tp-body);
}

.tmt-picker__dep-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 8px;
}

.tmt-picker__tag {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-family: "Jost", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #FFFFFF;
	background: var(--tp-green);
}

.tmt-picker__tag--last_spots {
	background: var(--tp-orange);
}

.tmt-picker__tag--full {
	background: #6B7066;
}

.tmt-picker .tmt-picker__book {
	flex: 0 0 auto;
	display: inline-block;
	padding: 9px 14px;
	background: var(--tp-orange);
	font-family: "Jost", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
	transition: background-color 0.15s ease;
}

.tmt-picker .tmt-picker__book.is-ghost {
	padding: 7px 12px;
	border: 2px solid var(--tp-acc);
	background: transparent;
	color: var(--tp-ink);
	cursor: pointer;
}

.tmt-picker .tmt-picker__book.is-ghost:hover {
	background: var(--tp-acc);
	color: #FFFFFF;
}

.tmt-picker .tmt-picker__book:hover {
	background: var(--tp-orange-dark);
	color: #FFFFFF;
}

/* ----------------------------------------------------------- foot */

.tmt-picker__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 16px var(--tp-pad);
	background: var(--tp-dark);
}

.tmt-picker__summary {
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: #FFFFFF;
}

.tmt-picker .tmt-picker__go {
	flex: 0 0 auto;
	display: inline-block;
	padding: 16px 34px;
	background: var(--tp-orange);
	font-family: "Jost", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: #FFFFFF;
	transition: background-color 0.15s ease;
}

.tmt-picker .tmt-picker__go:hover {
	background: var(--tp-orange-dark);
	color: #FFFFFF;
}

.tmt-picker .tmt-picker__go[aria-disabled="true"] {
	background: #4A4A4A;
	color: rgba(255, 255, 255, 0.55);
	cursor: not-allowed;
}

/* ----------------------------------------------------------- smaller screens */

/* Wide screens: the month and the side panel scroll on their own, so the
   calendar stays in view while the list of groups is read. */
@media (min-width: 1101px) {
	.tmt-picker__body {
		overflow: hidden;
		grid-template-rows: minmax(0, 1fr);
		align-items: stretch;
	}

	.tmt-picker__cal,
	.tmt-picker__info {
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* Tablets: the side panel moves under the month, so the days keep their width. */
@media (max-width: 1100px) {
	.tmt-picker__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.tmt-picker__deps {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}
}

/* Phones: day cells are too small for names; each trip is a bar. */
@media (max-width: 700px) {
	.tmt-picker .tmt-picker__day {
		align-items: center;
		justify-content: center;
		height: auto;
		min-height: 40px;
		aspect-ratio: 4 / 3;
		padding: 0;
	}

	.tmt-picker__num {
		align-self: center;
	}

	.tmt-picker__chips {
		position: absolute;
		left: 4px;
		right: 4px;
		bottom: 4px;
		gap: 2px;
	}

	/* Bars in the trip's colour: full on the day it leaves, faded after. */
	.tmt-picker .tmt-picker__chips .tmt-picker__chip {
		display: block;
		height: 3px;
		padding: 0;
		border: 0;
		border-radius: 2px;
		font-size: 0;
		line-height: 0;
		white-space: nowrap;
		background: var(--chip);
		opacity: 0.4;
	}

	.tmt-picker .tmt-picker__chips .tmt-picker__chip.is-leaving {
		opacity: 1;
	}

	.tmt-picker .tmt-picker__day.is-start .tmt-picker__chips .tmt-picker__chip,
	.tmt-picker .tmt-picker__day.is-end .tmt-picker__chips .tmt-picker__chip {
		background: #FFFFFF;
	}
}


@media (max-width: 600px) {
	.tmt-picker {
		--tp-pad: 18px;
	}

	.tmt-picker--slide .tmt-picker__panel {
		--tp-pad: 18px;
		max-height: 94vh;
		max-height: 94dvh;
	}

	.tmt-picker--popup {
		padding: 10px;
	}

	.tmt-picker--popup .tmt-picker__panel {
		max-height: calc(100vh - 20px);
		max-height: calc(100dvh - 20px);
	}

	.tmt-picker__head {
		padding-top: 18px;
	}

	.tmt-picker .tmt-picker__title {
		font-size: 24px;
	}

	.tmt-picker__trip {
		font-size: 16px;
	}

	.tmt-picker__weekdays,
	.tmt-picker__grid {
		gap: 4px;
	}

	.tmt-picker .tmt-picker__day {
		aspect-ratio: 1 / 1;
		font-size: 15px;
	}

	.tmt-picker__info {
		padding: 16px;
	}

	.tmt-picker__foot {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding-top: 12px;
		padding-bottom: 14px;
	}

	.tmt-picker__summary {
		font-size: 15px;
		text-align: center;
	}

	.tmt-picker .tmt-picker__go {
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tmt-picker__backdrop,
	.tmt-picker__panel,
	.tmt-picker .tmt-picker__day {
		transition: none !important;
	}

	.tmt-picker--popup .tmt-picker__panel,
	.tmt-picker--slide .tmt-picker__panel {
		transform: none;
	}
}