/* ROOT */

	@import url("./globals.css");
	@import url("./fonts.css");
	@import url("./animation.css");

/* LAYOUT */

/*
	main.wp-block-group .wp-block-post-title,
	main.wp-block-group .is-layout-flex {
		max-width: 100%;
	}
*/
	
    .listing-item,
	.padd_border{
		margin-bottom: 3em;
		border: 1px solid var(--color4);
		border-radius: 0.5em;
		padding: 1em;
	}
	.listing-item .image,
	.padd_border > div:first-child{
		overflow: hidden;
		border: solid 1px var(--color4); 
		border-radius: 0.5em;
	}
	.border_b{
		border-color: var(--colorB);
	}

	.flex_no_basis{
		flex-basis: auto !important;
	}
	.flex_no_gap{
		gap: 0;
	}

	.flex_stretch{
		align-items: stretch;
	}

	header .is-layout-constrained > .alignwide,
	footer .is-layout-constrained > .alignwide {
		max-width: 100%;
	}

/* DESKTOP / MOBILE */

	.hidden{
		display: none !important;
	}
	
	.mobile{
		display: none !important;
	}
	
	@media (max-width: 781px) {
		.desktop{
			display: none !important;
		}
		.mobile{
			display: block !important;
		}
		.mobile.is-layout-flex{
			display: flex !important;
		}
	}	

	@media (max-width: 781px) {
		.mobile_center{
			justify-content: center;
		}
		.mobile_vertical .wp-block-columns{
			flex-direction: column !important;
		}
	}


/* SCROLLBAR */

    .scroll {
        scrollbar-width: thin;
        scrollbar-color: var(--color5) transparent;
    }

    ::-webkit-scrollbar {
        width: 3px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: var(--color5);
        border-radius: 20px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--color5);
    }


/* TEXT */

	body{
		font-size: 1em;
		color: var(--colorB);
	}

	a{
		color: var(--color1);
	}
	a:hover{
		color: var(--color3);
	}
	a{
		transition: color 1s, border-color 1s;
	}
	a:focus, a:active {	
		 outline: none !important;
	}

	
	.vertical{
		writing-mode: vertical-lr;
	}

	footer,
	footer a,
	.date{
		color: var(--color4);
		/* color: #3b485b; */
	}
	.title{
		color: var(--color5);
	}

	header a,
	footer a,
	a.title{
		text-decoration: none !important;
	}

	h1{
		font-family: 'Angelwish';
		line-height: 1em;
	}

	.wp-block-post-title,
	.wp-block-post-subtitle{
		visibility: hidden;
		margin-bottom: 1em;
	}

	.ready .wp-block-post-title,
	.ready .wp-block-post-subtitle{
		visibility: visible;
		text-align: center;
	}

	.ready .split_title .wp-block-post-title{
		margin-bottom: 0em;
	}

	.page h1.wp-block-post-title{
		text-align: center;
	}
	.page h1.wp-block-post-subtitle{
		text-align: center;
	}
	.page > .wp-block-post-content >.wp-block-group h1.wp-block-post-title{
		margin-bottom: 2em;
	}

	[data-categories*="events"] h1.wp-block-post-title{
		/* display: none; */
	}
	.wp-block-post-title-space{

	}

	.listing-item .split_title{
		display: flex;
	}

	.display-posts-listing.split-titles .wp-block-post-title,
	.display-posts-listing.split-titles .wp-block-post-subtitle,
	[data-categories*="events"] .wp-block-post-title,
	[data-categories*="events"] .wp-block-post-subtitle{
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		margin: 0;
	}
	.display-posts-listing.split-titles .wp-block-post-title,
	[data-categories*="events"] .wp-block-post-title{
		font-family: "Angelwish";
		line-height: normal;
	}
	.display-posts-listing.split-titles .wp-block-post-subtitle,
	[data-categories*="events"] .wp-block-post-subtitle{
		font-family: "FoulFiend";
		font-size: 1em;
		line-height: normal;
	}

	[data-categories*="events"] .wp-block-post-title{
		font-size: clamp(1rem, 30vw, 10rem);
	}
	[data-categories*="events"] .wp-block-post-subtitle{
		font-size: clamp(2rem, 4.75vw, 3.33rem);
	}

	.page main > div{
		padding-top: 0 !important;
	}

	hr{
		border-color: var(--color4) !important;
		opacity: 0.5;
	}
	hr.is-style-wide{
		margin: 0;
		width: 100%;
    	margin-left: auto !important;
    	margin-right: auto !important;

    	display: flex;
	    justify-content: space-between;
	    flex-direction: row;
	    flex-wrap: nowrap;

	    overflow: visible;
	}
	hr.is-style-wide::before{
	    /* content: "«"; */
	    content:"\00AB";
	    font-size: 2em;
	    position: relative;
    	top: 0.64em;
    	left: -0.25em;
	}
	hr.is-style-wide::after{
		/* content: "»"; */
		content:"\00BB";
	    font-size: 2em;
	    position: relative;
    	top: 0.64em;
    	right: -0.25em;
	}

	.wp-block-post-date a{
		color: var(--color1);
	}
	


