/* =========================================================
   Scout Homes — site-wide redesign stylesheet
   Loaded on index.php and the insights pages. Bootstrap 5 handles
   grid/utilities; everything below is bespoke to the visual system.
   ========================================================= */

:root{
  --sh-red:#C62828;
  --sh-red-dark:#c2152f;
  --sh-red-soft:#fdeceb;
  --sh-orange:#f0801f;
  --sh-gold:#C9A227;
  --sh-cream:#fbf6ef;
  --sh-cream-2:#f6ede1;
  --sh-ink:#1c1b1a;
  --sh-muted:#767370;
  --sh-border:#ece5da;
  --sh-radius-lg:26px;
  --sh-radius-md:18px;
  --sh-radius-sm:12px;
  --sh-shadow:0 10px 30px rgba(28,27,26,.06);
  --sh-shadow-lg:0 20px 45px rgba(28,27,26,.10);
}

body.sh-page{
  background:#FFFFFF  ;
  color:var(--sh-ink);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.sh-page h1,.sh-page h2,.sh-page h3,.sh-page h4,.sh-page h5,.sh-page h6{
  color:var(--sh-ink);
  letter-spacing:-.01em;
}

.sh-page a{ text-decoration:none; }

/* ---------- Reusable bits ---------- */
.sh-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--sh-red);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.sh-section{ padding:64px 0; }
.sh-section-head{ margin-bottom:36px; }
.sh-section-title{ font-weight:600; font-size:clamp(1.5rem,2.4vw,2.1rem); }
.sh-section-sub{ color:var(--sh-muted); max-width:640px; margin:10px auto 0; }

