/*
------------------------------------------------------------
	Home page (default.aspx): search box, listings and map.
	Loaded after dcDesign.css, site.css and map2.css (the
	header, footer and colour variables are in site.css);
	everything is scoped to body.homePage so other pages are
	unaffected.

	List and Legend buttons above the map open one panel at a
	time; with neither pressed only the map shows.
	Phones   (< 640px):  the panel shows instead of the map
	Tablets  (640-959):  map on top, the panel below it
	Desktops (>= 960px): the panel beside the map
------------------------------------------------------------
*/

body.homePage
{
	color: var(--text);
}

body.homePage *,
body.homePage *::before,
body.homePage *::after
{
	box-sizing: border-box;
}

body.homePage a,
body.homePage a:link,
body.homePage a:hover
{
	color: var(--teal);
}

body.homePage div#container
{
	width: auto;
	max-width: 1312px;    /* 1280px of content */
	margin-bottom: 0;
	padding: 0 16px;
}

/* the footer (site.css) follows straight after the map */
body.homePage div#content
{
	padding: 24px 0 0 0;
	min-height: 0;
}

/* ---------- title and search ---------- */

body.homePage .homeTitle
{
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

body.homePage .homeTitleIcon
{
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--plum);
	background-color: var(--lilac);
	border-radius: 50%;
}

body.homePage .homeTitle h1
{
	margin: 0;
	font-size: 200%;
	color: var(--plum);
}

body.homePage .homeSearch
{
	display: flex;
	width: 100%;
}

body.homePage .homeSearch .searchBox,
body.homePage .homeSearch .watermarked
{
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 44px;
	padding: 6px 12px;
	font-size: 110%;
	text-align: left;    /* the old stylesheets centre it */
	color: var(--text);
	background: #ffffff;
	border: 2px solid var(--teal);
	border-right: 0;
	border-radius: 6px 0 0 6px;
	outline: none;
}

body.homePage .homeSearch .watermarked
{
	color: #8A8A92;
}

body.homePage .homeSearch .searchBox:focus
{
	box-shadow: 0 0 0 3px rgba(15, 124, 128, 0.2);
}

body.homePage .homeSearch .searchBtn
{
	flex: 0 0 auto;
	width: auto;
	height: 44px;
	padding: 0 22px;
	font-size: 110%;
	font-family: verdana, helvetica;
	text-transform: none;
	color: #ffffff;
	background-color: var(--teal);
	border: 2px solid var(--teal);
	border-radius: 0 6px 6px 0;
	cursor: pointer;
}

body.homePage .homeSearch .searchBtn:hover,
body.homePage .homeSearch .searchBtn:focus
{
	background-color: #0B6266;
	border-color: #0B6266;
}

body.homePage .waitStatus
{
	text-align: center;
	min-height: 1.6em;
	margin: 10px 0 8px 0;
	font-size: 80%;
	color: var(--plum);
}

/* ---------- List and Legend buttons ---------- */

body.homePage .homeChip
{
	height: 40px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: bold 13px verdana, helvetica, sans-serif;
	color: var(--teal);
	background-color: #ffffff;
	border: 2px solid var(--border);
	border-radius: 20px;
	cursor: pointer;
	white-space: nowrap;
}

body.homePage .homeChip:hover
{
	border-color: var(--teal);
}

body.homePage .homeChip.homeChipOn
{
	color: #ffffff;
	background-color: var(--teal);
	border-color: var(--teal);
}

body.homePage .homeChip svg
{
	flex: 0 0 auto;
}

/* Legend is an icon only */
body.homePage .homeChip.homeChipIcon
{
	min-width: 52px;
	justify-content: center;
}

