/* ROOT */

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

/* NAV */

	#nav{
		width: 100%;
	    overflow-x: hidden;
	    display: inline-table;
	    margin: auto;
	    margin-top: 2em;
	    margin-bottom: 2em;
	    position: relative;
	}
	#menu{
		background-image: url(../img/menu.png);
	    background-repeat: no-repeat;
	    background-position: center center;
	    background-size: contain;

	    /* width: 33%; */
	    width: 100%;

	    margin: auto;
	    
	    height: 200px;
	    max-width: 400px;
	    display: block;
	}

	#menu > div{
		height: 100%;
		width: 100%;
    	position: relative;
	}

	#menu ul{
	    position: relative;
	    height: 100%;
	    width: 100%;
	    padding: 0;
	    margin: 0;
	    list-style: none;

	    top: -0.5em;
	}

	#menu ul li{
		position: absolute;
		transform: translate(-50%, -50%);
		max-width: 10em;
	}

	#menu ul li a{
	    font-weight: 500;
	    font-size: calc(120%);
	    line-height: 1em;
	    display: block;
	    text-decoration: none;

	    user-select: none;
	}

	#menu ul li.home{
		padding: 5%;
    	display: flex;
	    left: 50%;
	    top: 45%;
	    max-width: 115px;
	    max-height: 115px;
	    justify-content: center;
	    flex-direction: column;
	    align-items: center;
	    overflow: hidden;
	    mix-blend-mode: exclusion;
	}
	#menu ul li.home a{
	    border-radius: 100em;

	    position: relative;
	    top: -6.66%;
	    background-color: red;
	    box-shadow: 0 0 15px 2px #ff0050;
	    color: rgb(0, 0, 0, 0);
	    justify-content: center;
	    flex-direction: column;
	    align-items: center;
	    border: 1px solid transparent;

	    opacity: 0;

	    transition: opacity 1s;

	}

	 /* MOBILE FIX */
	 	#menu ul li.home a{
    		max-width: 26.4vw;
    	}
		@media (max-width: 599px) {
		    #menu ul li.home a{
		      margin-top: 0.25em;
		    }
		}
		@media (max-width: 299px) {
		    #menu ul li.home a{
		      margin-top: 1em;
		    }
		}

	#menu ul li.home a:hover{
		color: transparent !important;
		opacity: 0.33;
		/* border-color: var(--color0); */
	}

	#menu ul li.home a img{
		width: 100%;
		height: auto;

		transform: none !important;
	}

	@media  (max-width: 599px) {
		#menu ul li:not(.home),
	    #menu ul li:not(.home) a{
	      	color: transparent;
	      	width: 2em;
	      	height: 2em;
	      	line-height: 0em;
	      	position: absolute;

	      	overflow: hidden;

	      	display: flex;
        	justify-content: center;
        	flex-direction: row;
	    }
	    #menu ul{
		    margin: auto;
		    max-width: 80%;
	    }
	    #menu .menu_line{
	    	display: none;
	    }
	    #nav{
	    	overflow-y: visible;
	    	overflow-x: clip;
	    }

	    #menu ul li:not(.home) a{
		    transition: none;
		}
	}
	

/* LINK COLORS */

	#nav a{
		color: var(--color5);
	}
	#nav .current-menu-item a,
	#nav a[aria-current]{
		color: var(--color3);
	}
	#nav a:hover{
		color: var(--color3);
	}

/* HIDE UNTIL READY */

	#menu {
	    transition: opacity 1s;
	    opacity: 0;
	}

	#nav.ready #menu  {
		opacity: 1;
	}

	

