/* Reset styles to ensure consistency */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

li {
  list-style: none;
}
a:hover {
  color: #fd6f0c;
}
li a:hover{
  color: #fd6f0c;
}

/* Use the body as the main flex container */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
  padding-top: 4rem; /* To ensure main content doesn't hide under fixed header */
}

header {
  position: fixed;
  top: 0; /* Position it at the top of the page */
  left: 0;
  width: 100%;
  z-index: 1000; /* Makes sure it's above other content */
    background-color: #1605e7;
    grid-area: header;
    padding: .5rem;
}

header a {
  text-decoration: none;
  color: black;
}

/* Force the page container to take all available space */
.page-container {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; /* Don't allow shrinking */
    min-height: 100%; /* Fallback for older browsers */
}

.pageLogo {
    display: flex;
    flex-direction: row;
}

.pageTitle {
    display: flex;
    flex-direction: row;
    color: #fd6f0c;
}

.navBar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1605e7;
  color: #fd6f0c;
  padding: 0rem 2rem;
}

.navLinks{
  display: flex;  
  gap: 1.5rem;
}

.navLinks a{
  text-decoration: none;
  color: black;
}

.wrapper {
    flex: 1 0 auto; /* Don't allow shrinking */
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header"
        "aside main"
        "footer footer";
    gap: 1rem;
    padding: 1rem;
}



aside {
    background-color: #005568;
    grid-area: aside;
  width: 100%;
}
aside a {
  text-decoration: none;
  color: black;
}
.asideLinks {
  padding: 3px;
}

main {
    background-color: #005568;
    grid-area: main;
    padding: 1rem;
}

.content a{
    display:inline; 
    padding:0; 
    color: gray;
}

#contents, .contents {
    opacity: 1;
}

.content {
  text-align: left;
  padding-right: 10rem;
  padding-left: 50px;
}


/* Footer styling with multiple approaches for compatibility */
footer {
    background-color: #1605e7;
    grid-area: footer;
    text-align: center;
    padding: 1rem;
    flex-shrink: 0; /* Prevent footer from shrinking */
    position: relative; /* Position context for absolute fallback */
    width: 100%;
    box-sizing: border-box;
    margin-top: auto; /* Push to bottom if content is short */
}
.footerLinks {
  padding: 1rem;
}
footer a {
  text-decoration: none;
  color: black;
}

/* IE11 fallback */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    body {
        display: block;
    }
    
    .page-container {
        min-height: calc(100vh - 80px); /* Adjust 80px to match your footer height */
    }
    
}