@import url('./colours.css');

:root {
  font-size: 10px;
  --screen-min-width: 960px;
  --mob-header-height: 2.5rem;
  --mob-header-height: 0;
}

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui,
    helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
  /* scroll-snap-type: y mandatory; */
  overflow: hidden;
  /* & section.fullscreen {
    scroll-snap-align: start;
  } */

  &:has(input[name=show-menu]:checked) > main {
    overflow: hidden;
  }
}
body, body * {
  box-sizing: border-box;
}

main {
  overflow-y: auto;
  max-height: 100dvh;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;

  & section.fullscreen {
    scroll-snap-align: start;
  }
}

body > header {
  --slide-transition: transform 250ms ease-out;
  --burger-height: 8rem;

  margin: 0;
  padding: 0;
  height: var(--mob-header-height);
  background-color: var(--bb-light);

  & label[for=show-menu] {
    height: 1px;
    width: 1px;
    font-size: 1px;
    overflow: hidden;
    opacity: 0;
  }
  & input[name=show-menu][type=checkbox] {
    appearance: none;
    position: fixed;
    z-index: 300;
    top: 1rem;
    left: 1rem;

    outline-offset: -0.5rem;
    border-radius: 33.3333%;
    height: var(--burger-height);
    width:  var(--burger-height);
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
    padding: 0;
    margin: 0;
    background-image: url('../images/ui/menuButtonBurger.svg') !important;

    &:active {
      background-image: url('../images/ui/menuButtonBurgerAnimated.svg') !important;
    }
    &:is(:hover, :focus) {
      transition: var(--slide-transition);
      outline: 0.25em solid var(--bb-purple);
    }
    &:checked {
      opacity: 1;
      transform: translateX(calc(100vw - (var(--burger-height) + 3rem) ));
      transition: var(--slide-transition);
      background-image: url('../images/ui/menuButtonArrow.svg') !important;
      &:active {
        background-image: url('../images/ui/menuButtonArrowAnimated.svg') !important;
      }
    }

    @media screen and (min-width: 1100px){
      display: none;
    }
  }

  & nav {
    font-size: 2em;
    position: fixed;
    z-index: 200;
    top:0;
    left: 0;
    min-width: 100%;
    transform: translateX(-110%);
    transition: var(--slide-transition);
    background-color: var(--bb-light);
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    box-shadow: 0 2rem 2rem var(--bb-dark--25);

    & menu {
      list-style: none;
      margin: calc(var(--burger-height) + 1em) 0 0;
      padding: 0;

      & li {
        visibility: hidden;
        position: relative;

        &:has(a[aria-disabled=true]) {
          display: flex;
          flex-flow: row wrap;
          margin-top: 0;
          max-width: 100vw;

          & a {
            margin-top: 0;

            & span:after {
              content: " (coming soon!)";
              font-size: 0.5em;
              display: inline-block;
              white-space: pre;
            }
            @media screen and (min-width: 500px) {
              & span:after {
                white-space: pre;
              content: "    (coming soon!)";
              }
            }
          }
        }
        & a {
          --margin-y: 0.5em;
          --margin-x: auto;

          perspective: 100;
          color: var(--bb-dark);

          display: block;
          padding: 0.5em 2ch;
          margin: var(--margin-y) var(--margin-x);
          min-width: 100%;

          & span {
            --margin-y: 0;

            display: block;
            max-width: 19.45ch;
            margin: var(--margin-y) var(--margin-x);
          }

          &:is(:hover, :focus, :focus-visible) {
            color: var(--bb-light);
            background-color: var(--bb-purple);
            outline-color: var(--bb-purple);
          }
        }
      }
    }
    @media screen and (min-width: 1100px) {
      /* transition: unset; */
      transform: unset;
      visibility: visible;
      min-height: unset;
      box-shadow: unset;
      background-color: unset;
      margin: 0;
      padding: 0;
      overflow-y: unset;

      & menu {
        margin: 0;
        padding-right: 1ch;
        left: unset;
        right: 0;
        display: flex;
        justify-content: flex-end;
        font-size: 0.6em;

        & li {
          visibility: visible;
          & a{
            border-radius: 6px;
            color: var(--bb-dark);
          }

          &:has(a[aria-disabled=true]) {
            display: unset;
            position: relative;

            & a:is(:focus-visible, :hover):after {
              content: "(coming soon!)";
              color: var(--bb-light);
              background: var(--bb-dark);
              font-size: 0.75em;
              padding: 0.5em 1ch;
              border-radius: 6px;
              margin: 0 auto;
              position: absolute;
              top: 4em;
              left: 0;
              width: max-content;
              text-align: center;
              display: block;
            }

            & a {
              margin-top: 0.5em;

              & span:after {
                content: "";
              }
            }
          }
        }
      }
    }
  }
  }
  input:checked + nav {
    transform: translateX(0);
    transition: var(--slide-transition);
    & li {
      visibility: visible;
    }


}

section#landing.fullscreen {
  background-color: var(--bb-light);
  color: var(--bb-dark);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  justify-content: flex-start;
  text-align: center;
  padding-top: 4em;

  min-height: calc(100dvh - var(--mob-header-height));
  min-height: 100dvh;

  & div#welcome-text {
    flex-grow: 4;
    justify-self: flex-start;
  }

  & .floater-container {
    flex-grow: 3;
  }

  & .logo {
    flex-grow: 0;
  }
}