/* TOP NAV */

	.wp-block-navigation{
		user-select: none;
	}

	.wp-block-navigation .pagan a span{
	    color: var(--color0);
	    transition: color 1s;
	}

	.wp-block-navigation .current-menu-item a span::after,
	.wp-block-navigation a[aria-current] span::after,
	.wp-block-navigation a:hover span{
		color: var(--color3);
	}

	header .wp-block-site-title{
		color: var(--color5);
	}

	/* PAGAN SYMBOLS */

		#menu ul li.pagan a::after,
		.wp-block-navigation .pagan a span::after{
			content: " ";
			font-family: 'Pagan';
			position: relative;
			font-size: 1.4em;
			transition: color 1s;
		}
		#menu ul li.pagan a::after{
			color: var(--color5);
		}
		.wp-block-navigation .pagan a span::after{
			color: var(--color5);
		}	

		#menu ul li.pagan a::after{
		    position: absolute;
		    line-height: 0;
		    top: 0.5em;
		    display: none;
		}
		
		#menu ul li.pagan a:hover::after,
		#menu ul li.current-menu-item a::after,
		.wp-block-navigation .current-menu-item a span::after,
		.wp-block-navigation a[aria-current] span::after,
		.wp-block-navigation .pagan a:hover span::after{
			color: var(--color3);
		}

		@media  (min-width: 600px) {
			.wp-block-navigation .pagan a{
				width: 1em;
		    	height: 1em;
		    	line-height: 0;
			}
			.wp-block-navigation .pagan a span{
			    font-size: 1em;
			    position: relative;
			    display: inline;
			    color: transparent;
			    line-height: 0em;
			    top: 0.5em;
			}
		}

		@media  (max-width: 599px) {
			.wp-block-navigation .pagan a span::after{
				margin-left: 1em;
				margin-right: 0.125em;
			}
			#menu ul li.pagan a::after{
			    display: block;
			}
		}

		/*
		.wp-block-navigation .pagan.home a span::after{
			content: "☖";
			font-size: 1.2em;
			top: 0.1em;
		}
		.wp-block-navigation .pagan.home a[aria-current] span::after,
		.wp-block-navigation .pagan.home a:hover span::after{
			content: "☗";
		}
		*/

		

		.wp-block-navigation .pagan.home a span::after{
			content: "w";
		}

		#menu ul li.pagan.daily a::after,
		.wp-block-navigation .pagan.daily a span::after{
			content: "J";
		}

		#menu ul li.pagan.adventure a::after,
		.wp-block-navigation .pagan.adventure a span::after{
			content: "L";
		}

		#menu ul li.pagan.human a::after,
		.wp-block-navigation .pagan.human a span::after{
			content: "S";
		}

		#menu ul li.pagan.contact a::after,
		.wp-block-navigation .pagan.contact a span::after{
			content: "E";
		}

	/* HIDE FONT LOAD CHANGE */
		.wp-block-navigation .pagan{
		    transition: opacity 1s;
		    opacity: 0;
		}

		.ready .wp-block-navigation .pagan{
			opacity: 1;
		}

/* TOOLTIP */

	#navtip{
		text-align: right;
		position: absolute;
		right: 0;
		top: 2em;

		width: 100%;
    	overflow: hidden;
	}
	#navtip span{
		position: relative;
		color: red;
		
	}
	#navtip span {
		opacity: 0;
		transition: color 0.2s, opacity 0s, left 0.2s;
	}

	#navtip.visible span {
		left: 0em;
		color: var(--colorB); opacity: 1; left: 0;
	}

/* MODAL */

	.has-modal-open .wp-block-navigation__responsive-container{
		display: none;
	}

	.wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-open{
		color: var(--colorB);
	}

	@media  (min-width: 600px) {

	}

	@media  (max-width: 599px) {

		#navtip{
			display: none;
		}

		.has-modal-open .wp-block-navigation__responsive-container{
			display: block;
		}

		html.has-modal-open{
			overflow: auto !important;
		}


		.has-modal-open .is-menu-open .wp-block-navigation__responsive-dialog{
			margin-top: 1.75em !important;
		}

		.has-modal-open .wp-block-navigation__responsive-container{
			background-color: rgba(0, 0, 0, 0.66) !important;
			background-image: linear-gradient(0deg, var(--colorC) 0%, rgba(0, 0, 0, 0) 100%) !important;
		}
		.has-modal-open .wp-block-navigation__responsive-container::before{
		    content: "";
		    position: fixed;
		    background-image: url(../img/frost.png);
		    background-size: cover;
		    top: 0;
		    left: 0;
		    max-width: 1780px;
		    width: 100%;
		    height: 100%;
		    opacity: 0.05;
		    z-index: 2;
		    pointer-events: none;
		    -webkit-animation-name: frostAnimation;
		    -webkit-animation-timing-function: linear;
		}

		.wp-block-navigation a span{
			font-size: 6vw !important;
			text-align: left;
		}
		.wp-block-navigation .pagan a span{
			padding-right: 1.75em;
			max-width: 80vw;
			display: block;
		}
		.wp-block-navigation li,
		.wp-block-navigation li a{
			width: 100%;

			display: flex;
			justify-content: flex-end;
    		flex-direction: column;
		}
		.wp-block-navigation .pagan a span::after{
			position: absolute;
			right: -0.33em;
		
			margin-top: -0.33em;

			top: 0.15em;
		    width: 1em;
		    text-align: center;
		}
		/*
		.wp-block-navigation__responsive-container-content{
			height: 90vh;
			display: flex !important;
		    flex-direction: column !important;
		    justify-content: center !important;
		}
		.wp-block-navigation__container{
			display: flex !important;
		    flex-direction: column !important;
		    justify-content: center !important;
		}
		*/
	}