@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 18px/1.8 "Westeinde Caption", "Helvetica Neue", Helvetica, Arial, sans-serif;
  // 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;
}

/* -------------------------------------------------------------------------- */
/*                                MEDIA QUERIES                               */
/* -------------------------------------------------------------------------- */

$only-mobile: only screen and
  (
    max-width: 768px
  );

$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: 1279px
  );

$verybigdesktop: only screen and
  (
    min-width: 1919px
  );

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

//Horizontal units:
$h-unit-5: 25rem;
$h-unit-4: 20rem;
$h-unit-2: 10rem; // menuwidth on desktop
$h-unit-1: 5rem;

//vertical units:
$v-unit-1: 4rem;
$v-unit-2: 8rem;
$v-unit-4: 16rem;
$v-unit-6: 24rem;

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

@mixin fit-content($wh) {
  #{$wh}: -moz-max-content;
  #{$wh}: max-content;
  #{$wh}: -moz-fit-content;
  #{$wh}: fit-content;
}

@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));

      $speed: 10s;
      -webkit-animation: spin#{$i} $speed linear infinite;
      -moz-animation: spin#{$i} $speed linear infinite;
      animation: spin#{$i} $speed linear infinite;

      @-moz-keyframes spin#{$i} {
        100% {
          -moz-transform: rotate((360deg + $angle-per-char * $i));
        }
      }
      @-webkit-keyframes spin#{$i} {
        100% {
          -webkit-transform: rotate((360deg + $angle-per-char * $i));
        }
      }
      @keyframes spin#{$i} {
        100% {
          -webkit-transform: rotate((360deg + $angle-per-char * $i));
          transform: rotate((360deg + $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, $offset, $bgcolor, $bordercolor, $side) {
  &::after {
    //for border without corner
    position: absolute;
    content: "";
    display: block;
    top: 0;
    border: none;
    @if $offset==0 {
      width: calc(100% - #{$radius});
    } @else {
      width: calc(100% - #{$radius} + #{$offset});
    }

    border-top: $bordercolor 1px solid;
    background-color: $bgcolor;

    @if $side==left {
      left: calc(#{$radius});
      margin-left: -#{$offset};
    }
    @if $side==right {
      right: calc(#{$radius});
      margin-right: -#{$offset};
    }
  }
  &::before {
    //filleted corner
    display: block;
    content: "";
    position: absolute;
    width: calc(#{$radius});
    height: calc(#{$radius});
    top: 0;
    background-color: $bgcolor;
    z-index: 9;

    @if $side==left {
      left: -#{$offset};
      border-left: $bordercolor solid 1px;
      @include transform(skewX(-45deg));
      transform-origin: left bottom;
      border-top: $bordercolor solid 1px;
    }
    @if $side==right {
      right: -#{$offset};
      border-right: $bordercolor solid 1px;
      @include transform(skewX(45deg));
      transform-origin: right bottom;
    }
  }
}

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

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

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

  .header {
    position: fixed;
    top: 0;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    z-index: 3000;
    @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: $h-unit-2;
        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;
        .logo,
        .social-link,
        .menubutton,
        .events-link {
          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));
        }
      }
    }

    object {
      height: 3rem;
    }

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

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

    .logo {
      object {
        height: $h-unit-1;
      }
    }
    // .events-link {
    //   display: block;
    // @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,
    .events-link {
      margin: 0 2rem 0 0;
      &.hidden {
        display: none !important;
      }
      @media #{$smalldesktop} {
        margin: 0;
      }
    }

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

    /* ------------------------------ search mobile ----------------------------- */

    .search-box {
      display: none;
    }

    .search-bar {
      form.search {
        display: flex;
        flex-direction: row;
        border-bottom: #fff 1px solid;
        background-color: #000;

        input {
          @include searchtext();
          background-color: #000;
          padding: 0;
          border: none;
          caret-color: #fff;
          flex: 1 1 auto;
          width: 1rem;
        }
        button {
          flex: 0 0 auto;
          @media #{$only-mobile} {
            filter: invert(100);
          }
        }
      }
    } //search-bar end

    /* ----------------------------- search desktop ----------------------------- */

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

      .search-bar {
        display: none;
        position: fixed;
        width: 0;
        left: $h-unit-2;
        bottom: 0;
        height: $h-unit-2;
        form.search {
          border-bottom: none;
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: stretch;
          input {
            padding: 0 $h-unit-1;
          }
          button {
            display: none;
          }
        }
      }
    }

    /* -------------------- header scroll: scroll with click -------------------- */

    .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 $v-unit-1;
        padding-bottom: $v-unit-1;
        @media #{$smalldesktop} {
          padding: $v-unit-1;
          display: flex;
          flex-direction: row;
          align-items: center;
        }
        .menuseparator {
          display: none;
          @media #{$smalldesktop} {
            display: block;
            width: 1px;
            height: 70%;
            background-color: #fff;
            flex: 0 0 auto;
            margin: $v-unit-1;
          }
        }
        ul {
          margin-block-start: 0;
          margin-block-end: 0;
          margin-inline-start: 0;
          margin-inline-end: 0px;
          padding-inline-start: 0;
          @media #{$smalldesktop} {
            flex: 1 1 50%;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            height: 100%;
            justify-content: space-evenly;
          }

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

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

    #tag-nav {
      display: none;

      position: fixed;
      right: calc(#{$h-unit-4} + 4px);
      top: calc(#{$v-unit-1}/ 2); // this is the top position of the circle!!!
      @media #{$smalldesktop} {
        top: 1rem;
      }
      @media #{$bigdesktop} {
        top: 0.5rem;
      }
      z-index: 1000;
      @media #{$smalldesktop} {
        display: block;
      }
      ul {
        padding: 0;
        margin: 0;
        @include bedocircle();
        li {
          display: inline;
          a {
            span {
              height: calc(#{$v-unit-1}/ 2); //height of circle -> radius of circle!!
              // line-height: calc(#{$v-unit-1}/ 2);
              width: 1rem;
              @media #{$smalldesktop} {
                height: 3rem;
                // line-height: 5rem;
              }
              @media #{$bigdesktop} {
                height: 3.5rem;
              }
              margin: auto;
              display: block;
              text-align: center;

              position: absolute;
              // left: 50%;
              // top: 0;
              // transform-origin: bottom center;
              transform-origin: 50% 100%;
              @include bedocircle(); //this is the font
              @include rotated-text(17, 360deg, 0deg);

              &.pause {
                animation-play-state: paused;
              }
            }
          }
        }
      }
      // .sub-wrapper {
      //   .bedo-sub-wrapper {
      //     position: fixed;
      //     display: none;
      //     right: $h-unit-2;
      //     left: $h-unit-2;
      //     top: 0;
      //     background-color: #000;
      //     height: 50vh;
      //     z-index: -1;
      //     flex-direction: row;
      //     justify-content: flex-start;
      //     align-items: center;
      //     // &:first-child {
      //     //   display: flex;
      //     // }
      //     &.opened {
      //       display: flex;
      //     }
      //     a {
      //       @include bedo-hover-title();
      //       @include transform(rotate(-45deg));
      //       transform-origin: 50% 50%;
      //       display: block;
      //       width: calc(30% + #{$v-unit-6});
      //       text-align: center;
      //       height: fit-content;
      //     }
      //     span {
      //       display: block;
      //       position: absolute;
      //       bottom: 0;
      //       right: 0;
      //       height: $v-unit-6;
      //       width: 70%;
      //       padding: $v-unit-1;
      //       padding-left: $v-unit-6 + $v-unit-2;
      //       padding-right: $v-unit-4;
      //       @include triangle-corner-bordered(#{$v-unit-6}, 0, transparent, #fff, left);
      //       @include bedo-hover-sub();
      //       .circle {
      //         $diameter: 4rem;
      //         width: $diameter;
      //         height: $diameter;
      //         border-radius: 50%;
      //         background: #fff;
      //         position: absolute;
      //         right: 0;
      //         top: 0;
      //         margin: $v-unit-1 / 2;
      //       }
      //     }
      //   }
      // }
    }
  } //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;
          min-width: 50vw;
          text-align: center;
          @include home-metadata();
          z-index: 1;
          &::after {
            @media #{$only-mobile} {
              @include trianglecorner(topleft, $h-unit-1);
            }
          }
        }
      } //article end

      /* -------------------------------- load more ------------------------------- */
      .misha_loadmore {
        @media #{$smalldesktop} {
          min-width: $h-unit-2;
          width: calc(100vw - ((100vh - #{$v-unit-2}) / 2 * 3) - #{$h-unit-4});
          margin-right: $h-unit-2;
          align-self: stretch;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 100%;
        }
        a,
        p {
          @include home-more();
          @media #{$smalldesktop} {
            transform-origin: center;
            white-space: nowrap;
            width: 100vh;
            @include transform(rotate(-90deg));
            text-align: center;
          }
        }
      }
    }
  }
} //wrapper end

