/* CSS Document - Visual Information Design */

/* 1. Global Page Settings */

body {
	background-color: #D6E4F0; /* Light blue page backdrop */
	font-size: 16px;
	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #11161B;
	margin: 0;                 /* Reset margins to edge out background colors */
	padding: 0;
	}

#wrapper {
	max-width: 1000px;         
	margin: 0 auto;            /* Centers the main contect wrapper */
	background-color: #F0F8FF; /* Alice blue for background color */
	padding: 20px;             /* Wrapper boundary spacing */
	box-shadow: 0 0 15px rgba(0,0,0,0.05); /* Drop shadow for visual separation */
	}


/* 2. Semantic Element Structural Layouts */

header {
	background-color: #2C3E50; /* Deep navy/slate*/
	/*padding: 20px 15px;*/
	border-bottom: 4px solid #B22222; /* Crimson red accent for the Header */
	
	/* Margin and padding adjustments for Nav selector box */
	margin: -20px -20px 0 -20px;       	
	padding: 30px 35px; 
	}

header h1 {
	color: #E1EBF5;  /* h1 heading to crisp white */
	font-size: 36px;
	margin: 5px 0px;
	padding: 0;                
	}

nav {
	padding: 0; 
	border-bottom: 3px solid #B22222; 
	width: auto;                       
	margin-left: -20px;   /* Margin spacing adjustments for Nav selector box */
	margin-right: -20px;  
	box-sizing: border-box;            
	}

main {
	padding: 25px 0px 10px;    /* Main container boundaries*/
	}

footer {
	background-color: #2C3E50; /* Matching Header color */
	color: #E1EBF5;            /* Light gray-blue text */
	margin-top: 10px;
	padding-bottom: 15px;
	border-top: 3px solid #B22222;
	}

footer address, footer p, footer a {
	margin-left: 5px;  /* 10px total offset (Matches h4) */
	padding-left: 5px;
	color: #E1EBF5 !important; 
	}

footer address {
	margin-top: 15px;
	margin-bottom: 15px;
	font-style: normal; 
	}
	
footer small {
	display: inline-block;
	margin-left: 0px;
	}

footer a:link, footer a:visited {
	color: #E1EBF5 !important;
	text-decoration: underline;
}

footer a:hover {
	color: #D2E1F0 !important;
	text-decoration: none;
	}

/* 3. Headings */

h1, h2, h3, h4, dt, caption {
	font-weight: bold;
	}

h2 {
	color: #B22222;
	background-color: #D2E1F0;
	font-size: 22px;
	margin-top: 4px;
	margin-bottom: 10px;
	padding: 14px 8px;
	}

h3 {
	color: #B30000;
	font-size: 20px;
	margin-top: 12px;
	margin-bottom: 10px;
	margin-left: 8px;
	}

h4 {
	color: #8B0000;
	font-size: 16px;
	margin-top: 4px;
	margin-bottom: 6px;
	margin-left: 5px; /* 10px total offset combined with 5px padding */
	}


/* 4. Paragraph, Images and Spacing */

p, img, dt, h4, form {
	padding-left: 5px; /* spacing placeholder for now */
	}

p {
	margin-top: 0px;
	margin-left: 12px;
	margin-bottom: 15px;
	font-size: 16px;
	line-height: 1.6; 
	padding-right: 10px;
	}

p.bold {
	font-weight: bold;
	}

/* float image spacing adjustments */
img.homeimg1 {
  float: right;
  margin: 20px 20px 20px 15px; 
}

img.homeimg2 {
  float: right;
  margin: 60px 20px 60px 20px; 
}

img.infoimg1, img.infoimg3  {
  float: left;
  margin: 20px 30px 40px 10px; 
}

img.infoimg2, img.visimg1, img.visimg3 {
  float: right;
  margin: 20px 15px 20px 15px; 
}

img.infoimg4 {
  float: right;
  margin: 20px 15px 20px 15px; 
}

img.infoimg5 {
  float: right;
  margin: 15px 25px 20px 15px; 
}

img.visimg2, img.visimg4 {
  float: left;
  margin: 15px 28px 20px 10px; 
}

/* 5. Lists & Data Grids */

ul, ol {
	margin-left: 20px;
	margin-bottom: 15px;
	line-height: 1.6;
	}

ul	{
	list-style-type: disc;
	}

