/* =========================================================
   MyLoanHelper.com — Responsive Styles
   ========================================================= */

/* ---------- Large tablets / small laptops ---------- */
@media (max-width: 1100px) {
  .main-nav > ul > li > a, .dropdown-toggle { padding: 10px 10px; font-size: 0.93rem; }
  .nav-phone small { display: none; }
  .nav-contact { display: none; }
  .nav-wrap { gap: 12px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablet: switch to hamburger ---------- */
@media (max-width: 960px) {
  h1, .hero h1 { font-size: 2.5rem; }
  h2 { font-size: 1.9rem; }
  .section { padding: 68px 0; }

  .hamburger { display: block; }
  .nav-phone { display: none; }
  .nav-actions .btn { display: none; }
  .landing-header .nav-phone { display: flex; }
  .nav-contact { display: block; }

  .main-nav {
    position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(360px, 88vw);
    background: var(--white); flex-direction: column; align-items: stretch; padding: 90px 22px 30px;
    box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; z-index: 1001;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav > ul > li > a, .dropdown-toggle {
    width: 100%; justify-content: space-between; padding: 15px 12px; font-size: 1.05rem; border-bottom: 1px solid var(--border); border-radius: 0;
  }
  .dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0;
    max-height: 0; overflow: hidden; padding: 0 0 0 10px; transition: max-height 0.3s ease; min-width: 0;
  }
  .has-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; }
  .has-dropdown.open .dropdown-menu { max-height: 600px; padding: 6px 0 6px 10px; }
  .has-dropdown:hover .caret { transform: none; }
  .has-dropdown.open .caret { transform: rotate(180deg); }
  .dropdown-menu a { padding: 12px 14px; font-size: 1rem; }
  .mobile-nav-extra { display: block !important; margin-top: 24px; }
  .mobile-nav-extra .btn { width: 100%; margin-bottom: 12px; }

  .nav-overlay { position: fixed; inset: 0; background: rgba(9, 24, 49, 0.55); z-index: 999; opacity: 0; visibility: hidden; transition: var(--transition); }
  .nav-overlay.open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  .hero-grid, .split, .split-wide { grid-template-columns: 1fr; gap: 40px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 40px; max-width: 480px; margin: 0 auto; }
  .trust-items { grid-template-columns: repeat(2, 1fr); }
  .areas-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .calc { grid-template-columns: 1fr; }
  .lo-photo { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  body { font-size: 15.5px; padding-bottom: 66px; }
  h1, .hero h1 { font-size: 2.05rem; }
  h2 { font-size: 1.65rem; }
  h3 { font-size: 1.2rem; }
  .container { padding: 0 18px; }
  .section { padding: 56px 0; }
  .section-sm { padding: 40px 0; }
  .section-header { margin-bottom: 36px; }

  .announcement-bar { font-size: 0.85rem; padding: 9px 12px; }
  .top-bar { display: none; }
  .nav-wrap { height: 68px; }
  .logo-main { font-size: 1.2rem; }
  .logo-sub { font-size: 0.62rem; }
  .landing-header .nav-phone { display: flex; }
  .landing-header .nav-phone strong { font-size: 0.98rem; }

  .hero { padding: 60px 0 68px; }
  .hero .lead { font-size: 1.05rem; }
  .hero-card { padding: 24px; }
  .btn-group { flex-direction: column; }
  .btn-group .btn { width: 100%; }
  .btn-lg { padding: 16px 28px; font-size: 1.05rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 20px; }
  .trust-items { grid-template-columns: 1fr 1fr; gap: 16px; }
  .trust-item { flex-direction: column; text-align: center; gap: 8px; }
  .areas-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card, .testimonial { padding: 24px; }
  .form-box { padding: 26px 18px; }
  .article { padding: 24px; }
  .calc { padding: 22px; }
  .calc-result .amount { font-size: 2.4rem; }
  .testimonial-featured { padding: 28px 22px; }

  .cta-strip .container { flex-direction: column; text-align: center; }
  .cta-strip .btn { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
  .footer-bottom a { margin: 0 8px; }

  /* Sticky touch-friendly mobile CTA bar */
  .mobile-cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; position: fixed; bottom: 0; left: 0; right: 0; z-index: 950;
    box-shadow: 0 -4px 18px rgba(0,0,0,0.15);
  }
  .mobile-cta-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 10px; font-weight: 800; font-size: 1rem; min-height: 60px; }
  .mobile-cta-bar .call { background: var(--primary); color: var(--white); }
  .mobile-cta-bar .apply { background: var(--accent); color: var(--primary-dark); }
  .back-to-top { bottom: 80px; right: 14px; width: 44px; height: 44px; }
}

@media (max-width: 380px) {
  .trust-items, .areas-grid { grid-template-columns: 1fr; }
  .logo-sub { display: none; }
}