//no header scroll on touch devices(because it's invisible)
.touchevents {
  .header-scroll {
    display: none !important;
  }

  // no overflow on touch devices, where no horizontal scrollbar visible
  .archive,
  .home,
  .search-results {
    @media #{$smalldesktop} {
      overflow-y: hidden;
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                            ARCHIVE AND HOMEPAGE                            */
/* -------------------------------------------------------------------------- */

.archive,
.home,
.search-results {
  @media #{$smalldesktop} {
    // overflow-y: hidden;
  }

  .wrapper {
    @media #{$smalldesktop} {
      overflow-y: hidden;
      @include fit-content(width);
      min-width: 100vw;
    }

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

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

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

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

      article {
        height: 100vh;

        & > a {
          margin: 0;
          padding: 0;
          border: none;
          display: inline-block;
        }

        .thumbnailwrapper {
          img {
            // 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();
          }
        }

        .metadata {
          bottom: 50%;
          height: $h-unit-1;
          display: flex;
          @include fit-content(width);
          justify-content: space-around;
          flex-wrap: nowrap;
          align-items: center;
          padding: 0;

          .vr {
            height: 100%;
            width: 1px;
            background-color: #000;
            flex-grow: 0 !important;
            flex-shrink: 0 !important;
            flex-basis: auto !important;
          }

          .bevezeto,
          .alcim,
          .curvyArrow {
            display: none;
          }
        }
      } //article end

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

      @media #{$smalldesktop} {
        //big: first 2 articles
        .home_wrapper-big {
          flex: 0 0 auto;
          border-right: #000 1px solid;
          article {
            position: relative;
            width: calc(100vw - (#{$h-unit-2} * 3));
            height: calc(100vh - #{$v-unit-1});
            margin: 0;
            padding: 0;
            margin-left: $h-unit-2;
            margin-top: $v-unit-1;

            border-top: 1px #000 solid;

            /* ------------- home article desktop big - thumbnail and title ------------- */

            .thumbnailwrapper {
              width: 60%;
              height: calc(100% - #{$v-unit-1});
              display: flex;
              flex-direction: row;
              justify-content: flex-start;

              img.attachment-home-big-thumbnail {
                object-fit: cover;
                width: 100%;
                height: 100%;
              }
            }

            h2 {
              height: unset;
              position: absolute;
              top: 4rem;
              padding: 4rem;
              padding-right: 2rem;
              width: calc(100vw - #{$h-unit-5});
            }

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

              display: flex;
              flex-direction: row;
              padding: 0;
              justify-content: flex-start;
              align-items: center;
              overflow: visible !important;

              @include home-metadata-big();

              @media #{$mobile-landscape} {
                height: calc(#{$h-unit-2} / 2);
              }

              &.noBottomScrollbar {
                height: $h-unit-2 + 1.5rem;
              }

              & > div {
                flex: 1 1 auto;
              }

              .categories {
                display: block;
                padding: 0;
              }

              .postedon {
                padding: 0;
              }

              .bevezeto,
              .alcim {
                color: #000 !important;
                display: none;
              }

              .alcim {
                @include transform(rotate(270deg));
                transform-origin: top bottom;
                text-align: left;
                flex: 0 0 auto;
                height: $h-unit-1;
                width: 20rem;
                margin: 0 -3rem;
              }

              .bevezeto {
                width: 50%;
                flex: 0 1 auto;
                text-align: left;
                padding: $h-unit-1;
                @include home-metadata-bevezeto();
              }

              .transparent,
              .transparent a {
                color: transparent !important;
                //color: #000 !important;
              }

              .filler {
                flex: 0 0 auto;
                width: 60%;
                height: 1px;
                align-self: flex-start;
              }

              .curvyArrow {
                position: absolute;
                display: block;
                right: 0;
                top: 0;
                height: ($h-unit-1 + $h-unit-2);
                width: ($h-unit-1 + $h-unit-2)/2;
                object {
                  height: ($h-unit-1 + $h-unit-2);
                  position: absolute;
                  right: 0;
                  top: calc(-50% + 0.5px);
                }
              }
            } //metadata end

            /* ------------------------- home article big hover ------------------------- */
            &.hovered {
              h2 > a {
                color: #000;
              }
            }
          }
          &.home_wrapper-1 {
            article {
              .metadata {
                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, left);
                .filler {
                  position: relative;
                }
              }
              a.thumbnailwrapper {
                float: right;
              }
            }
          }
          &.home_wrapper-2 {
            article {
              border-left: #000 1px solid;

              .metadata {
                justify-content: flex-end;
                @include triangle-corner-bordered(#{$v-unit-1}, 0, transparent, #000, right);
                .filler {
                  order: -1;
                }
              }
              .thumbnailwrapper {
                width: calc(60% + #{$h-unit-1});
                img {
                  left: -$h-unit-1;
                  position: relative;
                }
              }
            }
          }
        }
      } //smalldesktop end

      /* ----------------------- articles desktop small ----------------------- */

      @media #{$smalldesktop} {
        .home_wrapper-small {
          max-width: calc(100vw - (#{$h-unit-2} * 3));
          max-height: calc((100vw - (#{$h-unit-2} * 3)) / 3 * 2);
          height: calc(100vh - #{$v-unit-2});
          width: calc((100vh - #{$v-unit-2}) / 2 * 3);
          flex-shrink: 0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          margin: auto 0;
          &.home_wrapper-s1:not(.home_wrapper-1) {
            margin-left: $h-unit-1;
          }
          &.home_wrapper-s1.home_wrapper-small.home_wrapper-1 {
            margin-left: $h-unit-2;
          }

          article,
          .archivetitle,
          .archivedescription {
            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%;
              min-width: unset;
              height: $h-unit-1;

              position: absolute;
              bottom: 0;
              right: 0;

              background: transparent;

              display: flex;
              flex-direction: row;
              padding: 0;
              justify-content: space-between;
              align-items: stretch;
              @include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
              display: none;
              &.vis {
                display: flex;
              }

              .categories,
              .postedon {
                @include home-metadata();
              }
              .categories {
                margin-left: $v-unit-1 * 1.5;
                padding: $v-unit-1 / 3 0;
                flex: 1 1 auto;
              }
              .postedon {
                padding: $v-unit-1 / 3 $v-unit-1 / 4;
                flex: 1 0 auto;
              }
            }

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

            h2 {
              display: none;
              position: absolute;
              top: 0;
              background-color: #fff;
              height: 100%;
              padding-left: $v-unit-1;
              @media #{$bigdesktop} {
                padding: $h-unit-1;
              }

              a {
                bottom: $h-unit-1 + $v-unit-1 * 0.5;

                width: calc(100% - #{$v-unit-2});
                @include fit-content(height);
                position: absolute;

                @media #{$bigdesktop} {
                  width: calc(100% - #{$h-unit-2});
                }
              }
            }
          }
          article {
            cursor: pointer;
          }

          .archivetitle {
            margin: 0 auto;
            width: calc(100% / 3);
            position: relative;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 1rem 2rem;
            text-align: center;
            border-right: #000 1px solid;
            @include triangle-corner-bordered($h-unit-1, 0, transparent, #000, left);
            h1 {
              @include home-title();
              margin: 0;
              display: block;
              width: 100%;
              text-align: left;
              // width: calc(100% / 3);
            }
            &.tag {
              order: 1;
              h1 {
                text-transform: uppercase;
              }
            }
            & > object {
              position: absolute;
              top: 2rem;
              right: 2rem;
              width: $h-unit-1;
              height: $h-unit-1;
            }
          }
          .archivedescription {
            order: 4;
            border-top: #000 1px solid;
            border-right: #000 1px solid;
            border-bottom: #000 1px solid;
            margin: 0;
            width: 100%;
            position: relative;
            bottom: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-start;
            padding: 2rem;
            p {
              margin: 0;
              @include archive-tag-description();
            }
          }
        }
      }
    } //section end
  } //main end
} //home, archive, search end

/* -------------------------------------------------------------------------- */
/*                               Search results                               */
/* -------------------------------------------------------------------------- */

.search-results {
  #content {
    .archivetitle {
      word-wrap: break-word;
      h1 {
        @include home-title-small();
      }
    }
  }
}

.search-no-results {
  main {
    @media #{$smalldesktop} {
      padding: 0 $h-unit-4;

      .archivetitle h1,
      article h2 {
      }
    }
  }
}

/* -------------------------------------------------------------------------- */
/*                                   Events                                   */
/* -------------------------------------------------------------------------- */

body.category.category-esemeny {
  header {
    background-color: #000;
  }
  main {
    padding-top: 5rem + (2rem * 2);
    article {
      height: 50vh;
      .thumbnailwrapper {
        height: 50vw;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .event-metadata {
        display: flex;
        flex-direction: column;
        padding: 2rem;

        .top-row,
        .bottom-row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 50%;
          flex: 0 0 auto;
          // & > * {
          // }
          // .ev-date {
          // }
          h2 {
            height: unset;
          }
        }
        .hr {
          flex: 0 0 auto;
          height: 1px;
          width: 100%;
          background-color: #000;
        }
      }
    }
  }
}

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

@mixin singlDesktopLayout() {
  padding-right: $h-unit-4;
  padding-left: 0;
  max-width: calc(1024px + #{$h-unit-4});
}

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

  $padd: 2rem;
  /* ---------------------------- single on mobile ---------------------------- */
  article {
    padding-bottom: $h-unit-1;

    .thumbnailwrapper {
      padding: 0;

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

    .titlewrapper {
      position: relative;
      top: 0;
      width: 100%;
      // height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-content: flex-start;
      padding: 0;
      padding-top: $h-unit-2;

      .metadata {
        width: calc(100vw - #{$h-unit-1});
        bottom: unset !important;
        height: $h-unit-1;
        position: relative;
        align-self: flex-end;
        display: flex;
        flex-direction: column;
        justify-content: center;

        @include single-metadata();

        .metaWrapper {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          .time-cat {
            z-index: 10;
          }
        }
      }
      h1.single-title {
        margin: 0;
        @include single-title();
        padding: $padd;
        background-color: #fff;
      }
    }

    //override if thumbnail
    &.has-post-thumbnail {
      @media #{$only-mobile} {
        .titlewrapper {
          position: absolute;
          height: 100vh;
          justify-content: flex-end;
          padding: 0;
          h1.single-title {
            min-height: 25vh;
          }
        }
      }
    }

    /* ---------------------------- single header on desktop --------------------------- */

    @media #{$smalldesktop} {
      min-height: calc(100vh - #{$h-unit-2});
      margin-top: 100vh;
      margin-left: $h-unit-1;
      background-color: #fff;
      border-left: #000 solid 1px;
      padding-left: $h-unit-1;

      //   & > * {
      //     padding: $padd $h-unit-1;
      //   }

      .thumbnailwrapper {
        position: fixed;
        top: 0;
        left: 0;
        // left: calc(-#{$h-unit-1});
        z-index: -1;
        bottom: 0;
        width: 100%;

        img.attachment-post-thumbnail {
          // post thumbnail on home

          object-fit: cover;
          padding: 0;

          width: 100%;
          height: 100%;
        }
      }

      /* ---------------------- title and metadata on desktop --------------------- */

      .titlewrapper {
        position: relative;
        justify-content: flex-start;
        height: unset;
        padding-top: 0;

        .metadata {
          top: -#{$h-unit-1};
          width: 100%;
          padding-left: 0;
          padding-right: 0;

          @include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);

          .metaWrapper {
            @include singlDesktopLayout();
          }

          // .time-cat {
          // }
        }
        h1.single-title {
          background-color: transparent;
          min-height: unset;
          top: -#{$h-unit-1};
          position: relative;
          @include singlDesktopLayout();
        }
      }
    }

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

    hr {
      height: 1px;
      background-color: #ff5f5f;
      padding: 0;
      margin: 0 auto;
      border: none;
      width: 20%;
      &.content-wrap {
        width: 40%;
      }
      &.content-begin {
        margin-top: $padd;
        @media #{$smalldesktop} {
          margin-top: 0 !important;
        }
      }
      &.content-end {
        margin-top: $padd * 2;
        margin-bottom: 0;
        @media #{$smalldesktop} {
          margin-top: $padd;
          margin-bottom: $padd;
        }
      }
    }

    //override if thumbnail
    &.has-post-thumbnail {
      hr.content-begin {
        margin-top: calc(25vh + #{$padd});
      }
    }

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

    .single-content {
      position: relative;
      padding: $padd;
      @media #{$smalldesktop} {
        top: -#{$h-unit-1};
        @include singlDesktopLayout();
      }

      h2 {
        @include single-h2();
      }

      h3 {
        @include single-quote();
        margin: 2rem 0;
        display: inline-block;
        background: #ff5f5f;
        @include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f);
      }

      h4 {
        @include single-h4();
      }

      a:hover {
        text-decoration: underline;
      }

      strong {
        font-weight: 900;
      }

      blockquote {
        @include single-quote();
        margin: 3rem 0;
        p {
          background: #ff5f5f;
          display: inline;
          padding: 3px 0;

          @include box-shadow(10px 0 #ff5f5f, -5px 0 #ff5f5f);
        }
        cite {
          display: block;
          position: relative;
          font-size: 80%;
          top: 0.5rem;
          left: 2rem;
        }
      }

      .wp-block-pullquote {
        text-align: unset;
      }

      /* ---------------------------- images on single ---------------------------- */

      .wp-block-image {
        margin: $padd 0;
        position: relative !important;

        @media #{$smalldesktop} {
          padding: 0;
        }

        &:not(.wp-block-image-aligned) {
          @include fit-content(width);
        }

        figcaption {
          bottom: 0 !important;

          &::after {
            @include trianglecorner(topright, #{$h-unit-1});
          }
        }
      }

      .wp-block-gallery {
        padding: 0;
        margin: $padd 0;
        li {
          margin-right: 0;
          @media #{$smalldesktop} {
            margin-bottom: $v-unit-1;
          }
          &:nth-child(odd) figcaption::after {
            @include trianglecorner(topright, #{$h-unit-1});
          }
          &:nth-child(even) figcaption {
            right: 0;
            top: 0;
            &::after {
              @include trianglecorner(bottomleft, #{$h-unit-1});
            }
          }
        }
      }

      //figcaptions:
      .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% - #{$h-unit-1});
        height: $h-unit-1;
        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;
        @media #{$smalldesktop} {
          display: none;
          &.vis {
            display: block;
          }
        }
      }

      //aligned:
      .wp-block-gallery,
      .wp-block-image {
        .alignedWrapper {
          position: relative;

          @media #{$smalldesktop} {
            max-width: 50%;
            @include fit-content(width);
            &.alignleftWrapper {
              padding-right: $padd;
              float: left;
            }
            &.alignrightWrapper {
              padding-left: $padd;
              float: right;
            }
          }
          .alignleft,
          .alignright {
            margin: 0;
            //no align on mobile
            position: relative;
            // @media #{$only-mobile} {
            float: unset;
            // }

            @media #{$smalldesktop} {
              width: auto;
              // max-width: 50%;

              // @media #{$smalldesktop} {
              //   &.alignleft {
              //     padding-right: $padd;
              //   }
              //   &.alignright {
              //     padding-left: $padd;
              //   }
              // }
            }
          }
        }
      }

      .authors {
        // @include single-h4();
        @include single-author();
        color: #000;
        -webkit-text-stroke: 0px;
        a {
          @include single-author();
        }
      }
    } //.single-content end
  } //article end
  /* -------------------------------- lightbox -------------------------------- */

  #cboxOverlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 10;
  }
  #colorbox {
    z-index: 12;
    @media #{$smalldesktop} {
    z-index: 3150;
    }
    &:focus {
      border: none;
      outline: none;
    }
    #cboxContent {
      #cboxTitle {
        padding: 1rem;
        @include captiontext();
        color: #fff;
        width: 100%;
        text-align: center;
      }
      #cboxCurrent {
        display: none !important;
      }
      button {
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;

        &#cboxPrevious,
        &#cboxNext {
          background-image: url(../img/solid_arrow_right.svg);
          width: 2rem;
          height: 4rem;
          bottom: -5rem;
          filter: invert(100);
          z-index: 14;
          @media #{$smalldesktop} {
            position: fixed;
            top: 50%;
            z-index: 3200;
          }
        }
        &#cboxPrevious {
          left: 1rem;
          @include transform(scaleX(-1));
          @media #{$smalldesktop} {
            left: $v-unit-1;
          }
        }
        &#cboxNext {
          right: 1rem;
          @media #{$smalldesktop} {
            right: $v-unit-1;
          }
        }
        &#cboxClose {
          background-image: url(../img/dis-plus.svg);
          width: 2rem;
          height: 2rem;
          @include transform(rotate(45deg));
          top: -3rem;
          right: 1rem;
          @media #{$smalldesktop} {
            position: fixed;
            right: $v-unit-1;
            top: $v-unit-1;
          }
        }
      }
    }
  } //#colorbox end

  /* ------------------------------ related posts ----------------------------- */

  .toHome,
  #related_posts > h3 {
    padding-bottom: $padd * 2;
    margin: 0 auto;
    // display: inline-block;
    text-align: center;
    @include single-metadata();
    a {
      @include single-metadata();
      &:hover {
        color: #000;
        -webkit-text-stroke-color: transparent;
      }
    }
  }
  .toHome {
    @media #{$smalldesktop} {
      position: relative;
      padding-top: $padd * 2;
      top: -#{$h-unit-1};
      margin: 0;
      @include singlDesktopLayout();

      a {
        margin-bottom: $padd * 2;
        display: block;
      }
    }
  }

  #related_posts {
    & > h3 {
      display: none;
    }
    ul {
      padding: 0;
      li {
        display: block;
        position: relative;
        cursor: pointer;
        //   .relatedcontent {
        //     height: 50vw;
        //     padding: $padd;
        //
        //   }
        & > a {
          margin: 0;
          padding: 0;
          border: none;
          display: inline-block;
        }

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

        h2 {
          width: 100%;
          height: 50vw;
          padding: 2rem;
          padding-top: 3rem;
          margin: 0;

          a {
            display: block;
            @include related-title();
          }
        }

        .metadata {
          bottom: 50%;
          height: $h-unit-1;
          display: flex;
          @include fit-content(width);
          justify-content: space-around;
          flex-wrap: nowrap;
          align-items: center;
          padding: 0;

          .vr {
            height: 100%;
            width: 1px;
            background-color: #000;
            flex-grow: 0 !important;
            flex-shrink: 0 !important;
            flex-basis: auto !important;
          }
        }
      }
    }

    /* ------------------------ related posts on desktop ------------------------ */
    @media #{$smalldesktop} {
      top: -#{$h-unit-1};
      position: relative;
      padding-top: $padd * 2;
      @include singlDesktopLayout();

      & > h3 {
        display: block;
      }
      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        li {
          flex: 0 0 calc(100% / 3);
          height: calc((100vw - #{$v-unit-4}) / 3);
          max-height: calc(1024px / 3);
          position: relative;
          .related_thumbnailwrapper {
            width: 100%;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .metadata {
            width: 100%;
            min-width: unset;
            height: $h-unit-1;

            position: absolute;
            bottom: 0;
            right: 0;

            background: transparent;

            display: flex;
            flex-direction: row;
            padding: 0;
            justify-content: space-between;
            align-items: stretch;
            @include triangle-corner-bordered(#{$h-unit-1}, 0, transparent, #000, left);
            display: none;
            &.vis {
              display: flex;
            }

            .categories,
            .postedon {
              @include home-metadata();
            }
            .categories {
              margin-left: $v-unit-1 * 1.5;
              padding: $v-unit-1 / 3 0;
              flex: 1 1 auto;
            }
            .postedon {
              padding: $v-unit-1 / 3 $v-unit-1 / 4;
              flex: 1 0 auto;
            }
          }

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

          h2 {
            display: none;
            position: absolute;
            top: 0;
            background-color: #fff;
            height: 100%;
            padding-left: $v-unit-1;
            @media #{$bigdesktop} {
              padding: $h-unit-1;
            }

            a {
              bottom: $h-unit-1 + $v-unit-1 * 0.5;

              width: calc(100% - #{$v-unit-2});
              @include fit-content(height);
              position: absolute;

              @media #{$bigdesktop} {
                width: calc(100% - #{$h-unit-2});
              }
            }
          }
        }
      }
    }
  }
} //body.single, page end

