:root {
  color-scheme: dark light;
}

html {
  font-family: sans-serif;
  --dark-colour: hsl(126, 35%, 16%);
  --pale-colour: hsl(48, 54%, 89%);
  --colour1: light-dark(var(--dark-colour), var(--pale-colour));
  --colour2: light-dark(var(--pale-colour), var(--dark-colour));
  --gradient-thickness: 2rem;
  --padding: min(1rem, 10px);
  
  line-height: 1.1rlh;
  & :is(h1, h2, h3, h4, h5, h6){
    line-height: initial;
  }
}

 * {
  box-sizing: border-box;
 }

 /* BODY includes header, hero-image, main and footer */
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  
  & > *:not(#hero-image) {
    padding: var(--padding);
  }

  & address {
    font-style: normal;
  }

  & a,
  .link { /* .link class used to make headings behave like links */
    color: inherit;
    font-family: monospace;
    font-weight: normal;
    &:hover {
      font-weight: bold;
    }
  }

  & a > picture > img {
    &:hover{
        opacity: 0.9;
        border-radius: 0.5rem;
        box-shadow: 0.25rlh 0.15rlh 4px 0 var(--colour2);
        transition-duration: 100ms;
      }
  }
}


header {
  background-color: var(--colour1);
  color: var(--colour2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: sans-serif !important;

  a {
    text-decoration-line: none
  }

  & h1 {
    margin: 0;
    & > a {
      font-size: 3rlh;
      font-weight: bolder;
      font-family: sans-serif;
    }
  }

  & nav {
    text-align: end;

    & > ul {
      list-style: none;
      margin: 0;

      & a {
        display: block;
        padding: calc(.5 * var(--padding));
        border-radius: 0.5rem;
        box-shadow: 0.2rlh 0.1rlh 3px 0 var(--colour2);
        &:hover {
          box-shadow: 0.25rlh 0.15rlh 4px 0 var(--colour2);
        }
      }
    }
  }
}


#hero-image {
  display: block;
  position: relative;
  background-image: url("/images/forest-4178175.webp");
  width: 100%;
  background-size: 100%;
  height: clamp(40vw, 66vw, 90vh - 5rlh);
  background-position-y: 30%;

  &::before { /* Adds gradients to top and bottom of hero image */
    content: "";
    position: absolute;
    height: stretch;
    width: 100%;
    border-style: solid;
    border-width: var(--gradient-thickness) 0 var(--gradient-thickness) 0;
    border-image: linear-gradient(var(--colour1), transparent, var(--colour2)) 1;
    border-image-slice: 50% 0 50% 0;
    z-index: 1;
  }
}


main {
  background-color: var(--colour2);

  & * {
    color: var(--colour1);
  }

  & section {
    border-top: .15rlh solid var(--colour1);
    &:first-of-type {
      border-top: unset;
    }
  }
}
@media screen and (min-width: 600px){
  /* Only apply when media is at least 800px wide */
  main {
    display: grid;
    grid-template-columns: fit-content(30%) auto;
    column-gap: 1rem;
    
    & section {
      grid-column: 1/3;
      display: grid;
      grid-template-columns: subgrid;
      
      & h1, h2 {
        grid-column: 1/2;
        text-align: end;
        overflow-wrap: break-word;
      }

      & ol {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
    }
  }
}


footer {
  background-color: white;
  border-style: solid;
  border-width: var(--gradient-thickness) 0 0 0;
  border-image: linear-gradient(var(--colour2), white) 1;
  border-image-slice: 100% 0 0 0;
  
  display: grid;
  grid-template-areas:
  "contact"
  "email"
  "banners"
  "statements"
  ;

  & * {
    color: black;
  }

  & #contact {
    grid-area: contact;
  }

  & #email {
    grid-area: email;
    & .link {
      display: inline;
    }
  }

  & #banners {
    grid-area: banners;
    display: block;
    padding: var(--padding);
    padding-bottom: calc(5 * var(--padding));
    max-height: 12rem;
    justify-self: center;
    align-items: top;

    columns: 1;
    text-align: center;
    overflow-x: auto;
    overflow-y: clip;
    scroll-snap-type: x mandatory;

    & > li {
      list-style-type: none;
      display: inline-block;
      scroll-snap-align: center;

      & img {
        height: 10rem;
        max-width: 100%;
        object-fit: contain;
      }

      & #tPCA-logo {
        aspect-ratio: 2/1;
        object-fit: cover;
      }
    }
  }

  & #statements {
    grid-area: statements
  }
}

@media screen and (min-width: 800px){
  footer {
    grid-template-areas:
    "contact . statements"
    "email . statements"
    "banners banners banners";
    grid-template-columns: auto 2rlh auto;
  }
}