/* =====================================================================
   The Property Shop — Brand Typography
   Brand guide: headings = Brandon Grotesque (CAPS only), body = Museo Sans,
   tagline/script = Serendipity Three, logo = Quincy CF (image only).
   Self-hosted. Until the licensed Brandon Grotesque + Museo Sans webfont
   files are placed in this theme's /fonts/ folder, type falls back to
   Neue Haas Unica so the site stays consistent; the swap is automatic the
   moment the files exist (font-display:swap).
   ===================================================================== */

@font-face {
  font-family: 'Brandon Grotesque';
  src: url('fonts/BrandonGrotesque-Medium.woff2') format('woff2'),
       url('fonts/BrandonGrotesque-Medium.woff') format('woff');
  font-weight: 100 900;   /* single Medium master serves all weights */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Museo Sans';
  src: url('fonts/MuseoSans-500.woff2') format('woff2'),
       url('fonts/MuseoSans-500.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tps-font-heading: 'Brandon Grotesque', 'Neue Haas Unica', 'Museo Sans', Arial, sans-serif;
  --tps-font-body: 'Museo Sans', 'Neue Haas Unica', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Body / global text -> Museo Sans */
html body { font-family: var(--tps-font-body) !important; }

/* Headings, nav, buttons -> Brandon Grotesque, UPPERCASE (brand: caps only) */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
#header-outer #top nav ul li a,
.nectar-button, .nectar-button.regular-button,
button, input[type="submit"], input[type="button"], .epl-button {
  font-family: var(--tps-font-heading) !important;
  text-transform: uppercase !important;
}

/* Off-canvas / mobile slide-out menu -> brand heading font
   (raised specificity to beat the redux Neue Haas !important rule) */
html body #slide-out-widget-area .off-canvas-menu-container,
html body #slide-out-widget-area .off-canvas-menu-container li > a,
html body #slide-out-widget-area.fullscreen .off-canvas-menu-container li > a {
  font-family: var(--tps-font-heading) !important;
  text-transform: uppercase !important;
}

/* Preserve the script tagline (Serendipity Three) — never caps, never overridden */
h1.vc_custom_heading.hero-text, .hero-text {
  font-family: 'Serendipity Three', cursive !important;
  text-transform: none !important;
}

/* ===================================================================
   Homepage hero — "love where you live"
   Keep the script tagline lowercase (never caps), and centre the whole
   hero on desktop (it is already centred on mobile). Scoped to
   .first-section (the hero row) using stable classes only — the WPBakery
   fws_* row IDs regenerate on every page load, so they must not be used.
   =================================================================== */
.herortitle,
h1.vc_custom_heading.vc_do_custom_heading.herortitle {
  text-transform: none !important;
}

@media (min-width: 768px) {
  .first-section h1.vc_custom_heading.vc_do_custom_heading.herortitle { text-align: center !important; }

  .first-section .vc_column-inner,
  .first-section .wpb_wrapper,
  .first-section .wpb_text_column,
  .first-section .wpb_text_column *,
  .first-section .hero-nav,
  .first-section .menu-hero-menu-container { text-align: center !important; }

  /* stack + full-width the hero's inner 7/5 columns so content centres */
  .first-section .vc_col-sm-7,
  .first-section .vc_col-sm-5 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* centre the BUY | SELL | RENT | INVEST menu itself */
  .first-section #menu-hero-menu.menu,
  .first-section ul.hero-nav.menu {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
  }
}

/* ===================================================================
   Dropdown (sub-menu) items: always RED text on the yellow highlight,
   never black. The base submenu text stays dark on white; only the
   hovered / current (yellow-bg) states are forced to brand red, matching
   the top-level nav red (#ee2e24).
   =================================================================== */
#header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li a:hover .menu-title-text,
#header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li.sfHover > a .menu-title-text,
#header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li:hover > a .menu-title-text,
#header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li.current-menu-item > a .menu-title-text,
#header-outer #top nav ul.sf-menu li.menu-item ul.sub-menu li.current-menu-item > a:hover .menu-title-text {
  color: #ee2e24 !important;
}

/* ===================================================================
   Footer copyright bar (#copyright) — brand cleanup
   Replace the yellow bar with a neutral light grey, keep the social
   icons + copyright text black, and remove the dark divider line that
   Salient's "copyright line" theme option draws above the bar.
   Uses `html body #footer-outer #copyright` so it depends on nothing
   but the bar itself — no #ajax-content-wrap wrapper, no skin class
   (.ascend/.original) — and is a unique selector that survives the
   LiteSpeed minifier's selector de-dup. !important beats the
   theme-option dynamic CSS (#ffdf10 bg / 1px #0a0a0a line) everywhere.
   =================================================================== */
html body #footer-outer #copyright,
#ajax-content-wrap #footer-outer #copyright {
  background-color: rgb(239, 239, 239) !important;
  border-top: none !important;
}