/* BACKGROUND */

	html,body{
		background: var(--color2);
	}

/* LAYOUT */

	html{
		width: 100%;
    	display: inline-block;
	}
	
	header,
	footer
	{
		z-index: 11;
	}

	footer{
		margin-block-start: 0 !important;
		padding-top: 1.5em;
		
	}

	footer > div{
    	padding-top: 0em !important;
    	padding-bottom: 0em !important;
	}

	/* MAKE ROOM FOR ADMIN BAR */
		header{
			padding-top: 1em;
		}
		footer{
			padding-bottom: 2em;
		}

	body{
		min-height: 100vh;
	}

	.wp-site-blocks{
	    min-height: 100vh;
	    width: 100%;

	   	display: flex;
	    flex-direction: column; 
	    justify-content: space-between;

	    z-index: 4;
	    position: relative;
	}

	main{
		margin-top: 0;
	    min-height: 50vh;

	    position: relative;
	    z-index: 9;
	}


    
/* BLOG */

	.display-posts-listing{
		list-style: none;
		padding: 0;
		margin: auto;
		max-width: 600px;
	}

	.single-post .meta{
		display: none;
	}

	.listing-item .split_title .wp-block-post-title-space{
		display: inline-block !important;
	}

	.display-posts-listing .title{
	    font-size: x-large;
    	font-family: 'Angelwish';
	}

	.display-posts-listing .image{
		display: block;
		position: relative;
		position: relative;
		height: auto;
		display: block;
		object-fit: contain;

		margin-bottom: 0.5em;
		aspect-ratio: 16 / 8;
	}

	.display-posts-listing .image img{
		max-width: calc(100% + 4px);
		width: calc(100% + 4px);
		margin-left: -2px;
	}

	.display-posts-listing .image .title {
		position: absolute;
		top: 0;
		width: calc(100% - (3.33% * 2));
		height: calc(100% - (3.33% * 2));
		padding: 3.33%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;

		z-index: 3;
	}
	.display-posts-listing .image .title .title-text {
		display: inline;
		/* font-size: clamp(1rem, 6vw, 6.66em); */
		font-size: clamp(1rem, 8vw, 4rem);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.1em;
		max-width: 100%;
		color: black;
		text-shadow: 0 0 15px #ffffff;
	}

	.display-posts-listing .size-featured{
		max-width: 100%;
		width: 100%;
    	height: auto;
    	display: block;
    	object-fit: contain;
	}   

	.display-posts-listing .image .overlay{
		width: 100%; height: 100%; top: 0; left: 0; position: absolute;
		background-color: transparent;
		pointer-events: none;
		opacity: 1;
		mix-blend-mode: hue;
		transition: background-color 0.5s;
	}
	.display-posts-listing .image .invert{
		width: 100%; height: 100%; top: 0; left: 0; position: absolute;
		background-color: var(--color4);
		mix-blend-mode: difference;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.5s;
	}
	.display-posts-listing .image .read{
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    position: absolute;
	    pointer-events: none;
	    opacity: 0;
	    transition: opacity 0.5s;
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-end;
	    align-items: flex-end;
	    font-family: 'Angelwish';
	    font-size: 1.5em;
	    color: var(--color4);
	}
	/*
	.display-posts-listing .image .logo{
		content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute;
		background: url('../img/icon.png');
		background-size: 33% auto;
		background-repeat: no-repeat;
		background-position: center center;
		pointer-events: none;
		opacity: 0;
		transition: all 0.5s;

		-webkit-animation-name: rotate;
		-webkit-animation-duration: 3s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-timing-function: linear;
	}
	*/
	.display-posts-listing .image .logo{
		content: "";
	    width: 1000px;
	    height: 1000px;
	    top: 0;
	    left: 0;
	    position: absolute;
	    background: url(../img/logo_trn.png);
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-position: center center;
	    pointer-events: none;
	    mix-blend-mode: overlay;
	    opacity: 0;
	    transition: all 0.5s;
	    -webkit-animation-name: rotate;
	    -webkit-animation-duration: 3s;
	    -webkit-animation-iteration-count: infinite;
	    -webkit-animation-timing-function: linear;
	}
	.display-posts-listing .image:hover .overlay{
		background-color: red;
		opacity: 1;
	}
	.display-posts-listing .image:hover .invert{
		opacity: 1;
	}
	.display-posts-listing .image:hover .logo{
		opacity: 1;
	}
	.display-posts-listing .image:hover .read{
		opacity: 1;
	}

	main .wp-block-post-featured-image{
		display: none;
	}

	.wp-block-post-featured-image.bg{
	    aspect-ratio: 16 / 4 !important;
	    position: absolute;
	    width: 100%;
	    height: 100vh;
	    max-height: 100%;
	    opacity: 0.66;
	}
	
	.wp-block-post-featured-image.bg img{
		width: 100%;
		height: auto;
		object-fit: cover;
		position: relative;
		aspect-ratio: 3 / 2;
		z-index: -1;
	}

	/*
	.wp-block-post-featured-image.bg::before{
	    content: "";
	    position: absolute;
	    background: linear-gradient(0deg, var(--colorC) 0%, rgba(0, 0, 0, 0) 100%);
	    height: 66%;
	    width: 100%;
	    bottom: 0;
	    z-index: 0;
	}
	*/
	.colorize{
	    mix-blend-mode: color;
	    background-color: var(--color2);
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    z-index: 0;
	}
	body[data-categories*=',events'] .colorize{
		display: none;
	}

	.wp-block-post-featured-image.bg::before{
		content: "";
		position: absolute;
		background: linear-gradient(0deg, var(--color2) 0%, rgba(0, 0, 0, 0) 100%);
		/* background: linear-gradient(0deg, var(--color2) 0%, #333333 100%); */
		/* background-color: #ffffff; */
		height: 100%;
		/* mix-blend-mode: darken; */
		/* mix-blend-mode: overlay; */
		mix-blend-mode: normal;
		width: 100%;
		bottom: 0;
		z-index: 1;
	}
	.wp-block-post-featured-image.bg::after{
		content: "";
		background-image: url(../img/patterns/dark-mesh.png);
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 1;
		z-index: 1;
	}

