/*
Theme Name: StudioAM
Theme URI: https://jhchoi.com/
Author: jhchoi
Author URI: https://jhchoi.com/
Description: A custom theme built for StudioAM.
Template: Divi
Version: 1.0
Text Domain: studioam
*/

#page-container {
  overflow-x: hidden;
}
#page-container #main-header {
  padding: 0.25rem 0;
  transition: all 0.5s ease;
}
.et_fixed_nav #main-header {
  padding-top: 2.5rem;
  transition: padding-top 0.5s;
  position: fixed !important;
}
#main-header.et-fixed-header {
  padding-top: 0;
  transition: transform 0.3s ease-in-out;
}

#main-header,
#main-header.et-fixed-header {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
#main-header .logo_container {
  align-items: center;
  display: flex;
}
#main-header .logo_container a {
  height: 80%;
  display: grid;
  place-items: center;
}
#main-header .logo_container svg {
  height: 45px;
  max-width: 50vw;
}
#main-header.et-fixed-header #et-top-navigation nav > ul > li > a {
  padding-bottom: 25px !important;
}
#main-header #et-top-navigation,
#main-header #et-top-navigation {
  padding-top: 25px !important;
}

/* #main-header #wordmark {
  transition: opacity 0.5s;
}

#main-header.et-fixed-header #wordmark {
  opacity: 0;
  transition: opacity 0.5s;
} */

.mobile_nav.opened .mobile_menu_bar:before {
  content: "\4d";
}
.mobile_menu_bar:before {
  transition: all 0.4s ease;
  transform: rotate(0deg);
  display: block;
}
.mobile_nav.opened .mobile_menu_bar::before {
  transition: all 0.4s ease;
  transform: rotate(90deg);
  display: block;
}

#top-menu li {
  padding-right: 4rem;
}

#main-header li.mobile {
  display: none;
}

#et_mobile_nav_menu li.mobile {
  display: block;
}

#mobile_menu.et_mobile_menu {
  border: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  padding: 5rem 2rem;
  overflow: scroll;
}
#mobile_menu.et_mobile_menu a {
  font-weight: normal;
  font-size: 1.5em;
  padding: 2rem 0 !important;
  border: none;
}

#mobile_menu.et_mobile_menu li a:hover {
  background: none;
}

#et_mobile_nav_menu .mobile_menu_bar_toggle {
  z-index: 99999;
}

.mobile-menu-open {
  overflow: hidden;
}

.home:not(.mobile-menu-open) .mobile_menu_bar:before {
  color: #fff;
}

.navigation-light.et_fixed_nav #main-header,
.transparent-background #main-header {
  background: transparent;
  position: fixed;
}

.navigation-light.et_fixed_nav #main-header.et-fixed-header,
.transparent-background #main-header.et-fixed-header {
  background: #fff;
}

.navigation-light.et_fixed_nav #page-container,
.transparent-background #page-container {
  padding-top: 0 !important;
}

.navigation-light #main-header .logo_container svg path {
  fill: #fff !important;
  transition: fill 0.5s;
}

.navigation-light #top-menu > li > a,
.navigation-light #top-menu li.current-menu-ancestor > a,
.navigation-light #top-menu li.current-menu-item > a,
.navigation-light #top-menu li.current_page_item > a {
  color: #f5f5f5;
  transition: color 0.5s;
}

.navigation-light #main-header.et-fixed-header path.fill-1 {
  fill: #97a096 !important;
}

.lightbox-content.lightbox {
  display: none;
}
.lightbox-content.lightbox.featherlight-inner {
  display: block;
}

.featherlight:last-of-type {
  background: #fff;
}

.featherlight-content {
  max-width: 1380px;
}
.featherlight-content .et_pb_row {
  padding: 0;
  width: 100%;
}
.featherlight .featherlight-close {
  font-size: 2rem;
  padding: 25px;
  width: auto;
}
.single-project .featherlight .featherlight-close-icon {
  background: none;
  top: 0;
  right: 0;
  padding: 0;
  color: #fff;
}
.single-project .featherlight .featherlight-content {
  background-color: transparent;
}
.people-grid .et_pb_row {
  width: 100%;
  padding: 0;
}
.people-grid .person {
  margin-bottom: 3rem;
}
.people-grid .person h4 {
  font-size: 14px;
  font-weight: 500;
  padding: 1rem 0 0;
}
@media (max-width: 980px) {
  #et-main-area .people-grid .et_pb_row.et_pb_row_4col,
  #et-main-area .people-grid .et_pb_row_1-4_1-4_1-4 {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }
  #et-main-area .people-grid .et_pb_column.et_pb_column_1_4.et-last-child {
    margin-bottom: 3rem;
  }
  #et-main-area
    .people-grid
    .et_pb_row:not(.et_pb_row_1-4_1-4_1-4)
    .et_pb_column.et_pb_column_1_4,
  #et-main-area .people-grid .et_pb_column.et_pb_column_1_4 {
    width: calc(50% - 1rem) !important;
    margin: 0 !important;
  }
  .et_pb_member_position {
    line-height: 1.4;
  }
  .people-grid .person p,
  .people-grid .person h4 {
    font-size: 12px;
  }
  .people-grid .person h4 {
    padding: 0 0 0.5em;
  }
}
.person-image {
  max-width: calc(100% - 50px);
}
.person-image svg,
.person-image img {
  display: block;
}
.person-details {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}
.person-details .person-name {
  font-size: 1rem;
  font-weight: 500;
  padding: 0;
}

