@font-face {
	font-family: 'hk-grothesk';
	src: url('../fonts/HKGrotesk-Regular.otf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'hk-grothesk';
	src: url('../fonts/HKGrotesk-Italic.otf');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'hk-grothesk';
	src: url('../fonts/HKGrotesk-Bold.otf');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'hk-grothesk';
	src: url('../fonts/HKGrotesk-BoldItalic.otf');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'icons';
	src: url('../fonts/icons.eot');
	src: url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icons.woff') format('woff'),
		url('../fonts/icons.ttf') format('truetype'),
		url('../fonts/icons.svg#pt_sans_narrowregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* HELPER VARIABLES */

:root {
	--shiro-aqua: #2DA4A8;
	--shiro-orange: #F25648;

	--shiro-second-color: #7AA;
	
	--shiro-lightergray: #F5F6F7;
	--shiro-lightgray: #EEE;
	--shiro-gray: #6D6D6D;
	--shiro-darkgray: #444;
	--shiro-darkergray: #2D3432;

	/* --header-height: 80px; */
}

/* DOCUMENT AND BODY LEVEL */

html, body {
	min-width: 320px;
	width: 100%;
	max-width: 100%;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	/* overflow-x: hidden;
	scroll-behavior: smooth; */
}

body {
	/* position: relative;
	overflow-x: hidden;
	overflow-y: auto; */
	font-family: 'hk-grotesk', sans-serif;
	font-weight: 300;
	background-color: var(--shiro-lightergray);
	color: var(--shiro-darkgray);

	font-family: 'hk-grothesk', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-size: 1.15em;
}

/* HELPER DEFAULTS */

* {
	margin: 0;
	padding: 0;
}

pre{
	padding: 20px 0;
	margin: 0;
}

a{
	text-decoration: none;
	color: inherit;
}
a[href]:hover{
	opacity: .7;
}

img{
	display: block;
}

h1, h2, h3, h4, h5, h6{
	display: block;
	letter-spacing: .3px;
}

ul, ol {
	list-style: none;
}

main{
	font-size: 1rem;
	line-height: 1.8rem;
	color: inherit;
}

input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

main{
	margin: 2.5rem 0;
}

/* HELPER CLASSES */

.wide-container{
	width: 85%;
	margin: 0 auto;
	max-width: 1400px;
}

.flex-spacer{ flex-grow: 1; }

.font-weight-1{ font-weight: 100 !important; }
.font-weight-2{ font-weight: 200 !important; }
.font-weight-3{ font-weight: 300 !important; }
.font-weight-4{ font-weight: 400 !important; }
.font-weight-5{ font-weight: 500 !important; }
.font-weight-6{ font-weight: 600 !important; }
.font-weight-7{ font-weight: 700 !important; }
.font-weight-8{ font-weight: 800 !important; }
.font-weight-9{ font-weight: 900 !important; }

.menu-toggle{ cursor: pointer; }

.force-break {
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;

	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;

	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.image-cover{
	background-position: center center; 
	background-size: cover;
}

.ratio-16-9{
	position: relative;
	width: 100%; height: 0;
	padding-bottom: 56.25%;
}
.ratio-16-9 > *{
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

.flex-justify{
	display: flex;
	justify-content: space-between;
}

/* HEADER */

body{
	/* padding-top: var(--header-height); */
}

#main-header,
#main-menu,
#main-nav{
	background-color: var(--shiro-darkgray);
	color: var(--shiro-lightergray);
}

#main-header{
	position: sticky;
	top: 0;
	left: 0;
	right: 0;

	width: 100%;
	max-height: 100vh;
	height: auto;

	display: inline-flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;

	user-select: none;

	z-index: 10;
}

#main-menu{
	flex: 0 0;

	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;

	/* height: var(--header-height); */

	z-index: 10;
}

#main-nav{
	flex: 0 1;

	padding: 0;
	
	overflow: hidden;
	max-height: 0;
	pointer-events: none;

	z-index: -10;
}
	.menu-open #main-nav{
		max-height: unset;
		padding: 1rem 0;
		pointer-events: all;
	}

	#main-nav li ul{
		position: relative;
		padding-top:   .6rem;
		padding-left: 1.2rem;
	}

	#main-nav li ul li{
		position: relative;
	}

	#main-nav li ul li:before{
		content: '\E827';
		font-family: 'icons';
		position: absolute;
		top:  .2rem;
		right: 100%;
		margin-right: .4rem;
		font-size: .75rem;
		color: var(--shiro-lightergray);
	}


