/* -------------------------------------------------
   Modern baseline (tokens, utilities, components)
   ------------------------------------------------- */

:root{
  /* Theme palette */
  --brandy: #d9b98d;
  --woodland: #4e4c23;
  --sepia-skin: #9d573d;
  --green-smoke: #a6b77f;
  --dingley: #758544;
  --heath: #591111;
  --rangoon-green: #11160f;
  --flush-mahogany: #c43e32;
  --lemon-grass: #9b9e98;
  --corduroy: #626862;

  /* Mapped tokens used throughout site */
  --earth-deep: var(--rangoon-green);   /* deep text */
  --earth-brown: var(--woodland);       /* dark accent */
  --earth-sage: var(--green-smoke);     /* soft green */
  --earth-tan: var(--brandy);           /* primary tan */
  --earth-beige: var(--brandy);         /* neutral surface tint */
  --earth-porcelain: #EFEFE9;           /* off-white base */

  /* surface + text */
  --bg: var(--earth-porcelain);
  --bg-elev: #ffffff;
  --text: var(--earth-deep);
  --muted: var(--corduroy);
  --border: #e0dbd1;

  /* brand accents */
  --primary: var(--earth-tan);
  --primary-600: #cdaa76; /* darker tan for hover */
  --primary-700: #b9966b;
  --accent: var(--dingley);
  --warn: var(--sepia-skin);
  --danger: var(--flush-mahogany);
  --neutral: var(--earth-beige);

  /* radius + shadows (viewport-scaled) */
  --r-sm: 1vw;
  --r-md: 1.4vw;
  --r-lg: 1.8vw;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.14);
}

/* Base Styles */
html {
    scroll-behavior: smooth;
    height: 100%;
}

html::-webkit-scrollbar {
width: 4px;
height: 4px;
}

html::-webkit-scrollbar-thumb {
    background-color: #cdaa76;
    border-radius: 6px;
}

html::-webkit-scrollbar-thumb:hover {
    background-color: #b9966b;
}
html::-webkit-scrollbar-track {
    background-color: #e0dbd1;
}
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
  height: 100%;
  /* Make pages use a sticky footer layout without overlapping content */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: fit-content;
}
h1,h2,h3,h4,h5,h6 { font-weight: 500; }
p { font-weight: 400; }

