// Main Styles

// See the other SASS partials for typography, variables etc.
// CSS Grid is used for the layout with fallbacks for less capable browsers
// declared beforehand, and a @supports feature query to reset fallbacks when
// necessary. https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks

// the body element is our primary layout grid
body {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [main-start] minmax(0, 52rem) [main-end]
    minmax(1rem, 1fr) [full-end];
}

// by default, make any new children of body to span the full track
body > * {
  grid-column: full;
  padding: 2rem 1rem;
}

// header, the first grid row
// it is also a grid for the logo and nav
header {
  grid-column: full;
  display: grid;
  background-color: $brand-color;
  padding: 2rem;
  @media screen and (min-width: $screen-sm-min) {
    grid-template-columns: 1fr auto;
    grid-column-gap: 1rem;
  }
}

// logo, is a grid item
header > h1 {
  display: inline-block;
  padding-bottom: 1rem;
  @media screen and (min-width: $screen-sm-min) {
    padding-bottom: 0;
  }
  a,
  a:visited {
    text-decoration: none;
    border: 0;
    color: white;
    @media screen and (min-width: $screen-sm-min) {
      padding: 1rem;
    }
  }
  a:hover {
    color: white;
  }
}

// main menu, is a grid item
header > nav {
  @media screen and (min-width: $screen-sm-min) {
    float: right;
  }
  ul {
    // flexbox is better than grid for distributing an unknown qty of children
    display: flex;
    li {
      margin-right: 2rem;
      display: inline-block;
      @media screen and (min-width: $screen-sm-min) {
        margin-right: 0;
      }
      a,
      a:visited {
        color: white;
        text-decoration: none;
        border: 0;
        @media screen and (min-width: $screen-sm-min) {
          padding: 1rem;
        }
        &[data-current="current page"] {
          // you can add an active nav item style here
        }
      }
      a:hover {
        color: white;
      }
    }
  }
}

// our main content wrapper, the width scales with font size
main {
  width: 100%;
  max-width: 52rem;
  margin-right: auto;
  margin-left: auto;
  grid-column: main;
  display: grid;
  padding-top: 8rem;
  padding-bottom: 8rem;
  @media screen and (min-width: $screen-md-min) {
    align-content: start;
  }
}

// reset breaking fallbacks (e.g. widths) if CSS Grid is supported
// float, inline-block, table properties are already ignored by CSS Grid
@supports (display: grid) {
  main {
    width: auto;
    max-width: none;
  }
}

// blog posts list
html[data-current="blog"] main > section {
  ul li {
    padding: 2rem 0;
    border-bottom: 0.05em solid $hairline-color;
    p {
      padding-bottom: 0;
    }
  }
}

// adjacent blog posts links
nav[aria-label="Adjacent Posts"] {
  padding: 4rem 0;
  ul {
    display: flex;
    li {
      flex: 0 0 50%;
      width: auto;
      &:nth-child(2) {
        text-align: right;
      }
    }
  }
}

// contact form
html[data-current="contact"] main > form {
  display: grid;
  label {
    display: none;
  }
  input,
  textarea {
    width: 100%;
    padding: 1rem;
    margin-bottom: 2rem;
  }
  button {
    width: 100%;
  }
}

// reset CSS Grid fallbacks when they aren't required
@supports (display: grid) {
  html[data-current="contact"] main > form {
    input,
    textarea,
    button {
      width: auto;
      max-width: none;
    }
  }
}

footer {
  grid-column: full;
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [main-start] minmax(0, 50rem) [main-end]
    minmax(1rem, 1fr) [full-end];
  background-color: $grey-bg-color;
  > small {
    grid-column: main;
  }
}
