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



/* Mobile images go 100%, all else 90% width*/
@media only screen and (max-width: 45em) {
    .wrap {
      width: 100%;
    }
    .text {
      width: 90%;
      margin: 0px auto;
    }
    
    .simple {
      width: 90%;
      margin: 0px auto;
    }
    .theme_footer {
      width: 90%;
      margin: 40px auto;
      text-align: center;
    }
    .caption {
      width: 90%;
      margin: 0px auto;
    }
}

#content h1 {
  margin-bottom: 0px;
}

/* fix sizing on mobile */
@media only screen and (max-width: 45em) {
  #content {
    margin-top: 40px;
  }
  .sidebar .logo.long-text a {
   font-size: 16px !important;
  }
}


/* 1px underline on all links */
a {
  text-decoration-thickness: 1px !important;
}




/* ---------- SIDE BAR & HEADER ---------- */



.sidebar {
  background-color: #eee;
}

@media only screen and (min-width: 45em) {
  .sidebar .logo.long-text a::after {
    content: "Documentary Photographer";
    display: block;
    color: #444;
    font-family: Work Sans Light;
    font-size: 14px;
  }
}


/*show full name without wrap on desktop and scooth content over 50px */
@media only screen and (min-width: 75em) {
  .sidebar {
    width: 200px !important;
  }
  .sidebar .sidebar-wrap {
    width: 200px !important;
  }
  #content {
    margin-left: 300px;
  }
}


/* custom mobile hamburger */
@media only screen and (max-width: 45em) {
    .sidebar .menu-open:before {
      border-top: 1px solid #444444;
      border-bottom: 1px solid #444444;
      top: 19px;
    }
}



/* underline active nav item */
.item.selected {
  text-decoration: underline;
  text-decoration-thickness: 1px !important;
}


/* add space between nav categories */
.sidebar nav .category {
  margin-bottom: 40px;
}



/* ---------- ARROW KEYS ----------*/



/* 1) Base sidebar styles + smooth fade */
.sidebar {
  /* your positioning/layout here… */
  opacity: 1;
  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); /* slow, beautiful easing */
}

/* 2) Dimmed state once scrolled past 1 viewport height */
.sidebar.scrolled {
  opacity: 0.3;
}

/* 3) Hover always restores full opacity */
.sidebar.scrolled:hover {
  opacity: 1;
}



/* ---------- GALLERY PAGES ----------*/

/* max-width for images */
.image-wrap {
  max-width: 1300px;
}

/* wrap for gallery intro text */
.gallery > .title > .text {
  max-width: 45em !important;
}


/* add space below images */
#content > div.image {
  margin-bottom: 10em;
}


/* bring caption closer to image */
#content .image .image-wrap {
  margin-bottom: 1em;
}

#content .image .image-wrap {
  margin-bottom: 0px;
}


/* reduce line height for caption */
#content .caption-wrap {
  line-height: 1;
}

/* align caption with image */
#content .caption {
  padding-left: 0px;
  padding-top: 0px;
}



/* ---------- CUSTOM CLASSES ----------*/



.chapter {
  margin-top: 150px !important;
  margin-bottom: 50px !important;
  font-size: 30px !important;
}

/* hide arrow key tooltip on mobile */
@media only screen and (max-width: 45em) {
  .hideonmobile {
    opacity: 0;
  }
}