.person-details .person-bio {
  margin-top: 1rem;
}

.lightbox-social .linkedin {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 176'%3E%3Cpath d='M152,0H24C10.75,0,0,10.75,0,24v128c0,13.25,10.75,24,24,24h128c13.25,0,24-10.75,24-24V24c0-13.25-10.75-24-24-24ZM60,139.27c.01,2.05-1.64,3.72-3.69,3.73h-15.83c-2.05,0-3.71-1.65-3.72-3.7v-66.3c0-2.05,1.67-3.72,3.72-3.72h15.81c2.05,0,3.71,1.67,3.71,3.72v66.27ZM48.4,63c-8.28,0-15-6.72-15-15s6.72-15,15-15,15,6.72,15,15-6.72,15-15,15ZM142.64,139.58c0,1.88-1.52,3.41-3.4,3.42h-17.02c-1.88,0-3.41-1.52-3.42-3.4v-31.11c0-4.64,1.36-20.32-12.13-20.32-10.45,0-12.58,10.73-13,15.55v35.86c0,1.87-1.5,3.39-3.37,3.42h-16.42c-1.88,0-3.41-1.53-3.41-3.41h0v-66.88c0-1.88,1.52-3.41,3.4-3.42h16.43c1.89,0,3.42,1.53,3.42,3.42v5.78c3.88-5.82,9.63-10.31,21.9-10.31,27.18,0,27.02,25.38,27.02,39.32v32.08Z' style='fill:%23000000; stroke-width:0px;'/%3E%3C/svg%3E")
    no-repeat;
  background-size: cover;
  display: inline-block;
  height: 1.5rem;
  margin-top: 1.5rem;
  width: 1.5rem;
}

@media only screen and (max-width: 1024px) {
  .featherlight .featherlight-content {
    max-height: 100%;
    padding: 25px;
  }
}

.latest-posts-grid {
  width: 100%;
}
h2.latest-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
h2.latest-title:after {
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.05 12.05'%3E%3Cpath d='M.73 0v2.06h7.79L0 10.58l1.47 1.47 8.52-8.52v7.78h2.06V0H.73z' style='fill:%23424242;stroke-width:0'/%3E%3C/svg%3E")
    no-repeat;
  content: "";
  display: inline-block;
  height: 0.75rem;
  margin-left: 0.5em;
  position: relative;
  width: 0.75rem;
}

.short-list ul {
  list-style-type: none;
  padding: 0;
}
.short-list li {
  margin-bottom: 1.25rem;
}
.short-list span {
  display: block;
}
.short-list a {
  text-decoration: underline;
}
.short-list a:hover {
  text-decoration: none;
}

