/*
 Theme Name:   The Lifestyle Child
 Theme URI:    https://themeforest.net/user/nordstudio/portfolio
 Description:  Child theme for The Lifestyle
 Author:       Nord Studio
 Author URI:   http://themeforest.net/user/nordstudio
 Template:     the-lifestyle
 Version:      1.0
 License:      
 License URI:  http://themeforest.net/licenses
 Tags: one-column, flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  the-lifestyle-child
*/

@import url("../the-lifestyle/style.css");

@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100;0,200;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,400;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Pridi:wght@200;300;400;500;600;700&display=swap');


figure {
  margin: 0;
  padding-bottom: 1em;
}

.site-content {
  margin: 30px 0 !important;
}

/**
 * 8.0 - Header
 */
.site-header {
  position: relative;
  text-align: center;
  background-color: var(--header-background-color);
  background-size: cover;
  background-position: top;
  color: var(--header-text-color);
}

.custom-logo-link {
  display: inline-block;
  /* margin-bottom: 1em; */
}

.custom-logo-link img {
  max-width: var(--logo-max-width);
  width: 100%;
  filter: drop-shadow(2px 3px 2px rgb(0 0 0 / 0.6));
}

/**
 * 10.0 - Content
 */
.site-content {
  margin: 60px 0;
}

.entry-content .wp-block-button {
  /* margin-bottom: 1.8em; */
}

@media (min-width: 768px) {

  .book-gallery {
    justify-content: space-between;
  }

  .article-grid {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    column-gap: 20px;
    row-gap: 20px;
    margin-bottom: 20px;
  }

  /* columns */
  .article-grid > * {
    width: calc((100% / 3) - 40px);
  }

  .article-item .overlay {
    background-color: transparent;
    opacity: 0;
  }

  .article-item .overlay:hover {
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    opacity: 1;
  }

  .article-item .article-title {
    font-size: 1.2em;
  }

  .article-item .article-excerpt {
    font-size: .8em;
  }

}

@media (max-width: 767px) {

  .book-gallery {
    justify-content: center;
  }

  .article-grid {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    row-gap: 20px;
    margin-bottom: 20px;
  }

  /* columns */
  .article-grid > * {
    width: 100%;
  }

  .article-item .overlay {
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    opacity: 1;
  }

  .article-item .article-title {
    font-size: 1.8em;
  }

  .article-item .article-excerpt {
    font-size: 1em;
  }

}

.book-gallery img {
  height: 400px !important;
  width: auto !important;
}

.site-identity {
  position: relative;
  z-index: 10;
  margin: 180px 0 50px 0;
}

.site-title {
  font-family: 'Lora', sans-serif;
  font-size: 3em;
  font-weight: 400;
  text-shadow: 2px 3px 6px #000000AA;
  text-transform: uppercase;
  margin-bottom: 0;
}

.tagline {
  font-family: 'Aleo', serif;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.6;
  max-width: 600px;
  width: 100%;
  margin: 0 auto 2em auto;
  color: #EFEFEF;
  text-shadow: 1px 1px 3px #000000;
}

.article-item {
  display: block;
  aspect-ratio: 1 / 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid #DDDDDD;
}

.article-item .overlay {
  position: relative; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  margin: 0;
  padding: 0.5em;
  left: 0;
  bottom: 0;
  text-align: center;
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.article-item .article-title {
  color: #FFFFFF;
  font-family: Oswald, sans-serif;
  font-weight: 600;
  margin: 0;
}

.article-item .article-excerpt {
  color: #FFFFFF;
  font-family: Lora, Georgia, serif;
  font-weight: 300;
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 100%;
  width: 100%;
  padding: 15px;
}

.article-item .article-publication {
  color: #FFFFFF;
  font-family: Lora, Georgia, serif;
  font-weight: 300;
  font-size: initial;
  font-style: italic;
}

.article-item .article-publication::before {
    content: "\2219";
    margin-right: 10px;
}

.article-item .article-publication::after {
  content: "\2219";
  margin-left: 10px;
}

.wide_page .entry-header,
.wide_page .entry-summary,
.wide_page .entry-content,
.wide_page .entry-footer {
  max-width: unset;
  width: 100%;
  margin: 0 auto;
}

.entry-title {
  font-size: 2em;
  font-family: 'Lora';
  margin-bottom: 1em;
}

.pseudo-heading {
  font-family: Oswald, sans-serif;
  margin-bottom: 0.5em;
}

.contact-form input[type="text"],
.contact-form textarea {
  width: 100%;
}

.home .entry-header {
  display: none;
}

.twitter-col {
  margin: 0;
}