/*
Theme Name: Hallo Block.
Theme URI: https://built.web.id/themes/hallo-block
Author: Perkilo
Author URI: https://built.web.id
Description: Kami memanfaatkan sepenuhnya editor blok (Gutenberg), yang memberi Anda kontrol lebih besar dalam pembuatan konten Anda.
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hallo-block
Tags: full-site-editing, block-themes, blog, portfolio
*/

/*** Body Style ***/
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }
}
@media (max-width: 680px) {
  body {
    background-image: none !important;
  }
}
body {
  background-image: url(assets/images/bg-green-gradient.svg);
  background-repeat: no-repeat;
  background-position: left top;
}
body.is-style-retro {
  background-image: url(assets/images/bg-orange-gradient.svg);
}
/* body::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(assets/images/bg-pink-gradient.svg);
  background-repeat: no-repeat;
  background-position: right top;
  z-index: -1;
} */

a {
  text-decoration: none;
}
h1 {
  font-size: 36px;
  font-weight: 800;
}
img {
  height: auto;
  max-width: 100%;
}

/**Style Search**/
.btn-srch {
  margin-left: -15px !important;
  margin-right: -15px !important;
}
.btn-srch .wp-block-search__button svg {
  height: 27px;
  width: 27px;
}
.btn-srch input.wp-block-search__input {
  position: absolute;
  right: 50px;
  width: 300px;
  top: 54px;
  z-index: 999;
}
@media (max-width: 375px) {
  .btn-srch input.wp-block-search__input {
    width: 100%;
    right: 0px;
  }
}

/**** Quote ****/
blockquote {
  margin-inline-start: 20px;
  margin-inline-end: 20px;
}
blockquote {
  padding: 40px 20px 20px;
  background-color: #80808036;
  border-left: 5px solid rgba(0, 0, 0, 0.2);
  position: relative;
}
blockquote p:before {
  content: "\275D";
  font-size: 36px;
  font-weight: 500;
  line-height: 45px;
  margin-right: 5px;
  position: absolute;
  top: 8px;
}
@media (max-width: 600px) {
  blockquote p:before {
    font-size: 30px;
    top: 12px;
  }
}
/*title-arch*/
.exp-arch,
.exp-arch2,
.title-arch a,
.title-arch2 a,
.title-arch3 a {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  visibility: visible;
}
.title-arch a {
  -webkit-line-clamp: 1;
}
.exp-arch,
.title-arch2 a {
  -webkit-line-clamp: 2;
}
.exp-arch2,
.title-arch3 a {
  -webkit-line-clamp: 3;
}
/**** Sidebar ****/
@media (min-width: 768px) {
  .sticky-container > .gb-inside-container,
  .sticky-container {
    position: sticky;
    top: 0px;
  }
  #right-sidebar .inside-right-sidebar {
    height: 100%;
  }
}
ul.wp-block-categories-list {
  display: flex;
  flex-direction: column;
  row-gap: 0.3em;
  list-style: none;
  margin-left: 0.1em;
  margin-bottom: 0;
  padding-inline-start: 0;
  border-bottom: 1px solid rgba(168, 168, 168, 0.5);
}
li.cat-item {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(168, 168, 168, 0.5);
  padding: 5px 0;
}
li.cat-item a::before {
  content: "\203A";
  margin-right: 5px;
  color: rgba(255, 105, 0, 1);
  font-size: 24px;
  line-height: 0;
}

/**comment btn**/
.form-submit.wp-block-button input#submit {
  background-color: var(--wp--preset--color--base);
  border-radius: 8px;
  color: var(--wp--preset--color--contrast);
  font-size: 16px;
  font-weight: 500;
}
textarea#comment,
input#author,
input#email,
input#url {
  background-color: var(--wp--preset--color--base-2);
  color: var(--wp--preset--color--contrast);
  border-radius: 5px;
}

/**** Post Count ****/
.most-count {
  counter-reset: my-counter;
}
.most-pop,
.most-pop2 {
  counter-increment: my-counter;
  position: relative;
}
.most-pop::before {
  content: counter(my-counter);
  position: absolute;
  /* top: 50%; */
  left: 0px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.most-pop2::before {
  content: counter(my-counter);
  position: absolute;
  top: -8px;
  left: 0px;
  font-size: 14px;
  font-weight: 500;
  line-height: 0;
  color: #fff;
  background-color: #ff6900;
  padding: 2px;
  width: 22px;
  height: 22px;
  border: 2px solid #ffffff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/**
To Top Button Style
*/
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  cursor: pointer;
  text-decoration: none;

  /* Pengaturan untuk efek Fade In/Out */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/**
Style Tema
**/
.box-shdw,
.box-tm:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
a:hover,
.box-tm:hover {
  transition: 0.3s 0.05s;
}

.wp-block-cover img,
.gb-container img,
.gb-loop-item img,
.gb-container[style*="background-image"]::before {
  transition: transform 0.5s ease;
}

/* Untuk Loop WordPress */
.wp-block-query
  .wp-block-post
  .wp-block-cover:hover
  img, 
/* Untuk GB */
.gb-loop-item:hover img,
.gb-grid-column .gb-container:hover img,
.gb-grid-column
  > .gb-container:hover
  > .gb-container[style*="background-image"]::before {
  transform: scale(1.1);
}

/* Hide on Scroll */
.hide-on-scroll {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.hide-on-scroll.hide {
  transform: translateY(-100%);
}

.hide-on-scroll.has-background {
  background-color: var(
    --scroll-bg-color,
    var(--wp--preset--color--base, rgba(255, 255, 255, 0.95))
  ) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.hide-on-scroll.scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  padding: 0;
}

body.admin-bar .hide-on-scroll {
  top: var(--admin-bar-height, 32px);
}

body.admin-bar .hide-on-scroll.hide {
  transform: translateY(calc(-100% - var(--admin-bar-height, 32px)));
}

body {
  padding-top: var(--header-height, 80px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .hide-on-scroll {
    top: var(--admin-bar-height, 46px);
  }

  body.admin-bar .hide-on-scroll.hide {
    transform: translateY(calc(-100% - 46px));
  }

  body.admin-bar .hb-mega-menu-mobile-container.is-open {
    top: var(--admin-bar-height, 46px);
  }
}

body.search-modal-is-open {
  padding-top: 0 !important;
}

body.search-modal-is-open
  .search-hallo-icon-only.search-active
  .search-hallo-form {
  z-index: 1000;
  top: calc(50vh - (var(--header-height, 80px) / 2));
}

/* Block Navigasi */
@media screen and (max-width: 782px) {
  .hide-on-scroll .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .hide-on-scroll.hide .wp-block-navigation__responsive-container.is-menu-open {
    top: 0 !important;
    height: 100vh !important;
  }

  /* Pastikan konten di dalamnya juga tidak melebar */
  .hide-on-scroll
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}
/* End Hide on Scroll */