/* ==========================================
   MOBILE LAYOUT FIXES
   ========================================== */
@media (max-width: 768px) {
  /* 1. Fix Header Overlap */
  nav {
    padding: 0 12px;
    justify-content: space-between;
  }

  /* Hide desktop menu links on mobile to prevent overlapping the logo */
  .nav-links a:not(.nav-cta) {
    display: none;
  }

  .nav-brand {
    gap: 8px;
  }

  .nav-logo {
    width: 36px;
    height: 36px;
  }

  .nav-name {
    font-size: 0.95rem;
  }

  /* Compact WhatsApp CTA button for mobile header */
  .nav-cta {
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    gap: 4px;
  }

  /* 2. Fix Hero Section & Prevent Bottom Bar Overlap */
  .hero {
    padding-top: calc(var(--announce-h) + var(--nav-h) + 24px);
    padding-bottom: 100px; /* Gives clearance for the bottom navigation bar */
  }

  .hero-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 16px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  /* 3. Stack Hero Stats Vertically for Small Screens */
  .hero-stats {
    flex-direction: column;
    margin-top: 28px;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    padding: 12px 16px;
  }

  .stat-item:last-child {
    border-bottom: none;
  }
}

@media (max-width: 400px) {
  /* Hide top header CTA on extremely narrow screens since WhatsApp is in the mobile bottom bar */
  .nav-cta {
    display: none !important;
  }
}