/* MINIMAL CSS RESET*/
* { margin-bottom: 0; }

/* VARIABLES */
:root {
  --font-body: Roboto, sans-serif;
  --font-heading: "PT serif", Georgia, "Nimbus Roman", serif;
  --color-blue: #6391b5;
  --color-blue: oklch(0.6376 0.0739 242.84);
  --color-green: #009c80;
  --color-green: oklch(0.618 0.1176 173.93);
  --color-green-light: #f2fbf8;
  --color-green-light: oklch(0.9811 0.01 173.93);
  --color-grey: #404040;
  --color-grey: oklch(0.3715 0 0);
}

/* GLOBAL */
html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth; }
body { margin: 0; color: var(--color-grey) }
p, ul { line-height: 1.5em; hyphens: auto }
img { max-width: 100%; height: auto; }
h1 { color: var(--color-green); font-size: 2.3rem }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.3em;
  margin-top: 1.3em;
  text-wrap: pretty;
}
a {
    color: var(--color-green);
    text-decoration: none;
    &:hover { color: var(--color-blue) }
}

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "main" "footer";
  height: 100%;
  width: 100%;
  justify-content: center;
  min-height: 100vh;
  align-items: stretch;
}

.contain, :where(main>article) {
  display: grid;
  grid-template-columns: minmax(.4rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr);
  > * {
    grid-column: 2;
  }
}

.escape {
  grid-column: 1 / -1 !important;
}

/* HEADER */
header {
  border-bottom: 3px #00000022 solid;
  grid-area: header;
  > div {
    padding-bottom: .2rem;
    display: flex;
    .logo {
      margin-right: .3rem;
      svg {
        width: 7rem;
        height: 100%;
        #symbol {
          fill: var(--color-blue);
        }
        #tekst {
          fill: var(--color-green);
        }
      }
    }

    nav {
      display:flex;
      align-items: center;
      justify-content:flex-end;
      flex: 1;
      ul {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        margin-top: .4rem;
        padding: 0;
        justify-content: flex-end;
        /* align-self: end; */
        a {
          text-decoration: none;
          color: white;
          border-radius: 1rem;
          background-color: var(--color-grey);
          padding: 0.35rem 1rem;
          margin-left:0.4rem;
          margin-top:0.4rem;
          &:hover, &.active {
            background-color: var(--color-green);
            color: white;
          }
          &:focus {
            outline: .1rem var(--color-green) solid;
            color: var(--color-grey);
            background-color: white;
          }
        }
      }
    }
  }
}

/* MAIN */
main {
  grid-area: main;
  background-color: var(--color-green-light);
  padding-bottom: 2rem;

  article {
    margin-top: 1.3em;
    
    .intro {
      font-size: 1.2rem;
      line-height: 1.35em;
    }
  }
}

/* LIST VIEW */
main > article {
  > article {
    background-color: white;
    padding: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
    
    > :not(img) {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    
    h1 {
      margin-top: 1rem;
    }
    
    p {
      margin-bottom: 1rem;
    }
  }
}

/* FOOTER  */

footer {
  color: var(--color-green-light);
  a {
      color: var(--color-green-light);
      &:hover { color: white; text-decoration: underline }
  }
  background-color: var(--color-green);
  grid-area: footer;
  > div {
    margin: 1rem 0;
    text-align: center;
    .generated { font-size: .6rem }
  }
}