@import "font-mixins";

/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
  font-size: 62.5%;
}
body {
  font: 300 14px/1.4 "Westeinde Caption", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
}
/* clear */
.clear:before,
.clear:after {
  content: " ";
  display: table;
}

.clear:after {
  clear: both;
}
.clear {
  *zoom: 1;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
a {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  &:hover {
    color: #000;
  }
  &:focus,
  &:hover,
  &:active {
    outline: 0;
  }
}

input:focus {
  outline: 0;
  border: 1px solid #888;
}

input::selection {
  color: #888;
  background-color: #aaa;
}

button {
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0;
  border: 0;
  &:focus {
    outline: none;
  }
}

object {
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/*                              GLOBAL VARIABLES                              */
/* -------------------------------------------------------------------------- */

$smalldesktop: only screen and
  (
    min-width: 769px
  );
$mobile-landscape: only screen and
  (
    min-width: 769px
  )
  and (-webkit-min-device-pixel-ratio: 2.1);
$bigdesktop: only screen and
  (
    min-width: 1281px
  );

$desktop-home-margin: 10rem; // menuwidth on desktop
$desktop-home-margin-half: 5rem;
$desktop-top-margin: 4rem;
$desktop-bottom-margin: 2rem;
$desktop-bottom-margin-double: 4rem;

/* -------------------------------------------------------------------------- */
/*                              other mixins                              */
/* -------------------------------------------------------------------------- */

@mixin transition($transition) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin transform($transforms) {
  -moz-transform: $transforms;
  -o-transform: $transforms;
  -ms-transform: $transforms;
  -webkit-transform: $transforms;
  transform: $transforms;
}

@mixin rotated-text($num-letters: 100, $angle-span: 180deg, $angle-offset: 0deg) {
  $angle-per-char: $angle-span / $num-letters;
  @for $i from 1 through $num-letters {
    &.char#{$i} {
      @include transform(rotate($angle-offset + $angle-per-char * $i));
    }
  }
}

@mixin box-shadow($a...) {
  -moz-box-shadow: $a;
  -webkit-box-shadow: $a;
  box-shadow: $a;
}

@mixin trianglecorner($side, $size) {
  content: "";
  display: block;
  position: absolute;
  background-color: transparent;
  width: 0;
  height: 0;

  @if $side==topleft {
    left: -$size;
    top: -$size;
    border-top: $size solid transparent;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid #fff;
  }

  @if $side==bottomleft {
    left: -$size;
    bottom: -$size;
    border-bottom: $size solid transparent;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid #fff;
  }

  @if $side==topright {
    right: -$size;
    top: -$size;
    border-top: $size solid transparent;
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid #fff;
  }
  position: absolute;
  z-index: -1;
}

@mixin triangle-corner-bordered($radius, $left, $bgcolor) {
  &::after {
    //for border without corner
    position: absolute;
    top: 0;
    border: none;
    @if $left==0 {
      width: calc(100% - #{$radius});
    } @else {
      width: calc(100% - #{$radius} + #{$left});
    }

    border-top: #000 1px solid;
    left: calc(#{$radius});
    background-color: $bgcolor;
    margin-left: -#{$left};
  }
  &::before {
    //filleted corner
    display: block;
    content: "";
    position: absolute;
    width: calc(#{$radius});
    height: calc(#{$radius});
    top: 0;
    left: -#{$left};
    border-left: #000 solid 1px;
    border-top: #000 1px solid;
    @include transform(skewX(-45deg));
    transform-origin: left bottom;
    background-color: $bgcolor;
    z-index: 9;
  }
}

/* -------------------------------------------------------------------------- */
/*                                  STRUCTURE                                 */
/* -------------------------------------------------------------------------- */

/* wrapper */
.wrapper {
  margin: 0 auto;
  position: relative;
  width: 100vw;
  height: 100vh;

  /* -------------------------------------------------------------------------- */
  /*                                   header                                   */
  /* -------------------------------------------------------------------------- */

  .header {
    position: fixed;
    top: 0;
    width: 100vw;
    // padding: 2rem;
    // background-color: #000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
    @media #{$smalldesktop} {
      height: 0;
      position: relative;
      width: 0;
      &::before {
        display: none;
      }
    }

    .header-1,
    .header-2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      @media #{$smalldesktop} {
        width: $desktop-home-margin;
        position: fixed;
        top: 0;
        height: 100vh;
        flex-direction: column;
        flex: 0 0 auto !important;
        //filter: invert(100);
        padding: 2rem !important;
        justify-content: space-between !important;
        align-content: space-between;
        z-index: 3100;
        background: #fff;
        & > div:not(#sidebar) {
          filter: invert(100);
        }
      }
      div {
        z-index: 3500;
      }
      a {
        display: inline-block;
      }
    }

    .header-1 {
      justify-content: space-between;
      flex: 1 1 auto;
      padding: 2rem 0 2rem 2rem;
      @media #{$smalldesktop} {
        border-right: #000 1px solid;
      }
    }

    .header-2 {
      justify-content: flex-end;
      flex: 0 1 auto;
      padding: 2rem 2rem 2rem 0;
      @media #{$smalldesktop} {
        order: 99;
        border-left: #000 1px solid;
        right: 0;
      }
    }

    .totop {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      z-index: 2;
      @media #{$smalldesktop} {
        display: none;
      }
      a {
        display: inline-block;
        object {
          height: 2rem;
          // color: #000;
          // fill: currentColor;
          filter: invert(100%); //black
          @include transform(rotate(180deg)) // transform: rotate(180deg);;
        }
      }
    }

    object {
      height: 3rem;
    }

    /* -------------------------------------------------------------------------- */
    /*                              header elements                             */
    /* -------------------------------------------------------------------------- */

    @media #{$smalldesktop} {
      .header-1 > div,
      .header-2 > div {
        flex: 0 0 5rem !important;
      }
    }

    .logo {
      object {
        height: 5rem;
      }
    }
    .events-link {
      display: none;
      @media #{$smalldesktop} {
        display: block;
      }
    }

    .menubutton {
      $speed: 0.5s;
      $degree: 225deg;
      $easing: linear;

      order: 99;
      z-index: 3001;
      @media #{$smalldesktop} {
      }

      button {
        transform-origin: center;
        @include transition($speed $easing);
        &.rotated {
          @include transform(rotate($degree));
          @media #{$smalldesktop} {
            filter: invert(100);
          }
        }
      }

      @media #{$smalldesktop} {
        order: unset;
      }
    }

    .social-link {
      margin: 0 2rem 0 0;
      &.hidden {
        display: none !important;
      }
      @media #{$smalldesktop} {
        margin: 0;
      }
    }

    /* ========================================================================== */
    /*                                   SEARCH                                   */
    /* ========================================================================== */

    .search-box {
      display: none;
      @media #{$smalldesktop} {
        display: block;
        flex: 1 1 0 !important;
      }
    }

    .search-bar {
      @media #{$smalldesktop} {
        display: none;
        position: absolute;
        width: 0;
        left: 7rem;
        top: 0;
      }
      form.search {
        display: flex;
        flex-direction: row;
        border-bottom: #fff 1px solid;
        @media #{$smalldesktop} {
        }
        input {
          @include menutext();
          background-color: #000;
          padding: 0;
          border: none;

          caret-color: #fff;
          flex: 1 1 auto;
          width: 1rem;
        }
        button {
          flex: 0 0 auto;
          @media #{$smalldesktop} {
            display: none;
          }
        }
      }
    } //search-bar end

    .header-scroll {
      display: none;
    }

    /* ========================================================================== */
    /*                                    MENUS                                    */
    /* ========================================================================== */

    #sidebar {
      padding-top: 9rem !important;
      background-color: #000;

      @media #{$smalldesktop} {
        padding: 0 !important;
      }
      .sidebar-wrapper {
        position: relative;
        height: 100%;
        overflow: auto;
        padding: 0 4rem;
        @media #{$smalldesktop} {
          padding: 4rem;
        }
        ul {
          margin-block-start: 0;
          margin-block-end: 0;
          margin-inline-start: 0;
          margin-inline-end: 0px;
          padding-inline-start: 0;
          @media #{$smalldesktop} {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 100%;
            justify-content: space-evenly;
          }
        }

        li {
          display: block;
          padding-top: 2rem;
          @media #{$smalldesktop} {
            width: 50%;
            padding: 3rem 0;
          }
          a {
            @include menutext();
          }
        }
      }
    }

    /* ------------------------------- bedo circle ------------------------------ */

    #tag-nav {
      display: none;

      position: fixed;
      right: calc(#{$desktop-home-margin}* 2);
      top: calc(#{$desktop-top-margin}/ 2);
      z-index: 1000;
      @media #{$smalldesktop} {
        display: block;
      }
      ul {
        padding: 0;
        margin: 0;
        @include bedocircle();
        li {
          display: inline;
          a {
            span {
              height: calc(#{$desktop-top-margin}/ 2);
              position: absolute;
              // width: 20px;
              left: 0;
              top: 0;
              transform-origin: bottom center;
              @include bedocircle();
              @include rotated-text(17, 360deg, 0deg);
            }
          }
        }
      }
    }
  } //header end

  /* -------------------------------------------------------------------------- */
  /*                             STRUCTURE ALL PAGE                             */
  /* -------------------------------------------------------------------------- */
  main {
    z-index: 1;
    section {
      article {
        position: relative;
        .metadata {
          position: absolute;
          background-color: #fff;
          padding: 2rem;
          bottom: 49%;
          right: 0;
          width: 50vw;
          text-align: center;
          @include home-metadata();
          z-index: 1;
          &::after {
            @include trianglecorner(topleft, 5rem);
          }
        }
      } //article end

      /* -------------------------------- load more ------------------------------- */
      .misha_loadmore {
        @include home-title();
        @media #{$smalldesktop} {
          border-left: #000 1px solid;
          padding: $desktop-top-margin $desktop-home-margin;
          align-self: stretch;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;
        }
        a {
          @media #{$smalldesktop} {
          }
        }
      }
    }
  }
} //wrapper end