/* -------------------------------- page only------------------------------- */
body.page {
  @media #{$smalldesktop} {
    article {
      margin-top: $h-unit-2;
    }
  }
}

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

@mixin tagcolors($color) {
  //metadata on mobile
  .metadata {
    @media #{$only-mobile} {
      color: $color !important;
      .vr {
        background-color: $color !important;
      }
    }

    a {
      color: $color !important;
    }
  }

  hr {
    background-color: $color !important;
  }

  figcaption {
    color: $color !important;
  }

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

  //hover on bedo circle
  &.bedo-sub-wrapper {
    & > a {
      -webkit-text-stroke: $color 1px !important;
    }
    span {
      color: $color !important;
    }
    .circle {
      background-color: $color !important;
    }
  }

  // tag archive pages

  &.archive.tag {
    background-color: $color !important;
    .header-1,
    .header-2 {
      background-color: $color !important;
    }
    article *:not(.vr) {
      background-color: $color !important;
    }
  }
}

//tagclip: filters on small articale images

@mixin tagclip($tag) {
  @media #{$smalldesktop} {
    .thumbnailwrapper > img {
      -webkit-mask: url(../img/clip/#{$tag}_desktop.svg);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100%;
      // -webkit-clip-path: url(../img/clip/#{$tag}_desktop.svg);
      // clip-path: url(../img/clip/#{$tag}_desktop.svg#clipper);
      mask: url(../img/clip/#{$tag}_desktop.svg);
      mask-repeat: no-repeat;
      mask-size: 100%;
    }
  }
}

//colors on single articles

@mixin tagcolors-single($color, $darkcolor) {
  .titlewrapper {
    .metadata {
      @media #{$smalldesktop} {
        // color: #fff !important;
        -webkit-text-stroke: $color 1px !important;
      }
      a {
        @media #{$smalldesktop} {
          color: #fff !important;
          -webkit-text-stroke: $color 1px !important;
          &:hover {
            color: $color !important;
          }
        }
      }
    }
  }
  .single-content {
    blockquote p,
    h3 {
      background: $color !important;
      @include box-shadow(10px 0 $color, -5px 0 $color !important);
      a {
        color: $darkcolor;
      }
    }
    a {
      color: $color;
    }
    .authors {
      a {
        -webkit-text-stroke: $color 1px !important;
        &:hover {
          color: $color !important;
          text-decoration: none;
        }
      }
    }
  }
}
$color-be: #fdff00;
$color-do: #3c00ff;
$color-think: #00ffb8;
$color-love: #ff5f5f;

