/*
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
header 				  { --navMENU__BKGD__ZeroY:      rgba(  0, 214, 170, 0.85); 
						--navMENU__BKGD__Scroll:     rgba(  0, 214, 170, 0.85); 
						--navMENU__OPTN__Lite:       rgba(250, 250, 250, 1.00); 
						--navMENU__OPTN__Dark:       rgba(  5,   5,   5, 1.00); 
						--navMENU__OPTN__BAR:        rgba(  5,   5,   5, 0.85); 
						--navMENU__BTN__Text:        rgba(  0,   0, 255, 1.00); 
						--navMENU__BTN__Back:        rgba(250, 250, 255, 1.00); 
						--navMENU__BTN__Frame:       rgba(250, 250, 255, 1.00); }
*/

body					  { margin: 0; }

header 					  { --navMENU__BKGD__ZeroY:      hsla(168,100%, 40%, 0.15);  /* green - sat - transparent */
							--navMENU__BKGD__Scroll:     hsla(168,100%, 40%, 0.85);  /* green - sat - nonish transparent */
							--navMENU__OPTN__Lite:       hsla(  0,  0%,100%, 1.00);  /* white */ 
							--navMENU__OPTN__Dark:       hsla(  0,  5%,  5%, 1.00);  /* black */
							--navMENU__OPTN__BAR:        hsla(  0,  5%,  5%, 0.85);  /* black - transparent */
							--navMENU__LOGO__Size:       120px;
							--navMENU__zIndex:			 1999;
							box-sizing: border-box;
							position: fixed;
							margin: 0;
							inset-block-start: 0;
							inline-size: 100%;
							display: grid;
							padding: 0 1rem 0 0;
							font-family: 'Work Sans', sans-serif;
							font-family: "Poppins", sans-serif;
							font-weight: 400;						
							background: var(--navMENU__BKGD__Scroll);
							grid-template-columns: minmax(50px, 1fr) var(--navMENU__LOGO__Size) minmax(auto, 6fr);
							grid-template-rows: auto auto;
							grid-template-areas: "ghToggle ghLogo  ghAccount ."
												 "ghPrime  ghPrime ghPrime   .";
							z-index: var(--navMENU__zIndex); }
header.zeroY		  	  { padding: 0 1rem 0 0;
							background: var(--navMENU__BKGD__Scroll); }	/* ALTER VERT PADDING ON INTERSECTIONAL OBSERVATION */
header a			   	  { font-size: 1.2rem;
							text-decoration: none;
							text-transform: uppercase;
							transition: opacity 150ms ease-in-out; }
header :where(h1,a) 	  { color: var(--navMENU__OPTN__Lite); }
header a:hover			  { color: var(--navMENU__OPTN__BAR); }
header :is(a).button	  { color: var(--site__BTN__Text); }

#navCLIK    	      	  { grid-area: ghToggle; 
							position: relative;
							display: flex;
							align-items: center;
							justify-items: stretch;
							justify-content: center;
							inline-size: 100%; 
							block-size: 100%;
							font-size: 3.0rem;
							z-index: calc( var(--navMENU__zIndex) + 10 ); }
#navCLIK-toggle 	  	  { font-size: 2.5rem;
							cursor: pointer;
							text-decoration: none; }
#navCLIK span  			  { color: var(--navMENU__OPTN__Lite); }
	
#navLOGO 				  { grid-area: ghLogo;
							display: flex;
							block-size: 5rem;
							flex-direction: column;
							justify-content: center; }
#navLOGO object 		  { max-block-size: 4rem;
							max-inline-size: auto;
							object-fit: fit; }	

#navBOOK      	    	  { grid-area: ghAccount;
							align-self: center;
							justify-self: right; }

#navMENU  		  		  { grid-area: ghPrime; 
							display: none;
							block-size: auto; }
#navMENU.open 			  { display:block; }
#navMENU ul			  	  { margin: 0;
							padding: 0;
							list-style: none; }
#navMENU li	  			  { margin-block-end: 1.0rem;
							margin-inline-start: 1.0rem;
							font-weight: 800; }
/*
#navBOOK .button 		  { border: 2px solid blue;
							border-radius: 2em;
							color: var(--navMENU__BTN__Text);
							letter-spacing: 1px;
							margin-inline-start: 1em;
							padding: 0.75em 1.5em; }
#navBOOK .button:hover	  { background: var(--navMENU__BTN__Back);
							border-color: var(--navMENU__BTN__Frame);
							transition: background 250ms ease-in-out; }
*/
@media screen and (min-width: 768px) 
{ header    	          { /* --navMENU__OPTN__Dark:       hsla(  0,  0%,  2%, 1.00); 
							   --navMENU__BKGD__ZeroY:      hsla(168,100%, 40%, 0.15); */
							padding: 0 3rem;            	/* ALTER VERT PADDING ON INTERSECTIONAL OBSERVATION */
							background: var(--navMENU__BKGD__Scroll);
							color: var(--navMENU__OPTN__Lite);
							grid-template-columns: auto var(--navMENU__LOGO__Size) minmax(auto, 6fr) minmax(60px, auto);
							grid-template-rows: auto;
							grid-template-areas: "ghToggle ghLogo ghPrime ghAccount"; }
  header :where(h1,a),	  
  header a:hover		  { color: var(--navMENU__OPTN__Lite); }		/* SPECIAL CASE CATCH - NavMENU a:hover OVERRIDE */		
  header.zeroY :where(h1,a),											
  header.zeroY a:hover	  { color: var(--navMENU__OPTN__Dark); }		/* SPECIAL CASE CATCH - NavMENU a:hover OVERRIDE */	
  header.zeroY		  	  { padding: 1rem 3rem;
							background: var(--navMENU__BKGD__ZeroY); }	/* SMALL SCREEN HEADER COLOR SET */
  header :is(a).button,
  header.zeroY :is(a).button
						  { color: var(--site__BTN__Text); }
  #navCLIK      	  	  { display: none; }

  #navMENU 				  { /* all: unset; */ 				/* this causes issues with Edge, since it's unsupported */
							position: relative;
							display: block;
							inline-size: 100%; 
							block-size: 100%;
							font-size: 3rem;
															/* the following lines are not from my video, but add Edge support */
							text-align: start;  /* text-align: left; */
							transition: none;
							background: none;
							inset-block-start: initial;
							inset-inline-start: initial; }	/* end Edge support stuff */
  
  #navMENU ul 			  { display: flex;
							align-items: center;
							justify-content: center;  /* space-evenly */ }
  #navMENU li 			  { margin: 0 1.5rem auto 1.5rem; }

  #navMENU a 			  { position: relative; }
  #navMENU a::before	  { content: '';
							display: block;
							block-size: 5px;
							background: black;
							position: absolute;
							inset-block-start: -0.75em;
							inset-inline-start: 0;
							inset-inline-end: 0;
							transform: scale(0, 1);
							transition: transform ease-in-out 250ms; }
  
  #navMENU a:hover::before 
						  { transform: scale(1,1); }
	}