/* EMBED */
	
	iframe[src*="//www.youtube"],
	iframe[src*="//youtu.be"]{
		width: 100%;
	    height: auto;
	    aspect-ratio: 9 / 5;
	}

/* TABLES */

	.plain_table table,
	.plain_table table td{
		border: none;
	}
	.plain_table table{
		padding: 2em;
	}
	.plain_table table td{
		padding: 0;
		padding: 1em;
	}
	.plain_table table td:first-child{
		padding-left: 0;
	}
	.plain_table table td:last-child{
		padding-right: 0;
	}
	.plain_table table tr{
		
	}

	.event_table table{
		border: 2px solid transparent;
	}

	.event_table table tr{}

	.event_table table tr td{
		/* padding: 1em; */
		padding-left: 1em;
		padding-right: 1em;
		font-size: 1.5em;
	}

	.event_table table tr td:first-child{
		font-family: sans-serif;
		font-size: 1.5em;
		
		text-align: center;

		white-space: nowrap;
	}

	@media (max-width: 420px) {
		.event_table table tr{
			display: flex;
		    flex-direction: column;
    		justify-content: space-between;
		}
		.event_table table td{
			border-left: 0;
			border-right: 0;
			margin-bottom: 1em;
			width: calc(100% - 2em);
			text-align: center;
		}
		.event_table table tr td:first-child{
	
			margin-bottom: 0;
			border: 0;
		}
	}


	.word_cluster{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;

		list-style: none;
	}

	.word_cluster li{
		display: inherit;
	}
	.word_cluster li h1{
		margin: 0;
	}
	.word_cluster li::before,
	.word_cluster li::after{
		content: "★";
		display: flex;
		align-content: center;
		align-items: center;
		font-size: 1em;
		color: var(--color4)
	}
	.word_cluster li::before{
		margin-left: 0.5em;
	}
	.word_cluster li::after{
		margin-right: 0.5em;
	}
		

