/* ============================================
EDCOT CORE STYLESHEET
File: edcot.css
Project: EDCOT Website
Created: 2026-01-06 08:11
Purpose: Canonical baseline stylesheet for all EDCOT pages
Theme: EDCOT Core
============================================ */

/* =================================
GLOBAL RESET / BASE
================================= */

*{
box-sizing: border-box;
}

html{
height: 100%;
font-size: 100%;
}

body{
min-height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #000000;
background-color: #ffffff;
}

img{
max-width: 100%;
height: auto;
display: block;
}

/* =================================
TYPOGRAPHY
================================= */

p{
margin: 0 0 12px 0;
}

h1,
h2,
h3,
h4,
h5,
h6{
margin: 0 0 12px 0;
font-weight: 700;
}

h1{
font-size: 2rem;
}

h2{
font-size: 1.5rem;
}

h3{
font-size: 1.25rem;
}

h4{
font-size: 1.1rem;
}

/* =================================
LINKS
================================= */

a{
color: #000099;
text-decoration: underline;
}

a:hover{
color: #000066;
text-decoration: underline;
}

/* =================================
LISTS
================================= */

ul,
ol{
margin: 0 0 12px 24px;
padding: 0;
}

li{
margin: 0 0 6px 0;
}

/* =================================
HORIZONTAL RULE
================================= */

hr{
border: 0;
border-top: 1px solid #999999;
margin: 16px 0;
}

/* =================================
PAGE CONTAINER
================================= */

#container{
max-width: 1200px;
margin: 0 auto;
padding: 16px;
}

/* =================================
HEADER
================================= */

#header{
margin: 0 0 16px 0;
padding: 16px;
background-color: #000099;
border-radius: 10px;
}

#headerWrapper{
display: grid;
grid-template-columns: 1fr auto;
column-gap: 16px;
align-items: end;
}

#headerLeft{
min-width: 0;
}

#headerRight{
min-width: 0;
justify-self: end;
}

.pageName{
margin: 0;
font-size: 2.25rem;
font-weight: 700;
color: #ffffff;
}

.pageTagLine{
margin: 4px 0 0 0;
font-size: 1rem;
font-weight: 400;
color: #ffffff;
}

/* =================================
HEADER NAVIGATION
================================= */

#headerRight nav{
margin: 0;
padding: 0;
}

#headerRight nav ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

#headerRight nav li{
margin: 0;
padding: 0;
}

#headerRight nav a{
display: inline-block;
padding: 6px 10px;
border: 1px solid #ffffff;
border-radius: 6px;
color: #ffffff;
text-decoration: none;
background-color: transparent;
}

#headerRight nav a:hover{
text-decoration: underline;
}

/* =================================
CONTENT
================================= */

#content{
margin: 0;
padding: 0;
}

/* =================================
CONTENT GRID – LAYOUT OPTIONS
================================= */

#contentGridColumns{
display: grid;
column-gap: 16px;
align-items: start;
grid-template-columns: 1fr 1fr;
}

#contentGridColumns.layoutSingleFull{
grid-template-columns: 1fr;
}

#contentGridColumns.layoutTwoEqual{
grid-template-columns: 1fr 1fr;
}

#contentGridColumns.layoutTwoNarrowWide{
grid-template-columns: 1fr 2fr;
}

#contentGridColumns.layoutThreeSidebarMain{
grid-template-columns: 20% 1fr 1fr;
}

#contentGridColumns.layoutThreeEqual{
grid-template-columns: 1fr 1fr 1fr;
}

.contentGridColumn{
min-width: 0;
align-self: start;
}

#leftGridColumn,
#rightGridColumn{
min-width: 0;
align-self: start;
}

/* =================================
CONTENT CARDS
================================= */

.contentCard{
margin: 0 0 16px 0;
padding: 16px;
background-color: #ffffff;
border-top: 2px solid #999999;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
border-left: 6px solid #999999;
border-radius: 10px;
}

.cardAccentBlue{
border-left-color: #000099;
}

.cardAccentGreen{
border-left-color: #009900;
}

.cardAccentRed{
border-left-color: #cc0000;
}

.cardAccentGray{
border-left-color: #666666;
}

/* =================================
EDCOT ACCENT COLOR UTILITIES
================================= */

.edcotBlue{
background-color: #000099;
color: #ffffff;
}

.edcotGreen{
background-color: #009900;
color: #ffffff;
}

.edcotRed{
background-color: #cc0000;
color: #ffffff;
}

.edcotGray{
background-color: #666666;
color: #ffffff;
}

.edcotBlue a,
.edcotGreen a,
.edcotRed a,
.edcotGray a{
color: #ffffff;
text-decoration: underline;
}

.edcotBlue a:hover,
.edcotGreen a:hover,
.edcotRed a:hover,
.edcotGray a:hover{
text-decoration: none;
}

/* =================================
TABLES
================================= */

table{
width: 100%;
border-collapse: collapse;
margin: 0 0 16px 0;
}

th,
td{
border: 1px solid #999999;
padding: 8px;
text-align: left;
vertical-align: top;
}

th{
background-color: #f0f0f0;
}

/* =================================
FOOTER
================================= */

#siteFooter{
margin: 16px 0 0 0;
padding: 16px;
background-color: #000099;
border-radius: 10px;
text-align: center;
}

#siteFooter,
#siteFooter p,
#siteFooter a{
color: #ffffff;
}

#siteFooter a{
text-decoration: none;
}

#siteFooter a:hover{
text-decoration: underline;
}

/* =================================
PRINT STYLES
================================= */

@media print{

body{
background-color: #ffffff;
color: #000000;
}

#header,
#siteFooter{
background-color: #ffffff;
color: #000000;
border-radius: 0;
}

#headerRight{
display: none;
}

a{
color: #000000;
text-decoration: underline;
}

}

/* =================================
CLOSING CURLY BRACE
================================= */