/* khusus css page tips n trick ( archive, category, single post ) */
/*============================================
TIPS & TRICK
============================================*/
/* TIPS & TRICK >>> CATEGORY */
header.archive-page-header {
  display: none;
}
.archive.category .archive-page-header .row .col {
  border-bottom: 1px solid var(--black);
  padding-bottom: 20px;
  margin-bottom: 65px;
  margin-top: 30px;
}

.archive.category footer {
  box-shadow: unset !important;
}

.archive.category footer.entry-meta {
  border-bottom: unset;
  border-top: unset;
}

.archive.category .entry-summary p{
	font-family: Roboto, sans-serif !important;
	font-weight: 500;
}


/* TIPS & TRICK >>> CATEGORY NAV */
.page.page-tips .tips-category-navigation ul {
  margin-bottom: 60px;
  width: 100%;
  height: 35px;
  list-style: none;
  display: flex;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.page.page-tips .tips-category-navigation ul li {
  margin: 0;
  width: 100%;
  text-align: center;
  display: flex;
}

.page.page-tips .tips-category-navigation ul li:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.page.page-tips .tips-category-navigation ul li:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.page.page-tips .tips-category-navigation ul li.active {
  background-color: var(--primary);
}

.page.page-tips .tips-category-navigation ul li.active a {
  color: var(--white);
}

.page.page-tips .tips-category-navigation ul li a {
  margin: auto;
  display: block;
}

.page.page-tips h2 {
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 500;
}

/* TIPS & TRICK >>> Search */
.page.page-tips form.group {
  position: relative;
  width: 40%;
}

.page.page-tips form.group input {
  height: 30px;
  background-color: unset;
  border-color: rgba(0,0,0,0.3);
  border-radius: 10px;
  box-shadow: none;
  color: currentColor!important;
}

.page.page-tips form.group img {
  position: absolute;
  right: 10px;
  top: 6px;
}

/* TIPS & TRICK >>> Posts */
.page.page-tips .tips-posts .card .card-image {
  aspect-ratio: 4/3;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 15px;
}

.page.page-tips .tips-posts .card .date,
.page.page-tips .tips-posts .card .title {
  line-height: 1.2em;
}

.page.page-tips .tips-posts .card .title {
  display: block;
  font-weight: 500;
  color: var(--black);
}

.page.page-tips .tips-posts .card a {
  color: var(--primary);
  position: relative;
  padding-right: 30px;
}

.page.page-tips .tips-posts .card a:after {
  content: "";
  position: absolute;
  background-image: url("/wp-content/themes/flatsome-child/assets/img/arrow-right.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  top: 5px;
  right: 0;
  width: 15px;
  height: 15px;
}

/* TIPS & TRICK >>> Not Found */
.page.page-tips .tips-posts .row.not-found {
  height: 300px;
}

.page.page-tips .tips-posts .row.not-found .col {
  display: flex;
}

.page.page-tips .tips-posts .row.not-found .col p {
  margin: auto;
}

/* TIPS & TRICK >>> PAGINATION */
ul.tips-pagination {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

ul.tips-pagination li {
  background-color: #f0f0f0;
  margin: 0;
  width: 30px;
  height: 30px;
  border-radius: 5px;
}

ul.tips-pagination li a {
  color: var(--black);
  display: block;
  text-align: center;
  line-height: 30px;
}

ul.tips-pagination li.active {
  background-color: var(--primary);
  width: 40px;
  height: 40px;
}

ul.tips-pagination li.active a {
  color: var(--white);
  line-height: 40px;
}

/* TIPS & TRICK >>> PAGINATION LIMIT BUTTON */
ul.tips-pagination li:has(a[data-page-action]) {
  width: 55px;
}

ul.tips-pagination li a[data-hide-button] {
  pointer-events: none;
}

/* TIPS & TRICK >>> SINGLE */
.single.single-post .post-thumbnail {
  border-radius: 20px;
  width: 100%;
}

.single.single-post .post-date {
  margin-bottom: 60px;
}

.single.single-post .post-content figure img {
  border-radius: 10px;
}
.single-post article p {
	font-family: Roboto, sans-serif !important;
	font-weight: 500;
}

.single-post article ol li {
	font-family: Roboto, sans-serif !important;
	font-weight: 500;
}
.single.single-post .post-content figcaption {
  color: #636363;
}

/* RESPONSIVE >>> TABLET */
@media only screen and (max-width: 849px) {

  /* TIPS & TRICK >>> SINGLE */
  .single.single-post .post-date {
    margin-bottom: 30px;
  }
}

/* RESPONSIVE >>> MOBILE DEVICE  */
@media only screen and (max-width: 34em) {

  /* TIPS & TRICK >>> CATEGORY NAV */
  .page.page-tips .tips-category-navigation ul {
    height: 100%;
    border-radius: 5px;
    flex-direction: column;
  }

  .page.page-tips .tips-category-navigation ul li {
    height: 34px;
  }

  .page.page-tips .tips-category-navigation ul li:first-child {
    border-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .page.page-tips .tips-category-navigation ul li:last-child {
    border-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  /* TIPS & TRICK >>> Search */
  .page.page-tips form.group {
    width: 90%;
  }
}