/* MAP */

	/*
	.leaflet-map-pane{
		width: 100%;
		height:100%;
	}
	.leaflet-map-pane::before{
		content: "";
		transform: translate3d(0px, 0px, 0px);
		width: 1000000%;
		height: 1000000%;
		left: -500000%;
		top: -500000%;
		background-color: var(--color4);
		z-index: 500;
		position: absolute;
		mix-blend-mode: color;
		pointer-events: none;
	}
	*/
	.leaflet-map-pane{
		width: 100%;
		height:100%;
	}
	/*
	.map::before{
		content: "";
		transform: translate3d(0px, 0px, 0px);
		width: 100%;
		height: 100%;
		background-color: var(--color4);
		z-index: 500;
		position: absolute;
		background-blend-mode: color;
		pointer-events: none;
	}
	*/
	

	.leaflet-control-attribution{
		display: none;
	}

	.leaflet-popup .leaflet-popup-content h6 {
		font-size: 1em;
		font-weight: 600;
	}



	.map.inactive{
		height: 0;
    	overflow: hidden;
	}

	a[href*="#map"]::before{
		content: "▼";
		margin-left: 0.5em;
		margin-right: 0.5em;
		display: inline-block;
	}
	a[href*="#map"].inactive::before{
		content: "►";
	}

	.map.inactive{
		padding: 0;
		border: 0;
		margin: 0;
	}

	.wpmapblockrender{
		overflow: hidden;
		max-width: 100%;
	}

	.svg img{
		visibility: hidden;
	}
	.svg svg.replaced-svg{
		visibility: visible;
	}

	figure.svg{
		margin: 0;
	}


/* DETAILS */

	summary{
		font-size: var(--wp--preset--font-size--x-large);
		outline-width: 0 !important;
	}
	summary::before{
		/* content: "▼" */
		content: "\25BC";
		font-family: sans-serif;
		transform: rotate(-90deg);
		position: absolute;
		margin-left: -1em;
		margin-top: 0.66em;
    	font-size: 0.66em;

	    line-height: 1;
	    letter-spacing: 0;
	}
	[open] > summary::before{
		transform: rotate(0deg);
	}
	details{
		padding-left: 1.33em;
	}
	summary::-webkit-details-marker,
	summary::marker{
		text-align: end !important;
		content: "";
		display: none;
	}