/* =========================================================================
   Jose Rafael — static-build overrides on top of the compiled Realton CSS.

   The live site was a React SPA; this bundle is its frozen render, so anything
   the framework did at runtime has to be re-created here or in js/*.js:
   AOS reveal state, the Swiper carousels, the Bootstrap offcanvas menu, the
   react-input-range / react-select filter widgets on /listings, the header's
   transparent-over-hero behaviour, the blog pages the SPA rendered from an API,
   and the mortgage calculator.
   ========================================================================= */

/* ---- kill the template preloader (no React to hide it) ---- */
#preloader, .preloader, .preloader3 { display: none !important; }

/* ---- AOS is JS-driven; without its lib every [data-aos] element stays at
        opacity:0 and the page renders blank. Force them visible. ---- */
[data-aos] { opacity: 1 !important; transform: none !important; visibility: visible !important; }
.aos-init, .aos-animate { opacity: 1 !important; transform: none !important; }
.wow, .fadeInUp { visibility: visible !important; animation: none !important; opacity: 1 !important; }

/* =========================================================================
   Header. The template painted the nav transparent over the home hero and
   solid everywhere else, swapping classes from React state on scroll.
   js/shared.js adds .jr-solid (inner pages) and .jr-stick (home, scrolled).
   ========================================================================= */
header.header-nav .logos .logo2 { display: none; }
/* The transparent header sits on a background VIDEO whose brightness changes shot to
   shot, and the frozen inline colours are white with a 2px shadow. Over the video's
   pale-sky frames the nav was barely legible, so add a scrim that fades out entirely
   by the bottom of the bar. Dropped once the header goes solid. */
