/* Base */
body {
  font-family: 'Inter', sans-serif;
  background-color: #f8fafc; /* slate-50 */
}

/* Hero */
.hero-bg {
  background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
    url('https://images.pexels.com/photos/1115804/pexels-photo-1115804.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
  background-size: cover;
  background-position: center;
}

/* Animations */
.fade-in { animation: fadeIn 0.8s ease-in-out; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav links underline on hover/active */
.nav-link {
  position: relative;
  transition: color 0.3s;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #0C2B5A; /* updated */
  transition: width 0.3s;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Cards */
.property-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Buttons */
.btn-primary {
  background-color: #0C2B5A;
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  transition: background-color .3s, transform .2s, box-shadow .3s;
  display: inline-block;
}
.btn-primary:hover {
  background-color: #0C2B5A;
  transform: scale(1.05);
}

.btn-secondary {
  background-color: #ffffff;
  color: #0C2B5A;
  border: 1px solid #0C2B5A;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  transition: background-color .3s, transform .2s, box-shadow .3s, color .3s;
  display: inline-block;
}
.btn-secondary:hover {
  background-color: #0C2B5A;
  color: #ffffff;
  transform: scale(1.05);
}

.btn-outline {
  border: 1px solid #0C2B5A;
  color: #0C2B5A;
  background: transparent;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}
.btn-outline:hover {
  background: #0C2B5A;
  color: #fff;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Prose defaults */
.prose h2 { font-size: 1.5rem; font-weight: 700; margin: 1rem 0; }
.prose p  { margin: 1rem 0; line-height: 1.75; }
.prose ul { list-style: disc; margin: 1rem 0; padding-left: 1.25rem; }
.prose li { margin: 0.5rem 0; }

/* Sell view essentials */
.sell-wrapper { padding-top:100px; padding-bottom:60px }
.card {
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.08);
  padding:24px;
  margin:24px auto;
  max-width:1100px
}
.hero-sell {
  background:linear-gradient(120deg,rgba(0,0,0,.6),rgba(0,0,0,.2)),
  url('https://images.unsplash.com/photo-1505692794403-34d4982f88aa?q=80&w=1800&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
  border-radius:18px;
  color:#fff;
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:24px auto;
  max-width:1100px;
  padding:40px
}
.hero-sell .btn-primary{display:inline-block;margin-top:14px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600}
input,select,textarea{border:1px solid #ddd;border-radius:10px;padding:10px;font:inherit}
.submit-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.media-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:10px}
.media-preview .thumb{border:1px solid #eee;border-radius:10px;overflow:hidden;padding:4px;text-align:center}
.media-preview img, .media-preview video{max-width:100%;height:100px;object-fit:cover;border-radius:8px}
.map-embed iframe{width:100%;height:260px;border:0;border-radius:12px;margin-top:8px}
fieldset{border:1px dashed #e5e7eb;border-radius:12px;padding:16px;margin-top:18px}
legend{padding:0 8px;font-weight:700}
@media (max-width:850px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero-sell{min-height:220px}
}
/* Keep the button only on mobile; hide on md+ */
@media (min-width: 768px) {
  .hamburger-btn { display: none; }
}

/* Make the tap target comfy and above the slideout */
.hamburger-btn {
  line-height: 1;
  background: #fff;         /* adjust to your theme */
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  z-index: 60;              /* above the mobile menu panel */
}

/* Optional: tighten APD+button spacing on small screens */
.brand { gap: .5rem; }


//* Make mobile menu a left-side panel on phones */
#mobile-menu {
  position: fixed;
  top: 64px;        /* match your header height */
  left: 0;
  width: 280px;     /* side drawer width */
  height: calc(100vh - 64px);
  background: #fff;
  box-shadow: 2px 0 24px rgba(0,0,0,.12);
  overflow-y: auto;
  z-index: 50;
}