/*
 * contact.css — the contact panel: vCard QR, address block, LinkedIn badge,
 * PGP line, the embedded map, and the Google Maps InfoWindow overrides.
 *
 * Ported from the original cstyle.css. Colours reference the base.css tokens
 * where they map cleanly; one-off Google-Maps overrides are kept verbatim. The
 * map stays display:none on mobile — panel.js reads that visibility to decide
 * whether to load the Maps API at all, so this rule doubles as the "no map on
 * mobile" switch.
 */

#QR_expand {
	position: absolute;
	top: 0;
	left: 5px;
	right: 5px;
	height: 130px;
}

#QRCode {
	cursor: pointer;
	position: static;
	display: inline-block;
	margin-left: 35px;
	width: 130px;
	height: 130px;
	text-decoration: none;
}

#QRCode image, #QRCode svg {
	height: 130px;
	width: 130px;
}

#address {
	cursor: auto;
	position: absolute;
	display: inline-block;
	vertical-align: top;
	top: 0;
	left: 180px;
	width: calc(100% - 205px);
	-webkit-touch-callout: text;
	user-select: text;
}

#linkedin {
	cursor: pointer;
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	top: 10px;
	width: 70px;
	height: 20px;
}

#linkedin image, #linkedin svg {
	width: 70px;
	height: 20px;
}

#map {
	position: absolute;
	top: 140px;
	left: 0;
	bottom: 0;
	right: 0;
	min-height: 330px;
	min-width: 420px;
}

#pgp {
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	display: inline-block;
}

.marker, .marker * {
	cursor: pointer !important;
}

#map_expand {
	position: absolute;
	top: 20px;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 25px 40px 40px 40px;
	border: 1px solid #999;
}

#map_canvas {
	height: 100%;
	width: 100%;
	border: 0;
}

#email {
	color: var(--color-text);
}

#web {
	color: var(--color-text);
}

/* Google Maps InfoWindow overrides. */
.gm-ui-hover-effect {
	top: 0;
	right: -12px;
}

.gm-style div, .gm-style span, .gm-style label, .gm-style a {
	white-space: nowrap;
	font-family: 'PT Sans Narrow', sans-serif;
}

.gm-style .gm-style-iw,
.gm-style .gm-style-iw a,
.gm-style .gm-style-iw span,
.gm-style .gm-style-iw label,
.gm-style .gm-style-iw div {
	font-size: 14px;
	max-height: 200px !important;
}

.gm-style .gm-style-iw-t > div {
	box-sizing: border-box;
	border-radius: 2px;
}

.gm-style .gm-style-iw-t b {
	font-weight: bold;
}

.gm-style-iw div {
	overflow: hidden !important;
}

.gm-style-cc, .gmnoscreen {
	display: none;
}

@media only screen and (orientation: portrait) and (max-width: 450px) and (max-height: 950px),
	only screen and (orientation: landscape) and (max-height: 450px) and (max-width: 950px) {
	#overlay {
		min-height: 0;
		min-width: 0;
	}

	#QR_expand {
		position: absolute;
		top: 10%;
		left: 10px;
		right: 10px;
		bottom: 10px;
		height: auto;
	}

	#address {
		position: initial;
		width: 230px;
		display: block;
		margin: 20px auto 0 auto;
	}

	#pgp {
		font-size: 15px;
		white-space: normal;
	}

	#QRCode {
		position: initial;
		height: 230px;
		width: 230px;
		display: block;
		margin: 0 auto;
	}

	#QRCode image, #QRCode svg {
		height: 230px;
		width: 230px;
	}

	#linkedin {
		position: relative;
		display: inline-block;
		margin: 10px auto 30px auto;
	}

	#linkedin image, #linkedin svg {
		width: 100px;
		height: 25px;
	}

	#map {
		display: none;
		top: 80px;
		min-height: 0;
		min-width: 0;
	}
}