@charset "UTF-8";

body {
	margin: 0;
	font-family: sans-serif;
}

input {margin: 0;}

/* Colors */
a, nav, .menu, .menu-icon, .submenu, .menu > li > a, .menu > li > label {background: #000099; color: white;}
.menu > li > label:hover, .menu > li > a:hover, .submenu li a:hover { color: #EE8 }
 
a, nav, .menu, .menu-icon, .submenu, .menu > li > a, .menu > li > label {background: white; color: black;} 
.menu > li > label:hover, .menu > li > a:hover, .submenu li a:hover { color: #009 }
/* */


nav {
	/*border-bottom: 1px solid #ccc; */
	display: flex;
	flex-direction: column;
	position: relative;		/* required for submenu positioning */
	margin-bottom: 1rem;
}

/* Hamburger icon */
.menu-icon {
	display: none;
	font-size: 2em;
	padding: 0.25em 1em;
	cursor: pointer;
	user-select: none;
	align-self: flex-end;
}

#menu-toggle {
	display: none;
}

#menu-toggle:not(:checked) + .menu-icon::before {
	content: "☰";
}

#menu-toggle:checked + .menu-icon::before {
	content: "×";
}

/* Main menu */
.menu {
	display: flex;
	flex-direction: row;
  justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	padding-top: 1rem;
	padding-bottom: 1rem;
	width: 100%;
}

/* MUST NOT set position of li:  if set, the submenu will be positioned relative to the li */
/* .menu > li { position: relative;} */

.menu > li > a,
.menu > li > label {
  font-size: 1.1rem;
	display: block;
	padding: 0.25em;
	margin: 0.25em 1em;
	text-decoration: none;
	cursor: pointer;
	position: relative;
}

/* menu items with submenus need space for up/down arrows */
.menu > li > label {
	padding-right: 2em;
}

.menu li a.trial-menu {
  background-color: #000088; 
  color: white ;
  padding: 4px 20px;
  border: none;
  border-radius: 12px;
  text-decoration: none; 
  display: inline-block;
  transition: background-color 0.3s ease, text-decoration 0.2s;
}

.menu li a.trial-menu:hover {
  background-color: #0000CC;
  text-decoration: underline !important;  /* underline on hover */
}

.submenu-toggle {
	display: none;
}

.submenu-toggle + label::after {
	content: " ⌵";
	position: absolute;
	right: 1em;
	font-size: 0.8em;
}

.submenu-toggle:checked + label::after {
	content: " ⌃";
}

/* Show submenu when toggle is checked */
.submenu-toggle:checked + label + ul.submenu {
	display: block;
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
	min-width: 120px;
  z-index: 1000;
  background: white;

	list-style: none;
	margin: 0;
	padding: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.submenu li {
	border: none;
}



.submenu li a {
	display: inline-block;
	margin: 0.3em 1em;
	padding: 0.25em;
	text-decoration: none;
	/* color: black; */
	white-space: nowrap;
}


/* Underlining */
.menu > li > a,
.menu > li > label,
.f-nav-col-line a,
.submenu li a {
	position: relative;
}

.menu > li > a::before,
.menu > li > label::before,
.submenu-content h3::before,
.f-nav-col-line a::before,
.submenu-content a  {
  position: relative;
  display: inline-block; /* or block if you prefer full width links */
  align-self: start; /* key fix to prevent stretching in flex column */
  }

.menu > li > a::before,
.menu > li > label::before,
.f-nav-col-line a::before,
.submenu-content a::before  {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	background: currentColor;
	transform: translateX(-50%);
	transition: width 0.3s ease, left 0.3s ease;
}

.menu > li > a:hover::before,
.menu > li > label:hover::before,
.f-nav-col-line a:hover::before,
.submenu-content  a:hover::before {
	width: 100%;
	color: #0066ff;
}


.submenu-toggle:checked + label + .submenu {
  display: block;
}

.submenu-content {
  margin: 0 auto;
  display: grid;
  text-align: left;  
  justify-content: space-evenly ; 
  column-gap: 2em;         
  gap: 2em;
  padding: 1em 2em;
  flex-wrap: wrap;
}
.submenu-content .col p {
	/* padding: 0; */
	margin: 0;
	line-height: 1.4;
}

/* max-content is fine for submenus, but not for long text */
.grid-1col { grid-template-columns: max-content; }
.grid-2col { grid-template-columns: max-content max-content; }
.grid-3col { grid-template-columns: repeat(3, max-content); }
.grid-4col { grid-template-columns: repeat(4, max-content); }

.submenu-content .col {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
}

.submenu-content a {
  margin: 0.25rem 0;
  padding-left: 0.5rem;
  text-decoration: none;
  color: black;
}

.submenu-content h3, .submenu-content h3 a {
  font-size: 1.1rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  padding-left: 0.25rem;
  
  /*  display: inline-block;
  line-height: 1.2; 
  vertical-align: baseline; */
  }

.footer-nav {
	font-size: 0.9rem;
	color: #666 !important;
  display: grid;
  text-align: left;  
	grid-template-columns: repeat(auto-fit,  210px);
  gap: 1px;
  padding: 10px;
  margin: 5px auto;
  justify-content: space-evenly;   
  /*border: 1px solid #ccc; */
}

.footer-nav-col {
  /* border: 1px solid #ccc; */
}

.f-nav-col-head {
	color: #444 !important;
	font-size: 1rem;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 6px;
	padding-left: 10px;
}

.f-nav-col-line, .f-nav-col-line a {
	color: #666 !important;
	text-decoration: none;
	padding-top: 0.5rem;
	margin: 0px;
	margin-left: 0.75rem;
	line-height: 1.2;
}
.f-nav-col-line a {
	text-decoration: none;
}
.f-nav-col-copy {
	font-size: 0.9rem; /* smaller looks bad */
}

/******** Narrower windows ********/
@media (max-width: 800px) {
	.grid-4col { grid-template-columns: max-content max-content; }
}

/******** Mobile layout ********/
@media (max-width: 680px) {

h3 {
font-size: 1rem !important;
  margin-top: 0.2rem;
}

h3 a{
font-size: 1rem !important;
  margin-top: 0.2rem;
}


.submenu {
  position: static;
  width: 100%;
  border: none;
}

.submenu-content {
  display: flex;
  flex-direction: column;
  padding: 0.5em 1em;
  gap: 0.5em;
}

.submenu-content .col {
  width: 100%;
  padding: 0.25em 0;
  flex: none;
}

	.menu-icon {
		display: block;
	}

	.menu {
		display: none;
		flex-direction: column;
	}

	#menu-toggle:checked ~ .menu {
		display: flex;
	}

	.menu > li {
		border-top: 1px solid #ddd;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	.menu > li > label {
		width: fit-content;
		max-width: calc(100% - 2em); /* avoids pushing arrow to far edge */
		padding-right: 2em; /* keeps space for arrow */
	}
	.menu > li > a {
		width: fit-content;
		max-width: calc(100% - 2em); /* avoids pushing arrow to far edge */
	}
	
	.submenu {
		position: static;
		border: none;
	}

	.submenu li a {
		margin-left: 2em;
	}

}