/* ================================
   Mobile Upgrade (drop at end)
   ================================ */

/* Base tweaks */
img { max-width: 100%; height: auto; }

/* ---------- Responsive hero ---------- */
@media (max-width: 900px){
  .hero .hero-copy { max-width: 100%; margin: 12px 0; padding: 14px; }
  .hero h1 { font-size: 34px; }
  .hero .hero-bg { background-position: center 42%; }
  .hero-ctas { flex-direction: column; gap: 10px; }
  .cta-card { max-width: 100%; }
}

/* Very small phones */
@media (max-width: 540px){
  .hero h1 { font-size: 28px; line-height: 1.1; }
  .hero p { font-size: 14px; }
}

/* ---------- Inventory tiles on mobile ---------- */
@media (max-width: 900px){
  #inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #inv-grid .thumb { height: 130px; }
  #featured .thumb { height: 120px; }
}
@media (max-width: 520px){
  #inv-grid { grid-template-columns: 1fr; }
}

/* ---------- Forms stack nicely ---------- */
@media (max-width: 900px){
  .grid-2 { grid-template-columns: 1fr; }
  /* Avoid iOS zoom on focus */
  input, select, textarea { font-size: 16px; }
}

/* ---------- Contact map smaller on phones ---------- */
@media (max-width: 900px){
  section#contact iframe { height: 320px !important; }
}

/* ---------- Brand pills wrap better ---------- */
@media (max-width: 900px){
  .brands-row { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
}

/* ======================================
   Mobile nav (hamburger + safari fix)
   ====================================== */

/* Hidden on desktop, shown on mobile by your JS */
.hamburger { display: none; }

@media (max-width: 980px){
  /* Show hamburger icon and make it dark */
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0f172a; /* dark */
  }

  /* Base mobile drawer styles (hidden by default; shown when body.nav-open) */
  .header .nav {
    display: none;
  }
  body.nav-open .header .nav {
    display: flex !important;
    position: fixed !important;
    left: 0; right: 0; top: 64px;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    background: #ffffff !important;      /* white drawer */
    border-bottom: 1px solid #e5e7eb !important;
    z-index: 1000;                        /* above hero */
  }

  /* Force black text (iPhone Safari included) */
  .header .nav a,
  .header .nav a:link,
  .header .nav a:visited {
    display: block; width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important; /* Safari override */
    font-weight: 800;
    text-decoration: none !important;
  }

  .header .nav a:hover,
  .header .nav a:focus {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #d1d5db;
    text-decoration: none;
  }

  .header .nav a.active {
    background: #fff7e6 !important;  /* soft highlight */
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    border-color: #f1c36c;
  }
}