/* Copyright text + social icons stay black on the light bar */
html body #footer-outer #copyright p,
html body #footer-outer #copyright .col,
html body #footer-outer #copyright li a,
html body #footer-outer #copyright li a i {
  color: #000 !important;
}

/* ===================================================================
   Gravity Forms submit buttons — brand lock (site-wide)
   Brand button = YELLOW background + RED text, and it must STAY that
   way on hover/focus/active (the theme + EPL otherwise flip it to a red
   background with yellow/white text, which is off-brand). Matches the
   existing on-brand button used on the register-account form
   (#ffd600 / #ee2e24). High specificity + !important + last-loaded so
   it beats Salient's data-form-submit rules and EPL's gravity-theme
   hover rule on every page/form.
   =================================================================== */
html body .gform_wrapper input[type=submit].gform_button,
html body .gform_wrapper button[type=submit].gform_button,
html body input[type=submit].gform_button,
html body button[type=submit].gform_button,
html body .gform_wrapper.gravity-theme form input[type=submit].gform_button,
html body .gform_wrapper input[type=submit].gform_button:hover,
html body .gform_wrapper input[type=submit].gform_button:focus,
html body .gform_wrapper input[type=submit].gform_button:active,
html body .gform_wrapper button[type=submit].gform_button:hover,
html body .gform_wrapper button[type=submit].gform_button:focus,
html body .gform_wrapper button[type=submit].gform_button:active,
html body input[type=submit].gform_button:hover,
html body input[type=submit].gform_button:focus,
html body input[type=submit].gform_button:active,
html body button[type=submit].gform_button:hover,
html body button[type=submit].gform_button:focus,
html body button[type=submit].gform_button:active,
html body .gform_wrapper.gravity-theme form input[type=submit].gform_button:hover,
html body .gform_wrapper.gravity-theme form input[type=submit].gform_button:focus,
html body .gform_wrapper.gravity-theme form input[type=submit].gform_button:active {
  background-color: #ffd600 !important;
  background-image: none !important;
  color: #ee2e24 !important;
  border-color: #ee2e24 !important;
}

/* ===================================================================
   Contact page — office details block (above the enquiry form)
   Two office cards (Mudgee / Gulgong) + a prominent CALL button and an
   email link, then a divider + space to separate it from the form.
   Brand: yellow #ffd600, red #ee2e24.
   =================================================================== */
.tps-contact-offices {
  margin: 0 0 38px;
  padding-bottom: 34px;
  border-bottom: 1px solid #e3e3e3;
}

.tps-contact-offices .tps-office-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-bottom: 28px;
}

.tps-contact-offices .tps-office {
  flex: 1 1 200px;
  min-width: 0;
  background: #ffffff;
  border-top: 3px solid #ffd600;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  padding: 26px 22px;
  text-align: center;
}

.tps-contact-offices .tps-office__name {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #231f20;
}

.tps-contact-offices .tps-office__addr {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #555555;
}

/* actions: prominent yellow call button stacked above a subtle email link */
.tps-contact-offices .tps-contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}

.tps-contact-offices .tps-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffd600;
  color: #ee2e24 !important;
  font-family: var(--tps-font-heading) !important;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 17px 38px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.tps-contact-offices .tps-call-btn i {
  color: #ee2e24 !important;
  font-size: 20px;
}
.tps-contact-offices .tps-call-btn:hover,
.tps-contact-offices .tps-call-btn:focus {
  background: #f2c800;
  color: #ee2e24 !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.tps-contact-offices .tps-contact-email {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #231f20;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.tps-contact-offices .tps-contact-email i {
  color: #ee2e24 !important;
  font-size: 16px;
}
.tps-contact-offices .tps-contact-email:hover,
.tps-contact-offices .tps-contact-email:focus {
  color: #ee2e24;
}

@media (max-width: 690px) {
  .tps-contact-offices .tps-office-grid { gap: 16px; }
  .tps-contact-offices .tps-call-btn { width: 100%; font-size: 18px; padding: 15px 20px; }
}

/* ===================================================================
   Listing cards (EPL grid/rec) — tie the details to the image
   Light grey panel + inset on the details box so the address / beds /
   price / agent read as part of the same card. Square the image's
   bottom corners and round the bottom of the grey panel so the photo
   and details join seamlessly into one rounded card. Homepage featured
   slider keeps its white box (higher specificity) — unaffected.
   =================================================================== */
.epl-property-blog-rec .pro-home-box.content-box {
  background: #f4f4f4;
  padding: 16px 18px 18px;
  border-radius: 0 0 5px 5px;
}

/* photo: keep the top corners rounded, square the bottom so it meets the
   panel. The theme rounds all four corners on .epl-row--featured-image
   with high specificity (body .loop.epl-shortcode …), so this override
   needs raised specificity + !important to win. */
