/*
 * Styling for sticky header element
 * The `is-position-sticky` class is added by WordPress Group blocks with sticky positioning
 * Applies styles if a child of `site-header` has this class
*/
header.site-header:has(> .is-position-sticky) {
  --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
  position: sticky;
  top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
  z-index: 10;
}

/*
 * If any of blocks within the main elements contains the `is-position-sticky
 * While the header is sticky, we need to add additional spacing to the top
 * So that the sticky element won't overlap with the header
*/
header.site-header:has(> .is-position-sticky) + :is(main[class], div[class]) .wp-block-group.is-position-sticky {
  --wp-admin--admin-bar--position-offset: var(--wp-admin--admin-bar--height, 0px);
  position: sticky;
  top: calc(90px + var(--wp-admin--admin-bar--position-offset, 0px));

  /* Need to lower the stacking than the default one (which is 10) */
  z-index: 9;
}

/*
 * We need to re-assign the position of header on the editor page
 * So that it won't position itself a bit lower than the top
 */
body.block-editor-page header.site-header:has(> .is-position-sticky) {
  --wp-admin--admin-bar--position-offset: 0px;
}

/*
 * Styling for the blog pagination
 * Currently there is no way to style the pagination in the block editor
 * So we manually add the styles here to style the pagination
*/
.wp-block-query-pagination {
  gap: 32px;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 5px;
  color: var(--wp--preset--color--button-bg);
  text-decoration: none;
}

.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current {
  background-color: var(--wp--preset--color--button-bg);
  color: var(--wp--preset--color--button-text);
}

.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  color: var(--wp--preset--color--button-bg);
  display: inline-flex;
  gap: 1ch;
  padding: 4px 12px;
  border-radius: 5px;
  transition: 0.4s;
}

.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
  box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.2);
  background-color: var(--wp--preset--color--button-text);
}

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

/*
 * Styling for the post lists
 * To add shadow effects to the post list items when hovered
*/
.has-shadow-list-effects > li.wp-block-post:hover,
.has-shadow-list-effects > .wp-block-group:hover {
  transition: 0.1s;
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  box-shadow: 12px 12px 50px color-mix(in srgb, currentColor 15%, transparent);
}

/* Styling for the BBC icons */
p[class*="ap-listing-"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

p.ap-listing-bed::before,
p.ap-listing-bath::before,
p.ap-listing-car::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  background: var(--wp--preset--color--button-bg, currentColor);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}

@media (max-width: 767.98px) {
  p.ap-listing-bed::before,
  p.ap-listing-bath::before,
  p.ap-listing-car::before {
    width: 1.25em;
    height: 1.25em;
  }
}

p.ap-listing-bed::before {
  mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5V19' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2 15L22 15' stroke='currentColor' stroke-width='1.5' stroke-linecap='square'/%3E%3Ccircle cx='6.5' cy='10.5' r='1.5' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M21.25 19C21.25 19.4142 21.5858 19.75 22 19.75C22.4142 19.75 22.75 19.4142 22.75 19H21.25ZM10.25 15V15.75H11.75V15H10.25ZM22.75 19V10H21.25V19H22.75ZM20 7.25H11.5V8.75H20V7.25ZM10.25 8.5V15H11.75V8.5H10.25ZM11.5 7.25C10.8096 7.25 10.25 7.80964 10.25 8.5H11.75C11.75 8.63807 11.6381 8.75 11.5 8.75V7.25ZM22.75 10C22.75 8.48122 21.5188 7.25 20 7.25V8.75C20.6904 8.75 21.25 9.30964 21.25 10H22.75Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}

