#mbh-logo { height: 48px; width: auto; }
.navbar .dropdown-menu { width: max-content; min-width: 14rem; }
.navbar .nav-link.active { font-weight: 600; }

/* Bigger logo on the top row */
#mbh-logo-lg { height: 54px; width: auto; display: block; }
@media (min-width: 992px) { #mbh-logo-lg { height: 68px; } }

/* Center main navigation on desktop */
@media (min-width: 992px) { /* lg breakpoint */
  .navbar-nav {
    margin: 0 auto;              /* centers the nav block horizontally */
  }
}

/* Nav spacing/appearance */
.navbar {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-nav .nav-link { padding-left: .75rem; padding-right: .75rem; }

/* Desktop-only (lg+) “pop-out segmented” nav bar */
@media (min-width: 992px) {
  #mbh-mainnav .navbar-collapse {
    display: flex !important;
  }

  /* The UL becomes a centered, rounded “bar” */
  #mbh-mainnav .navbar-nav {
    margin: 0 auto;                 /* centers the bar */
    background: linear-gradient(#4b4b4b, #3a3a3a); /* subtle dark gradient */
    border-radius: .6rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06);
    padding: 0;                     /* keep it tight */
  }

  /* Each item looks like a segment */
  #mbh-mainnav .nav-item .nav-link {
    color: #fff !important;
    padding: .6rem 1.1rem;
    line-height: 1.2;
    white-space: nowrap;
    background: transparent;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
  }

  /* separators between segments */
  #mbh-mainnav .nav-item + .nav-item .nav-link {
    border-left: 1px solid rgba(255,255,255,.15);
  }

  /* hover/active states */
  #mbh-mainnav .nav-item .nav-link:hover,
  #mbh-mainnav .nav-item .nav-link:focus {
    background: rgba(255,255,255,.08);
    color: #fff !important;
  }
  #mbh-mainnav .nav-link.active {
    background: rgba(255,255,255,.16);
    font-weight: 600;
  }

  /* First/last segments: subtle rounding (extra safety even with overflow:hidden) */
  #mbh-mainnav .nav-item:first-child .nav-link { border-top-left-radius: .6rem; border-bottom-left-radius: .6rem; }
  #mbh-mainnav .nav-item:last-child  .nav-link { border-top-right-radius: .6rem; border-bottom-right-radius: .6rem; }

  /* Dropdown toggles: keep chevron visible on dark bar */
  #mbh-mainnav .dropdown-toggle::after {
    filter: brightness(2); /* lightens caret on dark bg */
  }

  /* Dropdown menu: keep it light for contrast with dark bar */
  #mbh-mainnav .dropdown-menu {
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  }
  #mbh-mainnav .dropdown-item:hover,
  #mbh-mainnav .dropdown-item:focus {
    background-color: rgba(13,110,253,.08); /* bs-primary tint */
  }
}

/* Hide Featured Properties section on phones */
@media (max-width: 575.98px) {
  #featured_listings_section,
  #featured_listings {
    display: none !important;
  }
}

/* Optional: tighten vertical spacing of the navbar row */
#mbh-mainnav.navbar { padding-top: .35rem; padding-bottom: .35rem; }
#mbh-mainnav .nav-link { color: #fff !important; }
#mbh-mainnav .nav-link:hover { background-color: rgba(255,255,255,.15); }

#header-facebook .bi { vertical-align: -0.125em; }

main.container {
  background: #fff;
  box-shadow: 0 0 1rem rgba(0,0,0,.05);
  border-radius: .5rem;
}

/* Overlay behavior: stacked on mobile, overlays on desktop */
#home-hero .team-overlay { position: static; margin-top: .5rem; }
@media (min-width: 992px) {
  /* Keep the photo full height and overlay panel on top */
  #home-hero {
    position: relative; /* ensures overlay can position absolutely */
  }

  #home-hero .team-overlay {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: .5rem;
    z-index: 2; /* stay above the image */
  }

  /* Reduce overlay height (the blue glass panel) */
  #home-hero .glass-panel {
    padding: .3rem 1rem !important; /* tighter padding */
    background: rgba(0,123,167,0.42); /* bluish glass tint */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
  }

  /* Smaller text and avatars */
  #home-hero .glass-panel h2 {
    font-size: 1rem;
    margin-bottom: .5rem !important;
  }

  /* Tighter spacing between agents */
  #home-hero .team-overlay .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: .5rem;
  }

  /* Slightly smaller name labels */
  #home-hero .team-overlay .small {
    font-size: .875rem;
  }
}