header.header-nav:not(.jr-solid):not(.jr-stick)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
}
header.header-nav:not(.jr-solid):not(.jr-stick) > nav { position: relative; z-index: 1; }
header.header-nav.jr-solid,
header.header-nav.jr-stick {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  background: #fff; box-shadow: 0 2px 20px rgba(0, 0, 0, .08);
}
header.header-nav.jr-solid .logos .logo1,
header.header-nav.jr-stick .logos .logo1 { display: none; }
header.header-nav.jr-solid .logos .logo2,
header.header-nav.jr-stick .logos .logo2 { display: inline-block; }
/* the frozen inline colours are white, for the hero; repaint for a white bar */
header.header-nav.jr-solid .ace-responsive-menu a,
header.header-nav.jr-stick .ace-responsive-menu a,
header.header-nav.jr-solid .ace-responsive-menu a span,
header.header-nav.jr-stick .ace-responsive-menu a span,
header.header-nav.jr-solid .login-info,
header.header-nav.jr-stick .login-info {
  color: #181a20 !important; text-shadow: none !important;
}
header.header-nav.jr-solid .ace-responsive-menu a.menuActive,
header.header-nav.jr-stick .ace-responsive-menu a.menuActive,
header.header-nav.jr-solid .ace-responsive-menu a.menuActive span,
header.header-nav.jr-stick .ace-responsive-menu a.menuActive span { color: #eb6753 !important; }
/* inner pages start below the fixed bar instead of under it */
header.header-nav.jr-solid ~ * { --jr-header-h: 90px; }
body:has(header.header-nav.jr-solid) .wrapper > .position-relative:nth-child(2) { padding-top: 90px; }
@media (max-width: 991px) {
  body:has(header.header-nav.jr-solid) .wrapper > .position-relative:nth-child(2) { padding-top: 0; }
}

/* =========================================================================
   Carousels — the frozen Swiper markup driven by js/shared.js as a
   scroll-snap strip (the featured listings on the home page).
   ========================================================================= */
.jr-carousel { overflow: hidden !important; }
.jr-carousel .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  transform: none !important;
  transition: none !important;
  gap: 30px;
  height: auto !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.jr-carousel .swiper-wrapper::-webkit-scrollbar { display: none; }
.jr-carousel .swiper-slide {
  flex: 0 0 auto !important;
  width: 382px !important;
  max-width: 86vw;
  height: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
}
@media (max-width: 575px) {
  .jr-carousel .swiper-slide { width: 300px !important; }
  .jr-carousel .swiper-wrapper { gap: 18px; }
}
.swiper_button[disabled] { opacity: .35; cursor: default; }
.swiper_button { cursor: pointer; background: none; border: 0; }
[data-carousel-dots] .swiper-pagination-bullet { cursor: pointer; }

/* ---- partner strip: six logos, no Swiper, so lay them out as a wrapping row.
   The logos are transparent PNGs with DARK wordmarks and the section background is
   #181a20, so on the live site three of the six (fub, REALTOR, Apartments.com) were
   effectively invisible. Each sits on a light plate here so all six actually read. */
.jr-partners .swiper-wrapper {
  display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 16px; transform: none !important; height: auto !important;
}
.jr-partners .swiper-slide {
  flex: 0 0 auto !important; width: auto !important; margin: 0 !important;
}
.jr-partners .partner_item {
  display: flex; align-items: center; justify-content: center;
  width: 168px; height: 74px; padding: 14px 18px;
  background: #fff; border-radius: 10px;
}
.jr-partners .partner_item img {
  width: auto !important; max-width: 100%; max-height: 100%; margin: 0 !important;
}
@media (max-width: 575px) {
  .jr-partners .partner_item { width: 136px; height: 62px; padding: 10px 14px; }
}

/* ---- listing card covers ----
   Photos crop to a fixed band; the "no image" placeholder is a wide 890x510
   graphic, so cropping it blows the wordmark past the card edge — letterbox
   that one instead. */
.listing-style1 .list-thumb { overflow: hidden; }
.jr-cover { height: 300px; object-fit: cover; display: block; }
.jr-cover-empty { object-fit: contain; background: #f1f2f4; padding: 12px; }

/* ---- placeholder / empty + error states inside a carousel or grid ---- */
.jr-note { padding: 40px 0; text-align: center; color: #8a8f98; width: 100%; }
.jr-note a { color: #eb6753; }
.jr-skeleton {
  flex: 0 0 auto; width: 382px; max-width: 86vw; height: 430px; border-radius: 12px;
  background: linear-gradient(100deg, #f1f2f4 30%, #e6e8eb 50%, #f1f2f4 70%);
  background-size: 300% 100%; animation: jrShimmer 1.3s ease-in-out infinite;
}
@keyframes jrShimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }

/* =========================================================================
   Mobile menu — the frozen markup is a Bootstrap offcanvas with no BS JS.
   js/shared.js toggles .show and manages the backdrop.
   ========================================================================= */
.mobile_menu-canvas { max-width: 320px; width: 88vw; }
body.jr-menu-open { overflow: hidden; }
.jr-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(0, 0, 0, .5); }
.mobilie_header_nav .menubar,
.mobile_menu-canvas .sidebar-close-icon { cursor: pointer; }
/* His email is 34 characters and ran off the edge of the panel. */
.mobile_menu-canvas .contact-info h6 { font-size: 14px; word-break: break-word; }

/* =========================================================================
   /listings filter sidebar — real controls replacing react-input-range and
   react-select, styled to match the widgets they stand in for.
   ========================================================================= */
.jr-select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 50px; padding: 0 38px 0 16px;
  border: 1px solid #e9e9e9; border-radius: 8px; background-color: #fff;
  color: #181a20; font-size: 15px; font-family: "DM Sans", sans-serif; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23808080' d='M4.5 7.5c.44-.45 1.05-.48 1.58 0L10 11.25l3.92-3.75c.53-.48 1.14-.45 1.58 0 .43.45.4 1.2 0 1.62-.41.42-4.7 4.5-4.7 4.5a1.1 1.1 0 0 1-1.58 0S5.03 9.54 4.62 9.12a1.15 1.15 0 0 1-.12-1.62z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.jr-select:focus { outline: none; border-color: #181a20; }
.jr-select-sm { height: 40px; width: auto; min-width: 132px; padding-right: 34px; font-size: 14px; }

/* dual-thumb price range, standing in for react-input-range */
.jr-range { position: relative; height: 26px; margin: 18px 0 4px; }
.jr-range-track {
  position: absolute; top: 11px; left: 0; right: 0; height: 4px;
  background: #e9e9e9; border-radius: 4px;
}
.jr-range-fill { position: absolute; top: 0; bottom: 0; background: #eb6753; border-radius: 4px; }
.jr-range input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.jr-range input[type="range"]:focus { outline: none; }
.jr-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid #eb6753; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.jr-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid #eb6753; box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.jr-range input[type="range"]::-moz-range-track { background: none; }

.reset-button {
  border: 0; background: none; padding: 0; color: #181a20;
  font-family: "DM Sans", sans-serif; font-size: 15px; cursor: pointer;
}
.reset-button .flaticon-turn-back { margin-right: 8px; }

/* grid / list layout toggle in the results toolbar */
.jr-layout {
  border: 1px solid #e9e9e9; background: #fff; color: #6b7280;
  border-radius: 8px; padding: 7px 14px; margin-left: 8px; font-size: 14px; cursor: pointer;
}
.jr-layout.active { background: #eb6753; border-color: #eb6753; color: #fff; }

/* list view: card goes side-by-side */
[data-listings-grid].jr-list > div { width: 100%; flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  [data-listings-grid].jr-list .listing-style1 { display: flex; align-items: stretch; }
  [data-listings-grid].jr-list .listing-style1 > a { flex: 0 0 300px; }
  [data-listings-grid].jr-list .list-thumb img { height: 100% !important; min-height: 210px; }
  [data-listings-grid].jr-list .list-content { flex: 1 1 auto; }
}

/* pager */
.jr-page {
  min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid #e6e8ec; background: #fff;
  border-radius: 8px; color: #181a20; font-weight: 500; cursor: pointer; transition: .2s;
}
.jr-page:hover:not(:disabled) { border-color: #eb6753; color: #eb6753; }
.jr-page.active { background: #eb6753; border-color: #eb6753; color: #fff; }
.jr-page:disabled { opacity: .45; cursor: default; }
[data-listings-pager] ul { list-style: none; padding: 0; margin: 0; gap: 6px; }

/* ---- lead-form status line ---- */
.form-note:empty { display: none; }

/* =========================================================================
   Blog. The SPA fetched the list and each post from the legacy API and paged
   the list two at a time; all five posts are frozen here, so the sidebar
   search filters the cards in place (js/shared.js).
   ========================================================================= */
/* The cards reuse the template's own .blog-style1 markup, so these only add the
   search-filter hiding and a consistent cover crop. */
[data-blog-card][hidden] { display: none !important; }
.blog-style1 .blog-img img { display: block; width: 100%; height: 320px; object-fit: cover; }
.blog-style1 .title { color: #181a20; }
.blog-style1 a:hover .title { color: #eb6753; }
@media (max-width: 575px) {
  .blog-style1 .blog-img img { height: 220px; }
}

.blog-sidebar { position: sticky; top: 110px; }
.blog-sidebar .widget { background: #fff; border-radius: 12px; padding: 22px; box-shadow: 0 6px 24px rgba(24, 26, 32, .06); }
.blog-sidebar .mailchimp-style1 { position: relative; }
.blog-sidebar .mailchimp-style1 input {
  width: 100%; height: 52px; border: 1px solid #e9e9e9; border-radius: 8px;
  padding: 0 48px 0 16px; font-size: 15px; color: #181a20;
}
.blog-sidebar .mailchimp-style1 input:focus { outline: none; border-color: #181a20; }
.blog-sidebar .mailchimp-style1 button {
  position: absolute; right: 6px; top: 6px; width: 40px; height: 40px;
  border: 0; border-radius: 8px; background: none; color: #6b7280; cursor: pointer;
}
.blog-sidebar-item { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.blog-sidebar-item:last-child { margin-bottom: 0; }
.blog-sidebar-item img { display: block; width: 100%; height: 120px; object-fit: cover; }
.blog-sidebar-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; padding: 12px;
  background: linear-gradient(rgba(24, 26, 32, .55), rgba(24, 26, 32, .65)); color: #fff;
}
.blog-sidebar-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.blog-sidebar-date { font-size: 12px; opacity: .85; margin-top: 4px; }
.blog-sidebar-item.is-current .blog-sidebar-overlay { background: linear-gradient(rgba(235, 103, 83, .75), rgba(235, 103, 83, .8)); }

.blog-single { background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 6px 24px rgba(24, 26, 32, .06); }
.blog-single-title { font-size: 32px; line-height: 1.25; color: #181a20; margin-bottom: 10px; }
.blog-single-meta { color: #6b7280; font-size: 14px; }
.blog-single-meta .dot { margin: 0 8px; }
.blog-single-cover { border-radius: 10px; max-height: 460px; object-fit: cover; }
.blog-single-lead { font-size: 18px; color: #3f4451; line-height: 1.65; }
.blog-single-body { color: #3f4451; line-height: 1.75; }
.blog-single-body h3 { font-size: 21px; color: #181a20; margin: 28px 0 12px; }
.blog-single-body ul { padding-left: 20px; }
.blog-single-body li { margin-bottom: 8px; }
.blog_post_share a { color: #181a20; }
.blog_post_share a:hover { color: #eb6753; }
.blog-single-cta { background: #f7f7f7; border-radius: 10px; padding: 26px; }
@media (max-width: 575px) {
  .blog-single { padding: 20px; }
  .blog-single-title { font-size: 25px; }
}

/* =========================================================================
   Mortgage calculator. The inputs and Calculate button were React state with
   no output element at all — js/mortgage.js computes, and this styles the
   result panel and the amortization table it appends.
   ========================================================================= */
/* Bootstrap's .col-* sets `display: block`, which outranks the [hidden] UA rule. */
.mc-result[hidden], .mc-table-wrap[hidden] { display: none !important; }
.mc-stat { background: #f7f7f7; border-radius: 10px; padding: 14px 16px; height: 100%; }
.mc-stat-label { display: block; font-size: 13px; color: #6b7280; }
.mc-stat-value { font-size: 20px; color: #181a20; }
.mc-note { font-size: 13px; color: #6b7280; }
.mc-toggle {
  border: 1px solid #e6e8ec; background: #fff; border-radius: 8px;
  padding: 9px 16px; font-size: 14px; color: #181a20; cursor: pointer;
}
.mc-toggle:hover { border-color: #eb6753; color: #eb6753; }
.mc-table-wrap { max-height: 340px; overflow: auto; border: 1px solid #eef0f3; border-radius: 8px; }
.mc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mc-table th, .mc-table td { padding: 9px 12px; text-align: right; white-space: nowrap; }
.mc-table th:first-child, .mc-table td:first-child { text-align: left; }
.mc-table thead th { position: sticky; top: 0; background: #f7f7f7; color: #181a20; font-weight: 600; }
.mc-table tbody tr:nth-child(even) { background: #fafbfc; }
.mc-error { color: #c0392b; font-size: 14px; }

/* =========================================================================
   Hero photograph (#hero-1).

   This section used to play appomark/appomark_default_background_video_1.mp4,
   a SHARED Appomark asset that is 382 MB. Even with the muted+poster fix this
   bundle applied, a visitor could pull 382 MB for a decorative background. It
   is a photograph now — palm trees and the downtown skyline at sunset (Venti
   Views, Unsplash License, free for commercial use, no attribution required) —
   at 1760px / 960px, 368 KB and 108 KB. The shared video was deleted from S3
   once this was the last site referencing it.

   The video had NO scrim behind the white hero text, which was survivable over
   a dark clip but not over a bright sky, so one is added here.
   ========================================================================= */
.jr-hero-photo {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* the skyline sits left-of-centre on the horizon; keep it in frame when a
     tall viewport crops the picture */
  object-position: center 55%;
  z-index: 0;
}
#hero-1::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
              rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, .30) 100%);
}
#hero-1 .hero-title,
#hero-1 .hero-sub-title,
#hero-1 .hero-text { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }