/* == BASE GRID == */

.base-grid {
  overflow: auto;
  min-height: 100vh;
  min-height: 100svh;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "main-content"
    "footer";
}

.header {
  grid-area: header;
  background-color: var(--white);
  box-shadow: 0 0 0.75em var(--light-grey);
  position: sticky;
  top: 0;
  transition: top 750ms ease-in-out;
}

.main-content {
  grid-area: main-content;
}

.footer {
  grid-area: footer;
  background-color: var(--dark-blue);
}

/* == NAV GRID == */

.nav-grid {
  grid-template-areas:
    "logo"
    "nav";
}

.logo,
.copyright {
  grid-area: logo;
  justify-self: center;
  padding: 1.5em 1em 0.25em 1em;
}

.nav,
.f-nav {
  grid-area: nav;
  align-content: center;
}

.nav-list,
.f-nav-list {
  justify-content: space-around;
  padding: 1em;
  width: 100%;
}

.nav li,
.f-nav li {
  align-self: center;
  font-family: var(--header-font);
  letter-spacing: var(--header-letter-spacing);
  font-size: 1.125em;
}

.nav a,
.nav a:visited {
  color: var(--dark-blue);
  text-decoration: none;
}

.nav a:hover {
  color: var(--light-blue);
}

.nav a[aria-current="page"],
.nav a[aria-current="page"]:visited {
  color: var(--medium-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* == BACKGROUND IMAGE GRID == */

.background-grid {
  grid-template-areas: "hero";
  background-color: var(--img-overlay);

  > * {
    grid-area: hero;
  }
}

.background-img {
  z-index: -1;
  object-fit: cover;
  height: 100%;
  width: 100%;
  filter: grayscale(100%) brightness(50%);
}

/* == FOOTER NAV == */

.f-nav-grid {
  grid-template-areas:
    "logo"
    "nav";
}

.copyright {
  color: var(--white);
  font-family: var(--header-font);
  font-size: 1.125em;
  letter-spacing: var(--header-letter-spacing);
  margin-bottom: 0.5em;
}

.copyright a,
.copyright a:visited,
.f-nav a,
.f-nav a:visited {
  color: var(--white);
  text-decoration: none;
}

.copyright a:hover,
.f-nav a:hover {
  color: var(--light-grey);
}

.f-nav a[aria-current="page"],
.f-nav a[aria-current="page"]:visited {
  color: var(--light-grey);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}