/**** CONTENTS    Flyout Theme
Reset, Globals, Body & Fonts
Masthead, Desktop-First
        then Masthead queries
Midwrap
        then midwrap queries
Footer
Other
Nav Menu  (Desktop & General)
Nav Menu Media Queries for Phone
Other		
**********/
    
		/********* COLORS & VARIABLES ********/
.main {}      /*TO DO: ColorSet */
.sidebar {}
		
:root {
  --leftbarback: #99CCFF;
  --mainbackground: #141f4a; /*darkNavy*/
  --txtcolor: #ffffff;
  
     /* for Desk Flyout Menu */
--navbaseback: #dedede; /* #dedede; this is color of lines between the top tier items, the bckgrnd behind them*/
--navbaseborder: 2px solid #162436; /*the border around the nav block*/
--navbaseradius: 4px;
--toptieritemback:  #FFB100; /* TopTier BackColor, orig Maize #FFB100; */
--toptieritemtxtcolor: black;
   /* Sub Menus*/
--submenuback:  #24125C; /*[background color for the subMenu Block(NOT its items )]  background-image:none; */
--submenuitemback:  green;  /*orig: #24125C; */
--submenutxtcolor: white;
--submenuborder:  1px solid white;
--submenuborderradius:  4px;
--menu-shadow:  3px 3px 6px #3E3E3E;  /*box shadow ORIG:  0.7px 0.7px 1px #3E3E3E;  */
--submenuhoverback:  #FF4D3F; /** Hovering: Orig,SALMON color, as hover over an item ***/
--submenuhovertxtcolor:  black;
         /*Mobile menu:  */
--mobileleftbarback:  #dedede;
--mobilebarback:  #e5b13f;  /* #FFB100;  #dedede; this is color of bckgrnd of  mobile Bar , including the background color of the hamburg icon*/
--hamburger-color: #0020ff;  /* Color of the hamburger icon bars */
--hamburger-shadow: 0 8px #0020ff, 0 16px #0020ff;  /* Box shadow for hamburger icon (creates 2nd & 3rd bars) */

}/*End :Root*/



         /**** BODY   ******/
body { 
line-height: 1.5;
background-color: lightskyblue;
background: url('images/medallion-lightblue.avif');    /* Option: make for min-width: 768px only */
min-height: 100vh;   /* so back pic fills to bottom of screen, no matter the zoom */
font:  1.08em Verdana, Tahoma, Geneva, sans-serif;   /* Global Fonts & Styles */
/* -webkit-font-smoothing: antialiased;  */ 
}  

	  /**** Headings  ****/
h1, h2, h3, h4, h5, h6  {
   text-align: center;
   font-family: Rockwell, Georgia, Book Antiqua, Times New Roman, serif; 
  /* also consider:  Palatino Linotype, Book Antiqua, Palatino,  */
}
h1{  font-size: 2rem;  }
h2, h3, h4, h5, h6  {   /** NOT for h1, bcuz tt is pageTitle, which sd Not have space above it  **/
  margin-top: 1.4em;     margin-bottom: -0.7em;
}  

	
	/*********** Modern CSS Reset & Globals *********/
*, *::before, *::after {   margin: 0;    padding: 0;   }
    /*** !!note: DO NOT use box-sizing: border-box; in Reset, because it messes up the mobile menu's hamburg icon position! (instead, use border box in specific divs if needed) ****/

html {
    -webkit-text-size-adjust: 100%; /* Prevents text scaling on iOS when rotating to landscape */
    /*  scroll-behavior: smooth;    /*Smooth scrolling for anchor links */ 
}