/* Hide Our Team overlay only on phones */
@media (max-width: 575.98px) {
  #home-hero .team-overlay {
    display: none !important;
  }
}

/* Consistent small avatar size on tablet+ (phones are hidden) */
@media (min-width: 576px){
  #home-hero .agent-thumb{ max-width: 72px !important; }
}

/* Glass panel look for readability over photo */
.glass-panel {
  /* semi-transparent Bermuda blue glass look */
  background: rgba(0, 123, 167, 0.45);           /* bluish tint */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
}

/* Improve text contrast inside the glass panel */
.glass-panel .text-white { text-shadow: 0 1px 1px rgba(0,0,0,.4); }


/* Featured Properties grid */
#featured_listings {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  overflow: visible; /* override any old 'scrollable' behavior */
}
@media (min-width: 576px) { #featured_listings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { #featured_listings { grid-template-columns: repeat(3, 1fr); } }

#featured_listings > li {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .5rem;
  padding: .75rem;
  display: grid;
  grid-template-columns: 110px auto;
  gap: .75rem;
  align-items: start;
}

#featured_listings .thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .5rem;
}

#featured_listings p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.35;
}

#featured_listings .ltype a {
  text-decoration: none;
  font-weight: 600;
}

#featured_listings .lprice {
  display: inline-block;
  margin-top: .25rem;
  font-weight: 700;
}

/* Make any listing images fluid if not already */
#featured_listings img.rounded { width: 100%; height: auto; }

/* Keep card images nicely cropped */
.object-fit-cover { object-fit: cover; }

/* Optional: round overlay_sign badge, if its markup allows */
#featured_listings_section .position-absolute > * {
  border-radius: .375rem;
}
/* Ensure clear space between the title and the pill buttons */
header h1.h3 { margin-bottom: 2rem !important; }
/* Make pill nav look a touch more “buttony” without fighting BS */
header .nav-pills .nav-link {
  border-radius: 999px;
}
header .nav-pills .nav-link.active {
  box-shadow: 0 .25rem .5rem rgba(0,0,0,.08);
}

/* Page title (e.g. "Professional Services / Marketing") */
header h1.h3 {
  margin-top: .25rem;
  margin-bottom: 2rem !important;   /* stronger separation (≈48px) */
  padding-top: .25rem;
  color: #007fa3;
  font-weight: 600;
  letter-spacing: -0.3px;
}

/* Subtext (e.g. “Marketing”) */
header h1.h3 .text-secondary {
  color: #495057 !important;
  font-weight: 400;
}

/* Space between sections inside columns */
main h2.h5 { margin-top: .25rem; }

/* Reusable Bermuda-blue callout box */
.callout-box {
  background: rgba(0, 158, 203, 0.10);     /* slightly stronger tint */
  border: 1px solid rgba(0, 158, 203, 0.25);
  border-left: 5px solid #009ecb;          /* brand accent stripe */
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: box-shadow .2s ease, background-color .2s ease;
}

/* On hover, give a gentle lift */
.callout-box:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  background: rgba(0, 158, 203, 0.12);
}

