/* 
*
*	dumbtype.com-2.0
*	news page styles
*
*/

[data-title='PUBLICATIONS'] a { color: #900; }

/* --------------------------------- */
/* publication index list  */
/* --------------------------------- */
#publications-index { width: 100%; }
#publications-index li { font-size: 1.2rem; line-height: 1.2em; cursor: pointer;}
#publications-index li:hover { opacity: 1.0; }

[data-mu-treeview-button] { cursor: pointer; opacity: 0.5; }
[data-mu-treeview-button]:hover { opacity: 1.0; }
[data-mu-treeview-button][data-mu-treeview-state='active'] { opacity: 1.0; }
[data-mu-treeview-node] { display: none; }
[data-mu-treeview-node][data-mu-treeview-state='active'] { display: inherit; }

/* --------------------------------- */
/* publication thumbnails */
/* --------------------------------- */
#thumbnails li {
	display: inline-block;
	width: calc(100% / 5.0);
	cursor: pointer;
	border: 1px solid white;
	transition: opacity 0.3s;
}
#thumbnails li:hover {
	opacity: 0.5;
}
#thumbnails li img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	vertical-align: top;
}
#thumbnails [data-mu-treeview-button] { cursor: pointer; opacity: 1.0; }
#thumbnails [data-mu-treeview-button][data-mu-treeview-state='active'] { opacity: 1.0; }

/* --------------------------------- */
/* publication contents */
/* --------------------------------- */
/* contents styles */
#contents {
	width: calc(100% + 300px);
	height: 100%;
	margin-left: -300px;
}
#contents li.title { 
	font-size: 1rem;
	line-height: 1.25em;
	margin-bottom: 0.25em;
}
#contents li.description,
#contents li.item_no,
#contents li.year,
#contents li.caption
{ 
	font-size: 0.75rem; 
	line-height: 1.5em; 
}
#contents li.prev { position: absolute; font-size: 1rem; font-family: Helvetica, sans-serif; right: 3em; bottom: 0; opacity:0.5; }
#contents li.next { position: absolute; font-size: 1rem; font-family: Helvetica, sans-serif; right: 1em; bottom: 0; opacity:0.5; }

#contents > ul {
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	width: 300px;
}
#contents > figure { display: inline-block; width: calc(100% - 300px); max-height:100%; object-fit: contain; margin: 0px;}
#contents > figure > img { width: 100%; height: 100%; vertical-align: bottom; object-fit:contain; object-position: left top;}
#contents > figure:nth-of-type(1) { display: none; }
#contents > figure:nth-of-type(2) { display: inline-block; }

/* ver2.0.6, override editor gallery block for making same gap. */
#contents > section { width:100%; padding-left:300px; margin-top:1rem; }
#contents > section figcaption { font-size:0.75rem; margin:0px; }
#contents > section figcaption::before { content:"photo: "; }
.wp-block-columns { gap:1rem; }
/* .wp-block-columns figure { margin-bottom:1rem; } */

/* Hide contents template  */
#templates { display: none; }

/* --------------------------------- */
/* Responsive
/* --------------------------------- */
@media screen and (max-width: 960px) 
{
	#publications-index-mobile { padding-bottom:1rem; }
	#publications-index-mobile > div { display:flex; width:100%; height:100%; justify-content:space-between; align-items:end; }
	#publications-index-mobile > div > h3 { display:block; padding:4px 0px; font-size:1.2rem; }
	#publications-index-mobile button { display:block; padding:4px 12px; background-color:white; font-family: "corporate-a", serif; border:1px solid #aaa; opacity:0.5; cursor:pointer; }
	#publications-index-mobile button:hover { opacity:1.0; }

	/* container will be moved to root element, so we need to set styles directly by id. */
	#publications-index-container {
		width: 80vw;
		font-size: 1.25rem;
		min-width: calc(4em * 3); 
		height: 100dvh; 
		padding: 2rem; 
		padding-top: calc(2rem + 100px + 100px - 8rem - 8px);
		padding-right:0px;
		background-color: white; top: 0px; 
		margin:auto; 
		overflow-y:scroll;
	}
	/* #publications-index-container [data-mu-drawermenu-item] { padding-bottom:1rem; } */
	#publications-index-container h3 { border-top:1px solid #aaa; padding:4px 0px; }
	#publications-index-container h3:not(:nth-of-type(1)) { margin-top:2em; }
	#publications-index-container li { width:fit-content; padding-left:1em; }

	#thumbnails li { width: calc(100% / 2.0); }
	#contents { width: 100%; margin-left: 0px; }
	#contents > ul { width: 100%; }
	#contents > figure { width: 100%; padding-bottom: 2rem; }
	#contents > figure img { width: 100%; height: auto; }
	#contents > figure:nth-of-type(1) { display: inline-block; }
	#contents > figure:nth-of-type(2) { display: none; }

	/* ver2.0.6 for editor contents */
	#contents > section { width:100%; padding-left:0px; margin-top:2rem; }
	.wp-block-columns { gap:0; }

	#prev, #next { bottom: auto; top: 0; }
}