.sh-btn-red{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--sh-red);
  color:#fff;
  border:none;
  border-radius:100px;
  padding:12px 30px;
  font-weight:600;
  box-shadow:0 10px 24px rgba(227,28,61,.28);
  transition:.2s ease;
}
.sh-btn-red:hover{ background:var(--sh-red-dark); color:#fff; transform:translateY(-1px); }

.sh-link-arrow{
  color:var(--sh-red);
  font-weight:600;
  font-size:.92rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.sh-link-arrow i{ transition:transform .2s ease; }
.sh-link-arrow:hover i{ transform:translateX(3px); }
.sh-link-arrow:hover{ color:var(--sh-red-dark); }

.sh-loadmore-wrap{ text-align:center; margin-top:34px; }
.sh-loadmore{
  border:none;
  background:var(--sh-red);
  color:#fff;
  font-weight:600;
  padding:12px 38px;
  border-radius:100px;
  box-shadow:0 10px 24px rgba(227,28,61,.25);
  transition:.2s ease;
}
.sh-loadmore:hover{ background:var(--sh-red-dark); }
.sh-loadmore.sh-hide{ display:none; }

/* =========================================================
   HEADER
   ========================================================= */
.sh-topbar{
  background:#fff;
  padding:16px 0; position:relative;z-index:10;
}
.sh-logo{
  display:inline-flex;
  align-items:center;
  gap:10px; 
}
.sh-logo img{
width:200px;
}
.sh-logo-mark{
  width:38px;height:38px;
  border-radius:10px;
  background:var(--sh-red);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  flex:none;
}
.sh-logo span{ color:var(--sh-orange); }

.sh-topbar-actions .btn{
  border-radius:100px;
  padding:9px 24px;
  font-weight:600;
  font-size:.92rem;
  white-space:nowrap;
}
@media (max-width:420px){
  .sh-topbar-actions .btn{ padding:8px 14px; font-size:.82rem; }
}
.sh-btn-outline-red{
  border:1.5px solid var(--sh-red);
  color:var(--sh-red);
  background:#fff;
}
.sh-btn-outline-red:hover{ background:var(--sh-red-soft); color:var(--sh-red-dark); }

.sh-subnav-wrap{ margin-top:24px; }
.sh-subnav{
  background:#fff;
  border:1px solid var(--sh-border);
  border-radius:18px;
  box-shadow:var(--sh-shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
  padding:14px 28px;
  list-style:none;
  margin:0;
}
.sh-subnav li{ margin:0; }
.sh-subnav a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:100px;
  color:var(--sh-ink);
  font-weight:600;
  font-size:.9rem;
  transition:.2s ease;
}
.sh-subnav a i{ color:var(--sh-orange); }
.sh-subnav a:hover, .sh-subnav a.active{ background:var(--sh-red-soft); color:var(--sh-red-dark); }

/* =========================================================
   HERO
   ========================================================= */
.sh-hero{  } 
 
.sh-hero-title{
  font-weight:700;
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1.12;
  margin-bottom:16px;
}
.sh-hero-title .sh-red-text{ color:var(--sh-red); }
.sh-hero-lead{ font-weight:700; margin-bottom:6px; }
.sh-hero-sub{ color:var(--sh-muted); margin-bottom: 28px; }
 
 
.sh-search-shell{
  margin-top:-30px;
  background:#fff;
  border-radius:10px;
  box-shadow:var(--sh-shadow-lg);
  padding:6px; position:relative; z-index:5;
}
/* Layout-only wrapper adjustments — filter widget internals untouched */
.sh-search-shell .search-wrapper{ margin:0; padding:0; }
.sh-search-shell .search-bar{ box-shadow:none; }
.sh-search-shell .search-item:not(.location) i.red{ color:var(--sh-ink); }

.sh-cities{
  margin-top:22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:.88rem;
}
.sh-cities-label{ color:var(--sh-ink); font-weight:700; margin-right:4px; }
.sh-cities a{ color:var(--sh-muted); font-weight:600; }
.sh-cities a.active{ color:var(--sh-orange); }
.sh-cities a:hover{ color:var(--sh-red); }
.sh-cities .dot{ color:var(--sh-gold); }

/* =========================================================
   ICON SERVICE CARDS ("Make your move hassle free with us")
   ========================================================= */
.sh-icard{
  background:#fff;
  border-radius:var(--sh-radius-md);
  box-shadow:var(--sh-shadow);
  padding:30px 26px;
  height:100%;
  transition:.2s ease;
}
.sh-icard:hover{ transform:translateY(-4px); box-shadow:var(--sh-shadow-lg); }
.sh-icard-icon{
  color:var(--sh-orange);
  font-size:2.4rem;
  line-height:1;
  margin-bottom:16px;
}
.sh-icard h5{ font-weight:700; margin-bottom:8px; }
.sh-icard p{ color:var(--sh-muted); font-size:.92rem; margin-bottom:16px; }

/* =========================================================
   THREE COLUMN FEATURE BLOCK
   ========================================================= */
.sh-feature-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  margin-bottom:18px;
}
.sh-feature-head i{
  color:var(--sh-orange);
  font-size:1.2rem;
}

.sh-mini-props{ display:flex; gap:14px; }
.sh-mini-card{
  flex:1;
  background:#fff;
  border-radius:var(--sh-radius-sm);
  box-shadow:var(--sh-shadow);
  overflow:hidden;
}
.sh-mini-card img{ width:100%; height:110px; object-fit:cover; display:block; }
.sh-mini-card .body{ padding:12px 14px; }
.sh-mini-card .price{ font-weight:800; }
.sh-mini-card .meta{ color:var(--sh-muted); font-size:.78rem; display:flex; gap:10px; flex-wrap:wrap; margin:4px 0; }
.sh-mini-card .loc{ color:var(--sh-muted); font-size:.78rem; }

.sh-feature-photo{
  border-radius:var(--sh-radius-md);
  overflow:hidden;
  box-shadow:var(--sh-shadow);
  margin-bottom:18px;
}
.sh-feature-photo img{ width:100%; height:170px; object-fit:cover; display:block; }

.sh-feature-card{
  background:#fff;
  border-radius:var(--sh-radius-md);
  box-shadow:var(--sh-shadow);
  padding:20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.sh-feature-card .badge-ico{
  width:38px;height:38px;flex:none;
  border-radius:10px;
  background:var(--sh-gold);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.sh-feature-card h6{ font-weight:700; margin-bottom:4px; }
.sh-feature-card p{ color:var(--sh-muted); font-size:.86rem; margin-bottom:8px; }

.sh-gift-visual{
  border-radius:var(--sh-radius-md);
  background:linear-gradient(135deg,#2b2b2b,#111);
  box-shadow:var(--sh-shadow);
  height:170px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:#fff;
}
.sh-gift-visual i{ font-size:2.4rem; color:var(--sh-gold); }
.sh-gift-visual .gift-card{
  background:var(--sh-red);
  border-radius:10px;
  padding:10px 16px;
  font-weight:800;
  font-size:.85rem;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* =========================================================
   COMPARE SECTION ("Search and compare / Unbiased insights / Negotiation experts")
   ========================================================= */
.compare-section{ background:#fff; }

 

.compare-section .feature-title{
  display:flex;
  align-items:center;
  gap:10px;
}
.compare-section .feature-title h5{
  font-weight:700;
  font-size:1.02rem;
  margin:0;
  color:var(--sh-ink);
}
.compare-section .title-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  color:var(--sh-gold);
}
.compare-section .title-icon.red{ color:var(--sh-red); }

/* Mini property cards */
.compare-section .property-wrapper{
  display:flex;
  gap:14px;
}
.compare-section .property-card{
  flex:1;
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-sm);
  overflow:hidden;
}
.compare-section .property-card img{
  width:100%;
  height:110px;
  object-fit:cover;
  display:block;
}
.compare-section .property-body{ padding:14px; }
.compare-section .property-body h6{
  font-weight:600;
  color:var(--sh-muted);
  font-size:.78rem;
  margin-bottom:6px;
}
.compare-section .property-body ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:0;
  margin:0 0 8px;
}
.compare-section .property-body ul li{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  color:var(--sh-muted);
}
.compare-section .property-body ul li i{ color:var(--sh-orange); font-size:.8rem; }
.compare-section .property-body h4{
  font-weight:800;
  font-size:1.05rem;
  margin-bottom:6px;
}
.compare-section .property-body .location{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--sh-muted);
  font-size:.78rem;
}
.compare-section .property-body .location i{ color:var(--sh-red); }

/* Single feature photo (insights / negotiation columns) */
.compare-section .feature-image{
  border-radius:var(--sh-radius-md);
  overflow:hidden;
}
.compare-section .feature-image img{
  width:100%;
  height:233px;
  object-fit:cover;
  display:block;
}

/* Info callout row shared by all three columns */
.compare-section .feature-content{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.compare-section .circle-icon{
  width:42px;height:42px;flex:none;
  border-radius:50%;
  background:var(--sh-gold);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;
}
.compare-section .circle-icon.red{ background:var(--sh-red); }
.compare-section .feature-content h4{
  font-weight:700;
  font-size:1rem;
  margin-bottom:6px;
}
.compare-section .feature-content p{
  color:var(--sh-muted);
  font-size:.86rem;
  margin-bottom:8px;
}
.compare-section .feature-content a{
  color:var(--sh-red);
  font-weight:600;
  font-size:.9rem;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.compare-section .feature-content a:hover{ color:var(--sh-red-dark); }

@media (max-width:575px){
  .compare-section .property-wrapper{ flex-direction:column; }
}

/* =========================================================
   MORTGAGE BANNER
   ========================================================= */
.sh-mortgage{
  background:var(--sh-cream-2);
  border-radius:var(--sh-radius-lg);
  padding:48px;
  overflow:hidden;
}
.sh-mortgage h2{ font-weight:800; margin-bottom:14px; }
.sh-mortgage p{ color:#54514c; max-width:480px; margin-bottom:22px; }

.sh-rate-visual{
  position:relative;
  min-height:260px;
  border-radius:var(--sh-radius-md);
  background:linear-gradient(135deg, var(--sh-gold), var(--sh-red-dark));
  box-shadow:var(--sh-shadow-lg);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:24px;
}
.sh-rate-visual i.sh-rate-watermark{
  position:absolute;
  left:-30px; bottom:-40px;
  font-size:11rem;
  color:rgba(255,255,255,.14);
}
.sh-rate-card{
  position:relative;
  width:100%;
  max-width:260px;
  background:#fff;
  border-radius:var(--sh-radius-sm);
  box-shadow:var(--sh-shadow-lg);
  padding:18px 20px;
}
.sh-rate-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.sh-rate-row .label{ color:var(--sh-muted); font-size:.82rem; }
.sh-rate-row .value{ font-weight:800; font-size:1.05rem; }
.sh-rate-row .value.good{ color:#2fa84f; display:flex; align-items:center; gap:6px; }
.sh-rate-divider{ text-align:center; color:var(--sh-border); font-size:1.1rem; margin:2px 0; letter-spacing:2px; }

/* =========================================================
   PHOTO SERVICE CARDS ("Plan Your Move Hassle Free With")
   ========================================================= */
.sh-pcard{
  background:#fff;
  border-radius:var(--sh-radius-md);
  box-shadow:var(--sh-shadow);
  overflow:hidden;
  height:100%;
  transition:.2s ease;
}
.sh-pcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-shadow-lg); }
.sh-pcard img{ width:100%; height:150px; object-fit:cover; display:block; }
.sh-pcard img.sh-flip{ transform:scaleX(-1); }
.sh-pcard .body{ padding:20px; }
.sh-pcard h5{ font-weight:700; margin-bottom:8px; font-size:1rem; }
.sh-pcard p{ color:var(--sh-muted); font-size:.88rem; margin-bottom:14px; }

/* =========================================================
   FAQ
   ========================================================= */
.sh-faq-item{
  background:#fff;
  border-radius:var(--sh-radius-sm);
  box-shadow:var(--sh-shadow);
  margin-bottom:14px;
  overflow:hidden;
}
.sh-faq-question{
  width:100%;
  text-align:left;
  background:none;
  border:none;
  padding:20px 24px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sh-faq-question .sh-faq-icon{
  width:28px;height:28px;flex:none; font-size:18px;
  border-radius:50%; 
  color:#000000;
  display:flex;align-items:center;justify-content:center;
  transition:.2s ease;
}
.sh-faq-item.active .sh-faq-icon{ background:var(--sh-red); color:#fff; transform:rotate(45deg); }
.sh-faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  padding:0 24px;
}
.sh-faq-answer p{ color:var(--sh-muted); padding-bottom:20px; margin:0; }
.sh-faq-item.active .sh-faq-answer{ max-height:220px; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.sh-testi-section{ background:#fff; }

.sh-testi-row{ position:relative; }
.sh-testi-card{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-md);
  box-shadow:var(--sh-shadow);
  padding-bottom:26px;
  height:100%;
}
.sh-testi-card > p,
.sh-testi-card > a{ margin-left:26px; margin-right:26px; }

.sh-testi-avatar{ position:relative; margin-bottom:20px; }
.sh-testi-avatar img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}
.sh-testi-score{
  position:absolute;
  bottom:-16px; right:45%;
  background:var(--sh-gold);
  color:#fff;
  font-weight:800;
  font-size:.78rem;
  width:36px;height:36px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:3px solid #fff;
}
.sh-testi-card h6{ font-weight:700; margin-bottom:8px; }
.sh-testi-card p{ color:var(--sh-ink); font-size:.9rem; margin-bottom:12px; }

.sh-testi-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;height:42px;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--sh-shadow);
  border:none;
  display:flex;align-items:center;justify-content:center;
  color:var(--sh-ink);
  z-index:2;
}
.sh-testi-nav.prev{ left:-21px; }
.sh-testi-nav.next{ right:-21px; }
@media (max-width:991px){
  .sh-testi-nav{ display:none; }
}

.sh-testi-row .owl-dots{ display:flex !important; justify-content:center; gap:8px; margin-top:28px; }
.sh-testi-row .owl-dots .owl-dot span{
  display:block;
  width:9px;height:9px;border-radius:50%;
  background:var(--sh-border);
  margin:0;
  transition:.2s ease;
}
.sh-testi-row .owl-dots .owl-dot.active span{ background:var(--sh-red); width:22px; border-radius:6px; }

/* =========================================================
   LATEST INSIGHTS
   ========================================================= */
.sh-blog-card{
  background:#fff;
  border-radius:var(--sh-radius-md);
  box-shadow:var(--sh-shadow);
  overflow:hidden;
  height:100%;
  transition:.2s ease;
}
.sh-blog-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-shadow-lg); }
.sh-blog-card img{ width:100%; height:190px; object-fit:cover; display:block; }
.sh-blog-card .body{ padding:20px; }
.sh-blog-date{ color:var(--sh-muted); font-size:.78rem; margin-bottom:8px; display:block; }
.sh-blog-card h6{ font-weight:700; margin-bottom:12px; min-height:48px; }

/* =========================================================
   INSIGHTS — page header / breadcrumb
   ========================================================= */
.sh-page-header{
  background:var(--sh-ink);
  padding:44px 0;
}
.sh-breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--sh-muted);
  font-size:.85rem;
  margin-bottom:10px;
}
.sh-breadcrumb a{ color:var(--sh-gold); }
.sh-breadcrumb a:hover{ color:var(--sh-red); }
.sh-breadcrumb .current{ color:var(--sh-red); font-weight:600; }
.sh-page-header h1{ font-weight:600;color:var(--sh-gold); font-size:clamp(1.6rem,3vw,2.2rem); margin:0; }