/* Optional variants */
.callout-box.info   { border-left-color: #009ecb; }
.callout-box.success{ border-left-color: #28a745; background: rgba(40,167,69,0.08); border: 1px solid rgba(40,167,69,0.25); }
.callout-box.warning{ border-left-color: #ffc107; background: rgba(255,193,7,0.10); border: 1px solid rgba(255,193,7,0.25); }
.callout-box.danger { border-left-color: #dc3545; background: rgba(220,53,69,0.10); border: 1px solid rgba(220,53,69,0.25); }

/* Unified intro band for Resources + Professional Services */
.intro-band {
  background: linear-gradient(135deg, rgba(0,158,203,0.10), rgba(0,184,169,0.10));
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 -2px 6px rgba(0,0,0,0.08) inset;
}

.intro-band .kicker {
  letter-spacing: .08em;
  color: rgba(0,0,0,0.55);
}

/* Title underline and spacing */
.intro-band h1 {
  position: relative;
  padding-bottom: .4rem;
  color: #005f73; /* Bermuda deep teal-blue */
  font-weight: 600;
}

/* Listing header: force title + price to share exactly the same spacing */
.intro-band h1.listing-headline {
  padding-bottom: 0 !important;   /* remove the extra space under “Lullaby” */
}

/* Phone-only: smaller title + price in listing header */
@media (max-width: 575.98px) {
  .intro-band .listing-headline {
    font-size: 1.15rem !important;   /* tweak this up/down to taste */
    line-height: 1.25 !important;
  }
}

/* Pills margin (only for Professional Services) */
.intro-band .nav-pills {
  margin-top: .75rem;
}

/* --- Testimonials (modernized Bootstrap 5 version) --- */
.testimonial {
  background: #fff;
  border: 1px solid #e4e6eb;
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  position: relative;
}
.shadow01 { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.shadow03 { box-shadow: 0 2px 4px rgba(0,0,0,.12); }

.testimonial p { margin-bottom: .75rem; line-height: 1.6; }
.testimonial .r { text-align: right; color: #666; }
.testimonial strong {
  font-weight: 600;
}


/* --- Tabs refinement --- */
#listingTabs {
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 0;
}

#listingTabs .nav-link {
  color: #495057;
  border: 1px solid transparent;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  background-color: #f8f9fa;
  margin-right: 2px;
  padding: 0.6rem 1rem;
  transition: all 0.2s ease-in-out;
}

#listingTabs .nav-link:hover {
  background-color: #e9ecef;
  border-color: #dee2e6 #dee2e6 #fff;
}

#listingTabs .nav-link.active {
  color: #0d6efd;
  background-color: #fff;
  border-color: #dee2e6 #dee2e6 #fff;
  font-weight: 600;
}

/* --- Tab content container --- */
#listingTabsContent {
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0 0 0.4rem 0.4rem;
  background: #fff;
  padding: 1.25rem;
}

form .form-check-label {
  font-weight: 500;
}
form textarea {
  resize: vertical;
}

/* Enhanced intro box — soft Bermuda-blue tint */
.intro-box {
  background: linear-gradient(180deg, rgba(0,158,203,0.06), rgba(0,184,169,0.05)); /* faint blue-teal gradient */
  border: 1px solid rgba(0,158,203,0.25);
  border-left: 5px solid #009ecb; /* brand accent stripe */
  border-radius: 0.5rem;
  box-shadow: 0 3px 12px rgba(0,0,0,0.06);
  padding: 1.75rem 2rem;
  transition: box-shadow .2s ease, background-color .2s ease;
}

.intro-box:hover {
  box-shadow: 0 5px 16px rgba(0,0,0,0.08);
  background: linear-gradient(180deg, rgba(0,158,203,0.08), rgba(0,184,169,0.07));
}

.intro-box p:last-child {
  margin-bottom: 0;
}

.alert ul {
  padding-left: 1.25rem;
  margin-bottom: 0;
}
.alert li {
  margin-bottom: .25rem;
}

/* MBH brand button style — flat turquoise blue */
.btn-mbh {
  background-color: #33b5d5;       /* light Bermuda cyan */
  border: 1px solid #2fa8c6;
  color: #fff;
  font-weight: 500;
  border-radius: 0.35rem;
  padding: 0.45rem 1.25rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.15s ease-in-out;
}

.btn-mbh:hover,
.btn-mbh:focus {
  background-color: #29a1c0;       /* slightly darker on hover */
  border-color: #2697b4;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  color: #fff;
}

.btn-mbh:active {
  background-color: #1e8aa8;
  border-color: #1b7e9a;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
}

/* Mobile-only intro section */
#mobile-intro {
  background: linear-gradient(180deg, rgba(0,158,203,0.05), rgba(0,184,169,0.05));
  border-top: 1px solid rgba(0,0,0,0.06);
  font-size: .95rem;
  color: #333;
}

/* Outline button version of your brand button */
.btn-outline-mbh {
  color: #009ecb;
  border: 1px solid #009ecb;
  background: #fff;
  border-radius: 0.35rem;
  padding: 0.45rem 1.25rem;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
}
.btn-outline-mbh:hover,
.btn-outline-mbh:focus {
  background: #009ecb;
  color: #fff;
}



