@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@100&family=Raleway:wght@300&display=swap');

/*
* littlelink V1
* https://littlelink.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/21/2019
*
* Built using:
*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/

:root {
  --button-width: 300px;
}

@media (prefers-color-scheme: light) {
  :root {
    --fg-color: hsl(0 0% 15%);
    --bg-color: hsl(0 0% 85%);
    --link-color: #2457F5;
    --link-hover-color: #083BDA;

    &.hogart-the-rogue {
      --link-color: #2E682A;
      --link-hover-color: #2e682ace;
    }
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg-color: rgb(217, 217, 217);
    --bg-color: #262626;
    --link-color: #4899F7;
    --link-hover-color: #7AB8FF;

    &.hogart-the-rogue {
      --link-color: #2E682A;
      --link-hover-color: #2e682ace;
    }
  }
}

.layout {
  display: grid;
  grid:
    "header" auto
    "main" 1fr
    "footer" auto
    / 1fr;
  gap: 1rem;

  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  height: 100%;
}

header { 
  grid-area: header;
  margin-top: 2rem;

  .hogart-the-rogue & {
    margin-top: 0;
  }
}
main {
  grid-area: main;
}
footer { 
  grid-area: footer;
  font-size: x-small;
  margin-bottom: 2rem;
}


/* For devices larger than 400px */
@media (min-width: 400px) {
  .layout {
    width: 85%;
  }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .layout {
    width: 80%;
  }
}

html {
  color-scheme: light dark;
  height: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  height: 100%;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
  margin-top: 0;
  margin-bottom: 0;

  font-family: 'EB Garamond', serif;
  font-weight: 100;

  font-size: 2rem;
  line-height: 64px;
  letter-spacing: 0ch;
}
h2 {
  font-family: 'EB Garamond', serif;
  font-weight: 100;
  margin-top: 2.5rem;
}

/* Larger than phablet */
@media (min-width: 550px) {
  h1 {
    font-size: 3rem;
    line-height: 6rem;
  }
}

p {
  margin-top: 0;
}

html {
  background-color: var(--bg-color);
  color: var(--fg-color);
} 
a {
  color: var(--link-color);
}
a:hover, a:focus {
  color: var(--link-hover-color);
}

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
p,
ol {
  margin-bottom: 2.5rem;
}

.avatar {
  width: 128px;
  height: 128px;
  object-fit: cover;
  background-position: center;
  border-radius: 50%;
}

.hogart-the-rogue {
  header {
    h1 {
      --offset: 84px;
      width: 256px;
      height: var(--offset);
      margin: auto;
      padding-top: 256px;
      font-size: 1.4rem;
      text-transform: uppercase;
      line-height: 34px;
      color: #d4a643;
      background-image: url('../images/hogart-the-rogue-h1.avif');
      background-repeat: no-repeat;
      background-size: contain;
      background-color: transparent;
      background-position-x: center;
      background-position-y: var(--offset);

      &::first-line {
        font-size: 2.6rem;
      }
    }
  }
}

.button {
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  width: var(--button-width);
  font-weight: 700;
  line-height: 20px;
  padding: 14px 12px 12px 12px;
  letter-spacing: 0.1px;
  white-space: wrap;
  outline: none;
  border-radius: 8px;
  cursor: pointer;
  margin: 0 auto 1rem auto;
  border: 1px solid var(--link-color);
  color: inherit;

  opacity: 0.9;

  display: flex;
  flex-direction: row;
  gap: 1ch;
  align-items: center;
  justify-content: center;

  &:focus, &:hover {
    opacity: 1;

    svg, img {
      filter: none;
    }
  }

  & svg, & img {
    height: 1rem;
    filter: grayscale(100%);
  }

  & svg {
    fill: currentColor;
  }

  &:focus {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
  }

  &[href=""] {
    display: none;
  }
}

.hogart-the-rogue {
  h2 {
    margin-top: 0;
  }

  button {
    background-color: transparent;
    box-sizing: content-box;
  }

  .free-adventure {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-family: 'EB Garamond', serif;
    font-size: 150%;
    font-style: italic;

    strong {
      color: #7d3637;
      font-weight: 500;
    }
  }

  .newsletter-example {
    font-size: 80%;
    margin-bottom: 0;
  }

  #subscribe-form {
    background-color: hsla(0, 0%, 100%, 0.2);
    padding: 8px 0 4px 0;
    border-radius: 8px;

    .form-container {
      max-width: unset;
    }
    .emailoctopus-form {
      display: flex;
      justify-content: center;
      width: 100%;
    }
    .main-form {
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
    }
    [eo-form-fields-container] {
      width: 100%
    }

    .emailoctopus-form-row {
      border-radius: 8px;
      width: var(--button-width);
    }

    input {
      width: var(--button-width);
      box-sizing: content-box;
      margin: 0 auto;
      background-color: transparent;
      border: 1px solid var(--link-color);
      height: 22px;
      padding: 14px 12px 12px 12px;
      color: currentColor;
      font-size: 18px;
      text-align: center;
      line-height: unset;
      font-family: Raleway, sans-serif;
      font-weight: 700;
      border-radius: 8px;
    }
  }

  footer {
    display: flex;
    flex-direction: column-reverse;
    padding-bottom: 1.5rem;
    gap: 0.5rem;
    
    p {
      font-size: small;
      margin-bottom: 2rem;
    }

    nav {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 1rem;

      a {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;

        &:focus {
          outline: 2px solid var(--link-color);
          outline-offset: 2px;
        }

        svg {
          height: 1.5rem;
          width: 1.5rem;
          fill: currentColor;
        }

        &[href=""] {
          display: none;
        }
      }
    }
  }

  .cc-revoke, .cc-window {
    box-shadow: 0 0px 0.5rem color-mix(in srgb, currentColor 80%, transparent);
    backdrop-filter: blur(1px);
    padding: 0.6rem !important;
    font-family: inherit;
  }

  .cc-revoke {
    color: var(--link-color) !important;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}