p.ap-listing-bath::before {
  mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4V4C5.35191 2.76393 3 3.93989 3 6V12M3 12V17C3 18.1046 3.89543 19 5 19H19C20.1046 19 21 18.1046 21 17V12H3Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='square'/%3E%3Cpath d='M5.75 19L5.75 18.25L4.25 18.25L4.25 19L5.75 19ZM4.25 21C4.25 21.4142 4.58579 21.75 5 21.75C5.41421 21.75 5.75 21.4142 5.75 21L4.25 21ZM4.25 19L4.25 21L5.75 21L5.75 19L4.25 19Z' fill='currentColor'/%3E%3Cpath d='M18.75 19L18.75 18.25L17.25 18.25L17.25 19L18.75 19ZM17.25 21C17.25 21.4142 17.5858 21.75 18 21.75C18.4142 21.75 18.75 21.4142 18.75 21L17.25 21ZM17.25 19L17.25 21L18.75 21L18.75 19L17.25 19Z' fill='currentColor'/%3E%3Cpath d='M7.36566 7.09686C6.61143 6.34263 6.61142 5.11978 7.36566 4.36554V4.36554C8.11989 3.61131 9.34274 3.61131 10.097 4.36555L10.9814 5.25001L8.25012 7.98132L7.36566 7.09686Z' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

p.ap-listing-car::before {
  mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8889 13.6002H13.1111M22 7.20046L19.7778 9.33372L18.1111 5.38718C17.9539 4.98329 17.6729 4.6346 17.3052 4.38706C16.9375 4.13953 16.5002 4.00477 16.0511 4.00056H7.99999C7.54722 3.99058 7.10208 4.11364 6.72418 4.35326C6.34629 4.59288 6.05368 4.93762 5.88555 5.34132L4.22222 9.33372L2 7.20046M6.44444 13.6003H6.45555M17.5555 13.6003H17.5666' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.7778 9.33368H4.22222C2.99492 9.33368 2 10.2888 2 11.4669V15.7335C2 16.9116 2.99492 17.8667 4.22222 17.8667H19.7778C21.0051 17.8667 22 16.9116 22 15.7335V11.4669C22 10.2888 21.0051 9.33368 19.7778 9.33368Z' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.22217 17.8667V20M19.7777 17.8667V20' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

/* Styling for the agent contact icons */
.ap-agents-phone > :where(a, div)::before,
.ap-agents-mobile > :where(a, div)::before,
.ap-agents-email > :where(a, div)::before {
  content: "";
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  background: currentColor;
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  vertical-align: 5px;
  margin-right: 12px;
}

.ap-agents-phone > :where(a, div)::before {
  mask-image: url("data:image/svg+xml,%0A%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.8752 25.7406C17.5047 25.5758 17.1398 25.3985 16.7811 25.2091C14.9951 24.1993 13.3548 22.9511 11.9055 21.4988C10.0244 19.728 8.47927 17.6314 7.34496 15.3103C6.73746 14.0632 6.32745 12.7292 6.12961 11.3562C5.85993 9.96964 6.01322 8.53403 6.56961 7.23567C6.91328 6.67675 7.32712 6.1654 7.80042 5.7147C7.99252 5.49932 8.22617 5.32499 8.48733 5.20217C8.7485 5.07935 9.03179 5.01059 9.3202 5C9.92074 5.09038 10.4642 5.40432 10.84 5.88238C11.6605 6.79448 12.5405 7.61502 13.4074 8.48194C13.7487 8.77448 13.9616 9.18951 13.9996 9.63783C13.9854 10.0148 13.8403 10.3751 13.5894 10.657C13.3016 11.022 12.952 11.3562 12.6178 11.7058C12.416 11.9003 12.2616 12.1387 12.1668 12.4025C12.0719 12.6662 12.0391 12.9483 12.0708 13.2268C12.2794 13.8785 12.6382 14.472 13.1185 14.9594C13.6964 15.7503 14.2732 16.4816 14.926 17.2558C16.0999 18.6124 17.4917 19.7639 19.0442 20.6628C19.2587 20.825 19.5124 20.9273 19.7795 20.9592C20.0465 20.9912 20.3172 20.9517 20.5639 20.8447C21.0799 20.5559 21.5382 20.1746 21.9161 19.7198C22.2431 19.3214 22.7116 19.0657 23.223 19.0051C23.6784 19.0288 24.1077 19.2239 24.424 19.5521C24.8331 19.9017 25.1827 20.3132 25.5633 20.6925C25.9426 21.0731 26.2471 21.3466 26.5658 21.6962C26.9475 22.0327 27.3078 22.3931 27.6444 22.776C27.906 23.1137 28.0297 23.5371 27.994 23.9616C27.8584 24.4698 27.5658 24.9221 27.158 25.2542C26.5846 25.851 25.8878 26.3153 25.1163 26.6148C24.3448 26.9142 23.5172 27.0416 22.6914 26.9881C21.0194 26.8941 19.3826 26.4701 17.8752 25.7406Z' stroke='%23003B44' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E%0A");
}

.ap-agents-mobile > :where(a, div)::before {
  mask-image: url("data:image/svg+xml,%0A%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='path-1-inside-1_1237_14204' fill='white'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 5.5H12C11.6022 5.5 11.2206 5.65804 10.9393 5.93934C10.658 6.22064 10.5 6.60218 10.5 7V25C10.5 25.3978 10.658 25.7794 10.9393 26.0607C11.2206 26.342 11.6022 26.5 12 26.5H21C21.3978 26.5 21.7794 26.342 22.0607 26.0607C22.342 25.7794 22.5 25.3978 22.5 25V7C22.5 6.60218 22.342 6.22064 22.0607 5.93934C21.7794 5.65804 21.3978 5.5 21 5.5ZM12 4C11.2044 4 10.4413 4.31607 9.87868 4.87868C9.31607 5.44129 9 6.20435 9 7V25C9 25.7957 9.31607 26.5587 9.87868 27.1213C10.4413 27.6839 11.2044 28 12 28H21C21.7957 28 22.5587 27.6839 23.1213 27.1213C23.6839 26.5587 24 25.7957 24 25V7C24 6.20435 23.6839 5.44129 23.1213 4.87868C22.5587 4.31607 21.7957 4 21 4H12Z'/%3E%3C/mask%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 5.5H12C11.6022 5.5 11.2206 5.65804 10.9393 5.93934C10.658 6.22064 10.5 6.60218 10.5 7V25C10.5 25.3978 10.658 25.7794 10.9393 26.0607C11.2206 26.342 11.6022 26.5 12 26.5H21C21.3978 26.5 21.7794 26.342 22.0607 26.0607C22.342 25.7794 22.5 25.3978 22.5 25V7C22.5 6.60218 22.342 6.22064 22.0607 5.93934C21.7794 5.65804 21.3978 5.5 21 5.5ZM12 4C11.2044 4 10.4413 4.31607 9.87868 4.87868C9.31607 5.44129 9 6.20435 9 7V25C9 25.7957 9.31607 26.5587 9.87868 27.1213C10.4413 27.6839 11.2044 28 12 28H21C21.7957 28 22.5587 27.6839 23.1213 27.1213C23.6839 26.5587 24 25.7957 24 25V7C24 6.20435 23.6839 5.44129 23.1213 4.87868C22.5587 4.31607 21.7957 4 21 4H12Z' fill='%23003B44'/%3E%3Cpath d='M21 5.5V1.5V5.5ZM12 5.5V1.5V5.5ZM10.5 7H6.5H10.5ZM12 4V0V4ZM9 7H5H9ZM9 25H5H9ZM21 1.5H12V9.5H21V1.5ZM12 1.5C10.5413 1.5 9.14236 2.07946 8.11091 3.11091L13.7678 8.76777C13.2989 9.23661 12.663 9.5 12 9.5V1.5ZM8.11091 3.11091C7.07946 4.14236 6.5 5.54131 6.5 7H14.5C14.5 7.66304 14.2366 8.29893 13.7678 8.76777L8.11091 3.11091ZM6.5 7V25H14.5V7H6.5ZM6.5 25C6.5 26.4587 7.07947 27.8576 8.11091 28.8891L13.7678 23.2322C14.2366 23.7011 14.5 24.337 14.5 25H6.5ZM8.11091 28.8891C9.14236 29.9205 10.5413 30.5 12 30.5V22.5C12.663 22.5 13.2989 22.7634 13.7678 23.2322L8.11091 28.8891ZM12 30.5H21V22.5H12V30.5ZM21 30.5C22.4587 30.5 23.8576 29.9205 24.8891 28.8891L19.2322 23.2322C19.7011 22.7634 20.337 22.5 21 22.5V30.5ZM24.8891 28.8891C25.9205 27.8576 26.5 26.4587 26.5 25H18.5C18.5 24.337 18.7634 23.7011 19.2322 23.2322L24.8891 28.8891ZM26.5 25V7H18.5V25H26.5ZM26.5 7C26.5 5.54131 25.9205 4.14236 24.8891 3.11091L19.2322 8.76777C18.7634 8.29892 18.5 7.66304 18.5 7H26.5ZM24.8891 3.11091C23.8576 2.07946 22.4587 1.5 21 1.5V9.5C20.337 9.5 19.7011 9.23661 19.2322 8.76777L24.8891 3.11091ZM12 0C10.1435 0 8.36301 0.737498 7.05025 2.05025L12.7071 7.70711C12.5196 7.89464 12.2652 8 12 8V0ZM7.05025 2.05025C5.7375 3.36301 5 5.14348 5 7H13C13 7.26522 12.8946 7.51957 12.7071 7.70711L7.05025 2.05025ZM5 7V25H13V7H5ZM5 25C5 26.8565 5.7375 28.637 7.05025 29.9497L12.7071 24.2929C12.8946 24.4804 13 24.7348 13 25H5ZM7.05025 29.9497C8.363 31.2625 10.1435 32 12 32V24C12.2652 24 12.5196 24.1054 12.7071 24.2929L7.05025 29.9497ZM12 32H21V24H12V32ZM21 32C22.8565 32 24.637 31.2625 25.9497 29.9497L20.2929 24.2929C20.4804 24.1054 20.7348 24 21 24V32ZM25.9497 29.9497C27.2625 28.637 28 26.8565 28 25H20C20 24.7348 20.1054 24.4804 20.2929 24.2929L25.9497 29.9497ZM28 25V7H20V25H28ZM28 7C28 5.14348 27.2625 3.36301 25.9497 2.05025L20.2929 7.70711C20.1054 7.51957 20 7.26522 20 7H28ZM25.9497 2.05025C24.637 0.737499 22.8565 0 21 0V8C20.7348 8 20.4804 7.89464 20.2929 7.70711L25.9497 2.05025ZM21 0H12V8H21V0Z' fill='%23003B44' mask='url(%23path-1-inside-1_1237_14204)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.5 25C16.8978 25 17.2794 24.842 17.5607 24.5607C17.842 24.2794 18 23.8978 18 23.5C18 23.1022 17.842 22.7206 17.5607 22.4393C17.2794 22.158 16.8978 22 16.5 22C16.1022 22 15.7206 22.158 15.4393 22.4393C15.158 22.7206 15 23.1022 15 23.5C15 23.8978 15.158 24.2794 15.4393 24.5607C15.7206 24.842 16.1022 25 16.5 25Z' fill='%23003B44'/%3E%3C/svg%3E%0A");
}

.ap-agents-email > :where(a, div)::before {
  mask-image: url("data:image/svg+xml,%0A%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7148 12.5706L16.4291 16.5706L22.1434 12.5706' stroke='%23003B44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 21.7143V10.2857C5 9.02335 6.02335 8 7.28571 8H25.5714C26.8338 8 27.8571 9.02335 27.8571 10.2857V21.7143C27.8571 22.9767 26.8338 24 25.5714 24H7.28571C6.02335 24 5 22.9767 5 21.7143Z' stroke='%23003B44' stroke-width='1.5'/%3E%3C/svg%3E%0A");
}

/* Utilities for block visibility */
@media (max-width: 767.98px) {
  .is-desktop-only {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .is-mobile-only {
    display: none !important;
  }
}

/* Other styling */

/* Used on the property details, especially on the association listing on a table */
@media (max-width: 767.98px) {
  .is-association-listing {
    /* Resize the font a bit lower on mobile screen */
    font-size: 0.8rem;
  }
}

@media (max-width: 767.98px) {
  .is-association-listing .has-bbc-icon > .wp-block-group {
    gap: 10px;
  }
}

/*
 * Used on the agent details, especially
 * on the testimonial items,
 * to add a quote icon above the main heading.
 */
.is-agent-testimonial-item > .wp-block-group.is-vertical::before {
  content: "";
  width: 2em;
  height: 2em;
  display: inline-flex;
  align-items: center;
  margin-bottom: 1em;
  opacity: 0.3;
  background: var(--wp--preset--color--button-bg, currentColor);
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='26' viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 0.226349L23.4353 4.70606C21.9671 4.58333 20.8941 4.91061 20.2165 5.68791C19.5388 6.46521 19.1247 7.50843 18.9741 8.81756C18.8235 10.1267 18.7859 11.5381 18.8612 13.0518H24V26H14.3435V10.5972C14.3435 6.8334 15.2094 4.01058 16.9412 2.12869C18.7106 0.246805 21.0635 -0.387309 24 0.226349ZM9.65647 0.226349L9.09176 4.70606C7.62353 4.58333 6.55059 4.91061 5.87294 5.68791C5.19529 6.46521 4.78118 7.50843 4.63059 8.81756C4.48 10.1267 4.44235 11.5381 4.51765 13.0518H9.65647V26H0V10.5972C0 6.8334 0.865882 4.01058 2.59765 2.12869C4.36706 0.246805 6.72 -0.387309 9.65647 0.226349Z' fill='%23E4E9F1'/%3E%3C/svg%3E%0A");
}

/*
 * Used on the agent details, especially
 * on the agent info columns on mobile screen
 * to reverse the order of the columns
 */
@media (max-width: 781px) {
  .is-agent-info-columns > .wp-block-column:last-child {
    /*
    * For some reasons, using the isReversedOnMobile class using
    * `flex-direction: column-reverse` doesn't work on the agent info columns
    * If the element contains cover block since it will overlap the content
    * So we need to use the order property to reverse the order of the columns
    */
    order: -1;
  }
}