/* Reset styles to ensure consistency */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

a {
  text-decoration: none;
  color: black;
}
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;
}

.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;
  margin: .1rem;
}

.navLinks{
  display: flex;
  gap: 0.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: .5rem;
    padding: 1rem;
}



/* 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 */
}


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

.asideLinks {
  padding: 3px;
}

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

.mainContent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.postTitle a:hover {
    color:initial;
}

.posts {
    display: grid;
    background-color: #016b82;
    height: 100%;
    width: 95%;
    padding-inline: 1%;
    padding-block: 1%;
    margin:1%;
}

.postDate {
  padding-right: 1%;
}

.postThumbnail{
    width: 30vw;
}

.postExcerpt {
  padding-right: 10%;
}


/* 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;
}

/* IE11 fallback */
@media (max-width: 768px) {
    .wrapper {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "aside"
            "main"
            "footer";
    }
  .navBar{
    display: flex;
  background-color: #1605e7;
  color: #fd6f0c;
  padding: 0rem 2rem;
  margin: .1rem;
  height: 4rem;
}
  }
  aside{
    margin: .1rem;
  }