@import 'global.css';
@import 'nav.css';
@import 'case-study.css';

/* Global Styles */
body {
    background-color: var(--primary);
    font-family: "Poppins", sans-serif;
    display: flex;
    flex-direction: column;
  /*  align-items: center; */
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
   
}
ol.list-num{
    list-style: decimal;
    margin-left: 2rem;
    font-family: "Poppins", sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.313rem; /* 150% */
    color: var(--text-primary);
}
ol.list-letter{
    list-style: lower-alpha;
    margin-left: 2rem;
    font-family: "Poppins", sans-serif;
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1.313rem; /* 150% */
    color: var(--text-primary);
}
/* Header */
header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    width: 100%;
    top: 0;

    padding: 2rem 2rem 1rem;

    background-color: var(--body-color-bg);
}

.branding a{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 99;
    gap: 1rem;
}

.branding img.logo {
    width: 48px;
}                        

.site-title {
    font-family: 'Bungee', cursive;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-primary);
    display: none;
}
/* Hides "Kenzie" on mobile */
@media screen and (min-width: 768px) {
    .site-title {
        display: flex;
    }
  }
.top-nav {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color:var(--text-black);
    z-index: 99;
  }

.menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
  
.menu > li {
    margin: 0 1rem;
    display: none;
}

ul.menu li.navigation {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.125rem;
}

.menu-button-container {
    display: none;
    height: 48px;
    width: 48px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99;
  }
  
  #menu-toggle {
    display: none;
  }

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
    margin-top: 0px;
    transform: rotate(45deg);
}
  
#menu-toggle:checked + .menu-button-container .menu-button {
    background: rgba(255, 255, 255, 0);
}
  
#menu-toggle:checked + .menu-button-container .menu-button::after {
    margin-top: 0px;
    transform: rotate(-45deg);
}

@media (max-width: 768px) {
    .menu-button-container {
      display: flex;
    }
    .menu {
      position: absolute;
      display: flex;
      background-color: #2C2D2F;
      flex-direction: column;
      width: 100vw;
      left: 0;
      top: 0;
      justify-content: center;
      align-items: center;


    }

    #menu-toggle:checked ~ ul.menu {
        height: 100vh;
    }
    #menu-toggle ~ .menu li {
        position: relative;
        height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    #menu-toggle:checked ~ .menu li {
        display: flex;
        flex-grow: 1;
        padding: 1em;
        transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    #menu-toggle:checked ~ .menu li.work {
        justify-content: center;
        align-items: flex-end;
    }

    #menu-toggle:checked ~ .menu li.experience {
        justify-content: center;
        align-items: center;
    }

    #menu-toggle:checked ~ .menu li.about {
        justify-content: center;
        align-items: flex-start;
    }

    #menu-toggle:checked ~ .menu li.plant {
        flex-grow: 2;
        justify-content: center;
        align-items: flex-start;
    }

    #menu-toggle:checked ~ .menu li.plant img.plant {
        width: 167px;
        height: auto;
    }

    .menu > li a{
      display: flex;
      justify-content: center;
      margin: 0;
      padding: 0.5em 0;
      width: 100%;
      color: white;
    }
  }

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




  /* Navigation */

.desktop-nav {
    display: none;
}
nav {
    display: flex;
    flex-direction: row;

    position: absolute;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

nav a{
    padding-left: 1rem;
    color: var(--button-color-cta-tertiary-default);
    font-size: .875em;;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.10em;

    padding: .5rem 1rem;
    margin-left: 1rem;

    background-color:var(--button-color-bg-tertiary-default);
    border-radius: var(--border-radius-900);

    transition: background-color 500ms ease-in-out;  
}

nav a:hover{
    color: var(--button-color-cta-tertiary-hover);
    background-color: var(--button-color-bg-tertiary-hover);
}

nav a.active{
    color: var(--button-color-cta-tertiary-active);
    background-color: var(--button-color-bg-tertiary-active);
}

.desktop-nav a{
    padding-left: 1rem;
    color: var(--button-color-cta-tertiary-default);
    font-size: .875em;;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.10em;

    padding: .5rem 1rem;
    margin-left: 1rem;

    background-color:var(--button-color-bg-tertiary-default);
    border-radius: var(--border-radius-900);

    transition: background-color 500ms ease-in-out;  
}

.desktop-nav a:hover{
    color: var(--button-color-cta-tertiary-hover);
    background-color: var(--button-color-bg-tertiary-hover);
}

.desktop-nav a.active{
    color: var(--button-color-cta-tertiary-active);
    background-color: var(--button-color-bg-tertiary-active);
}

@media screen and (min-width: 768px) {
    .desktop-nav {
        display: flex;
    }
}


/* Hero */

.hero {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column-reverse;
    padding: 2rem;
    gap: 2rem;
}

.hero img {
    min-width: 300px;
    width: 100%;
    max-width: 440px;
}

@media screen and (min-width: 768px) {
    .hero {
        flex-direction: row;
        justify-content: space-between;
    }
}

.intro {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 545px;
} 

.intro-copy-lockup {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.action-container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    width: auto;
    align-items: center;
    gap: 1rem;
}
@media screen and (min-width: 1024px) {
    .action-container {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        width: auto;
        align-items: center;
        gap: 1rem;
    } 
}

.row-container {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    width: auto;
    align-items: flex-start;
    gap: 1rem;
} 

@media screen and (min-width: 322px) {
    .row-container {
        flex-flow: row nowrap;
        align-items: center;
    } 
}

.item {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
    padding: 1rem;
    gap: 0.5rem;

    border-radius: 1rem;
    background-color: var(--primary);
    position: relative;
    border: 1px solid var(--primary);
    cursor:pointer;

    transition: all 300ms ease-in-out;

    /*hover*/
    &:hover {
      flex-grow: 4.3;
      background-color: var(--card-diagram-color-bg);
      border: 1px solid var(--card-diagram-color-border);
    }

   /*before*/ 
    &:before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .card-item {
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex-direction: column;
    flex-grow: 1;
    padding: 1rem;
    gap: 1rem;

    border-radius: var(--border-radius-500);
    background-color: var(--primary);
    position: relative;
    border: 1px solid var(--primary);
    cursor:pointer;

    transition: all 300ms ease-in-out;

    /*hover*/
    &:hover {
      flex-grow: 4.3;
      background-color: var(--card-diagram-color-bg);
      border: 1px solid var(--card-diagram-color-border);
    }

   /*before*/ 
    &:before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

  }

/* My Work */

.section-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    gap: 2rem;
}

.section-title {
    color:var(--secondary-400);
    width: 100%;
}

.card-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
}

