/* site-improved.css - Modern, clean styles for Shri Swami Motors */

/* Google fonts: Poppins (headings), Inter (body) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Poppins:wght@600;700&display=swap');

:root{
  --primary:#0B3D91; /* deep indigo - trust & solidity */
  --secondary:#E6F0FF; /* light blue background */
  --accent:#FF6A00; /* energetic orange for CTA */
  --muted:#6B7280; /* secondary text */
  --card-bg: #ffffff;
  --radius:12px;
  --container-width:1200px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:#111827;
  background:linear-gradient(180deg, #FBFDFF 0%, var(--secondary) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding:28px 18px;
}

/* Layout container */
.container{
  max-width:var(--container-width);
  margin:0 auto;
  padding:0 20px;
}

/* Header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
}
.site-brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.site-brand img{height:56px; width:auto; border-radius:8px;}
.site-nav a{margin-left:18px; text-decoration:none; color:var(--primary); font-weight:600}

/* Grid for listings */
.grid{
  display:grid;
  gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items:start;
}

/* Vehicle card */
.vehicle-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:14px;
  box-shadow: 0 6px 18px rgba(9,30,66,0.08);
  transition:transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.vehicle-card:hover{
  transform:translateY(-6px);
  box-shadow: 0 12px 28px rgba(9,30,66,0.12);
}
.vehicle-media{
  width:100%;
  height:160px;
  border-radius:10px;
  overflow:hidden;
  background:#f3f4f6;
  display:flex; align-items:center; justify-content:center;
}
.vehicle-media img{width:100%; height:100%; object-fit:cover; display:block}

/* Card content */
.card-body{padding-top:10px; display:flex; flex-direction:column; gap:8px}
.h5{font-family:'Poppins',sans-serif; font-size:16px; font-weight:600; color:#0B2345}
.meta{font-size:13px; color:var(--muted)}
.price{font-weight:700; font-size:18px; color:var(--primary)}

/* CTA button */
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  color:white;
  background:linear-gradient(90deg,var(--accent), #ff8a3d);
  border:none;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:scale(.995)}
.btn.secondary{
  background:transparent;
  color:var(--primary);
  border:1px solid rgba(11,61,145,0.12);
  font-weight:600;
}

/* Trust / testimonial */
.testimonial{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border-left:4px solid var(--primary);
  padding:12px 14px;
  border-radius:8px;
}

/* Responsive tweaks */
@media (max-width:640px){
  .site-header{flex-direction:column; align-items:flex-start}
  .vehicle-media{height:140px}
}

/* Utility */
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.muted{color:var(--muted); font-size:13px}
.small{font-size:13px}




/* Responsive header & nav */

/* Responsive header & nav - mobile-first */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  width:100%;
}
.site-brand{display:flex; align-items:center; gap:12px}
.site-brand img{height:48px; width:auto;}
/* Desktop nav hidden by default (mobile-first) */
.site-nav{
  display:none;
  gap:18px;
  align-items:center;
}
.site-nav a{ text-decoration:none; color:var(--primary); font-weight:600; padding:8px 10px; border-radius:8px;}
.site-nav a:hover{ background:rgba(11,61,145,0.06);}

/* Hamburger visible on mobile */
.nav-toggle{
  display:block;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle .bar{ display:block; width:22px; height:2px; margin:4px 0; background:var(--primary); border-radius:2px; transition:transform .15s ease, opacity .15s ease;}
.nav-toggle.open .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.open .bar:nth-child(2){ opacity:0; }
.nav-toggle.open .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  display:none; /* hidden by default; shown only when .open present */
  padding:10px 0;
}

/* When mobile open */
.mobile-nav.open{ display:block; }

/* Larger screens: show desktop nav and hide mobile toggle */
@media (min-width:761px){
  .site-nav{ display:flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
}



/* Mobile/nav visibility fixes */
.site-header{ position:relative; z-index:1200; background:transparent; padding-top:8px; padding-bottom:8px; }
.mobile-nav{ background:#ffffff; box-shadow: 0 8px 20px rgba(9,30,66,0.06); padding:12px 0; margin-top:8px; border-radius:8px; }
.mobile-nav a{ display:block; padding:10px 12px; }
.site-header, .mobile-nav { width:100%; }
/* Ensure images show and not hidden */
.vehicle-media img, img { visibility:visible; opacity:1; }


/* v10 overrides */

/* v10 mobile header/nav improvements - compact header and clean mobile menu */
.site-header{
  padding:8px 12px;
  background:transparent;
  align-items:center;
}
.site-brand img{ height:40px; width:auto; }
.site-brand div{ line-height:1; }
.nav-toggle{ margin-left:6px; }

/* mobile nav full screen width and compact list */
.mobile-nav{
  display:none;
  background:#ffffff;
  position:relative;
  z-index:1300;
  border-radius:8px;
  padding:8px 0;
  margin-top:8px;
}
.mobile-nav.open{ display:block; }

/* nav links spacing and size for touch */
.mobile-nav a{ display:block; padding:12px 16px; font-size:17px; color:var(--primary); border-bottom:1px solid rgba(11,61,145,0.06); }

/* Avoid header overlap with content when menu open */
body.menu-open { padding-top: 0; }

/* Ensure header always on top */
.site-header{ position:relative; z-index:1400; }

/* reduce hero top margin to prevent big gap on mobile */
.container > h1, .container > .hero, .page-hero { margin-top:10px; }

/* hide any literal 
 remnants via CSS as a safety net */
.remnant-backslash-one{ display:none !important; }


/* v11 updates */

/* v11: Mobile header and typography adjustments */
html, body { font-size: 16px; } /* base for mobile-first */
body { -webkit-text-size-adjust: 100%; }

/* Header adjustments */
.site-header { justify-content: flex-start; gap:12px; padding:8px 14px; }
.site-brand { margin-right: 10px; }
.nav-toggle { margin-left: auto; } /* keep toggle to the right */
.site-nav a { font-size: 17px; padding:10px 12px; }

/* Mobile menu touch targets */
.mobile-nav a { font-size: 17px; padding:14px 16px; }

/* Increase card title/body size */
.h5 { font-size: 18px; }
.card-body .muted { font-size: 14px; }

/* Ensure header not centered */
.site-header .site-nav, .site-header .nav-toggle { margin-left: auto; }

/* Reduce duplicated visual icon sizes */
.nav-toggle .bar { height:3px; width:24px; }

/* Ensure no duplicate icons visible (safety) */
button.nav-toggle + button.nav-toggle { display:none !important; }