/* Differences needed by the static version; Project.css is the untouched original. */

/* The original replaced this link with plain text at startup, so it never showed the dark box. */
#language_selector a {
	display: inline;
	padding: 0;
	background: none;
	color: inherit;
}

/* Page fades of the original: 2s on arrival, 600ms between sections. */
@keyframes site_fade_in {
	from { opacity: 0; }
	to { opacity: 1; }
}
html.first_visit body {
	animation: site_fade_in 2s;
}
html:not(.first_visit) #main_content {
	animation: site_fade_in 600ms;
}
@media (prefers-reduced-motion: reduce) {
	html.first_visit body,
	html:not(.first_visit) #main_content {
		animation: none;
	}
}

/* CONTACT: same hover as the site's other links. */
.contact_email {
	padding-top: 18px;
	padding-bottom: 18px;
}
.contact_email a {
	color: #000000;
	text-underline-offset: 3px;
}
.contact_email a:hover {
	background-color: #4B4B4B;
	color: #FFFFFF;
}

/* ACCESSIBILITY */
.visually_hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.artwork_figure {
	cursor: pointer;
}
.artwork_figure:focus-visible {
	outline: 2px solid #4B4B4B;
	outline-offset: 4px;
}
#artworks_swiper_gallery :focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}
/* The viewer's controls are real buttons now: strip the browser's button look. */
#swiper_gallery_exit {
	background: none;
	line-height: inherit;
	cursor: pointer;
}
#artworks_swiper_gallery .swiper-button-next,
#artworks_swiper_gallery .swiper-button-prev {
	padding: 0;
	border: 0;
	background-color: transparent;
}

/* NARROW WINDOWS: the original's padding pushed the page 20px wider than the window. */
@media (max-width: 1119px) {
	#PippoAppsJSApplication {
		box-sizing: border-box;
	}
}

/* PHONES */
@media (max-width: 767px) {
	html.viewer_open {
		overflow: hidden;
	}

	/* Header */
	#main_header {
		position: relative;
	}
	#header_main_title {
		font-size: 56px;
		padding-top: 0;
	}
	#language_selector {
		position: absolute;
		top: 0;
		right: 0;
		left: auto;
		float: none;
		padding: 0;
	}
	#language_selector a {
		display: block;
		padding: 14px 4px;
		line-height: 16px;
	}
	#main_navigation ul {
		display: flex;
		flex-wrap: wrap;
		overflow: visible;
	}
	#main_navigation ul li {
		float: none;
	}
	#main_navigation ul li a {
		padding: 8px 8px;
		font-size: 19px;
		line-height: 28px;
	}
	#main_navigation ul li:first-child a {
		padding-left: 5px;
	}

	/* Text pages */
	.main_wrapper .main_title {
		padding: 14px 0 8px;
		font-size: 32px;
		line-height: 1.2;
	}
	.main_wrapper .main_title:empty {
		padding: 0;
	}
	.intro_text {
		padding: 8px 0 0;
		font-size: 18px;
		line-height: 1.45;
	}
	.inline_img#img_left,
	.inline_img#img_right,
	.inline_img_bio#img_right {
		box-sizing: border-box;
		float: none;
		width: 100%;
		max-width: none;
		margin: 0 0 20px;
		font-size: 17px;
	}
	.full_img {
		box-sizing: border-box;
		width: 100%;
		margin: 0 0 16px;
		padding: 6px;
	}
	.full_img img {
		padding-bottom: 0;
	}

	/* Gallery */
	.main_wrapper .artworks_main_title {
		display: block;
		padding-top: 14px;
		font-size: 32px;
		line-height: 1.2;
	}
	.main_2columns {
		display: block;
	}
	#artworks_nav_col,
	#artworks_content_col {
		display: block;
		width: auto;
		padding: 0;
	}
	.art_navigation_block_title {
		width: auto;
		margin-top: 16px;
		font-size: 18px;
	}
	.art_navigation_block .art_navigation_block_sections_list {
		display: flex;
		flex-wrap: wrap;
		margin: 2px 0 0;
		padding: 0;
	}
	.art_navigation_block_sections_list a {
		box-sizing: border-box;
		width: auto;
		min-height: 44px;
		padding: 12px 12px 10px 0;
		font-size: 17px;
		line-height: 22px;
	}
	.art_navigation_block_sections_list a[aria-current] {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	.artwork_group {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 14px;
		margin-top: 20px;
	}
	.artwork_figure {
		float: none;
		width: auto;
		margin: 0;
		font-size: 16px;
		line-height: 1.25;
	}
	.artwork_img {
		display: block;
	}
	.artwork_title {
		margin-top: 6px;
	}
	.artwork_detail {
		font-size: 14px;
	}

	/* Viewer: caption on top, the image takes whatever height is left. */
	.artwork_detail_swipe_figure {
		display: flex;
		flex-direction: column;
		max-height: none;
	}
	.artwork_detail_caption {
		flex: none;
		min-height: 64px;
		padding: 10px 56px 6px;
		box-sizing: border-box;
	}
	.artwork_detail_title {
		font-size: 20px;
		line-height: 1.2;
	}
	.artwork_detail_detail {
		margin-top: 2px;
		font-size: 14px;
	}
	.img_container {
		flex: 1;
		min-height: 0;
		box-sizing: border-box;
		border: 0;
	}
	.image_clicker {
		display: block;
		height: 100%;
	}
	.swiper-lazy {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		height: 100%;
		max-height: none;
		padding: 0 0 16px;
		border: 0;
		object-fit: contain;
	}
	#swiper_gallery_exit {
		top: 0;
		left: 0;
		margin: 0;
		padding: 6px 14px;
		font-size: 34px;
		line-height: 44px;
	}
	/* The arrows sit over the picture on a phone, so give them a small dark backing. */
	#artworks_swiper_gallery .swiper-button-next,
	#artworks_swiper_gallery .swiper-button-prev {
		width: 36px;
		height: 56px;
		margin-top: -28px;
		background-color: rgba(0, 0, 0, 0.45);
		background-size: 18px 30px;
	}
	#artworks_swiper_gallery .swiper-button-prev {
		left: 0;
	}
	#artworks_swiper_gallery .swiper-button-next {
		right: 0;
	}
}