#site-logo {
  max-height: 4rem;

  @extend .my-2;
  @extend .me-3;
}

#site-title {
  display: block;
  position: absolute;
  top: -100vh;
}


.navbar-toggler img {
  min-height: 2rem;
  display: block;
}

/*
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }
*/


@mixin nav-link-theme {
  @extend .nav;
  @extend .me-3;

  .nav-link:visited, .nav-link:link, .nav-link:hover, .nav-link:active, .nav-link.active  {
    text-align: left !important;
    padding: 0.25rem 0.5rem;
    background: transparent !important;
  }
  .nav-link:visited, .nav-link:link {
    text-decoration: underline;
    color: $veilid_purple_medium;
  }
  .nav-link:hover, .nav-link:active {
    text-decoration: none;
    color: $veilid_fuchsia !important;
  }
}

.header-nav {
  @include nav-link-theme;
  display: block;
  li {
    display: block;
    @extend .my-4;
  }
}


@include media-breakpoint-up(lg) {
  .header-nav {
    display: flex;
    li {
    }
  }
}

.subsectionnav {
  @include nav-link-theme;
  display: block;
}


#site-options {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  color: $black;
  background-color: #E3E4F1;
  a:link, a:active, a:visited, a:hover {
    color: inherit;
    img {
      height: 1.5em;
    }
  }

}
@include media-breakpoint-up(lg) {
  #site-options img {
    padding-right: 0.25rem;
  }
}

#site-nav {
  @extend .mt-2;
  @extend .mb-4;
}


#site-nav .navbar-brand {
  margin-right: 2rem;
}


html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  #content {
    flex: 2;
    margin-top: 0rem;
    margin-bottom: 4rem;
  }
}

@media (min-width: 992px) {
  .subsectionnav li {
    display: block;
    width: 100%;
  }
}

#page-footer {
  background-color: $black;
  color: $white;
  padding: 2rem;
  p {
    margin: 1rem 0;
  }
  a:link, a:active, a:hover, a:visited {
    color: $white;
  }
}



@include media-breakpoint-up(md) {
  .col-list { columns: 2; }
}
@include media-breakpoint-up(lg) {
  .col-list { columns: 3; }
}


.front-page-hero {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 25vh;
  @extend .mb-4;
  .focus-text {
    margin-bottom: 0 !important;
  }
  .take-back-control {
    margin: 0 !important;
    h2 {
      margin: 0 !important;
    }
  }
}