#search_map { min-height: 520px; height: 520px; width: 100%; }
@media (max-width: 575.98px) { #search_map { height: 420px; } }

/* Segmented view switch (List / Map / Refine) */
.view-switch {
  display: inline-flex;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .6rem;
  padding: .25rem;
}

.view-switch .vs-link {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: .45rem;
  text-decoration: none;
  color: #495057;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.view-switch .vs-link:hover {
  background: #f1f3f5;
  color: #212529;
}

.view-switch .vs-link.active {
  background: #0d6efd;
  color: #fff;
  box-shadow: 0 .25rem .5rem rgba(13,110,253,.15);
}

.map-legend{
  background:#f8f9fa;
  border:1px solid #e9ecef;
  border-radius:.5rem;
  padding:.75rem 1rem;
}
.map-legend h6{
  color:#28a745;           /* green title like your screenshot */
  margin:0 0 .25rem;
  font-weight:600;
}
.legend-grid{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns: 1fr 1fr; /* two columns */
  gap:.35rem 1.25rem;
}
.legend-grid li{
  display:flex; align-items:center;
  font-size:.95rem; color:#495057;
  white-space:nowrap;
}
.legend-dot{
  width:.6rem; height:.6rem; border-radius:50%;
  display:inline-block; margin-right:.5rem;
  box-shadow:0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.12);
}
@media (max-width:575.98px){
  .legend-grid{ grid-template-columns:1fr; } /* stack on mobile */
}

.map-legend-inline {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: .5rem;
  padding: .5rem .75rem;
  font-size: .95rem;
  color: #495057;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.legend-title {
  color: #28a745;
  font-weight: 600;
  margin-right: .25rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.legend-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: .35rem;
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.15);
}

/* keep the right column tidy */
.spr-meta .text-primary { font-size: 1.1rem; }
.spr-meta .small { font-size: .9rem; }

/* --- Search card --- */
.search-panel{
  background:#fff;border:1px solid #dee2e6;border-radius:.5rem;
  padding:1.25rem 1.5rem;box-shadow:0 2px 10px rgba(0,0,0,.05)
}
.search-panel hr{opacity:.25;margin:1.25rem 0}

/* Section rows the PHP emits (uses old .form-group + grid cols) */
.search-panel #search_choice .form-group>.col-md-3,
.search-panel #search_choice .form-group>.col-sm-3{
  padding-top:.45rem;padding-bottom:.45rem;
  color:#495057;font-weight:600
}
.search-panel #search_choice .form-group>.col-md-9,
.search-panel #search_choice .form-group>.col-sm-9{
  padding-top:.35rem;padding-bottom:.35rem
}

/* The nested .form-group that holds all the checkboxes/radios */
.search-panel #search_choice .form-group .form-group{
  display:flex;flex-wrap:wrap;gap:.35rem .75rem
}

/* Make the two-up columns breathe */
.search-panel #search_choice .col-md-6,
.search-panel #search_choice .col-sm-6{margin:.15rem 0}

/* Modernize checkbox/radio labels */
.search-panel #search_choice .checkbox label,
.search-panel #search_choice .radio label{
  display:flex;align-items:center;gap:.45rem;
  font-weight:500;margin:0;cursor:pointer
}
.search-panel #search_choice input[type="checkbox"],
.search-panel #search_choice input[type="radio"]{transform:translateY(1px)}

/* “Available To”, “Type”, “Location”, etc. use <big> */
.search-panel #search_choice big{
  font-size:1.05rem;font-weight:700;color:#2d6577 /* brandy teal */;
}

/* jQuery UI sliders */
.search-panel #search_choice .sp_range_wrapper{padding-right:.25rem}
.search-panel #search_choice .ui-slider{
  height:.5rem;background:#e9ecef;border:0;border-radius:999px;margin:.6rem 0 .25rem
}
.search-panel #search_choice .ui-slider .ui-slider-range{
  background:#0d6efd;border:0;border-radius:999px
}
.search-panel #search_choice .ui-slider .ui-slider-handle{
  top:-.35rem!important;width:1.1rem;height:1.1rem;border-radius:50%;
  background:#fff;border:2px solid #0d6efd;box-shadow:0 2px 6px rgba(13,110,253,.35);
  cursor:grab
}
.search-panel #search_choice .ui-slider .ui-slider-handle:active{cursor:grabbing}

