@charset "UTF-8";
/*
	--menu-gap
	--menu-bgcolor
	--menu-color
	--menu-parent_bgcolor
	--menu-parent_bghover
	--menu-parent-color
	--menu-parent_hover
	--menu-parent_visited
	--menu-child_bgcolor
	--menu-child_bghover
	--menu-child_color
	--menu-child_hover
	--menu-child_visited
*/

/*------------------------
	Feral MENU (horizontal)
-------------------------*/
#feral-menu {
	--bar-width: 1.5rem;
	--bar-height: 0.2rem;
	--toggle-gap: 0.4rem;
	--toggle-margin: 1.5rem;
	--toggle-height: calc(var(--bar-height) * 3 + var(--toggle-gap) * 2);
	--foreground: white;
	--background: var( --menu-parent-bgcolor );
	--animation-timing: 200ms ease-in-out;

	--x-width: calc( var( --hamburger-height ) * 1.41421356237 );


	display: flex; 
	flex-direction: row; 
	gap: var( --menu-gap );
	padding: 0;
	margin: 0;
	pointer-events: none;
	z-index: 100;
	grid-area: menu;
	align-self: end;

	> li { 
		list-style: none;
		position: relative;
		display: flex;
		flex-direction: column; 
		justify-content: start;
		align-items: start;
		pointer-events: initial;

		> a { 
			display: block;
			cursor: pointer;
			padding: 0.15rem 0.75rem; 
			width: fit-content;
			white-space: nowrap;
			color: var( --menu-color );
			background: var( --menu-parent-bgcolor ); }
	}

	> li:first-child {
		display: none;

		position: absolute;
		top: var( --toggle-margin );
		right: var( --toggle-margin );
		width: calc( var( --bar-width ) );
		height: calc( var( --bar-width ) );
		z-index: 101; 

		background: var( --feralphp-color-primary );
		outline: 0.5rem solid var( --feralphp-color-primary );
		gap: var( --toggle-gap );
		cursor: pointer;

		input {
			appearance: none;
			padding: 0;
			margin: 0;
			outline: none;
			pointer-events: none; }

		input:checked {
			opacity: 0;
			width: 0; }


	}

	> li:first-child:has( input:checked ) {
		--foreground: white; }

	> li:first-child input,
	> li:first-child::before,
	> li:first-child::after {
			content: "";
			width: var( --bar-width );
			height: var( --bar-height );
			background-color: var( --foreground );
			border-radius: 9999px;
			transform-origin: center center;
			transition: opacity var( --animation-timing ), width var( --animation-timing ),
			rotate var( --animation-timing ), translate var( --animation-timing ),
			background-color var( --animation-timing ); }

	> li:first-child input:focus-visible,
	> li:first-child:has( input:focus-visible )::before,
	> li:first-child:has( input:focus-visible )::after {
			border: 1px solid var( --background );
			box-shadow: 0 0 0 1px var( --foreground ); }

	> li:first-child:has( input:checked )::before {
		rotate: 45deg;
		width: calc( var( --toggle-height ) * 1.3 );
		translate: calc( var( --bar-height ) / -1.41421356237 ) calc( var( --toggle-height ) / 2 - var( --bar-height ) / 2 ); }

	> li:first-child:has( input:checked )::after {
		rotate: -45deg;
		width: calc( var( --toggle-height ) * 1.3 );
		translate: calc( var( --bar-height ) / -1.41421356237 ) calc( var( --toggle-height ) / -2 + var( --bar-height ) / 2 ); }

	> li:first-child:has( input:checked ) + .sidebar {
		translate: 0; }



	li:not( :first-child ) {
		display: flex; }

	> li > ul {
		position: absolute;
		flex-direction: column;
		top: 100%;
		left: 0;
		display: none;
		min-width: 20rem;
		padding: 0;

		> li {
			display: flex; 
			color: var( --menu-parent-bgcolor );
			background: var( --menu-child-bgcolor );
			border-bottom: 0.5px solid black;

			ul {
				padding: 0; }
		}
	}

	> li:hover {

		> a { 
			color: var( --menu-hover );
			background: var( --menu-parent-bghover ); 
			text-shadow: 0.1rem 0.1rem 0.3rem rgba( 0, 0, 0, 0.4 ); }

		> ul {
			display: flex;
			top: 100%;
	
			a {
				display: block;
				padding: 0.25rem 0.5rem; 
				width: 100%; }
	
			a:hover {
				background: var( --menu-hover ); }

			li ul {
				display: none; }
	
			li:hover ul {
				display: flex; }
		}
	}
}

#feral-menu.toggled li:first-child {
	display: flex !important; }

#feral-menu.toggled li:not( :first-child ) {
	display: none !important; }

#feral-menu:has( :first-child input:checked ) li {
	display: flex !important; }










/* Modest Desktop or Wide Tablet layout */
@media screen and ( width < 1280px  )
{
}



/* Wide Mobile or Narrow Tablet layout */
@media screen and ( width < 800px )
{
	/*--  Convert Horizontal Menu to Vertical Menu on Panel  --*/
	#feral-menu { 
	/*	position: absolute; */
		flex-direction: column;
		gap: 1.0rem;
		background-image: none;
		top: -0.5rem; 
		right: 0;
		padding-top: 5.5rem;
		padding-bottom: 1.5rem;

		> li a {
			padding: 0.5rem 1.0rem; }

		> li:first-child {
			position: absolute;
			display: flex !important; 
			top: 2.0rem; }

		> li:not( :first-child ) {
			display: none !important; }

		> li > ul {
			position: relative; 
			width: 100%; 

			> li { 
				width: 100%;
				flex-direction: column;

				> ul {
					top: 0;
					left: 0; }
			}
		}

		a { width: 100% !important; }
	}



	#feral-menu:has( :first-child input:checked ) {
		background-image: linear-gradient( rgba( 0, 0, 0, 0.9 ), rgba( 100, 100, 100, 0.6 ) );
		box-shadow: -0.3rem 0.2rem 0.6rem black;
	}
}



/* Mobile Narrow layout */
@media screen and ( width < 800px )
{
	/*--  Convert Horizontal Menu to Vertical Menu on full width mobile  --*/
	#feral-menu { 
		width: 100%; 

		>li ul { flex-direction: column; }
	}

}