/* -------------------------------------------------------------------------- */
/*                                  HOMEPAGE                                  */
/* -------------------------------------------------------------------------- */

.home {
  @media #{$smalldesktop} {
    overflow-y: hidden;
  }

  .wrapper {
    @media #{$smalldesktop} {
      overflow-y: hidden;
      width: fit-content;
    }

    /* ----------------------------- header on home ----------------------------- */

    .header {
      .header-scroll {
        @media #{$smalldesktop} {
          display: block;
          position: fixed;
          height: 100vh;
          width: $desktop-home-margin;
          flex: 1 0 auto !important;
          top: 0;
        }
        &.header-scroll-left {
          left: $desktop-home-margin;
          button {
            // cursor: url("../img/arrow-black-left.svg"), url("../img/arrow-black-left.png"), w-resize, auto;
            cursor: url("../img/arrow-black-left.png"), w-resize;
          }
        }
        &.header-scroll-right {
          right: $desktop-home-margin;
          button {
            // cursor: url("../img/arrow-black-right.svg"), url("../img/arrow-black-right.png"), e-resize, auto;
            cursor: url("../img/arrow-black-right.png"), e-resize;
          }
        }
        button {
          height: 100vh;
          width: $desktop-home-margin;
        }
      }
    }
  }

  main {
    @media #{$smalldesktop} {
      height: 100vh;
      width: fit-content;
      position: relative;
    }
    section {
      @media #{$smalldesktop} {
        //horizontal scrolling on desktop:
        display: flex;
        flex-direction: row;
        margin: 0;
        height: 100vh;
        width: fit-content;
      }

      /* --------------------------- home article mobile/default -------------------------- */

      article {
        height: 100vh;
        @media #{$smalldesktop} {
          & > a {
            margin: 0;
            padding: 0;
            border: none;
            display: inline-block;
          }

          .thumbnailwrapper {
            img.attachment-home-thumbnail {
              // post thumbnail on home
              height: 50vh;
              width: 100vw;
              object-fit: cover;
            }
          }

          h2 {
            width: 100%;
            height: 50vh;
            padding: 2rem;
            padding-top: 3rem;
            margin: 0;
            // display: flex;
            // flex-direction: row;
            // align-items: center;

            a {
              @include home-title();
            }
          }
        } //article end
      }

      /* ------------------------ home article desktop big ------------------------ */

      @media #{$smalldesktop} {
        //big: first 2 articles
        .home-wrapper-big {
          flex: 0 0 auto;

          article {
            position: relative;
            width: calc(100vw - (#{$desktop-home-margin} * 3));
            margin: 0;
            padding: 0;
            margin-left: $desktop-home-margin;
            padding-top: $desktop-top-margin;
            border-right: #000 1px solid;
            &::before {
              //this is the border on top
              content: "<hr>";
              display: block;
              height: 1px;
              width: 100%;
              background: #000;
            }

            /* -------------------------------- thumbnail and title ------------------------------- */
            .thumbnailwrapper {
              height: calc(100% - #{$desktop-top-margin});
              img.attachment-home-thumbnail {
                object-fit: cover;
                width: 50%;
                height: 100%;
              }
            }

            h2 {
              height: unset;
              position: absolute;
              top: 6rem;
              padding: 4rem;
            }

            /* -------------------------- home article metadata big------------------------- */
            .metadata {
              bottom: 0;
              background: transparent;
              width: 100%;
              height: #{$desktop-home-margin};

              display: flex;
              flex-direction: row;
              padding: 0;
              justify-content: flex-start;
              align-items: stretch;
              @include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);

              & > div {
                width: 30%;
                padding-top: #{$desktop-bottom-margin};
              }

              @media #{$mobile-landscape} {
                height: calc(#{$desktop-home-margin} / 2);
              }
              .categories {
                display: none;

                display: block;
                border-right: #000 solid 1px;
              }
              .postedon {
              }
            } //metadata end
          }
        }
        .home-wrapper-1 {
          article {
          }
        }
        .home-wrapper-2 {
          article {
            border-left: #000 1px solid;
          }
        }
      } //smalldesktop end

      /* ----------------------- home article desktop small ----------------------- */

      @media #{$smalldesktop} {
        .home-wrapper-small {
          width: calc(100vw - (#{$desktop-home-margin} * 3));
          height: calc((100vw - (#{$desktop-home-margin} * 3)) / 3 * 2);
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          margin: auto 0;
          &:nth-child(3) {
            margin-left: $desktop-home-margin;
          }

          article {
            flex: 0 0 calc(100% / 3);
            height: 50%;
            position: relative;
            .thumbnailwrapper {
              width: 100%;
              height: 100%;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .metadata {
              
              width: 100%;
              height: 20%;

              position: absolute;
              bottom: 0;
              right: 0;
              
              background: transparent;

              display: flex;
              flex-direction: row;
              padding: 0;
              justify-content: flex-end;
              align-items: stretch;
              @include triangle-corner-bordered(#{$desktop-bottom-margin-double}, 0, transparent);
              display: none;
              &.vis{
                display: flex;
              }
            }

            h2,
            h2 a {
              @include home-title-small();
            }

            h2 {
              display: none;
              position: absolute;
              top: 0;
              background-color: #fff;
              height: 100%;
              a {
                top: 50%;
                position: absolute;
              }
            }
          }
        }
      }
    } //section end
  } //main end
} //home end

/* -------------------------------------------------------------------------- */
/*                                   single                                   */
/* -------------------------------------------------------------------------- */

.single {
  //no menus on single
  @media #{$smalldesktop} {
    .wrapper {
      height: unset;
      .header {
        .header-1,
        .header-2 {
          background: transparent;
          border: none;
          .social-link,
          .search-box,
          .events-link {
            display: none;
          }
        }
      }
    }
  }

  article {
    $padd: 2rem;

    @media #{$smalldesktop} {
      margin-top: 100vh;
      margin-left: calc(#{$desktop-home-margin-half});
      background-color: #fff;
      border-left: #000 solid 1px;
      //border-top: #000 solid 1px;
    }

    & > * {
      padding: $padd;
      margin: 0;
      @media #{$smalldesktop} {
        padding: $padd $desktop-home-margin-half;
      }
    }

    .thumbnailwrapper {
      padding: 0;
      @media #{$smalldesktop} {
        position: fixed;
        top: 0;
        right: 0;
        left: calc(-#{$desktop-home-margin-half});
        z-index: -1;
        bottom: 0;
      }
      img.attachment-post-thumbnail {
        // post thumbnail on home
        height: 75vh;
        width: 100vw;
        object-fit: cover;
        padding: 0;
        @media #{$smalldesktop} {
          width: 100%;
          height: 100%;
        }
      }
    }

    /* --------------------------- single sub sections -------------------------- */

    .titlewrapper {
      position: absolute;
      top: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-content: flex-start;
      padding: 0;
      @media #{$smalldesktop} {
        position: relative;
        height: unset;
        display: block;
        width: unset;
      }

      .metadata {
        width: calc(100vw - 5rem) !important;
        bottom: unset !important;
        height: 5rem;
        position: relative;
        align-self: flex-end;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        @include single-metadata();
        @media #{$smalldesktop} {
          top: -5rem;
          background-color: #fff;
          margin-left: $desktop-home-margin-half;
          padding-left: 0;

          width: calc(100% - #{$desktop-home-margin-half}) !important;
          @include triangle-corner-bordered(#{$desktop-home-margin-half}, 5rem, white);
        }
        .time-cat {
          z-index: 10;
        }
      }
      h1 {
        margin: 0;
        @include single-title();
        min-height: 25vh;
        padding: $padd;
        background-color: #fff;
        @media #{$smalldesktop} {
          position: fixed;
          // height: 100vh;
          bottom: 0;
          left: 0;
          right: 0;
          padding: $desktop-home-margin;
          background-color: transparent;
          z-index: -1;
        }
      }
    }
    .title2 {
      display: none;
      @media #{$smalldesktop} {
        display: block;
        @include single-title2();
      }
    }

    /* ----------------------------- single content ----------------------------- */

    hr {
      height: 1px;
      background-color: #ff5f5f;
      padding: 0;
      margin: 0 auto;
      border: none;
      width: 20%;
      &.content-wrap {
        width: 40%;
      }
      &.content-begin {
        margin-top: calc(25vh + #{$padd});
        @media #{$smalldesktop} {
          margin-top: 0;
        }
      }
    }

    strong {
      font-weight: 900;
    }

    blockquote {
      @include single-quote();
      p {
        background: #ff5f5f;
        display: inline;
        padding: 2px 0;
        @include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f);
      }
    }

    .wp-block-image {
      padding: $padd 0;
      @media #{$smalldesktop} {
        padding: $padd $desktop-home-margin-half;
      }
      figure {
        position: relative;
        figcaption {
          bottom: 0 !important;

          &::after {
            @include trianglecorner(topright, 5rem);
          }
        }
      }
    }

    .wp-block-image figcaption,
    .wp-block-gallery .blocks-gallery-image figcaption,
    .wp-block-gallery .blocks-gallery-item figcaption {
      background: #fff;
      position: absolute;
      width: calc(100% - 5rem);
      height: 5rem;
      padding: 1rem $padd;
      margin: 0;
      bottom: unset;
      @include captiontext();
      line-height: 1;
      text-align: left;
      overflow: unset;
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 1;
    }

    .wp-block-gallery {
      padding: $padd 0;
      li {
        margin-right: 0;
        &:nth-child(odd) figcaption::after {
          @include trianglecorner(topright, 5rem);
        }
        &:nth-child(even) figcaption {
          right: 0;
          top: 0;
          &::after {
            @include trianglecorner(bottomleft, 5rem);
          }
        }
      }
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                                 TAG COLORS                                 */
/* -------------------------------------------------------------------------- */

@mixin tagcolors($color) {
  .metadata {
    color: $color !important;

    a {
      color: $color !important;
    }
  }

  blockquote p {
    background: $color !important;
    @include box-shadow(10px 0 $color, -5px 0 $color !important);
  }
  hr {
    background-color: $color !important;
  }

  figcaption {
    -webkit-text-stroke-color: $color !important;
  }

  @media #{$smalldesktop} {
    &.home-big {
      h2 a {
        color: $color !important;
      }
    }
    &.home-small {
      .metadata,
      .metadata a {
        color: #000 !important;
      }
    }
  }
}