/* Inherit fonts for inputs and buttons: */
input, button, textarea, select {   font: inherit;  }

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.hilite-block {
    background-color: #008000;      color: white;
	padding: 10px 20px;
    border-radius: 12px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
	max-width: fit-content;  margin-inline: auto;	   /* these will center the div */
}
.hilite-block a { color: white !important;  text-decoration: none; }
.hilite-block a:visited { color: white !important; text-decoration: none;  }
 
 
 
		/************ Globals ******************/
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%; /* Responsive media */
    margin: 0.1em; 	
}		
/* for responsive images */
img {
    max-width: 100%;    /* Image will never exceed container width */
    height: auto;       /* Height adjusts proportionally */
    display: block;     /* Removes any unwanted space below image */
    object-fit: contain;  /* Ensures image fits while maintaining aspect ratio */
}


span.mark {  background-color: yellow;}
span.dropcap { font-size : 200%; background-color: #4725b7; color:white; 
                          font-family: Palatino Linotype, Book Antiqua, Palatino, serif;   } 
a:hover {  font-weight: bolder;}   /*great for hovered links*/
	


/*******************************************
                                 MastHead  (Header) 
********************************************/
#masthead {
     display: flex;
	flex-wrap: wrap;
    	margin-bottom: 10px;
	border: none;	   /* border: 2px solid red;*/
}
#leftheader {
    flex: 1;   /* Takes 1 part of available width space */
    
      /* Add these properties to center the image */
    display: flex;  /*enables flexbox, thus can do the following */
    justify-content: center; /* horizontal centering in a flex container */
    align-items: center;   /* vertical centering in a flex container */
    padding: 10px;
}
#leftheader img {  /* so pic won't overflow its div. (BUT this aly in globals?)  */
    max-width: 100%;
    height: auto;
    display: block;
}

#centerheader {
flex: 3;  /* Takes 3 parts of available width space */
/* border: 1px solid red; */
}
#sitename {
    	background: #ddd;  /* opacity: 0.94; */
	color: red; 
	width: 600px ; 
	font-family: Rockwell, Georgia, Book Antiqua, Times New Roman, serif; 
	font-size:4em;  font-weight:bold;
	text-align: center;  
	text-shadow: 2px 3px 3px rgba(4,4,4,0.6);
       /*Shadow Syntax:   text-shadow: horizontal-offset    vertical-offset   blur    color+transparency;*/
	padding: 0px 5px 0px 5px;	
	margin: 5px auto; 
     border: 1px solid #000;   border-radius: 12px;    
     line-height: 1.2; /* Global line height is 1.6, which gives too much space above+below this text, so i set it back to 1.0 */
}
#tagline {
    	background: #0514bb; 	color: #fff;
	width: 300px ; text-align: center;
	margin-left: auto; margin-right: auto ; 	margin-bottom: 5px;	
     border: 1px solid #000;	border-radius: 6px;    
}

#rightheader {
     flex: 1;  /* Takes 1 part of available width space */
     border: 1px solid #000;
}

/************  Queries for Masthead: Phone   ******************/
@media screen and (max-width: 768px) {
    	
    /* Masthead mobile adjustments */
    #masthead {   
        padding: 0;   
        padding-top: 55px; /* Reduced from 80px to 45px for better spacing */
    }

    #leftheader {
        flex: 0 0 28%; /* wider % on phone, versus desktops */
        padding: 10px 0; /* Remove left/right padding, keep top/bottom */
    }

    #centerheader {
        flex: 1; /* This will take all remaining space */
    }

    /* Adjust any potential overflow issues */
    #sitename {
        width: auto; /* Override fixed width */
        font-size: 1.8rem; /* Slightly smaller for mobile */
        margin: 5px;
    }

    #tagline {
        width: auto; /* Override fixed width */
        margin: 5px;
    }
	
	#rightheader {  
        display: none;   /* Hides on phones or small tablets. */
        flex: 0 0 0%;  /* Ensures it takes no space in flex layout */
        width: 0;
    }
	
	
}  /* END query */

  
/************  Top NAV & Breadcrumbs   ******************/
#topnav { 
background-color: var(--navbaseback);
color:#000;
margin: 0;
padding: 0;
width: 100%;
border: var(--navbaseborder);
border-radius: var(--navbaseradius);
}