section.fullscreen {
  --background: transparent;
  --text: inherit;

  background-color: var(--background);
  color: var(--text);
  padding: 1px 2ch;
  min-height: 100dvh;
  margin: 0;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 8fr 1fr;
  & .floater {
    grid-column: 1/-1;
  }
}

section.fullscreen:not(.landing) {
  padding-top: 10rem;
  @media screen and (min-width: 850px) {
    padding-top: 1em;
    /* grid-template-rows: 3fr 1fr; */
  }
  @media screen and (min-width: 960px) {
    padding: 0;
    grid-template-columns: 2fr 100fr 2fr;
    grid-template-rows: 75dvh 1fr;

    --background-image: none;
    --background-size: clamp(900px, 55vw, 100%);
    --background-position: center;
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position: var(--background-position);
    background-repeat: no-repeat;
    background-attachment: fixed;
    --shadows: var(--bb-dark--25);

    & .section-content {
      padding: 2rem 4ch;
      grid-column: 2/3;
      grid-row: 1/2;

      display: grid;
      justify-items: start;
      align-items: start;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(5, 10rem);

      & li {
        text-wrap: pretty;
      }

      & .text-content {
        --_col-start: var(--col-start--md, var(--col-start));
        --_col-end: var(--col-end--md, var(--col-end));
        --_row-start: var(--row-start--md, var(--row-start));
        --_row-end: var(--row-end--md, var(--row-end));
        --text: var(--bb-dark);
        --background: var(--bb-light--50);

        grid-column: var(--_col-start, 1)/var(--_col-end, 7);
        grid-row: var(--_row-start, 1)/var(--_row-end, auto);

        /* margin: 0 auto; */
        padding: 0.5em 1.5ch;
        border-radius: 6px;
        z-index: 100;
        height: fit-content;

        background-color: var(--background);
        backdrop-filter: blur(0.25em);
        box-shadow: 0.5em 0.5em 1em var(--shadows);

        &:first-of-type {
            margin-top: 0;
        }
      }
    }
  }
  @media screen and (min-width: 1100px) {
    & .section-content {
      & .text-content {
        --_col-start: var(--col-start--lg, var(--col-start--md, var(--col-start)));
        --_col-end: var(--col-end--lg, var(--col-end--md, var(--col-end)));
        --_row-start: var(--row-start--lg, var(--row-start--md, var(--row-start)));
        --_row-end: var(--row-end--lg, var(--row-end--md, var(--row-end)));
      }
    }
  }
}

.text-content :is(p, ul, ol) {
  max-width: fit-content;
}

.bg-blue {
  background-color: var(--bb-blue);
  color: var(--bb-dark);
}
.bg-purple {
  background-color: var(--bb-purple);
  color: var(--bb-light);
}

h1 {
  font-size: 4rem;
  font-weight: 900;
  margin: 2rem auto 0;
  color: var(--bb-purple);
}

h1 + p {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--bb-purple);
}

h2 {
  font-size: 3rem;
  margin: 1em 0 0;
}
.logo {
  width: 20rem;
  margin-bottom: 2rem;
}

p, ul, ol {
  line-height: 2;
}
p {
  line-height: 1.6;
  margin: 1rem auto 0;
  max-width: 75ch;
}
ul.p-list {
  margin-top: 0;
  list-style-position: outside;
}
.has-icon{
  --align: flex-start;
  display: flex;
  flex-flow: row nowrap;
  align-items: var(--align);

  & .icon {
    --size: 1.75em;
    --lift: 0;
    /* display: block; */
    font-size: var(--size);
    padding: 0 0.5ch 0 0;
    margin-top: calc(var(--lift) - (var(--lift) * 2));
  }
}
ul.novelty-list {
  --marker: '👉 ';
}
ul.novelty-list li{
  list-style-type: var(--marker);
}
a {
  color: hsl(270, 70%, 65%);
  text-decoration: none;
}

.floater {
  --background: var(--bb-purple);
  --text: var(--bb-light);

  padding: 1.5rem 1.5ch;
  background-color: var(--background);
  color: var(--text);
  text-align: center;
  border-radius: 6px;
  display: block;
  max-width: fit-content;
  height: fit-content;
  margin: 0 auto 2rem;
  grid-column: 2/3;

  &:hover {
    transform: translateY(-1rem);
    transition-duration: 500ms;
    transition-property: transform box-shadow;
  }

  @media screen and (min-width: 960px) {
    box-shadow: 0.5em 0.5em 1em var(--shadows);

    &:hover {
      box-shadow: 0.65em 0.75em 1em var(--shadows);
    }
  }
}

.large-text :is(p, ul), .floater {
  font-size: 3rem;
}

img.screenshot {
  --shadow: var(--bb-dark--50);
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 1rem 1rem 3rem 1rem var(--shadow);
  max-height: 100%;

  @media screen and (min-width: 960px) {
    display: none;
  }
}

:is(
  article, section, div
  p, ol, ul, li,
  a, span
).text-contrast {
  --text: var(--bb-light) ;
}
:is(
  article, section, div
  p, ol, ul, li,
  a, span
).text-contrast--md {
    @media screen and (min-width: 960px) {
  --text: var(--bb-light) ;
  }
}
:is(
  article, section, div
  p, ol, ul, li,
  a, span
).text-contrast--lg {
    @media screen and (min-width: 1200px) {
  --text: var(--bb-light) ;
  }
}

:is(
  article, section, div
  p, ol, ul, li,
  a, span
).text-reset--md {
  @media screen and (min-width: 960px) {
    --text: inherit ;
  }
}