/* ============================================================
   xMortgageBroker — Mobile CSS v5 (Clean Rewrite)
   Single authoritative file — no conflicts, no duplicates
   ============================================================ */

/* ── Global: mobile-only elements hidden on desktop ───────── */
.nav__mobile-header { display: none; }
.nav__mobile-cta    { display: none; }

/* ============================================================
   MOBILE & TABLET  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ── Topbar: hidden on mobile ────────────────────────────── */
  .topbar { display: none !important; }

  /* ── Body: offset for fixed nav ─────────────────────────── */
  body {
    padding-top: 60px !important;
  }

  /* ── Hero: pull up to sit under fixed nav ────────────────── */
  .hero {
    margin-top: -60px !important;
    padding-top: calc(60px + 60px) !important;
    text-align: center;
  }
  .hero h1 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .hero__sub {
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
  }
  /* Hero CTA buttons — stacked, full-width, with gap */
  .hero__ctas,
  .hero__btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 1.75rem !important;
  }
  .hero__ctas .btn,
  .hero__btns .btn {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    display: block !important;
  }
  .hero__trust {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* ── Nav bar ─────────────────────────────────────────────── */
  .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9998 !important;
    background: #0a0a0a !important;
    border-bottom: 1px solid rgba(200,169,110,0.2) !important;
  }

  /* Inner: logo LEFT, hamburger RIGHT */
  .nav__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 60px !important;
    padding: 0 16px !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  /* Logo: always visible, always left */
  .nav__logo {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    z-index: 10001 !important;
    order: 1 !important;
  }
  .nav__logo img {
    height: 28px !important;
    width: auto !important;
    display: block !important;
  }

  /* Nav links: hidden by default, fullscreen overlay when open */
  .nav__links {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #0a0a0a !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    z-index: 10000 !important;
    padding: 0 24px 40px !important;
    overflow-y: auto !important;
    order: 2 !important;
    list-style: none !important;
    margin: 0 !important;
  }
  .nav__links.nav-open {
    display: flex !important;
  }

  /* Nav actions: hamburger only, right side */
  .nav__actions {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    z-index: 10001 !important;
    order: 3 !important;
  }

  /* Hide desktop CTA button */
  .nav__cta-desktop { display: none !important; }

  /* Hamburger: 3 bars, right-aligned */
  .nav__hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10001 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .nav__hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 2px !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
  }

  /* ── Mobile overlay: Navigation header ───────────────────── */
  .nav__mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 18px 0 18px !important;
    border-bottom: 1px solid rgba(200,169,110,0.25) !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
  }
  .nav__mobile-label {
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #c8a96e !important;
  }
  /* Close button (×) inside overlay */
  .nav__mobile-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    color: #fff !important;
    flex-shrink: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }
  .nav__mobile-close:hover {
    background: rgba(200,169,110,0.2) !important;
    border-color: rgba(200,169,110,0.4) !important;
  }

  /* ── Overlay nav links ───────────────────────────────────── */
  .nav__links li {
    width: 100% !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    list-style: none !important;
  }
  .nav__links li:last-child {
    border-bottom: none !important;
  }
  .nav__links a,
  .nav__links button.nav__dropdown-toggle {
    display: block !important;
    width: 100% !important;
    padding: 16px 0 !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    color: #fff !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }
  .nav__links a:hover,
  .nav__links button.nav__dropdown-toggle:hover,
  .nav__links a.active {
    color: #c8a96e !important;
  }

  /* Dropdown sub-items */
  .nav__dropdown-menu {
    position: static !important;
    background: rgba(255,255,255,0.04) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: none !important;
    flex-direction: column !important;
  }
  .nav__dropdown.is-open .nav__dropdown-menu {
    display: flex !important;
  }
  .nav__dropdown-menu li a {
    font-size: 0.88rem !important;
    padding: 11px 0 !important;
    color: rgba(255,255,255,0.6) !important;
  }
  .nav__dropdown-label {
    font-size: 0.6rem !important;
    padding: 10px 0 2px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #c8a96e !important;
  }
  .nav__dropdown-divider { display: none !important; }

  /* Mobile CTA at bottom of overlay */
  .nav__mobile-cta {
    display: block !important;
    border-bottom: none !important;
    padding-top: 24px !important;
    width: 100% !important;
  }
  .nav__mobile-cta a {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center;
  }
  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer__brand img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .footer__brand p,
  .footer__contact-info {
    text-align: center;
  }
  .footer__social {
    justify-content: center !important;
    display: flex;
    gap: 16px;
  }
  .footer__col {
    text-align: center;
  }
  .footer__col h5 {
    text-align: center;
  }
  .footer__col ul {
    padding: 0;
    list-style: none;
  }
  .footer__col ul li {
    margin-bottom: 10px;
  }
  .footer__legal,
  .footer__bottom {
    text-align: center;
  }
  .footer__bottom {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* ── Homepage sections ───────────────────────────────────── */
  .stats-bar__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  .stat-item { text-align: center; }

  .programs-grid,
  .program-cards--3,
  .lanes-grid,
  .why-grid,
  .team-grid,
  .blog-preview__grid {
    grid-template-columns: 1fr !important;
  }

  .rates-bar__inner {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .rates-bar__item {
    min-width: 120px;
    text-align: center;
  }

  /* Team card: stack vertically */
  .team-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 2rem 1.5rem !important;
  }
  .team-card__photo-wrap {
    margin: 0 auto 1.5rem !important;
    flex-shrink: 0 !important;
  }
  .team-card__body { width: 100% !important; }
  .team-card__btns { justify-content: center !important; }

  /* CTA strip */
  .cta-strip__inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1.5rem !important;
  }
  .cta-strip__btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .cta-strip__btns .btn {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
  }

  /* ── Blog ────────────────────────────────────────────────── */
  .blog-grid,
  .blog-featured,
  .blog-post-layout {
    grid-template-columns: 1fr !important;
  }
  .blog-post-layout .blog-sidebar { order: -1; }
  .blog-featured__image,
  .blog-post__featured-img {
    height: 220px;
    object-fit: cover;
    width: 100%;
  }

  /* ── Chat ────────────────────────────────────────────────── */
  .chat-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .chat-sidebar { display: none; }
  .chat-window {
    height: 70vh;
    min-height: 400px;
  }
  .chat-starters { grid-template-columns: 1fr !important; }

  /* ── Apply / Pre-qual ────────────────────────────────────── */
  .apply-layout { grid-template-columns: 1fr !important; }
  .apply-deco { display: none; }
  .form-row { grid-template-columns: 1fr !important; }

  /* ── Rates page ──────────────────────────────────────────── */
  .rates-split {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .rates-table__row {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }
  .rates-cta-box { padding: 28px 20px !important; }
  .rates-cta-box .btn { width: 100%; text-align: center; }

  /* ── News ────────────────────────────────────────────────── */
  .news-grid { grid-template-columns: 1fr !important; }

  /* ── Rochester page ──────────────────────────────────────── */
  .areas-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .two-col-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .data-table { font-size: 0.85rem !important; }

  /* ── FAQ page ────────────────────────────────────────────── */
  .faq-category-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .faq-item summary.faq-item__q {
    font-size: 0.95rem !important;
    padding: 1rem 1.25rem !important;
  }

  /* ── Breadcrumb ──────────────────────────────────────────── */
  .breadcrumb ol {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* ── General utility ─────────────────────────────────────── */
  .section { padding: 48px 0 !important; }
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  h1 { font-size: clamp(1.8rem, 7vw, 2.8rem); }
  h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  h3 { font-size: clamp(1.2rem, 5vw, 1.6rem); }
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
}

@media (max-width: 768px) {
  /* When menu is open: hide hamburger (overlay has its own close btn)
     and lower logo z-index so it sits behind the overlay */
  body.menu-open .nav__hamburger {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  body.menu-open .nav__logo {
    z-index: 9997 !important;
  }
  body.menu-open .nav__actions {
    z-index: 9997 !important;
  }
}

/* ============================================================
   EXTRA SMALL PHONES  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .stats-bar__grid { grid-template-columns: 1fr 1fr !important; }
  .hero h1 { font-size: 1.8rem; }
  .btn--lg {
    padding: 14px 20px;
    font-size: 0.95rem;
  }
  .hero__ctas .btn,
  .hero__btns .btn {
    max-width: 100% !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
  }
  .areas-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ============================================================
   DESKTOP ONLY  (≥ 769px)
   Hide mobile-only elements
   ============================================================ */
@media (min-width: 769px) {
  .nav__mobile-header { display: none !important; }
  .nav__mobile-cta    { display: none !important; }
}