/* Desktop-only: TopBar Menu horizontal layout */
@media screen and (min-width: 769px) {
    #topnav ul#menu {
        display: flex;
        background-color: var(--navbaseback);
        border: var(--navbaseborder);
        border-radius: var(--navbaseradius);
    }
    
    #topnav ul#menu > li {
        flex: 1;
        margin: 0;
    }
    
    #topnav ul#menu > li > a {
        text-align: center;
        padding: 12px 8px;
        border-right: 1px solid var(--navbaseback);
    }
    
    #topnav ul#menu > li:last-child > a {
        border-right: none;
    }
    
    /* Change top-tier arrows to point DOWN on desktop */
    #topnav ul#menu > li > a > span:after {
        content: "▼";  /* Down arrow instead of right arrow */
    }
}

/* Second-tier submenus - drop down instead of fly right */
#topnav ul#menu > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: var(--submenuback);
    border: var(--submenuborder);
    border-radius: var(--submenuborderradius);
    box-shadow: var(--menu-shadow);
    z-index: 99999;
    padding: 0 9px 9px;
}

/* Third-tier and beyond - continue flying right */
#topnav ul#menu ul ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 200px;
}

/* Show submenus on hover */
#topnav ul#menu li:hover > ul {
    display: block;
} 

/******  BREADCRUMBS  */
.breadcrumbs { 
background-color: #ccc;
color:#000;
margin-left: 0%;
} 


/***********************************  
                   Midwrap  
****************************************/
#midwrap {    
    border: none;      /*border: 2px solid red; */
    display: flex;
    width: clamp(320px, 95%, 1400px);
    justify-content: space-between;
    margin: 0 auto;
    padding: 1em;	 
    max-width: 1800px;
    gap: 4%;   /* gap between flex items */
	/* align-items: flex-start;  /* Makes Column Lengths only be as long(tall) as their content(like Floats do) */
    overflow: visible; /* Changed from hidden to visible, so that flyout menu shows over endbar */
}



/************  Leftbar  *************/
#leftbar {
    flex: 0 0 18%;
    box-sizing: border-box;
    background: var(--leftbarback);
    padding: 0;
}

/***********  Main CONTENT *************/
.main {
    background:  #0d1f77;     color: white;  
	flex: 1 1 0%; /* Force equal distribution regardless of content */
    box-sizing: border-box;
    padding: 0.5em 1.2em;
	border: 2px groove  #ffb100;  /* #ffb100;      /*was: #73AD21;  */
    border-radius: 12px; 
    min-width: 0; /* Prevents flex items from overflowing */
}
#main{ padding-top: 0.7em; }
.main a { color:  #7de6f7; text-decoration-style: double;}  /* #7de6f7; */
.main a:visited {color:  #cfa8fa; text-decoration-style: double; } /* #cfa8fa; */
.main p {
    margin: 1.0em  0.2em;     /*effects line space between paragraphs */
    line-height:1.5;     /* line-height */
    white-space: pre-wrap;   /* This preserves my white space between sentences!!   */
	/* text-indent: 1.5em;     /* paragraph  Tab Indent  */
}  

#pagetitle { 
     font-family: Rockwell, Georgia, Book Antiqua, Times New Roman, serif; 
     font-size: 1.3rem;
}
 
/***** RightBar ******/ 
#rightbar {
    background: #99ccff;    color: black;
    flex: 0 0 20%;
    box-sizing: border-box;
    padding: 0.7em;
}
#rightbar a { background: #afceed;  color: #0000EE; }  
#rightbar a:visited { background: #afceed; color: #551B8C; } 


/********Queries for XLarge Monitor **********/
@media screen and (min-width: 1200px) {  /* for Very Large Monitors only */
    body {   padding: 20px;    /* constrains all elements, so backgrnd pic shows at edges */
    }    
} 

/********Queries for Midwrap  TabletLaptop **********/
@media screen and (max-width: 1110px) {
    #midwrap {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        box-sizing: border-box;
        gap: 1%;
        display: flex;
        flex-wrap: nowrap;
    }
    #leftbar {
         background: var(--mobileleftbarback);
		flex: 1 1 50%;
		padding: 0.3em;
     }
    .main {
        flex: 1 1 50%;
        padding: 0.3em;
        min-width: 0;
    }
    #rightbar {
        flex: 0 0 21%; 
        padding: 0.3em;
	    display: none;	
    }
} /* END Media Query of Midwrap TabletLaptop */

/********Queries for Midwrap Phone **********/
@media screen and (max-width: 768px) {
    #midwrap {
        flex-direction: column; /* Stack items vertically */
        width: 100%;
        padding: 0 0px;
        gap: 1em; /* Vertical gap between stacked items */
    }
    
    #leftbar, #main, #content2, #content3, #rightbar {
        flex: none; /* Remove flex constraints */
        width: 100%;
        margin: 0; /* Remove any margins */
    }
    
    #main, .main {
	   font-size: 1.5rem; 
        padding: 0.2em;
        border-width: 2px;
    }
	#main{ padding-top: 0.7em; }
	#pagetitle {  }  /* was:font-size: 1.2rem;  BUT now uses h1 for styling */
	

}/* END Media Query for Midwrap Phone */
      
	  
/************  Footer  & Endbar *****************/  
#endbar {
  clear: both;
  background-color: #ded4fd;
  color: black;
  width: 100%;
  padding: 0.3em 0;
  font-size: 90%;
  border: 7px solid #5B0000;
  position: relative;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
}
#endbar .left-end {
  float: none;
  width: 90%;
  margin: 0.5em auto;
  text-align: center;
  padding: 0.3em;
}
#endbar .right-end {
  float: none;
  width: 90%;
  margin: 0.5em auto;
  text-align: center;
  padding: 0.3em;
}
#endbar a {  background-color:#1e164e;  color: white; text-decoration: underline; padding: 4px;}

/* Clear fix for endbar */
#endbar:after {
  content: "";
  display: table;
  clear: both;
}

/*************** Other Styles **********/	

  





/************************************* 
                        Flyout MENU 
****************************************/

/* Menu container styles:*/
ul#menu {
    width: 100%;
    font-size: 0;
    z-index: 9999;
    position: relative;
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    /* box-sizing: border-box; ?NOT needed??   */
}

ul#menu,ul#menu ul{
	margin:0;list-style:none;padding:0;
	background-color:  var(--navbaseback);   /* #dedede;  this is color of lines between the top tier items, the bckgrnd behind them*/
	/* background-image:url("menuBkgrd.png");background-repeat:repeat; */ 
	border: var(--navbaseborder);
     border-radius: var(--navbaseradius);
}
ul#menu li:hover>*{	display:block;}
ul#menu li{	position:relative;display:block;white-space:nowrap;font-size:0;}


ul#menu li:hover{	z-index:1;}


ul#menu>li{	margin:1px 0 0;}


ul#menu a:active, ul#menu a:focus{	outline-style:none;}

ul#menu a {   /*TopTier */
    width: 100%;     display: block;
    vertical-align: middle;  text-align: left;
    background-color: var(--toptieritemback);  /* TopTier BackColor, orig Maize #FFB100; */
    /* background-image: url("menuBkgrd.png");
    background-repeat: repeat;  background-position: 0 200px; */
     color: var(--toptieritemtxtcolor); 
	border-width: 0;   border-style: none;
    font: bold 12px Tahoma,Geneva,sans-serif;
    text-decoration: none;
	cursor: default;
    padding: 10px;
    box-sizing: border-box;
}
	

