/* Page-header */
section.page-header {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 155px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--e-global-color-5013bd6);
  background-image: url('../img/AdobeStock_549531116-scaled.jpeg');
  background-position: center center;
  background-size: cover;
}

section.page-header::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: #030211;
  background-image: url('../img/hybrid-739875-unsplash-e1769000850177.jpg');
  opacity: 0.87;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

section.page-header p {
  font-family: 'Oswald', Sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* END Page-header */

/* Archive */
main.category-page {
  padding-inline: 20px;
  max-width: 1180px;
  margin: 40px auto 90px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 90px;
}

header.category-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

header.category-header > h2 {
  font-size: 2.625rem;
  font-weight: 600;
  line-height: 160%;
  margin: 0;
}

header.category-header .category-description p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 160%;
}

header.category-header .category-description *:nth-last-child(1) {
  margin: 0;
}

header.category-header .other-categories {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

header.category-header .other-categories :is(span, a) {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 160%;
}

header.category-header .other-categories a {
  padding: 8px 12px;
  border: 1px solid #DEDEDE;
  border-radius: 3px;
  transition: background-color .3s ease-in-out;
  color: #000;
}

header.category-header .other-categories a:hover {
  background-color: #f6f6f6;
}
/* END Archive */

/* List & card */
main .posts-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px 24px;
}

article.post-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

article.post-card .post-card__thumbnail {
  position: relative;
  width: 100%;
  padding-top: 65%;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}

article.post-card .post-card__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: transform .3s ease-in-out;
}

article.post-card .post-card__thumbnail:hover img {
  transform: scale(1.15, 1.15);
}

article.post-card .post-card__thumbnail .post-card__date {
  padding: 6px;
  background-color: #fff;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 120%;
  position: absolute;
  right: 12px;
  top: 12px;
  color: #000;
  pointer-events: none;
}

article.post-card .post-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

article.post-card .post-card__content :is(.post-card__title, .post-card__title a) {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 120%;
  color: #000;
  margin: 0;
}

article.post-card .post-card__content .post-card__excerpt {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 160%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

article.post-card .post-card__content .post-card__excerpt *:nth-last-child(1) {
  margin: 0;
}

article.post-card .post-card__readmore {
  width: fit-content;
  padding: 10px 14px;
  border: 1px solid #DEDEDE;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 120%;
  color: #000;
  transition: background-color .3s ease-in-out;
}

article.post-card .post-card__readmore:hover {
  background-color: #f6f6f6;
}

@media (max-width: 991.98px) {
  main.category-page {
    gap: 60px;
  }
  
  main .posts-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
  }
}