@mixin tagclip($tag){
  @media #{$smalldesktop} {
    .thumbnailwrapper>img{
      clip-path: url(../img/clip/#{$tag}_desktop.svg)
    }
  }
}

@mixin tagcolors-single($color) {
  .metadata {
    @media #{$smalldesktop} {
      color: #fff !important;
      -webkit-text-stroke: $color 1px !important;
    }
    a {
      @media #{$smalldesktop} {
        color: #fff !important;
        -webkit-text-stroke: $color 1px !important;
      }
    }
  }
}

.tag-be {
  @include tagcolors(#00ffb8);
  &.random{
    @include tagclip(be)
  }
}

.tag-do {
  @include tagcolors(#ff5f5f);
  &.random{
    @include tagclip(do)
  }
}

.tag-think {
  @include tagcolors(#fdff00);
  &.random{
    @include tagclip(think)
  }
}

.tag-love {
  @include tagcolors(#3c00ff);
  &.random{
    @include tagclip(love)
  }
}

.single {
  .tag-be {
    @include tagcolors-single(#00ffb8);
  }

  .tag-do {
    @include tagcolors-single(#ff5f5f);
  }

  .tag-think {
    @include tagcolors-single(#fdff00);
  }

  .tag-love {
    @include tagcolors-single(#3c00ff);
  }
}

/* -------------------------------------------------------------------------- */
/*                                   imports                                  */
/* -------------------------------------------------------------------------- */

@import "fonts";
@import "print";