/****** Sub menus:  */	
ul#menu ul li {   /**** Desktop submenu's positioning: *****/
        float: none;
        margin: 2px 0 0; /* Reduced from 9px to 2px. this sets how much submenus are set lower than their parent, rather than parallel.  */
}

ul#menu ul{
	display:none;position:absolute;left:100%;top:0;
	box-shadow: var(--menu-shadow);
	background-color: var(--submenuback); /*orig #24125C; /*[background color for the subMenu Block(NOT its items )]  background-image:none; */
	
	border: var(--submenuborder);
	border-radius: var(--submenuborderradius);
	padding:0 9px 9px;
	z-index: 99999; /* Added z-index to ensure submenus appear above everything */ }
ul#menu ul ul{	position:absolute;left:100%;top:0;}

ul#menu ul a{  /* Submenu items*/
	background-color: var(--submenuitemback); /*color of submenu items(NOT hovered) */
	color:  var(--submenutxtcolor); 
	text-align: left;
	padding: 8px 10px;  /* 8px vertical, 10px horizontal padding */
	font: bold 12px Tahoma,Geneva,sans-serif;
	text-decoration: none;
}

ul#menu ul li:hover>a,ul#menu ul li a.pressed{  /** Hovering:  The SALMON color, as hover over an item ***/
	padding: 8px 10px;  /* Same padding as normal state */
	background: var(--submenuhoverback); 
	color: var(--submenuhovertxtcolor);  
	text-decoration: none;
}

ul#menu li.subfirst>a{
	border-width: 0;  border-style: none;
	padding: 8px 10px;  /* Same padding as other submenu items */
}
	
	
	
/* Fix submenu positioning for all screens */
ul#menu ul {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: auto;
    min-width: 200px;
    box-sizing: border-box;
}

/* Ensure menu items stay within container */
ul#menu {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

ul#menu a {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

ul#menu img{  /* not needed? is this for tt old arrows.gif i don't use now?  */
	border:none; vertical-align:middle; margin-right:10px;}
ul#menu span {
    display: block;
    position: relative;
    padding-right: 20px; /* Space for the arrow */
}

ul#menu span:after {
    content: "›";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: inherit;
}

ul#menu ul span {
    position: relative;
}


	
	
ul#menu > label.switch{
	display:none;cursor:pointer;width:25px;height:20px;padding:10px;}
ul#menu > label.switch:before{
	content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;
	
	/*Mobile Hamburg Icon??:
	background:   #000000;  /* was: #FF3300;  /*3bar HamburgIcon: Color of 1st bar in mobile icon*/
	/*the box shadow duplicates the above bar, making it appear 3 times in all; thus a 'menu icon' of 3 bars is created.*/
	/* -moz-box-shadow:0 8px #FF3300, 0 16px #FF3300;-webkit-box-shadow:0 8px #FF3300, 0 16px #FF3300;box-shadow:0 8px #FF3300, 0 16px #FF3300; 
	*/
	/* background:   #000000; 
	-moz-box-shadow:0 8px #000000, 0 16px #000000;-webkit-box-shadow:0 8px #000000, 0 16px #000000;box-shadow:0 8px #000000, 0 16px #000000; 
	*/
	
}
	
	
ul#menu > label.switch:hover:before{
	background:#121A40;
	-moz-box-shadow:0 8px #121A40, 0 16px #121A40;-webkit-box-shadow:0 8px #121A40, 0 16px #121A40;box-shadow:0 8px #121A40, 0 16px #121A40;}
ul#menu > .switchbox{	display:none;}

/* Hide mobile elements on desktop */
.mobile-favicon,
.mobile-sitename {
    display: none;
}
	

  /*************************** for MOBILE MENU     **************************/