@media (max-width: 767.98px) {
  header.category-header h1 {
    font-size: 2rem;
  }
  
  header.category-header .other-categories {
    gap: 6px;
  }
  
  header.category-header .other-categories span {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  main.category-page {
    gap: 32px;
  }
}

@media (max-width: 399.98px) {
  main .posts-list {
    grid-template-columns: 1fr;
  }
}
/* END List & card */

/* Pagination */
nav.pagination, 
nav.pagination .nav-links {
  width: 100%;
}

nav.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

nav.pagination .nav-links .page-numbers {
  padding: 10px 14px;
  border: 1px solid #DEDEDE;
  border-radius: 3px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 120%;
  text-align: center;
}

nav.pagination .nav-links span.page-numbers {
  background: #DD0000;
  border-color: #DD0000;
  color: #fff;
  cursor: default;
}

nav.pagination .nav-links a.page-numbers {
  color: #000;
  transition: background-color .3s ease-in-out;
}

nav.pagination .nav-links a.page-numbers:hover {
  background-color: #f6f6f6;
}

nav.pagination .nav-links a:is(.prev, .next) {
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

nav.pagination .nav-links a:is(.prev, .next)::before {
  content: '';
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6667 15L6.66667 10L11.6667 5L12.8333 6.16667L9.00001 10L12.8333 13.8333L11.6667 15Z' fill='%231F1F1F'/%3E%3C/svg%3E%0A");
  background-size: 100%;
  display: block;
}

nav.pagination .nav-links a.next::before {
  transform: rotate(180deg);
}

nav.pagination .nav-links span.dots {
  background: unset;
  border: unset;
  color: #000;
}

@media (max-width: 399.98px) {
  nav.pagination .nav-links {
    gap: 4px;
  }
  
  nav.pagination .nav-links .page-numbers {
    font-size: 0.875rem;
    padding: 8px 12px;
  }
  
  nav.pagination .nav-links a:is(.prev, .next)::before {
    width: 14px;
    height: 14px;
  }
}
/* END Pagination */

/* Related-posts */
section.related-posts > h2 {
  position: relative;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 120%;
  padding-bottom: 20px;
  width: fit-content;
  margin: 0 auto 35px;
  text-align: center;
  font-family: 'Oswald', Sans-serif;
}

section.related-posts > h2::after {
  content: '';
  width: 15%;
  height: 3px;
  background-color: #DD0000;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  display: block;
}

@media (max-width: 991.98px) {
  section.related-posts article:nth-child(1n+3) {
    display: none;
  }
}

@media (max-width: 767.98px) {
  section.related-posts > h2 {
    font-size: 1.75rem;
  }
}
/* END Related-posts */

/* Single */
main.single-post {
  padding-inline: 20px;
  max-width: 1180px;
  margin: 40px auto 90px;
}

main.single-post article.post {
  display: grid;
  grid-template-columns: 1fr;
  gap: 42px;
}

main.single-post article.post .single-post__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

main.single-post article.post .single-post__header h1 {
  font-size: 2.625rem;
  font-weight: 500;
  line-height: 160%;
  margin: 0;
}

main.single-post article.post .single-post__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

main.single-post article.post .single-post__meta span {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 120%;
}

main.single-post article.post .single-post__meta span:not(:last-of-type)::after {
  content: '·';
  padding-left: 12px;
}

main.single-post article.post .single-post__meta a {
  color: #000;
}

main.single-post article.post .single-post__meta a:hover {
  text-decoration: underline;
}

main.single-post article.post .wp-post-image {
  border-radius: 6px;
  max-width: 100%;
}

main.single-post article.post .post-excerpt {
  font-size: 1rem;
  font-weight: 400;
  line-height: 160%;
}

main.single-post article.post .post-toc {
  background: #F8F8F8;
  border: 1px solid #CBCBCB;
  border-radius: 6px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

main.single-post article.post .post-toc span {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 120%;
}

main.single-post article.post .post-toc :is(a, .toc-number, .toc-title) {
  font-size: 1rem;
  font-weight: 400;
  line-height: 120%;
  color: #000;
}

main.single-post article.post .post-toc a:hover :is(.toc-number, .toc-title) {
  color: #0081FF;
}

main.single-post article.post .post-toc .toc-number::after {
  content: '.';
}

main.single-post article.post .post-content {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

main.single-post article.post .post-content * {
  margin: 0;
}

main.single-post article.post .post-content :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
}

main.single-post article.post .post-content :is(p, span, li) {
  font-size: 1rem;
  font-weight: 400;
  line-height: 160%;
}

main.single-post article.post .post-content a {
  color: #0081FF;
}

@media (max-width: 991.98px) {
  main.single-post article.post {
    gap: 30px;
  }
  
  main.single-post article.post .post-content {
    gap: 24px;
  }
}

@media (max-width: 767.98px) {
  main.single-post article.post .single-post__header h1 {
    font-size: 2rem;
    line-height: 140%;
  }
  
  main.single-post article.post .single-post__meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  main.single-post article.post .single-post__meta span:not(:last-of-type)::after {
    display: none;
  }
  
  main.single-post article.post .post-toc {
    padding: 24px 12px;
  }
}

@media (max-width: 575.98px) {
  main.single-post article.post {
    gap: 24px;
  }
}
/* END Single */

/* FAQ */
.post-faq {
  margin-block: 90px;
}

.post-faq > h2 {
  position: relative;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 120%;
  padding-bottom: 20px;
  width: fit-content;
  margin: 0 auto 35px !important;
  text-align: center;
  font-family: 'Oswald', Sans-serif;
}

.post-faq > h2::after {
  content: '';
  width: 15%;
  height: 3px;
  background-color: #DD0000;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  display: block;
}

.post-faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.post-faq .faq-item {
  padding-bottom: 24px;
  border-bottom: 1px solid #DEDEDE;
}

.post-faq .faq-item .faq-item__question {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 120%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0.4;
}

.post-faq .faq-item[open] .faq-item__question {
  opacity: 1;
}

.post-faq .faq-item .faq-item__question::after {
  content: '';
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.9999 11.3334L9.99992 17.3334L11.8999 19.2L15.9999 15.1L20.0999 19.2L21.9999 17.3334L15.9999 11.3334ZM15.9999 2.6667C17.8444 2.6667 19.5777 3.0167 21.1999 3.7167C22.8221 4.4167 24.2333 5.3667 25.4333 6.5667C26.6333 7.7667 27.5833 9.17781 28.2833 10.8C28.9833 12.4223 29.3333 14.1556 29.3333 16C29.3333 17.8445 28.9833 19.5778 28.2833 21.2C27.5833 22.8223 26.6333 24.2334 25.4333 25.4334C24.2333 26.6334 22.8221 27.5834 21.1999 28.2834C19.5777 28.9834 17.8444 29.3334 15.9999 29.3334C14.1555 29.3334 12.4221 28.9834 10.7999 28.2834C9.1777 27.5834 7.76659 26.6334 6.56658 25.4334C5.36658 24.2334 4.41658 22.8223 3.71658 21.2C3.01658 19.5778 2.66658 17.8445 2.66658 16C2.66658 14.1556 3.01658 12.4223 3.71658 10.8C4.41658 9.17782 5.36658 7.76671 6.56658 6.56671C7.76658 5.3667 9.17769 4.41671 10.7999 3.71671C12.4221 3.0167 14.1555 2.6667 15.9999 2.6667ZM15.9999 5.33337C13.0221 5.33337 10.4999 6.3667 8.43325 8.43337C6.36658 10.5 5.33325 13.0223 5.33325 16C5.33325 18.9778 6.36658 21.5 8.43325 23.5667C10.4999 25.6334 13.0221 26.6667 15.9999 26.6667C18.9777 26.6667 21.4999 25.6334 23.5666 23.5667C25.6333 21.5 26.6666 18.9778 26.6666 16C26.6666 13.0223 25.6333 10.5 23.5666 8.43337C21.4999 6.3667 18.9777 5.33337 15.9999 5.33337Z' fill='black'/%3E%3C/svg%3E%0A");
  background-size: 100%;
  display: block;
  transform: rotate(180deg);
}

.post-faq .faq-item[open] .faq-item__question::after {
  transform: rotate(0);
}

.post-faq .faq-item .faq-item__question::marker {
  content: '';
}

.post-faq .faq-item .faq-item__answer {
  font-size: 1rem;
  font-weight: 400;
  line-height: 160%;
  margin-top: 24px;
}

@media (max-width: 991.98px) {
  .post-faq {
    margin-block: 60px;
  }
  
  .post-faq .faq-item .faq-item__question {
    font-size: 1.125rem;
  }
  
  .post-faq .faq-item .faq-item__question::after {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 767.98px) {
  .post-faq > h2 {
    font-size: 1.75rem;
  }
  
  .post-faq .faq-item .faq-item__question {
    font-size: 1rem;
  }
  
  .post-faq .faq-item .faq-item__question::after {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 575.98px) {
  .post-faq {
    margin-block: 32px;
  }
}
/* END FAQ */

/* Author */
main.author-page {
  padding-inline: 20px;
  max-width: 1180px;
  margin: 40px auto 90px;
}

main.author-page .author-header img {
  display: block;
  width: fit-content;
  margin: 0 auto;
  border-radius: 100%;
}

main.author-page .author-header__info h1 {
  text-align: center;
}
/* END Author */

/* Breadcrumbs */
nav.breadcrumbs {
  padding-inline: 20px;
  max-width: 1180px;
  margin: 20px auto 0;
}

nav.breadcrumbs ol {
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}

nav.breadcrumbs ol li {
  font-size: 0.875rem;
  font-weight: 400;
}

nav.breadcrumbs ol li:not(:last-child) {
  margin-right: 12px;
}

nav.breadcrumbs ol li:not(:last-child)::after {
  content: '/';
  padding-left: 12px;
}

nav.breadcrumbs ol li a {
  color: #2780ff;
}
/* END Breadcrumbs */