/* =========================================================
   INSIGHTS — sidebar widgets
   ========================================================= */
.sh-sidebar-widget{
  background:#fff;
  border:1px solid var(--sh-border);
  border-radius:var(--sh-radius-md);
  box-shadow:var(--sh-shadow);
  padding:22px;
  margin-bottom:24px;
}
.sh-widget-title{
  font-weight:700;
  font-size:1rem;
  margin-bottom:16px;
}

.sh-widget-search{ display:flex; gap:8px; }
.sh-widget-search input{
  flex:1;
  border:1px solid var(--sh-border);
  border-radius:100px;
  padding:9px 16px;
  font-size:.88rem;
  outline:none;
}
.sh-widget-search input:focus{ border-color:var(--sh-red); }
.sh-widget-search button{
  width:40px;height:40px;flex:none;
  border:none;
  border-radius:50%;
  background:var(--sh-red);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
}

.sh-widget-categories{ list-style:none; margin:0; padding:0; }
.sh-widget-categories li{ border-bottom:1px solid var(--sh-border); }
.sh-widget-categories li:last-child{ border-bottom:none; }
.sh-widget-categories a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 2px;
  color:var(--sh-ink);
  font-size:.92rem;
  font-weight:500;
}
.sh-widget-categories a:hover{ color:var(--sh-red); }
.sh-widget-categories a i{ color:var(--sh-border); font-size:.8rem; }
.sh-widget-categories a.active{ color:var(--sh-red); font-weight:700; }

