/* ============================================================================== 
   File: scr_map.css
	- Stylesheet for ArchiComix maps and areas (incl. zoom buttons)
	- Author: Daniel Hugentobler (DH)
	- created: 16.OKT.2020
	- amended: 06.NOV.2020, DH: added zoom-buttons
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
   ============================================================================== */

.myMap {
	display: block;
	margin-bottom: 1rem;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
	width: 100%;
	/*max-width: 80rem;*/ /* maximize image's width - this does not affect its zoomability */
}

.mapContainer {
	display: inline-block;
	position: relative;
}
/* scale image to max. available width to prevent horizontal scrolling and to allow relative position/size of mapArea
	mapContainer's width is affected by zooming: all elements within are zoomed proportionally
	myMap gets a horizontal scrollbar only if mapContainer's widt is > 100% (see zoom.js for details) */
.mapContainer,
.myMap img {
	height: auto;
	width: 100%;
}

/* strip page zooms the height-property of its map, not the width */
#page_strip .myMap {
	height: fit-content;
}
#page_strip .mapContainer {
	height: 15rem;
	max-height: 45rem;
	width: auto;
}
#page_strip .myMap img {
	height: 100%;
	width: auto;
}

/* zoom-buttons */
.motionPBs .zoomIn input[type=button],
.motionPBs .zoomOut input[type=button] {
	color: darkgoldenrod;
	font-weight: bold;
	margin-left: 0.8rem; /* looks ugly without it, yet there must be a better way to do this */
	padding: 0;
}
.byNight .motionPBs .zoomIn input[type=button],
.byNight .motionPBs .zoomOut input[type=button] {
	color: lightgray;
}
.byNight .zoomIn:hover .btn,
.byNight .zoomIn:focus .btn,
.byNight .zoomOut:hover .btn,
.byNight .zoomOut:focus .btn {
	border: 0.2rem solid darkorange; /* enhance glow */
}

/* PRESSED BUTTON */
.motionPBs .zoomIn:active .btn,
.motionPBs .zoomOut:active .btn {
	border: 0.2rem outset gray;
}
.byNight .zoomIn:active .btn,
.byNight .zoomOut:active .btn {
	border: 0.2rem solid #ffbf00;	/* amber to enhance glow */
}

.zoomIn .cmdLabel,
.zoomOut .cmdLabel {
	margin-top: 0.2rem;	/* aligns the label to that of regular li-buttons => but it FAILS on narrow viewport => WHY ??? */
}
@media (max-width: 60rem) { /* formerly 40rem */
	.zoomIn .cmdLabel,
	.zoomOut .cmdLabel {
		margin-top: -0.6rem;	/* ugly hack to remedy the above issue*/
	}
}

.motionPBs li:hover input[type=button],
.motionPBs li:focus input[type=button],
.motionPBs li:active input[type=button]{
	color: #ffbf00; /* amber */
}
.byNight .motionPBs li:hover input[type=button],
.byNight .motionPBs li:focus input[type=button],
.byNight .motionPBs li:active input[type=button]{
	color: white;
}

/* render area-links within a map */

/* mapArea is a class applied to a link within myMap to render it accordingly */
.mapArea {
	border-radius: 0.8rem;		/* same as for generic links */
	display: inline-block;
	position: absolute;			/* position area absolutely within its map; do not touch font-size! */
	text-align: center;
}
.mapArea,
.byNight .mapArea {
	background-color: none;		/* make it invisible */
	border: 1px solid transparent;
	color: transparent;
}
.mapArea:focus,
.mapArea:hover,
.byNight .mapArea:focus,
.byNight .mapArea:hover {
	background-color: orange;
	border: 1px solid darkorange;
	color: black;			/* for better contrast */
	opacity: 60%;
}
.mapArea:active,
.byNight .mapArea:active {
	background-color: cornflowerblue;
	border: 1px solid #c0d4f8;
	opacity: 75%;
}
/* mapArea is an a-element */
.mapArea:focus:visited,
.mapArea:hover:visited,
.byNight .mapArea:focus:visited,
.byNight .mapArea:hover:visited {
	color: black;		/* for better contrast */
}

/* showArea's purpose is to display all mapAreas on the user's demand */
.showArea, 
.byNight .showArea {
	background-color: navajowhite;
	color: black;
	opacity: 50%;
}
a.showArea {
	color: #ba5200;			/* a bit darker than in link.css (e86600) to compensate for opacity */
}
a.showArea:visited, 
.byNight a.showArea:visited {
	color: #335a80;			/* a bit darker than in link.css (4070a0) to compensate for opacity */
}