/* Utilities */
.container-wide { max-width: 92vw; margin: 0 auto; height: fit-content; }
/* Ensure generic containers grow with their content across all pages */
.container { height: auto; min-height: 0; }
.section { height: auto; }
.section { padding: 8vh 0; }
.section-tight { padding: 5vh 0; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.rounded-sm { border-radius: var(--r-sm) !important; }
.rounded-md { border-radius: var(--r-md) !important; }
.rounded-lg { border-radius: var(--r-lg) !important; }
.text-muted { color: var(--muted) !important; }

/* Links */
a { color: var(--primary); }
a:hover { color: var(--primary-700); text-decoration: none; }

/* Buttons */
.btn { border-radius: var(--r-md); font-weight: 500; letter-spacing: .01em; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #222; }
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); color: #222; }
.btn-outline-primary { color: var(--primary-700); border-color: var(--primary-600); }
.btn-outline-primary:hover { background: var(--primary-600); color: #222; }
.btn-success { background: var(--accent); border-color: var(--accent); }

/* Ghost button for hero */
.btn-ghost-white { background: rgba(255,255,255,0.88); color: #111; border: 1px solid rgba(0,0,0,.06); }
.btn-ghost-white:hover { background: #fff; box-shadow: var(--shadow-sm); }

/* Cards */
.card { border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: var(--shadow-md); }
.card-header { background: var(--bg-elev); border-bottom: 1px solid var(--border); }
.card-body { background: var(--bg-elev); }
/* Marketplace-style listing card (Facebook-like) */
.mp-card { border-radius: 14px; overflow: hidden; background:#fff; border: 1px solid #e6e6e6; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.mp-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display:block; background:#f4f5f6; }
.mp-meta { padding: 10px 12px 12px 12px; }
.mp-price { font-weight: 700; font-size: 1.05rem; color: #111; }
.mp-title { color:#111; margin-top: 2px; font-size: .98rem; line-height: 1.25; max-height: 2.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mp-desc { color:#4b5563; margin-top: 4px; font-size: .9rem; line-height: 1.25; max-height: 2.6em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mp-loc { color:#6b7280; margin-top: 2px; font-size: .88rem; }
.mp-miles { margin-left: 6px; }

/* Navigation */
.navbar { background: #fff; border-bottom: 1px solid var(--border); transition: background-color .25s ease, box-shadow .25s ease, color .25s ease; }
.navbar .nav-link { font-weight: 500; color: var(--text); }
.navbar .nav-link:hover { color: var(--primary-700); }
/* Align brand left, toggler right; gently raise the logo */
.navbar .navbar-container { display: flex; align-items: center; gap: 1rem; }
.navbar .navbar-brand { padding-top: .25rem; padding-bottom: .25rem; }
.navbar .brand-logo { transform: translateY(-2px); }
@media (max-width: 991.98px){
  .navbar .navbar-toggler { margin-left: auto; }
}

/* Transparent hero navbar (Squarespace-like) */
.navbar-hero { position: absolute; top: 0; left: 0; width: 100%; background: transparent; border-bottom: none; z-index: 1040; }
.navbar-hero .nav-link { color: #fff !important; }
.navbar-hero .nav-link:hover { color: var(--neutral) !important; }
.navbar-hero .navbar-brand, .navbar-hero .navbar-brand * { color: #fff; }
.navbar-hero .navbar-toggler { border-color: rgba(255,255,255,.4); }
.navbar-hero .navbar-toggler-icon { filter: brightness(3); }

/* When hero navbar becomes solid on scroll */
.navbar.nav-solid { background: rgba(255,255,255,0.9); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); backdrop-filter: saturate(180%) blur(8px); }
.navbar-hero.nav-solid .nav-link { color: var(--text) !important; }
.navbar-hero.nav-solid .nav-link:hover { color: var(--primary-700) !important; }
.navbar-hero.nav-solid .navbar-toggler { border-color: rgba(0,0,0,.15); }
.navbar-hero.nav-solid .navbar-toggler-icon { filter: none; }

/* Hero Section */
.hero {
  position: relative;
  background: url(../images/christian-mackie-PBvFpF3f624-unsplash.jpg) no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  min-height: 100vh;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.60), rgba(0,0,0,0.30));
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.6rem); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 1.2vh; }

.hero p { font-size: clamp(1rem, 1.6vw, 1.5rem); margin-bottom: 3vh; }

.cta-btn { font-size: clamp(1rem, 1.2vw, 1.15rem); padding: 1.6vh 2.4vw; border-radius: 1.2vw; box-shadow: var(--shadow-sm); }

/* Features Section */
.feature-section { padding: 6vh 0; background-color: transparent; }

.feature-section h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 5vh; }

.feature-card { border: 1px solid var(--border); transition: transform 0.25s ease, box-shadow 0.25s ease; }

.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.feature-card img { border-radius: 1vw; }

/* Split section (text + image) */
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3vw; align-items: center; }
.split .split-media { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.section-neutral { background: var(--neutral); }
.section-neutral .btn { border-radius: 10px; }

/* Image band with overlay grid */
.image-band { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.image-band img { width: 100%; height: 40vh; object-fit: cover; filter: saturate(.9); display: block; }
.image-band .band-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45)); display:flex; align-items:center; justify-content:center; }
.image-band .band-content { width: min(92vw, 94%); margin: 0 auto; }
.image-band h3 { text-align: center; font-weight: 500; color:#fff; margin-bottom: 2vh; }
/* Squarespace-like cards */
.ss-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 2.4vw;
  grid-template-areas:
    "a b"
    "a c"
    "d c";
}
.ss-card {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 2.4vw;
  padding: 2.4vw;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 28vh;
}
.ss-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ss-card h5 { font-weight: 600; margin-bottom: 1vh; color: var(--text); }
.ss-card p { color: var(--muted); font-size: .98rem; margin: 0; }
/* Make card links/buttons behave like cards */
.ss-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.ss-card.as-button { appearance: none; display: block; width: 100%; text-align: left; border: 1px solid var(--border); background: #fff; }

/* Mosaic positions */
.ss-card--a { grid-area: a; }
.ss-card--b { grid-area: b; }
.ss-card--c { grid-area: c; }
.ss-card--d { grid-area: d; }
.ss-card--tall { min-height: 45vh; }

/* Eyebrow label and spacing */
.ss-eyebrow { display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-bottom:6px; }
.ss-card h5 { font-size: 1.15rem; }
.ss-card .ss-more { margin-top: 1.2vh; font-weight: 500; color: var(--primary-700); }
.ss-card .ss-more:hover { text-decoration: underline; }

/* Tiles / plans */
.tiles { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2vw; }
.tile { background:#fff; border:1px solid var(--border); border-radius: var(--r-md); padding: 2.2vw; box-shadow: var(--shadow-sm); }
.tile h4 { font-weight: 500; margin-bottom: .8vh; }
.tile p { color: var(--muted); }

/* Contact section */
.contact-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 2.8vw; align-items: start; }
.contact-card { background:#fff; border:1px solid var(--border); border-radius: var(--r-lg); padding: 2vw; box-shadow: var(--shadow-sm); }
.contact-card .form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; }
.contact-card .form-group { display:flex; flex-direction:column; margin-bottom: 1.2vw; }
.contact-card label { font-weight: 600; margin-bottom: .6vw; color: var(--text); }
.contact-card input, .contact-card textarea { border:1px solid #cfc9c1; border-radius: 1vw; padding: 1vw 1.2vw; font-size: 1rem; }
.contact-card textarea { resize: vertical; }

/* Get Started Section */
.cta-section {
  position: relative;
  padding: 10vh 0;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--dingley) 0%, var(--woodland) 70%);
}

.cta-section .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 1;
}

.cta-section .container {
  position: relative;
  z-index: 2;
}

.cta-section h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 3vh; }

.cta-section p { font-size: clamp(1rem, 1.6vw, 1.25rem); margin-bottom: 4vh; }

/* CTA background rotator */
.cta-bg-layer { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; transition: opacity 1.2s ease; opacity:0; z-index:0; }
.cta-bg-layer.show { opacity: 1; }

/* Footer */
.footer { background: #111827; color: #e5e7eb; padding: 4vh 0; text-align: center; margin-top: auto; }

.card-link-wrapper {
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-link-wrapper:hover .listing-card {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
  cursor: pointer;
}

.card.listing-card { height: auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 576px) {
  .card.listing-card {
    min-height: 14vh; /* compact cards on mobile; still flexible */
  }
}
.carousel-item img, .carousel-item video { max-height: 56vh; object-fit: cover; }

/* Reveal animation (enhanced) */
.reveal{
  opacity: 0;
  transform: var(--reveal-transform, translateY(2vh));
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
.reveal.reveal-in{ opacity: 1; transform: none; }
.reveal-up{ --reveal-transform: translateY(2.4vh); }
.reveal-down{ --reveal-transform: translateY(-2.4vh); }
.reveal-left{ --reveal-transform: translateX(-2.4vw); }
.reveal-right{ --reveal-transform: translateX(2.4vw); }
.reveal-zoom{ --reveal-transform: scale(.96); }
.reveal-slow{ transition-duration: .8s; }

@media (max-width: 992px){
  .split { grid-template-columns: 1fr; }
  .ss-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tiles { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 576px){
  .ss-card-grid { grid-template-columns: 1fr; grid-template-areas: none; }
  .ss-card--a, .ss-card--b, .ss-card--c, .ss-card--d { grid-area: unset; }
  .ss-card--tall { min-height: 220px; }
  .contact-card .form-row { grid-template-columns: 1fr; }
}

.swiper-button-prev {
  left: 2vw !important;
}

.swiper-button-next {
  right: 2vw !important;
}

.swiper-button-prev,
.swiper-button-next {
  top: 50% !important;
  transform: translateY(-50%);
  width: 4.4vh;
  height: 4.4vh;
  z-index: 10;
  color: #007bff !important;
}

.swiper-button-prev { left: 2vw !important; }
.swiper-button-next { right: 2vw !important; }
.ss-obstacles { position: relative; background: #e7e4dc; padding: clamp(6vh, 8vw, 12vh) 0; }
.ss-obstacles::after { content: none; }
.ss-obstacles > .ss-wrap { position: relative; z-index: 1; width: 100%; padding-left: clamp(2vh, 4vw, 4vh); padding-right: clamp(2vh, 4vw, 4vh); }
.ss-obstacles .band-content { width: 100%; margin: 0 auto; }
.ss-obstacles h3 { color: var(--text); text-align:center; margin-bottom: 3vh; }

/* Responsive brand logo */
.brand-logo { height: clamp(5vh, 8vw, 10vh); width: auto; }

/* -------------------------------------------------
   Mobile Drawer (off-canvas menu for small screens)
   ------------------------------------------------- */
.mobile-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 3050; }
.mobile-drawer-overlay.active { opacity: 1; pointer-events: auto; }
.mobile-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 380px); background: #fff; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .28s ease; z-index: 3060; display: flex; flex-direction: column; padding: 3vh 4vw; }
.mobile-drawer.active { transform: translateX(0); }
.mobile-drawer .drawer-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 2vh; }
.mobile-drawer .drawer-title { font-size: 1.15rem; font-weight: 600; }
.mobile-drawer .drawer-close { background: none; border: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: #555; padding: 0 .5rem; }
.mobile-drawer .drawer-links { display:flex; flex-direction: column; gap: 1.4vh; margin-top: 2vh; }
.mobile-drawer .drawer-links a { color: var(--text); text-decoration: none; font-weight: 500; padding: 1.2vh 0; border-bottom: 1px solid #eee; }
.mobile-drawer .drawer-links a:last-child { border-bottom: none; }
.no-scroll { overflow: hidden; }
@media (min-width: 992px){
  .mobile-drawer, .mobile-drawer-overlay { display: none !important; }
}
/* -------------------------------------------------
   Mobile polish: listings filter toolbar
   ------------------------------------------------- */
.filter-toolbar { border-radius: 1.2rem; }
@media (max-width: 576px){
  .filter-toolbar { position: sticky; top: 0; z-index: 1030; border-radius: 4vw; backdrop-filter: saturate(160%) blur(8px); box-shadow: var(--shadow-sm); }
  .filter-toolbar > div { flex: 1 1 100% !important; }
  .filter-toolbar .btn { width: auto; }
}

/* -------------------------------------------------
   Mobile polish: map filters as slide-in panel
   ------------------------------------------------- */
/* default hidden filters button; shown on mobile within .map-view */
.filter-toggle-btn { display: none; }
 @media (max-width: 768px){
  .map-view .filter-toggle-btn { display: inline-flex; align-items: center; gap: .6em; position: absolute; bottom: 2vh; left: 2vw; z-index: 3070; border-radius: 999px; background:#fff; box-shadow: var(--shadow-sm); padding: .6em 1em; border: 1px solid #e5e7eb; font-weight: 600; }
  .listings-view .filter-toggle-btn {
    display: inline-flex; align-items: center; gap: .6em;
    position: fixed; bottom: calc(3.2vh + env(safe-area-inset-bottom)); left: 4vw;
    z-index: 1999; border-radius: 999px; background:#fff; box-shadow: var(--shadow-sm);
    padding: .65em 1.05em; border: 1px solid #e5e7eb; font-weight: 600;
  }
  .map-container { height: calc(100vh - 16vh); }
  .sidebar { position: fixed; left: 0; top: 0; height: 100vh; width: min(82vw, 360px); transform: translateX(-100%); transition: transform .28s ease; box-shadow: var(--shadow-lg); z-index: 3068; background: #fff; }
  .sidebar.visible { transform: translateX(0); }
  #map-sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 3065; }
  #map-sidebar-overlay.active { opacity: 1; pointer-events: auto; }
  /* Hide inline toolbar on small screens; use slide-in filters */
  .filter-toolbar { display: none !important; }
  /* Remove extra spacer container above title on listings page */
  .listings-filter-container { display: none !important; }
  /* Tighten the title container spacing on mobile */
  .listings-view { margin-top: 2vh !important; }
}

/* Map sidebar tidy */
.sidebar h2 { margin: 0 0 1rem; font-size: clamp(1.1rem, 2.8vw, 1.4rem); }
.filter-group button { border-radius: .75rem; }
/* Shared spacing for filter sidebar in Map and Listings */
.sidebar .filter-group { margin-bottom: 1.1rem; }
.sidebar .filter-group label { margin-bottom: .45rem; display: block; }
.sidebar .filter-actions { display:flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.sidebar .filter-actions .btn { border-radius: .75rem; }

/* Listings page: don't show the slide-in sidebar on desktop */
@media (min-width: 769px){
  #listings-sidebar { display: none !important; }
  /* Reduce excessive vertical padding on the desktop filter toolbar container */
  .listings-filter-container.section { padding-top: 2vh !important; padding-bottom: 2vh !important; }
}

.footer-container { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.footer-powered { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin: 0; }
.footer-copy { margin: 0; color: #cbd5f5; }

/* Ensure browse listings content never feels clipped by footer */
.listings-view { padding-bottom: 18vh; }