.sh-widget-recent{ list-style:none; margin:0; padding:0; }
.sh-widget-recent li{ display:flex; gap:12px; margin-bottom:16px; }
.sh-widget-recent li:last-child{ margin-bottom:0; }
.sh-widget-recent img{
  width:64px;height:56px;flex:none;
  object-fit:cover;
  border-radius:10px;
}
.sh-widget-recent .date{ color:var(--sh-muted); font-size:.72rem; display:block; margin-bottom:2px; }
.sh-widget-recent h6{ font-size:.85rem; font-weight:600; margin:0; line-height:1.3; }
.sh-widget-recent a:hover h6{ color:var(--sh-red); }

/* =========================================================
   INSIGHTS — listing grid (reuses .sh-blog-card)
   ========================================================= */
.sh-insights-grid .sh-blog-card{ margin-bottom:0; }
.sh-category-pill{
  display:inline-block;
  background:var(--sh-red);
  color:#FFFFFF;
  font-size:.72rem;
  font-weight:700;
  padding:4px 12px;
  border-radius:100px;
  margin-bottom:10px;
}

/* =========================================================
   INSIGHTS — article detail
   ========================================================= */
.sh-article-image{
  border-radius:var(--sh-radius-lg);
  overflow:hidden;
  box-shadow:var(--sh-shadow);
  margin-bottom:28px;
}
.sh-article-image img{ width:100%; height:360px; object-fit:cover; display:block; }
.sh-article-meta{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--sh-muted);
  font-size:.85rem;
  margin-bottom:14px;
}
.sh-article-body p{
  color:#3a3835;
  font-size:1.02rem;
  line-height:1.8;
  margin-bottom:22px;
}
.sh-article-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--sh-ink);
  font-weight:600;
  margin-bottom:24px;
}
.sh-article-back:hover{ color:var(--sh-red); }

@media (max-width:991px){
  .sh-article-image img{ height:240px; }
}

/* =========================================================
   FOOTER (see style.css .sh-footer rules — shared across site)
   ========================================================= */

@media (max-width:767px){
  .sh-mortgage{ padding:30px 22px; text-align:center; }
  .sh-mortgage p{ margin-left:auto; margin-right:auto; }
  .sh-rate-card{ margin:16px auto 0; }
  .sh-mini-props{ flex-direction:column; }
}