body .loop .epl-property-blog-rec .epl-row.epl-row--featured-image.epl-row--content.epl-row--link {
  border-radius: 5px 5px 0 0 !important;
}

/* ===================================================================
   Commercial / Business listing pages — modern pre-filtered card grid
   These pages use EPL [listing template="blog"] (not FacetWP), so the
   FacetWP grid CSS doesn't apply. Lay the rec-grid cards out in the same
   responsive grid as the For Sale results. Card styling (grey panel,
   rounded corners) is inherited from the .epl-property-blog-rec rules.
   =================================================================== */
body.page-id-1265 .loop-content.epl-template-blog,
body.post-type-archive-commercial .loop-content.epl-template-blog {
  display: grid !important;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
body.page-id-1265 .loop-content.epl-template-blog > .epl-listing-post,
body.post-type-archive-commercial .loop-content.epl-template-blog > .epl-listing-post {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

.tps-commercial-archive .tps-archive-title {
  text-align: center;
  margin: 0 0 30px;
}

@media (max-width: 999px) {
  body.page-id-1265 .loop-content.epl-template-blog,
  body.post-type-archive-commercial .loop-content.epl-template-blog {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 690px) {
  body.page-id-1265 .loop-content.epl-template-blog,
  body.post-type-archive-commercial .loop-content.epl-template-blog {
    grid-template-columns: 1fr;
  }
}

/* Homepage "Latest Properties" section: cap content width on large screens so the
   listing cards do not stretch — keeps heading + cards centred with side whitespace.
   Full-width grey background band is unaffected. (2026-06-06) */
.tps-latest-properties.wpb_column {
  max-width: 1500px;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none;
}

/* ===================================================================
   Commercial rentals (/rental/?commercial) — modern grid via .tps-listing-grid
   wrapper (body class is page-id-29837, same as normal rental, so scope by
   wrapper). Reuses the same responsive grid + inherited card styling.
   =================================================================== */
.tps-listing-grid .loop-content.epl-template-blog {
  display: grid !important;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}
.tps-listing-grid .loop-content.epl-template-blog > .epl-listing-post {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.tps-commercial-rental .tps-archive-title { text-align: center; margin: 0 0 30px; }
@media (max-width: 999px) {
  .tps-listing-grid .loop-content.epl-template-blog { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 690px) {
  .tps-listing-grid .loop-content.epl-template-blog { grid-template-columns: 1fr; }
}

/* ===================================================================
   Single listing hero slider — centre the images (center center)
   The carousel wrapper chain (.sl-featured-img -> outer-wrapper ->
   inner-wrapper -> .epl-slick-carousel) lacked height:100%, so the
   slide image never filled the fixed-height hero box and object-fit/
   object-position had no effect. Give the whole chain full height, then
   cover-crop the image centred.
   =================================================================== */
.tps-single-listing-hero-image .epl-slick-carousel-outer-wrapper,
.tps-single-listing-hero-image .epl-slick-carousel-inner-wrapper,
.tps-single-listing-hero-image .epl-slick-carousel,
.tps-single-listing-hero-image .epl-slick-carousel.slick-frame {
  height: 100% !important;
}
.tps-single-listing-hero-image .epl-slick-carousel .slick-slide img,
.tps-single-listing-hero-image .epl-slick-carousel .slick-slide img.epl-slick-item-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* ===================================================================
   Single listing — sold/leased tweaks + slightly taller map
   (body gets tps-status-{status} via TM_body_classes in functions.php)
   =================================================================== */

/* "What's my home worth?" (estimate) button is off-brand red on sold/leased
   listings — make it a neutral grey box with black text (both the sticky
   header bar and the sidebar instance). */
body.tps-status-sold .epl-button--estimate,
body.tps-status-leased .epl-button--estimate,
body.tps-status-sold .epl-button--estimate span,
body.tps-status-leased .epl-button--estimate span {
  background: #e9e9e9 !important;
  background-color: #e9e9e9 !important;
  color: #1a1716 !important;
  border-color: #d8d8d8 !important;
}
body.tps-status-sold .epl-button--estimate:hover,
body.tps-status-sold .epl-button--estimate:focus,
body.tps-status-leased .epl-button--estimate:hover,
body.tps-status-leased .epl-button--estimate:focus {
  background: #dcdcdc !important;
  background-color: #dcdcdc !important;
  color: #1a1716 !important;
}

/* Sold properties no longer need the request-a-document resources box
   (Request Contract / Building & Pest Report / Rental Appraisal). */
body.tps-status-sold .epl-section-inner--listing-details {
  display: none !important;
}

/* Make the single-listing map a little taller (was 500px). */
.single-pro-map,
.single-pro-map .epl-am-single-listing-map,
.single-pro-map .epl-am-template--single,
.single-pro-map .epl-am-section--map,
.single-pro-map #epl-advanced-map {
  height: 620px !important;
  min-height: 620px !important;
}

/* ===================================================================
   Single listing sticky info-bar — make the two CTA buttons equal size
   (e.g. "What's My Home Worth?" vs "Enquire Now" / "Make an Offer").
   They live in a flex wrapper; give the wrapper a width and let the two
   buttons share it equally so they're always the same width + height.
   Scoped to #info-bar so the sidebar (already full-width) is untouched.
   =================================================================== */
#info-bar .epl-button-wrapper--alternate {
  display: flex !important;
  width: 100%;
  max-width: 500px;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center;
  gap: 10px;
}
#info-bar .epl-button-wrapper--alternate > a.epl-button {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  text-align: center !important;
}

/* ===================================================================
   Top info-bar (sold/leased): make BOTH CTA buttons identical so
   "Enquire Now" matches "What's My Home Worth?". The Enquire button is an
   outline button whose default hover filled red (off-brand/weird) — give
   both buttons the same grey box, black text and subtle grey hover.
   =================================================================== */
body.tps-status-sold #info-bar .epl-button-wrapper--alternate a.epl-button,
body.tps-status-leased #info-bar .epl-button-wrapper--alternate a.epl-button,
body.tps-status-sold #info-bar .epl-button-wrapper--alternate a.epl-button span,
body.tps-status-leased #info-bar .epl-button-wrapper--alternate a.epl-button span {
  background: #e9e9e9 !important;
  background-color: #e9e9e9 !important;
  color: #1a1716 !important;
  border-color: #d8d8d8 !important;
}
body.tps-status-sold #info-bar .epl-button-wrapper--alternate a.epl-button:hover,
body.tps-status-sold #info-bar .epl-button-wrapper--alternate a.epl-button:focus,
body.tps-status-leased #info-bar .epl-button-wrapper--alternate a.epl-button:hover,
body.tps-status-leased #info-bar .epl-button-wrapper--alternate a.epl-button:focus,
body.tps-status-sold #info-bar .epl-button-wrapper--alternate a.epl-button:hover span,
body.tps-status-leased #info-bar .epl-button-wrapper--alternate a.epl-button:hover span {
  background: #dcdcdc !important;
  background-color: #dcdcdc !important;
  color: #1a1716 !important;
  border-color: #cfcfcf !important;
}