.card {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    padding: 1rem;
    gap: 1rem;

    background-color: var(--card-color-bg);
    border-radius: var(--border-radius-500);
    outline: 0px solid var(--card-color-bg);
    transform: scale(1);
}
.card img {
    width: 100%;
    max-width:360px;
    border-radius: var(--border-radius-200);
}
.card.select {
    transition: all 300ms ease-in-out;
   
    &:hover {
        transform: scale(.985);
        border-radius: var(--border-radius-200);
        outline: 1px solid var(--card-diagram-color-border);
        outline-offset: .75rem;
      }
}

.card.featured {
    display: flex;
    width: 100%;
    padding: 1rem;
    gap: 1rem;
    flex-direction: column;
}

.card-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2rem;
}
.card-title-lockup {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

.card-copy-lockup {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: .5rem;
}

@media screen and (min-width: 768px) {
    .card-container {
        flex-direction: row;
        justify-content: left;
    }
    .card {
        width: calc(50% - 3rem);
    }
}


@media screen and (min-width: 1024px) {
    .section-container {
        padding: 2rem;
    }
    .card {
        width: calc(33.3% - 1rem);
        padding: 1.5rem;
    }

    .card.featured {
        flex-direction: row;
        padding: 1.5rem;
    }

    .card.featured img {
        max-width:360px;
    }
}



/* Experience Cards */
.job {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    
    width: 100%;

    gap: 0rem;
    transition: all 500ms ease;

}

.job img {
    display:none;
}

.card.experience {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    
    width: 100%;
    max-width: 750px;

    padding: 1rem;
    gap: 1rem;

    background-color: var(--card-color-bg);
    border-radius: var(--border-radius-500); 
}

.card.experience> * {
    flex: 1 100%;
  }

.card.experience img {
    display:block;
    min-width: 66px;
    max-width: 82px;
    flex: 1 0px;
}


.job-title {
    display: flex;
    flex: 3 0px;
    flex-flow: column nowrap;
    justify-content: left;
}

/* Medium screens */
@media screen and (min-width: 770px) { 
    .job{
        display: flex;
        align-items: center;
        flex-flow: row nowrap;
        
        width: 100%;
        gap: 1rem;
    
    }
    .card.experience img {
        display:none;}

    .job-title {
        flex: 4 0px;}

    .job img {
        padding: 1rem;
        display: block;
        min-width: 260px;
        max-width: 316px;
        flex: 1 0px;}

}

h4 a {
    color: var(--text-tertiary);
}

h4 a:hover{
    text-decoration: underline;
}

h5.role {
    color: var(--text-primary);
}

h6.overline {
    font-weight: 300;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 1.5px;
    line-height: 24px;
}



.card .tags {
    display: flex;
    flex-wrap: wrap; 
    gap: .5rem;
}

.tag-li {
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--text-black);
    text-transform: uppercase;
    
    padding: .5rem;
    border-radius: var(--border-radius-100);

    background-color: var(--tag-color-bg);
}


button.primary {
    width: 100%;
    border-radius: var(--border-radius-500);
    border: none;
    background-color: var(--button-color-bg-primary-default);
    padding: 1rem 2rem;

    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--button-color-cta-primary-default);

    cursor: pointer;
    transition: all 300ms ease;
}

button.primary:hover {
    color: var(--button-color-cta-primary-default);
    background-color: var(--button-color-bg-primary-hover);
    border-radius: var(--border-radius-100);
}

