/* 1. Site-wide Styles */
html {
    font-size: 24px;
}

/* 1a. Site Header & Nav */
header {
    background-image: url('/resources/images/masthead-2a-medium.png');
    background-color:var(--emgmediumblue);
    background-size:cover;
    background-position:center bottom;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:sticky;
    top:0;
}

img.header-logo {
    height:2rem;
    margin:1rem auto;
}

nav {
    width:100%;
}

#nav-links {
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    padding:0 1.25rem;
}

li.nav-item {
    display:block;
    width:6rem;
    flex-grow:1;
    flex-shrink:1;
    margin: 0 .5rem .75rem;
    text-align:center;
}

a.nav-item {
    display:block;
    background-color:rgba(255,255,255,.2);
    width:100%;
    padding: .125rem 0;
    font-size:.75rem;
}

a.nav-item:hover {
    background-color:rgba(255,255,255,.4);
}

a.nav-item:active {
    background-color:rgba(255,255,255,.9);
    color:var(--emgblue);
}

#page-title-container {
    background-image: url('/resources/images/masthead-2b-medium.png');
    background-color:var(--emgmediumblue);
    background-size:cover;
    background-position:center top;
    padding:1rem;
}

/* 1b. Site Footer */
footer {
    text-align:center;
}

div.footer-title {
    text-align:center;
    padding:1rem;
}

img.footer-logo {
    height:2rem;
}

h4.footer-title {
    font-size:1rem;
}

ul.footer-links {
    font-size:.875rem;
    text-align:center;
}

li.footer-links {
    display:inline-block;
}

li.footer-links:not(:last-child)::after {
    content: " |";
    color:var(--emgmediumblue);
    padding:0 2rem;
}

div.footer-copyright {
    font-size:.5rem;
    text-align:center;
    padding:1.5rem 1rem 4rem;
    font-weight:300;
}

/* 1c. Generic Site-Wide Body Styles */
.section-container {
    padding:2rem;
}

h2.section-title {
    font-size:1.5rem;
    padding:.5rem 0 .75rem;
}

p.body-copy:not(:last-child) {
    padding-bottom:.5rem;
}

.section-divider {
    margin:0 2rem;
}

/* 2. Home Page Styles */
#site-title {
    font-size:2.75rem;
    padding:.25rem .5rem .5rem;
}

#site-subtitle {
    font-family:'Merriweather Sans', 'Arial', sans-serif;
    font-size:1.375rem;
    font-weight:400;
    font-style:italic;
    padding:0 .5rem .5rem;
}

#home-page-CTA-section {
    flex-direction:column;
}

.home-page-CTA-card {
    flex-direction:row;
    padding:1.5rem 1.5rem 2.5rem;
    margin:.5rem 0 1.5rem;
    width:42rem;
    align-self:center;
    border-radius:1rem;
    box-shadow:.25rem .25rem var(--emgmediumblue);
}

.home-page-CTA-image {
    width:40%;
    height:18rem;
    object-fit:cover;
    flex-grow:1;
    flex-shrink:1;
    margin-right:.5rem;
    border-radius:.5rem;
}

.home-page-CTA-subtitle {
    width:40%;
    flex-grow:1;
    flex-shrink:1;
    margin-left:.5rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.home-page-CTA-link {
    align-self:flex-start;
}

.home-page-CTA-button {
    font-size:1rem;
    padding:.25rem 2rem;
    border-radius:.5rem;
    margin-top:1rem;
    font-family:'Merriweather', 'Georgia', serif;
}