/* ===================================================================
   Top info-bar Enquire Now hover (for-sale etc.) — match "Make an Offer".
   The theme's dark hover (#404141/white) targets `--contact-agent`, but the
   Enquire button is `--contact` (no -agent), so it fell back to a red outline
   hover. Give the outline Enquire button the same #404141/white hover as
   Make an Offer. (Sold/leased keep their grey hover via higher-specificity
   body.tps-status-* rules above.)
   =================================================================== */
#info-bar .epl-button-wrapper--alternate a.epl-button--enquiry.epl-button--outline:hover,
#info-bar .epl-button-wrapper--alternate a.epl-button--enquiry.epl-button--outline:focus,
#info-bar .epl-button-wrapper--alternate a.epl-button--enquiry.epl-button--outline:hover span,
#info-bar .epl-button-wrapper--alternate a.epl-button--enquiry.epl-button--outline:focus span {
  background: #404141 !important;
  background-color: #404141 !important;
  color: #ffffff !important;
  border-color: #404141 !important;
}

/* ===================================================================
   Mobile/tablet (<=1285px): show the sticky info-bar CTA on scroll.
   It was force-hidden (its address/price duplicated the inline mobile
   block) which also removed the Make an Offer / Enquire buttons. Show it
   when .sticky (on scroll) like desktop. High specificity to beat the
   display:none!important / visibility:hidden!important hide rules.
   =================================================================== */
@media (max-width: 1285px) {
  body #epl-single-primary #info-bar.epl-section-wrap--info-bar.sticky,
  body section#info-bar.epl-section-wrap--info-bar.sticky,
  body #info-bar.epl-section-wrap--info-bar.sticky {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    padding: 10px 0 !important;
  }
}

/* ===================================================================
   Enquiry / Make-an-offer modal form — mobile fixes
   1) Gravity Forms Name field: First/Last are flex columns; when they stack
      on mobile the Last Name column keeps a left gutter padding, so it sits
      indented. Zero the column padding when stacked so it aligns with First.
   2) The modal CLOSE control was faint white text tucked behind the mobile
      header/hamburger. Make it a clear dark pill, fixed top-right, above all.
   =================================================================== */
