/***********************************
 * MOBILE
 **********************************/

/*
 * General styling
 */

.container {
  position: relative;
  display: flex;
  flex-flow: column;
  height: 100%;
}

/*
 * Navbar and nav menu
 */
.navbar {
  position: relative;
  padding: calc(var(--ck-page-vertical-margins) * 2) var(--ck-page-horizontal-margins) var(--ck-page-vertical-margins);
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--ck-page-vertical-margins);
  text-transform: lowercase;
}

#navbar-hamburger-menu {
  cursor: pointer;
  width: var(--ck-root-font-size);
}

.logo {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.logo a {
  color: var(--ck-text-color);
}

.logo a:hover {
  color: var(--ck-highlight-color);
}

.navbar-nav {
  padding: var(--ck-page-vertical-margins) var(--ck-page-horizontal-margins);
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  background-color: var(--ck-main-background-color);
  box-shadow: 0 0 10px black;
  clip-path: inset(0px -10px -10px -10px);
  list-style-type: none;
}

ul.navbar-nav>li {
  margin: 0;
}

ul.navbar-nav>li.current-menu-item>a {
  text-decoration: underline;
}

/*
 * Page content
 */
main.main-content {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
}

.post {
  border-bottom: solid var(--ck-divider-color) 1.5px;
  padding: var(--ck-page-vertical-margins) var(--ck-page-horizontal-margins);
  margin-bottom: calc(var(--ck-page-vertical-margins) * 2);
}

.post-content {
  padding: var(--ck-page-vertical-margins) 0;
}

.post:last-child {
  border-bottom-width: 0;
}

.post-featured-image {
  width: 100%;
  height: auto;
}

.post:first-child .post-featured-image {
  padding-top: 0;
}

.post-title a {
  font-weight: 600;
  color: var(--ck-text-color);
}

.post-title a:hover {
  text-decoration-color: var(--ck-text-color);
}

/*
 * Footer
 */
footer {
  padding: var(--ck-page-vertical-margins) var(--ck-page-horizontal-margins);
  display: flex;
  flex-flow: column nowrap;
  font-size: 0.8rem;
}

.footer-socials {
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column nowrap;
}

.footer-socials>li {
  list-style-type: none;
}

/**************************************************
 * Tablet / mid width styling
 *************************************************/
@media (width >= 635px) {
  .navbar {
    justify-content: space-between;
  }

  #navbar-hamburger-menu {
    display: none;
  }

  .navbar-nav {
    position: static;
    box-shadow: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-flow: row;
    gap: var(--ck-page-horizontal-margins);
  }

  footer {
    justify-content: space-between;
    padding-top: calc(var(--ck-page-vertical-margins) * 5);
  }

  .footer-socials {
    flex-flow: column;
  }

  .footer-contact {
    text-align: start;
    text-align-last: start;
  }
}

/**************************************************
 * Desktop / large width styling
 *************************************************/
@media (width >= 1019px) {
  .navbar {
    position: fixed;
    flex-flow: column;
    left: 0;
    /* top: 50vh; */
    bottom: 40vh;
    width: 20%;
    align-items: end;
    padding-top: calc(var(--ck-page-vertical-margins) * 2);
    padding-bottom: calc(var(--ck-page-vertical-margins) * 2);
    padding-right: calc(var(--ck-page-horizontal-margins) / 2);
    margin-right: calc(var(--ck-page-horizontal-margins) / 2);
    /* border-right: solid var(--ck-divider-color) 1.5px; */
  }

  .navbar-nav {
    flex-flow: column;
    align-items: end;
    gap: 0;
  }

  main.main-content {
    margin-left: calc(20% + var(--ck-page-horizontal-margins) * 2);
    padding: calc(var(--ck-page-vertical-margins) * 2) var(--ck-page-horizontal-margins) 20vh 0;
    justify-content: center;
    max-width: 900px;
  }

  .content-spacer {
    height: calc((80vw - 900px) / 6);
  }

  .post {
    padding: 0;
  }

  .post:first-child>div:first-child:empty {
    height: 10vh;
  }

  footer {
    position: fixed;
    bottom: 0;
    width: 20%;
    align-items: end;
    padding-top: 0;
  }

  .footer-socials {
    align-items: end;
  }

  .footer-contact {
    text-align: end;
    text-align-last: end;
  }

  .email {
    white-space: nowrap;
  }
}

@media (width >= 1200px) {
  .navbar, footer {
    width: calc(20% + ((80% - 900px) / 6));
  }

  main.main-content {
    margin-left: calc(20% + ((80% - 900px) / 6) + var(--ck-page-horizontal-margins) * 2);
  }
}