@media screen and (max-width: 768px) {
    #topnav ul#menu {  /* Mobile Bar - Now Sticky at Top */
        width: 100%;
        float: none;
        position: fixed; /* Make it sticky */
        top: 0; /* Position at very top of screen */
        left: 0; /* Align to left edge */
        z-index: 10000; /* Ensure it stays above everything */
        min-height: 40px;
        background-color: var(--mobilebarback);  
        padding-top: 40px; /* Add space for the hamburger bar */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Add subtle shadow for better visibility */
    }



    /* Create a fixed bar for the hamburger icon */
    ul#menu > label.switch {
        display: block;
        cursor: pointer;
        width: 25px;
        height: 20px;
        padding: 10px;
        position: absolute;
        right: 10px; /* Position on right */
        top: 0;
    }

    /* Adjust the hamburger icon position within its bar */
    ul#menu > label.switch:before {
        content: "";
        position: absolute;
        display: block;
        height: 4px;
        width: 25px;
        border-radius: 4px;
         /* Color of Mobile Icon /Hamburger Icon (& needs the shadow)  */
        background: var(--hamburger-color);
        box-shadow: var(--hamburger-shadow);
        left: 10px; /* Keep the icon aligned within its clickable area */
        top: 10px;
    }

    /* Ensure menu items start below the hamburger bar */
	ul#menu > li {
        display: none;
        position: relative;
        width: 100%;
        margin-top: 0; /* Reset margin since we're using padding-top on the container */
    }

    /* Show menu items when checkbox is checked BUT keep the label visible */
    ul#menu .switchbox:checked ~ li {
        display: block;
    }

    /* Remove the rule that might be hiding the label when menu is open */
    ul#menu .switchbox:checked ~ label.switch {
        display: block; /* Explicitly keep the label visible */
    }

    /* Adjust submenu positioning for mobile */
    ul#menu ul {
        display: none !important; /* Force hide by default */
        position: relative !important;
        left: 0 !important;
        width: 100% !important;
        margin-left: 20px;
        box-shadow: none;
    }

    /* Show submenu only when it has the show-submenu class */
    ul#menu ul.show-submenu {
        display: block !important;
    }

	 ul#menu ul li {   
        float: none;
        margin: 9px 0 0;  /*  Positioning subMenus. Uses original 9px margin for mobile */
    }

	
	
	ul#menu span:after {   /* This is the touch arrow on mobile, to open submenus */
        content: "›";
        right: 0;
        width: 50px; /* Wider touch target */
        height: 230%; /* Much taller touch target - 2.3x the height */
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0,0,0,0.1);
        position: absolute;
        top: 50%;
        transform: translateY(-50%); /* Center vertically */
        cursor: pointer;
        font-size: 28px; /* Much larger arrow */
        font-weight: bold; /* Bolder arrow */
        transition: transform 0.3s ease;
    }

    /* Adjust the parent span to accommodate the larger arrow area */
    ul#menu span {
        padding-right: 50px;
    }

    /* Rotate arrow upward (270 degrees) when submenu is open */
    ul#menu span.submenu-open:after {
        transform: translateY(-50%) rotate(270deg);
    }

    /* Add a slightly darker background when arrow is in open state */
    ul#menu span.submenu-open:after {
        background-color: rgba(0,0,0,0.15);
    }

    /* Show mobile elements on mobile */
    .mobile-favicon {
        display: block !important;
        position: absolute;
        left: 10px;
        top: 8px;
        width: 24px;
        height: 24px;
        z-index: 10001;
    }

    .mobile-sitename {
        display: block !important;
        position: absolute;
        left: 44px; /* Position after favicon */
        top: 0px;
	    font-family: Rockwell, Georgia, Book Antiqua, Times New Roman, serif; 
        font-size: 20px;
        font-weight: bold;
        background-color: #0000ff;
        color: #ffffff;  
        padding: 10px;
        padding-top: 7px;
        z-index: 10001;
        max-width: calc(100% - 80px); /* Leave space for hamburger icon */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}  /*********** END of MENU Media Queries */