.navbar-nav{
	display: flex;
    gap: 3em;
}

/* BREADCRUMB */

#breadcrumb{
	background-color: var(--shiro-lightgray);
	color: var(--shiro-darkergray);
	padding: 1rem 0;
	position: sticky;
	top: 5em;
	z-index: 9;
}
#breadcrumb > .container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#breadcrumb .trail{
	display: inline-flex;
	flex-direction: row;
	align-items: center;

	text-transform: uppercase;
	font-size: .75rem;
}
#breadcrumb .trail > *:after{
	content: '\F101';
	font-family: 'icons';
	font-weight: bold;
	margin: 0 .5rem;
	color: var(--shiro-darkgray);
}
#breadcrumb .trail > *:last-child:after{
	display: none;
}

#breadcrumb .trail .page-title{
	font-weight: 600;
}

#item-actions{
	display: inline-flex;
	flex-direction: row;
	align-items: center;
}
.shiro-btn{ padding: 0 .25em; }
.shiro-btn:first-child{ padding-left: 0; }
.shiro-btn:last-child{ padding-right: 0; }
.shiro-btn:before{
	font-family: 'icons';
	color: #ddd;
}
.shiro-btn:hover:before{ color: var(--shiro-aqua); }
.shiro-btn.prev:before{ content: "\E80E"; }
.shiro-btn.next:before{ content: "\E80F"; }

/* DEFAULT ITEM */

#item-header,
#item-thumb,
#item-properties,
#item-relations{
	margin: 0 0 1rem 0;
}

#item-highlighted-media{
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
}
#default-item object{
	width: 100%;
	height: auto;
	object-fit: cover;
}
#default-item object[data*="vimeo"],
#default-item object[data*="youtu"],
#default-item object[data*="mp4"],
#default-item object[data*="pdf"]{
	height: 360px;
}

#item-header .item-date{
	color: var(--shiro-second-color);
	font-size: .8em;
	margin-bottom: 2em;
}

#item-header .about-tag {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}
#item-header .about-tag > div {
	display: contents;
}
#item-header .about-tag a{
	border: 1px solid #999;
	padding: .35em 1em;
	line-height: 1;
	font-size: .8em;
	font-weight: 600;
}

#item-header .mapUrl{
	display: inline-block;
	border: 1px solid #666;
	background: #666;
	color: #fff;
	padding: .25em 1em;
	line-height: 1.5;
	font-size: .9em;
	font-weight: 600;
	margin-top: 2em;
}


#item-properties,
.item-fieldset{
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
}
.item-fieldset-title{
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 100%;
	padding: .5rem;
	border-radius: 3px;
	margin: 2rem -10px .5rem -10px;
	background-color: var(--shiro-gray);
	color: var(--shiro-lightergray);
}
.item-fieldset:first-child .item-fieldset-title{
	margin-top: 0;
}

.item-fieldset[data-fieldset=highlight]{
	order: -1;
	margin-bottom: 2rem;
}
.item-fieldset[data-fieldset=highlight] .property-row{ border: none; }
.item-fieldset[data-fieldset=highlight] .property-name{ display: none; }

.property-fieldset:not(:first-child){
	margin-top: 2em;
}

.property-fieldset{
	margin-bottom: .25em;
}

