@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

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


/* HELPER VARIABLES */

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

	--shiro-theme: hsl(182, 58%, 42%); /* #2da5a9 */
	--shiro-second-color: #7AA;
	
	--shiro-lightergray: #F5F6F7;
	--shiro-lightgray: #ddd;
	--shiro-gray: #6D6D6D;
	--shiro-darkgray: #444;
	--shiro-darkergray: #2D3432;

	--black: #000000;
	--white: #FFFFFF;

	--shadow-light: rgba(0, 0, 0, 0.2) 0px 2px 8px 0px;
	--shadow-medium: rgba(0, 0, 0, 0.1) 3px 4px 8px;
	--shadow-dark: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;;
	--shadow-big: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;

}

/* 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: "Hanken Grotesk", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background-color: var(--shiro-lightergray);
	color: var(--shiro-darkgray);

	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;
}

h1{
	font-weight: 800;
}

h2{
	font-size: 2.1em;
	line-height: 1;
	font-weight: 900;
}

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;
	z-index: 10;
}

#main-menu h1{
	font-size: 1.6em;
	padding: .1em 0;
}

#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: .2em 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: 1em;
	padding-bottom: .5em;
}

.lang-menu{
	display: flex;
	flex-wrap: nowrap;
	gap: .5em;
	font-size: .7em;
	text-transform: uppercase;
}

.lang-menu li:not(:first-child)::before {
    align-self: stretch;
    content: '';
    border: 1px solid var(--shiro-theme);
	margin-right: .5em;
}

.lang-menu li a.active {
    font-weight: 800;
	cursor: auto;
}

/* BREADCRUMB */

#breadcrumb{
	background-color: var(--shiro-lightgray);
	color: var(--shiro-darkergray);
	padding: 0 0 .2em 0;
}

#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: '\E802'; /* '\F101'; */
	font-family: 'shiro-icon';
	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-header{
	position: relative;
}

.item-header-container{
	position: sticky;
	top: 6em;
}

.item-type{
	color: var(--shiro-theme);
	text-transform: uppercase;
	font-size: .7em;
	display: block;
}

#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;
}

/* Cards */

.card{
	position:relative;
	margin-bottom:20px;
}

.card-info{
	position:absolute;
	z-index:-10;
	top:0;
}

#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%;

	@media (width < 900px) {
		grid-template-columns: auto;
	}	
}

.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; word-break: break-all }
.property-value audio,
.property-value video{
	width: 100%;
}
.property-value img{
	max-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;
}

.property-value .taxonomy-separator {
	margin: 0 .35em;
}
.property-value .taxonomy-separator::before {
	content: "\FE65";
}

#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: 4em 5%;

	@media (width < 900px) {
		grid-template-columns: auto;
	}

}

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

/* LIST TOOLS */

.default-list-tools{
	display: flex;
	justify-content: space-between;
	gap: 1.5em;
	align-items: center;
}

.default-list-tools button{
	cursor: pointer;
}

.default-list-tools div{
	white-space: nowrap;
}

.default-list-tools .total{
	flex-grow: 10;
}

/*  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;
	display: flex;
	gap: .75em;
	justify-content: center;
	padding: 1em 0 1.5em 0;
	background-color: var(--shiro-lightergray);
}

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

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

.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;
}


.iframe-wrap{
	width: 100%;
}

.iframe-wrap video{
	width: 100%;
}

iframe{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	margin-bottom: 2em;
}
.content-item-image{
	width: 100%;
	margin-bottom: 2em;
	display: flex;
	justify-content: center;
}
.content-item-image img{
	max-width: 100%;
	height: auto;
	max-height: 80vh;
}