dt	{
	margin-left: 12px;
	margin-top: 5px;
	line-height: 1.6;
	padding-left: 5px;
	}

dd {
	margin-left: 20px;
	line-height: 1.6;
	}

table {
	margin: 20px 15px 25px 20px;
	border-collapse: collapse;
	}

th, td {
	color: #800000;
	padding: 8px 12px;
	}

th {
	background-color: #D2E1F0;
	padding-right: 10px;   
	text-align: left;
	}

td {
	background-color: #E1EBF5;
	}

caption {
	color: #CC0000;
	font-size: 18px;
	margin: 0px 0px 15px 15px;
	}

/* 6. Interactive Form Inputs */

form {
	margin: 8px;
	padding-left: 5px;
	}

div.space {
	margin-top: 4px;
	margin-left: 2px;  
	margin-bottom: 12px;
	}

input, button, select, textarea {
	font-family: inherit;
	font-size: 16px;
	margin-top: 5px;
	}

/* 7. Link states */

a {
	transition: color 0.25s ease-in-out;
	}

a:link {
	color: #B22222;
	text-decoration: underline;
	}

a:visited {
	color: #8B0000;
	}

a:hover {
	color: #CC0000;
	text-decoration: none;
	}

a:active {
	color: #11161B;
	}

/* 8. Navigation Bar Flexbox Layout */

.container {
	background-color: #E1EBF5;     /* Soft blue for the menu bar background */
	padding: 0;                    
	margin: 0;
	width: 100%;                   /* Fluidly sticks to full calculated nav row width */
}

.nav-links {
	display: flex;                 
	list-style: none;              
	padding: 0;                    
	margin: 0;                     
	align-items: stretch;          
	background-color: transparent; 
	font-size: 16px; 
	width: 100%;                   
}

/* Nav selector box */
.nav-links li {
	flex: 1;                       
	text-align: center;            
	padding: 14px 0;               
	transition: background-color 0.25s ease-in-out;
	display: flex;                 
	align-items: center;
	justify-content: center;
	border-bottom: 4px solid transparent; 
}

/* Nav-links config */
.nav-links a,
.nav-links a:link,
.nav-links a:visited,
.nav-links a:hover,
.nav-links a:active {
	display: block;                
	width: 100%;                   
	text-decoration: none !important; 
	font-weight: bold;
	color: #B22222;
}

/* Hover state color */
.nav-links li:hover {
	background-color: #D2E1F0;     
}
.nav-links li:hover a {
	color: #B30000;                
}

/* Multiple descendent Nav selection */
#home nav .home,
#information nav .information,
#visual nav .visual,
#tools nav .tools,
#contact nav .contact {
	background-color: #D4E3F3;    
	border-left: 1px solid #E1EBF5;
	border-right: 1px solid #E1EBF5;
	cursor: default; 
	border-radius: 6px 6px 0 0;
}

#home nav .home a,
#information nav .information a,
#visual nav .visual a,
#tools nav .tools a,
#contact nav .contact a {
	color: #8B0000;
}
	
/* 9. Two-Column Layout For Information Page. Added this design feature for readability and scannability. */

.column-layout {
	display: flex;
	justify-content: space-between; /* Creates space between the columns */
	align-items: flex-start;        /* Anchors both headers straight at the top line */
	gap: 10px;                      /* Defines vertical gutter width between columns */
	margin-top: 20px;
	margin-bottom: 7px;
	flex-wrap: wrap;                
}

.layout-col {
	flex: 1;                        /* Even spacing for left and right column inside container */
	
	/* Columns expands to full width if the window drops below 480px wide */
	min-width: 280px;               
}

/* Left column adjustments */
.column-layout .layout-col:first-child {
	border-right: 2px solid #D2E1F0; /* Ice-blue divider line for visual separation */
	padding-right: 40px;             /* Used to add spacing to right side of column */
	flex: 1.15;						 /* Make left column take up more space */ 	
}

/* Right column adjustments */
.column-layout .layout-col:last-child {
	margin-left: 0px;                /* Left side spacing for right column */
	margin-top: 5px;
}

/* Table adjustments */
.layout-col table {
	width: 100%;
	margin: 15px 10px 20px 10px; 
}

/* Mobile screen adjustment - removes vertical divider line */
@media (max-width: 680px) {
	.column-layout .layout-col:first-child {
		border-right: none;
		padding-right: 0;
		margin-bottom: 25px;
	}
}