/**
 *	Full-screen gallery plugin styles.
 */

#fsg-container {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100vw;
	min-width: 100vw;
	height: 100vh;
	min-height: 100vh;
	line-height: 1.2;
	font-weight: 400;
	background: #111;
	color: #fff;
	z-index: 99999; /* container needs to be top-level in the DOM to make this reliably on top of theme stuff */
}

/* #wpadminbar is position: absolute on smaller screens, so functionally hidden in overlay */
@media screen and (min-width: 600px) {
	.admin-bar #fsg-container,
	.admin-bar #fsg-close,
	.admin-bar #fsg-open-full {
		top: 32px;
	}
	.admin-bar #fsg-container {
		height: calc( 100vh - 32px );
		min-height: calc( 100vh - 32px );
	}
}

/* #wpadminbar is 46px tall */
@media screen and (min-width: 600px) and (max-width: 782px) {
	.admin-bar #fsg-container,
	.admin-bar #fsg-close,
	.admin-bar #fsg-open-full {
		top: 46px;
	}
	.admin-bar #fsg-container {
		height: calc( 100vh - 46px );
		min-height: calc( 100vh - 46px );
	}
}

body.fsg-open {
	overflow: hidden;
}

#full-screen-gallery,
#full-screen-gallery figure {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	position: relative;
}

#full-screen-gallery figure {
	opacity: 0;
	position: absolute;
	top: 100%;
	transition: opacity .2s ease-in-out;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#fsg-container a {
	color: #fc0;
	text-decoration: underline;
	max-width: 100%;
	max-height: 100%;
}

#fsg-container a:hover,
#fsg-container a:focus,
#fsg-container a:active {
	color: #fff;
	text-decoration: none;
}

#fsg-container img {
	max-height: 100%;
	width: auto;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: block;
}

/* Focus is set to the img to avoid distracting focus styles during navigation for practicality */
#fsg-container img:focus {
	outline: none;
	box-shadow: none;
	border: none;
}

#fsg-container .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal;
}

#fsg-container figcaption {
    box-sizing: border-box;
    display: block;
    position: absolute;
    bottom: 0;
    top: auto;
    left: 64px;
    right: 64px;
    width: auto;
    padding: 8px 32px;
    margin: 0;
    max-width: 1920px; /* avoid getting too wide on very large screens */
    height: auto;
    text-align: center;
    font-size: 16px; /* align to icon grid, but inherit font family and style from the theme */
    line-height: 1.5;
	color: #fff;
    background: #111;
}

#fsg-container figcaption:empty {
	display: none;
}

#fsg-navigation > a,
#fsg-navigation > button {
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	position: fixed;
	bottom: 0;
	width: 64px;
	height: 64px;
	background: #111;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	font-size: 32px;
	line-height: 64px;
	z-index: 100001;
	text-decoration: none;
	transition: all .2s ease-in-out;
	cursor: pointer;
}

#fsg-navigation > a:hover,
#fsg-navigation > button:hover,
#fsg-navigation > a:focus,
#fsg-navigation > button:focus {
	color: #fc0;
	box-shadow: 0 0 0 3px #fc0 inset;
	font-size: 40px;
}

#fsg-navigation #fsg-close {
	font-size: 24px;
}

#fsg-navigation #fsg-close:focus,
#fsg-navigation #fsg-close:hover {
	font-size: 32px;
}

/* Align the four navigation buttons to the four corners */
#fsg-previous,
#fsg-close {
	left: 0;
	right: auto;
}

#fsg-next,
#fsg-open-full {
	right: 0;
	left: auto;
}

#fsg-close,
#fsg-open-full {
	top: 0;
	bottom: auto;
}

#fsg-open-full[href=""] {
	display: none; /* Hide link if it's empty for any reason. */
}

@media screen and (max-width: 800px) {
	#fsg-container figcaption {
	    padding: 8px 16px;
	}
}

#fsg-launch-button {
	display: none; /* hide until JS sets up the gallery, if present */
	/* remaining styling to be provided by the theme applying the template tag */
}

#fsg-progress {
	display: block;
	position: absolute;
	bottom: 0;
	left: 64px;
	width: calc(100% - 128px);
	height: 3px;
}

#fsg-progress-slider {
	height: 100%;
	transition: width .2s ease-in-out; /* Match image fade transition */
	width: 0;
	background: #fff;
}

#fsg-progress-slider:hover > .screen-reader-text { /* display screen reader text on hover as a subtle pop up */
	display: block;
	bottom: 3px;
	left: 0;
	padding: 1em;
	margin: 0;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
}