/* The “0 - 10” / price text under sliders */
.search-panel #search_choice .sp_range_info{
  margin-top:.25rem;color:#495057;font-weight:600
}
.search-panel #search_choice .sp_range_info .currency{font-variant-numeric:tabular-nums}

/* Submit button to match the nice teal/green style */
.btn-brand{
  background:#28a745;border-color:#28a745;color:#fff;
  padding:.5rem 1.1rem;border-radius:.4rem;font-weight:600
}
.btn-brand:hover,.btn-brand:focus{background:#218838;border-color:#218838;color:#fff}

/* tighten the grid rows inside the search panel */
.search-panel #search_choice .row.g-2 > [class*="col-"] {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

/* make each checkbox label align nicely */
.search-panel #search_choice label.checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-weight: 400;
}

/* keep the inputs aligned with text */
.search-panel #search_choice input[type="checkbox"],
.search-panel #search_choice input[type="radio"] {
  margin: 0;
}

/* give sections some breathing room */
.search-panel #search_choice hr {
  margin: 1.25rem 0;
}

/* Space between checkbox/radio and its label text */
label.checkbox,
label.radio {
  display: inline-flex;       /* keeps input + text on one line */
  align-items: center;
  line-height: 1.4;
  gap: .5rem;                 /* modern browsers */
}

/* Fallback for older browsers that ignore gap on inline-flex */
label.checkbox > input,
label.radio > input {
  margin-right: .5rem;
  position: relative;         /* tiny vertical nudge if needed */
  top: -1px;
}


/* If not already defined somewhere */
.hidden { display: none !important; }

/* Optional: tighten modal header and footer slightly */
.modal-header, .modal-footer { padding-top: .75rem; padding-bottom: .75rem; }

/* Keep link contrast on top of the dark ribbon AND on mobile */
#mbh-mainnav.mbhNav .nav-link { color: #fff !important; }
#mbh-mainnav.mbhNav .nav-link:hover,
#mbh-mainnav.mbhNav .nav-link:focus { background-color: rgba(255,255,255,.12); color:#fff !important; }
#mbh-mainnav.mbhNav .nav-link.active { background-color: rgba(255,255,255,.18); color:#fff !important; }

/* Keep dropdown caret visible */
#mbh-mainnav.mbhNav .dropdown-toggle::after { filter: brightness(2); }

/* Map modal sizing */
#modal-map .modal-dialog {
  max-width: 800px;  /* tweak as you like */
}

/* Map height (single source of truth) */
#modal-map #map-canvas {
  width: 100%;
  height: 250px;     /* desktop ~30% less than before */
}

@media (max-width: 991.98px){   /* tablets */
  #modal-map #map-canvas { height: 280px; }
}

@media (max-width: 575.98px){   /* phones */
  #modal-map #map-canvas { height: 220px; }
}

/* ---- Map modal: force compact height on desktop ---- */
#modal-map .modal-dialog { max-width: 800px; }

@media (min-width: 992px){
  #modal-map .modal-body { padding: 0; overflow: hidden; }
  #modal-map .modal-body #map-canvas {
    width: 100%;
    height: 580px !important;   /* was 250px; force smaller and override any vh */
  }
}

/* Tablets */
@media (min-width: 576px) and (max-width: 991.98px){
  #modal-map .modal-body #map-canvas { height: 580px !important; }
}

/* Phones */
@media (max-width: 575.98px){
  #modal-map .modal-body #map-canvas { height: 700px !important; }
}

/* Wrapper that paints the animated aqua gradient behind BOTH rows */
#mbh-header {
  position: relative;
  overflow: visible; /* allow dropdowns to extend */
}
#mbh-header::before {
  content: "";
  position: absolute;
  inset: 0;              /* cover header-top + navbar */
  z-index: 0;
  background-image: linear-gradient(90deg, #009ecb, #00b8a9, #2cc7e2, #0aa1bf, #26d0ce);
  background-size: 400% 400%;
  animation: mbhNavGradient 16s ease-in-out infinite;
  pointer-events: none;  /* never block clicks */
}

/* Put both rows above the gradient layer and make them transparent */
#header-top,
#mbh-mainnav {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border-color: rgba(0,0,0,0.1);
}