.property-row{
	padding-bottom: .5rem;
	padding-top: .5rem;
	border-top: 2px solid var(--shiro-lightgray);

	font-size: 1rem;
	line-height: 140%;

	display: grid;
	grid-template-columns: 15% 82%;
	gap: 3%;
}

.property-label{ 
    font-weight: 600;
    font-size: .6em;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--shiro-second-color);
    line-height: 1.5;
    margin-top: 0.5em;
}

.property-value > span > *:not(:first-child){
	margin-top: 1em;
}

.property-value a{ text-decoration: underline; }
.property-value img,
.property-value audio,
.property-value video{
	width: 100%;
}

.property-value audio,
.property-value audio::-webkit-media-controls-panel{
	border-radius: 3px;
	background-color: rgba(0,0,0,.05);
}

.property-value .value-type{
	color: var(--shiro-gray);
	font-size: .6em;
	text-transform: uppercase;
	margin-left: .75em;
	font-weight: 400;
}

.property-value .value-description{
	display: inline-block;
	color: var(--shiro-second-color);
	font-size: .9em;
	font-style: italic;
}
/* .property-value .value-description::before{ content: "["; }
.property-value .value-description::after{ content: "]"; } */

.property-value .value-io-separator::before{
	content: '->';
	margin: 0 .2em;
}

.property-value .value-io{
	display: inline-block;
	color: var(--shiro-gray);
	font-size: .9em;
	font-style: italic;
}
/* .property-value .value-io::before{ content: "("; }
.property-value .value-io::after{ content: ")"; } */

.property-value .no-title {
	opacity: .5;
}

#default-item .shiro-card-group{
	margin-top: 1rem;
}
#default-item .shiro-card-group .item-fieldset-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#default-item .shiro-card-group .item-fieldset-title form{
	display: inline-flex;
	align-items: center;
}
#default-item .shiro-card-group .item-fieldset-title .layout-bttn{
	filter: invert(1);
}
#item-relations .group-wrap[data-layout=list].container{
	padding-left:  0;
	padding-right: 0;
}

#default-item .grid-container{
	display: grid;
	grid-template-columns: 30% 65%;
	gap: 5%;
}

#default-item section h2{
	margin: 2em 0 .5em 0;
}

/*  DEFAULT-LIST  */

.shiro-card-group > h1{
	margin: 0;
}
.shiro-card-group > .total{
	font-size: 1em;
	font-weight: 400;
}

/*  RELATED-CONTENT  */

.related-content{
	display: flex;
	gap:.5em;
	margin: 0;
	padding: 0;
}

.related-content-item{
	font-size: .8em;
	padding: 0 .75em;
	border: 1px solid #999;
}

.related-content-label{
	font-weight: 600;
}

.related-content-type{
	font-size: .8em;
	font-weight: 600;
	margin-left: 1em;
	text-transform: uppercase;
	color: var(--shiro-second-color);
}

/*  PAGINATION  */

.numbered-pagination{
	position: sticky;
	bottom: 0;
	text-align: center;
	padding: 1em 0 1.5em 0;
	background-color: var(--shiro-lightergray);
}

.numbered-pagination .pagination-item{
	margin: 0 8px;
}

.numbered-pagination .pagination-prev:before,
.numbered-pagination .pagination-next:before{
	font-family: 'icons';
	color: var(--shiro-gray);
	line-height: 1em;
}
/* .numbered-pagination .pagination-next:hover:before{ color: var(--shiro-orange); } */
.numbered-pagination .pagination-prev:before{ content: "\E80E"; }
.numbered-pagination .pagination-next:before{ content: "\E80F"; }

.numbered-pagination .pagination-item.current{
	font-weight: bold;
	color: var(--shiro-orange);
}


/* SWIPER JS */

	.swiper {
		width: 100%;
		height: 200px;
	}

	.swiper-slide {
		text-align: center;
		font-size: 18px;
		/* background: #fff; */
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto !important;
	}

	.swiper-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

footer{
	text-align: right;
	font-size: .8em;
	padding: 1em;
}