$color-be-dark: #7e7f00;
$color-do-dark: #1e007f;
$color-think-dark: #007f5c;
$color-love-dark: #7f2f2f;

//colors on articles

.tag-be {
  @include tagcolors($color-be);
  ::selection {
    color: #000;
    background-color: $color-do;
  }
  &.random {
    @include tagclip(be);
  }
}

.tag-do {
  @include tagcolors($color-do);
  ::selection {
    color: #000;
    background-color: $color-be;
  }
  &.random {
    @include tagclip(do);
  }
}

.tag-think {
  @include tagcolors($color-think);
  ::selection {
    color: #000;
    background-color: $color-love;
  }
  &.random {
    @include tagclip(think);
  }
}

.tag-love {
  @include tagcolors($color-love);
  ::selection {
    color: #000;
    background-color: $color-think;
  }
  &.random {
    @include tagclip(love);
  }
}

//single article
.single {
  .tag-be {
    @include tagcolors-single($color-be, $color-be-dark);
  }

  .tag-do {
    @include tagcolors-single($color-do, $color-do-dark);
  }

  .tag-think {
    @include tagcolors-single($color-think, $color-think-dark);
  }

  .tag-love {
    @include tagcolors-single($color-love, $color-love-dark);
  }
}

//menu colored on big article hover

body,
.header-1,
.header-2 {
  &.hover-tag-be {
    background-color: $color-be !important;
  }

  &.hover-tag-do {
    background-color: $color-do !important;
  }

  &.hover-tag-think {
    background-color: $color-think !important;
  }

  &.hover-tag-love {
    background-color: $color-love !important;
  }
}

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

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