@import '../../../../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800,700|Merriweather:400,700'); // custom font

// --------------------------------

// Full-Screen Pushing Navigation - by CodyHouse.co

// --------------------------------

:root {
  // colors
  @include defineColorHSL(--cd-color-1, 214, 28%, 20%);   // Ebony Clay
  @include defineColorHSL(--cd-color-2, 151, 13%, 66%);   // Pewter
  @include defineColorHSL(--cd-color-3, 213, 9%, 44%);    // Nevada

  // font
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Merriweather', serif;
}

.cd-main {
  overflow: hidden;
}

.cd-main__content {
	position: relative;
	z-index: 2;
  background-color: var(--cd-color-2);

  will-change: transform;
  transition: transform 0.7s cubic-bezier(.91,.01,.6,.99);
}

.nav-is-open .cd-main__content {
  transform: translateX(100%);
}

.js {
  .cd-nav {
  	position: fixed;
  	z-index: 1;
  	top: 0;
  	left: 0;
  	height: 100%;
  	width: 100%;
  	background-color: var(--cd-color-1);
  	visibility: hidden;
    transition: visibility 0.7s;
    @include fontSmooth;

    a {
      text-decoration: none;
    }
  }

  .cd-nav__title {
    position: relative;
    font-size: var(--text-xs);
    font-weight: 600;
    color: alpha(var(--color-white), .5);
    text-transform: uppercase;
    letter-spacing: 0.15em;

    &::after { // bottom separation line
      content: '';
      position: absolute;
      left: 0;
      bottom: -20px;
      height: 1px;
      width: 60px;
      background-color: currentColor;
    }
  }

  .nav-is-open .cd-nav {
    visibility: visible;
  }

  .cd-nav__content { // all navigation content
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-lg) 0 var(--space-lg) 80px;

    will-change: transform;  
    transform: translateX(-50%);
    transition: transform 0.7s cubic-bezier(.86,.01,.77,.78);

    @include breakpoint(md) {
      padding-left: 0;
    }

    @include breakpoint(lg) {
      .container {
        max-width: 840px;
      }
    }
  }

  .nav-is-open .cd-nav__content {
    transform: translateX(0);
    transition: transform 0.5s cubic-bezier(.82,.01,.77,.78);
  }

  .cd-nav__primary {
    margin-top: var(--space-xl);

    li {
      margin-bottom: var(--space-md);
    }
  }

  .cd-nav__link {
    font-family: var(--font-secondary);
    font-size: var(--text-lg);
    color: alpha(var(--color-white), .3);

    @include breakpoint(lg) {
      font-size: var(--text-xxl);
    }
  }

  .cd-nav__link:hover, .cd-nav__link-selected {
    color: var(--color-white);
  }

  .cd-nav__contact {
    margin-top: var(--space-xl);

    li {
      font-family: var(--font-secondary);
      margin-bottom: var(--space-md);
      color: alpha(var(--color-white), .3);
    }

    a {
      color: var(--color-white);
    }

    @include breakpoint(md) {
      text-align: right;
    }

    @include breakpoint(md) {
      margin-top: calc(var(--space-xl) + 20px);
    }
  }
}

.cd-nav-trigger {
  position: fixed;
  z-index: 3;
  top: 20px;
  left: var(--component-padding);
  height: 54px;
  width: 54px;
  background-color: var(--cd-color-1);
  border-radius: 50%;
  transition: transform 0.5s;

  &:active .cd-nav-trigger__icon {
    transform: scale(0.9);
  }

  svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }

  circle {
    stroke: var(--cd-color-3);
    transition: stroke-dashoffset 0.4s; // circle border animation
  }

  @include breakpoint(lg) {
    top: 40px;
  }
}

.nav-is-open .cd-nav-trigger {
  transform: rotate(180deg); // rotate trigger when navigation becomes visible

  circle {
    stroke-dashoffset: 0; // animate circle stroke
    transition: stroke-dashoffset 0.4s 0.3s;
  }
}

.cd-nav-trigger__icon { // menu icon created in CSS
  position: absolute;
  top: calc(50% - 1px);
  left: calc(50% - 11px);
  width: 22px;
  height: 2px;
  background-color: var(--color-white);
  transition: transform 0.3s;

  &::before, &:after { // upper and lower lines of the menu icon
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%; 
    background-color: inherit;

    will-change: transform, width, top;
    backface-visibility: hidden;
    transition: transform 0.5s, width 0.5s, top .3s;
  }

  &::before {
    transform-origin: right top;
    transform: translateY(-6px);
  }

  &::after {
    transform-origin: right bottom;
    transform: translateY(6px);
  }
}

.nav-is-open .cd-nav-trigger__icon::before,
.nav-is-open .cd-nav-trigger__icon::after { // animate arrow --> from menu to arrow
  width: 50%;
}

.nav-is-open .cd-nav-trigger__icon::before {
  transform: rotate(45deg);
}

.nav-is-open .cd-nav-trigger__icon::after {
  transform: rotate(-45deg);
}

.nav-is-open .cd-nav-trigger:hover .cd-nav-trigger__icon::before,
.nav-is-open .cd-nav-trigger:hover .cd-nav-trigger__icon::after {
  top: 0;
}

//demo style
.cd-main__content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  
  h1 {
    color: var(--cd-color-1);
  }

  p {
    font-family: var(--font-secondary);
    color: lightness(var(--cd-color-2), 1.3);
  }
}

.cd-article-link {
  font-family: var(--font-primary);
  color: var(--cd-color-1);
  font-size: var(--text-sm);
  transition: opacity .2s;

  &:hover {
    opacity: 0.8;
  }
}