button.primary:active {
    background-color: var(--button-color-bg-primary-active);
}

button.secondary {
    width: 100%;
    border-radius: var(--border-radius-500);
    border: 2px solid var(--button-color-border-secondary-default);
    background-color:var(--button-color-bg-secondary-default);
    padding: 1rem 2rem;

    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--button-color-cta-secondary-default);

    cursor: pointer;
    transition: all 300ms ease;
}

button.secondary:hover {
    color: var(--button-color-cta-secondary-hover);
    border: 2px solid var(--button-color-bg-secondary-hover);
    background-color: var(--button-color-bg-secondary-hover);
    border-radius: var(--border-radius-100);
}

button.secondary:active {
    color: var(--button-color-cta-secondary-active);
    background-color: var(--button-color-bg-secondary-active);
}

@media screen and (min-width: 1024px) {
    button.primary {
        width: auto;
    }
    button.secondary {
        width: auto;
    }
}


.more {
    display:flex;
    position: relative;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap:1rem;
    padding: 1rem 1.5rem;
}

@media screen and (min-width: 770px) {
    .more {
        flex-flow: row nowrap;
        width:100%;
    }
}

h4.text-more {
    display:flex;
    width:auto;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;

    color: var(--text-secondary);
}

/* My Principles */
.my-principles {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    width:100%;
}
@media screen and (min-width: 1024px) {
    .my-principles {
        padding: 2rem;
    }
}

.principle-container {
    display: flex;
    flex-wrap: wrap;
    padding: 24px 0px;
    justify-content: flex-start;
    gap: 1rem;
    align-items: stretch;
}

@media screen and (min-width: 1024px) {
    .principle-container{
        flex-wrap: nowrap;
    }
}

@media screen and (min-width: 600px) {
    .card.principle {
        width: 48%;
    }
}

@media screen and (min-width: 1024px) {
    .card.principle {
        width: 25%;
    }
}

/* My Process */

.process {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    

    padding: 1.5rem;
    background-color: var(--card-color-bg);
    border-radius: var(--border-radius-500);
    border: none;

}

.process-flow {
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    align-items: flex-start;

    width: 100%;

    border-radius: var(--border-radius-500);
    border: 2px var(--card-diagram-color-border) solid;
    background-color: var( --card-diagram-color-bg);
    padding: 1rem;
}

.top-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: .5rem 0;
}

.top-row h6 {
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 1px;

    padding-right: .5rem;
}

.top-row img {
    width: 24px;
}

.bottom-row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
}
@media screen and (min-width: 1024px) {
    .bottom-row {
        flex-direction: row;
    }
}

/* Process Cards */

.process-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    width: calc(100% - 1rem);

    padding: 1rem;
    margin: .5rem;
    background-color:var(--card-color-bg);

    border-radius: var(--border-radius-200);
    border: none;
}

@media screen and (min-width: 1024px) {
    .process-container {
        width: calc(25% - 1rem);
    }
}

.process-container .title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    padding: .5rem;
}

.process-container .title h6 {
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-primary);
    
    padding-bottom: .5rem;
    padding-right: .5rem;
}

.process-container .title img {
    width: 24px;
}

.process-container .tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    align-items: center;

}

/* My Tools */
.my-tools {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2rem;
}

.tools {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-evenly;
    flex-wrap: wrap;
    background-color: var(--card-color-bg);
    border-radius: var(--border-radius-500);
    border: none;
    gap:1rem;

    width: 100%;
    padding: 1.5rem;
}

.tools .tool {
    width: 96px;
    height: 96px;
    border-radius: var(--border-radius-900);
}

.tools .tool {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tools .tool.figma {
    background-image: url("../img/tools/figma.png");
}

.tools .tool.creative-cloud {
    background-image: url("../img/tools/cc.png");
}

.tools .tool.html5 {
    background-image: url("../img/tools/html5.png");
}

.tools .tool.css3 {
    background-image: url("../img/tools/css3.png");
}

.tools .tool.sketch {
    background-image: url("../img/tools/sketch.png");
}

.tools .tool.invision {
    background-image: url("../img/tools/invision.png");
}

.tools .tool.maya {
    background-image: url("../img/tools/maya.png");
}

.tools .tool.framer {
    background-image: url("../img/tools/framer.png");
}

/* Kitty Kat */
.kitty-cat {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 3rem 0;
}

.kitty-cat img {
    width: 180px;
}

/* Footer */
footer {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;

    border-top: solid 4px #757575;
    
}

footer img.logo {
    height: 2.25rem;
}

footer .social {
    display:flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: .5rem;
}

.dribbble{
    background: var(--white) url(../img/social/dribbble.svg) no-repeat center;
}

.linkedin{
    background: var(--white) url(../img/social/linkedin.svg) no-repeat center;
}
.social-icon{
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 1.25rem;
    transition: border-radius 300ms ease;
}
.social-icon:hover{
    border-radius: .5rem;
    background-color: var(--button-color-bg-primary-hover);
}