/* Keep desktop dropdowns above the gradient */
@media (min-width: 992px){
  #mbh-mainnav .dropdown-menu{ z-index: 1100; margin-top: .35rem; }
}

/* Make links/icons readable on the aqua band */
#mbh-mainnav .nav-link { color: #fff !important; }
#header-facebook .bi { color: #fff; }                 /* white icon on gradient */
#header-facebook:hover .bi { opacity: .85; }

/* Existing animation keyframes (reuse if already declared) */
@keyframes mbhNavGradient {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Kill Bootstrap utility border on the logo row */
#mbh-header #header-top.border-bottom {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important; /* or rgba(0,0,0,0.08) */
}

/* Just in case, make sure the nav has no top border either */
#mbh-header #mbh-mainnav { border-top: 0 !important; }

#mbh-logo-lg {
  filter: brightness(0) invert(1) grayscale(1);
}

/* Phones: center the logo row; hide FB in logo row; show FB in navbar */
@media (max-width: 991.98px) {
  /* Logo row: center contents */
  #header-top .container {
    justify-content: center !important;
  }

  /* Hide the FB icon in the logo row on phones */
  #header-top #header-facebook {
    display: none !important;
  }

  #mbh-mainnav .navbar-toggler {
    padding: .15rem .35rem;      /* smaller tap area */
    border: none !important;     /* remove border frame */
    background: transparent !important;
    box-shadow: none !important;
  }

  #mbh-mainnav .navbar-toggler:focus {
    box-shadow: none !important;
  }
  
  /* Tighter hamburger icon lines */
  #mbh-mainnav .navbar-toggler-icon {
    width: 1.3rem;
    height: 1.3rem;
    background-size: 1.3rem 1.3rem;
  
    /* override Bootstrap's default SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  /* The mobile-only FB link we added should sit on the far right */
  #header-facebook-mobile {
    display: inline-flex;
    align-items: center;
  }
}

/* Optional: make the burger more visible on the gradient */
.navbar-dark .navbar-toggler {
  border-color: rgba(255,255,255,.4);
}
.navbar-dark .navbar-toggler:focus {
  box-shadow: 0 0 0 0.15rem rgba(255,255,255,.25);
}

@media (max-width: 991.98px){
  #mbh-mainnav .nav-link { font-weight: 500; }
}

@media (max-width: 991.98px) {
  #mbhNav > ul:not(.d-lg-none) {
    display: none !important;
  }
}

/* Search results – mobile card layout */
@media (max-width: 767.98px) {
  .listing-result.card {
    border: 0;
    border-radius: 0;
    margin-bottom: 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  }

  .listing-result .card-body {
    padding: 0.75rem 0.75rem 0.75rem;
  }

  /* Make any thumbnails scale nicely */
  .listing-result img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Tighten spacing a bit (mobile only) */
  .listing-result h2,
  .listing-result h3,
  .listing-result h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }
}

/* Parish same colour as address (all viewports) */
.listing-result .parish-line {
  color: #000 !important;
}

/* PHONE ONLY: typography + alignment for listingbrowse cards */
@media (max-width: 575.98px) {

  /* Title: small, bold, black */
  .listing-result h3.h5,
  .listing-result h3.h5 a {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin-bottom: 0 !important;
    line-height: 1.2;
  }

  /* Price: same size, bold, black */
  .listing-result .text-primary {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.2;
  }

  /* Address / parish / type / facts – same base size, no gaps */
  .listing-result .address-line,
  .listing-result .parish-line,
  .listing-result .prop-type-line,
  .listing-result .prop-facts-line {
    font-size: 0.875rem !important;
    margin: 0;
    line-height: 1.2;
  }
}

/* Search results header – phone tweaks */
@media (max-width: 575.98px) {

  /* Hide "PROPERTY SEARCH" on phone */
  .search-intro .kicker {
    display: none !important;
  }

  /* Tighten the header vertically */
  .search-intro .container {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Main title: small, bold, BLACK */
  .search-intro .search-headline {
    font-size: 1rem !important;  /* matches address/type font */
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #000 !important;          /* <-- black ONLY on phone */
  }

  /* The "3 listings" part stays normal weight but black */
  .search-intro .search-headline .desc {
    color: #000 !important;
    font-weight: 400 !important;
  }
}