:root {
  --color-transition: background-color 0.8s ease-out;
}

/* Device visibility */
@media (max-width: 768px) {
  .wbl-sm-hidden {
    display: none !important;
  }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .wbl-md-hidden {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .wbl-lg-hidden {
    display: none !important;
  }
}

.wbl-full-height {
  height: 100svh !important;
}

* {
  transition: var(--color-transition);
}

.wbl-overflow-hidden {
  overflow: hidden;
}

/* Navbar */
.wbl-navbar {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
  transition: box-shadow 0.6s ease-out, background-color 0.8s ease-out,
    padding-top 0.6s ease-out, padding-bottom 0.6s ease-out;
  background-color: transparent;
  box-shadow: none;
}
.wbl-navbar.scrolled {
  padding-top: 0;
  padding-bottom: 0;
  background-color: var(--wp--preset--color--wbl-bg);
  box-shadow: #1e1b4b22 0 0 24px;
}
.wbl-navbar .wbl-logo {
  height: 48px;
  max-width: 50vw;
  transition: all 0.4s ease-out;
}
.wbl-navbar.scrolled .wbl-logo {
  height: 32px;
}

.wp-block-navigation__responsive-container-close {
  top: 20px;
  right: 16px;
}
.wp-block-navigation__responsive-container-content {
  padding-top: 120px !important;
}

/* Search */
.wbl-nav-search .wp-block-search__inside-wrapper {
  position: relative;
}
.wbl-nav-search .wp-block-search__input {
  width: 300px;
  box-sizing: border-box;
  background-color: var(--wp--preset--color--wbl-bg) !important;
  position: absolute;
  right: 0;
  top: 45px;
}
.wbl-nav-search .wp-block-search__button {
  font-size: var(--wp--preset--font-size--md) !important;
}

/* Cover */
.wbl-mask img {
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.wbl-balance-text {
  text-wrap: balance;
}

/* Footer */
.wbl-footer {
  z-index: 101;
}

.wbl-text-serif {
  font-family: var(--wp--preset--);
}

/* Search */
.wp-block-search__input,
.wp-block-search__input:focus-visible {
  color: var(--wp--preset--color--wbl-fg);
  background-color: transparent;
  padding: 8px 16px;
  outline: none;
}
.wp-block-search__button {
  padding: 0;
  min-width: fit-content;
  min-height: fit-content;
  border: 0 solid var(--wp--preset--color--wbl-fg) !important;
}

/* Post Type Label */
.wbl-landmark {
  background-color: var(--wp--preset--color--amber-400);
  color: #78350f !important;
}
.wbl-post {
  background-color: var(--wp--preset--color--emerald-400);
  color: #064e3b !important;
}
.wbl-page {
  background-color: var(--wp--preset--color--indigo-50);
}

/* WordPress core */
.is-position-sticky {
  top: 65px;
}
.wp-block-search__input {
  min-width: 19px !important;
}
.wp-block-post-excerpt__excerpt {
  line-height: 1.1;
}

/* Sticky title */
.wbl-sticky-title {
  top: 0;
  padding-top: 48px;
}

/* Separator */
.wbl-vertical-separator {
  border-left: solid 2px !important;
  height: 100% !important;
}

/* Cards */
.wbl-landmarks-card:hover .wp-block-separator,
.wbl-search-card:hover .wp-block-separator,
.wbl-articles-card:hover .wp-block-separator {
  width: 60px;
}
.wbl-landmarks-card img,
.wbl-articles-card img,
.wbl-search-card img {
  transition: scale 0.6s ease-out;
  transform-origin: bottom center;
}
.wbl-landmarks-card:hover img,
.wbl-articles-card:hover img,
.wbl-search-card:hover img {
  scale: 1.05;
}
.wbl-landmarks-card figure,
.wbl-articles-card figure,
.wbl-search-card figure {
  overflow: hidden;
}
.wbl-card-figure-column {
  max-width: 25%;
}
.wbl-landmarks-card .wp-block-separator,
.wbl-articles-card .wp-block-separator,
.wbl-search-card .wp-block-separator {
  width: 10px;
  border-top-width: 10px !important;
  align-self: flex-start;
  transition: width 0.2s cubic-bezier(0.65, 0, 0.35, 1);
}
.wbl-post ~ .wp-block-separator {
  color: var(--wp--preset--color--emerald-400);
}
.wbl-landmark ~ .wp-block-separator {
  color: var(--wp--preset--color--amber-400);
}
.wbl-page ~ .wp-block-separator {
  color: var(--wp--preset--color--indigo-200);
}

/* Pagination */
.wbl-pagination div {
  min-width: 80px;
}
.wbl-pagination {
  display: flex;
  justify-content: center;
  gap: 8px; /* Adjust this value for spacing between numbers */
}

/* All page numbers (including current) */
.wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* Square width */
  height: 40px; /* Square height */
  padding: 0;
  text-decoration: none;
  /* border-radius: 100%; */
}

/* Regular page numbers */
.wp-block-query-pagination a {
  color: var(--wp--preset--color--indigo-900);
  background-color: var(--wp--preset--color--indigo-50);
  transition: all 0.2s ease;
}

/* Current page number */
.wp-block-query-pagination .page-numbers.current {
  color: var(--wp--preset--color--indigo-900);
  background-color: var(--wp--preset--color--wbl-ac);
}

/* Hover state for clickable numbers */
.wp-block-query-pagination a:hover {
  background-color: var(--wp--preset--color--indigo-200);
}

/* Previous/Next arrows */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
  margin: 0px !important;
}

/* Email icon */
.wbl-email-icon {
  transition: all 0.2s ease-out;
}
.wbl-send-email:hover .wbl-email-icon {
  transform: translateX(6px);
}

/* Aside */
.wbl-aside {
  top: 80px;
  min-width: 360px;
}

/* Scroll bar */
body {
  --sb-track-color: var(--wp--preset--color--indigo-950);
  --sb-thumb-color: var(--wp--preset--color--amber-400);
  --sb-size: 10px;
  overflow: overlay;
}
*::-webkit-scrollbar {
  display: block;
  width: var(--sb-size);
}
*::-webkit-scrollbar-track {
  background: var(--sb-track-color);
}
*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border: 2px solid var(--wp--preset--color--indigo-950);
}
@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}