.press-page {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.press-page li a {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.press-page .press-image {
  flex-shrink: 0;
}

.press-page li img,
.press-page li svg {
  width: 80px;
  display: block;
}

.press-page.fade-out {
  opacity: 0;
}

.press-page.fade-in {
  opacity: 1;
}

.pagination-dots {
  text-align: center;
  margin-top: 20px;
}

.pagination-dots .dot {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 10px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pagination-dots .dot::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: transparent;
}

.pagination-dots .dot.active {
  background-color: #424242;
}

.pagination-dots .dot:hover {
  background-color: #424242;
}

.featured-projects ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style-type: none;
  padding: 0;
}
@media (max-width: 480px) {
  .featured-projects ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
.featured-projects img {
  display: block;
  width: 100%;
}
.featured-projects .project-details {
  margin: 0 auto;
  padding: 1rem 0 2rem;
  width: 80%;
}
@media not (hover: none) {
  .featured-projects .project-details {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    left: 0;
    opacity: 0;
    padding: 2rem;
    position: absolute;
    top: 0;
    transition: opacity 0.5s;
    width: 100%;
    z-index: 9;
  }
}
.featured-projects .project-excerpt {
  display: none;
}
.featured-projects a {
  display: block;
  position: relative;
}
@media not (hover: none) {
  .featured-projects a:hover .project-details {
    opacity: 1;
  }
}
.featured-projects h3 {
  color: #000;
  font-size: 16px;
  padding: 0;
}
@media not (hover: none) {
  .featured-projects h3 {
    color: #fff;
  }
}

.projects-by-category ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style-type: none;
  padding: 0;
}
@media (max-width: 980px) {
  .projects-by-category ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .projects-by-category ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
.projects-by-category a {
  display: block;
  position: relative;
}
.project-image img {
  display: block;
  width: 100%;
}
.projects-by-category .project-details {
  margin: 0 auto;
  padding: 1rem 0 2rem;
  width: 80%;
}
@media not (hover: none) {
  .projects-by-category .project-details {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0) 20%
    );
    bottom: 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    left: 0;
    opacity: 0;
    padding: 1.5rem;
    position: absolute;
    transition: all 0.5s ease;
    width: 100%;
    z-index: 9;
  }
}
.projects-by-category li:hover .project-details::after {
  opacity: 1;
}
.projects-by-category h3 {
  color: #000;
  font-size: 16px;
  padding: 0;
}
@media not (hover: none) {
  .projects-by-category h3 {
    color: #fff;
  }
  .projects-by-category .project-details::after {
    background: rgba(0, 0, 0, 0.5);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: all 0.5s ease;
    width: 100%;
    z-index: -1;
  }
  .projects-by-category a:hover .project-details {
    opacity: 1;
  }
}

.project-pagination,
.inspiration-pagination {
  display: flex;
  justify-content: space-between;
}

.project-pagination .next-project,
.inspiration-pagination .next-inspiration {
  text-align: right;
}

.project-pagination .previous-project,
.project-pagination .next-project,
.inspiration-pagination .previous-inspiration,
.inspiration-pagination .next-inspiration {
  width: 50%;
}
.project-pagination .previous-project a,
.project-pagination .next-project a,
.inspiration-pagination .previous-inspiration a,
.inspiration-pagination .next-inspiration a {
  display: flex;
  gap: 0.25rem;
}

.project-pagination .next-project a,
.inspiration-pagination .next-inspiration a {
  justify-content: flex-end;
}

.parvus {
  z-index: 99999;
  --parvus-background-color: #fff;
  --parvus-btn-background-color: transparent;
  --parvus-btn-color: #000;
  --parvus-btn-hover-background-color: transparent;
  --parvus-btn-hover-color: #000;
  --parvus-btn-disabled-background-color: transparent;
}

.parvus-trigger:has(img) .parvus-zoom__indicator {
  display: none;
}
.parvus__btn--previous svg,
.parvus__btn--next svg {
  width: 60px;
  height: 60px;
}

#page-container #et-boc .inspiration-grid {
  width: 100%;
}

.inspiration-grid .et_pb_module.et_pb_blurb {
  padding-bottom: 5rem;
}

.inspiration-grid .et_pb_module.et_pb_blurb .et_pb_blurb_image {
  margin-bottom: 0.75rem;
}

/* Mailchimp form styling */
#mc4wp-form-1 {
  max-width: 325px;
}
.mc4wp-form-fields {
  display: flex;
  margin-top: 1rem;
}
.mc4wp-form-fields div input {
  width: 100%;
}
.mc4wp-form-fields div:first-child {
  width: 100%;
}
.mc4wp-form-fields div:last-child {
  width: 8rem;
}
.mc4wp-form-fields label {
  /* hide labels in an accessible way */
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.mc4wp-form-fields input[type="email"] {
  padding: 0.5rem;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #000;
  width: 100%;
}
.mc4wp-form-fields input[type="email"]::placeholder {
  padding-left: 0;
  opacity: 1;
  transition: opacity 0.5s ease;
}
/* change placeholder color when input is focused */
.mc4wp-form-fields input[type="email"]:focus::placeholder {
  opacity: 0;
  padding-left: 2.5rem;
  transition: padding 1s ease, opacity 0.5s ease;
}

.mc4wp-form-fields button[type="submit"] {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22.627 22.627'%3E%3Cpath d='M5.657 5.657v2.058h7.787l-8.522 8.521 1.47 1.47 8.522-8.523-.001 7.788h2.058V5.657Z'/%3E%3C/svg%3E")
    no-repeat center right;
  color: #707070;
  border: none;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  cursor: pointer;
  background-size: 1.25em;
  transition: color 0.5s ease;
}
.mc4wp-form-fields button[type="submit"]:hover {
  color: #000;
}
.mc4wp-alert {
  margin-top: 0.5rem;
  line-height: 1.5em;
  border-left: 4px solid;
  padding-left: 1rem;
}