@media (max-width: 641px) {
  .gform_wrapper .ginput_complex .gform-grid-col,
  .gform_wrapper .ginput_complex .name_first,
  .gform_wrapper .ginput_complex .name_last {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 1024px) {
  .epl-section-wrap--modal .epl-modal__close,
  .epl-section .epl-modal__close {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 100001 !important;
    background: #1a1716 !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1 !important;
  }
  .epl-section-wrap--modal .epl-modal__close .epl-label,
  .epl-section-wrap--modal .epl-modal__close .epl-icon,
  .epl-section-wrap--modal .epl-modal__close .epl-modal__close__button,
  .epl-section .epl-modal__close .epl-label,
  .epl-section .epl-modal__close .epl-icon {
    color: #ffffff !important;
  }
}

/* Mobile: the enquiry/make-offer modal sits at z-index 10000 but #header-outer
   is position:fixed z-index 999999, so the header (logo + hamburger) paints over
   the modal and traps the close button behind it. Raise the modal above the
   header on mobile so it fully covers it and the close pill is clickable. */
@media (max-width: 1024px) {
  .epl-section-wrap--modal,
  .epl-section-wrap--modal--enquiry { z-index: 1000000 !important; }
  .epl-section-wrap--modal .epl-modal__close,
  .epl-section .epl-modal__close { color: #ffffff !important; }
}

/* Enquiry modal refinements (mobile): (1) close button = plain white text/icon,
   no background pill. (2) uniform vertical spacing in the Name field so
   First->Last and Last->Email gaps match the rest of the form (15px). */
@media (max-width: 1024px) {
  .epl-section-wrap--modal .epl-modal__close,
  .epl-section .epl-modal__close {
    background: transparent !important;
    background-color: transparent !important;
    padding: 4px 4px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}
@media (max-width: 641px) {
  .gform_wrapper .ginput_complex { row-gap: 15px !important; }
  .gform_wrapper .ginput_complex .name_first,
  .gform_wrapper .ginput_complex .name_last {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ===================================================================
   Enquiry/Make-offer modal — agent section, mobile layout
   Use the full width, stack multiple agents vertically, drop the Email
   link, and turn Call into a big red button (like the contact page).
   =================================================================== */
@media (max-width: 1024px) {
  /* stack each agent block vertically, full width */
  .epl-modal__agents .epl-author-box-wrapper {
    float: none !important;
    width: 100% !important;
    margin: 0 0 22px !important;
  }
  .epl-modal__agents .epl-author-box-wrapper:last-child { margin-bottom: 0 !important; }
  /* photo + name/title across the full width */
  .epl-modal__agents .epl-author-box-outer-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
  }
  .epl-modal__agents .epl-author-box.epl-author-image {
    float: none !important;
    flex: 0 0 84px !important;
    width: 84px !important;
    margin: 0 !important;
  }
  .epl-modal__agents .epl-author-tab-content {
    float: none !important;
    flex: 1 1 55% !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* remove the Email contact option */
  .epl-modal__agents .epl-value.email,
  .epl-modal__agents .epl-sd-entry-email,
  .epl-modal__agents a[href^="mailto:"] {
    display: none !important;
  }
  /* Call -> big red button, full width (like the contact page CALL button) */
  .epl-modal__agents .epl-value.mobile,
  .epl-modal__agents .epl-sd-entry-mobile {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin: 6px 0 0 !important;
  }
  .epl-modal__agents .epl-value.mobile a,
  .epl-modal__agents a[href^="tel:"] {
    display: block !important;
    width: 100% !important;
    background: #ee2e24 !important;
    color: #ffffff !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    padding: 15px 18px !important;
    font-size: 17px !important;
    border-radius: 4px !important;
  }
}

/* Modal agent section (mobile) — refine: full-width Call button + clean label */
@media (max-width: 1024px) {
  /* stack name / title / contact in the content column so the button can be full width */
  .epl-modal__agents .epl-author-tab-content {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .epl-modal__agents .epl-author-contact-details,
  .epl-modal__agents .epl-author-contact,
  .epl-modal__agents .epl-author-contact.epl-sd-author-mobile,
  .epl-modal__agents .epl-value.mobile {
    display: block !important;
    width: 100% !important;
    flex-basis: 100% !important;
    margin-left: 0 !important;
  }
  /* drop the small "Call" text label — the button itself reads Call */
  .epl-modal__agents .epl-author-contact .epl-label,
  .epl-modal__agents .epl-sd-author-mobile .epl-label,
  .epl-modal__agents .epl-author-contact-details .epl-label,
  .epl-modal__agents .epl-sd-label { display: none !important; }
  /* full-width Call button with a clear "Call <number>" label */
  .epl-modal__agents a[href^="tel:"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }
  .epl-modal__agents .epl-value.mobile a[href^="tel:"]::before { content: "Call "; }
}

/* Modal Call button: the theme adds a "Call" label via ::after on the tel link;
   our ::before already prefixes "Call ", so drop the ::after to avoid "Call ...Call". */
@media (max-width: 1024px) {
  .epl-modal__agents a[href^="tel:"]::after { content: none !important; }
}

/* ===================================================================
   Enquiry / Make-offer modal — remove the inner scrollbar; let the
   overlay scroll instead so it looks normal (desktop + mobile).
   =================================================================== */
.epl-section-wrap--modal { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.epl-section--modal {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  align-items: flex-start !important;
  padding: 30px 14px !important;
  box-sizing: border-box !important;
}
.epl-modal { max-height: none !important; overflow: visible !important; }

/* ===================================================================
   Call buttons — ALWAYS yellow background + red text (brand). Never red
   background / white text. Applies to the contact-page button and the
   modal agent Call button.
   =================================================================== */
.tps-call-btn,
.tps-call-btn:hover,
.tps-call-btn:focus {
  background: #ffd600 !important;
  background-color: #ffd600 !important;
  color: #ee2e24 !important;
  border-color: #ffd600 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}
.tps-call-btn i,
.tps-call-btn:hover i,
.tps-call-btn:focus i { color: #ee2e24 !important; }
.tps-call-btn:hover,
.tps-call-btn:focus { background: #f2c800 !important; background-color: #f2c800 !important; }
@media (max-width: 1024px) {
  .epl-modal__agents a[href^="tel:"],
  .epl-modal__agents a[href^="tel:"]:hover,
  .epl-modal__agents a[href^="tel:"]:focus {
    background: #ffd600 !important;
    background-color: #ffd600 !important;
    color: #ee2e24 !important;
  }
}

/* Call button colour override needs to beat the earlier `.epl-value.mobile a`
   rule (higher specificity) — match it. Yellow bg + red text, always. */
@media (max-width: 1024px) {
  .epl-modal__agents .epl-value.mobile a,
  .epl-modal__agents .epl-value.mobile a:hover,
  .epl-modal__agents .epl-value.mobile a:focus,
  .epl-modal__agents a[href^="tel:"],
  .epl-modal__agents a[href^="tel:"]:hover,
  .epl-modal__agents a[href^="tel:"]:focus {
    background: #ffd600 !important;
    background-color: #ffd600 !important;
    color: #ee2e24 !important;
  }
}

/* ===================================================================
   Modal agent section — apply the layout/email/Call-button updates on
   ALL widths (desktop + mobile), not just mobile.
   =================================================================== */
.epl-modal__agents .epl-author-box-wrapper { float: none !important; width: 100% !important; margin: 0 0 22px !important; }
.epl-modal__agents .epl-author-box-wrapper:last-child { margin-bottom: 0 !important; }
.epl-modal__agents .epl-author-box-outer-wrapper {
  display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important;
  column-gap: 16px !important; row-gap: 12px !important;
}
.epl-modal__agents .epl-author-box.epl-author-image { float: none !important; flex: 0 0 84px !important; width: 84px !important; margin: 0 !important; }
.epl-modal__agents .epl-author-tab-content {
  float: none !important; flex: 1 1 55% !important; width: auto !important; min-width: 0 !important;
  flex-direction: column !important; align-items: stretch !important;
}
.epl-modal__agents .epl-author-contact-details,
.epl-modal__agents .epl-author-contact,
.epl-modal__agents .epl-value.mobile { display: block !important; width: 100% !important; flex-basis: 100% !important; margin-left: 0 !important; }
/* remove Email */
.epl-modal__agents .epl-value.email,
.epl-modal__agents .epl-sd-entry-email,
.epl-modal__agents a[href^="mailto:"] { display: none !important; }
/* hide stray "Call" label */
.epl-modal__agents .epl-author-contact .epl-label,
.epl-modal__agents .epl-sd-author-mobile .epl-label,
.epl-modal__agents .epl-author-contact-details .epl-label,
.epl-modal__agents .epl-sd-label { display: none !important; }
/* Call -> big yellow button, red text, full width */
.epl-modal__agents .epl-value.mobile a,
.epl-modal__agents a[href^="tel:"] {
  display: block !important; width: 100% !important; box-sizing: border-box !important;
  background: #ffd600 !important; background-color: #ffd600 !important; color: #ee2e24 !important;
  text-align: center !important; text-transform: uppercase !important; font-weight: 700 !important;
  letter-spacing: 0.5px !important; text-decoration: none !important; padding: 15px 18px !important;
  font-size: 17px !important; border-radius: 4px !important; white-space: nowrap !important;
}
.epl-modal__agents .epl-value.mobile a:hover, .epl-modal__agents .epl-value.mobile a:focus,
.epl-modal__agents a[href^="tel:"]:hover, .epl-modal__agents a[href^="tel:"]:focus {
  background: #f2c800 !important; background-color: #f2c800 !important; color: #ee2e24 !important;
}
.epl-modal__agents .epl-value.mobile a[href^="tel:"]::before { content: "Call "; }
.epl-modal__agents a[href^="tel:"]::after { content: none !important; }

/* Desktop: the modal Call button should be a normal auto-width button, not a
   stretched full-width bar (full width stays on mobile <=1024px). */
@media (min-width: 1025px) {
  .epl-modal__agents .epl-value.mobile a,
  .epl-modal__agents a[href^="tel:"] {
    display: inline-block !important;
    width: auto !important;
    min-width: 190px !important;
    margin-top: 4px !important;
  }
}

/* Modal must sit above the fixed header (#header-outer z:999999) at ALL widths
   (was ≤1024px only) so the CLOSE button isn't hidden behind the nav on desktop. */
.epl-section-wrap--modal,
.epl-section-wrap--modal--enquiry { z-index: 1000000 !important; }

/* Header dropdown items (e.g. About → Community Engagement) must not wrap/stack;
   size the submenu to its content so long items stay on one line. */
/* (reverted: min-width:max-content blew up submenu width) */
#header-outer .sf-menu ul.sub-menu li > a,
#header-outer #top nav ul.sub-menu li > a,
#header-outer #top nav .sf-menu ul li > a { white-space: nowrap !important; }

/* ===================================================================
   Search-results cards: the Bed/Bath/Car block is position:absolute top-right
   over the title row, and the address had no space reserved → long addresses
   ran underneath it. Reserve room (clears the widest 3-icon meta ~173px) so
   long addresses wrap to a 2nd line instead of overlapping. Short addresses
   don't reach this boundary, so they look unchanged.
   =================================================================== */
.epl-property-blog-rec .entry-title {
  padding-right: 185px !important;
  box-sizing: border-box !important;
}

/* ===================================================================
   Search-results grid: make columns FLUID so it drops 4->3->2->1 based on a
   minimum card width instead of cramming narrow cards (long/short addresses
   then have room and don't wrap badly). minmax(min(460px,100%),1fr) keeps
   cards >=460px on desktop but lets a single column shrink on mobile (no
   horizontal overflow). Column count becomes purely width-driven.
   =================================================================== */
.epl-am-section--listings.epl-am-section--full-width .facetwp-template .loop-content.epl-shortcode-listing {
  /* fluid: drop 4->3->2->1 cols by card width (>=440px) instead of fixed breakpoints */
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)) !important;
}

/* ===================================================================
   2026-06-08 — Single-listing hero + sticky info-bar fixes
   (a) HERO black strip on large desktops: slick.js locks .slick-list to a
       fixed pixel height (~1080px) that ignores the responsive 80vh box,
       so once a monitor's 80vh exceeds 1080px (viewport taller than
       ~1350px, i.e. 1440p/4K) the dark #1a1716 fallback showed as a black
       band below the photo. Pin the REST of the slick chain
       (list/track/slide) to height:100% — the outer/inner/carousel
       wrappers were already pinned above — so the image always fills the
       box at every viewport height (object-fit:cover already crops it).
   (b) Sticky info-bar CTA labels not vertically centred: the
       "What's My Home Worth?" (estimate) button used line-height:25px +
       padding and sat ~4.6px high, while "Enquire Now" used
       line-height:50px (centred). Flex-centre both labels so they match
       and stay centred even if the text wraps to two lines. Unique
       `html body` prefix avoids the LiteSpeed minifier de-duping a
       verbatim-matching earlier selector.
   =================================================================== */
.tps-single-listing-hero-image .slick-list,
.tps-single-listing-hero-image .slick-track,
.tps-single-listing-hero-image .slick-slide {
  height: 100% !important;
}
html body #info-bar .epl-button-wrapper--alternate > a.epl-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===================================================================
   2026-06-08 — Single-listing hero black strip (REAL root cause).
   The earlier height:100% chain fix was necessary but NOT sufficient:
   EasyPropertyListings emits a per-carousel INLINE <style> that caps
   `#epl-carousel-1-<n>` AND its <img> at `max-height:1080px`. So even
   with height:100%, the carousel/image never grew past 1080px — once
   the responsive 80vh hero box exceeds 1080px (large/tall desktops,
   e.g. ~1450px+ viewport height), the box outgrew the capped image and
   the #1a1716 fallback showed as a black band at the bottom of the hero
   (with the address/beds/Gallery row sitting on it). Removing the cap on
   the whole hero slick chain + image lets the image fill the box at any
   size (browser-verified at a 1160px box: img 1080→1160, blackGap 0).
   Scoped to .tps-single-listing-hero-image so other EPL carousels (page
   gallery/photoswipe) keep their max-height. The id selector varies per
   listing (epl-carousel-1-1/-1-2…) so we override by class with
   !important (beats the non-important inline <style> id rule).
   =================================================================== */
.tps-single-listing-hero-image .epl-slick-carousel-outer-wrapper,
.tps-single-listing-hero-image .epl-slick-carousel-inner-wrapper,
.tps-single-listing-hero-image .epl-slick-carousel,
.tps-single-listing-hero-image .epl-slick-carousel.slick-frame,
.tps-single-listing-hero-image .slick-list,
.tps-single-listing-hero-image .slick-track,
.tps-single-listing-hero-image .slick-slide,
.tps-single-listing-hero-image .slick-slide > a,
.tps-single-listing-hero-image .slick-slide img,
.tps-single-listing-hero-image .slick-slide img.epl-slick-item-image {
  max-height: none !important;
}

/* Scroll-to-top button (#to-top): brand hover/focus/active = yellow bg + red
   arrow (default gray state unchanged). Arrow is an icomoon font icon coloured
   via `color`. !important beats Salient's #to-top:hover. 2026-06-17 */
#to-top:hover,
#to-top:focus,
#to-top:active {
  background-color: #ffd600 !important;
  color: #ee2e24 !important;
}
#to-top:hover i,
#to-top:focus i,
#to-top:active i {
  color: #ee2e24 !important;
}

/* ===================================================================
   2026-07-06 client round (pre-launch): see backup brand-typography.css.bak-20260706-clientround
   =================================================================== */

/* --- Hero tagline (under "love where you live") — small but readable everywhere --- */
html body .tps-hero-tagline {
	max-width: 760px;
	margin: 60px auto 0;
	padding: 0 16px;
}
@media (max-width: 690px) {
	html body .tps-hero-tagline {
		font-size: 15px !important;
		line-height: 23px !important;
		margin-top: 20px;
	}
}

/* --- Remove red ribbon status stickers from listing photos (client request) --- */
html body .epl-stickers-wrapper {
	display: none !important;
}

/* --- Remove agent photo/name from listing grid cards --- */
html body .epl-property-blog-rec .epl-rec-meta.epl-rec-agent,
html body .loop-content .epl-rec-meta.epl-rec-agent.agent-thumbnail {
	display: none !important;
}

/* --- Gallery arrows: vertically centred + more visible (hero carousel) --- */
html body .tps-single-listing-hero-image .epl-slick-carousel .slick-prev,
html body .tps-single-listing-hero-image .epl-slick-carousel .slick-next {
	top: 50% !important;
	transform: translate(0, -50%) !important;
	width: 48px !important;
	height: 48px !important;
	background: #fff !important;
	border: 1px solid #ccc !important;
	border-radius: 50% !important;
	z-index: 30;
}
html body .tps-single-listing-hero-image .epl-slick-carousel .slick-prev:hover,
html body .tps-single-listing-hero-image .epl-slick-carousel .slick-next:hover {
	background: #f4f4f4 !important;
}
html body .tps-single-listing-hero-image .epl-slick-carousel .slick-prev::before,
html body .tps-single-listing-hero-image .epl-slick-carousel .slick-next::before {
	font-size: 22px;
	color: #6d6d6d;
	opacity: 1;
}
html body .tps-single-listing-hero-image .epl-slick-carousel .slick-prev {
	left: 24px !important;
}
html body .tps-single-listing-hero-image .epl-slick-carousel .slick-next {
	right: 24px !important;
}
@media (max-width: 690px) {
	html body .tps-single-listing-hero-image .epl-slick-carousel .slick-prev,
	html body .tps-single-listing-hero-image .epl-slick-carousel .slick-next {
		width: 40px !important;
		height: 40px !important;
	}
	html body .tps-single-listing-hero-image .epl-slick-carousel .slick-prev {
		left: 12px !important;
	}
	html body .tps-single-listing-hero-image .epl-slick-carousel .slick-next {
		right: 12px !important;
	}
}

/* --- Mobile: agent details (right column) above gallery on single listings ---
   Columns become display:contents at the 768px stack point so their children
   join one flex column; description (1) -> agent/buttons (2) -> gallery (3). */
@media (max-width: 768px) {
	html body .tps-single-pro-content-wrapper {
		display: flex;
		flex-direction: column;
	}
	html body .tps-single-pro-content-left,
	html body .tps-single-pro-content-right {
		display: contents;
	}
	html body .tps-single-pro-content-left > * {
		order: 1;
		width: 100%;
	}
	html body .tps-single-pro-content-right > * {
		order: 2;
		width: 100%;
	}
	html body .tps-single-pro-content-left > .listing-gallery {
		order: 3;
	}
}

/* --- "Share this property" button (hero button box, under Gallery) --- */
html body .tps-hero-right .tps-share-btn {
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	width: 100%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 7px;
	text-transform: uppercase;
	color: #fff;
	font-size: 14px;
	line-height: 25px;
	padding: 5px 0 0;
}
html body .tps-hero-right .tps-share-btn .tps-share-icon {
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	color: #fff;
}
html body .tps-hero-right .tps-share-btn .tps-share-label {
	display: inline;
}