body.homePage .homeTabs
{
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

/* ---------- listings and map ---------- */

body.homePage .homeMapLayout
{
	display: flex;
	gap: 16px;
	align-items: stretch;
	/* ends 16px above the bottom of the window (the search area above it is 315px tall) */
	height: clamp(360px, calc(100vh - 331px), 860px);
	height: clamp(360px, calc(100dvh - 331px), 860px);
}

body.homePage .homeSidebar
{
	flex: 0 0 330px;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

body.homePage .homeMap
{
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
}

/* a small spinner over the map while results load; it shows only if they take more than 0.3s */
body.homePage .homeMap::after
{
	content: "";
	position: absolute;
	top: 12px;
	left: 50%;
	z-index: 1050;    /* above the map, below the phone cards */
	width: 30px;
	height: 30px;
	margin-left: -15px;
	box-sizing: border-box;
	background-color: #ffffff;
	border: 3px solid rgba(15, 124, 128, 0.2);
	border-top-color: var(--teal);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	animation: homeSpin 0.8s linear infinite;
}

body.homePage .homeMap.mapLoading::after
{
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease 0.3s, visibility 0s linear 0.3s;
}

body.homePage .myMapClass
{
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 6px;
}

/* neither List nor Legend pressed: just the map */
body.homePage .panelClosed .homeSidebar
{
	display: none;
}

body.homePage .homeTabPanels
{
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 6px;
	background-color: #ffffff;
}

body.homePage #pvListings
{
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

body.homePage #pvLegend
{
	padding: 0 12px 12px 12px;
}

body.homePage #pvLegend h2
{
	margin: 12px 0 8px 0;
	font-size: 120%;
}

body.homePage .homeLegend
{
	width: 100%;
	font-size: 90%;
}

body.homePage div#containerDiv
{
	flex: 1 1 auto;
	width: auto;
	height: auto;
	min-height: 0;
	padding: 8px;
	overflow-y: auto;
}

body.homePage .listing
{
	width: 100%;
	border-radius: 4px;
}

body.homePage .listing:hover,
body.homePage .listingHighlight
{
	background-color: var(--lilac);
}

body.homePage .listingTitle
{
	color: var(--plum);
}

body.homePage .listingDescription
{
	color: var(--muted);
}

body.homePage .listing hr
{
	border: 0;
	border-top: 1px solid var(--line);
	margin: 8px 0 0 0;
}

/* the ad fills the width of the list */
body.homePage .homeAd
{
	width: 100%;
	margin: 10px 0;
	text-align: center;
}

/* fixed ad sizes: a size AdSense picks itself would also resize the layout around it */
body.homePage .homeAdUnit
{
	display: inline-block;
	width: 300px;
	height: 250px;
}

/* small phones: the list is narrower than 300px */
@media (max-width: 339px)
{
	body.homePage .homeAdUnit
	{
		width: 250px;
		height: 250px;
	}
}

/* tablets in landscape: the list under the map is wide enough for a leaderboard */
@media (min-width: 780px) and (max-width: 959px)
{
	body.homePage .homeAdUnit
	{
		width: 728px;
		height: 90px;
	}
}

/* ---------- only used on phones: swipe cards ---------- */

body.homePage #mapCards
{
	display: none;
}

/* ---------- round map markers (map.aspx.js), also in the list and legend ---------- */

/* the marker's 44px tap area, with the visible dot centred in it */
body.homePage .dcDotIcon
{
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
}

/* most info: teal dot; less info (mapDotSmall): smaller white dot; selected (mapDotOn): plum */
body.homePage .mapDot
{
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font: bold 13px verdana, helvetica, sans-serif;
	color: #ffffff;
	background-color: var(--teal);
	border: 2px solid #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* centred in the legend's cells */
body.homePage .homeLegend .mapDot
{
	display: inline-flex;
}

body.homePage .mapDot.mapDotSmall
{
	width: 28px;
	height: 28px;
	font-size: 11px;
	color: var(--teal);
	background-color: #ffffff;
	border-color: var(--teal);
}

body.homePage .mapDot.mapDotOn
{
	width: 40px;
	height: 40px;
	font-size: 15px;
	color: #ffffff;
	background-color: var(--plum);
	border: 3px solid #ffffff;
	box-shadow: 0 0 0 4px rgba(91, 46, 87, 0.3), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* several points too close to tap apart */
body.homePage .mapCluster
{
	width: 46px;
	height: 46px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: bold 16px verdana, helvetica, sans-serif;
	color: var(--plum);
	background-color: var(--lilac);
	border: 3px solid var(--plum);
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(91, 46, 87, 0.18), 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.homePage .mapCluster.mapClusterOn
{
	color: #ffffff;
	background-color: var(--plum);
	border-color: #ffffff;
}

/* ---------- smoother changes ---------- */

@keyframes homeSpin
{
	to { transform: rotate(360deg); }
}

@keyframes homeFadeIn
{
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes homeDotIn
{
	from { opacity: 0; transform: scale(0.6); }
	to { opacity: 1; transform: none; }
}

/* a panel, or on phones the map, that has just appeared (map.aspx.js fadeIn) */
body.homePage .homeFadeIn
{
	animation: homeFadeIn 0.25s ease-out;
}

/* map points and listings that weren't there before the map moved */
body.homePage .dcDotNew .mapDot,
body.homePage .dcDotNew .mapCluster
{
	animation: homeDotIn 0.3s ease-out;
}

body.homePage .listingNew
{
	animation: homeFadeIn 0.3s ease-out;
}

/* desktops: the panel slides in and out beside the map instead of appearing at once */
@media (min-width: 960px)
{
	body.homePage .homeSidebar
	{
		overflow: hidden;
	}

	/* the panel keeps its width while it slides, so the list doesn't reflow */
	body.homePage .homeTabPanels
	{
		width: 330px;
	}

	body.homePage .panelClosed .homeSidebar
	{
		display: flex;
		flex-basis: 0;
		margin-right: -16px;    /* and the gap beside it */
		opacity: 0;
		visibility: hidden;
	}

	body.homePage .homeAnim .homeSidebar
	{
		transition: flex-basis 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
	}

	body.homePage .homeAnim.panelClosed .homeSidebar
	{
		transition: flex-basis 0.3s ease, margin-right 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
	}
}

@media (prefers-reduced-motion: reduce)
{
	body.homePage .homeFadeIn,
	body.homePage .dcDotNew .mapDot,
	body.homePage .dcDotNew .mapCluster,
	body.homePage .listingNew
	{
		animation: none;
	}

	body.homePage .homeAnim .homeSidebar,
	body.homePage .homeAnim.panelClosed .homeSidebar
	{
		transition: none;
	}
}

/* ---------- tablets: map on top, listings below in one column ---------- */

@media (max-width: 959px)
{
	body.homePage .homeMapLayout
	{
		flex-direction: column;
		height: auto;
	}

	body.homePage .homeMap
	{
		order: -1;
		height: calc(100vh - 331px);    /* ends above the bottom of the window */
		height: calc(100dvh - 331px);
		min-height: 320px;
		max-height: 600px;
	}

	body.homePage .homeSidebar
	{
		flex: 0 0 auto;
	}

	/* the page scrolls instead of the list */
	body.homePage div#containerDiv
	{
		overflow: visible;
	}
}

/* ---------- phones: the map, or the list or legend instead of it ---------- */

@media (max-width: 639px)
{
	body.homePage
	{
		font-size: 11pt;
	}

	body.homePage div#container
	{
		padding: 0;
	}

	body.homePage div#content
	{
		padding: 12px 16px 0 16px;
	}

	/* the container has no side padding on phones, so the header brings its own */
	body.homePage div#header
	{
		padding: 11px 12px 0 8px;
	}

	/* the heading stays for search engines and screen readers */
	body.homePage .homeTitle
	{
		position: absolute;
		left: -9999px;
	}

	/* the same height as the search box */
	body.homePage .homeSearch .searchBtn
	{
		height: 48px;
		padding: 0 14px;
	}

	body.homePage .homeSearch .searchBox,
	body.homePage .homeSearch .watermarked
	{
		height: 48px;
		font-size: 100%;
		padding: 6px 8px;
	}

	body.homePage .homeTabPanels
	{
		border: 0;
	}

	body.homePage div#containerDiv
	{
		padding: 0;
	}

	body.homePage #pvLegend
	{
		padding: 0;
	}

	body.homePage .waitStatus
	{
		margin: 6px 0;
		min-height: 0;
	}

	/* the map fills the rest of the screen; a panel shows instead of it */
	body.homePage .homeMap
	{
		height: calc(100vh - 230px);
		height: calc(100dvh - 230px);    /* the window without the browser's address bar */
		min-height: 320px;
		max-height: none;
		position: relative;
		margin: 0 -16px;
	}

	body.homePage .myMapClass
	{
		border-width: 1px 0 0 0;
		border-radius: 0;
	}

	body.homePage .panelOpen .homeMap
	{
		display: none;
	}

	/* until map.aspx.js picks a panel, phones show just the map */
	body.homePage .homeMapLayout:not(.panelOpen) .homeSidebar
	{
		display: none;
	}

	/* a swipeable row of cards, one per map point, along the bottom of the map */
	body.homePage #mapCards.mapCardsOn
	{
		display: flex;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 22px;    /* clear of the map's OpenStreetMap credit */
		z-index: 1100;   /* above the map's zoom buttons (1000) */
		gap: 10px;
		padding: 4px 16px 8px 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 16px;
		scrollbar-width: none;
	}

	body.homePage #mapCards::-webkit-scrollbar
	{
		display: none;
	}

	body.homePage .mapCard
	{
		flex: 0 0 250px;
		scroll-snap-align: start;
		display: flex;
		gap: 10px;
		align-items: flex-start;
		padding: 12px;
		background-color: #ffffff;
		border: 1px solid var(--border);
		border-radius: 10px;
		font-family: verdana, helvetica, sans-serif;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
		cursor: pointer;
	}

	body.homePage .mapCard.mapCardSelected
	{
		padding: 11px;
		border: 2px solid var(--plum);
	}

	body.homePage .mapCard.mapCardSelected .mapDot
	{
		background-color: var(--plum);
		border-color: var(--plum);
		color: #ffffff;
	}

	body.homePage .mapCardText
	{
		flex: 1;
		min-width: 0;
	}

	body.homePage .mapCard .listingTitle
	{
		font-size: 10pt;
		margin-bottom: 2px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	body.homePage .mapCard .listingDescription
	{
		font-size: 8pt;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	body.homePage .mapCard .moreInfoLnk
	{
		display: inline-block;
		font-size: 10pt;
		line-height: 28px;
	}
}